Skip to content

Commit 071b2d5

Browse files
svenseebergsvenseeberg
committed
Make it pretty
1 parent 39e18d8 commit 071b2d5

5 files changed

Lines changed: 364 additions & 56 deletions

File tree

‎opendrift_leeway_webgui/leeway/static/css/style.css‎

Lines changed: 330 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,341 @@
1-
/* Form table */
2-
table {
3-
border-spacing: 5 10px;
1+
/* ── Custom properties ─────────────────────────────────────────── */
2+
:root {
3+
--navy: #1a2e4a;
4+
--navy-dark: #111e30;
5+
--accent: #2e86c1;
6+
--accent-hover: #1a6699;
7+
--bg: #f0f4f8;
8+
--card-bg: #ffffff;
9+
--text: #1c2b3a;
10+
--text-muted: #5a6a7a;
11+
--border: #d0dae4;
12+
--radius: 8px;
13+
--shadow: 0 2px 12px rgba(26, 46, 74, 0.10);
414
}
5-
th {
6-
text-align: center;
15+
16+
/* ── Reset & base ──────────────────────────────────────────────── */
17+
*, *::before, *::after {
18+
box-sizing: border-box;
19+
margin: 0;
20+
padding: 0;
721
}
8-
td {
9-
text-align: center;
22+
23+
body {
24+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
25+
background: var(--bg);
26+
color: var(--text);
27+
min-height: 100vh;
28+
display: flex;
29+
flex-direction: column;
1030
}
11-
.errorlist {
12-
font-weight: bold;
13-
color: red;
14-
list-style-type: none;
15-
padding: 0;
31+
32+
a {
33+
color: var(--accent);
34+
text-decoration: none;
35+
}
36+
37+
a:hover {
38+
text-decoration: underline;
39+
color: var(--accent-hover);
40+
}
41+
42+
/* ── Header ────────────────────────────────────────────────────── */
43+
header {
44+
background: var(--navy);
45+
color: #fff;
46+
padding: 0 2rem;
47+
display: flex;
48+
align-items: center;
49+
justify-content: space-between;
50+
height: 56px;
51+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
52+
position: sticky;
53+
top: 0;
54+
z-index: 100;
55+
}
56+
57+
.site-title {
58+
font-size: 1.15rem;
59+
font-weight: 700;
60+
letter-spacing: 0.02em;
61+
color: #fff;
62+
text-decoration: none;
63+
white-space: nowrap;
64+
}
65+
66+
.site-title:hover {
67+
color: #cce0f0;
68+
text-decoration: none;
69+
}
70+
71+
nav {
72+
display: flex;
73+
align-items: center;
74+
gap: 0.1rem;
75+
}
76+
77+
nav a,
78+
nav button {
79+
color: #cce0f0;
80+
text-decoration: none;
81+
font-size: 0.9rem;
82+
padding: 0.35rem 0.75rem;
83+
border-radius: var(--radius);
84+
border: none;
85+
background: none;
86+
cursor: pointer;
87+
font-family: inherit;
88+
transition: background 0.15s, color 0.15s;
89+
white-space: nowrap;
90+
line-height: 1;
91+
}
92+
93+
nav a:hover,
94+
nav button:hover {
95+
background: rgba(255, 255, 255, 0.12);
96+
color: #fff;
97+
text-decoration: none;
98+
}
99+
100+
nav .sep {
101+
color: rgba(255, 255, 255, 0.25);
102+
padding: 0;
103+
pointer-events: none;
104+
user-select: none;
105+
}
106+
107+
/* ── Main content card ─────────────────────────────────────────── */
108+
main {
109+
flex: 1;
110+
width: 100%;
111+
max-width: 820px;
112+
margin: 2rem auto;
113+
padding: 0 1rem 3rem;
114+
}
115+
116+
.card {
117+
background: var(--card-bg);
118+
border-radius: var(--radius);
119+
box-shadow: var(--shadow);
120+
padding: 2rem;
16121
}
17122

18-
/* Success/error messages */
123+
h2 {
124+
font-size: 1.5rem;
125+
font-weight: 700;
126+
color: var(--navy);
127+
margin-bottom: 1.25rem;
128+
padding-bottom: 0.6rem;
129+
border-bottom: 2px solid var(--accent);
130+
}
131+
132+
h3 {
133+
font-size: 1.1rem;
134+
font-weight: 600;
135+
color: var(--navy);
136+
margin: 1.5rem 0 0.6rem;
137+
}
138+
139+
p {
140+
line-height: 1.7;
141+
margin-bottom: 0.9rem;
142+
}
143+
144+
ol, ul {
145+
padding-left: 1.4rem;
146+
margin-bottom: 0.9rem;
147+
line-height: 1.7;
148+
}
149+
150+
pre {
151+
background: #eef2f7;
152+
border: 1px solid var(--border);
153+
border-radius: 4px;
154+
padding: 0.5rem 0.75rem;
155+
font-size: 0.875rem;
156+
overflow-x: auto;
157+
margin: 0.4rem 0 0.9rem;
158+
white-space: pre-wrap;
159+
word-break: break-all;
160+
}
161+
162+
img {
163+
max-width: 100%;
164+
height: auto;
165+
border-radius: var(--radius);
166+
margin-top: 0.5rem;
167+
}
168+
169+
/* ── Messages ──────────────────────────────────────────────────── */
19170
.messages {
20-
font-weight: bold;
171+
margin-bottom: 1.5rem;
21172
}
22-
.success {
23-
color: green;
173+
174+
.messages p {
175+
padding: 0.75rem 1rem;
176+
border-radius: var(--radius);
177+
border-left: 4px solid;
178+
margin-bottom: 0.5rem;
179+
font-weight: 500;
180+
line-height: 1.5;
24181
}
25-
.info {
26-
color: blue;
182+
183+
.messages .success {
184+
background: #eafaf1;
185+
border-color: #27ae60;
186+
color: #1e8449;
27187
}
28-
.warning {
29-
color: orange;
188+
189+
.messages .info {
190+
background: #eaf4fb;
191+
border-color: var(--accent);
192+
color: #1a5276;
193+
}
194+
195+
.messages .warning {
196+
background: #fef9e7;
197+
border-color: #f39c12;
198+
color: #935e0a;
199+
}
200+
201+
.messages .error {
202+
background: #fdedec;
203+
border-color: #e74c3c;
204+
color: #922b21;
205+
}
206+
207+
/* ── Forms ─────────────────────────────────────────────────────── */
208+
label {
209+
display: block;
210+
font-weight: 600;
211+
font-size: 0.9rem;
212+
margin-bottom: 0.3rem;
213+
color: var(--text);
214+
}
215+
216+
input[type="text"],
217+
input[type="password"],
218+
input[type="email"],
219+
input[type="number"],
220+
input[type="datetime-local"],
221+
select,
222+
textarea {
223+
width: 100%;
224+
padding: 0.5rem 0.75rem;
225+
border: 1px solid var(--border);
226+
border-radius: var(--radius);
227+
font-size: 0.95rem;
228+
font-family: inherit;
229+
color: var(--text);
230+
background: #fff;
231+
transition: border-color 0.15s, box-shadow 0.15s;
232+
}
233+
234+
input:focus,
235+
select:focus,
236+
textarea:focus {
237+
outline: none;
238+
border-color: var(--accent);
239+
box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.18);
240+
}
241+
242+
/* Django as_table / as_p form layout */
243+
form table {
244+
width: 100%;
245+
border-spacing: 0;
246+
border-collapse: collapse;
247+
}
248+
249+
form table tr {
250+
display: flex;
251+
flex-direction: column;
252+
margin-bottom: 1.1rem;
253+
}
254+
255+
form table th {
256+
font-weight: 600;
257+
font-size: 0.9rem;
258+
color: var(--text);
259+
text-align: left;
260+
padding: 0 0 0.3rem;
261+
border: none;
262+
background: none;
263+
}
264+
265+
form table td {
266+
padding: 0;
267+
border: none;
268+
background: none;
269+
text-align: left;
30270
}
31-
.error {
32-
color: red;
271+
272+
button[type="submit"] {
273+
display: inline-block;
274+
margin-top: 0.5rem;
275+
padding: 0.55rem 1.6rem;
276+
background: var(--accent);
277+
color: #fff;
278+
border: none;
279+
border-radius: var(--radius);
280+
font-size: 0.95rem;
281+
font-weight: 600;
282+
font-family: inherit;
283+
cursor: pointer;
284+
transition: background 0.15s;
285+
}
286+
287+
button[type="submit"]:hover {
288+
background: var(--accent-hover);
289+
}
290+
291+
.errorlist {
292+
font-weight: 600;
293+
color: #c0392b;
294+
list-style-type: none;
295+
padding: 0;
296+
margin: 0.3rem 0 0;
297+
font-size: 0.875rem;
298+
}
299+
300+
/* ── Data tables (list view, documentation) ────────────────────── */
301+
table.data-table,
302+
table.tg {
303+
width: 100%;
304+
border-collapse: collapse;
305+
font-size: 0.9rem;
306+
margin-bottom: 1.25rem;
307+
}
308+
309+
table.data-table th,
310+
table.tg th {
311+
background: var(--navy);
312+
color: #fff;
313+
padding: 0.6rem 0.9rem;
314+
text-align: left;
315+
font-weight: 600;
316+
}
317+
318+
table.data-table td,
319+
table.tg td {
320+
padding: 0.55rem 0.9rem;
321+
border-bottom: 1px solid var(--border);
322+
text-align: left;
323+
color: var(--text);
324+
}
325+
326+
table.data-table tr:nth-child(even) td,
327+
table.tg tr:nth-child(even) td {
328+
background: #f7fafc;
329+
}
330+
331+
table.data-table tr:hover td,
332+
table.tg tr:hover td {
333+
background: #eaf4fb;
334+
}
335+
336+
/* ── Detail view ───────────────────────────────────────────────── */
337+
.error-label {
338+
font-weight: 700;
339+
color: #c0392b;
340+
margin-bottom: 0.5rem;
33341
}

0 commit comments

Comments
 (0)