Skip to content

Commit bd7d519

Browse files
SpaceEnergySpaceEnergy
committed
update: store gamepage experimental
1 parent 71d1d3c commit bd7d519

1 file changed

Lines changed: 235 additions & 20 deletions

File tree

‎options/store/gamepage/storeGamepage.css‎

Lines changed: 235 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@
7777

7878
body.v6.game_bg.application .page_content_ctn,
7979
body.v6.game_bg.application .page_content {
80-
width: 1248px;
80+
width: 100%x;
81+
max-width: 1200px;
8182
margin: 0 auto;
8283
}
8384

@@ -90,6 +91,10 @@ body.v6.game_bg.application .page_content {
9091
/*
9192
! Title Area
9293
*/
94+
.game_bg.application .page_title_area .apphub_HomeHeaderContent {
95+
max-width: unset !important;
96+
}
97+
9398
.game_bg.application .page_title_area .apphub_HeaderStandardTop {
9499
min-height: unset;
95100
margin: 0 0 16px;
@@ -257,13 +262,6 @@ body.v6.game_bg.application .page_content {
257262

258263

259264

260-
/* Clear *what ever* */
261-
.queue_actions_ctn div[style*="clear"] {
262-
display: none;
263-
}
264-
265-
266-
267265
/*
268266
& Broadcast
269267
*/
@@ -301,7 +299,7 @@ body.v6.game_bg.application .page_content {
301299

302300
div.leftcol:has(.highlight_ctn) {
303301
grid-area: media;
304-
width: 100%;
302+
width: 100% !important;
305303
}
306304

307305
#game_highlights .highlight_ctn {
@@ -316,12 +314,6 @@ div.leftcol:has(.highlight_ctn) {
316314
}
317315

318316

319-
/* Clear *what ever* */
320-
#game_highlights div[style*="clear"] {
321-
display: none;
322-
}
323-
324-
325317
/*
326318
! Player Area
327319
*/
@@ -620,6 +612,11 @@ div.leftcol:has(.highlight_ctn) {
620612
}
621613

622614

615+
.game_bg.application #game_highlights .rightcol .glance_ctn .game_header_ctn {
616+
gap: unset;
617+
}
618+
619+
623620
/*
624621
! Banner
625622
*/
@@ -660,13 +657,76 @@ div.leftcol:has(.highlight_ctn) {
660657
/*
661658
! Infos
662659
*/
660+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .subtitle {
661+
min-width: fit-content;
662+
padding-right: 6px;
663+
font-size: 13px;
664+
text-transform: unset;
665+
color: #97A0A8;
666+
}
667+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .summary.column,
668+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .date {
669+
color: #c6d4df;
670+
}
663671

664672

665-
/* Devs & Publisher */
666-
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .dev_row .summary {
667-
white-space: normal;
673+
/** Reviews */
674+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews {
675+
display: flex;
676+
flex-direction: column-reverse;
677+
gap: 4px;
678+
}
679+
680+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews .summary.column {
681+
overflow: visible;
682+
position: relative;
683+
display: flex;
684+
flex-direction: row-reverse;
685+
justify-content: space-between;
686+
width: 100%;
687+
}
688+
689+
/*^ Anomaly */
690+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews .summary.column .review_anomaly_icon {
691+
position: absolute;
692+
left: -7px;
693+
top: -4px;
694+
}
695+
696+
/*^ Negative */
697+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews .game_review_summary {
698+
color: rgb(var(--red));
668699
}
669700

701+
/*^ Mixed */
702+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews .game_review_summary.mixed {
703+
color: rgb(var(--yellow));
704+
}
705+
706+
/*^ Positive */
707+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .user_reviews .game_review_summary.positive {
708+
color: rgb(var(--green));
709+
}
710+
711+
712+
/** Release Date */
713+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .release_date {
714+
padding: 12px 0;
715+
}
716+
717+
718+
/** Devs & Publisher */
719+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .dev_row:has(#developers_list) {
720+
padding-bottom: 4px;
721+
}
722+
723+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .dev_row .summary a {
724+
white-space: normal;
725+
color: rgb(var(--blue));
726+
}
727+
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left .dev_row .summary a:hover {
728+
color: rgb(var(--blue-hover));
729+
}
670730

671731

672732
/*
@@ -685,12 +745,12 @@ div.leftcol:has(.highlight_ctn) {
685745
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_right .responsive_block_header {
686746
display: flex;
687747
line-height: 19px;
688-
color: #556772;
748+
color: #97A0A8;
689749
}
690750
.game_bg.application #game_highlights .rightcol .glance_ctn_responsive_right .responsive_block_header::after {
691751
content: ":";
692752
line-height: 19px;
693-
color: #556772;
753+
color: #97A0A8;
694754
}
695755

696756
/* Lable */
@@ -723,6 +783,161 @@ div.leftcol:has(.highlight_ctn) {
723783
}
724784

725785

786+
787+
/*
788+
& Content
789+
*/
790+
/*
791+
! Purchase
792+
*/
793+
794+
795+
796+
/*
797+
& Sidebar
798+
*/
799+
.game_bg.application .middle_page .game_meta_data {
800+
display: flex;
801+
flex-direction: column;
802+
gap: 12px;
803+
width: 372px;
804+
margin: 0;
805+
}
806+
807+
808+
/*
809+
! Containers
810+
*/
811+
.game_bg.application .middle_page .game_meta_data .responsive_apppage_details_right, .game_bg.application .middle_page .game_meta_data .responsive_apppage_details_left {
812+
margin: 0;
813+
padding: 12px;
814+
border-radius: 8px;
815+
background: unset;
816+
background-color: rgb(var(--color-2));
817+
}
818+
819+
820+
/*
821+
! Age Rating
822+
*/
823+
.game_bg.application .middle_page .game_meta_data .shared_game_rating {
824+
position: relative;
825+
display: flex;
826+
}
827+
828+
829+
/** Age Image */
830+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_details {
831+
margin: 0;
832+
}
833+
834+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_details .game_rating_icon {
835+
margin-right: 12px;
836+
}
837+
838+
.game_bg.application .middle_page .game_meta_data .shared_game_rating img,
839+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_allages {
840+
display: none;
841+
}
842+
843+
844+
/** Custom Age Icon */
845+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img, .game_rating_allages)::before {
846+
aspect-ratio: 1 / 1;
847+
display: flex;
848+
justify-content: center;
849+
align-items: center;
850+
width: 64px;
851+
height: 64px;
852+
font-size: 34px;
853+
font-weight: 900;
854+
border-radius: 8px;
855+
}
856+
857+
/*^ 18+ */
858+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img[alt="18+"])::before {
859+
content: "18";
860+
border: 3px solid rgb(var(--red));
861+
color: rgb(var(--red));
862+
background-color: rgb(var(--red), .2);
863+
}
864+
865+
/*^ 16+ */
866+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img[alt="16+"])::before {
867+
content: "16";
868+
border: 3px solid rgb(var(--blue));
869+
color: rgb(var(--blue));
870+
background-color: rgb(var(--blue), .2);
871+
}
872+
873+
/*^ 14+ */
874+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img[alt="14+"])::before {
875+
content: "14";
876+
border: 3px solid rgb(var(--blue));
877+
color: rgb(var(--blue));
878+
background-color: rgb(var(--blue), .2);
879+
}
880+
881+
/*^ 12+ */
882+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img[alt="12+"])::before {
883+
content: "12";
884+
border: 3px solid rgb(var(--green));
885+
color: rgb(var(--green));
886+
background-color: rgb(var(--green), .2);
887+
}
888+
889+
/*^ 6+ */
890+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(img[alt="6+"])::before {
891+
content: "6";
892+
border: 3px solid rgb(var(--yellow));
893+
color: rgb(var(--yellow));
894+
background-color: rgb(var(--yellow), .2);
895+
}
896+
897+
/*^ 0+ */
898+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_icon:has(.game_rating_allages)::before {
899+
content: "0";
900+
border: 3px solid rgb(255, 255, 255);
901+
color: rgb(255, 255, 255);
902+
background-color: rgb(255, 255, 255, .2);
903+
}
904+
905+
906+
/** Text */
907+
/*^ Agency */
908+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_agency {
909+
position: absolute;
910+
left: calc(70px + 12px);
911+
margin: 0;
912+
font-size: 13px;
913+
font-weight: 600;
914+
}
915+
916+
/*^ Desciption */
917+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_rating_descriptors,
918+
.game_bg.application .middle_page .game_meta_data .shared_game_rating .game_content_categories {
919+
margin-top: 20px;
920+
}
921+
922+
923+
/*
924+
! Relevant
925+
*/
926+
/** Header text */
927+
.game_bg.application .middle_page .game_meta_data .responsive_apppage_details_right.heading {
928+
display: none;
929+
}
930+
931+
932+
/** Icon fix */
933+
.game_bg.application .middle_page .game_meta_data .responsive_apppage_details_right.recommendation_reasons .reason::before {
934+
position: unset;
935+
margin: 0;
936+
margin-right: 6px;
937+
}
938+
939+
940+
726941
/*
727942
& Details on Top
728943

0 commit comments

Comments
 (0)