aboutsummaryrefslogtreecommitdiff
path: root/fe/src/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/app.css')
-rw-r--r--fe/src/app.css120
1 files changed, 120 insertions, 0 deletions
diff --git a/fe/src/app.css b/fe/src/app.css
new file mode 100644
index 0000000..c24c713
--- /dev/null
+++ b/fe/src/app.css
@@ -0,0 +1,120 @@
1:root {
2 font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 line-height: 1.5;
4 font-weight: 400;
5
6 color-scheme: light dark;
7 color: rgba(255, 255, 255, 0.87);
8 background-color: #242424;
9
10 font-synthesis: none;
11 text-rendering: optimizeLegibility;
12 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale;
14
15 --submit: #28a745;
16}
17
18a {
19 font-weight: 500;
20 color: #646cff;
21 text-decoration: inherit;
22}
23
24a:hover {
25 color: #535bf2;
26}
27
28body {
29 margin: 0;
30 display: flex;
31 place-items: center;
32 min-width: 320px;
33 min-height: 100vh;
34}
35
36h1 {
37 font-size: 3.2em;
38 line-height: 1.1;
39}
40
41.card {
42 padding: 2em;
43}
44
45#app {
46 flex-grow: 2;
47 max-width: 1280px;
48 margin: 0 auto;
49}
50
51button {
52 border-radius: 8px;
53 border: 1px solid transparent;
54 padding: 0.6em 1.2em;
55 font-size: 1em;
56 font-weight: 500;
57 font-family: inherit;
58 background-color: #1a1a1a;
59 cursor: pointer;
60 transition: border-color 0.25s;
61}
62
63button:hover {
64 border-color: #646cff;
65}
66
67button:focus,
68button:focus-visible {
69 outline: 4px auto -webkit-focus-ring-color;
70}
71
72@media (prefers-color-scheme: light) {
73 :root {
74 color: #213547;
75 background-color: #ffffff;
76 }
77
78 a:hover {
79 color: #747bff;
80 }
81
82 button {
83 background-color: #f9f9f9;
84 }
85}
86
87@media (prefers-color-scheme: dark) {
88 :root {
89 color: #000;
90 }
91}
92
93.form {
94 display: flex;
95 flex-direction: column;
96}
97
98.form.input.group {
99 display: flex;
100 flex-direction: column;
101 margin-bottom: 1em;
102}
103
104.form.input.group label {
105 margin-bottom: .5em;
106}
107
108.form.input.group input {
109 padding: 1em;
110}
111
112.form.input.group input[type=color] {
113 padding: 0;
114}
115
116.form button[type=submit] {
117 align-self: flex-end;
118 background: var(--submit);
119 color: #fff;
120}