roblox 2012 and 2013 header

Roblox header from 2012-2013

  1. /* ==UserStyle==
  2. @name roblox 2012 and 2013 header
  3. @namespace legosavant
  4. @version 3.0.1
  5. @description Roblox header from 2012-2013
  6. @author legosavant
  7. @license GPLv3
  8. @preprocessor stylus
  9. @var checkbox arial "Use Arial Font" 0
  10. @var checkbox fullscreen "Use fullscreen header" 0
  11. @var checkbox tix "Tix Icon" 0
  12. @var checkbox early "Early 2012" 0
  13. @var checkbox string "Custom Tab Text" 1
  14. ==/UserStyle== */
  15.  
  16. @-moz-document domain("www.roblox.com"),domain("web.roblox.com") {
  17. @font-face {
  18. font-family: 'Source Sans Pro';
  19. font-style: normal;
  20. font-weight: 300;
  21. src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("/fonts/source-sans-pro-v9-latin-300.woff2") format("woff2"), url("/fonts/source-sans-pro-v9-latin-300.woff") format("woff"), url("/fonts/source-sans-pro-v9-latin-300.svg#SourceSansPro") format("svg");
  22. }
  23. @font-face {
  24. font-family: 'Source Sans Pro';
  25. font-style: normal;
  26. font-weight: 400;
  27. src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url("/fonts/source-sans-pro-v9-latin-regular.woff2") format("woff2"), url("/fonts/source-sans-pro-v9-latin-regular.woff") format("woff"), url("/fonts/source-sans-pro-v9-latin-regular.svg#SourceSansPro") format("svg");
  28. }
  29. @font-face {
  30. font-family: 'Source Sans Pro';
  31. font-style: normal;
  32. font-weight: 600;
  33. src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"), url("/fonts/source-sans-pro-v9-latin-600.woff2") format("woff2"), url("/fonts/source-sans-pro-v9-latin-600.woff") format("woff"), url("/fonts/source-sans-pro-v9-latin-600.svg#SourceSansPro") format("svg");
  34. }
  35. .gotham-font #navigation-container, .gotham-font #navigation-container div{
  36. font:400 14px 'Source Sans Pro',Arial,Helvetica,sans-serif;
  37. line-height:1.428;
  38. if arial {
  39. font:400 12px 'arial'
  40. }
  41. }
  42. body.btr-no-hamburger .container-main, body.btr-no-hamburger .nav-container .nav-content {
  43. margin-left:0;
  44. margin-top:60px
  45. }
  46. .rplus-icon {
  47. display:none!important
  48. }
  49. /************MAIN NAV**************/
  50. /*bg*/
  51. .gotham-font .rbx-header {
  52. background: url(/images/RevisedHeader/bg-rbx_header.png) repeat-x;
  53. height: 36px;
  54. background-color: #114081;
  55. position: fixed;
  56. width: 100%;
  57. z-index: 10001;
  58. top: 0;
  59. border:0
  60. }
  61. .gotham-font.dark-theme .rbx-header {
  62. background:#333 url(http://www.roblox.com/images/RevisedHeader/bg-obc_header.png) repeat-x
  63. }
  64. .rbx-header .container-fluid {
  65. max-width:970px;
  66. if fullscreen {
  67. max-width:100%
  68. }
  69. }
  70. /*logo*/
  71. .rbx-nav-collapse, .icon-logo-r {
  72. display:none
  73. }
  74. .btr-no-hamburger #header .rbx-navbar-header {
  75. padding:0;
  76. width:auto;
  77. height:auto
  78. }
  79. .rbx-header .navbar-brand {
  80. padding:0;
  81. margin:0;
  82. height:auto
  83. }
  84. .gotham-font .icon-logo {
  85. background: url(/images/RevisedHeader/btn-rbx_logo.png) no-repeat top;
  86. display: inline-block;
  87. width: 116px;
  88. height: 35px;
  89. margin-right: 4px;
  90. }
  91. .gotham-font.dark-theme .icon-logo {
  92. background:url(https://www.roblox.com/images/RevisedHeader/btn-obc_logo.png) no-repeat top;
  93. }
  94. .gotham-font .icon-logo:hover {
  95. background-position-y:bottom
  96. }
  97. /*links*/
  98. .rbx-header .rbx-navbar {
  99. margin:0
  100. }
  101. .col-lg-4 {
  102. width:auto
  103. }
  104. #rbx-body .rbx-header li > .text-header{
  105. font-size:15px;
  106. color:#fff;
  107. font-weight:600;
  108. padding:7px 8px 0 8px;
  109. height:28px;
  110. box-sizing:content-box;
  111. width:auto;
  112. line-height:20px;
  113. if arial {
  114. font-weight:700;
  115. font-family:arial;
  116. font-size:13px;
  117. line-height:21px
  118. }
  119. }
  120. /*search*/
  121. .rbx-header .navbar-search .clear-search {
  122. top:1px;
  123. right:14px
  124. }
  125. .col-lg-3.navbar-search {
  126. width:max-content;
  127. }
  128. .gotham-font .rbx-header .navbar-search .input-group {
  129. color:rgb(136, 136, 136);
  130. padding:1px 7px;
  131. border:1px solid #bbb;
  132. height:20px;
  133. background:#fff;
  134. box-sizing:content-box;
  135. }
  136. .dark-theme.gotham-font .rbx-header .navbar-search .input-group {
  137. color:#fff;
  138. background:#000;
  139. border-color:#555
  140. }
  141. #rbx-body .rbx-header .navbar-search .input-field,#rbx-body .rbx-header .navbar-search .input-field::placeholder, #rbx-body .rbx-header .navbar-search {
  142. border:0;
  143. border-radius:0;
  144. height:auto;
  145. background:transparent;
  146. color:#777;
  147. padding:0;
  148. font:400 13px 'arial';
  149. line-height:20px
  150. }
  151. #rbx-body .rbx-header .navbar-search {
  152. margin-left:5px;
  153. if fullscreen {
  154. min-width:400px
  155. }
  156. }
  157. #rbx-body .rbx-header .input-addon-btn {
  158. left:auto;
  159. background: url(/images/searchIcon.png) no-repeat;
  160. cursor: pointer;
  161. width: 16px;
  162. height: 18px;
  163. position: absolute;
  164. top: 2px;
  165. right: 4px;
  166. }
  167. .dark-theme#rbx-body .rbx-header .input-addon-btn {
  168. filter:invert(1)
  169. }
  170. #rbx-body .input-group .input-group-btn .input-addon-btn span {
  171. opacity:0
  172. }
  173. /*age*/
  174. .age-bracket-label-username {
  175. font:400 12px 'source sans pro';
  176. color:#fff;
  177. text-decoration:none;
  178. line-height:18px;
  179. margin-left:5px;
  180. margin-right:0!important;
  181. if arial {
  182. font-family:'arial';
  183. font-size:11px!important;
  184. }
  185. }
  186. .rbx-header .rbx-navbar-icon-group .age-bracket-label {
  187. padding:0 5px;
  188. height:36px;
  189. margin:0;
  190. display:flex;
  191. padding-top:1px
  192. }
  193. .rbx-header .rbx-navbar-icon-group .age-bracket-label .dynamic-overflow-container {
  194. height:35px;
  195. order:2;
  196. }
  197. .age-bracket-label .dynamic-overflow-container .avatar-headshot-xs {
  198. display:none
  199. }
  200. .xsmall.age-bracket-label-age, .xsmall.age-bracket-label-age:hover {
  201. background:rgba(0,0,0,.6);
  202. border-radius:3px;
  203. color:#fff;
  204. line-height:8px;
  205. padding:1px;
  206. font-family:"MS PGothic";
  207. font-size:11px;
  208. padding-bottom:0;
  209. padding-top:3px;
  210. cursor:pointer;
  211. }
  212. /*notification*/
  213. #rbx-body .notification-red, #rbx-body #header .btr-nav-notif, #rbx-body .notification, .light-theme .notification-blue {
  214. border-radius:3px;
  215. border:1px solid #000;
  216. background:#fff;
  217. font:bold 10px Arial,Helvetica,sans-serif;
  218. padding:0 1.5px;
  219. top:12px;
  220. color:#000;
  221. height:11px;
  222. line-height:10px;
  223. box-sizing:border-box;
  224. right:0;
  225. left:auto;
  226. if arial {
  227. padding:0 2px
  228. }
  229. }
  230. #rbx-body #left-navigation-container .notification-blue {
  231. color:#fff;
  232. background:transparent
  233. }
  234. /*buttons*/
  235. #rbx-body.gotham-font .notification-stream-indicator {
  236. line-height:1
  237. }
  238. #nav-ns-icon, #btr-navbar-messages > a, #btr-navbar-friends > a {
  239. display:block;
  240. padding:7px 7px 9px 7px;
  241. background:none;
  242. border-radius:0
  243. }
  244. #rbx-body .btn-uiblox-common-common-notification-bell-md, #rbx-body .btn-navigation-nav-robux-md, #rbx-body .btn-navigation-nav-settings-md {
  245. padding:0;
  246. border-radius:0
  247. }
  248. #rbx-body .btn-navigation-nav-robux-md:hover, #rbx-body #nav-ns-icon:hover, #rbx-body #btr-navbar-messages > a:hover, #rbx-body #btr-navbar-friends > a:hover, #rbx-body .btn-navigation-nav-settings-md:hover, .rbx-header .rbx-navbar-icon-group .age-bracket-label:hover, #rbx-body .rbx-header .rbx-navbar li:hover {
  249. background: url(/images/RevisedHeader/bg-main_menu_hover.png) repeat-x;
  250. border:none
  251. }
  252. .gotham-font .icon-nav-friend-btr,.gotham-font .icon-nav-message-btr, .gotham-font #common-notification-bell.icon-common-notification-bell, #nav-robux-icon .icon-robux-28x28 {
  253. height:20px;
  254. width:20px;
  255. background: url(/images/RevisedHeader/bg-icon_sprites.png);
  256. background-position: top;
  257. filter:none;
  258. }
  259. .gotham-font a:hover .icon-nav-message-btr {
  260. background-position-y:-20px
  261. }
  262. .gotham-font .icon-nav-friend-btr {
  263. background-position-y:-40px
  264. }
  265. .gotham-font a:hover .icon-nav-friend-btr {
  266. background-position-y:-60px
  267. }
  268. .gotham-font #nav-robux-icon .icon-robux-28x28 {
  269. background-position-y:-80px;
  270. if tix {
  271. background-position-y:-120px
  272. }
  273. }
  274. .gotham-font button:hover #nav-robux-icon .icon-robux-28x28 {
  275. background-position-y:-100px;
  276. if tix {
  277. background-position-y:-140px
  278. }
  279. }
  280. .gotham-font #common-notification-bell.icon-common-notification-bell {
  281. background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAdCAYAAAC0T3x2AAAABHNCSVQICAgIfAhkiAAAAKNJREFUSIljYBgFo4BM0MLAwPAZSpMEGElU/59cvUxEqrNhYGBYjSa2GipOFcDCwMAwlQHiE1x4KlQdRYCQJTA8jRJLbIi0BIbJDsbVJFqEHodEgxckWvQCn2H4kuh/PHIkm0ds8qYYjFo0dC2SItM8kvSpMjAw7GYgLQ/B8G6ofgyALd2Tk3+IMXfwgV0MqMG0h1YWyUEN/wml5Whl0SgYGAAAs3VTrB0ZmIoAAAAASUVORK5CYII=') -3px -4px;
  282. opacity: .4;
  283. width: 20px;
  284. height: 28px;
  285. filter: invert(1);
  286. }
  287. #nav-ns-icon {
  288. padding-bottom:1px
  289. }
  290. .gotham-font button:hover #common-notification-bell.icon-common-notification-bell {
  291. opacity:.7
  292. }
  293. /*popovers*/
  294. #rbx-body .btn-navigation-nav-robux-md[aria-describedby="buy-robux-popover"] {
  295. border:1px solid #777;
  296. background:#EFEFEF;
  297. padding:0 4px;
  298. border-bottom-color:transparent
  299. }
  300. #rbx-body .btn-navigation-nav-settings-md[aria-describedby="settings-popover"] {
  301. border:1px solid #777;
  302. background:#EFEFEF;
  303. padding:0 6px;
  304. border-bottom-color:transparent
  305. }
  306. #rbx-body [aria-describedby="notification-stream-popover"] #nav-ns-icon {
  307. border:1px solid #777;
  308. background:#EFEFEF;
  309. padding:6px 6px 0 6px;
  310. border-bottom-color:transparent
  311. }
  312. .dark-theme#rbx-body .btn-navigation-nav-settings-md[aria-describedby="settings-popover"], .dark-theme#rbx-body [aria-describedby="notification-stream-popover"] #nav-ns-icon, .dark-theme#rbx-body .btn-navigation-nav-robux-md[aria-describedby="buy-robux-popover"] {
  313. background:#333;
  314. border-color:#555;
  315. border-bottom-color:transparent
  316. }
  317. .light-theme.gotham-font [aria-describedby="notification-stream-popover"] #common-notification-bell.icon-common-notification-bell {
  318. filter:invert(0)
  319. }
  320. .rbx-header .arrow {
  321. display:none
  322. }
  323. .rbx-header .rbx-navbar-icon-group>li .popover.bottom {
  324. left:auto!important;
  325. z-index:-1
  326. }
  327. .rbx-header .rbx-navbar-right .popover-content {
  328. right:auto;
  329. top:35px;
  330. if fullscreen {
  331. right:19px
  332. }
  333. }
  334. .rbx-header .dropdown-menu {
  335. border-radius:0;
  336. box-shadow:none;
  337. border:1px solid #777;
  338. background:#efefef;
  339. font:400 13px 'source sans pro';
  340. }
  341. .dark-theme .rbx-header .dropdown-menu {
  342. background:#333;
  343. border-color:#555
  344. }
  345. .gotham-font .rbx-header .rbx-navbar-icon-group li .dropdown-menu a, #header .new-dropdown-menu .btr-fastsearch-anchor, .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor {
  346. padding:2px 10px 2px 6px;
  347. height:auto
  348. }
  349. .rbx-header .dropdown-menu li{
  350. padding:0
  351. }
  352. .light-theme #settings-popover-menu li a, .light-theme #buy-robux-popover-menu li a {
  353. color:#000
  354. }
  355. .light-theme .rbx-header .rbx-navbar-icon-group>li>button[aria-describedby="buy-robux-popover"] span[class^=rbx-text] {
  356. color:#666!important
  357. }
  358. .light-theme .rbx-header .rbx-navbar-icon-group>li>button[aria-describedby="buy-robux-popover"] .icon-robux-28x28 {
  359. filter:invert(1)!important
  360. }
  361. #buy-robux-popover .dropdown-menu {
  362. left:11px
  363. }
  364. /*notification popup*/
  365. #rbx-body .notification-stream-container .notification-content-view {
  366. box-shadow:none;
  367. border:1px solid #777
  368. }
  369. #accept-fr-btn {
  370. background: url(https://www.roblox.com/images/btn_green_30h_t2.png) top right transparent no-repeat;
  371. border: 0;
  372. position: relative;
  373. height: 30px;
  374. font: bold 14px Arial,Helvetica,Sans-Serif;
  375. border-radius:5px 0 0 0;
  376. padding:0 8px;
  377. color:#fff
  378. }
  379. #ignore-fr-btn {
  380. background: url(http://www.roblox.com/images/btn_red_30h_t2.png) no-repeat top right;
  381. border: 0;
  382. position: relative;
  383. height: 30px;
  384. font: bold 14px Arial,Helvetica,Sans-Serif;
  385. border-radius:5px 0 0 0;
  386. color:#fff;
  387. padding:0 8px
  388. }
  389. #ignore-fr-btn:hover, #accept-fr-btn:hover {
  390. background-position-y:bottom
  391. }
  392. #notification-stream-scrollbar .avatar .avatar-card-image {
  393. border-radius:0
  394. }
  395. .gotham-font .notification-item-content .text {
  396. font-family:"arial"
  397. }
  398. /*search suggestions*/
  399. .btr-fastsearch-thumbnail-container {
  400. border-radius:0
  401. }
  402. .gotham-font .rbx-header .navbar-search .new-dropdown-menu {
  403. margin-top:-1px;
  404. box-shadow:none;
  405. background:#efefef;
  406. width:100%;
  407. left:0
  408. }
  409. .dark-theme.gotham-font .rbx-header .navbar-search .new-dropdown-menu {
  410. background:#333;
  411. border-color:#555
  412. }
  413. .rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-icon {
  414. display:none
  415. }
  416. .gotham-font #navigation-container .btr-fastsearch-text div{
  417. font-size:13px
  418. }
  419. .btr-fastsearch-avatar{
  420. height:24px;
  421. width:24px
  422. }
  423. .gotham-font #navigation-container .btr-fastsearch-text div.text-label {
  424. font-size:11px;
  425. line-height:11px
  426. }
  427. .btr-fastsearch-follow.btn-primary-xs {
  428. background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAmCAYAAACbBvanAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkU5MDYyOUI4MTc1MTFERjlCRjVDMkUzMzQxRDcyNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkU5MDYyOUM4MTc1MTFERjlCRjVDMkUzMzQxRDcyNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENkI0RDJDMjgxNjgxMURGOUJGNUMyRTMzNDFENzI0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRTkwNjI5QTgxNzUxMURGOUJGNUMyRTMzNDFENzI0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjXVPlUAAAs4SURBVHja5FkNUJTH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")!important;
  429. height:19px;
  430. width:65px;
  431. color:transparent;
  432. border-radius:0;
  433. padding:0
  434. }
  435. .btr-fastsearch-follow.btn-primary-xs:hover {
  436. color:transparent;
  437. background-position-y:bottom
  438. }
  439. /*robux count*/
  440. .rbx-header .rbx-navbar-icon-group>li>button span[class^=rbx-text] {
  441. margin:0 0 0 3px;
  442. font:400 11px 'source sans pro';
  443. color:#fff!important;
  444. if arial {
  445. font:400 12px 'arial'
  446. }
  447. }
  448. #rbx-body #navbar-robux:before, #rbx-body #navbar-robux:after {
  449. content:"";
  450. min-height:25px;
  451. border-left:1px solid #7394c1;
  452. margin:0 5px;
  453. display:inline-block;
  454. margin-top:5px
  455. }
  456. .dark-theme#rbx-body #navbar-robux:before, .dark-theme#rbx-body #navbar-robux:after {
  457. border-color:#777
  458. }
  459. .rbx-header .rbx-navbar-icon-group>li>button>.rbx-menu-item {
  460. float:none
  461. }
  462. /*setting*/
  463. .gotham-font .btn-navigation-nav-settings-md span.icon-nav-settings {
  464. width:20px!important;
  465. height:20px!important;
  466. background: url(/images/RevisedHeader/bg-icon_sprites.png) 0 -160px!important;
  467. }
  468. .light-theme.gotham-font .btn-navigation-nav-settings-md[aria-describedby="settings-popover"] span.icon-nav-settings {
  469. background-position-y:-180px!important
  470. }
  471. .rbx-header .rbx-navbar-icon-group > li, #rbx-body .btn-navigation-nav-robux-md, #rbx-body .btn-navigation-nav-settings-md {
  472. height:36px;
  473. padding:0;
  474. margin:0!important
  475. }
  476. #rbx-body .btn-navigation-nav-robux-md {
  477. padding:0 5px;
  478. vertical-align:top
  479. }
  480. #rbx-body .btn-navigation-nav-settings-md {
  481. padding:0 7px
  482. }
  483. .light-theme .btn-navigation-nav-settings-md:active {
  484. background:none
  485. }
  486. /******************SECONDARY NAV**************/
  487. .gotham-font .rbx-left-col {
  488. width:100%;
  489. box-shadow:none;
  490. background:none;
  491. top:35px;
  492. height:auto;
  493. overflow:visible
  494. }
  495. .rbx-left-col > ul, .rbx-left-col .simplebar-track, .rbx-left-col .simplebar-height-auto-observer-wrapper, .rbx-left-col li span[class^=icon] {
  496. display:none
  497. }
  498. .gotham-font .rbx-left-col .rbx-scrollbar {
  499. height:25px;
  500. width:100%;
  501. background:#191919;
  502. overflow:visible
  503. }
  504. .rbx-left-col .simplebar-content-wrapper, .rbx-left-col .simplebar-wrapper, .rbx-left-col .simplebar-mask {
  505. overflow:visible!important
  506. }
  507. .rbx-left-col .rbx-scrollbar .left-col-list {
  508. width:970px;
  509. if fullscreen {
  510. width:100%
  511. }
  512. margin:0 auto;
  513. padding:0 10px;
  514. position:relative
  515. }
  516. .rbx-left-col li {
  517. line-height:1;
  518. float:left;
  519. margin:0 2px
  520. }
  521. .rbx-left-col li .text-nav .font-header-2, .rbx-left-col li.font-bold.small {
  522. font:400 14px 'source sans pro';
  523. color:#fff;
  524. margin:0;
  525. padding:5px;
  526. line-height:1.38;
  527. cursor:pointer;
  528. if arial {
  529. font:400 12px 'arial'
  530. }
  531. }
  532. .rbx-left-col li .text-nav .font-header-2:hover, .rbx-left-col li.font-bold.small:hover {
  533. if arial {
  534. background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,0))
  535. }
  536. }
  537. /*sponsor thing for lulz*/
  538. .rbx-left-col li.rbx-nav-sponsor {
  539. max-width:80px;
  540. position:absolute;
  541. left:660px;
  542. display:none;
  543. height:25px
  544. }
  545. .rbx-left-col li.font-bold.small {
  546. z-index:1;
  547. }
  548. .rbx-left-col li.font-bold.small:active ~ .rbx-nav-sponsor {
  549. display:block
  550. }
  551. .rbx-left-col li.rbx-nav-sponsor:hover {
  552. display:block
  553. }
  554. .rbx-left-col li.rbx-nav-sponsor a {
  555. position:relative;
  556. padding:5px;
  557. background:#444;
  558. z-index:2;
  559. }
  560. .rbx-left-col li.rbx-nav-sponsor:nth-last-child(1) a {
  561. top:115px;
  562. }
  563. .rbx-left-col li.rbx-nav-sponsor:nth-last-child(2) a {
  564. top:70px;
  565. }
  566. .rbx-left-col li.rbx-nav-sponsor:nth-last-child(3) a {
  567. top:25px;
  568. }
  569. #btr-blogfeed-container {
  570. display:none
  571. }
  572.  
  573. if string {
  574. #rbx-body .rbx-header li > .text-header[href="/home"], #rbx-body .rbx-header li > .text-header[href="/develop"], #rbx-body .rbx-header li > .text-header[href="/catalog"], #rbx-body .rbx-header li > .text-header[href="/discover"] {
  575. font-size:0
  576. }
  577. #rbx-body .rbx-header li > .text-header[href="/home"]:before {
  578. content:"Home";
  579. font-size:15px;
  580. if arial {
  581. font-size:13px
  582. }
  583. }
  584. #rbx-body .rbx-header li > .text-header[href="/develop"]:before {
  585. content:"Build";
  586. font-size:15px;
  587. if arial {
  588. font-size:13px
  589. }
  590. }
  591. #rbx-body .rbx-header li > .text-header[href="/catalog"]:before {
  592. content:"Catalog";
  593. font-size:15px;
  594. if arial {
  595. font-size:13px
  596. }
  597. }
  598. #rbx-body .rbx-header li > .text-header[href="/discover"]:before {
  599. content:"Games";
  600. font-size:15px;
  601. if arial {
  602. font-size:13px
  603. }
  604. }
  605. }
  606.  
  607. /******************2012*****************/
  608. if early {
  609. body.btr-no-hamburger .container-main, body.btr-no-hamburger .nav-container .nav-content {
  610. margin-top:95px
  611. }
  612. .gotham-font .rbx-header {
  613. background:#114081;
  614. height:38px
  615. }
  616. .gotham-font .icon-logo {
  617. background-image:url('https://www.roblox.com/images/btn-logo.png?v=2');
  618. height:38px
  619. }
  620. .rbx-header .rbx-navbar {
  621. position:absolute;
  622. width:900px;
  623. background:url("https://www.roblox.com/images/cssspecific/rbx2/topNav_blue.png");
  624. top:38px;
  625. height:30px;
  626. padding-left:5px
  627. }
  628. .gotham-font .rbx-header:before {
  629. content:"";
  630. width:100%;
  631. position:absolute;
  632. left:0;
  633. background:url("https://www.roblox.com/images/cssspecific/rbx2/topNav_blue.png");
  634. height:30px;
  635. top:38px
  636. }
  637. #rbx-body .rbx-header .rbx-navbar li:hover {
  638. background-image:url("https://www.roblox.com/images/cssspecific/rbx2/topNav_blue.png");
  639. background-position-y:-30px
  640. }
  641. #rbx-body .rbx-header li > .text-header {
  642. font-size:16px;
  643. line-height:18px
  644. }
  645. .rbx-header .rbx-navbar li {
  646. flex-grow:0;
  647. padding:0 8px
  648. }
  649. .gotham-font .rbx-left-col{
  650. top:68px;
  651. margin:0 auto;
  652. }
  653. .gotham-font .rbx-left-col .rbx-scrollbar {
  654. background:#363636;
  655. width:900px;
  656. margin:0 auto;
  657. height:30px;
  658. if fullscreen {
  659. width:100%
  660. }
  661. }
  662. .rbx-left-col .rbx-scrollbar .left-col-list {
  663. padding-left:27px
  664. }
  665. .rbx-left-col li .text-nav .font-header-2:hover, .rbx-left-col li.font-bold.small:hover {
  666. background: linear-gradient(#CCCCCC,#979797 1px,#4F4F4F 29px,#1B1B1B);
  667. height:30px
  668. }
  669. .rbx-left-col li .text-nav .font-header-2, .rbx-left-col li.font-bold.small {
  670. font-weight:500;
  671. font-size:14px;
  672. line-height:16px
  673. }
  674. /*top right*/
  675. .rbx-header .rbx-navbar-right {
  676. background: url(http://www.roblox.com/images/cssspecific/rbx2/head_bkg_t1.png) no-repeat scroll left;
  677. margin:0;
  678. height:28px;
  679. padding-left:3px
  680. }
  681. .rbx-header .rbx-navbar-icon-group {
  682. background: linear-gradient(#FDFDFD,#CECECE 27px,#616161);
  683. height: 28px;
  684. border-right:1px solid #DFDFDF;
  685. border-bottom-right-radius:3px;
  686. if fullscreen {
  687. margin-right:20px
  688. }
  689. }
  690. .gotham-font .icon-nav-friend-btr, .gotham-font .icon-nav-message-btr, #nav-robux-icon .icon-robux-28x28 {
  691. background-image:url('https://www.roblox.com/images/cssspecific/rbx2/head_infobox_icons.png')
  692. }
  693. .gotham-font .icon-nav-friend-btr {
  694. background-position-y:-80px
  695. }
  696. .gotham-font a:hover .icon-nav-friend-btr {
  697. background-position-y:-100px
  698. }
  699. .gotham-font #nav-robux-icon .icon-robux-28x28 {
  700. background-position-y:-40px;
  701. filter:none!important
  702. }
  703. .gotham-font button:hover #nav-robux-icon .icon-robux-28x28 {
  704. background-position-y:-60px
  705. }
  706. if tix {
  707. .gotham-font #nav-robux-icon .icon-robux-28x28 {
  708. background-position-y:-120px
  709. }
  710. .gotham-font button:hover #nav-robux-icon .icon-robux-28x28 {
  711. background-position-y:-140px
  712. }
  713. }
  714. #rbx-body #navbar-robux:before{
  715. content:none
  716. }
  717. #rbx-body #navbar-robux:after {
  718. border-color:#B3B3B3;
  719. max-height:23px;
  720. margin-top:3px;
  721. min-height:23px;
  722. margin-right:2px
  723. }
  724. .gotham-font #common-notification-bell.icon-common-notification-bell {
  725. background: no-repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAAAgUlEQVRIie3WsQqFMAyF4T/hiou2b+P7z75Nq3NzB8FZIyiFZMpy8kHpcOCjEU9onSYrrQGQVVn2/fadnwcurTHM87Fvm+eEDwYwM28UAH2UDjjggAMOOOCAu4bdDUTEVdeewVn17FpZP3u0zqavXl3NGFM69jd7dRKh1ArE57o+fwvgIwADmCJ8AAAAAElFTkSuQmCC");
  726. filter:invert(0);
  727. background-size:18px;
  728. opacity:1;
  729. background-position-y:2px;
  730. max-width:15px
  731. }
  732. .gotham-font #nav-ns-icon .notification-red {
  733. color:#dd3000
  734. }
  735. .gotham-font #nav-ns-icon:hover .notification-red {
  736. color:#ff3000;
  737. opacity:.6;
  738. }
  739. .rbx-header .rbx-navbar-icon-group>li>button span[class^=rbx-text], .light-theme .rbx-header .rbx-navbar-icon-group>li>button[aria-describedby="buy-robux-popover"] span[class^=rbx-text] {
  740. color:#080!important;
  741. font-weight:700;
  742. font-size:14px;
  743. if tix {
  744. color:#a61!important
  745. }
  746. }
  747. .rbx-header .rbx-navbar-icon-group>li>button:hover span[class^=rbx-text] {
  748. color:#0d0!important;
  749. if tix {
  750. color:#fb6!important
  751. }
  752. }
  753. #rbx-body #btr-navbar-friends .btr-nav-notif.rbx-text-navbar-right {
  754. color:#05b
  755. }
  756. #rbx-body #btr-navbar-friends a:hover .btr-nav-notif.rbx-text-navbar-right {
  757. color:#0cf
  758. }
  759. #rbx-body #btr-navbar-messages .btr-nav-notif.rbx-text-navbar-right {
  760. color:#444
  761. }
  762. #rbx-body #btr-navbar-messages a:hover .btr-nav-notif.rbx-text-navbar-right {
  763. color:#aaa
  764. }
  765. .btr-nav-notif.rbx-text-navbar-right[style="display:none;"]:before {
  766. content:"0"
  767. }
  768. .rbx-header .rbx-navbar-icon-group > li, #rbx-body .btn-navigation-nav-robux-md, #rbx-body .btn-navigation-nav-settings-md {
  769. height:27px
  770. }
  771. #nav-ns-icon, #btr-navbar-messages > a, #btr-navbar-friends > a {
  772. padding-top:2px
  773. }
  774. #rbx-body .notification-red, #rbx-body #header .btr-nav-notif, #rbx-body .notification, .light-theme .notification-blue {
  775. position:relative;
  776. top:0;
  777. display:inline-block!important;
  778. border:none;
  779. background:none;
  780. font-size:14px;
  781. line-height:normal;
  782. height:auto;
  783. vertical-align:top;
  784. padding-top:2px
  785. }
  786. .gotham-font .icon-nav-friend-btr, .gotham-font .icon-nav-message-btr {
  787. display:inline-block;
  788. vertical-align:top
  789. }
  790. .rbx-header .rbx-navbar-icon-group .age-bracket-label {
  791. position:absolute;
  792. left:120px
  793. }
  794. .rbx-header .container-fluid {
  795. position:relative;
  796. max-width:900px;
  797. if fullscreen {
  798. max-width:none
  799. }
  800. }
  801. #rbx-body .rbx-header .navbar-search {
  802. left:130px
  803. }
  804. .rbx-header .rbx-navbar-icon-group .age-bracket-label .dynamic-overflow-container {
  805. order:-1;
  806. margin-right:6px;
  807. }
  808. .gotham-font .rbx-header .navbar-search .input-group {
  809. width:260px
  810. }
  811. .gotham-font .btn-navigation-nav-settings-md span.icon-nav-settings, .rplus-icon-32x32 {
  812. background:url("https://www.roblox.com/images/cssspecific/rbx2/btn_blue18h.png")!important;
  813. max-height:18px;
  814. width:auto!important;
  815. font-size:10px;
  816. font-family:'arial';
  817. font-weight:700;
  818. color:#fff;
  819. padding:0 3px!important;
  820. line-height:18px;
  821. vertical-align:top
  822. }
  823. .gotham-font .btn-navigation-nav-settings-md:hover span.icon-nav-settings, .rplus-icon-32x32:hover {
  824. background-position:bottom!important;
  825. color:#fff
  826. }
  827. .gotham-font .btn-navigation-nav-settings-md span.icon-nav-settings:before {
  828. content:"Settings";
  829. }
  830. .rplus-icon-32x32:before {
  831. content:"R Plus"
  832. }
  833. #settings-icon .notification-red {
  834. display:none!important
  835. }
  836. .light-theme .btn-uiblox-common-common-notification-bell-md:focus, .light-theme .btn-uiblox-common-common-notification-bell-md:hover, .light-theme .btn-navigation-nav-settings-md.active, .light-theme .btn-navigation-nav-settings-md:active {
  837. background:none!important
  838. }
  839. #settings-icon, .rplus-icon-32x32 {
  840. top:-1px
  841. }
  842. #rbx-body .btn-navigation-nav-robux-md[aria-describedby="buy-robux-popover"] {
  843. border:none;
  844. background:none;
  845. padding:0 5px;
  846. border-bottom-color:transparent
  847. }
  848. #rbx-body .btn-navigation-nav-settings-md[aria-describedby="settings-popover"] {
  849. border:none;
  850. background:none;
  851. padding:0 7px;
  852. border-bottom-color:transparent
  853. }
  854. #rbx-body [aria-describedby="notification-stream-popover"] #nav-ns-icon {
  855. border:none;
  856. background:none;
  857. padding:2px 7px 1px 7px;
  858. border-bottom-color:transparent
  859. }
  860. .rbx-header .rbx-navbar-right .popover-content {
  861. top:27px;
  862. }
  863. #settings-popover, #buy-robux-popover, #notification-stream-popover {
  864. z-index:9956
  865. }
  866. .rplus-quick-info-widget {
  867. margin-top:30px
  868. }
  869. .rbx-header .rbx-navbar-icon-group .age-bracket-label:hover {
  870. background:none
  871. }
  872. if string {
  873. #rbx-body .rbx-header li > .text-header[href="/home"]:before, #rbx-body .rbx-header li > .text-header[href="/develop"]:before, #rbx-body .rbx-header li > .text-header[href="/catalog"]:before, #rbx-body .rbx-header li > .text-header[href="/discover"]:before {
  874. font-size:16px
  875. }
  876. #rbx-body .rbx-header li > .text-header[href="/home"]:before {
  877. content:"My ROBLOX"
  878. }
  879. }
  880. }
  881. }