/* ==UserStyle==
@name Roblox 2012 header
@namespace legosavant
@version 2.0
@description Its just the header
@author legosavant
@preprocessor stylus
@license GPLv3
==/UserStyle== */
@-moz-document url-prefix("https://www.roblox.com") {
.gotham-font, .gotham-font .h1, .gotham-font .h2, .gotham-font .h3, .gotham-font .h4, .gotham-font .h5, .gotham-font .h6, .gotham-font h1, .gotham-font h2, .gotham-font h3, .gotham-font h4, .gotham-font h5, .gotham-font h6, .gotham-font .text, .gotham-font body, .gotham-font button, .gotham-font html, .gotham-font input, .gotham-font pre, .gotham-font select, .gotham-font textarea {
font-family:Arial
}
body {
background:#fff;
font-size:12px;
color:black
}
.container-main {
margin-top:60px;
margin-left:0!important
}
.content {
background:transparent
}
.dark-theme .content {
background:transparent
}
.light-theme .rbx-header, .dark-theme .rbx-header {
border:0
}
/*nav*/
.container-fluid {
max-width:970px
}
#rbx-body .icon-logo {
background:url(http://www.roblox.com/images/RevisedHeader/btn-rbx_logo.png);
}
#rbx-body.dark-theme .icon-logo {
background:url(https://www.roblox.com/images/RevisedHeader/btn-obc_logo.png);
}
#rbx-body .icon-logo:hover {
background-position-y:-35px
}
.btr-no-hamburger #header .rbx-navbar-header {
width:118px;
padding:0;
}
#rbx-body .rbx-header {
background:#114081 url(https://www.roblox.com/images/RevisedHeader/bg-rbx_header.png) repeat-x;
height:36px
}
#rbx-body.dark-theme .rbx-header {
background:#333 url(http://www.roblox.com/images/RevisedHeader/bg-obc_header.png) repeat-x
}
.nav > li > a:focus, .nav > li > a:hover, #navbar-stream .nav-robux-icon:hover, #navbar-settings:hover, #rbx-body .btn-navigation-nav-robux-md:hover, #rbx-body .btn-navigation-nav-settings-md:hover {
background:url(http://www.roblox.com/images/RevisedHeader/bg-main_menu_hover.png) 0 0!important;
border-radius:0
}
#rbx-body .font-header-2.nav-menu-title.text-header {
font-size:0;
font-family:Arial,Helvetica,sans-serif;
line-height:20px;
color:#fff;
font-weight:700
}
.btn-navigation-nav-notification-stream-md, a.btn-navigation-nav-notification-stream-md, button.btn-navigation-nav-notification-stream-md, .btn-navigation-nav-notification-stream-md:focus, .btn-navigation-nav-notification-stream-md:hover, a.btn-navigation-nav-notification-stream-md:focus, a.btn-navigation-nav-notification-stream-md:hover, button.btn-navigation-nav-notification-stream-md:focus, button.btn-navigation-nav-notification-stream-md:hover, .btn-navigation-nav-robux-md, a.btn-navigation-nav-robux-md, button.btn-navigation-nav-robux-md, .btn-navigation-nav-robux-md:focus, .btn-navigation-nav-robux-md:hover, a.btn-navigation-nav-robux-md:focus, a.btn-navigation-nav-robux-md:hover, button.btn-navigation-nav-robux-md:focus, button.btn-navigation-nav-robux-md:hover, .btn-navigation-nav-settings-md, a.btn-navigation-nav-settings-md, button.btn-navigation-nav-settings-md, .btn-navigation-nav-settings-md:focus, .btn-navigation-nav-settings-md:hover, a.btn-navigation-nav-settings-md:focus, a.btn-navigation-nav-settings-md:hover, button.btn-navigation-nav-settings-md:focus, button.btn-navigation-nav-settings-md:hover {
background:none;
padding:0;
border:0
}
.text-header[href="/home"]:before {
content:"Home";
font-size:13px;
}
.text-header[href="/discover"]:before {
content:"Games";
font-size:13px;
}
.text-header[href="/catalog"]:before {
content:"Catalog";
font-size:13px;
}
.text-header[href="/develop"]:before {
content:"Build";
font-size:13px;
}
.text-header[href="/robux?ctx-nav"]:before {
content:"Robux";
font-size:13px;
}
.rbx-header .rbx-navbar li .nav-menu-title {
padding:6px 8px 0 8px;
height:28px;
box-sizing:content-box;
width:auto
}
.rbx-header .rbx-navbar li {
all:unset
}
.rbx-header .rbx-navbar, .rbx-header .navbar-brand {
margin:0;
padding:0;
height:auto
}
.rbx-header .navbar-search .input-addon-btn, .rbx-header .navbar-search .input-field, .rbx-header .navbar-search {
border-radius:0!important;
box-shadow:none;
height:22px;
color:#888;
font-size:13px;
}
#rbx-body .rbx-header .navbar-search .input-field {
padding-left:5px
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-thumbnail .background-icon {
display:none
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-thumbnail .thumbnail-icon, .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-thumbnail {
border-radius:0;
height:22px;
width:22px
}
.rbx-header .navbar-search .input-addon-btn .icon-common-search-sm {
margin-right:20px;
}
.rbx-header .navbar-search .clear-search {
display:none!important
}
.dark-theme .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-suffix {
color:#222
}
.dark-theme .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-text {
color:#000
}
.rbx-header .navbar-search .input-field, .rbx-header .navbar-search {
width:max-content;
font-family:arial
}
.rbx-header .rbx-navbar-icon-group li .rbx-menu-item, .rbx-header .rbx-navbar-right-nav li .rbx-menu-item {
padding-top:4px;
padding-bottom:0;
}
.btn-navigation-nav-robux-md #nav-robux-icon {
padding-left:7px;
padding-right:7px;
padding-bottom:6px;
padding-top:7px
}
.btn-navigation-nav-settings-md, a.btn-navigation-nav-settings-md, button.btn-navigation-nav-settings-md {
border-radius:0
}
.col-lg-4 {
width:auto
}
.rbx-header .navbar-search .input-addon-btn .icon-common-search-sm, .rbx-header .navbar-search .input-field .icon-common-search-sm {
background:url(https://www.roblox.com/images/searchIcon.png) no-repeat;
background-size:initial;
background-position:4px 2px
}
.rbx-header .rbx-navbar-icon-group .age-bracket-label .dynamic-overflow-container {
color:#fff;
text-decoration:none!important
}
.rbx-header .rbx-navbar-icon-group .age-bracket-label .age-bracket-label-username {
font-size:11px
}
.rbx-header .rbx-navbar-icon-group .age-bracket-label .dynamic-overflow-container .avatar-headshot-xs {
display:none
}
.age-bracket-label-age {
background:#333;
border-radius:4px;
color:#fff!important;
line-height:1;
padding:2px
}
#rbx-body .icon-nav-message-btr, #rbx-body .icon-nav-friend-btr {
filter:none
}
#btr-navbar-messages > a, #btr-navbar-friends > a {
padding:7px;
border-radius:0
}
.rbx-header .rbx-navbar-icon-group > li, .rbx-header .rbx-navbar-right-nav > li {
padding:0
}
.btn-navigation-nav-notification-stream-md .nav-robux-icon {
padding:0 6px
}
#navbar-settings.navbar-icon-item button{
padding:1px 6px;
height:32px
}
.icon-nav-friend-btr, .icon-nav-message-btr, #nav-robux-icon .icon-robux-28x28,#rbx-body .icon-nav-settings {
background:no-repeat url(https://www.roblox.com/images/RevisedHeader/bg-icon_sprites.png)0 0;
width:20px;
height:20px;
}
a:hover .icon-nav-message-btr {
background-position:0 -20px
}
.icon-nav-friend-btr {
background-position:0 -40px
}
a:hover .icon-nav-friend-btr {
background-position:0 -60px
}
#nav-robux-icon .icon-robux-28x28 {
background-position:0 -80px
}
#nav-robux-icon:hover .icon-robux-28x28 {
background-position:0 -100px
}
#rbx-body .icon-nav-settings {
background-position:0 -160px
}
#rbx-body .icon-nav-settings:hover {
background-position:0 -160px
}
.rbx-header .rbx-navbar-icon-group li span[class^="rbx-text"] {
color: white!important;
font-weight: normal;
font-size: 11px;
min-width:0;
margin-left:3px;
line-height:1.3em;
padding-bottom:0px;
}
#header .btr-nav-notif {
border-radius:3px;
border:1px solid #000;
height: 9px;
margin-top: 10px;
color: black;
font: bold 10px Arial,Helvetica,sans-serif;
padding-left:2px;
padding-right:2px
}
.notification-red, .rbx-header .rbx-navbar-icon-group li .nav-setting-highlight {
border-radius:3px;
border:1px solid #000;
height: 11px;
margin-top: 6px;
color: black;
font: bold 10px Arial,Helvetica,sans-serif;
padding-left:2px;
padding-right:2px;
background:#fff;
min-width:14px;
top:0!important;
line-height:.6!important
}
#rbx-body .icon-nav-notification-stream {
background: no-repeat url(//s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) -36px -246px;
opacity:.4;
width:20px;
height:28px;
filter:invert(1);
}
#rbx-body #navbar-stream:hover .icon-nav-notification-stream {
opacity:.8;
}
#nav-ns-icon {
padding:0;
cursor:pointer
}
#rbx-body .input-group .input-group-btn {
display:table-cell;
position:relative;
}
#rbx-body .input-group .input-group-btn .input-addon-btn {
right:0;
left:-33px
}
/*sidebar*/
.dynamic-overflow-container div {
display:none
}
.rbx-left-col li .text-nav .font-header-2 {
margin:0
}
.rbx-left-col li {
margin:0;
display:inline-block
}
.rbx-left-col li:hover, #navbar-robux:hover #nav-robux-icon {
background:repeat-x url(https://www.roblox.com/images/RevisedHeader/bg-sub_menu_hover.png) 0 -1px;
}
.dark-theme .rbx-header .rbx-navbar li:hover {
border-bottom:none
}
.rbx-left-col ul {
padding:0 5px;
height:24px
}
.rbx-left-col li .text-nav .font-header-2, .rbx-nav-sponsor {
font:normal 12px arial;
color:#fff;
padding:4px 5px 5px 5px
}
.light-theme .rbx-left-col li .text-nav:active, .light-theme .rbx-left-col li .text-nav:link, .light-theme .rbx-left-col li .text-nav:visited {
color:#fff
}
.left-col-list > .font-bold.small.text-nav {
display:none
}
.btr-no-hamburger .rbx-left-col {
width:100%;
background:#191919;
height:24px;
margin-top:-4px
}
.rbx-nav-sponsor {
padding-top:0;
position:relative;
width:60px;
height:19px
}
.rbx-nav-sponsor a:before {
content:"Sponsor";
position:absolute;
margin-top:3px
}
.rbx-nav-sponsor img {
display:none
}
.btr-no-hamburger .rbx-left-col .rbx-scrollbar, .rbx-left-col .rbx-scrollbar .left-col-list {
width:960px;
margin:0 auto
}
#navigation > ul {
display:none
}
.rbx-left-col li .text-nav {
margin:0 2px
}
/*header popover*/
.popover-content .dropdown-menu {
border:1px solid #777;
background:#EFEFEF;
border-radius:0;
box-shadow:none;
border-top:0
}
.rbx-header .rbx-navbar-right .popover-content {
position:relative;
right:0
}
#buy-robux-popover {
box-shadow:none;
margin-top:-1px;
margin-left:0px;
}
#settings-popover {
margin-top:-2px;
margin-left:-93px
}
#navbar-settings.navbar-icon-item [aria-describedby="settings-popover"] {
background: #efefef!important;
border: 1px solid #777;
border-bottom:0;
border-radius:0;
padding:0 5px 1px 5px
}
#navbar-settings.navbar-icon-item [aria-describedby="settings-popover"] .icon-nav-settings {
background-position-y:-180px
}
#navbar-robux [aria-describedby="buy-robux-popover"] #nav-robux-icon{
background:#efefef;
border-radius:0;
border:1px solid #777;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 5px;
padding-top: 6px;
}
#navbar-robux [aria-describedby="buy-robux-popover"] #nav-robux-icon .icon-robux-28x28 {
filter:invert(1);
}
#navbar-robux [aria-describedby="buy-robux-popover"] span[class^="rbx-text"] {
color:#666!important
}
#navbar-robux[aria-describedby="buy-robux-popover"]:hover span[class^="rbx-text"], .dark-theme #buy-robux-popover-menu li a:focus, .dark-theme #buy-robux-popover-menu li a:hover, .dark-theme #settings-popover-menu li a:focus, .dark-theme #settings-popover-menu li a:hover {
color:#000
}
.popover{
box-shadow:none
}
#buy-robux-popover .arrow, #settings-popover .arrow {
display:none
}
#navbar-robux[aria-describedby="buy-robux-popover"] #nav-robux-icon{
background:#efefef;
border-radius:0;
border:1px solid #777;
padding:3px 5px 0 5px;
border-bottom:0;
}
#navbar-settings[aria-describedby="settings-popover"] {
background:#efefef;
border:1px solid #777;
border-bottom:0
}
#navbar-settings[aria-describedby="settings-popover"] .nav-setting-highlight {
top:5px;
left:17px
}
#navbar-settings[aria-describedby="settings-popover"] #settings-icon {
padding:3px 5px 0 5px
}
#navbar-settings[aria-describedby="settings-popover"] .icon-nav-settings {
background-position-y:-180px!important
}
#navbar-robux[aria-describedby="buy-robux-popover"] #nav-robux-icon .icon-robux-28x28 {
filter:invert(1);
}
#navbar-robux[aria-describedby="buy-robux-popover"] span[class^="rbx-text"] {
color:#666
}
#navbar-robux[aria-describedby="buy-robux-popover"]:hover span[class^="rbx-text"] {
color:#000
}
.popover-content .dropdown-menu li a {
font-size:13px;
padding:1px 6px;
line-height:23px
}
.popover-content .dropdown-menu li a:hover {
background:#ddd
}
/*search*/
.popover-content .dropdown-menu li {
padding:0
}
#header .new-dropdown-menu .btr-fastsearch-anchor, .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor {
padding:0 6px
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-icon {
display:none
}
.new-navbar-search-anchor[href^="https://www.roblox.com/catalog"] .navbar-list-option-suffix {
font-size:0;
height:20px
}
.new-navbar-search-anchor[href^="https://www.roblox.com/catalog"] .navbar-list-option-suffix:after {
font-size:13px;
content:"in Catalog";
}
.new-navbar-search-anchor[href^="https://www.roblox.com/discover"] .navbar-list-option-suffix {
font-size:0;
height:20px
}
.new-navbar-search-anchor[href^="https://www.roblox.com/discover"] .navbar-list-option-suffix:after {
font-size:13px;
content:"in Games";
}
.new-navbar-search-anchor[href^="https://www.roblox.com/search"] .navbar-list-option-suffix, .new-navbar-search-anchor[href^="https://www.roblox.com/develop"] .navbar-list-option-suffix {
font-size:13px;
height:20px
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-text {
font-size:13px;
color:#000
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-suffix {
color:#222
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor {
height:25px
}
#header .new-dropdown-menu .btr-fastsearch-anchor {
height:40px
}
.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor:hover, #header .new-dropdown-menu .btr-fastsearch-anchor:hover {
background:#ddd
}
.rbx-header .navbar-search.navbar-search-open .dropdown-menu {
border:1px solid #777;
background:#efefef;
border-radius:0;
margin-top:2px;
width:121%
}
.btr-fastsearch-thumbnail-container {
border-radius:0
}
/*cards*/
.game-card-info {
position:relative;
margin:0
}
.game-card-link .game-card-name {
display:inline-block;
color:#095fb5;
font:bold 12px arial;
margin:0
}
.game-card-link .game-card-name:hover {
text-decoration:underline
}
a .game-card-thumb-container, .game-card-container thumbnail-2d, .game-card-thumb-container .game-card-thumb {
border-radius:0
}
.game-card-link .game-card-info .no-vote, .game-card-link .game-card-info .playing-counts-label, .game-card-link .game-card-info .vote-percentage-label {
padding:0;
}
a .game-card-thumb-container:before {
content:none
}
.game-card-link .game-card-info .playing-counts-label {
color:red;
font:normal 12px arial;
line-height:14px
}
.game-card-link .game-card-info .playing-counts-label:after {
content:" players online"
}
.game-card-info .icon-votes-gray, .game-card-info .icon-playing-counts-gray {
display:none
}
.game-card-link .game-card-info .vote-percentage-label {
display:block;
order:2;
font-size:11px;
color:#888;
line-height:13px;
}
.game-card-link .game-card-info .vote-percentage-label:before {
content:"Voted: ";
}
.game-card-info {
display:flex;
flex-direction:column
}
}