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.css111
1 files changed, 111 insertions, 0 deletions
diff --git a/fe/src/app.css b/fe/src/app.css
new file mode 100644
index 0000000..4768cf6
--- /dev/null
+++ b/fe/src/app.css
@@ -0,0 +1,111 @@
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}
23a:hover {
24 color: #535bf2;
25}
26
27body {
28 margin: 0;
29 display: flex;
30 place-items: center;
31 min-width: 320px;
32 min-height: 100vh;
33}
34
35h1 {
36 font-size: 3.2em;
37 line-height: 1.1;
38}
39
40.card {
41 padding: 2em;
42}
43
44#app {
45 max-width: 1280px;
46 margin: 0 auto;
47 padding: 2rem;
48}
49
50button {
51 border-radius: 8px;
52 border: 1px solid transparent;
53 padding: 0.6em 1.2em;
54 font-size: 1em;
55 font-weight: 500;
56 font-family: inherit;
57 background-color: #1a1a1a;
58 cursor: pointer;
59 transition: border-color 0.25s;
60}
61button:hover {
62 border-color: #646cff;
63}
64button:focus,
65button:focus-visible {
66 outline: 4px auto -webkit-focus-ring-color;
67}
68
69@media (prefers-color-scheme: light) {
70 :root {
71 color: #213547;
72 background-color: #ffffff;
73 }
74 a:hover {
75 color: #747bff;
76 }
77 button {
78 background-color: #f9f9f9;
79 }
80}
81
82@media (prefers-color-scheme: dark) {
83 :root {
84 color: #000;
85 }
86}
87
88.form {
89 display: flex;
90 flex-direction: column;
91}
92
93.form.input.group {
94 display: flex;
95 flex-direction: column;
96 margin-bottom: 1em;
97}
98
99.form.input.group label {
100 margin-bottom: .5em;
101}
102
103.form.input.group input {
104 padding: 1em;
105}
106
107.form button[type=submit] {
108 align-self: flex-end;
109 background: var(--submit);
110 color: #fff;
111}