github-stats

commit

b565ca2f41bcc5949f3269d2b77ccea4923be01d

parent

37845e733c9b726870873141bf836d37a70a61ab

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-09-05 08:13

css: dark mode

Diffstat

1 files changed, 28 insertions, 9 deletions

diff --git a/style.css b/style.css

@@ -1,9 +1,28 @@
   -1     1 :root {
   -1     2 	--color-bg-tint: #f2f2f2;
   -1     3 	--color-bg: #fff;
   -1     4 	--color-fg: #333;
   -1     5 	--color-border: silver;
   -1     6 	--color-primary: #27c;
   -1     7 	--color-primary-focus: #15b;
   -1     8 }
   -1     9 
   -1    10 @media (prefers-color-scheme: dark) {
   -1    11 	:root {
   -1    12 		color-scheme: dark;
   -1    13 		--color-fg: #fff;
   -1    14 		--color-bg: #222;
   -1    15 		--color-bg-tint: #333;
   -1    16 		--color-border: #555;
   -1    17 	}
   -1    18 }
   -1    19 
    1    20 * {
    2    21 	box-sizing: border-box;
    3    22 }
    4    23 
    5    24 html {
    6    -1 	background-color: #f2f2f2;
   -1    25 	background-color: var(--color-bg-tint);
    7    26 }
    8    27 
    9    28 @media (min-width: 30em) {
@@ -19,9 +38,9 @@ body {
   19    38 	max-width: 30em;
   20    39 	padding: 1em;
   21    40 	margin: 0 auto;
   22    -1 	color: #333;
   -1    41 	color: var(--color-fg);
   23    42 	line-height: 1.4;
   24    -1 	background-color: #fff;
   -1    43 	background-color: var(--color-bg);
   25    44 }
   26    45 
   27    46 form {
@@ -31,7 +50,7 @@ form {
   31    50 h1 {
   32    51 	margin-top: 0;
   33    52 	line-height: 1.2;
   34    -1 	border-bottom: 0.2em solid #26c;
   -1    53 	border-bottom: 0.2em solid var(--color-primary);
   35    54 }
   36    55 
   37    56 label {
@@ -49,23 +68,23 @@ button {
   49    68 
   50    69 input {
   51    70 	padding: 0.3em 0.5em;
   52    -1 	border: 1px solid silver;
   -1    71 	border: 1px solid var(--color-border);
   53    72 }
   54    73 input[readonly] {
   55    -1 	background-color: #f2f2f2;
   -1    74 	background-color: var(--color-bg-tint);
   56    75 }
   57    76 
   58    77 button {
   59    78 	font-weight: bold;
   60    79 	padding: 0.5em;
   61    -1 	background-color: #26c;
   62    -1 	color: #fff;
   -1    80 	background-color: var(--color-primary);
   -1    81 	color: var(--color-bg);
   63    82 	border: 0;
   64    83 	cursor: pointer;
   65    84 }
   66    85 button:hover,
   67    86 button:focus {
   68    -1 	background-color: #15b;
   -1    87 	background-color: var(--color-primary-focus);
   69    88 }
   70    89 button:disabled {
   71    90 	opacity: 0.5;