- commit
- c9d2af6a7f7c8292e1aaa37b727f5488952af94f
- parent
- 6324c56c2ef5186d1060288ec65366386ccc53b4
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2020-12-19 10:43
style: add dark mode
Diffstat
| M | static/style.css | 61 | ++++++++++++++++++++++++++++++++++++++++++------------------- |
1 files changed, 42 insertions, 19 deletions
diff --git a/static/style.css b/static/style.css
@@ -1,4 +1,12 @@ 1 1 html { -1 2 --bg-color: #fff; -1 3 --bg-tint-color: #f6f6f6; -1 4 --fg-tint-color: #777; -1 5 --focus-color: #0079d3; -1 6 --border-color: #ddd; -1 7 --button-color: #aaa; -1 8 --button-hover-color: #bbb; -1 9 2 10 background: #dae0e6; 3 11 color: #222; 4 12 line-height: 1.5; @@ -12,7 +20,7 @@ body { 12 20 } 13 21 14 22 a {15 -1 color: #0079d3;-1 23 color: var(--focus-color); 16 24 } 17 25 18 26 h1, h2, h3, h4, h5 { @@ -35,18 +43,19 @@ blockquote { 35 43 font-style: italic; 36 44 font-size: small; 37 45 padding-left: 0.5em;38 -1 border-left: 0.4em solid #ddd;-1 46 border-left: 0.4em solid var(--border-color); 39 47 margin-left: 0; 40 48 } 41 49 42 50 hr { 43 51 border: 0;44 -1 border-bottom: 1px solid #ddd;-1 52 border-bottom: 1px solid var(--border-color); 45 53 } 46 54 47 55 input {48 -1 background: #f6f6f6;49 -1 border: 1px solid #ddd;-1 56 background: var(--bg-tint-color); -1 57 color: inherit; -1 58 border: 1px solid var(--border-color); 50 59 border-radius: 4px; 51 60 padding: 0.3em 0.75em; 52 61 font-family: inherit; @@ -55,14 +64,14 @@ input { 55 64 } 56 65 input:hover, 57 66 input:focus {58 -1 border-color: #0079d3;59 -1 background: #fff;-1 67 border-color: var(--focus-color); -1 68 background: var(--bg-color); 60 69 } 61 70 62 71 #header {63 -1 background: #fff;-1 72 background: var(--bg-color); 64 73 z-index: 1;65 -1 border-bottom: 1px solid #ddd;-1 74 border-bottom: 1px solid var(--border-color); 66 75 position: absolute; 67 76 top: 0; 68 77 left: 0; @@ -94,9 +103,9 @@ input:focus { 94 103 95 104 .post { 96 105 display: block;97 -1 background: #fff;-1 106 background: var(--bg-color); 98 107 border-radius: 4px;99 -1 border: 1px solid #ddd;-1 108 border: 1px solid var(--border-color); 100 109 padding: 0.5em; 101 110 margin-bottom: 1em; 102 111 } @@ -122,7 +131,7 @@ input:focus { 122 131 } 123 132 124 133 .post footer {125 -1 color: #777;-1 134 color: var(--fg-tint-color); 126 135 font-weight: bold; 127 136 font-size: small; 128 137 margin-top: 0.5em; @@ -154,12 +163,12 @@ input:focus { 154 163 } 155 164 156 165 .meta {157 -1 color: #777;-1 166 color: var(--fg-tint-color); 158 167 } 159 168 160 169 .more { 161 170 display: block;162 -1 background: #bbb;-1 171 background: var(--button-color); 163 172 color: inherit; 164 173 text-decoration: none; 165 174 padding: 0.5em; @@ -171,14 +180,14 @@ input:focus { 171 180 172 181 .more:focus, 173 182 .more:hover {174 -1 background: #aaa;-1 183 background: var(--button-hover-color); 175 184 } 176 185 177 186 .comments { 178 187 margin: 0; 179 188 padding: 0; 180 189 padding-left: 1.5em;181 -1 border-left: 2px solid #ddd;-1 190 border-left: 2px solid var(--border-color); 182 191 } 183 192 184 193 .comment { @@ -195,13 +204,13 @@ input:focus { 195 204 margin-top: 4em; 196 205 text-transform: uppercase; 197 206 font-size: x-small;198 -1 color: #777;-1 207 color: var(--fg-tint-color); 199 208 font-weight: bold; 200 209 padding: 1em 0;201 -1 border-bottom: 1px solid #ddd;-1 210 border-bottom: 1px solid var(--border-color); 202 211 } 203 212 .comments-replies {204 -1 color: #777;-1 213 color: var(--fg-tint-color); 205 214 font-size: x-small; 206 215 cursor: pointer; 207 216 } @@ -224,3 +233,17 @@ input:focus { 224 233 float: left; 225 234 margin-right: 0.5em; 226 235 } -1 236 -1 237 @media (prefers-color-scheme: dark) { -1 238 html { -1 239 --bg-color: #111; -1 240 --bg-tint-color: #000; -1 241 --fg-tint-color: #888; -1 242 --border-color: #222; -1 243 --button-color: #222; -1 244 --button-hover-color: #333; -1 245 -1 246 background: #000; -1 247 color: #fff; -1 248 } -1 249 }