comparison src/admin.css @ 0:8f4df159f06b

start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 a {
2 color: #472C7D;
3 }
4
5 a[button] {
6 display: inline-block;
7 text-decoration: none;
8 }
9
10 button,
11 [onclick],
12 [clickable],
13 input[type="radio"],
14 input[type="submit"] {
15 cursor: pointer;
16 }
17
18 [pulldown] {
19 position: relative;
20 }
21 [pulldown_menu] {
22 display: none;
23 z-index: 20;
24 position: absolute;
25 top: 50px;
26 border: 1px solid #DDDDDD;
27 text-align: left;
28 background-color: #ffffff;
29 border-radius: 12px;
30 }
31 [pulldown_menu] a {
32 display: block;
33 color: black;
34 padding-left: 32px;
35 padding-right: 32px;
36 white-space: nowrap;
37 text-decoration: none;
38 }
39 [pulldown_menu] a:hover {
40 text-decoration: underline;
41 }
42 [pulldown_menu] a {
43 font-size: 15px;
44 margin-top: 12px;
45 margin-bottom: 12px;
46 }
47
48 input[clipboard] {
49 position: absolute;
50 top: -1000px;
51 }
52
53 [pulldown_menu] span[copy] {
54 display: inline-block;
55 text-align: right;
56 min-width: 5em;
57 }
58
59 [pulldown_menu] span[copy=copied] {
60 color: lime;
61 }
62
63 div[header] {
64 display: flex;
65 padding: 20px 40px;
66 justify-content: space-between;
67 align-items: center;
68 background-color: #DBD5FF;
69 }
70 div[header] > a[left] {
71 font-size: 28px;
72 text-decoration: none;
73 color: black;
74 }
75 img[logo] {
76 height: 50px;
77 display: block;
78 }
79 @media (min-width: 757px) {
80 img[logo="small"] {
81 display: none;
82 }
83 }
84 @media (max-width: 756px) {
85 img[logo="big"] {
86 display: none;
87 }
88 }
89 div[header] [pulldown_menu] {
90 right: 0;
91 }
92 div[header] > span[right] img {
93 width: 50px;
94 height: 50px;
95 object-fit: cover;
96 border-radius: 50%;
97 }
98 div[header] > span[right][login] {
99 display: flex;
100 gap: 10px;
101 }
102 div[header] > span[right][login] a[button] {
103 padding: 18px 26px 20px 26px;
104 }
105 div[header] > span[right][login] a[login] {
106 color: black;
107 background-color: #EAEAEA;
108 }
109 div[header] > span[right][login] a[login]:hover {
110 background-color: #D1D1D1;
111 }
112 div[header] > span[right][login] a[register] {
113 color: white;
114 background-color: #4E4293;
115 }
116 div[header] > span[right][login] a[register]:hover {
117 background-color: #272A3B;
118 }
119
120 [page] {
121 padding-left: 40px;
122 padding-right: 40px;
123 }
124 [page] > * {
125 max-width: 600px;
126 margin-left: auto;
127 margin-right: auto;
128 }
129 [page] a[header] {
130 display: block;
131 color: black;
132 text-decoration: none;
133 padding-top: 20px;
134 margin-bottom: 100px;
135 font-size: 28px;
136 }
137 [page] h1 {
138 color: #4E4293;
139 }
140 [page] h1 + p {
141 color: #9E9E9E;
142 }
143 input[type="url"],
144 input[type="password"],
145 input[type="email"],
146 input[type="text"] {
147 display: block;
148 width: 100%;
149 border: none;
150 background-color: #E0E0E0;
151 padding: 12px;
152 font-size: 16px;
153 }
154 textarea {
155 display: block;
156 width: 100%;
157 background-color: #E0E0E0;
158 padding: 12px;
159 font-size: 16px;
160 font-family: inherit;
161 }
162 [page] input[type="url"]:not(:first-of-type),
163 [page] input[type="password"]:not(:first-of-type),
164 [page] div[password],
165 [page] input[type="email"]:not(:first-of-type),
166 [page] input[type="text"]:not(:first-of-type) {
167 margin-top: 32px;
168 }
169
170 [page],
171 [full] {
172 min-height: 100vh;
173 padding-bottom: 77px;
174 position: relative;
175 }
176 div[footer] {
177 padding: 20px 40px;
178 background-color: #DBD5FF;
179 color: #4E4293;
180 position: absolute;
181 bottom: 0;
182 width: 100%;
183 display: flex;
184 justify-content: space-between;
185 }
186
187 div[footer] img {
188 height: 40px;
189 display: inline-block;
190 }
191 div[footer] img[ios] {
192 padding-top: 4px;
193 padding-bottom: 4px;
194 }
195 [page] > div[footer] {
196 padding: 20px 0;
197 background-color: white;
198 position: initial;
199 }
200
201 div[error] {
202 color: firebrick;
203 }
204 div[error][flash] {
205 color: red;
206 }
207 div[error="success"] {
208 color: green;
209 }
210 div[error="success"][flash] {
211 color: lime;
212 }
213
214 div[password] {
215 position: relative;
216 }
217 div[password] input {
218 padding-right: 40px;
219 }
220 div[password] img {
221 position: absolute;
222 top: 11px;
223 right: 10px;
224 height: 22px;
225 opacity: .6;
226 cursor: pointer;
227 }
228 div[password] img[show] {
229 display: block;
230 }
231 div[password] img[hide] {
232 display: none;
233 }
234
235 button[big],
236 a[button][big] {
237 display: block;
238 width: 100%;
239 border-radius: 12px / 50%;
240 color: white;
241 background-color: #9181EE;
242 text-align: center;
243 padding: 12px;
244 border: none;
245 font: inherit;
246 }
247 [page] button[big],
248 [page] a[button][big] {
249 margin-top: 64px;
250 }
251 button[big]:hover,
252 a[button][big]:hover {
253 background-color: #4E4293;
254 }
255 @media (min-width: 800px) {
256 body:has([right_of_page]) [page] {
257 width: 60%;
258 }
259 body:has([right_of_page]) [right_of_page] {
260 display: block;
261 position: fixed;
262 top: 0;
263 right: 0;
264 bottom: 0;
265 left: 60%;
266 background-size: cover;
267 background-repeat: no-repeat;
268 background-position: center;
269 }
270 }
271
272 button[small] {
273 border-radius: 12px / 50%;
274 color: white;
275 background-color: #151721;
276 text-align: center;
277 padding-left: 12px;
278 padding-right: 12px;
279 padding-top: 6px;
280 padding-bottom: 6px;
281 border: none;
282 font: inherit;
283 }
284 button[small]:hover {
285 background-color: #272A3B;
286 }
287
288 input[type="file"] {
289 display: none;
290 }
291
292 p[top] {
293 max-width: 600px;
294 margin-left: auto;
295 margin-right: auto;
296 color: #808080;
297 }
298 @media (max-width: 700px) {
299 p[top] {
300 max-width: 90%;
301 }
302 }