Rewild Your Web
web
browser
dweb
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5html,
6body {
7 height: 100%;
8 padding: 0;
9 margin: 0;
10}
11
12body {
13 font-family: sans-serif;
14 font-weight: 400;
15 line-height: 1.5;
16 display: flex;
17 flex-direction: column;
18 align-items: center;
19 justify-content: center;
20}
21
22img {
23 margin-bottom: 1em;
24 width: 25vw;
25}
26
27form {
28 margin: 1em;
29 display: flex;
30 justify-items: center;
31 gap: 1.0em;
32}
33
34input {
35 border-width: 0;
36 border-radius: 5px;
37 height: 2.5em;
38 width: 50vw;
39 text-indent: 3px;
40 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
41}
42
43/* This should not be needed but paper over missing default styles */
44button {
45 padding-inline: 8px;
46 border-radius: 5px;
47 border: none;
48 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
49 /* Servo has trouble with button styling */
50 display: flex;
51 justify-items: center;
52 align-items: center;
53 line-height: 1;
54}
55
56button:hover {
57 cursor: pointer;
58}
59
60a {
61 cursor: pointer;
62 text-decoration: none;
63}
64
65:root {
66 --theme-color-primary: #1191e8;
67 --theme-color-secondary: #42bf64;
68}
69
70/* These link colors work well for both light and dark mode */
71a {
72 color: var(--theme-color-primary);
73}
74
75a:hover {
76 color: var(--theme-color-secondary);
77}
78
79@media (prefers-color-scheme: light) {
80 .dark {
81 display: none;
82 }
83
84 body {
85 background: #f9f9f9;
86 }
87
88 input {
89 background-color: white;
90 }
91
92 button {
93 background-color: var(--theme-color-secondary);
94 color: white;
95 }
96
97 button:hover {
98 background-color: #3baa59;
99 }
100}
101
102@media (prefers-color-scheme: dark) {
103 .light {
104 display: none;
105 }
106
107 body {
108 background-color: #121619;
109 color: hsl(0, 0%, 96%);
110 }
111
112 input {
113 background-color: #333;
114 color: white;
115 }
116
117 button {
118 background-color: #333;
119 color: var(--theme-color-secondary);
120 }
121
122 button:hover {
123 background-color: #292929;
124 }
125}