diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 8d738e611b..e54129d6ea 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -74,6 +74,7 @@ collaborators: - &ImenaOphelia ImenaOphelia - &koibtw koibtw - &TheAnonymousCrusher TheAnonymousCrusher + - &titandrive titandrive userstyles: advent-of-code: @@ -368,6 +369,13 @@ userstyles: icon: googlephotos color: sapphire current-maintainers: [*GenShibe, *WalkQuackBack] + google-drive: + name: Google Drive + link: https://messages.google.com + categories: [productivity] + icon: googlemessages + color: blue + current-maintainers: [*titandrive] grabify: name: Grabify link: https://grabify.link diff --git a/styles/google-messages/catppuccin.user.less b/styles/google-messages/catppuccin.user.less new file mode 100644 index 0000000000..ef2f8d6a42 --- /dev/null +++ b/styles/google-messages/catppuccin.user.less @@ -0,0 +1,252 @@ +/* ==UserStyle== +@name Google Messages Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-messages +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-messages +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-messages/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-messages +@description Soothing pastel theme for Google Messages +@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("messages.google.com") { + body.material-next-msg { + &:not(.dark-theme) { + #catppuccin(@lightFlavor); + } + &.dark-theme.dark-theme { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --body-bg-color: @base; + --scroll-bar-bg-color: @overlay0; + --button-hover-bg-color: @surface1; + --cdk-overlay-backdrop-bg-color: fade(@crust, 50%); + --dialog-bg-color: @mantle; + --icon-button-color: @subtext0; + --icon-button-disabled-color: @overlay1; + --mat-chip-bg-color: @surface1; + --mat-chip-color: @text; + --mat-menu-bg-color: @mantle; + --mat-menu-bg-color-hover: @surface0; + --mat-menu-color: @text; + --mat-menu-disabled-color: @overlay1; + --mat-snackbar-bg-color: @surface2; + --mat-snackbar-border-color: @surface2; + --mat-snackbar-color: @text; + --mat-snackbar-action-color: @accent; + --mat-snackbar-btn-hover-focus-bg-color: fade(@surface1, 80%); + --mat-slide-toggle-bar-bg-color: fade(@accent, 54%); + --mat-slide-toggle-thumb-bg-color: @accent; + --mat-slide-toggle-disabled-bg-color: fade(@overlay0, 12%); + --mat-app-background-color: @base; + --mat-app-text-color: @text; + --mat-dialog-container-color: @mantle; + --mat-dialog-subhead-color: @text; + --mat-dialog-supporting-text-color: @subtext0; + --mat-menu-container-color: @mantle; + --mat-menu-divider-color: @surface1; + --mat-menu-item-label-text-color: @text; + --mat-menu-item-icon-color: @subtext0; + --mat-menu-item-hover-state-layer-color: fade(@text, 8%); + --mat-menu-item-focus-state-layer-color: fade(@text, 12%); + --mat-list-list-item-label-text-color: @text; + --mat-list-list-item-supporting-text-color: @subtext0; + --mat-list-list-item-leading-icon-color: @subtext0; + --mat-list-list-item-trailing-supporting-text-color: @subtext0; + --mat-list-list-item-trailing-icon-color: @subtext0; + --mat-list-list-item-selected-trailing-icon-color: @accent; + --mat-list-list-item-hover-label-text-color: @text; + --mat-list-list-item-hover-state-layer-color: @text; + --mat-list-list-item-focus-label-text-color: @text; + --mat-list-list-item-focus-state-layer-color: @text; + --mat-select-panel-background-color: @mantle; + --mat-select-enabled-trigger-text-color: @text; + --mat-select-placeholder-text-color: @subtext0; + --mat-select-enabled-arrow-color: @subtext0; + --mat-select-focused-arrow-color: @accent; + --mat-select-invalid-arrow-color: @red; + --mat-option-label-text-color: @text; + --mat-option-selected-state-label-text-color: @accent; + --mat-option-hover-state-layer-color: fade(@text, 8%); + --mat-option-focus-state-layer-color: fade(@text, 12%); + --mat-option-selected-state-layer-color: fade(@accent, 12%); + --mat-tooltip-container-color: @surface2; + --mat-tooltip-supporting-text-color: @text; + --mat-snack-bar-container-color: @surface2; + --mat-snack-bar-supporting-text-color: @text; + --mat-snack-bar-button-color: @accent; + --mat-progress-spinner-active-indicator-color: @accent; + --mat-slider-active-track-color: @accent; + --mat-slider-focus-handle-color: @accent; + --mat-slider-hover-handle-color: @accent; + --mat-slider-handle-color: @accent; + --mat-slider-inactive-track-color: @surface1; + --mat-slider-ripple-color: @accent; + --mat-slide-toggle-selected-handle-color: @accent; + --mat-slide-toggle-selected-track-color: fade(@accent, 60%); + --mat-slide-toggle-label-text-color: @text; + --mat-slide-toggle-handle-surface-color: @base; + --mat-slide-toggle-unselected-handle-color: @overlay1; + --mat-slide-toggle-unselected-track-color: @surface1; + --mat-checkbox-label-text-color: @text; + --mat-checkbox-selected-checkmark-color: @base; + --mat-checkbox-selected-icon-color: @accent; + --mat-checkbox-selected-focus-icon-color: @accent; + --mat-checkbox-selected-hover-icon-color: @accent; + --mat-checkbox-selected-pressed-icon-color: @accent; + --mat-checkbox-unselected-icon-color: @overlay1; + --mat-checkbox-unselected-hover-icon-color: @text; + --mat-checkbox-unselected-focus-icon-color: @text; + --mat-card-elevated-container-color: @mantle; + --mat-card-outlined-container-color: @mantle; + --mat-card-filled-container-color: @mantle; + --mat-card-outlined-outline-color: @surface1; + --mat-card-subtitle-text-color: @subtext0; + --mat-button-filled-container-color: @accent; + --mat-button-filled-label-text-color: @base; + --mat-button-protected-container-color: @surface0; + --mat-button-protected-label-text-color: @text; + --mat-button-outlined-label-text-color: @text; + --mat-button-outlined-outline-color: @surface1; + --mat-button-text-label-text-color: @accent; + --mat-button-tonal-container-color: @surface1; + --mat-button-tonal-label-text-color: @text; + --mat-ripple-color: fade(@accent, 12%); + --mat-icon-button-state-layer-color: @text; + --mat-icon-button-ripple-color: fade(@text, 12%); + --mat-focus-indicator-border-color: @accent; + + input, textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + mws-picker-wrapper { + --box-bg-color: @mantle; + --picker-elevation: 0 0 2px fade(@crust, 30%),0 2px 16px fade(@crust, 60%); + --picker-tab-focus-bg-color: @surface0; + --tab-header-border-color: @surface2; + } + + mws-emoji-picker-page-v2 { + --picker-font-color: @subtext0; + --emoji-picker-diversity-indicator-color: @overlay0; + --emoji-picker-header-box-shadow: 0 2px 6px 0 fade(@crust, 45%); + } + + mws-message-compose-picker-buttons { + --picker-button-fill-color: @subtext0; + --picker-button-selected-fill-color: @text; + } + + mw-nav-drawer { + --nav-drawer-bg-color: @mantle; + --nav-drawer-border-color: @surface0; + --nav-drawer-color: @text; + --nav-drawer-box-shadow: 0 4px 4px 0 fade(@crust, 30%),0 8px 12px 6px fade(@crust, 15%); + } + + mws-message-compose { + --input-bg-color: @surface0; + --input-color: @text; + --input-bg-fade-color: @base; + --input-bg-transparent-fade-color: fade(@base, 0%); + --input-shadow: 0 1px 5px 0 fade(@crust, 15%),0 4px 4px 0 fade(@crust, 10%),0 -0.1px 3px 0 fade(@crust, 8%); + --input-reply-header-container-color: @surface1; + } + + mws-autosize-textarea { + --autosize-textarea-placeholder-disabled-color: @overlay1; + } + + mws-header { + --header-bg-color: fade(@mantle, 96%); + --header-color: @text; + --header-back-button-color: @text; + --header-back-box-shadow: 0 2px 6px 0 fade(@crust, 45%); + } + + mw-branded-header { + --branded-header-bg-color: @mantle; + --branded-header-border-color: @surface0; + } + + mw-fab-link { + --fab-icon-container-bg-color: @accent; + --fab-label-color: @base; + --fab-icon-container-disabled-bg-color: @surface1; + --fab-label-disabled-color: @overlay1; + } + + mw-main-nav { + --main-nav-host-bg-color: @mantle; + --main-nav-host-border-color: @crust; + --main-nav-header-color: @text; + --main-nav-header-menu-color: @subtext0; + --main-nav-header-box-shadow: 0 2px 6px 0 fade(@crust, 45%); + } + + mws-conversation-list-item { + --conv-list-item-checked-avatar-bg-color: @accent; + --conv-list-item-checked-avatar-color: @base; + --conv-list-item-edit-mode-bg-color: fade(@accent, 20%); + --conv-name-color: @text; + --conv-snippet-color: @subtext0; + --list-grey-hover-bg-color: @surface0; + --list-grey-selected-bg-color: @surface1; + --conv-notification-icon-fill: @subtext0; + --conv-list-selected-indicator-bg-color: @accent; + } + + mw-conversation-container { + --conv-container-host-bg-color: @base; + --legacy-compose-readonly-bg-color: @surface0; + --legacy-conversation-readonly-color: @subtext0; + } + + mws-conversations-list { + --conversations-load-more-bg-color: @mantle; + --conversations-load-more-color: @text; + } + + mws-message-part-content { + --incoming-bg-color: @surface0; + --xms-outgoing-bg-color: @lavender; + --xms-outgoing-color: @base; + --rcs-incoming-bg-color: @surface1; + --rcs-outgoing-bg-color: @blue; + --rcs-outgoing-color: @base; + --empty-bg-color: @base; + --replied-to-message-outer--container-color: @base; + --message-reply-header-container-color: @surface0; + } + + mws-messages-list { + --messages-load-more-bg-color: @surface0; + --messages-load-more-color: @text; + --typing-indicator-row-color: @subtext0; + } + + mws-message-send-button { + .container { + --button-active-color: @accent; + --button-inactive-color: @overlay1; + } + } + } +}