44 margin : 0 ;
55 padding : 0 ;
66 font-optical-sizing : auto;
7- font-weight : 500 ;
7+ font-weight : var ( --font-weight-normal ) ;
88 font-style : normal;
99 color : var (--color-main-text );
1010 font-family : inherit;
@@ -23,28 +23,33 @@ html {
2323 --color-main-text : rgb (77 , 95 , 131 );
2424 --color-light-text : rgb (183 , 190 , 206 );
2525 --color-light-grey : rgb (246 , 248 , 253 );
26- --color-dark-grey : rgb (223 , 227 , 235 );
27- --color-border : rgb (211 , 214 , 228 );
26+ --color-dark-grey : rgb (214 , 218 , 226 );
27+ --color-border : rgb (189 , 193 , 206 );
2828 --color-box-shadow : rgb (193 , 194 , 202 );
29- --color-blue : rgb (60 , 92 , 255 );
30- --color-light-blue : # 3cb1ff ;
31- --color-green : # 0bd3a7 ;
29+ --color-blue : # 2f4de4 ;
30+ --color-green : # 11b18f ;
3231 --color-red : # ea5979 ;
3332 --color-yellow : rgb (255 , 244 , 43 );
3433 --color-orange : # ff8a2b ;
3534 --color-magenta : rgb (222 , 89 , 234 );
3635 --color-glass-bg : rgba (255 , 255 , 255 , 0.5 );
3736 --color-hover : rgb (77 , 95 , 131 );
37+
3838 --box-shadow : 1px 1px 5px 1px var (--color-box-shadow );
39+
40+ --font-weight-bold : 700 ;
41+ --font-weight-normal : 400 ;
42+ --font-size-normal : 14px ;
43+ --font-size-small : 12px ;
3944}
4045
4146[data-theme = "dark" ] {
4247 --color-bg : rgb (21 , 27 , 39 );
4348 --color-main-text : rgb (221 , 225 , 235 );
44- --color-dark-grey : rgb (46 , 52 , 66 );
45- --color-light-grey : rgb (46 , 52 , 66 );
49+ --color-dark-grey : rgb (56 , 64 , 82 );
50+ --color-light-grey : rgb (37 , 43 , 54 );
4651 --color-border : rgb (113 , 121 , 153 );
47- --color-box-shadow : rgb (59 , 61 , 70 );
52+ --color-box-shadow : rgb (39 , 40 , 46 );
4853 --color-glass-bg : rgba (80 , 80 , 80 , 0.3 );
4954 --color-hover : rgb (105 , 124 , 165 );
5055}
@@ -70,3 +75,25 @@ section {
7075 padding : 5.5rem 2rem 3.5rem 2rem ;
7176 flex : 1 ;
7277}
78+
79+ select {
80+ font-family : inherit;
81+ font-size : var (--font-size-normal );
82+ color : inherit;
83+ background-color : var (--color-dark-grey );
84+ border : 1px solid transparent;
85+ }
86+
87+ select : focus {
88+ outline : none;
89+ border-color : var (--color-border );
90+ }
91+
92+ select option : checked {
93+ background : var (--color-hover );
94+ color : white;
95+ }
96+
97+ select option : hover {
98+ background : var (--color-hover );
99+ }
0 commit comments