+ 
+
+
+ Catppuccin for Google Drive
+
+
+ 
+ 
+
+ 
+
+ Copyright © 2021-present Catppuccin Org +
+ + diff --git a/styles/google-drive/catppuccin.user.css b/styles/google-drive/catppuccin.user.css new file mode 100644 index 0000000000..ddb19563da --- /dev/null +++ b/styles/google-drive/catppuccin.user.css @@ -0,0 +1,612 @@ +/* ==UserStyle== +@name Google Drive Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-drive +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-drive +@description Soothing pastel theme for Google Drive +@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== */ + +@-moz-document domain('drive.google.com') { + :root:has(.KkxPLb) { + .vhoiae.vhoiae.vhoiae, + & { + #catppuccin(@lightFlavor, @accentColor); + } + } + :root:has(.LgGVmb) { + .vhoiae.vhoiae.vhoiae, + & { + #catppuccin(@darkFlavor, @accentColor); + } + } + + #rgbify(@color) { + @rgb-raw: red(@color), green(@color), blue(@color); + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --dt-on-background: @text; + --dt-on-background-secondary: @subtext0; + --dt-background: @base; + --dt-on-surface: @text; + --dt-inverse-surface: @text; + --dt-on-surface-secondary: @subtext0; + --dt-on-surface-variant: @text; + --dt-surface-variant: @surface0; + --dt-inverse-on-surface: @surface0; + --dt-surface: @base; + --dt-surface-tint: @accent-color; + --dt-shadow-elevation-1: 0px 3px 1px -2px fade(@base, 20%), + 0px 2px 2px 0px fade(@base, 14%), 0px 1px 5px 0px fade(@base, 12%); + --dt-shadow-elevation-2: 0px 2px 4px -1px fade(@base, 20%), + 0px 4px 5px 0px fade(@base, 14%), 0px 1px 10px 0px fade(@base, 12%); + --dt-shadow-elevation-3: 0px 5px 5px -3px fade(@base, 20%), + 0px 8px 10px 1px fade(@base, 14%), 0px 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-4: 0px 5px 5px -3px fade(@base, 20%), + 0px 8px 10px 1px fade(@base, 14%), 0px 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-5: 0px 8px 10px -6px fade(@base, 20%), + 0px 16px 24px 2px fade(@base, 14%), 0px 6px 30px 5px fade(@base, 12%); + --dt-surface-container-lowest: @crust; + --dt-surface-container-low: @mantle; + --dt-surface-container: @surface0; + --dt-surface-container-high: @surface1; + --dt-surface-container-highest: @surface2; + --dt-surface-dim: @crust; + --dt-surface-bright: @base; + --dt-on-primary-container: @text; + --dt-primary-container-icon: @text; + --dt-primary-container-link: @text; + --dt-primary: @accent-color; + --dt-primary-action: @accent-color; + --dt-primary-action-stateful: @accent-color; + --dt-primary-outline: @accent-color; + --dt-primary-action-state-layer: @accent-color; + --dt-primary-container: @surface0; + --dt-on-primary: @base; + --dt-primary-icon: @base; + --dt-primary-link: @base; + --dt-on-secondary-container: @text; + --dt-secondary-container-icon: @text; + --dt-secondary-container-link: @text; + --dt-secondary: @accent-color; + --dt-secondary-action: @accent-color; + --dt-secondary-action-stateful: @accent-color; + --dt-secondary-outline: @accent-color; + --dt-secondary-action-state-layer: @accent-color; + --dt-secondary-container: @surface0; + --dt-on-secondary: @base; + --dt-secondary-icon: @base; + --dt-secondary-link: @base; + --dt-on-tertiary-container: @text; + --dt-tertiary-container-icon: @text; + --dt-tertiary-container-link: @text; + --dt-tertiary: @accent-color; + --dt-tertiary-action: @accent-color; + --dt-tertiary-action-stateful: @accent-color; + --dt-tertiary-outline: @accent-color; + --dt-tertiary-action-state-layer: @accent-color; + --dt-tertiary-container: @surface0; + --dt-on-tertiary: @base; + --dt-tertiary-icon: @base; + --dt-tertiary-link: @base; + --dt-on-neutral-container: @text; + --dt-neutral-container-icon: @text; + --dt-neutral-container-link: @text; + --dt-neutral: @surface0; + --dt-neutral-action: @surface0; + --dt-neutral-action-stateful: @surface0; + --dt-neutral-outline: @surface0; + --dt-neutral-action-state-layer: @surface0; + --dt-neutral-container: @surface0; + --dt-on-neutral: @text; + --dt-neutral-icon: @surface0; + --dt-neutral-link: @surface0; + --dt-on-warning-container: @yellow; + --dt-warning-container-icon: @yellow; + --dt-warning-container-link: @yellow; + --dt-warning: @yellow; + --dt-warning-action: @yellow; + --dt-warning-action-stateful: @yellow; + --dt-warning-outline: @yellow; + --dt-warning-action-state-layer: @yellow; + --dt-warning-container: @surface0; + --dt-on-warning: @base; + --dt-warning-icon: @yellow; + --dt-warning-link: @yellow; + --dt-on-error-container: @red; + --dt-error-container-icon: @red; + --dt-error-container-link: @red; + --dt-error: @red; + --dt-error-action: @red; + --dt-error-action-stateful: @red; + --dt-error-outline: @red; + --dt-error-action-state-layer: @surface1; + --dt-error-container: @surface1; + --dt-on-error: @base; + --dt-error-icon: @base; + --dt-error-link: @base; + --dt-mime-type-blue: @blue; + --dt-mime-type-dark-blue: @blue; + --dt-mime-type-green: @green; + --dt-mime-type-grey: @overlay0; + --dt-mime-type-purple: @mauve; + --dt-mime-type-deep-purple: @mauve; + --dt-mime-type-red: @red; + --dt-mime-type-yellow: @yellow; + --dt-disabled: @overlay0; + --dt-on-disabled: @text; + --dt-outline: @overlay0; + --dt-outline-variant: @surface2; + --dt-light-info-banner-button: @text; + --dt-light-neutral-banner-button: @text; + --dt-light-success-banner-button: @green; + --dt-light-warning-banner-button: @yellow; + --dt-light-error-banner-button: @red; + + --gm3-sys-color-background: @base; + --gm3-sys-color-background-rgb: #rgbify(@base) []; + --gm3-sys-color-error: @red; + --gm3-sys-color-error-rgb: #rgbify(@red) []; + --gm3-sys-color-error-container: @surface2; + --gm3-sys-color-error-container-rgb: #rgbify(@surface2) []; + --gm3-sys-color-inverse-on-surface: @surface0; + --gm3-sys-color-inverse-on-surface-rgb: #rgbify(@surface0) []; + --gm3-sys-color-inverse-primary: red; + --gm3-sys-color-inverse-primary-rgb: 255, 0, 0; + --gm3-sys-color-inverse-surface: @text; + --gm3-sys-color-inverse-surface-rgb: #rgbify(@text) []; + --gm3-sys-color-on-background: @text; + --gm3-sys-color-on-background-rgb: #rgbify(@text) []; + --gm3-sys-color-on-error: @base; + --gm3-sys-color-on-error-rgb: #rgbify(@base) []; + --gm3-sys-color-on-error-container: @red; + --gm3-sys-color-on-error-container-rgb: #rgbify(@red) []; + --gm3-sys-color-on-primary: @base; + --gm3-sys-color-on-primary-rgb: #rgbify(@base) []; + --gm3-sys-color-on-primary-container: @text; + --gm3-sys-color-on-primary-container-rgb: #rgbify(@text) []; + --gm3-sys-color-on-primary-fixed: @base; + --gm3-sys-color-on-primary-fixed-rgb: #rgbify(@base); + --gm3-sys-color-on-primary-fixed-variant: @base; + --gm3-sys-color-on-primary-fixed-variant-rgb: #rgbify(@base); + --gm3-sys-color-on-secondary: @base; + --gm3-sys-color-on-secondary-rgb: #rgbify(@base) []; + --gm3-sys-color-on-secondary-container: @text; + --gm3-sys-color-on-secondary-container-rgb: #rgbify(@text) []; + --gm3-sys-color-on-secondary-fixed: @base; + --gm3-sys-color-on-secondary-fixed-rgb: #rgbify(@base) []; + --gm3-sys-color-on-secondary-fixed-variant: @base; + --gm3-sys-color-on-secondary-fixed-variant-rgb: #rgbify(@base) []; + --gm3-sys-color-on-surface: @text; + --gm3-sys-color-on-surface-rgb: #rgbify(@text) []; + --gm3-sys-color-on-surface-variant: @text; + --gm3-sys-color-on-surface-variant-rgb: #rgbify(@text) []; + --gm3-sys-color-on-tertiary: @base; + --gm3-sys-color-on-tertiary-rgb: #rgbify(@base) []; + --gm3-sys-color-on-tertiary-container: @text; + --gm3-sys-color-on-tertiary-container-rgb: #rgbify(@text) []; + --gm3-sys-color-on-tertiary-fixed: @base; + --gm3-sys-color-on-tertiary-fixed-rgb: #rgbify(@base) []; + --gm3-sys-color-on-tertiary-fixed-variant: @base; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: #rgbify(@base) []; + --gm3-sys-color-outline: @overlay0; + --gm3-sys-color-outline-rgb: #rgbify(@overlay0) []; + --gm3-sys-color-outline-variant: @surface2; + --gm3-sys-color-outline-variant-rgb: #rgbify(@surface2) []; + --gm3-sys-color-primary: @accent-color; + --gm3-sys-color-primary-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-primary-container: @surface0; + --gm3-sys-color-primary-container-rgb: #rgbify(@surface0) []; + --gm3-sys-color-primary-fixed: @accent-color; + --gm3-sys-color-primary-fixed-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-primary-fixed-dim: @accent-color; + --gm3-sys-color-primary-fixed-dim-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-secondary: @accent-color; + --gm3-sys-color-secondary-rgb: #rgbify(@accent-color); + --gm3-sys-color-secondary-container: @surface0; + --gm3-sys-color-secondary-container-rgb: #rgbify(@surface0) []; + --gm3-sys-color-secondary-fixed: #c2e7ff; + --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255; + --gm3-sys-color-secondary-fixed-dim: #7fcfff; + --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255; + --gm3-sys-color-surface: @base; + --gm3-sys-color-surface-rgb: #rgbify(@base) []; + --gm3-sys-color-surface-bright: @base; + --gm3-sys-color-surface-bright-rgb: #rgbify(@base) []; + --gm3-sys-color-surface-container: @surface0; + --gm3-sys-color-surface-container-rgb: #rgbify(@surface0) []; + --gm3-sys-color-surface-container-high: @surface1; + --gm3-sys-color-surface-container-high-rgb: #rgbify(@surface1) []; + --gm3-sys-color-surface-container-highest: @surface2; + --gm3-sys-color-surface-container-highest-rgb: #rgbify(@surface2) []; + --gm3-sys-color-surface-container-low: @mantle; + --gm3-sys-color-surface-container-low-rgb: #rgbify(@mantle) []; + --gm3-sys-color-surface-container-lowest: @crust; + --gm3-sys-color-surface-container-lowest-rgb: #rgbify(@crust) []; + --gm3-sys-color-surface-dim: @crust; + --gm3-sys-color-surface-dim-rgb: #rgbify(@crust) []; + --gm3-sys-color-surface-tint: @accent-color; + --gm3-sys-color-surface-tint-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-surface-variant: @surface0; + --gm3-sys-color-surface-variant-rgb: #rgbify(@surface0) []; + --gm3-sys-color-tertiary: @accent-color; + --gm3-sys-color-tertiary-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-tertiary-container: @surface0; + --gm3-sys-color-tertiary-container-rgb: #rgbify(@surface0); + --gm3-sys-color-tertiary-fixed: @accent-color; + --gm3-sys-color-tertiary-fixed-rgb: #rgbify(@accent-color) []; + --gm3-sys-color-tertiary-fixed-dim: @accent-color; + --gm3-sys-color-tertiary-fixed-dim-rgb: #rgbify(@accent-color) []; + + & when (@lookup = latte) { + --dt-scrim: fade(@text, 50%); + --dt-scrim-2x: fade(@text, 50%); + --gm3-sys-color-scrim: @text; + --gm3-sys-color-scrim-rgb: #rgbify(@text) []; + --gm3-sys-color-shadow: @text; + --gm3-sys-color-shadow-rgb: #rgbify(@text) []; + } + + & when not (@lookup = latte) { + --dt-scrim: fade(@base, 50%); + --dt-scrim-2x: fade(@base, 50%); + --gm3-sys-color-scrim: @base; + --gm3-sys-color-scrim-rgb: #rgbify(@base) []; + --gm3-sys-color-shadow: @base; + --gm3-sys-color-shadow-rgb: #rgbify(@base) []; + } + + /* Settings menu title & back button */ + .gb_Pc svg, + .gb_Uc.gb_Zc svg, + .gb_Pc .gb_gd .gb_od, + .gb_Pc .gb_gd .gb_Oc, + .gb_Pc .gb_gd .gb_id, + .gb_Uc.gb_Zc .gb_od { + color: @text !important; + } + + /* Settings menu Storage total used icon */ + .VBJTHe svg path { + fill: @text; + } + + /* Drive sync checkbox disabled */ + .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, + .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Eg-Qu-db ~ .VfPpkd-ga { + color: @subtext0 !important; + } + + /* Quota hover box-shadow */ + .KnDsIf:hover, + .KnDsIf:focus, + .al9hA { + box-shadow: 0 2px 6px @overlay0; + } + + /* Quota Google Drive */ + .kJzqSb { + color: @blue; + } + + /* Quota Google Photos */ + .L1pqQb { + color: @yellow; + } + + /* Quota Gmail */ + .au0LDe { + color: @red; + } + + /* Google Account outline */ + .gb_Ea.gb_i { + border-color: @overlay0; + } + .gb_Ea.gb_i:focus, + .gb_Ea.gb_i:hover { + border-color: @subtext0; + } + + /* File preview (separate tab) background */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { + background-color: @base; + } + .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) top bar */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd, + .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */ { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) bottom bar */ + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb, .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb, + .a-b-vo .a-b-La-yc-L, .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ { + background-color: fade(@base, 85%); + color: @text !important; + /* File preview (separate tab) page input */ + .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf, + .a-b-La-su-vb /* File preview (in Drive) page input */ { + background-color: fade(@base, 50%); + color: @text; + } + } + + /* File preview (separate tab) share button */ + &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe, &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe, + .a-b-uoC0bf .ae-uoC0bf .g-d, .a-b-uoC0bf .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ { + background-color: @accent-color; + color: @base; + /* File preview (separate tab) share icon */ + .IyROMc-euCgFf-LJSvSb, + .ae-c /* File preview (in Drive) share icon */ { + & when (@lookup = latte) { + filter: brightness(0) invert(97%) sepia(4%) saturate(152%) + hue-rotate(183deg) brightness(94%) contrast(106%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(15%) sepia(8%) saturate(2252%) + hue-rotate(192deg) brightness(98%) contrast(85%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(13%) sepia(26%) saturate(823%) + hue-rotate(195deg) brightness(90%) contrast(92%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(10%) sepia(36%) saturate(650%) + hue-rotate(201deg) brightness(90%) contrast(93%); + } + } + /* File preview (separate tab) share triangle */ + .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd, + .h-R-w-d-Re /* File preview (in Drive) share triangle */ { + border-color: @base transparent !important; + } + } + /* File preview (separate tab) share Quick options */ + .zAYgkb-NhlrFc-xl07Ob-BvBYQ, + .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { + background-color: @base; + * { + color: @text !important; + } + /* File preview (in Drive) share Quick options current share level container */ + .h-v-x { + opacity: 100%; + } + /* File preview (separate tab) share Quick options divider */ + .zAYgkb-NhlrFc-gqMrKb, + .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ { + border-color: @overlay0; + } + /* File preview (separate tab) share Quick options row hover */ + .VIpgJd-j7LFlb-sn54Q, + .h-v-pc /* File preview (in Drive) share Quick options row hover */ { + background-color: @surface0; + } + /* File preview (separate tab) share Quick options row icon */ + .IyROMc-euCgFf-LJSvSb, + .ba-ea-i /* File preview (in Drive) share Quick options row icon */ { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + /* File preview (separate tab) Print, Download, 3 dots */ + .ndfHFb-c4YZDc-Bz112c:not([style]), + .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"], + .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"], + .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c /* File preview (separate tab) Save to drive */, + .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c /* File preview (separate tab) Save to drive (clicked) */, + /* File preview (in Drive) Print, Download, 3 dots */ + .a-b-c:not([style]), + .a-b-c[style*="googlematerialicons"], + .a-b-c[style="user-select: none;"], + .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */, + .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + /* File preview (separate tab) File title */ + .ndfHFb-c4YZDc-Wrql6b-V1ur5d, + .a-b-cg-Zf /* File preview (in Drive) File title */ { + color: @text; + } + /* File preview (separate tab) 3 dots menu item hover */ + .ndfHFb-c4YZDc-j7LFlb:hover, + .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ { + background-color: @surface0; + } + /* File preview (separate tab) No preview available */ + .ndfHFb-c4YZDc-EglORb-haAclf, + .a-b-Tb-j /* File preview (in Drive) No preview available */ { + background-color: @surface0; + color: @text; + /* File preview (separate tab) No preview available Download */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe, + .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ { + background-color: @surface1; + color: @text; + text-shadow: none; + border-color: transparent; + &:hover { + background-color: @surface2; + background-image: none; + } + } + /* File preview (separate tab) No preview available Download icon */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c, + .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */ { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + + /* Drive sharing window material icon */ + .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { + color: @accent-color; + } + + /* Drive sharing window access hover */ + .lfDNBb:hover, .lfDNBb:focus-within, + .ZelW3e:hover .FYhd9e, .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { + background-color: @surface0; + } + + /* Drive sharing iframe */ + .lb-k-x { + color-scheme: unset; + } + [role="tooltip"], + .Kk7lMc-Ca /* Drive applications sidebar tooltip */ { + background-color: @surface2; + *, + & { + color: @text !important; + } + border-color: transparent; + /* File preview (separate tab) tooltip arrow */ + .tk3N6e-suEOdc-jQ8oHc, + .tk3N6e-suEOdc-ez0xG { + border-color: @surface2 transparent !important; + } + } + + /* Drive applications sidebar close button */ + .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j { + background-color: @surface0; + path:nth-child(1) { + stroke: @text; + } + } + /* Drive applications sidebar get addons */ + .Yb-Il-d#qJTzr .Yb-Il-d-c-j { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + /* Drive applications sidebar close button white background */ + .Yb-Il-d-c-Nd { + background-color: transparent; + } + } +} + +/* prettier-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} + +// vim:ft=less diff --git a/styles/google-drive/preview.webp b/styles/google-drive/preview.webp new file mode 100644 index 0000000000..098fa96b19 --- /dev/null +++ b/styles/google-drive/preview.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1b1e95702d47cba48511ad9e1a861586fa53b29ad32c203347f9b1b955fd5953 +size 176172 diff --git a/styles/google/catppuccin.user.css b/styles/google/catppuccin.user.css index 898ff7faeb..be1821c94e 100644 --- a/styles/google/catppuccin.user.css +++ b/styles/google/catppuccin.user.css @@ -2,7 +2,7 @@ @name Google Catppuccin @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google -@version 0.2.2 +@version 0.2.3 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle @description Soothing pastel theme for Google @@ -57,6 +57,9 @@ @accent-color: @catppuccin[@@lookup][@@accent]; color-scheme: if(@lookup = latte, light, dark); + iframe { + color-scheme: none !important; + } ::selection { background-color: fade(@accent-color, 30%); @@ -1852,6 +1855,16 @@ @-moz-document regexp("^https?://(ogs\\.)?google\\..*") { + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavor, @accentColor); + } + } #catppuccin(@lookup, @accent) { @flamingo: @catppuccin[@@lookup][@flamingo]; @pink: @catppuccin[@@lookup][@pink]; diff --git a/styles/migadu-webmail/catppuccin.user.css b/styles/migadu-webmail/catppuccin.user.css index 11f830627e..bfc0ec7807 100644 --- a/styles/migadu-webmail/catppuccin.user.css +++ b/styles/migadu-webmail/catppuccin.user.css @@ -2,7 +2,7 @@ @name Migadu Webmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/migadu-webmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail -@version 0.0.8 +@version 0.0.9 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail @description Soothing pastel theme for Migadu Webmail @@ -475,6 +475,12 @@ color: @surface0; } } + + /* Untheme message content */ + div:has(> .mail-body) { + color: #333; + background-color: #fff; + } } } diff --git a/styles/whatsapp-web/catppuccin.user.css b/styles/whatsapp-web/catppuccin.user.css index 83098ed430..a20b0bd5e5 100644 --- a/styles/whatsapp-web/catppuccin.user.css +++ b/styles/whatsapp-web/catppuccin.user.css @@ -2,7 +2,7 @@ @name WhatsApp Web Catppuccin @namespace github.com/catppuccin/userstyles/styles/whatsapp-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web -@version 0.0.8 +@version 0.0.9 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awhatsapp-web @description Soothing pastel theme for WhatsApp Web @@ -95,8 +95,20 @@ --app-background: @base !important; /* CHAT LIST */ - /* nav bar */ + /* nav bar background */ --navbar-background: @mantle !important; + /* filters container background */ + --filters-container-background: @base !important; + /* filters item background */ + --filters-item-background: @surface0 !important; + /* filters item color */ + --filters-item-color: @subtext0 !important; + /* filters item background hover */ + --filters-item-background-hover: @surface1 !important; + /* filters item active background */ + --filters-item-active-background: fadeout(@accent-color, 70%) !important; + /* filters item active color */ + --filters-item-active-color: @accent-color !important; /* chat list background */ --background-default: @base !important; /* chat list header */ diff --git a/styles/wikipedia/catppuccin.user.css b/styles/wikipedia/catppuccin.user.css index 0d12fd1a02..055e0ac49e 100644 --- a/styles/wikipedia/catppuccin.user.css +++ b/styles/wikipedia/catppuccin.user.css @@ -2,7 +2,7 @@ @name Wikipedia Catppuccin @namespace github.com/catppuccin/userstyles/styles/wikipedia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia -@version 0.0.16 +@version 0.0.17 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia @description Soothing pastel theme for Wikipedia @@ -181,6 +181,10 @@ } /* maths */ + .equation-box, + .equation-box * { + background: none !important; + } img.mwe-math-fallback-image-display, img.mwe-math-fallback-image-inline { & when (@lookup = latte) { @@ -256,12 +260,6 @@ border-bottom-color: @surface2; } - .wikitable { - background-color: @surface0; - color: @text; - border-color: @surface2 !important; - } - .oo-ui-textInputWidget, .oo-ui-inputWidget-input { color: @text !important; @@ -451,8 +449,20 @@ background-color: @blue !important; } + .wikitable { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + .wikitable > * > tr > th { - background-color: @surface1; + background-color: @surface1 !important; + } + + .wikitable > * > tr > td, + .wikitable > * > tr > th { + background-color: @surface0 !important; + color: @text !important; border-color: @surface2; } @@ -464,10 +474,6 @@ color: @subtext0; } - .wikitable > * > tr > td { - border-color: @surface2; - } - .navbox-abovebelow { background-color: @overlay2 !important; border-color: @overlay2 !important; @@ -685,13 +691,6 @@ color: @text !important; } - .wikitable > * > tr > td, - .wikitable > * > tr > th { - background-color: @surface0; - color: @text; - border-color: @surface2; - } - td[style*="background-color"], td[style*="background-color"] * { color: @crust !important;