diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 6c2850dce8..ac26a45224 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -807,6 +807,12 @@ userstyles: categories: [productivity] color: text current-maintainers: [*thismoon] + roblox: + name: Roblox + link: https://www.roblox.com + categories: [game] + color: blue + current-maintainers: [*markerpliers] searchix: name: Searchix link: https://searchix.ovh diff --git a/styles/roblox/catppuccin.user.less b/styles/roblox/catppuccin.user.less new file mode 100644 index 0000000000..d050b473d8 --- /dev/null +++ b/styles/roblox/catppuccin.user.less @@ -0,0 +1,431 @@ +/* ==UserStyle== +@name Roblox Catppuccin +@namespace github.com/catppuccin/userstyles/styles/roblox +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/roblox +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/roblox/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aroblox +@description Soothing pastel theme for Roblox +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("roblox.com") { + + /* If the website you are theming *does* have a light/dark mode toggle, + you can conditionally enable light/dark flavors by targeting whatever + attribute that website uses to indicate the theme. *The example below gives you an idea of what + to look for. The website you are theming may use a class-based approach (e.g. :root.theme-dark), + or any of the myriad of other methods like this.* + Use the below example CSS to start if this is the case. + For an actual example of this, see https://github.com/catppuccin/userstyles/blob/39288b593278e5efa48007d5fc001292cf910672/styles/youtube/catppuccin.user.css#L21-L30. + */ + .dark-theme { + #catppuccin(@darkFlavor); + } + .light-theme { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + + /* + icons recolor + */ + .icon-default-navigation, + .icon-nav-giftcards, + .icon-nav-my-feed, + .icon-nav-notification-stream, + .icon-nav-shop, + .icon-nav-search-white, + .icon-nav-blog, + .icon-nav-group, + .icon-nav-trade, + .icon-nav-inventory, + .icon-nav-charactercustomizer, + .icon-nav-friends, + .icon-nav-message, + .icon-nav-profile, + .icon-nav-home, + .icon-nav-settings, + .icon-nav-robux, + .icon-nav-menu, + .icon-nav-premium-btr, + .icon-logo, + .icon-logo-r, + .icon-robux-28x28, + .icon-nav-message-btr, + .icon-nav-friend-btr, + .icon-common-notification-bell, + .icon-favorite, + .icon-notifications-bell, + .icon-like, + .icon-dislike, + .icon-chat-group-create, + .icon-chat-close-white, + .icon-chat-info-white, + .shopping-cart-icon, + .see-all-link-icon:visited, + .see-all-link-icon, + .modal-modern .modal-dialog .modal-content .modal-body .modal-protection-shield-icon, + .icon-close, + { + filter: @text-filter + } + + /* + get premium button + */ + .btr-nav-notif, + .rbx-upgrade-now .btn-secondary-md:link, + .btn-secondary-md:hover, + .notification, + .btn-primary-md:hover, + .btn-primary-md { + border-color: @crust; + background: @text + } + + .game-card-info .info-label, + p, + { + color: @subtext0 + } + + /* + gamepage votes + */ + .game-card-info .info-label.icon-votes-gray, + .info-label.icon-playing-counts-gray { + filter: @subtext0-filter + } + .text-name, + .text-name:hover, + .text-name:visited { + color: @subtext1 + } + + /* report buttons */ + .abp .BadAdButton:hover, + .abp .BadAdButton:hover, + .text-alert, + .text-error, + .text-report, + .text-report:link, + { + color: @red + } + + /* all text */ + .text, + .text-default, + .text-secondary, + .text-description, + .text-label, + .text-date-hint, + .text-info, + .text-footer, + .text-nav, + .navbar-search, + .new-input-field, + .rbx-header, + .text-header:hover, + .rbx-left-col li .text-nav:link, + .rbx-left-col li .text-nav:visited, + .text-link:link, + .text-nav:visited.see-all-link, + .see-all-link:link, + .see-all-link:hover, + .see-all-link:visited, + .see-all-link:active, + .refresh-link, + .refresh-link:link, + .refresh-link:hover, + .refresh-link:visited, + .refresh-link:active, + .see-all-link-icon, + .see-all-link-icon:link, + .see-all-link-icon:hover, + .see-all-link-icon:visited, + .see-all-link-icon:active, + .refresh-link-icon, + .refresh-link-icon:link, + .refresh-link-icon:hover, + .refresh-link-icon:visited, + .refresh-link-icon:active, + .touch .see-all-link, + .touch .see-all-link:link, + .touch .see-all-link:hover, + .touch .see-all-link:visited, + .touch .see-all-link:active, + .touch .refresh-link, + .touch .refresh-link:link, + .touch .refresh-link:hover, + .touch .refresh-link:visited, + .touch .refresh-link:active, + .touch .see-all-link-icon, + .touch .see-all-link-icon:link, + .touch .see-all-link-icon:hover, + .touch .see-all-link-icon:visited, + .touch .see-all-link-icon:active, + .touch .refresh-link-icon, + .touch .refresh-link-icon:link, + .touch .refresh-link-icon:hover, + .touch .refresh-link-icon:visited, + .touch .refresh-link-icon:active, + .voting-panel .users-vote .vote-details .vote-container .vote-percentage, + .voting-panel .users-vote .vote-details .vote-numbers .count-left, + .voting-panel .users-vote .vote-details .vote-numbers .count-right, + .chat-windows-header, + .osa-context-card-text-heading, + .text-emphasis, + .rbx-header .text-header, + .rbx-header .text-header, + .rbx-header .text-header:link, + .rbx-header .text-header:active, + .rbx-header .text-header:hover, + .rbx-header .text-header:visited, + .rbx-header .text-header:focus, + .text-lead, + .text-lead:hover, + .game-social-links > .btn-secondary-lg, + .stack .stack-list .stack-row, + .btn-control-md:link, + .btn-control-md, + .btn-control-md:hover, + .content-emphasis, + .footer .text-footer-nav:hover, + .footer .text-footer-nav, + .footer .text-footer-nav, + .dark-theme .footer .text-footer-nav:link, + .menu-vertical .menu-option, + #catalog-react-container .catalog-revamp .filters-modal-container .filter-options-container .filter-option.selected-option, + { + color: @text + } + + .profile-platform-container .profile-tab:hover, + .profile-platform-container .profile-tab, + { + color: @text; + --color-tab-border: @text; + --color-tab: @text; + } + + #btr-blogfeed .btr-feed, + .osa-context-card-text-description { + color: @subtext1 + } + + .dialogs .dialog-container .dialog-message-container .indicated-message-bubble { + color: @overlay1 + } + + .rbx-header .navbar-search .new-dropdown-menu { + background-color: @crust + } + .content, + .css-1kttc8e-textIconRowText[data-sdui-text="true"], + .css-qoph95-textIconRowText[data-sdui-text="true"], + .container-footer, + .rbx-header .navbar-search, + #catalog-react-page .search-bars, + #catalog-react-container .sticky .topic-container, + #catalog-react-container .sticky .catalog-header, + .friend-tile-dropdown, + .rbx-tabs-horizontal, + .section-content-off, + .account-switcher-list .account-selection-list-item .account-selection, + .section-content, + .modal-dialog .modal-content, + .theme-bg, + .horizontal-scroller, + .horizontal-scroller .scroller .spacer, + .container-main + { + color: @text; + background-color: @base + } + .avatar-card-container, + .avatar-card-btns, + .layer, + .rbx-tabs-vertical .category-tabs .menu-vertical, + .stack .stack-list .stack-row, + .account-switcher-list .account-selection-list-item .account-selection .account-switcher-icon-add, + .hover-game-tile.contained-tile .featured-game-container .game-card-link .info-container, + { + color: @text; + background-color: @surface0 + } + .btn-common-play-game-lg, + .btn-common-play-game-lg:focus, + .btn-common-play-game-lg:hover, + .btn-growth-lg, + .btn-growth-lg:hover, + .btn-growth-lg:focus, + .btn-growth-xs, + .btn-growth-xs:focus, + .btn-growth-xs:hover, + { + color: @mantle; + background-color: @@accentColor + } + .btn-growth-md, + .btn-growth-md:focus, + .btn-growth-md:hover, + .btn-growth-md:link, + .btn-growth-sm, + .shopping-cart-btn-container .shopping-cart-btn .shopping-cart-icon-container .cart-number-container { + color: @base; + background-color: @@accentColor + } + .rbx-tab, + .rbx-tabs-horizontal .rbx-tab.active .rbx-tab-heading { + color: @text; + background-color: @surface0; + box-shadow: inset 0 -4px @text + } + .rbx-header, + .rbx-left-col { + background-color: @crust; + border: 0 solid @@accentColor; + } + + .chat-container .chat-main .chat-header, + .dialogs .dialog-container .dialog-header, + .dialogs .dialog-container .dialog-message-container.message-inbound .dialog-message, + .groups-list-sidebar { + background-color: @base; + color: @text + } + .slide-switcher .slide-item-container .slide-item-container-right, + .profile-avatar-right, + .group-wall-deprecation-notice { + background-color: @surface1; + color: @text + } + + + .slide-switcher .slide-item-container .slide-item-container-left, + .profile-avatar-left, + .web-blox-css-mui-16xdy8q, + .stack .card-list .card-item, + .rbx-tab .rbx-tab-heading, + .group-details .group-wall .comment, + .content .add-friends-icon-container::before, + .menu-vertical, + .age-verification-upsell-banner, + .passkey-upsell-banner, + #catalog-react-container .catalog-revamp .filters-modal-container, + #catalog-react-container .catalog-revamp .filters-modal-container .filter-options-container, + { + background-color: @surface0; + color: @text + } + + .input-field, + .dialog-container .dialog-input-container, + .dialogs .dialog-container .dialog-message-container .dialog-message { + background-color: @surface1; + color: @text + } + + .dialogs .dialog-container .dialog-message-container .dialog-message { + border: 1px solid @base + } + + .dialogs .dialog-container .dialog-message-container.message-inbound .dialog-message { + border: 1px solid @crust; + } + + .chat-main, + .dialogs .dialog-container .dialog-body { + background-color: @surface0; + color: @text; + box-shadow: 0 1px 3px @overlay0; + } + + .signup-container .signup-input-area .legal-text-container a { + color: @@accentColor + } + + .btn-cta-md:hover, + .btn-cta-md:link, + .btn-cta-md, + { + color: @base; + background-color: @text; + border-color: @text; + } + .game-card-link .game-card-pills-container .game-card-pill-with-animation, + { + background: #eff1f5; + color: #4c4f69; + } + + .icon-radio-check-circle-filled { + background-color: @text; + border: 6px solid @@accentColor; + } + .refresh-link-icon:after, + .see-all-link-icon:after, + { + filter: @text-filter; + color: @text + } + .scroller.disabled { + background-color: @mantle + } + .icon-games-carousel-left, + .icon-games-carousel-right { + filter: @text-filter + } + + .scroller, + { + background-color: @surface0 + } + .scroller:hover, + .scroller:focus { + background-color: fade(@surface0, 40%) + } + .filters-container .filter-items-container .filter-select.btn-primary-md, + { + background-color: @text; + color: @base; + } + .filters-container .filter-items-container .filter-select.btn-secondary-md, + { + background-color: @surface0; + color: @text; + } + .filters-container .filter-items-container .filters-modal-container, + .filters-container .filter-items-container .filters-modal-container .filter-options-container { + background-color: @surface0; + border: 1px solid @surface2; + color: @subtext0 + } + .filters-container .filter-items-container .filter-select.btn-secondary-md:hover { + background-color: @base + } + .filters-container .filter-items-container .filters-modal-container .action-buttons-container .apply-button, + { + background-color: @@accentColor; + color: @surface0 + } + .filters-container .filter-items-container .filters-modal-container .filter-options-container .filter-option.selected-option, + .filter-items-container .filters-modal-container .header-container, + { + color: @text + } + } +}