Merge remote-tracking branch 'origin/develop' into live-dashboard
[akkoma] / priv / static / instance / static.css
1 * {
2 box-sizing: border-box;
3 }
4
5 :root {
6 --brand-color: #d8a070;
7 --background-color: #121a24;
8 --foreground-color: #182230;
9 --primary-text-color: #b9b9ba;
10 --muted-text-color: #89898a;
11 }
12
13 body {
14 background-color: var(--background-color);
15 font-family: sans-serif;
16 color: var(--primary-text-color);
17 padding: 0;
18 margin: 0;
19 }
20
21 .instance-header {
22 height: 60px;
23 padding: 10px;
24 background: var(--foreground-color);
25 box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
26 }
27
28 .instance-header__content {
29 display: flex;
30 align-items: center;
31 max-width: 400px;
32 margin: 0 auto;
33 }
34
35 .instance-header__thumbnail {
36 max-width: 40px;
37 border-radius: 4px;
38 margin-right: 12px;
39 }
40
41 .instance-header__title {
42 font-size: 16px;
43 font-weight: bold;
44 color: var(--primary-text-color);
45 }
46
47 .container {
48 max-width: 400px;
49 background-color: var(--foreground-color);
50 border-radius: 4px;
51 overflow: hidden;
52 margin: 35px auto;
53 box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
54 }
55
56 .container__content {
57 padding: 0 20px;
58 }
59
60 h1 {
61 margin: 0;
62 font-size: 24px;
63 text-align: center;
64 }
65
66 h2 {
67 color: var(--primary-text-color);
68 font-weight: normal;
69 font-size: 18px;
70 margin-bottom: 20px;
71 }
72
73 a {
74 color: var(--brand-color);
75 text-decoration: none;
76 }
77
78 form {
79 width: 100%;
80 }
81
82 .input {
83 color: var(--muted-text-color);
84 display: flex;
85 flex-direction: column;
86 }
87
88 input {
89 box-sizing: content-box;
90 padding: 10px;
91 margin-top: 5px;
92 margin-bottom: 10px;
93 background-color: var(--background-color);
94 color: var(--primary-text-color);
95 border: 0;
96 transition-property: border-bottom;
97 transition-duration: 0.35s;
98 border-bottom: 2px solid #2a384a;
99 font-size: 14px;
100 }
101
102 .scopes-input {
103 display: flex;
104 flex-direction: column;
105 margin: 1em 0;
106 color: var(--muted-text-color);
107 }
108
109 .scopes-input label:first-child {
110 height: 2em;
111 }
112
113 .scopes {
114 display: flex;
115 flex-wrap: wrap;
116 color: var(--primary-text-color);
117 }
118
119 .scope {
120 display: flex;
121 flex-basis: 100%;
122 height: 2em;
123 align-items: center;
124 }
125
126 .scope:before {
127 color: var(--primary-text-color);
128 content: "✔\fe0e";
129 margin-left: 1em;
130 margin-right: 1em;
131 }
132
133 [type="checkbox"] + label {
134 display: none;
135 cursor: pointer;
136 margin: 0.5em;
137 }
138
139 [type="checkbox"] {
140 display: none;
141 }
142
143 [type="checkbox"] + label:before {
144 cursor: pointer;
145 display: inline-block;
146 color: white;
147 background-color: var(--background-color);
148 border: 4px solid var(--background-color);
149 box-shadow: 0px 0px 1px 0 var(--brand-color);
150 width: 1.2em;
151 height: 1.2em;
152 margin-right: 1.0em;
153 content: "";
154 transition-property: background-color;
155 transition-duration: 0.35s;
156 color: var(--background-color);
157 margin-bottom: -0.2em;
158 border-radius: 2px;
159 }
160
161 [type="checkbox"]:checked + label:before {
162 background-color: var(--brand-color);
163 }
164
165 input:focus {
166 outline: none;
167 border-bottom: 2px solid var(--brand-color);
168 }
169
170 .actions {
171 display: flex;
172 justify-content: flex-end;
173 }
174
175 .actions button,
176 .actions a.button {
177 width: auto;
178 margin-left: 10px;
179 }
180
181 a.button,
182 button {
183 width: 100%;
184 background-color: #1c2a3a;
185 color: var(--primary-text-color);
186 border-radius: 4px;
187 border: none;
188 padding: 10px 16px;
189 margin-top: 20px;
190 margin-bottom: 20px;
191 text-transform: uppercase;
192 font-size: 16px;
193 box-shadow: 0px 0px 2px 0px black,
194 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
195 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
196 }
197
198 a.button:hover,
199 button:hover {
200 cursor: pointer;
201 box-shadow: 0px 0px 0px 1px var(--brand-color),
202 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
203 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
204 }
205
206 .alert-danger {
207 width: 100%;
208 background-color: #931014;
209 border: 1px solid #a06060;
210 border-radius: 4px;
211 padding: 10px;
212 margin-top: 20px;
213 font-weight: 500;
214 font-size: 16px;
215 }
216
217 .alert-info {
218 width: 100%;
219 border-radius: 4px;
220 border: 1px solid #7d796a;
221 padding: 10px;
222 margin-top: 20px;
223 font-weight: 500;
224 font-size: 16px;
225 }
226
227 .account-header__banner {
228 width: 100%;
229 height: 112px;
230 background-size: cover;
231 background-position: center;
232 }
233
234 .account-header__avatar {
235 width: 94px;
236 height: 94px;
237 background-size: cover;
238 background-position: center;
239 margin: -47px 10px 0;
240 border: 6px solid var(--foreground-color);
241 border-radius: 999px;
242 }
243
244 .account-header__meta {
245 padding: 6px 20px 17px;
246 }
247
248 .account-header__display-name {
249 font-size: 20px;
250 font-weight: bold;
251 }
252
253 .account-header__nickname {
254 font-size: 14px;
255 color: var(--muted-text-color);
256 }
257
258 @media all and (max-width: 420px) {
259 .container {
260 margin: 0 auto;
261 border-radius: 0;
262 }
263
264 .scope {
265 flex-basis: 0%;
266 }
267
268 .scope:before {
269 content: "";
270 margin-left: 0em;
271 margin-right: 1em;
272 }
273
274 .scope:first-child:before {
275 margin-left: 1em;
276 content: "✔\fe0e";
277 }
278
279 .scope:after {
280 content: ",";
281 }
282
283 .scope:last-child:after {
284 content: "";
285 }
286 }
287 .form-row {
288 display: flex;
289 }
290 .form-row > label {
291 line-height: 47px;
292 flex: 1;
293 }
294 .form-row > input {
295 flex: 2;
296 }