diff options
author | MetroWind <chris.corsair@gmail.com> | 2025-09-07 09:42:33 -0700 |
---|---|---|
committer | MetroWind <chris.corsair@gmail.com> | 2025-09-07 09:42:33 -0700 |
commit | ea0d3220db995018335c48eb06b9794235ff436b (patch) | |
tree | 892564cdd4946c6ee9c1051bc31ff5c7bba6ddf1 /statics |
Initial commit, mostly just copied from shrt.
Diffstat (limited to 'statics')
-rw-r--r-- | statics/styles.css | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/statics/styles.css b/statics/styles.css new file mode 100644 index 0000000..3bf5adc --- /dev/null +++ b/statics/styles.css | |||
@@ -0,0 +1,290 @@ | |||
1 | /* http://meyerweb.com/eric/tools/css/reset/ | ||
2 | v2.0 | 20110126 | ||
3 | License: none (public domain) | ||
4 | */ | ||
5 | |||
6 | html, body, div, span, applet, object, iframe, | ||
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
8 | a, abbr, acronym, address, big, cite, code, | ||
9 | del, dfn, em, img, ins, kbd, q, s, samp, | ||
10 | small, strike, strong, sub, sup, tt, var, | ||
11 | b, u, i, center, | ||
12 | dl, dt, dd, ol, ul, li, | ||
13 | fieldset, form, label, legend, | ||
14 | table, caption, tbody, tfoot, thead, tr, th, td, | ||
15 | article, aside, canvas, details, embed, | ||
16 | figure, figcaption, footer, header, hgroup, | ||
17 | menu, nav, output, ruby, section, summary, | ||
18 | time, mark, audio, video { | ||
19 | margin: 0; | ||
20 | padding: 0; | ||
21 | border: 0; | ||
22 | font-size: unset; | ||
23 | font: inherit; | ||
24 | vertical-align: baseline; | ||
25 | } | ||
26 | /* HTML5 display-role reset for older browsers */ | ||
27 | article, aside, details, figcaption, figure, | ||
28 | footer, header, hgroup, menu, nav, section { | ||
29 | display: block; | ||
30 | } | ||
31 | body { | ||
32 | line-height: 1; | ||
33 | } | ||
34 | ol, ul { | ||
35 | list-style: none; | ||
36 | } | ||
37 | blockquote, q { | ||
38 | quotes: none; | ||
39 | } | ||
40 | blockquote:before, blockquote:after, | ||
41 | q:before, q:after { | ||
42 | content: ''; | ||
43 | content: none; | ||
44 | } | ||
45 | table { | ||
46 | border-collapse: collapse; | ||
47 | border-spacing: 0; | ||
48 | } | ||
49 | |||
50 | /* ========== Actual styles ======================================> */ | ||
51 | |||
52 | :root | ||
53 | { | ||
54 | --color-bg: #c0c0c0; | ||
55 | --color-fg: black; | ||
56 | --color-border-dark-1: #808080; | ||
57 | --color-border-dark-2: black; | ||
58 | --color-border-light-1: #dfdfdf; | ||
59 | --color-border-light-2: white; | ||
60 | --color-titlebar-1: navy; | ||
61 | --color-titlebar-2: #1084d0; | ||
62 | } | ||
63 | |||
64 | * | ||
65 | { | ||
66 | box-sizing: border-box; | ||
67 | } | ||
68 | |||
69 | html | ||
70 | { | ||
71 | background: #008080; | ||
72 | color: var(--color-fg); | ||
73 | font-family: sans-serif; | ||
74 | font-size: 12px; | ||
75 | padding: 12px; | ||
76 | } | ||
77 | |||
78 | .Window | ||
79 | { | ||
80 | box-shadow: inset -1px -1px var(--color-border-dark-2), | ||
81 | inset 1px 1px var(--color-border-light-1), | ||
82 | inset -2px -2px var(--color-border-dark-1), | ||
83 | inset 2px 2px var(--color-border-light-2); | ||
84 | background: var(--color-bg); | ||
85 | padding: 10px; | ||
86 | |||
87 | .Titlebar | ||
88 | { | ||
89 | background: linear-gradient(90deg, var(--color-titlebar-1), var(--color-titlebar-2)); | ||
90 | margin: -6px -6px 10px -6px; | ||
91 | color: white; | ||
92 | padding: 3px; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | .Dialog | ||
97 | { | ||
98 | max-width: 800px; | ||
99 | margin: 0px auto; | ||
100 | } | ||
101 | |||
102 | input[type="text"], input[type="url"], input[type="email"], textarea | ||
103 | { | ||
104 | appearance: none; | ||
105 | border: none; | ||
106 | outline: none; | ||
107 | box-shadow: inset -1px -1px var(--color-border-light-2), | ||
108 | inset 1px 1px var(--color-border-dark-1), | ||
109 | inset -2px -2px var(--color-border-light-1), | ||
110 | inset 2px 2px var(--color-border-dark-2); | ||
111 | width: 100%; | ||
112 | padding: 4px 6px; | ||
113 | font-family: monospace; | ||
114 | font-size: 0.9rem; | ||
115 | } | ||
116 | |||
117 | a.Button, a.FloatButton | ||
118 | { | ||
119 | color: black; | ||
120 | text-decoration: none; | ||
121 | } | ||
122 | |||
123 | button, input[type="submit"] | ||
124 | { | ||
125 | appearance: none; | ||
126 | border: none; | ||
127 | outline: none; | ||
128 | box-shadow: inset -1px -1px var(--color-border-dark-2), | ||
129 | inset 1px 1px var(--color-border-light-1), | ||
130 | inset -2px -2px var(--color-border-dark-1), | ||
131 | inset 2px 2px var(--color-border-light-2); | ||
132 | background: var(--color-bg); | ||
133 | min-height: 23px; | ||
134 | min-width: 75px; | ||
135 | padding: 0 12px; | ||
136 | text-align: center; | ||
137 | } | ||
138 | |||
139 | .IconButton | ||
140 | { | ||
141 | padding: 4px; | ||
142 | min-width: unset; | ||
143 | min-height: unset; | ||
144 | } | ||
145 | |||
146 | .FloatButton | ||
147 | { | ||
148 | padding: 4px; | ||
149 | min-width: unset; | ||
150 | min-height: unset; | ||
151 | box-shadow: none; | ||
152 | } | ||
153 | |||
154 | .FloatButton:hover | ||
155 | { | ||
156 | padding: 4px; | ||
157 | min-width: unset; | ||
158 | min-height: unset; | ||
159 | box-shadow: inset 1px 1px var(--color-border-light-1), | ||
160 | inset -1px -1px var(--color-border-dark-1); | ||
161 | } | ||
162 | |||
163 | button:active, .FloatButton:active | ||
164 | { | ||
165 | box-shadow: inset -1px -1px var(--color-border-light-2), | ||
166 | inset 1px 1px var(--color-border-dark-1), | ||
167 | inset -2px -2px var(--color-border-light-1), | ||
168 | inset 2px 2px var(--color-border-dark-2); | ||
169 | } | ||
170 | |||
171 | hr | ||
172 | { | ||
173 | border: none; | ||
174 | border-top: solid var(--color-border-dark-1) 1px; | ||
175 | border-bottom: solid var(--color-border-light-1) 1px; | ||
176 | } | ||
177 | |||
178 | .ButtonRow | ||
179 | { | ||
180 | display: flex; | ||
181 | justify-content: right; | ||
182 | gap: 10px; | ||
183 | margin: 10px 0; | ||
184 | } | ||
185 | |||
186 | .ButtonRowLeft | ||
187 | { | ||
188 | text-align: Left; | ||
189 | margin-top: 10px; | ||
190 | } | ||
191 | |||
192 | .Toolbar | ||
193 | { | ||
194 | display: flex; | ||
195 | border-bottom: solid var(--color-border-dark-1) 1px; | ||
196 | box-shadow: 0px 1px var(--color-border-light-1); | ||
197 | position: relative; | ||
198 | left: -10px; | ||
199 | top: -10px; | ||
200 | width: calc(100% + 2ex); | ||
201 | padding: 2px 8px; | ||
202 | } | ||
203 | |||
204 | table.InputFields | ||
205 | { | ||
206 | border-collapse: collapse; | ||
207 | width: 100%; | ||
208 | table-layout: auto; | ||
209 | |||
210 | td | ||
211 | { | ||
212 | padding: 2px 2px; | ||
213 | } | ||
214 | |||
215 | td:nth-child(2) | ||
216 | { | ||
217 | width: 100%; | ||
218 | } | ||
219 | |||
220 | } | ||
221 | |||
222 | .StatusBar | ||
223 | { | ||
224 | margin: 10px -6px -7px -6px; | ||
225 | display: flex; | ||
226 | } | ||
227 | |||
228 | .StatusCell | ||
229 | { | ||
230 | box-shadow: inset -2px -2px var(--color-border-light-2), | ||
231 | inset 2px 2px var(--color-border-dark-1); | ||
232 | padding: 4px; | ||
233 | flex-grow: 1; | ||
234 | } | ||
235 | |||
236 | nav | ||
237 | { | ||
238 | display: flex; | ||
239 | justify-content: space-between; | ||
240 | } | ||
241 | |||
242 | #Links | ||
243 | { | ||
244 | box-shadow: inset -1px -1px var(--color-border-light-2), | ||
245 | inset 1px 1px var(--color-border-dark-1), | ||
246 | inset -2px -2px var(--color-border-light-1), | ||
247 | inset 2px 2px var(--color-border-dark-2); | ||
248 | padding: 2px; | ||
249 | } | ||
250 | |||
251 | table.TableView | ||
252 | { | ||
253 | background-color: white; | ||
254 | border-collapse: collapse; | ||
255 | width: 100%; | ||
256 | |||
257 | thead th | ||
258 | { | ||
259 | box-shadow: inset -1px -1px var(--color-border-dark-2), | ||
260 | inset 1px 1px var(--color-border-light-1), | ||
261 | inset -2px -2px var(--color-border-dark-1), | ||
262 | inset 2px 2px var(--color-border-light-2); | ||
263 | background-color: var(--color-bg); | ||
264 | padding: 2px 4px 4px 4px; | ||
265 | text-align: left; | ||
266 | } | ||
267 | |||
268 | td | ||
269 | { | ||
270 | padding: 2px; | ||
271 | } | ||
272 | } | ||
273 | |||
274 | #Links table | ||
275 | { | ||
276 | th:nth-child(2) | ||
277 | { | ||
278 | width: 100%; | ||
279 | } | ||
280 | |||
281 | /* th:nth-child(3), th:nth-child(4) */ | ||
282 | /* { */ | ||
283 | /* width: 64px; */ | ||
284 | /* } */ | ||
285 | |||
286 | td:nth-child(3), td:nth-child(4) | ||
287 | { | ||
288 | text-align: center; | ||
289 | } | ||
290 | } | ||