diff options
Diffstat (limited to 'fe/src/app.css')
-rw-r--r-- | fe/src/app.css | 53 |
1 files changed, 17 insertions, 36 deletions
diff --git a/fe/src/app.css b/fe/src/app.css index c24c713..be7d15c 100644 --- a/fe/src/app.css +++ b/fe/src/app.css | |||
@@ -5,48 +5,34 @@ | |||
5 | 5 | ||
6 | color-scheme: light dark; | 6 | color-scheme: light dark; |
7 | color: rgba(255, 255, 255, 0.87); | 7 | color: rgba(255, 255, 255, 0.87); |
8 | background-color: #242424; | 8 | background-color: var(--background); |
9 | width: 100vw; | ||
9 | 10 | ||
10 | font-synthesis: none; | 11 | font-synthesis: none; |
11 | text-rendering: optimizeLegibility; | 12 | text-rendering: optimizeLegibility; |
12 | -webkit-font-smoothing: antialiased; | 13 | -webkit-font-smoothing: antialiased; |
13 | -moz-osx-font-smoothing: grayscale; | 14 | -moz-osx-font-smoothing: grayscale; |
14 | 15 | ||
15 | --submit: #28a745; | 16 | --background: #242424; |
16 | } | 17 | } |
17 | 18 | ||
18 | a { | 19 | @media (min-width: 916px) { |
19 | font-weight: 500; | 20 | :root { |
20 | color: #646cff; | 21 | width: unset; |
21 | text-decoration: inherit; | 22 | } |
22 | } | ||
23 | 23 | ||
24 | a:hover { | 24 | #content div.column:first-child { |
25 | color: #535bf2; | 25 | flex-direction: row; |
26 | height: 300px; | ||
27 | } | ||
26 | } | 28 | } |
27 | 29 | ||
28 | body { | 30 | body { |
29 | margin: 0; | 31 | margin: 0; |
30 | display: flex; | 32 | padding: 0 2em 2em; |
31 | place-items: center; | ||
32 | min-width: 320px; | ||
33 | min-height: 100vh; | ||
34 | } | 33 | } |
35 | 34 | ||
36 | h1 { | ||
37 | font-size: 3.2em; | ||
38 | line-height: 1.1; | ||
39 | } | ||
40 | 35 | ||
41 | .card { | ||
42 | padding: 2em; | ||
43 | } | ||
44 | |||
45 | #app { | ||
46 | flex-grow: 2; | ||
47 | max-width: 1280px; | ||
48 | margin: 0 auto; | ||
49 | } | ||
50 | 36 | ||
51 | button { | 37 | button { |
52 | border-radius: 8px; | 38 | border-radius: 8px; |
@@ -56,6 +42,7 @@ button { | |||
56 | font-weight: 500; | 42 | font-weight: 500; |
57 | font-family: inherit; | 43 | font-family: inherit; |
58 | background-color: #1a1a1a; | 44 | background-color: #1a1a1a; |
45 | color: inherit; | ||
59 | cursor: pointer; | 46 | cursor: pointer; |
60 | transition: border-color 0.25s; | 47 | transition: border-color 0.25s; |
61 | } | 48 | } |
@@ -64,10 +51,6 @@ button:hover { | |||
64 | border-color: #646cff; | 51 | border-color: #646cff; |
65 | } | 52 | } |
66 | 53 | ||
67 | button:focus, | ||
68 | button:focus-visible { | ||
69 | outline: 4px auto -webkit-focus-ring-color; | ||
70 | } | ||
71 | 54 | ||
72 | @media (prefers-color-scheme: light) { | 55 | @media (prefers-color-scheme: light) { |
73 | :root { | 56 | :root { |
@@ -84,12 +67,6 @@ button:focus-visible { | |||
84 | } | 67 | } |
85 | } | 68 | } |
86 | 69 | ||
87 | @media (prefers-color-scheme: dark) { | ||
88 | :root { | ||
89 | color: #000; | ||
90 | } | ||
91 | } | ||
92 | |||
93 | .form { | 70 | .form { |
94 | display: flex; | 71 | display: flex; |
95 | flex-direction: column; | 72 | flex-direction: column; |
@@ -118,3 +95,7 @@ button:focus-visible { | |||
118 | background: var(--submit); | 95 | background: var(--submit); |
119 | color: #fff; | 96 | color: #fff; |
120 | } | 97 | } |
98 | |||
99 | dialog { | ||
100 | top: 8em; | ||
101 | } | ||