Last active
February 28, 2020 12:13
-
-
Save Matix-Media/b4864b2630215d54fa1428c1567b093b to your computer and use it in GitHub Desktop.
Improved layout for steam website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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