☰

2016 ROBLOX settings page add-on for RLOT

A new userstyle

  1. /* ==UserStyle==
  2. @name           2016 ROBLOX settings page add-on for RLOT
  3. @namespace      github.com/openstyles/stylus
  4. @version        2.0
  5. @description    A new userstyle
  6. @author         Me
  7. @preprocessor   less
  8. @var checkbox NC "NO BC" 0
  9. @var checkbox ST "Social Tab" 0
  10. @var checkbox RP "ROBLOX+ Tab" 0
  11. ==/UserStyle== */
  12.  
  13. @-moz-document url-prefix("https://www.roblox.com/my/account") {
  14. [data-internal-page-name="Settings"] .settings-left-navigation .menu-vertical {
  15.   display: flex;
  16.   width: 1000px !important;
  17. height: 40px;
  18. box-shadow: 0 1px 3px rgba(0,0,0,0.15)!important;
  19. margin-top: 0px!important;
  20. }
  21. }
  22.  
  23. #settings-container #account-country-id.form-group.account-country-container {
  24. display: none!important;
  25. }
  26.  
  27. .form-group.save-settings-container {
  28.   margin-top: -50px;
  29. }
  30.  
  31. .setting-section:has(.passkey-upsell-banner), .setting-section:has(.passkey-manage-region) {
  32.   margin-top: -60px;
  33. }
  34.  
  35. #rbx-account-info-header.setting-section > div:not([class]):not(:has(.section-content)) {
  36. height: 210px;
  37. }
  38.  
  39.  
  40.  
  41. .light-theme .setting-section > div:has(.passkey-upsell-banner) {
  42. background-color: transparent!important;
  43. box-shadow: none!important;
  44. }
  45.  
  46. [data-internal-page-name="Settings"] #security .font-caption-header::before when (@ST = 1) {
  47.   font-size: 18px !important;
  48.   content: "Social";
  49.   left: 10px;
  50.   position: relative;
  51. }
  52.  
  53. [data-internal-page-name="Settings"] #security .font-caption-header when (@ST = 1) {
  54.   font-size: 0px !important;
  55. }
  56.  
  57. [data-internal-page-name="Settings"] .content .page-content .rbx-tab-content h2 {
  58. font-size: 24px!important;
  59.   font-weight: 300!important;
  60. }
  61.  
  62. [data-internal-page-name="Settings"] .menu-vertical .menu-option-content when (@RP = 1) {
  63.   width: 200px!important;
  64. }
  65.  
  66. [data-internal-page-name="Settings"] #info .font-caption-header when (@RP = 1) {
  67.   margin-left: -25px;
  68.   position: relative !important;
  69. }
  70.  
  71. [data-internal-page-name="Settings"] #security .font-caption-header when (@RP = 1) {
  72.   margin-left: -25px;
  73.   position: relative !important;
  74. }
  75.  
  76. [data-internal-page-name="Settings"] #privacy .font-caption-header::before when (@RP = 1) {
  77.   margin-left: -20px;
  78.   position: relative !important;
  79. }
  80.  
  81. [data-internal-page-name="Settings"] #billing .font-caption-header::before when (@RP = 1) {
  82.   margin-left: -25px;
  83.   position: relative !important;
  84. }
  85.  
  86. [data-internal-page-name="Settings"] #app-permissions::before when (@RP = 1) {
  87. content: "ROBLOX+";
  88. font-weight: 400;
  89. line-height: 38px;
  90. margin-left: 65px;
  91. font-size: 18px!important;
  92. position: relative !important;
  93. }
  94.  
  95. #billing-react-app-container {
  96. background-color: #fff!important;
  97. height: 150px;
  98. padding: 20px;
  99. box-shadow: 0 1px 3px rgba(0,0,0,0.15)!important;
  100. position: relative;
  101. top: 43px;
  102. margin-bottom: 45px;
  103. }
  104.  
  105. .settings-list-item-container {
  106. background-color: #fff!important;
  107. box-shadow: 0 1px 3px rgba(0,0,0,0.15)!important;
  108. padding-left: 10px;
  109. width: 990px;
  110. }
  111.  
  112. #settings-container .icon-chevron-heavy-right {
  113. transform: rotate(90deg);
  114. margin-right: 10px;
  115. }
  116.  
  117. #settings-container .rbx-divider {
  118. display: none;
  119. }
  120.  
  121. .settings-list-item-container .settings-list-item-info .setting-name {
  122. font-weight: 300!important;
  123. }
  124.  
  125. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width::before {
  126. content: "Upgrading Membership";
  127. font-size: 18px;
  128. line-height: 15px;
  129. }
  130.  
  131. #billing-react-app-container .saved-payment-method-header-container:after {
  132. content: "Cancel Renewal"!important;
  133. transition: box-shadow 200ms ease-in-out;
  134. line-height: 34px;
  135. width: 140px !important;
  136. font-weight: 400;
  137. height: 37px;
  138. font-size: 18px;
  139. background-color: #fff;
  140. border: 1px solid #B8B8B8;
  141. position: absolute;
  142. border-radius: 3px;
  143. color: #191919;
  144. text-align: center;
  145. top: 50px;
  146. left: 820px;
  147. cursor: pointer;
  148. }
  149.  
  150. #billing-react-app-container .saved-payment-method-header-container:before {
  151. content: "Membership status"!important;
  152. font-weight: 400;
  153. font-size: 16px!important;
  154. cursor: text;
  155. }
  156.  
  157. #billing-react-app-container .saved-payment-method-header-container:hover::after {
  158. box-shadow: 0 1px 3px rgba(150,150,150,0.74)!important;
  159. }
  160.  
  161. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width {
  162. font-size: 0px;
  163. }
  164.  
  165. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width {
  166. background-color: #02b757!important;
  167. border: 1px solid #02b757!important;
  168. width: 195px;
  169. height: 36px;
  170. }
  171.  
  172. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width:hover {
  173. background-color: #3FC679!important;
  174. border: 1px solid #3FC679!important;
  175. }
  176.  
  177. #settings-container .saved-payment-method-header-container {
  178. color: #b8b8b8;
  179. }
  180.  
  181. #settings-container .no-payment-methods-text:before {
  182. content: "OutrageousBuilders Club membership";
  183. font-size: 16px!important;
  184. cursor: text;
  185. }
  186.  
  187. #settings-container .no-payment-methods-text {
  188. font-size: 0px!important;
  189. margin-top: 5px!important;
  190. }
  191.  
  192. #settings-container .payment-method-image.cardIcon.robloxCredit:before {
  193. content: "Automatically renew on 12/25/2016."!important;
  194. font-size: 16px!important;
  195. font-weight: 400!important;
  196. color: #02b757;
  197. cursor: text;
  198. }
  199.  
  200. #settings-container .payment-method-image.cardIcon.robloxCredit {
  201. width: 300px;
  202. }
  203.  
  204. #settings-container .saved-payment-method-header-container h5 {
  205. font-weight: 400!important;
  206. font-size: 0px!important;
  207. }
  208.  
  209. #settings-container .other-payment-methods-container h5 {
  210. font-weight: 400!important;
  211. font-size: 0px!important;
  212. }
  213.  
  214. #settings-container .other-payment-methods-container:before {
  215. content: "Renewal date"!important;
  216. font-weight: 400;
  217. font-size: 16px!important;
  218. cursor: text;
  219. }
  220.  
  221.  
  222. #settings-container .other-payment-methods-container {
  223. color: #b8b8b8;
  224. font-weight: 400;
  225. font-size: 16px;
  226. position: relative;
  227. margin-top: -10px;
  228. }
  229.  
  230. #settings-container .roblox-credit-container {
  231. position: relative;
  232. margin-top: -20px;
  233. }
  234.  
  235. #settings-container .other-payment-methods-container when (@NC = 1) {
  236. display: none;
  237. }
  238.  
  239. #billing-react-app-container .saved-payment-method-header-container::after when (@NC = 1) {
  240. display: none;
  241. }
  242. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width::before when (@NC = 1) {
  243.   content: "Join"!important;
  244. }
  245.  
  246. #billing-react-app-container .add-card-button.btn-secondary-md.btn-primary-md.btn-min-width when (@NC = 1) {
  247. width: 60px!important;
  248. min-width: 1px!important;
  249. }
  250.  
  251. #settings-container .no-payment-methods-text::before when (@NC = 1) {
  252.   content: "You're not a nember yet. Join ROBLOX Builders club today!" !important;
  253. }
  254.  
  255. #billing-react-app-container when (@NC = 1) {
  256.   height: 100px!important;
  257. }
  258.  
  259.  
  260. #settings-container .roblox-credit-header.text-emphasis:before {
  261. content: "For billing and payment questions:"!important;
  262. font-weight: 300;
  263. font-size: 16px!important;
  264. color: #191919;
  265. cursor: text;
  266. }
  267.  
  268. #settings-container .roblox-credit-header.text-emphasis {
  269. width: 300px;
  270. display: block!important;
  271. font-size: 0px!important;
  272. position: relative;
  273. top: 10px;
  274. left: -69px!important;
  275. }
  276.  
  277. #settings-container .roblox-credit-balance:before {
  278. content: "info@roblox.com"!important;
  279. font-weight: 300;
  280. font-size: 16px!important;
  281. color: #00abff;
  282. position: relative;
  283. top: -4px;
  284. left: -140px!important;
  285. cursor: pointer;
  286. }
  287.  
  288. #settings-container .balance-prefix  {
  289. font-size: 0px!important;
  290. }
  291.  
  292. #settings-container .d-flex-inline.gap-1.justify-content-start.align-items-center  {
  293. font-size: 0px!important;
  294. }
  295.  
  296. #settings-container .payment-methods-settings-container {
  297. position: relative;
  298. top: -70px;
  299. }
  300.  
  301. #settings-container .payment-method-image {
  302. background: none;
  303. }
  304.  
  305. #billing-react-app-container .main-header::before {
  306. font-size: 24px!important;
  307. padding: 0px!important;
  308. content: "Billing";
  309. position: relative;
  310. top: -48px;
  311. left: -20px;
  312. cursor: text;
  313. }
  314.  
  315. .social-networks-container {
  316. background-color: #fff!important;
  317. box-shadow: 0 1px 3px rgba(0,0,0,0.15)!important;
  318. padding: 15px;
  319. }
  320.  
  321. #billing-react-app-container .main-header {
  322. font-size: 0px!important;
  323. }
  324.  
  325. [data-internal-page-name="Settings"] #billing .font-caption-header::before {
  326. font-size: 18px!important;
  327. content: "Billing";
  328. left: 30px;
  329. position: relative;
  330. }
  331.  
  332. [data-internal-page-name="Settings"] #billing .font-caption-header {
  333. font-size: 0px!important;
  334. }
  335.  
  336. [data-internal-page-name="Settings"] #privacy .font-caption-header::before {
  337. font-size: 18px!important;
  338. content: "Privacy";
  339. left: 20px;
  340. position: relative;
  341. }
  342.  
  343. [data-internal-page-name="Settings"] #privacy .font-caption-header {
  344. font-size: 0px!important;
  345. }
  346.  
  347. [data-internal-page-name="Settings"] #security .font-caption-header {
  348. left: 80px!important;
  349. position: relative!important;
  350. }
  351.  
  352. [data-internal-page-name="Settings"] #info .font-caption-header {
  353. left: 70px!important;
  354. position: relative!important;
  355. }
  356.  
  357. [data-internal-page-name="Settings"] #settings-container .menu-vertical .menu-option .font-caption-header {
  358. height: 22px;
  359. font-size: 18px;
  360. font-weight: 400;
  361. text-align: left!important;
  362. left: 60px;
  363. position: relative;
  364. }
  365.  
  366. [data-internal-page-name="Settings"] .menu-vertical .menu-option:hover {
  367. box-shadow: inset 0 -4px 0 0 #00a2ff!important;
  368. }
  369.  
  370. [data-internal-page-name="Settings"] .menu-option-content:hover {
  371. box-shadow: inset 0 -4px 0 0 #00a2ff!important;
  372. }
  373.  
  374. [data-internal-page-name="Settings"] .menu-option-content:focus {
  375. box-shadow: inset 0 -4px 0 0 #00a2ff!important;
  376. }
  377.  
  378. [data-internal-page-name="Settings"] .menu-vertical .menu-option .menu-option-content.active {
  379. box-shadow: inset 0 -4px 0 0 #00a2ff!important;
  380. }
  381.  
  382. [data-internal-page-name="Settings"] .menu-vertical .menu-option-content {
  383.   display: flex;
  384.   width: 250px;
  385. }
  386.  
  387. [data-internal-page-name="Settings"] .tab-content > .active {
  388. width: 1000px;
  389. left: -12px;
  390. position: relative;
  391. }
  392.  
  393. [data-internal-page-name="Settings"] #react-user-account-base h1::before {
  394.   content: "My ";
  395. cursor: text;
  396. }
  397.  
  398. [data-internal-page-name="Settings"] #subscriptions.menu-option {
  399.   display: none;
  400. }
  401.  
  402. [data-internal-page-name="Settings"] #notifications.menu-option {
  403.   display: none;
  404. }
  405.  
  406. [data-internal-page-name="Settings"] #parental-controls.menu-option {
  407.   display: none;
  408. }
  409.  
  410. [data-internal-page-name="Settings"] #gender-selector.col-xs-12.col-sm-6 {
  411. width: 75%;
  412.   position: relative;
  413. margin-right: 1px;
  414. border-radius: 3px;
  415. gap: 10px;
  416. }
  417.  
  418. [data-internal-page-name="Settings"] .gender-setting .gender-button {
  419.   border-bottom-right-radius: 3px;
  420.   border-top-right-radius: 3px;
  421.   border-top-left-radius: 0px;
  422.   border-bottom-left-radius: 0px;
  423. border-color: #b8b8b8;
  424. }
  425.  
  426. [data-internal-page-name="Settings"] #gender-selector.col-xs-12.col-sm-6:before {
  427. content: "Gender ";
  428. line-height: 36px;
  429. width: 242px !important;
  430. font-weight: 400;
  431. height: 38px;
  432.   background-color: #fff;
  433.   border: 1px solid #b8b8b8;
  434.   padding-left: 20px;
  435.   max-height: 76px;
  436.   position: absolute;
  437.   margin-bottom: 5px;
  438.   left: -241px;
  439.   border-bottom-right-radius: 0px;
  440.   border-top-right-radius: 0px;;
  441.   border-top-left-radius: 3px;
  442.   border-bottom-left-radius: 3px;
  443. color: #b8b8b8;
  444. }
  445.  
  446. [data-internal-page-name="Settings"] #gender-selector.col-xs-12.col-sm-6:after {
  447. content: "";
  448.   border-left: 1px solid #fff !important;
  449.   width: 8px !important;
  450.   height: 38px;
  451.   background-color: #fff;
  452.   border: 1px solid #b8b8b8;
  453.   padding-left: 20px;
  454.   max-height: 76px;
  455.   position: absolute;
  456.   margin-bottom: 5px;
  457.   left: 343px;
  458. }
  459.  
  460. [data-internal-page-name="Settings"] #locale-list.col-xs-12.col-sm-6 {
  461.   left: -484px;
  462.   position: relative;
  463. }
  464.  
  465. [data-internal-page-name="Settings"] #account-country-id.form-group.settings-text-field-container {
  466. display: none;
  467. }
  468.  
  469. [data-internal-page-name="Settings"] #locale-list .icon-down-16x16 {
  470. scale: 1.9;
  471. top: 11px!important;
  472.   right: 16px!important;
  473. }
  474.  
  475. [data-internal-page-name="Settings"] .content {
  476. max-width: 1020px!important;
  477. }
  478.  
  479.  
  480.