aboutsummaryrefslogtreecommitdiff
path: root/statics/styles.css
diff options
context:
space:
mode:
authorMetroWind <chris.corsair@gmail.com>2025-09-07 09:42:33 -0700
committerMetroWind <chris.corsair@gmail.com>2025-09-07 09:42:33 -0700
commitea0d3220db995018335c48eb06b9794235ff436b (patch)
tree892564cdd4946c6ee9c1051bc31ff5c7bba6ddf1 /statics/styles.css
Initial commit, mostly just copied from shrt.
Diffstat (limited to 'statics/styles.css')
-rw-r--r--statics/styles.css290
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
6html, body, div, span, applet, object, iframe,
7h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8a, abbr, acronym, address, big, cite, code,
9del, dfn, em, img, ins, kbd, q, s, samp,
10small, strike, strong, sub, sup, tt, var,
11b, u, i, center,
12dl, dt, dd, ol, ul, li,
13fieldset, form, label, legend,
14table, caption, tbody, tfoot, thead, tr, th, td,
15article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary,
18time, 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 */
27article, aside, details, figcaption, figure,
28footer, header, hgroup, menu, nav, section {
29 display: block;
30}
31body {
32 line-height: 1;
33}
34ol, ul {
35 list-style: none;
36}
37blockquote, q {
38 quotes: none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42 content: '';
43 content: none;
44}
45table {
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
69html
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
102input[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
117a.Button, a.FloatButton
118{
119 color: black;
120 text-decoration: none;
121}
122
123button, 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
163button: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
171hr
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
204table.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
236nav
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
251table.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}