tokono.ma
A music player that connects to your cloud/distributed storage.
1body {
2 background-color: var(--bg-color);
3 color: var(--text-color);
4}
5
6.panel {
7 border: 2px solid var(--form-color);
8 border-radius: var(--radius-md);
9 display: flex;
10 flex-direction: column;
11 gap: var(--space-sm);
12 padding: var(--space-sm);
13}
14
15/**
16 * Buttons
17 */
18
19button,
20.button {
21 background: transparent;
22 border: 2px solid var(--form-color);
23 border-radius: var(--radius-md);
24 color: currentColor;
25 cursor: pointer;
26 display: inline-block;
27 font-size: var(--fs-xs);
28 font-family: inherit;
29 font-weight: 500;
30 letter-spacing: var(--leading-relaxed);
31 line-height: 1;
32 padding: var(--space-xs) var(--space-sm);
33 text-transform: uppercase;
34
35 & * {
36 pointer-events: none;
37 }
38
39 &[disabled] {
40 cursor: not-allowed;
41 opacity: 0.4;
42 }
43
44 &.button--accent {
45 border-color: var(--accent);
46 color: var(--accent);
47 }
48
49 &.button--active {
50 background-color: var(--accent);
51 border-color: var(--accent);
52 color: var(--bg-color);
53 }
54
55 & > .with-icon {
56 padding-top: 1px;
57 }
58}
59
60a.button {
61 text-decoration: none;
62}
63
64.button-row {
65 display: inline-flex;
66 gap: var(--space-2xs);
67}
68
69/**
70 * Forms
71 */
72
73input,
74textarea {
75 background: transparent;
76 border: 2px solid var(--form-color);
77 border-radius: var(--radius-md);
78 color: inherit;
79 font-size: var(--fs-sm);
80 padding: var(--space-2xs);
81 transition-duration: 250ms;
82 transition-property: border-color;
83 width: 100%;
84
85 &:focus {
86 border-color: var(--accent);
87 outline: none;
88 }
89}
90
91textarea {
92 height: var(--container-xs);
93 padding: var(--space-xs);
94 resize: none;
95}
96
97select {
98 appearance: none;
99 background: transparent;
100 border: 2px solid var(--form-color);
101 border-radius: var(--radius-md);
102 color: inherit;
103 font-family: inherit;
104 font-size: var(--fs-sm);
105 padding: var(--space-2xs) var(--space-xs);
106 transition-duration: 250ms;
107 transition-property: border-color;
108
109 &:focus {
110 border-color: var(--accent);
111 outline: none;
112 }
113
114 option,
115 optgroup {
116 color: black;
117 }
118}
119
120/**
121 * Misc
122 */
123
124.with-icon {
125 align-items: center;
126 display: inline-flex;
127 gap: var(--space-2xs);
128}
129
130/**
131 * Separators
132 */
133
134hr,
135.separator {
136 border: 0;
137 border-top: 2px solid var(--form-color);
138}
139
140.row {
141 display: flex;
142 flex-wrap: wrap;
143 gap: var(--space-xs);
144}
145
146/**
147 * Tables
148 */
149
150table {
151 border-collapse: collapse;
152 width: 100%;
153}
154
155th,
156td {
157 border: 2px solid var(--form-color);
158 padding: var(--space-2xs) var(--space-xs);
159 text-align: left;
160}
161
162th {
163 font-weight: 600;
164}