348 lines
16 KiB
CSS
348 lines
16 KiB
CSS
/**
|
|
* @id default
|
|
* @name Default
|
|
* @description The default theme.
|
|
* @author Starbeamrainbowlabs
|
|
* @author_link https://starbeamrainbowlabs.com/
|
|
* @minversion v0.20
|
|
*/
|
|
|
|
:root {
|
|
--bg-back: #eee8f2;
|
|
--bg-page: #faf8fb;
|
|
--bg-page-inset: hsl(270, 22%, 88%);
|
|
|
|
--bg-comments-1: hsl(31, 64%, 85%);
|
|
--bg-comments-2: hsla(27, 92%, 68%, 0.64);
|
|
--bg-comments-3: hsla(30, 84%, 72%, 0.54);
|
|
--bg-comments-4: hsla(32, 82%, 62%, 0.3);
|
|
|
|
--text-dark: #111111;
|
|
--text-light: hsl(0, 0%, 96%);
|
|
--text-bright: hsl(274, 40%, 41%);
|
|
--text-placeholder-light: hsla(0, 0%, 100%, 0.9);
|
|
--text-os-button: #514C4C;
|
|
|
|
--text-soft: rgba(33, 33, 33, 0.3);
|
|
--text-ultrasoft: rgba(50, 50, 50, 0.3);
|
|
--shadow: rgba(80, 80, 80, 0.5);
|
|
|
|
--checkerboard-bg: #eee;
|
|
--checkerboard-overlay: rgba(200, 200, 200, 0.2);
|
|
|
|
--accent-a0: hsl(253, 79%, 88%);
|
|
--accent-a0t: hsla(253, 79%, 88%, 0.3);
|
|
--accent-a1: #9e7eb4;
|
|
--accent-a2: #8a62a7;
|
|
--accent-a3: #442772;
|
|
--accent-a4: hsl(253, 79%, 88%);
|
|
|
|
--accent-b1: #ffa74d;
|
|
--accent-b2: #fb701a;
|
|
|
|
--accent-c1: #e60707;
|
|
--accent-c2: #820f0f; /*#8b1a1a*/
|
|
--accent-c3: hsl(0, 59%, 20%); /*#8b1a1a*/
|
|
|
|
--accent-d1: hsl(160, 73%, 26%);
|
|
--accent-d2: hsl(159, 76%, 23%);
|
|
--accent-d3: hsl(160, 80%, 70%);
|
|
|
|
--tag: #e2d5eb;
|
|
--file: white;
|
|
|
|
--addition: #09b400;
|
|
--deletion: #cf1c11;
|
|
--nochange: #847bc7;
|
|
|
|
/* #ffdb6d #36962c hsl(36, 78%, 80%) hsla(262, 92%, 68%, 0.42) */
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-back: hsl(270, 29%, 28%);
|
|
--bg-page: hsl(273, 15%, 16%);
|
|
--bg-page-inset: hsl(273, 20%, 20%);
|
|
|
|
--bg-comments-1: hsl(263, 25%, 16%);
|
|
--bg-comments-2: hsla(264, 45%, 16%, 0.64);
|
|
--bg-comments-3: hsla(266, 64%, 28%, 0.54);
|
|
--bg-comments-4: hsla(268, 82%, 32%, 0.3);
|
|
|
|
--text-dark: hsl(277, 38%, 89%);
|
|
--text-bright: hsl(274, 75%, 81%);
|
|
/* --text-light: hsl(0, 0%, 6%); */
|
|
|
|
--text-soft: hsla(0, 0%, 92%, 0.6);
|
|
--text-ultrasoft: hsla(0, 0%, 95%, 0.4);
|
|
|
|
--shadow: rgba(20, 20, 20, 0.5);
|
|
|
|
--accent-a0: hsl(253, 79%, 88%);
|
|
--accent-a1: #9e7eb4;
|
|
--accent-a2: #442772;
|
|
--accent-a3: hsl(274, 40%, 41%);
|
|
--accent-a4: hsl(253, 49%, 20%);
|
|
|
|
--accent-b2: hsl(22, 96%, 64%);
|
|
|
|
--accent-c1: hsl(5, 100%, 76%);
|
|
--accent-c2: hsl(4, 95%, 68%); /*#8b1a1a*/
|
|
--accent-c3: hsl(2, 90%, 58%);
|
|
|
|
--accent-d1: hsl(160, 73%, 46%);
|
|
|
|
--tag: hsl(273, 46%, 27%);
|
|
}
|
|
a { color: hsl(208, 67%, 67%); }
|
|
a:hover { color: hsl(214, 67%, 75%); }
|
|
a:active, a:focus { color: hsl(214, 87%, 85%); }
|
|
a:visited { color: hsl(264, 77%, 65%); }
|
|
|
|
.invert-when-dark { filter: invert(100%); }
|
|
}
|
|
|
|
/* TODO: Refactor to use the CSS grid */
|
|
|
|
body { margin: 2rem 0 0 0; background: var(--bg-back); line-height: 1.45em; color: var(--text-dark); font-family: sans-serif; }
|
|
|
|
nav { display: flex; background-color: var(--accent-a2); color: var(--accent-b1); }
|
|
nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem var(--shadow); }
|
|
nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem var(--shadow); }
|
|
|
|
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
|
|
nav.mega-menu .category { padding: 0.3em 1em; }
|
|
nav.mega-menu strong { display: block; }
|
|
nav.mega-menu span { display: block; }
|
|
|
|
nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
|
|
nav:not(.mega-menu) > span { border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
|
|
nav:not(.nav-more-menu) > span { text-align: center; }
|
|
nav:not(.nav-more-menu) a { text-decoration: none; color: inherit; }
|
|
nav:not(.nav-more-menu):not(.mega-menu) > span > a { font-weight: bolder; }
|
|
.nav-divider { color: transparent; }
|
|
|
|
.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; }
|
|
label { font-weight: bold; }
|
|
label { cursor: pointer; }
|
|
.nav-more-menu { z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: 100000px; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
|
|
input[type=checkbox]:checked ~ .nav-more-menu { right: -0.2rem; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
|
|
.nav-more-menu span { white-space: nowrap; }
|
|
|
|
.inflexible { flex: none; }
|
|
.off-screen { position: absolute; top: -1000px; left: -1000px;}
|
|
|
|
input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: var(--text-light); background: var(--accent-a0t); border: 0; border-radius: 0.3rem; }
|
|
input[type=search]::-webkit-input-placeholder { color: var(--text-placeholder-light); }
|
|
input[type=search]::-moz-placeholder { color: var(--text-placeholder-light); }
|
|
input:focus, textarea:focus { outline: 0.15em solid var(--accent-a0); }
|
|
input[type=button], input[type=submit] { cursor: pointer; }
|
|
|
|
.sidebar + .main-container nav.bottom { position: relative; }
|
|
.sidebar { position: relative; z-index: 100; margin-top: 0.6rem; padding: 1rem 3rem 2rem 0.4rem; background: var(--accent-a1); box-shadow: inset -0.6rem 0 0.8rem -0.5rem var(--shadow); max-width: 20vw; resize: horizontal; overflow-x: scroll; }
|
|
.sidebar a { color: var(--accent-b1); }
|
|
|
|
.sidebar ul { position: relative; margin: 0.3rem 0.3rem 0.3rem 1rem; padding: 0.3rem 0.3rem 0.3rem 1rem; list-style-type: none; }
|
|
.sidebar li { position: relative; margin: 0.3rem; padding: 0.3rem; }
|
|
|
|
.sidebar ul:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed var(--accent-a3); }
|
|
.sidebar li:before { content: ""; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed var(--accent-a3); }
|
|
|
|
.preview { text-align: center; }
|
|
.preview:hover img, .preview:hover video, .preview:hover audio { max-width: 100%; background-color: var(--checkerboard-bg); background-image: linear-gradient(45deg, var(--checkerboard-overlay) 25%, transparent 25%, transparent 75%, var(--checkerboard-overlay) 75%, var(--checkerboard-overlay)), linear-gradient(45deg, var(--checkerboard-overlay) 25%, transparent 25%, transparent 75%, var(--checkerboard-overlay) 75%, var(--checkerboard-overlay)); background-size:2em 2em; background-position:0 0, 1em 1em; }
|
|
.image-controls ul { list-style-type: none; margin: 5px; padding: 5px; }
|
|
.image-controls li { display: inline-block; margin: 5px; padding: 5px; }
|
|
.link-display { margin-left: 0.5rem; }
|
|
.button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; font-size: 0.9em; }
|
|
|
|
audio, video, img { max-width: 100%; }
|
|
object { width: 100%; height: 90vh; }
|
|
figure:not(.preview) { display: inline-block; }
|
|
figure:not(.preview) > :first-child { display: block; }
|
|
figcaption { text-align: center; }
|
|
.avatar { vertical-align: middle; }
|
|
|
|
.printable { padding: 2rem; }
|
|
|
|
h1 { text-align: center; }
|
|
.sitename { margin-top: 5rem; margin-bottom: 3rem; font-size: 2.5rem; }
|
|
.logo { max-width: 4rem; max-height: 4rem; vertical-align: middle; }
|
|
.logo.small { max-width: 2rem; max-height: 2rem; }
|
|
main:not(.printable) { position: relative; z-index: 1000; padding: 2em 2em 0.5em 2em; background: var(--bg-page); box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow); }
|
|
|
|
blockquote { padding-left: 1em; border-left: 0.2em solid var(--accent-a3); border-radius: 0.2rem; }
|
|
|
|
pre { white-space: pre-wrap; padding: 0.3em 0.5em; background: var(--bg-page-inset); border-radius: 0.25em; box-shadow: inset 0 0 0.5em var(--shadow); }
|
|
code { font-size: 1.1em; }
|
|
|
|
a { cursor: pointer; }
|
|
a:focus { outline-width: 0.1em; }
|
|
a.redlink:link { color: var(--accent-c1); }
|
|
a.redlink:visited { color: var(--accent-c2); }
|
|
a.redlink:active, a.redlink:focus { color: var(--accent-c3); }
|
|
a.interwiki_link::before { content: "\\1f6f8"; display: inline-block; margin-right: 0.25em; }
|
|
a.interwiki_link { color: var(--accent-d1); }
|
|
a.interwiki_link:visited { color: var(--accent-d2); }
|
|
a.interwiki_link:active { color: var(--accent-d3); }
|
|
|
|
.spoiler { background: var(--accent-a2); border: 0.1em dashed var(--accent-b1); border-radius: 0.2em; color: transparent !important; text-decoration: none; }
|
|
.spoiler:target { color: inherit !important; }
|
|
|
|
/* Ref https://devdocs.io/html/element/del#Accessibility_concerns it's better than nothing, but I'm not happy with it. How would a screen reader user skipt he spsoiler if they don't want to hear it? */
|
|
.spoiler::before, .spoiler::after {
|
|
clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px);
|
|
position: absolute; width: 1px; height: 1px;
|
|
overflow: hidden; white-space: nowrap;
|
|
}
|
|
.spoiler::before { content: " [spoiler start] "; }
|
|
.spoiler::after { content: " [spoiler end] "; }
|
|
|
|
|
|
.matching-tags-display { display: flex; margin: 0 -2em; padding: 1em 2em; background: hsla(30, 84%, 72%, 0.75); }
|
|
.matching-tags-display > label { flex: 0; font-weight: bold; color: var(--accent-a3); }
|
|
.matching-tags-display > .tags { flex: 2; }
|
|
|
|
.search-result { position: relative; }
|
|
.search-result::before { content: attr(data-result-number); position: relative; top: 3rem; color: var(--text-soft); font-size: 2rem; }
|
|
.search-result::after { content: "Rank: " attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: var(--text-ultrasoft); }
|
|
.search-result > h2 { margin-left: 3rem; }
|
|
.search-result-badges { font-size: 1rem; font-weight: normal; }
|
|
.search-context { min-height: 3em; max-height: 20em; overflow: hidden; }
|
|
|
|
.editform { position: relative; }
|
|
textarea[name=content] { resize: none; min-height: 75vh; }
|
|
.fit-text-mirror { position: absolute; top: 0; left: -10000vw; word-wrap: break-word; white-space: pre-wrap; }
|
|
|
|
.awesomplete { width: 100%; color: var(--text-dark); }
|
|
.awesomplete > ul::before { display: none; }
|
|
/* Overly specific to override library css */
|
|
.awesomplete > ul[role=listbox] { top: 2.5em; background: var(--accent-a2); }
|
|
|
|
|
|
main label:not(.link-display-label) { display: inline-block; min-width: 16rem; }
|
|
input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; }
|
|
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, #search-box { padding: 0.5rem 0.8rem; background: var(--accent-a4); border: 0; border-radius: 0.3rem; font-size: 1rem; color: var(--text-bright); }
|
|
textarea, .fit-text-mirror { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; }
|
|
textarea, textarea[name=content] + pre, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
|
|
textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
|
|
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
|
|
.editform label { margin-left: 1em; }
|
|
input.edit-page-button[type='submit'] { width: 49.5%; box-sizing: border-box; }
|
|
input[type=radio] { transform: scale(2); }
|
|
input[type=submit].large { width: 100%; box-sizing: border-box; padding: 0.5em; font-size: 1.25em; font-weight: bolder; }
|
|
|
|
.smartsave-restore { margin-bottom: 1em; }
|
|
|
|
.preview-message { text-align: center; }
|
|
@media (min-width: 800px) {
|
|
.jump-to-comments { position: absolute; top: 3.5em; right: 2em; display: block; text-align: right; pointer-events: none; }
|
|
}
|
|
@media (max-width: 799px) {
|
|
.jump-to-comments { display: inline-block; }
|
|
.link-parent-page { display: inline-block; }
|
|
}
|
|
.jump-to-comments > a { pointer-events: all; }
|
|
|
|
.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
|
|
.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }
|
|
.file-gallery > li img, .file-gallery > li video, .file-gallery > li audio { display: block; margin: 0 auto; background-color: var(--file); }
|
|
|
|
.page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
|
|
.page-tags-display li { display: inline-block; margin: 0.5rem; padding: 0.5rem; background: var(--tag); white-space: nowrap; }
|
|
.page-tags-display li a { color: var(--accent-b2); text-decoration: none; }
|
|
.page-tags-display li::before { content: "\\A"; color: transparent; user-select: none; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid var(--tag); }
|
|
|
|
.page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
|
|
.page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
|
|
.page-list li .size { margin-left: 0.7rem; color: var(--text-soft); }
|
|
.page-list li .editor { display: inline-block; margin: 0 0.5rem; }
|
|
.page-list li .tags { margin: 0 1rem; }
|
|
.tag-list { list-style-type: none; margin: 0.5rem; padding: 0.5rem; }
|
|
.tag-list li { display: inline-block; margin: 1rem; }
|
|
.mini-tag { background: var(--tag); margin: 0 0.4em; padding: 0.2rem 0.4rem; color: var(--accent-b2); text-decoration: none; }
|
|
|
|
.grid-large { display: grid; grid-template-columns: repeat(auto-fit, minmax(25em, 1fr)); grid-auto-rows: min-content; grid-gap: 1em; justify-content: center;}
|
|
|
|
.theme-item { justify-self: center; text-align: center; }
|
|
.theme-item label { min-width: auto; }
|
|
|
|
.help-section-header::after { content: "#" attr(id); float: right; color: var(--text-soft); font-size: 0.8rem; font-weight: normal; }
|
|
|
|
.stacked-bar { display: flex; }
|
|
.stacked-bar-part { break-inside: avoid; white-space: pre; padding: 0.2em 0.3em; }
|
|
|
|
.cursor-query { cursor: help; }
|
|
|
|
summary { cursor: pointer; }
|
|
|
|
.larger { color: var(--addition); }
|
|
.smaller, .deletion { color: var(--deletion); }
|
|
.nochange { color: var(--nochange); font-style: italic; }
|
|
.significant { font-weight: bolder; font-size: 1.1rem; }
|
|
.deletion, .deletion > .editor { text-decoration: line-through; }
|
|
|
|
.highlighted-diff { white-space: pre-wrap; }
|
|
.diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
|
|
.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
|
|
|
|
.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
|
|
.move::before { content: "\\1f69a"; font-size: 1.25em; margin: 0 0.1em 0 -1.1em; }
|
|
.upload::before { content: "\\1f845"; margin: 0 0.1em 0 -1.1em; }
|
|
.new-comment::before { content: "\\1f4ac"; margin: 0 0.1em 0 -1.1em; }
|
|
.reversion::before { content: "\\231b"; margin: 0 0.1em 0 -1.1em; }
|
|
|
|
.similar-page-suggestions { padding: 1em 2em; background: var(--bg-page-inset); position: relative; z-index: 2000; box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow);}
|
|
.similar-page-suggestions > h2 { text-align: center; }
|
|
.similar-page-suggestions-list { list-style-type:none;
|
|
padding: 0; display: grid; grid:auto / repeat(auto-fit, minmax(min(15em, 100%), 1fr)); justify-items: center; grid-gap: 1em; }
|
|
|
|
.comments { padding: 1em 2em; background: var(--bg-comments-1); box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow); }
|
|
.comments .not-logged-in { padding: 0.3em 0.65em; background: var(--bg-comments-2); border-radius: 0.2em; font-style: italic; }
|
|
.comments textarea { resize: vertical; }
|
|
|
|
.comment { margin: 1em 0; padding: 0.01em 0; background: var(--bg-comments-3); }
|
|
.comment-header { padding: 0 1em; }
|
|
.comment .name { font-weight: bold; }
|
|
.comment-body { padding: 0 1em; }
|
|
.comment-footer { padding-left: 1em; }
|
|
.comment-footer-item { padding: 0 0.3em; }
|
|
.comment-footer .delete-button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; color: var(--text-os-button); }
|
|
.permalink-button { text-decoration: none; }
|
|
.comments-list .comments-list .comment { margin: 1em; }
|
|
|
|
.reply-box-container.active { padding: 1em; background: var(--bg-comments-4); }
|
|
|
|
footer { padding: 2rem; }
|
|
|
|
/* Small screen adjustments */
|
|
@media (max-width: 480px) {
|
|
body {
|
|
margin: 0;
|
|
}
|
|
nav.top, nav.bottom {
|
|
position: static;
|
|
flex-direction: column;
|
|
}
|
|
input[type=checkbox]:checked ~ .nav-more-menu {
|
|
position: static;
|
|
}
|
|
nav.mega-menu {
|
|
flex-direction: column;
|
|
}
|
|
nav.top > span:first-child {
|
|
border-top: 3px solid var(--accent-a3);
|
|
}
|
|
|
|
main:not(.printable) {
|
|
padding: 1em 1em 0.5em 1em;
|
|
}
|
|
|
|
.comments {
|
|
padding: 1em;
|
|
}
|
|
|
|
footer {
|
|
padding: 1em;
|
|
}
|
|
}
|