@@ -211,6 +211,48 @@ input[type="range"] {
211211 }
212212}
213213
214+ input [type = " range" ].cb-range {
215+ --range-progress : 50% ;
216+
217+ & ::-webkit-slider-runnable-track {
218+ background : linear-gradient (90deg , $orange var (--range-progress ), $cb-bg-panel var (--range-progress ));
219+ border : 1px solid $cb-border-color ;
220+ }
221+
222+ & ::-moz-range-track {
223+ background : linear-gradient (90deg , $orange var (--range-progress ), $cb-bg-panel var (--range-progress ));
224+ border : 1px solid $cb-border-color ;
225+ }
226+
227+ & ::-webkit-slider-thumb {
228+ -webkit-appearance : none ;
229+ width : 18px ;
230+ height : 18px ;
231+ margin-top : -6px ;
232+ border-radius : 50% ;
233+ background : $orange ;
234+ border : 2px solid rgba (255 , 255 , 255 , 0.6 );
235+ box-shadow : 0 2px 6px rgba (0 , 0 , 0 , 0.5 );
236+ }
237+
238+ & ::-moz-range-thumb {
239+ width : 18px ;
240+ height : 18px ;
241+ border-radius : 50% ;
242+ background : $orange ;
243+ border : 2px solid rgba (255 , 255 , 255 , 0.6 );
244+ box-shadow : 0 2px 6px rgba (0 , 0 , 0 , 0.5 );
245+ }
246+
247+ & :focus-visible ::-webkit-slider-thumb {
248+ box-shadow : 0 0 0 4px rgba (238 , 55 , 55 , 0.25 );
249+ }
250+
251+ & :focus-visible ::-moz-range-thumb {
252+ box-shadow : 0 0 0 4px rgba (238 , 55 , 55 , 0.25 );
253+ }
254+ }
255+
214256.dark-bg {
215257 background-color : $dark ;
216258}
@@ -2169,13 +2211,14 @@ a:hover {
21692211 border-bottom : 1px solid #3a3a45 ;
21702212}
21712213
2214+ .stat-line :last-child {
2215+ border-bottom : none ;
2216+ }
2217+
21722218.stat-item :last-child {
21732219 border-right : none ;
21742220}
21752221
2176- .stat-line :last-child {
2177- border-bottom : none ;
2178- }
21792222
21802223.stat-value {
21812224 font-size : 20px ;
@@ -2242,6 +2285,50 @@ a:hover {
22422285 background-color : $cb-bg-highlight-panel ;
22432286}
22442287
2288+ .cb-create-game {
2289+ display : flex ;
2290+ flex-direction : column ;
2291+ gap : 16px ;
2292+ }
2293+
2294+ .cb-create-game__section {
2295+ background : $cb-bg-highlight-panel ;
2296+ border : 1px solid $cb-border-color ;
2297+ border-radius : $cb-border-radius ;
2298+ padding : 14px 16px 16px ;
2299+ box-shadow : 0 8px 18px rgba (0 , 0 , 0 , 0.25 );
2300+ }
2301+
2302+ .cb-create-game__section-title {
2303+ display : flex ;
2304+ align-items : center ;
2305+ justify-content : space-between ;
2306+ margin-bottom : 8px ;
2307+
2308+ h5 {
2309+ letter-spacing : 0.02em ;
2310+ }
2311+ }
2312+
2313+ .cb-create-game__section-title--with-value {
2314+ margin-bottom : 12px ;
2315+ }
2316+
2317+ .cb-create-game__time-value {
2318+ color : white ;
2319+ background : rgba (238 , 55 , 55 , 0.16 );
2320+ border : 1px solid rgba (238 , 55 , 55 , 0.45 );
2321+ padding : 2px 10px ;
2322+ border-radius : 999px ;
2323+ font-size : 0.85rem ;
2324+ }
2325+
2326+ .cb-create-game__footer {
2327+ display : flex ;
2328+ justify-content : flex-end ;
2329+ padding-top : 4px ;
2330+ }
2331+
22452332.cb-border-color {
22462333 border-color : $cb-border-color !important ;
22472334}
@@ -2708,6 +2795,7 @@ a.cb-text-light:hover {
27082795 backdrop-filter : blur (16px );
27092796}
27102797
2798+
27112799.arrow ::after ,
27122800.bs-popover-bottom .arrow ::after {
27132801 border-bottom-color : rgba (0 , 0 , 0 );
0 commit comments