1- /* style.css */
1+ /* https://github.com/drduh/gone/blob/main/assets/ style.css */
22
33* {
44 box-sizing : border-box;
88 animation : var (--bg-animation );
99 background : var (--bg-gradient );
1010 background-size : var (--bg-size );
11- background-attachment : fixed;
1211 min-height : 100% ;
1312}
1413
@@ -19,14 +18,14 @@ body {
1918 display : flex;
2019 flex-direction : column;
2120 font-family : "Open Sans" , "Helvetica Neue" , Helvetica, Arial, sans-serif;
22- font-size : 1 em ;
21+ font-size : var ( --font-size ) ;
2322 margin : 1em auto;
2423}
2524
2625.box {
2726 background-color : var (--bg-norm-half );
2827 border : 1px solid var (--fg-dark );
29- border-radius : var (--box- radius );
28+ border-radius : var (--radius-box );
3029 flex : 1 ;
3130 margin : 1em auto;
3231 padding : 1em ;
@@ -62,7 +61,6 @@ select {
6261
6362button [disabled ] {
6463 opacity : 0.5 ;
65- pointer-events : none;
6664}
6765
6866button : focus ,
@@ -85,7 +83,7 @@ select {
8583 appearance : none;
8684 background-color : var (--bg-dark );
8785 border : none;
88- border-radius : var (--box- radius );
86+ border-radius : var (--radius-box );
8987 color : var (--fg-light );
9088 cursor : pointer;
9189 margin : 10px ;
@@ -106,7 +104,7 @@ input[type="number"] {
106104
107105.message .owner {
108106 background-color : var (--bg-light );
109- border-radius : var (--box- radius );
107+ border-radius : var (--radius-box );
110108 bottom : 2em ;
111109 color : var (--fg-light );
112110 padding : 6px 0 ;
@@ -121,7 +119,7 @@ input[type="number"] {
121119.message .owner ::after {
122120 border-color : var (--fg-light ) transparent transparent transparent;
123121 border-style : solid;
124- border-width : var (--box- radius );
122+ border-width : var (--radius-box );
125123 content : "" ;
126124 left : 50% ;
127125 margin-left : -5px ;
@@ -183,12 +181,17 @@ input[type="file"]::file-selector-button:hover {
183181}
184182
185183input [type = "radio" ] {
186- display : none;
184+ height : 1px ;
185+ margin : 0 ;
186+ opacity : 0 ;
187+ pointer-events : none;
188+ position : absolute;
189+ width : 1px ;
187190}
188191
189192table {
190193 border-collapse : collapse;
191- border-radius : var (--box- radius );
194+ border-radius : var (--radius-box );
192195 margin : 1em auto;
193196 overflow : hidden;
194197 width : 80% ;
@@ -248,3 +251,109 @@ summary::marker {
248251 content : "" ;
249252 display : none;
250253}
254+
255+ .themes {
256+ display : grid;
257+ gap : 1em ;
258+ grid-template-columns : repeat (5 , 1fr );
259+ }
260+
261+ .themes label {
262+ display : block;
263+ width : var (--width-theme );
264+ height : var (--width-theme );
265+ border-radius : var (--radius-theme );
266+ cursor : pointer;
267+ outline : 2px solid transparent;
268+ outline-offset : 2px ;
269+ }
270+
271+ .themes label : hover ,
272+ .themes label : has (input : checked ) {
273+ outline-color : var (--fg-dark );
274+ }
275+
276+ .themes label : has (input : focus-visible ) {
277+ outline-color : var (--fg-light );
278+ }
279+
280+ .theme {
281+ clip : rect (0 , 0 , 0 , 0 );
282+ position : absolute;
283+ }
284+
285+ .theme-light {
286+ background : linear-gradient (var (--rotation ),
287+ rgba (238 , 232 , 213 , 1 ) 0% ,
288+ rgba (253 , 246 , 227 , 1 ) 100% );
289+ }
290+ .theme-dark {
291+ background : linear-gradient (var (--rotation ),
292+ rgba (101 , 123 , 131 , 1 ) 0% ,
293+ rgba ( 0 , 43 , 54 , 1 ) 100% );
294+ }
295+ .theme-navy {
296+ background : linear-gradient (var (--rotation ),
297+ rgba ( 0 , 91 , 150 , 1 ) 0% ,
298+ rgba ( 1 , 31 , 75 , 1 ) 100% );
299+ }
300+ .theme-rose {
301+ background : linear-gradient (var (--rotation ),
302+ rgba (220 , 130 , 130 , 1 ) 0% ,
303+ rgba (145 , 55 , 55 , 1 ) 100% );
304+ }
305+ .theme-green {
306+ background : linear-gradient (var (--rotation ),
307+ rgba (119 , 171 , 89 , 1 ) 0% ,
308+ rgba ( 35 , 77 , 32 , 1 ) 100% );
309+ }
310+ .theme-lime {
311+ background : linear-gradient (var (--rotation ),
312+ rgba (170 , 220 , 130 , 1 ) 0% ,
313+ rgba ( 80 , 130 , 50 , 1 ) 100% );
314+ }
315+ .theme-pink {
316+ background : linear-gradient (var (--rotation ),
317+ rgba (255 , 185 , 210 , 1 ) 0% ,
318+ rgba (210 , 90 , 140 , 1 ) 100% );
319+ }
320+ .theme-gold {
321+ background : linear-gradient (var (--rotation ),
322+ rgba (255 , 212 , 71 , 1 ) 0% ,
323+ rgba (166 , 124 , 0 , 1 ) 100% );
324+ }
325+ .theme-purple {
326+ background : linear-gradient (var (--rotation ),
327+ rgba (170 , 145 , 230 , 1 ) 0% ,
328+ rgba ( 80 , 60 , 160 , 1 ) 100% );
329+ }
330+ .theme-lush {
331+ background : linear-gradient (var (--rotation ),
332+ rgba (169 , 132 , 248 , 1 ) 0% ,
333+ rgba ( 26 , 184 , 126 , 1 ) 100% );
334+ }
335+ .theme-beach {
336+ background : linear-gradient (var (--rotation ),
337+ rgba (246 , 97 , 81 , 1 ) 0% ,
338+ rgba ( 66 , 142 , 186 , 1 ) 100% );
339+ }
340+ .theme-dusk {
341+ background : linear-gradient (var (--rotation ),
342+ rgba (255 , 190 , 111 , 1 ) 0% ,
343+ rgba ( 38 , 36 , 48 , 1 ) 100% );
344+ }
345+ .theme-neon {
346+ background : linear-gradient (var (--rotation ),
347+ rgba (146 , 21 , 245 , 1 ) 0% ,
348+ rgba ( 0 , 0 , 0 , 1 ) 100% );
349+ }
350+ .theme-night {
351+ background : linear-gradient (var (--rotation ),
352+ rgba (128 , 0 , 0 , 1 ) 0% ,
353+ rgba ( 0 , 0 , 0 , 1 ) 100% );
354+ }
355+ .theme-ember {
356+ background : linear-gradient (var (--rotation ),
357+ rgba (240 , 130 , 30 , 1 ) 0% ,
358+ rgba (120 , 40 , 0 , 1 ) 100% );
359+ }
0 commit comments