aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apioforum/static/style.css172
1 files 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
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 17:24:46 +0000