.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; } .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; } .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__help { 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; } #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; } /* 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, 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 { 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, .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; } h2 + .add-to-category { margin-top: .5rem; } .add-to-category input[type="submit"] { display: block; } /* * 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: 800px; 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 { columns: 300px 2; column-gap: 32px; overflow: hidden; } .shortcuts-group { /* Don't break a shortcut group between columns */ break-inside: avoid; page-break-inside: avoid; overflow: hidden; } .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; } a.btn_destructive, a.btn_destructive:visited, .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 { padding: 8px 16px; border: 2px solid #999; margin: 0 -16px; } .recent-changes__entry + .recent-changes__entry { margin-top: -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; width: 100%; padding: 4px 2px; } .top-bar__section_search { align-self: center; } @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, .categories-card__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 16px 16px 16px; margin: 0 -16px 16px -16px; border: 2px solid #999; } body[data-rrh-addr^="/interwiki"] main form + form { margin-top: -18px; } .required-field::after { color: red; content: "*"; margin-left: .25rem; } /* * Admin pages */ .users-table { margin-top: 1rem; } /* * Image galleries */ .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 { display: table; } .img-gallery_layout-normal figure { width: 100%; display: table-row; } .img-gallery_layout-normal figure > a { display: table-cell; } .img-gallery_layout-normal figure figcaption { vertical-align: top; display: table-cell; padding-left: 1rem; width: 300px; } } .img-gallery img { max-width: 100%; max-height: 50vh; } figure { margin: 0; } figcaption { padding-bottom: .5rem; } /* * Primitive diff */ .primitive-diff__addition { color: green; } .primitive-diff__deletion { color: red; } .primitive-diff__context { opacity: .5; } @media (prefers-color-scheme: dark) { .primitive-diff__addition { color: #4cd74c; } }