Mercurial Hosting > linkmystyle
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 } |