From 991e40652e331ccc69ea5b6aa8539e166b119c6f Mon Sep 17 00:00:00 2001 From: Arcade Wise Date: Thu, 1 Dec 2022 10:58:52 -0500 Subject: add dark mode Signed-off-by: Arcade Wise --- apioforum/static/style.css | 172 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 133 insertions(+), 39 deletions(-) diff --git a/apioforum/static/style.css b/apioforum/static/style.css index cd275ff..92e6dcd 100644 --- a/apioforum/static/style.css +++ b/apioforum/static/style.css @@ -1,25 +1,35 @@ body { font-family: sans-serif; word-wrap: break-word; } :root { - --alternating-colour-even: hsl(0,0%,96%); - --alternating-colour-odd: hsl(0,0%,91%); + --alternating-colour-even: hsl(0, 0%, 96%); + --alternating-colour-odd: hsl(0, 0%, 91%); + --dark-colour: black; + --gray: darkgray; + --light-colour: white; + --username-colour: hsl(0, 0%, 25%); + --red: red; + --yellow: yellow; + --blue: blue; + --visited: purple; } +a { color: var(--blue) } + .post { margin: 0px; } .post:nth-child(even) { background-color: var(--alternating-colour-even) } .post:nth-child(odd) { background-color: var(--alternating-colour-odd) } .post { - border-left: 1px solid black; - border-right: 1px solid black; - border-top: 1px solid black; - width: 100% + border-left: 1px solid var(--dark-colour); + border-right: 1px solid var(--dark-colour); + border-top: 1px solid var(--dark-colour); + width: 100%; box-sizing: border-box; } -.post:last-of-type { border-bottom: 1px solid black; } +.post:last-of-type { border-bottom: 1px solid var(--dark-colour); } .post-heading,.post-footer { font-size: smaller; } .post-heading,.post-footer,.username { - color: hsl(0,0%,25%); + color: var(--username-colour); } .username { font-weight: bold; @@ -35,17 +45,17 @@ body { font-family: sans-serif; word-wrap: break-word; } .post-footer { margin-left: 0.2em; font-style: italic; } -.post-anchor-link { color: hsl(0,0%,25%); } +.post-anchor-link { color: var(--username-colour); } -.deleted-post { - color:white; - background-color: hsl(0,0%,15%) !important; - border-left: 1px solid darkgray; - border-right: 1px solid darkgray; - border-top: 1px solid darkgray; +div.deleted-post { + color:var(--light-colour); + background-color: var(--dark-colour) !important; + border-left: 1px solid var(--dark-colour); + border-right: 1px solid var(--dark-colour); + border-top: 1px solid var(--dark-colour); } .deleted-post > .post-heading > * { - color: hsl(0,0%,85%); + color: hsl(0,0%,85%); } .deleted-post > .post-heading > .post-heading-b > .post-anchor-link { color: hsl(0,0%,60%); @@ -58,6 +68,30 @@ body { font-family: sans-serif; word-wrap: break-word; } color: hsl(0,0%,80%); } +@media (prefers-color-scheme: dark) { + .deleted-post > .post-heading > * { + color: hsl(0,0%,45%); + } + .deleted-post > .post-heading > .post-heading-b > .post-anchor-link { + color: hsl(0,0%,20%); + } + .deleted-post > .post-heading > .post-heading-a > .username { + color: hsl(0,0%,40%); + } + + .deleted-post > .post-footer { + color: hsl(0,0%,40%); + } + + div.deleted-post { + color:var(--light-colour); + background-color: var(--dark-colour) !important; + border-left: 1px solid var(--dark-colour); + border-right: 1px solid var(--dark-colour); + border-top: 1px solid var(--dark-colour); + } +} + .thread-top-bar, .user-top-bar { margin-bottom: 4px; } @@ -72,7 +106,7 @@ body { font-family: sans-serif; word-wrap: break-word; } } .user_info { - border: 1px solid black; + border: 1px solid var(--dark-colour); background-color: var(--alternating-colour-even); width: 100%; padding: 4px; @@ -100,6 +134,25 @@ dt { font-weight: bold } .un-col-15 { color: hsl(315.0, 100%, 30%) } .un-col-16 { color: hsl(337.5, 100%, 30%) } +@media (prefers-color-scheme: dark) { + .un-col-1 { color: hsl(0, 100%, 70%) } + .un-col-2 { color: hsl(22.5, 100%, 70%) } + .un-col-3 { color: hsl(45.0, 100%, 70%) } + .un-col-4 { color: hsl(67.5, 100%, 70%) } + .un-col-5 { color: hsl(90.0, 100%, 70%) } + .un-col-6 { color: hsl(112.5, 100%, 70%) } + .un-col-7 { color: hsl(135.0, 100%, 70%) } + .un-col-8 { color: hsl(157.5, 100%, 70%) } + .un-col-9 { color: hsl(180.0, 100%, 70%) } + .un-col-10 { color: hsl(202.5, 100%, 70%) } + .un-col-11 { color: hsl(225.0, 100%, 70%) } + .un-col-12 { color: hsl(247.5, 100%, 70%) } + .un-col-13 { color: hsl(270.0, 100%, 70%) } + .un-col-14 { color: hsl(292.5, 100%, 70%) } + .un-col-15 { color: hsl(315.0, 100%, 70%) } + .un-col-16 { color: hsl(337.5, 100%, 70%) } +} + img { max-width: 100% } nav#navbar { @@ -107,14 +160,14 @@ nav#navbar { padding: 5px; margin: 2px; margin-bottom: 20px; - border: 1px solid black; + border: 1px solid var(--dark-colour); display:flex; align-items: center; flex-wrap: wrap; } nav#navbar p { margin-left: 15px; margin-top: 0; margin-bottom: 0; margin-right: 10px; padding: 0 } nav#navbar p:first-of-type { margin-left:0.5em } -nav#navbar a { color: blue; text-decoration: none } +nav#navbar a { color: var(--blue); text-decoration: none } nav#navbar .links { display: flex; } nav#pages { @@ -123,29 +176,29 @@ nav#pages { justify-content: space-between; margin-bottom: -1px; padding: 5px; - border: 1px solid black; + border: 1px solid var(--dark-colour); background-color: var(--alternating-colour-even); position: sticky; top: 0; } -nav#pages .links > a:not([href]) { color: gray; } +nav#pages .links > a:not([href]) { color: var(--gray); } nav#pages .pageno { align-self: center; } /* todo: make the navbar less bad */ -.flashmsg { border: 1px solid black; background-color: yellow; max-width: max-content; padding: 5px; clear: both;} +.flashmsg { border: 1px solid var(--dark-colour); background-color: yellow; max-width: max-content; padding: 5px; clear: both; color: black} .listing:nth-child(even) { background-color: var(--alternating-colour-even) } .listing:nth-child(odd) { background-color: var(--alternating-colour-odd) } .listing { - border-left: 1px solid black; - border-right: 1px solid black; - border-top: 1px solid black; + border-left: 1px solid var(--dark-colour); + border-right: 1px solid var(--dark-colour); + border-top: 1px solid var(--dark-colour); padding: 10px; } -.listing:last-of-type { border-bottom: 1px solid black; } +.listing:last-of-type { border-bottom: 1px solid var(--dark-colour); } .listing-main { display: flex; align-items: center; @@ -178,7 +231,7 @@ nav#pages .pageno { align-self: center; } margin-top: 10px; } .thread-preview-post a, .thread-preview-post a:visited { - color: black; + color: var(--dark-colour); text-decoration: none; } .thread-preview-post { font-style: italic; } @@ -209,14 +262,14 @@ nav#pages .pageno { align-self: center; } .actionbutton::before { content: "["; - color: grey; + color: var(--gray); } .actionbutton::after { content: "]"; - color: grey; + color: var(--gray); } .actionbutton { - color:blue; + color:var(--blue); white-space: nowrap; } @@ -224,14 +277,14 @@ nav#pages .pageno { align-self: center; } height:20em; resize:vertical; width:100%; - border:1px solid black; + border:1px solid var(--dark-colour); margin-top: 5px; } #polloptions { display: block; resize: vertical; - border:1px solid black; + border:1px solid var(--dark-colour); margin-top: 5px; height: 5em; width: 100%; @@ -246,14 +299,14 @@ main { blockquote { margin-left: 10px; padding-left: 10px; - border-left: 3px solid grey; + border-left: 3px solid var(--gray); } label { user-select: none; } fieldset { margin-bottom: 15px; } -.warning { color: red; font-weight: bold } +.warning { color: var(--red); font-weight: bold } .inline-form { display: inline-block; @@ -262,22 +315,22 @@ fieldset { margin-bottom: 15px; } .tag { font-size: .75rem; padding: 1px 3px; - border: 1px solid black; + border: 1px solid var(--dark-colour); white-space: nowrap; } .md table { - border: 1px solid grey; + border: 1px solid var(--gray); border-collapse: collapse; } .md table td,.md table th { - border: 1px solid grey; + border: 1px solid var(--gray); padding: 4px; } .role-input, .name-input { width: 12ch; } -.thing-id { color: darkgray; font-size: smaller; font-weight: normal; } +.thing-id { color: var(--gray); font-size: smaller; font-weight: normal; } .breadcrumbs { list-style: none; @@ -287,9 +340,50 @@ fieldset { margin-bottom: 15px; } display: inline; } -.breadcrumbs li+li::before { +.breadcrumbs lili::before { content: "/\00a0"; padding: 8px; } +textarea { + color: var(--dark-colour); + background-color: var(--light-colour); +} + +@media (prefers-color-scheme: dark) { + :root { + --alternating-colour-even: hsl(0, 0%, 5%); + --alternating-colour-odd: hsl(0, 0%, 15%); + --dark-colour: white; + --gray: lightgray; + --light-colour: black; + --username-colour: hsl(0, 0%, 80%); + --yellow: rgb(212, 173, 0); + --blue: rgb(78, 89, 255); + --visited: rgb(173, 110, 209); + } + .un-col-1 { color: hsl(0, 100%, 70%) } + .un-col-2 { color: hsl(22.5, 100%, 70%) } + .un-col-3 { color: hsl(45.0, 100%, 70%) } + .un-col-4 { color: hsl(67.5, 100%, 70%) } + .un-col-5 { color: hsl(90.0, 100%, 70%) } + .un-col-6 { color: hsl(112.5, 100%, 70%) } + .un-col-7 { color: hsl(135.0, 100%, 70%) } + .un-col-8 { color: hsl(157.5, 100%, 70%) } + .un-col-9 { color: hsl(180.0, 100%, 70%) } + .un-col-10 { color: hsl(202.5, 100%, 70%) } + .un-col-11 { color: hsl(225.0, 100%, 70%) } + .un-col-12 { color: hsl(247.5, 100%, 70%) } + .un-col-13 { color: hsl(270.0, 100%, 70%) } + .un-col-14 { color: hsl(292.5, 100%, 70%) } + .un-col-15 { color: hsl(315.0, 100%, 70%) } + .un-col-16 { color: hsl(337.5, 100%, 70%) } + + input { color: var(--dark-colour); background-color: var(--light-colour); } + + h1 { color: var(--dark-colour); } + + body { background-color: var(--light-colour); color: var(--dark-colour); } +} + \ No newline at end of file -- cgit v1.2.3