mycorrhiza/static/default.css

.non-existent-hypha__way {
	margin-top: 0.5rem;
	margin-bottom: 2rem;
	padding-right: .25rem;
}

.non-existent-hypha__title { margin-bottom: 1rem; }
.non-existent-hypha__subtitle { margin: 0; }

.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
#upload-binary__input { display: block; margin: .25rem 0 .25rem 0; }

.modal__title { font-size: 2rem; }
.modal__title_small { font-size: 1.5rem; }
.modal__confirmation-msg { margin: 0 0 .5rem 0; }

ol:not(.mycomarkup-doc ol) a { text-decoration: none; display: inline-block; padding: .25rem; }
ol:not(.mycomarkup-doc ol) a:hover { text-decoration: underline; }
.media-type-badge { font-size: smaller; color: #999; }

/* General element positions, from small to big */
/* Phones and whatnot */
body { display: grid; row-gap: .5rem; }
header { width: 100%; }

.layout-card li { list-style-type: none; }

@media screen and (max-width: 800px) {
	.amnt-grid { grid-template-columns: 1fr; }
	body { grid-template-columns: auto; grid-template-rows: auto auto auto; }
	.main-width { width: 100%; }
	main { padding: .5rem 1rem 1rem 1rem; }
}

@media screen and (min-width: 500px) {
	.non-existent-hypha__way {
		float: left;
		width: 50%;
	}

	.non-existent-hypha__ways::after {
		content: '';
		display: block;
		clear: both;
	}
}

/* No longer a phone but still small screen: center main */
@media screen and (min-width: 801px) {
	.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
	main { border-radius: .25rem; }
	.layout-card { width: 800px; margin: 0 auto; }
}


/* Wide enough to fit two columns ok */
@media screen and (min-width: 1100px) {
	body { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: .5rem; }
	header { grid-column: 1 / span 2; grid-row: 1 / span 1; margin: 0; }
	main { grid-column: 1 / span 1; grid-row: 2 / span 2; }
	main.main-width { margin-left: .5rem; }
	.markup-toolbar, .help-topics, .categories-card { grid-column: 2 / span 1; grid-row: 2 / span 1; }
	.sibling-hyphae { grid-column: 2 / span 1; grid-row: 3 / span 1; }
	.action-toolbar { grid-column: 2 / span 1; grid-row: 3 / span 1; }
	.layout-card { width: 100%; margin-left: -.5rem; }
	.edit-toolbar__buttons {display: grid; }
}

@media screen and (min-width: 1150px) {
	.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; grid-column-gap: .125rem; }
}

@media screen and (min-width: 1200px) {
	body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
	header { grid-column: 1 / span 3; grid-row: 1 / span 1; margin: 0; }
	.layout-card {max-width: 18rem;}
	.main-width { margin: 0 auto; }
	main.main-width { grid-column: 2 / span 1; grid-row: 2 / span 3; margin: 0; }
	.sibling-hyphae, .markup-toolbar, .help-topics { grid-column: 3 / span 1; margin-left: -.5rem; grid-row: 2 / span 2; }
	.markup-toolbar { grid-column: 3 / span 1; grid-row: 2 / span 2; margin-left: -.5rem; }
	.action-toolbar, .categories-card { grid-column: 1 / span 1; grid-row: 2 / span 1; margin: 0 -.5rem 0 .5rem; justify-self: end; }
	.edit-toolbar__buttons { grid-template-columns: 1fr; }
}

@media screen and (min-width: 1400px) {
	.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
}

*, *::before, *::after {box-sizing: border-box;}
html { height:100%; padding:0; }
body { margin: 0; font-size:16px; font-family: sans-serif; color: black; }
input, kbd { font: inherit; color: inherit; }
textarea {font-size:16px; font-family: inherit; line-height: 150%; }

.edit_no-preview { height: 90vh; }
.edit_with-preview .edit-form { height: 90vh; }
.edit__title { margin-top: 0; }
.edit__preview { border: 2px dashed #ddd; padding: 10px; margin: 0 -10px; }
.edit-form__textarea { width: 100%; height: 80vh; min-height: 4rem; }
.edit-form p { margin: .25rem 0; }
.edit-form__message { width: 100%; margin: 0.25em 0; }
.edit-form__save { font-weight: bold; }
.edit-toolbar__buttons, .edit-toolbar__ad { margin: .5rem; }
.edit-form { height: 100%; display: flex; flex-direction: column; }

.icon {margin-right: .25rem; vertical-align: bottom; }

main h1:not(.navi-title) {font-size:1.7rem;}
blockquote { margin: 0; padding-left: .75rem; }
.wikilink_external::before { display: inline-block; width: 18px; height: 16px; vertical-align: sub; }
/* .wikilink_external { padding-left: 16px; } */
.wikilink_gopher::before { content: url("/static/icon/gopher-proto.svg"); }
.wikilink_http::before, .wikilink_https::before { content: url("/static/icon/http-proto.svg"); }
/* .wikilink_https { background: transparent url("/static/icon/http-proto.svg") center left no-repeat; } */
.wikilink_gemini::before { content: url("/static/icon/gemini-proto.svg"); }
.wikilink_mailto::before { content: url("/static/icon/mailto-proto.svg"); }

article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; }
main h1 { margin: .5rem 0 0 0; }
main h2, main h3, main h4, main h5, main h6 { margin: 1.5rem 0 0 0; clear: both; }
.heading__link { text-decoration: none; display: inline-block; }
.heading__link::after { width: 1rem; content: "§"; color: transparent; }
.heading__link:hover::after, .heading__link:active::after { color: #999; }
article p { margin: .5rem 0; }
article ul, ol { padding-left: 1.5rem; margin: .5rem 0; }
article code { padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; font-family: 'Menlo', 'PT Mono', monospace; }
article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25rem;}
.codeblock code {padding:0; font-size:15px;}
.transclusion { border-radius: .25rem; margin-bottom: .25rem; clear: both; }
.transclusion_failed { padding: 0 .5rem; }
.transclusion__content > *:not(.binary-container) {margin: 0.5rem; }
.transclusion__link {position: relative; display: block; float: right; text-align: right; font-style: italic; margin-right: .25rem; text-decoration: none; z-index: 2;}
.transclusion__link::before {content: "⇐ ";}

/* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */
.launchpad__entry { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='25' height='12'%3E%3Cg transform='scale(0.7,0.8) translate(-613.21429,-421)'%3E%3Cpath fill='%23999' d='M 638.06773,429.49751 L 631.01022,436.87675 L 630.1898,436.02774 L 632.416,433.30375 L 613.46876,433.30375 L 613.46876,431.66382 L 633.82089,431.66382 L 635.57789,429.5261 L 633.79229,427.35979 L 613.46876,427.35979 L 613.46876,425.71985 L 632.416,425.71985 L 630.1898,422.99587 L 631.01022,422.08788 L 638.06773,429.49751 z '/%3E%3C/g%3E%3C/svg%3E"); }

.binary-container { width: 100%; text-align: center; }
.binary-container_with-img img,
.binary-container_with-video video,
.binary-container_with-audio audio { max-width: 100%; max-height: 30em; width: auto; }

.subhyphae__title { padding-bottom: .5rem; clear: both; }
.navi-title { padding-bottom: .5rem; margin: .25rem 0; }
.navi-title a {text-decoration:none; }
.navi-title__separator { margin: 0 .25rem; }
.navi-title__colon { margin-right: .5rem; }
.upload-amnt { clear: both; padding: .5rem; border-radius: .25rem; }
.upload-amnt__unattach { display: block; }
aside { clear: both; }

.img-gallery { margin-top: .25rem; margin-bottom: .25rem; }
@media screen and (min-width: 700px) {
	.img-gallery_layout-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.img-gallery_layout-side {
		float: right;
		max-width: 50%;
		margin-left: 1em;
	}

	.img-gallery_layout-normal .img-gallery__entry {
	}
	.img-gallery_layout-normal .img-gallery__entry > a {
		display: inline-block;
		width: calc(100% - 320px);
	}
	.img-gallery_layout-normal .img-gallery__entry > a > img {
		max-width: 100%;
	}
	.img-gallery_layout-normal figcaption {
		display: inline-block;
		width: 300px;
		position: absolute;
		padding-left: 1rem;
	}
}
.img-gallery img { max-width: 100%; max-height: 50vh; }
figure { margin: 0; }
figcaption { padding-bottom: .5rem; }

#new-name {width:100%;}

.prevnext__el { display: inline-block; min-width: 40%; padding: .5rem 0; margin-bottom: .25rem; text-decoration: none; border-radius: .25rem; max-width: 49%; }
.prevnext__prev { float: left; }
.prevnext__next { float: right; text-align: right; }

.page-separator { clear: both; }
.history__entries { background-color: #eee; margin: 0; padding: 0; border-radius: .25rem; }
.history__month-anchor { text-decoration: none; color: inherit; }
.history__entry { list-style-type: none; padding: .25rem; }
.history-entry { padding: .25rem; }
.history-entry__time { font-weight: bold; }
.history-entry__author { font-style: italic; }

table { border: #ddd 1px solid; border-radius: .25rem; min-width: 4rem; }
td { padding: .25rem; }
caption { caption-side: top; font-size: small; }

.subhyphae__list, .subhyphae__list ul { display: flex; padding: 0; margin: 0; flex-wrap: wrap; }
.subhyphae__list ul { font-size: 90%; }
.subhyphae__entry { list-style-type: none; border: 1px solid #999; padding: 0; margin: .125rem; border-radius: .25rem; }
.subhyphae__link { display: block; padding: .25rem; text-decoration: none; }
.subhyphae__link:hover { background: #eee; }

.sibling-hyphae__list { padding: 0; margin: 0; }
.sibling-hyphae__entry { clear: both; }
.sibling-hyphae__count { display: inline-block; float: right; }
.sibling-hyphae__entry_this { padding: .25rem .5rem; font-weight: bold; }
.sibling-hyphae__link { text-decoration: none; display: block; padding: .25rem .5rem; }

/* Color stuff */
/* Lighter stuff #eee */
::-webkit-file-upload-button, .btn { background-color: #eee; color: black; }
.btn:visited { color: black; }
.btn_weak { background-color: transparent; }

p code,
article .codeblock,
.recent-changes__entry,
table,
.transclusion_stand-out {
	background-color: rgba(220, 220, 220, 0.5);
}
.transclusion_failed {
	border: 1px solid #a55858;
}
.transclusion_blend .transclusion__link { display: none; }

.layout-card { border-radius: .25rem; background-color: white; }
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; border-radius: .25rem .25rem 0 0; }
.layout-card__title { border-bottom: 1px solid #eee; }

/* Other stuff */
html { background-color: #eee;
}
header { background-color: #ddd; }
main { background-color: white; }
.shy-link { color: black; }

blockquote { border-left: 2px #999 solid; }
.wikilink_interwiki {color:#080;}
.wikilink_new {color:#a55858;}
.transclusion code, .transclusion .codeblock {background-color:#ddd;}
.transclusion__link { color: black; }
.wikilink_new:visited {color:#a55858;}
.navi-title { border-bottom: #eee 1px solid; }
.upload-amnt { border: #eee 1px solid; }
.prevnext { border-top: #eee 1px solid; clear: both; }
td { border: #ddd 1px solid; }

.categories-card__link:hover,
.sibling-hyphae__link:hover { background-color: #eee; }

/* Dark theme! */
@media (prefers-color-scheme: dark) {
html { background: #222; color: #ddd; }
main,  article, header, .layout-card { background-color: #343434; color: #ddd; }

a, .wikilink_external { color: #f1fa8c; }
a:visited, .wikilink_external:visited { color: #ffb86c; }
.wikilink_new, .wikilink_new:visited { color: #dd4444; }

.prevnext__el, .prevnext__el:visited { color: #ddd; }

.layout-card__title { background-color: #343434; }

.transclusion .transclusion__link, a.shy-link { color: #ddd; }

input[type="text"], input[type="password"],
::-webkit-file-upload-button,
.btn,
article code, 
article .codeblock,
.recent-changes__entry,
.history__entry,
.upload-amnt,
textarea,
table { border: 0; background-color: #444444; color: #ddd; }
.transclusion_stand-out { background-color: rgba(68, 68, 68, 0.5); }

.transclusion code,
.transclusion .codeblock { background-color: #454545; }
mark { background: rgba(130, 80, 30, 5); color: inherit; }
}

/*
 * Categories
 */
.categories-card__entries {
	padding: 0;
	margin: 0;
}
.categories-card__entry {
	display: flex;
}
.categories-card__link {
	display: inline-block;
	text-decoration: none;
	padding: .25rem .5rem;
	flex: 9;
}
.categories-card__add-to-cat {
	width: 100%;
}
.categories-card__add-form {
	width: 100%;
	display: flex;
}
.categories-card .categories-card__btn {
	display: block;
	flex: 1;
	border: none;
	background: none;
}
.categories-card #_cat-name {
	width: 100%;
	margin: 0;
	padding: 0 .5rem;
	border: none;
}

/*
 * Shortcuts
 */
template {
	display: none;
}

kbd {
	display: inline-block;
	min-width: 1.5ch;
	text-align: center;
}

.kbd-or {
	opacity: .4;
}

.dialog {
	position: absolute;

	top: 0;
	left: 50%;
	width: 100%;
	max-width: 700px;
	margin: 96px auto;
	padding: 24px;
	transform: translate(-50%, 0);

	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dialog-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
}

.dialog__header {
	position: relative;
	grid-column: 1 / -1;
}

.dialog__title {
	margin: 0;
	font-size: 1.5em;
}

.dialog__close-button {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	margin: 0;
	padding: 8px;
	border: none;
	background: url(/static/icon/x.svg) no-repeat 8px 8px / 16px 16px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.dialog__close-button:active {
	opacity: .7;
}

.shortcuts-help .dialog__content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 32px;
}

.shortcuts-group-heading {
	margin: 1em 0 0.5em;
	font-size: 1.2em;
}

.shortcuts-list {
	margin: 0;
	padding: 0;
}

.shortcuts-list + .shortcuts-list {
	margin-top: 1.5em;
}

.shortcut-row {
	display: flex;
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
}

.shortcut-row__description {
	flex: 1;
}

@media (prefers-color-scheme: dark) {
	.dialog {
		background-color: #343434;
		color: #ddd;
	}
	input, kbd {
		color: #ddd;
	}
}

/*
 * Tables
 */

.users-table {
	width: 100%;
}

.users-table td {
	white-space: nowrap;
}

.table-cell--fill {
	width: 100%;
}

/*
 * Form fields
 */

.form-field {
	margin: 1em 0;
}

.form-field label {
	display: block;
}

@media (min-width: 600px) {
	.form--double .form-field {
		display: grid;
		grid-template-columns: 150px max-content;
		grid-column-gap: 16px;
	}
	.form--double .form-field label {
		grid-column: 1;
	}
	.form--double .form-field input,
	.form--double .form-field button,
	.form--double .form-field select,
	.form--double .form-field textarea,
	.form--double .form-field__input {
		grid-column: 2;
	}
}

/*
 * Form wrap
 */

.form-wrap h2 {
	margin: 1.5em 0 0.25em;
	font-size: 1.2em;
}

/*
 * Notices
 */

.notice {
	margin: 0.5em 0;
	border: 1px solid;
	padding: 0.5em 0.7em;
}

.notice--error {
	border-color: #e15757;
	background-color: #ffb1b1;
}

@media (prefers-color-scheme: dark) {
	.notice--error {
		border-color: #a84343;
		background-color: #5b3535;
	}
}

/*
 * Buttons
 */

::-webkit-file-upload-button,
.btn {
	line-height: normal;
	display: inline-block;
	border: 1px #999 solid;
	border-radius: .15rem;
	text-decoration: none;
	padding: .25rem .5rem;
	font-size: 1rem;
	margin: 0;
}

.btn:hover {
	cursor: pointer;
}

.btn_accent {
	font-weight: bold;
}

.btn_weak {
	border: 1px dashed #999;
}

.btn_destructive {
	border-color: #aa1818;
	background-color: #ee4343;
	color: white;
}

@media (prefers-color-scheme: dark) {
	.btn {
		border: #444 solid 1px;
	}

	.btn:visited {
		color: #ddd;
	}

	.btn_weak {
		background-color: transparent;
	}

	.btn_destructive {
		border-color: #e34343;
		background-color: #b92828;
	}
}

.edit-toolbar__btn {
	font-size: .75rem;
	margin-bottom: .125rem;
}

/*
 * Recent changes
 */

.recent-changes__heading {
	margin: 1.2em 0 0.3em;
	font-size: 1.2em;
}

.recent-changes__entry {
	margin: 12px 0;
	padding: 8px 6px;
	border-radius: 2px;
}

.recent-changes__entry * + * {
	margin-top: 4px;
}

.recent-changes__entry__time {
	font-weight: bold;
}

/*
 * The lock page
 */
.locked-notice {
	background-color: transparent;
	display: flex;
	justify-content: center;
}
.locked-notice .telegram-notice {
	display: none;
}

.locked-notice__message {
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.locked-notice__lock {
	font-size: 8rem;
	margin: 0;
}

.locked-notice__title {
	margin: 0 0 1rem 0;
}

.locked-notice__login-form input {
	margin-bottom: 1rem;
}

/*
 * To-do lists
 */
.item_todo {
	position: relative;
	list-style: none;
}
.item_todo > input[type=checkbox] {
	position: absolute;
	left: -1.6rem;
	top: .1rem;
}

/*
 * Help pages
 */
.help h2:first-of-type {
	margin-top: .5rem;
}
.help-topics__list {
	margin: .5rem 0;
	padding-left: .5rem;
}
.help-topics__list ul {
	padding-left: 1.5rem;
	line-height: 1.6rem;
}

/*
 * Top bar
 */
.top-bar__wrapper {
	display: grid;
	padding: 0;
}
.top-bar a {
	color: black;
	text-decoration: none;
}
.top-bar__section {
	display: block;
}

.top-bar__hamburger-wrapper {
	display: flex;
	height: 100%;
	justify-content: flex-end;
}
.top-bar__hamburger {
	background: transparent;
	color: inherit;
	font-size: inherit;
	border: 0;
	display: block;
	margin: 0 .5rem 0 0;
	padding: 0 .5rem;
}

.top-bar__hamburger:hover,
.top-bar__home-link:hover,
.auth-links__link:hover,
.top-bar__highlight-link:hover {
	background-color: #eee;
}
.auth-links__box {
	display: block;
	line-height: 2rem;
}
.auth-links__link {
	display: block;
	padding: 0 .5rem;
}
.top-bar__home-link-wrapper,
.top-bar__highlight {
	display: block;
	margin-right: .5rem;
	line-height: 2rem;
}
.top-bar__home-link,
.auth-links__link,
.top-bar__highlight-link {
	display: block;
	padding: 0 .5rem;
}

.top-bar__search-bar {
	border: 0;
	vertical-align: -webkit-baseline-middle; /* You have no idea how sorry I am. This is a non-standard value. Seems to work in Safari, Opera and mobile Chrome. We need a jedi and a knight in shiny armor to replace it with something more standard. */
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	.top-bar a {
		color: #ddd;
	}
	.top-bar__hamburger:hover,
	.top-bar__home-link:hover,
	.auth-links__link:hover,
	.top-bar__highlight-link:hover {
		background-color: #444;
	}
}

@media screen and (min-width: 800px) {
	.top-bar {
		padding: 0;
	}
	.top-bar__wrapper {
		margin: 0 2rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.top-bar__section_home {
		grid-column: 1 / span 1;
	}
	.top-bar__section_search {
		grid-column: 2 / span 1;
	}
	.top-bar__section_auth {
		grid-column: 3 / span 1;
	}
	.top-bar__section_highlights {
		grid-column: 1 / span 3;
	}
	.top-bar__section_hamburger {
		display: none;
	}

	.top-bar__search-bar {
		width: 100%;
	}

	.auth-links {
		display: flex;
		justify-content: flex-end;
		margin-right: -.5rem;
	}
	.top-bar__section_home,
	.top-bar__highlights {
		display: flex;
		padding: 0;
		margin: 0 0 0 -.5rem;
	}
}

@media screen and (max-width: 799px) {
	header {
		margin: 0;
	}
	.top-bar__wrapper {
		margin: 0;
		grid-template-columns: 2fr 1.3fr .7fr;
	}
	.top-bar__section_home {
		grid-column: 1 / span 1;
		margin-left: .5rem;
	}
	.top-bar__section_search {
		grid-column: 2 / span 1;
		text-align: center;
		width: 100%;
	}
	.top-bar__section_hamburger {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
	}
	.top-bar__section_auth,
	.top-bar__section_highlights {
		grid-column: 1 / span 3;
	}
	.auth-links {
		padding: 0;
	}
	.top-bar__highlights {
		padding: 0;
	}
	.top-bar__highlight {
		margin-right: 0;
	}
	.auth-links__link,
	.top-bar__highlight-link {
		padding-left: 1rem;
	}
	.top-bar__section_hidden-on-mobile {
		display: none;
	}
}

/*
 * Buttons beside the hypha title
 */
.btn_navititle {
	float: right;
	margin: -0.25rem 0;
	padding: 0;
}
.btn__link_navititle {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: .25rem .5rem;
}

/*
 * Hypha bottom
 */
#hypha-bottom {
	clear: both;
}
.hypha-info {
	display: block;
}
.hypha-info__list {
	padding: 0;
	margin-bottom: 0;
}
.hypha-info__entry {
	display: inline;
}
.hypha-info__link {
	color: #999;
}
.hypha-info__link:hover {
	color: inherit;
}
.hypha-info__entry + .hypha-info__entry {
	text-transform: lowercase;
}
.hypha-info__entry:not(:last-child) a::after {
	content: ", ";
	display: inline-block;
	text-decoration: none;
}

/*
 * Definition list
 */
dt {
	font-weight: bold;
}
dd + dt {
	margin-top: .5rem;
}

/*
 * Interwiki page
 * A possible improvement: show those two fields when Generic is selected, hide otherwise
 */
body[data-rrh-addr^="/interwiki"] label,
body[data-rrh-addr^="/interwiki"] input[type="text"],
body[data-rrh-addr^="/interwiki"] input[type="url"] {
	display: block;
	width: 100%;
	max-width: 35rem;
}
body[data-rrh-addr^="/interwiki"] main form {
	padding: 0 1rem 1rem 1rem;
	margin: 0 -1rem 1rem -1rem;
	border: 2px solid #999;
}
.required-field::after {
	color: red;
	content: "*";
	margin-left: .25rem;
}