Skip to content

Instantly share code, notes, and snippets.

@Matix-Media
Last active February 28, 2020 12:13
Show Gist options
  • Save Matix-Media/b4864b2630215d54fa1428c1567b093b to your computer and use it in GitHub Desktop.
Save Matix-Media/b4864b2630215d54fa1428c1567b093b to your computer and use it in GitHub Desktop.
Improved layout for steam website
/*
License: MIT
Created by Max H (Matix Media, Inc.)
*/
/*ELEMS*/
.btn_green_white_innerfade,
.btn_green_white_innerfade span,
.btn_darkblue_white_innerfade,
.btn_darkblue_white_innerfade span,
.btn_grey_grey_outer_bevel,
.btn_grey_grey_outer_bevel span,
.apphub_BackToTopButton {
padding-top: 2px;
color: white;
}
.btn_green_white_innerfade,
.btn_green_white_innerfade span,
.item_market_action_button_green,
.item_market_action_button_green span {
background: #199319;
padding-top: 2px;
}
.btn_green_white_innerfade:hover,
.btn_green_white_innerfade:hover span,
.item_market_action_button_green:hover,
.item_market_action_button_green:hover span {
background: #20b520 !important;
}
.btn_darkblue_white_innerfade,
.btn_darkblue_white_innerfade span {
background: #1b5371 !important;
}
.btn_darkblue_white_innerfade:hover,
.btn_darkblue_white_innerfade:hover span {
background: #25678a !important;
}
.btn_grey_grey_outer_bevel,
.btn_grey_grey_outer_bevel span {
background: #202020;
}
.btn_grey_grey_outer_bevel:hover,
.btn_grey_grey_outer_bevel:hover span {
background: #313131 !important;
}
.apphub_sectionTab.active,
.apphub_sectionTab.active span {
background: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.apphub_sectionTab.active:hover,
.apphub_sectionTab.active:hover span {
background: #222;
}
.apphub_sectionTab:hover,
.apphub_sectionTab:hover span {
background: #25678a ;
}
.appHubShortcut_Icon {
border-radius: 2px;
}
.pphub_Card {
border-radius: 10px;
}
.apphub_Card.interactable {
transition: background 0.2s;
}
.apphub_Card.interactable .apphub_CardContentType {
transition: opacity 0.2s;
visibility: visible;
opacity: 0;
background: #25678a40 ;
backdrop-filter: blur(50px);
}
.apphub_Card.interactable .apphub_CardContentAuthorBlock {
transition: background 0.2s;
}
.apphub_Card.interactable:hover .apphub_CardContentAuthorBlock {
background: #193d51 ;
}
.apphub_Card.interactable:hover .apphub_CardContentType {
transition: opacity 0.2s;
visibility: visible;
opacity: 0.9;
}
.apphub_Card.interactable:hover {
border: 1px solid transparent;
background: #0f1622;
}
.apphub_BackToTopButton {
background: #3d516f;
}
#BackToTop > a:hover > .apphub_BackToTopButton {
background: #4a6286 !important;
}
.apphub_BackToTopButton:first-child {
border-top-left-radius: 20px;
}
.apphub_BackToTopButton:last-child {
border-top-right-radius: 20px;
}
.supernav_content,
.popup_block_new,
.popup_menu,
.popup_block {
box-shadow: none !important;
z-index: 1000000;
}
.steam_curators_empty {
border-radius: 10px;
}
.store_capsule_container > div.focus > div > div {
background: #2e3d59;
transition: background 0.2s;
}
.store_capsule_container:hover > div.focus > div > div {
background: #354562;
}
.tab_item.focus,
#tab_preview_container {
background: #99b7c8 !important;
}
#tab_preview_container {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.tab_item {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.home_tab .tab_content {
font-size: 14px;
}
.discussions_forum_row {
transition: background 0.2s;
}
.group_tab.active,
.group_tab.active span,
.discussions_header,
.sectionTab.active,
.sectionTab.active span,
.sectionTabsHR {
background: #66c0f4 !important;
}
.responsive_tab_baseline {
visibility: hidden;
}
.discussions_header {
border-bottom: 5px solid #66c0f4;
}
.discussionSearchTextContainer {
background: #215069;
border-radius: 2px;
}
.discussionSearchText.searchText {
background: #13394d !important;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: -5px;
}
.discussionSearchTextSubmitImg {
margin-left: 5px;
border-radius: 2px;
transition: background 0.2s;
margin-top: -5px;
padding: 5px 0 5px 0;
}
.discussionSearchTextSubmitImg:hover {
background-color: #ffffff17;
}
body {
padding-bottom: 0 !important;
}
.workshopAppsRow {
background: #2f4a60;
border-radius: 5px;
border: none;
padding: 5px 0 5px 0;
}
.appInfo {
margin-left: calc(50% - 25px);
padding: 10px 20px 4px 20px;
background: #3b556a;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.appInfo img {
border-radius: 5px;
padding-top: 0;
}
.app {
background: none;
}
.appNew {
margin-top: 9px;
}
.appCover {
background: none;
}
.appCoverHover {
background-image: none !important;
margin-bottom: -7px;
}
.itemPreviewHolder {
background: none;
border-radius: 5px;
}
.primary_panel_border,
.primary_panel,
.panel {
background: #161f2b !important;
}
.detailBox {
background: #15213182;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
.btn_grey_black {
background: #14212d;
border-radius: 5px;
padding-top: 2px;
}
.playerAvatar,
.playerAvatar img,
.friends_header_avatar,
.friends_header_avatar img {
border-radius: 100%;
}
.thumb > img,
.apphub_CardContentGuideTitle,
.apphub_CardContentGuideImage,
.community_home_app_shortcuts,
.community_home_search_box {
border-radius: 5px;
}
.apphub_CardContentGuideImage {
padding: 0;
margin-right: 10px;
}
.community_home_search_divider {
border: none;
background: #00000054;
height: 2px;
border-radius: 100%;
}
.header_installsteam_btn,
.header_installsteam_btn > a {
border-radius: 3px;
background-color: #616a72;
transition: background-color 0.5s;
color: white;
}
.header_installsteam_btn:hover,
.header_installsteam_btn:hover > a {
border-radius: 3px;
background-color: #546777;
}
.profile_header_bg_texture {
box-shadow: none;
backdrop-filter: blur(50px);
}
.profile_content {
background: #1a1a1a;
padding: 10px;
margin-bottom: 20px;
}
.btn_profile_action,
.btn_profile_action > span {
background: #2F3E53;
}
.btn_profile_action:hover,
.btn_profile_action:hover > span {
background: #3c4d64;
}
.game_info_achievement img,
.game_info_cap img,
.badge_icon,
.commentthread_textarea,
.commentthread_entry_quotebox {
border-radius: 5px;
}
.commentthread_subscribe_checkbox {
padding: 2px;
border-radius: 2px;
}
.footer_content {
padding-bottom: 10px;
}
.player_avatar.friend_block_link_overlay img {
border-radius: 0px;
}
.friend_block_v2 {
transition: background 0.2s;
}
.friend_block_v2:hover {
background: #24313e;
}
.grouppage_logo,
.grouppage_logo img {
background: none;
border-radius: 7px;
}
.grouppage_header_name {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.grouppage_friendsingroup {
border-radius: 5px;
background: #000c;
}
.group_content {
background: #1D2D40;
border-radius: 10px;
background-image: none !important;
padding: 10px;
}
.group_content_rule {
visibility: hidden;
}
.btn_blue_white_innerfade,
.btn_blue_white_innerfade span {
background: #547DAF;
padding-top: 2px;
}
.btn_blue_white_innerfade:hover,
.btn_blue_white_innerfade:hover span {
background: #6d94c4 !important;
}
.rightbox,
.panel {
background: #00000052;
border-radius: 5px;
}
.rightbox .rule,
.panel .rule {
border: none;
background: none
}
.btn_grey_white_innerfade,
.btn_grey_white_innerfade span {
background: #535353;
padding-top: 2px;
}
.btn_grey_white_innerfade:hover,
.btn_grey_white_innerfade:not(.disabled):hover span {
background: #5e5e5e !important;
}
.curation_warning_box {
border-radius: 5px;
background: #686340;
}
.curator_summary_box,
.curator_store_link_ctn {
border-radius: 5px;
background: #ffffff1c;
}
.profile_small_header_bg {
background-image: none;
}
.profile_small_header_texture {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.badge_row,
.badge_row .badge_row_inner,
.badge_row:hover,
.badge_row:hover .badge_row_inner{
border: none !important;
box-shadow: none !important;
background: #0f0f0f69 !important;
transition: background 0.2s;
}
.badge_detail_tasks {
background: none;
}
.badge_title_rule {
visibility: hidden;
}
.badge_row:hover,
.badge_row:hover .badge_row_inner {
background: #12141569 !important;
}
.games_list_tab {
transition: background-color 0.2s;
}
.games_list_tab:hover {
background-color: #313131;
}
.trade_item_box {
background-color: #1a1a1a;
}
#tabcontent_inventory {
margin-bottom: 20px;
}
.store_nav_bg {
background-color: rgba(103, 193, 245, .47) !important;
backdrop-filter: blur(10px);
border-radius: 5px;
}
.popup_block_new,
.popup_body {
background: white !important;
}
.searchbox {
background-color: rgba(70, 134, 170, .35);
}
.arrow {
background: #15202d !important;
transition: background 0.2s;
}
.arrow:hover {
background: #1a2533 !important;
}
.arrow.left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.arrow.right {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.home_page_content img {
border-radius: 5px !important;
}
.home_ctn.tab_container {
padding-bottom: 20px;
}
.home_tab.active .tab_content,
.home_ctn.tab_container {
background: #2a4862;
}
.tab_item:not(.focus) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.tab_see_more {
border-radius: 5px;
margin-top: 15px;
}
.broadcast_live_stream_icon {
border-radius: 4px;
}
.broadcast_capsule {
border-radius: 6px;
transition: background 0.2s;
}
#live_streams_carousel .broadcast_capsule:hover {
background: rgba(255, 255, 255, .35) !important;
}
.broadcast_capsule .capsule img {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.home_marketing_message {
border-radius: 3px;
transition: background 0.2s;
}
.home_marketing_message span {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.home_marketing_message:hover div {
background-color: #3c6c8c;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/*STUFF*/
.community_home_search_apps,
.community_home_search_players,
.btn_darkblue_white_innerfade,
.btn_darkblue_white_innerfade span,
.btn_green_white_innerfade,
.btn_green_white_innerfade span,
.btn_grey_grey_outer_bevel,
.btn_grey_grey_outer_bevel span,
.apphub_sectionTab.active,
.apphub_sectionTab.active span,
.apphub_sectionTab,
.apphub_sectionTab span,
.carousel_container,
.carousel_items,
#store_nav_area .store_nav_bg, .home_page_body_ctn.has_takeover #store_nav_area .store_nav_bg,
.searchbox,
.home_area_spotlight,
.carousel_container.spotlight .carousel_items > * .store_capsule,
.big_button,
.store_capsule,
.home_tab .tab_content,
.group_tab
.group_tab span,
.discussionSearchTextContainer,
.browseApps,
.primary_panel_border,
.profile_header_badge,
.btn_profile_action,
.btn_profile_action > span,
.game_info_stats,
.achievement_progress_bar_ctn,
.game_info_achievement,
.commentthread_subscribe_checkbox,
.commentthread_entry_quotebox,
.profile_group_avatar,
.friends_search_text_box,
.friend_block_v2,
.grouppage_logo img,
.grouppage_logo,
.group_content,
.btn_blue_white_innerfade,
.btn_blue_white_innerfade span,
.gray_bevel,
.rightbox,
.btn_grey_white_innerfade,
.btn_grey_white_innerfade span,
.curation_warning_box,
.curation_tagline_edit textarea,
.curation_tagline_edit input,
.profile_small_header_texture,
.profile_small_header_bg,
.profile_xp_block,
.profile_xp_block_remaining_bar_progress,
.games_list_tabs,
.games_list_tab.active,
.trade_item_box,
.trade_item_box .item,
.inventory_iteminfo,
#tabcontent_inventory {
border: none !important;
box-shadow: none!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment