Skip to content

Commit b355cbc

Browse files
SpaceEnergySpaceEnergy
committed
skin: steam beta store navbar (wip)
1 parent 6ad1364 commit b355cbc

1 file changed

Lines changed: 372 additions & 1 deletion

File tree

‎src/css/webkit.css‎

Lines changed: 372 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,13 @@ body.v6::-webkit-scrollbar {
4242

4343
/*
4444
& Navbar/Header
45+
!
46+
! REMOVE
47+
! When the new Navbar is in the Steam Stable Branch.
48+
!
4549
*/
4650
#store_header .content {
51+
box-sizing: border-box;
4752
position: fixed !important;
4853
top: 0;
4954
left: 50%;
@@ -54,7 +59,7 @@ body.v6::-webkit-scrollbar {
5459
align-items: center;
5560
justify-content: space-between;
5661
width: 100% !important;
57-
max-width: 1000px;
62+
max-width: 1200px;
5863
height: auto !important;
5964
margin: 12px 0 0 !important;
6065
padding: 6px 16px;
@@ -397,6 +402,372 @@ body.v6::-webkit-scrollbar {
397402

398403

399404

405+
/*
406+
& Navbar/Header
407+
*/
408+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y {
409+
box-sizing: border-box;
410+
position: fixed !important;
411+
top: 0;
412+
left: 50%;
413+
transform: translate(-50%);
414+
width: 100%;
415+
max-width: 1300px;
416+
height: unset !important;
417+
margin: 16px 0 0;
418+
padding: 6px 16px;
419+
border: 0 !important;
420+
border-radius: 8px;
421+
background: none;
422+
background-color: rgb(var(--color-2));
423+
box-shadow: 0px 4px 8px 0px rgba(var(--background), 0.5);
424+
}
425+
426+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._7FiqKP7fZJGltkwRxPG6s {
427+
width: 100%;
428+
height: auto;
429+
}
430+
431+
432+
/*
433+
! Backdrop
434+
*/
435+
.h2B3SGR_w4RWdrnsRZEcD ._19o1GB7ysfrWKLYpqZ6aXu._2IyR9WyPwYb15ILBjPvLR9 {
436+
opacity: 0 !important;
437+
}
438+
439+
440+
/*
441+
! Buttons
442+
*/
443+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._3CtcPWgZYR05CldoJ0Jkrx {
444+
gap: 6px;
445+
}
446+
447+
448+
/** Button */
449+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._3CtcPWgZYR05CldoJ0Jkrx ._175B12uOwmeGBNcSaQFe-Z {
450+
padding: 0;
451+
}
452+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._3CtcPWgZYR05CldoJ0Jkrx ._175B12uOwmeGBNcSaQFe-Z._2IyR9WyPwYb15ILBjPvLR9 {
453+
color: rgb(var(--accent-1));
454+
text-shadow: none
455+
}
456+
457+
/* Under text Divider */
458+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._3CtcPWgZYR05CldoJ0Jkrx ._175B12uOwmeGBNcSaQFe-Z ._3gaaE-cRfFWJdZcC8XMi0x {
459+
background-color: rgb(var(--accent-1));
460+
}
461+
462+
463+
464+
/*
465+
! Searchbar
466+
*/
467+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y .WFyPwmwIjPaI784fImRbi {
468+
justify-content: flex-end;
469+
}
470+
471+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR {
472+
flex: 0;
473+
width: 230px;
474+
min-width: unset;
475+
height: -webkit-fill-available;
476+
border-radius: 8px;
477+
background-color: rgb(var(--color-1));
478+
transition: 0.4s all ease-in-out;
479+
}
480+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR:hover,
481+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y:has(.SWL3uBHWmdcYwUXE9yD0y:not([style*="height: 0px;"])) ._1KU9eASfov1GnFQRbyLIdR {
482+
flex: 1;
483+
}
484+
485+
486+
/** Input */
487+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR ._2tlUAG6WNyYFlk9caIiLj5 {
488+
padding: 0 12px;
489+
border: none;
490+
border-radius: 8px;
491+
background-color: transparent;
492+
box-shadow: none;
493+
}
494+
495+
496+
/** Button */
497+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR ._1Yo-ZsBr-KbVMyAMXEYszd {
498+
border-radius: 8px;
499+
background-color: transparent;
500+
}
501+
502+
/*^ Icon */
503+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR ._1Yo-ZsBr-KbVMyAMXEYszd svg {
504+
display: none;
505+
}
506+
507+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._1KU9eASfov1GnFQRbyLIdR ._1Yo-ZsBr-KbVMyAMXEYszd::before {
508+
content: "\f69a" !important;
509+
margin-right: 6px;
510+
font-size: 18px;
511+
color: #dcdedf;
512+
font-family: FluentSystemIcons-Filled !important;
513+
font-style: normal;
514+
font-weight: normal !important;
515+
font-variant: normal;
516+
text-transform: none;
517+
line-height: 18px;
518+
-webkit-font-smoothing: antialiased;
519+
}
520+
521+
522+
523+
/*
524+
! Search results
525+
*/
526+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 {
527+
gap: 12px;
528+
margin-top: 12px;
529+
padding: 12px;
530+
border: 3px solid rgb(var(--color-5));
531+
border-radius: 8px;
532+
background: unset;
533+
background-color: rgb(var(--color-2));
534+
}
535+
536+
/* Result lable/title */
537+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2V9568XIc6vv9aEQ3EIVlG {
538+
display: none;
539+
}
540+
541+
542+
/** Games */
543+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._3Z1skIYVoqLbYiP2wy46Ce {
544+
gap: 12px;
545+
background: unset;
546+
}
547+
548+
/*^ Image */
549+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2qsM52VkK9BR1Vi0HBOrtY {
550+
background: unset;
551+
}
552+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2qsM52VkK9BR1Vi0HBOrtY img {
553+
border-radius: 8px;
554+
}
555+
556+
/*^ Name */
557+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._1D5FETA8rX0cTIhaC9W2wD ._2c8KHMFOeIi4TVcVN6qeIi {
558+
font-size: 15px;
559+
font-weight: 600;
560+
}
561+
562+
/*^ Price */
563+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._1D5FETA8rX0cTIhaC9W2wD .KG1rpRyNTy_2__H8GV8__ {
564+
font-size: 13px;
565+
font-weight: 500;
566+
}
567+
568+
/* Price Discount */
569+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._1D5FETA8rX0cTIhaC9W2wD .KG1rpRyNTy_2__H8GV8__ ._2lQxRlo1DQ1PN08TYTil2L {
570+
border-radius: 4px;
571+
}
572+
573+
574+
/** Recently viewed */
575+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._3DOcONbchITbAuaF30dduG::before {
576+
content: "";
577+
display: flex;
578+
width: 100%;
579+
height: 3px;
580+
margin: 0 0 12px;
581+
border-radius: 8px;
582+
background-color: rgb(var(--color-5));
583+
}
584+
585+
/* Lable/Title */
586+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._3DOcONbchITbAuaF30dduG>._2V9568XIc6vv9aEQ3EIVlG {
587+
display: block;
588+
margin-bottom: 6px;
589+
line-height: 13px;
590+
}
591+
592+
593+
/** Genres/Creators */
594+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET::before {
595+
content: "";
596+
display: flex;
597+
width: 100%;
598+
height: 3px;
599+
margin: 0 0 12px;
600+
border-radius: 8px;
601+
background-color: rgb(var(--color-5));
602+
}
603+
604+
/*^ Card */
605+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy {
606+
box-sizing: border-box;
607+
height: 52px;
608+
padding: 6px 16px;
609+
border-radius: 8px;
610+
background: unset;
611+
}
612+
613+
/* Banner */
614+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy img {
615+
filter: blur(2px) brightness(0.5);
616+
transition: all 0.2s ease-in-out;
617+
}
618+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy:hover img {
619+
filter: blur(2px) brightness(0.7);
620+
transform: scale(1.05);
621+
}
622+
623+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy ._2w-jD5qv9RsHiUz19AVLGO {
624+
display: none;
625+
}
626+
627+
/* Lable */
628+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy .NOctYARrXun3C2m8ZOA3u {
629+
padding: 0;
630+
font-weight: 800;
631+
color: #fff;
632+
background: unset;
633+
transform: none !important;
634+
}
635+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2saiNsl5yBtsoFzf_fhdET ._2tdhUFMMsjGr_BI7uMcoWy:hover .NOctYARrXun3C2m8ZOA3u {
636+
transform: scale(1.1) !important;
637+
}
638+
639+
640+
/** Advanced Search */
641+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2Cp17yynz2h_StEQZcNnqB::before {
642+
content: "";
643+
display: flex;
644+
width: 100%;
645+
height: 3px;
646+
margin: 0 0 12px;
647+
border-radius: 8px;
648+
background-color: rgb(var(--color-5));
649+
}
650+
651+
/*^ Button */
652+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2Cp17yynz2h_StEQZcNnqB {
653+
padding: 0;
654+
background: unset;
655+
}
656+
657+
/* Text */
658+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2Cp17yynz2h_StEQZcNnqB .NOctYARrXun3C2m8ZOA3u {
659+
box-sizing: border-box;
660+
display: block;
661+
width: 100%;
662+
padding: 12px;
663+
border-radius: 8px;
664+
background-color: rgb(var(--color-4));
665+
}
666+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._2GxMhpm7OC2WWXN_wjgA78 ._2Cp17yynz2h_StEQZcNnqB .NOctYARrXun3C2m8ZOA3u:hover {
667+
font-weight: 600;
668+
background-color: rgb(var(--color-3));
669+
}
670+
671+
672+
673+
/*
674+
! Wishlist button
675+
*/
676+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z._1tJxbjNzcWSdG2hBsklCTN {
677+
gap: 0;
678+
padding: 6px 12px;
679+
font-size: 0;
680+
border-radius: 8px;
681+
background-color: rgb(var(--blue), .2);
682+
text-shadow: none;
683+
}
684+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z._1tJxbjNzcWSdG2hBsklCTN:hover {
685+
background-color: rgb(var(--blue), .4);
686+
}
687+
688+
689+
/** Icon */
690+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z._1tJxbjNzcWSdG2hBsklCTN::before {
691+
content: "\f1f6" !important;
692+
margin-right: 6px;
693+
font-size: 20px;
694+
color: rgb(var(--blue));
695+
font-family: FluentSystemIcons-Filled !important;
696+
font-style: normal;
697+
font-weight: normal !important;
698+
font-variant: normal;
699+
text-transform: none;
700+
line-height: 18px;
701+
-webkit-font-smoothing: antialiased;
702+
}
703+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z._1tJxbjNzcWSdG2hBsklCTN svg {
704+
display: none;
705+
}
706+
707+
708+
/** Amount */
709+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z._1tJxbjNzcWSdG2hBsklCTN .BReXgOZvJY6u4htWQn1aF {
710+
margin: 0;
711+
font-size: 13px;
712+
font-weight: 600;
713+
color: rgb(var(--blue));
714+
}
715+
716+
717+
718+
/*
719+
! Cart button
720+
*/
721+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z.qqQDu9j0LIoK-w06-JxB5 {
722+
gap: 0;
723+
margin: 0 0 0 6px;
724+
padding: 6px 12px;
725+
font-size: 0;
726+
border-radius: 8px;
727+
background-color: rgb(var(--green), .2);
728+
text-shadow: none;
729+
box-shadow: none;
730+
}
731+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z.qqQDu9j0LIoK-w06-JxB5:hover {
732+
background-color: rgb(var(--green), .4);
733+
}
734+
735+
736+
/** Icon */
737+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z.qqQDu9j0LIoK-w06-JxB5::before {
738+
content: "\f26b" !important;
739+
margin-right: 6px;
740+
font-size: 20px;
741+
color: rgb(var(--green));
742+
font-family: FluentSystemIcons-Filled !important;
743+
font-style: normal;
744+
font-weight: normal !important;
745+
font-variant: normal;
746+
text-transform: none;
747+
line-height: 18px;
748+
-webkit-font-smoothing: antialiased;
749+
}
750+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z.qqQDu9j0LIoK-w06-JxB5 svg {
751+
display: none;
752+
}
753+
754+
755+
/** Amount */
756+
.h2B3SGR_w4RWdrnsRZEcD ._16jZ3HEbtaJTl80pQINN2Y ._175B12uOwmeGBNcSaQFe-Z.qqQDu9j0LIoK-w06-JxB5 .BReXgOZvJY6u4htWQn1aF {
757+
margin: 0;
758+
font-size: 13px;
759+
font-weight: 600;
760+
color: rgb(var(--green));
761+
}
762+
763+
764+
765+
/*
766+
! Content
767+
*/
768+
769+
770+
400771
/*
401772
& Footer
402773
*/

0 commit comments

Comments
 (0)