diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less index dedab12ae4..ef1620a643 100644 --- a/styles/google-drive/catppuccin.user.less +++ b/styles/google-drive/catppuccin.user.less @@ -17,13 +17,24 @@ @import "https://userstyles.catppuccin.com/lib/lib.less"; +// @import "https://userstyles.catppuccin.com/lib/m3.less"; +@import "https://github.com/catppuccin/userstyles/raw/refs/heads/feat/m3-lib/lib/m3.less"; + @-moz-document domain("drive.google.com") { .vhoiae { &.KkxPLb { #catppuccin(@lightFlavor); } - &.LgGVmb, .yYWAMb.bvmRsc, .dif24c.bvmRsc { + &.LgGVmb, + .yYWAMb.bvmRsc, + .dif24c.bvmRsc, + // Video player (Google Vids and video files) + .fP5mL, + // File preview tooltip (in Drive) + .a-b-g-Ca.g-Ca, + // File preview tooltip (new tab) + .ndfHFb-c4YZDc-tk3N6e-suEOdc.tk3N6e-suEOdc { #catppuccin(@darkFlavor); } } @@ -34,6 +45,10 @@ // TODO: Try to make use `#lib.defaults()` here, but it causes issues with the color scheme (see below). // #lib.defaults(); // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues). + #__m3.base(); + #__m3.with-prefix(gm3-sys-color-); + #__m3.with-prefix(dt-); + ::selection { background-color: fade(@accent, 30%); } @@ -45,243 +60,135 @@ } } - --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; - --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; - --dt-primary-action: @accent; - --dt-primary-action-stateful: @accent; - --dt-primary-outline: @accent; - --dt-primary-action-state-layer: @accent; - --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; - --dt-secondary-action: @accent; - --dt-secondary-action-stateful: @accent; - --dt-secondary-outline: @accent; - --dt-secondary-action-state-layer: @accent; - --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; - --dt-tertiary-action: @accent; - --dt-tertiary-action-stateful: @accent; - --dt-tertiary-outline: @accent; - --dt-tertiary-action-state-layer: @accent; - --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: @text; - --dt-neutral-action-stateful: @text; - --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-on-background-secondary: var(--dt-on-surface-variant); + --dt-on-surface-secondary: var(--dt-on-surface-variant); + --dt-shadow-elevation-1: 0px 3px 1px -2px rgba(var(--dt-shadow-rgb),0.2),0px 2px 2px 0px rgba(var(--dt-shadow-rgb),0.14),0px 1px 5px 0px rgba(var(--dt-shadow-rgb),0.12); + --dt-shadow-elevation-2: 0px 2px 4px -1px rgba(var(--dt-shadow-rgb),0.2),0px 4px 5px 0px rgba(var(--dt-shadow-rgb),0.14),0px 1px 10px 0px rgba(var(--dt-shadow-rgb),0.12); + --dt-shadow-elevation-3: 0px 5px 5px -3px rgba(var(--dt-shadow-rgb),0.2),0px 8px 10px 1px rgba(var(--dt-shadow-rgb),0.14),0px 3px 14px 2px rgba(var(--dt-shadow-rgb),0.12); + --dt-shadow-elevation-4: 0px 5px 5px -3px rgba(var(--dt-shadow-rgb),0.2),0px 8px 10px 1px rgba(var(--dt-shadow-rgb),0.14),0px 3px 14px 2px rgba(var(--dt-shadow-rgb),0.12); + --dt-shadow-elevation-5: 0px 8px 10px -6px rgba(var(--dt-shadow-rgb),0.2),0px 16px 24px 2px rgba(var(--dt-shadow-rgb),0.14),0px 6px 30px 5px rgba(var(--dt-shadow-rgb),0.12); + --dt-scrim: rgba(var(--dt-scrim-rgb),0.32); + --dt-scrim-2x: rgba(var(--dt-scrim-rgb),0.64); + --dt-primary-container-icon: var(--dt-on-primary-container); + --dt-primary-container-link: var(--dt-on-primary-container); + --dt-primary-action: var(--dt-primary); + --dt-primary-action-stateful: var(--dt-primary); + --dt-primary-outline: var(--dt-primary); + --dt-primary-action-state-layer: var(--dt-primary); + --dt-primary-icon: var(--dt-on-primary); + --dt-primary-link: var(--dt-on-primary); + --dt-secondary-container-icon: var(--dt-on-secondary-container); + --dt-secondary-container-link: var(--dt-on-secondary-container); + --dt-secondary-action: var(--dt-secondary); + --dt-secondary-action-stateful: var(--dt-secondary); + --dt-secondary-outline: var(--dt-secondary); + --dt-secondary-action-state-layer: var(--dt-secondary); + --dt-secondary-icon: var(--dt-on-secondary); + --dt-secondary-link: var(--dt-on-secondary); + --dt-tertiary-container-icon: var(--dt-on-tertiary-container); + --dt-tertiary-container-link: var(--dt-on-tertiary-container); + --dt-tertiary-action: var(--dt-tertiary); + --dt-tertiary-action-stateful: var(--dt-tertiary); + --dt-tertiary-outline: var(--dt-tertiary); + --dt-tertiary-action-state-layer: var(--dt-tertiary); + --dt-tertiary-icon: var(--dt-on-tertiary); + --dt-tertiary-link: var(--dt-on-tertiary); + --dt-on-neutral-container: var(--dt-on-surface); + --dt-neutral-container-icon: var(--dt-on-neutral-container); + --dt-neutral-container-link: var(--dt-on-neutral-container); + --dt-neutral: var(--dt-on-surface-variant); + --dt-neutral-action: var(--dt-neutral); + --dt-neutral-action-stateful: var(--dt-neutral); + --dt-neutral-outline: var(--dt-neutral); + --dt-neutral-action-state-layer: var(--dt-neutral); + --dt-neutral-container: var(--dt-surface-variant); + --dt-on-neutral: var(--dt-inverse-on-surface); + --dt-neutral-icon: var(--dt-neutral); + --dt-neutral-link: var(--dt-neutral); + --dt-on-warning-container: lighten(@yellow, @m3-emphasize); + --dt-warning-container-icon: var(--dt-on-warning-container); + --dt-warning-container-link: var(--dt-on-warning-container); --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-warning-action: var(--dt-warning); + --dt-warning-action-stateful: var(--dt-warning); + --dt-warning-outline: var(--dt-on-warning-container); + --dt-warning-action-state-layer: var(--dt-warning); + --dt-warning-container: mix(@yellow, @base, @m3-tint); --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-warning-icon: var(--dt-on-warning); + --dt-warning-link: var(--dt-on-warning); + --dt-error-container-icon: var(--dt-on-error-container); + --dt-error-container-link: var(--dt-on-error-container); + --dt-error-action: var(--dt-error); + --dt-error-action-stateful: var(--dt-error); + --dt-error-outline: var(--dt-error); + --dt-error-action-state-layer: var(--dt-error); + --dt-error-icon: var(--dt-on-error); + --dt-error-link: var(--dt-on-error); + --dt-mime-type-blue: @blue; - --dt-mime-type-dark-blue: @blue; + --dt-mime-type-dark-blue: darken(@blue, @m3-deemphasize); --dt-mime-type-green: @green; --dt-mime-type-grey: @overlay0; --dt-mime-type-purple: @mauve; - --dt-mime-type-deep-purple: @mauve; + --dt-mime-type-deep-purple: darken(@mauve, @m3-deemphasize); --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-info-banner-button: @accent; --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: #lib.rgbify(@base)[]; - --gm3-sys-color-error: @red; - --gm3-sys-color-error-rgb: #lib.rgbify(@red)[]; - --gm3-sys-color-error-container: @surface2; - --gm3-sys-color-error-container-rgb: #lib.rgbify(@surface2)[]; - --gm3-sys-color-inverse-on-surface: @surface0; - --gm3-sys-color-inverse-on-surface-rgb: #lib.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: #lib.rgbify(@text)[]; - --gm3-sys-color-on-background: @text; - --gm3-sys-color-on-background-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-error: @base; - --gm3-sys-color-on-error-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-error-container: @red; - --gm3-sys-color-on-error-container-rgb: #lib.rgbify(@red)[]; - --gm3-sys-color-on-primary: @base; - --gm3-sys-color-on-primary-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-primary-container: @text; - --gm3-sys-color-on-primary-container-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-primary-fixed: @base; - --gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify(@base); - --gm3-sys-color-on-primary-fixed-variant: @base; - --gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify(@base); - --gm3-sys-color-on-secondary: @base; - --gm3-sys-color-on-secondary-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-secondary-container: @text; - --gm3-sys-color-on-secondary-container-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-secondary-fixed: @base; - --gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-secondary-fixed-variant: @base; - --gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-surface: @text; - --gm3-sys-color-on-surface-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-surface-variant: @text; - --gm3-sys-color-on-surface-variant-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-tertiary: @base; - --gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-tertiary-container: @text; - --gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-on-tertiary-fixed: @base; - --gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-on-tertiary-fixed-variant: @base; - --gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-outline: @overlay0; - --gm3-sys-color-outline-rgb: #lib.rgbify(@overlay0)[]; - --gm3-sys-color-outline-variant: @surface2; - --gm3-sys-color-outline-variant-rgb: #lib.rgbify(@surface2)[]; - --gm3-sys-color-primary: @accent; - --gm3-sys-color-primary-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-primary-container: @surface0; - --gm3-sys-color-primary-container-rgb: #lib.rgbify(@surface0)[]; - --gm3-sys-color-primary-fixed: @accent; - --gm3-sys-color-primary-fixed-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-primary-fixed-dim: @accent; - --gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-secondary: @accent; - --gm3-sys-color-secondary-rgb: #lib.rgbify(@accent); - --gm3-sys-color-secondary-container: @surface0; - --gm3-sys-color-secondary-container-rgb: #lib.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: #lib.rgbify(@base)[]; - --gm3-sys-color-surface-bright: @base; - --gm3-sys-color-surface-bright-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-surface-container: @surface0; - --gm3-sys-color-surface-container-rgb: #lib.rgbify(@surface0)[]; - --gm3-sys-color-surface-container-high: @surface1; - --gm3-sys-color-surface-container-high-rgb: #lib.rgbify(@surface1)[]; - --gm3-sys-color-surface-container-highest: @surface2; - --gm3-sys-color-surface-container-highest-rgb: #lib.rgbify(@surface2)[]; - --gm3-sys-color-surface-container-low: @mantle; - --gm3-sys-color-surface-container-low-rgb: #lib.rgbify(@mantle)[]; - --gm3-sys-color-surface-container-lowest: @crust; - --gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify(@crust)[]; - --gm3-sys-color-surface-dim: @crust; - --gm3-sys-color-surface-dim-rgb: #lib.rgbify(@crust)[]; - --gm3-sys-color-surface-tint: @accent; - --gm3-sys-color-surface-tint-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-surface-variant: @surface0; - --gm3-sys-color-surface-variant-rgb: #lib.rgbify(@surface0)[]; - --gm3-sys-color-tertiary: @accent; - --gm3-sys-color-tertiary-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-tertiary-container: @surface0; - --gm3-sys-color-tertiary-container-rgb: #lib.rgbify(@surface0); - --gm3-sys-color-tertiary-fixed: @accent; - --gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify(@accent)[]; - --gm3-sys-color-tertiary-fixed-dim: @accent; - --gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify(@accent)[]; - - & when (@flavor = latte) { - --dt-scrim: fade(@text, 50%); - --dt-scrim-2x: fade(@text, 50%); - --gm3-sys-color-scrim: @text; - --gm3-sys-color-scrim-rgb: #lib.rgbify(@text)[]; - --gm3-sys-color-shadow: @text; - --gm3-sys-color-shadow-rgb: #lib.rgbify(@text)[]; - } - - & when not(@flavor = latte) { - --dt-scrim: fade(@base, 50%); - --dt-scrim-2x: fade(@base, 50%); - --gm3-sys-color-scrim: @base; - --gm3-sys-color-scrim-rgb: #lib.rgbify(@base)[]; - --gm3-sys-color-shadow: @base; - --gm3-sys-color-shadow-rgb: #lib.rgbify(@base)[]; - } - - /* Settings menu title & back button */ + --dt-blue-fill: @blue; + --dt-blue-outline: mix(@blue, @base, @m3-tint); + --dt-blue-tonal: mix(@blue, @base, @m3-tint); + --dt-gray-fill: @overlay0; + --dt-gray-outline: mix(@overlay0, @base, @m3-tint); + --dt-gray-tonal: mix(@overlay0, @base, @m3-tint); + --dt-green-fill: @green; + --dt-green-outline: mix(@green, @base, @m3-tint); + --dt-green-tonal: mix(@green, @base, @m3-tint); + --dt-orange-fill: @peach; + --dt-orange-outline: mix(@peach, @base, @m3-tint); + --dt-orange-tonal: mix(@peach, @base, @m3-tint); + --dt-purple-fill: @mauve; + --dt-purple-outline: mix(@mauve, @base, @m3-tint); + --dt-purple-tonal: mix(@mauve, @base, @m3-tint); + --dt-red-fill: @red; + --dt-red-outline: mix(@red, @base, @m3-tint); + --dt-red-tonal: mix(@red, @base, @m3-tint); + --dt-yellow-fill: @yellow; + --dt-yellow-outline: mix(@yellow, @base, @m3-tint); + --dt-yellow-tonal: mix(@yellow, @base, @m3-tint); + + --dt-on-blue-fill: @base; + --dt-on-blue-outline: @blue; + --dt-on-blue-tonal: @blue; + --dt-on-gray-fill: @base; + --dt-on-gray-outline: @overlay0; + --dt-on-gray-tonal: @overlay0; + --dt-on-green-fill: @base; + --dt-on-green-outline: @green; + --dt-on-green-tonal: @green; + --dt-on-orange-fill: @base; + --dt-on-orange-outline: @peach; + --dt-on-orange-tonal: @peach; + --dt-on-purple-fill: @base; + --dt-on-purple-outline: @mauve; + --dt-on-purple-tonal: @mauve; + --dt-on-red-fill: @base; + --dt-on-red-outline: @red; + --dt-on-red-tonal: @red; + --dt-on-yellow-fill: @base; + --dt-on-yellow-outline: @yellow; + --dt-on-yellow-tonal: @yellow; + + // Settings menu title & back button .gb_Pc svg, .gb_Uc.gb_Zc svg, .gb_Pc .gb_gd .gb_od, @@ -291,12 +198,12 @@ color: @text !important; } - /* Settings menu Storage total used icon */ + // Settings menu Storage total used icon .VBJTHe svg path { fill: @text; } - /* Drive sync checkbox disabled */ + // Drive sync checkbox disabled .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, @@ -304,29 +211,29 @@ color: @subtext0 !important; } - /* Quota hover box-shadow */ + // Quota hover box-shadow .KnDsIf:hover, .KnDsIf:focus, .al9hA { box-shadow: 0 2px 6px @overlay0; } - /* Quota Google Drive */ + // Quota Google Drive .kJzqSb { color: @blue; } - /* Quota Google Photos */ + // Quota Google Photos .L1pqQb { color: @yellow; } - /* Quota Gmail */ + // Quota Gmail .au0LDe { color: @red; } - /* Google Account outline */ + // Google Account outline .gb_Ea.gb_i { border-color: @overlay0; background-color: @surface0; @@ -336,202 +243,157 @@ border-color: @subtext0; } - /* File preview (separate tab) background */ - &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { - background-color: @base; + // File preview (separate tab) background + &[itemscope] .vhoiae:first-child { + background-color: var(--dt-surface-container-low); } - .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { - background-color: fade(@base, 85%); + // File preview (in Drive) background + > .vhoiae[role="dialog"] { + background-color: rgba(var(--dt-surface-container-low-rgb), 0.85); } - /* File preview (separate tab) top bar */ + // 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 */ + // File preview (in Drive) top bar + .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd { - background-color: fade(@base, 85%); + background-color: rgba(var(--dt-surface-container-low-rgb), 0.85); } - /* File preview (separate tab) bottom bar */ + // 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%); + // File preview (in Drive) bottom bar + .a-b-vo .a-b-Kb-ac-L { + background-color: rgba(var(--dt-surface-container-low-rgb), 0.85); color: @text !important; - /* File preview (separate tab) page input */ + // 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%); + // File preview (in Drive) page input + .a-b-La-su-vb { + background-color: rgba(var(--dt-surface-container-low-rgb), 0.50); color: @text; } } - /* File preview (separate tab) share button */ + // 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: @base; - /* File preview (separate tab) share icon */ + // File preview (in Drive) share button */ + .ae-mAKE4e-Hc-w-d.h-R-w-d { + background-color: var(--dt-secondary-container); + // Should be --dt-on-secondary-container, but doesn't work with filter + color: @accent; + // File preview (separate tab) share icon .IyROMc-euCgFf-LJSvSb, - .ae-c /* File preview (in Drive) share icon */ { - & when (@flavor = latte) { - filter: brightness(0) invert(97%) sepia(4%) saturate(152%) hue-rotate( - 183deg - ) brightness(94%) contrast(106%); - } - & when (@flavor = frappe) { - filter: brightness(0) invert(15%) sepia(8%) saturate(2252%) - hue-rotate(192deg) brightness(98%) contrast(85%); - } - & when (@flavor = macchiato) { - filter: brightness(0) invert(13%) sepia(26%) saturate(823%) - hue-rotate(195deg) brightness(90%) contrast(92%); - } - & when (@flavor = mocha) { - filter: brightness(0) invert(10%) sepia(36%) saturate(650%) - hue-rotate(201deg) brightness(90%) contrast(93%); - } + // File preview (in Drive) share icon + .ae-c { + filter: @accent-filter; } - /* File preview (separate tab) share triangle */ + // 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 (in Drive) share triangle + .h-R-w-d-Re { + border-color: @accent transparent !important; } } - /* File preview (separate tab) share Quick options */ + // File preview (separate tab) share Quick options .zAYgkb-NhlrFc-xl07Ob-BvBYQ, - .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { + // File preview (in Drive) share Quick options + .h-w.ae-NhlrFc-w { background-color: @base; * { color: @text !important; } - /* File preview (in Drive) share Quick options current share level container */ + // File preview (in Drive) share Quick options current share level container .h-v-x { opacity: 100%; } - /* File preview (separate tab) share Quick options divider */ + // 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 (in Drive) share Quick options divider + .ae-NhlrFc-Yo { + border-color: var(--dt-outline); } - /* File preview (separate tab) share Quick options row hover */ + // 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 (in Drive) share Quick options row hover + .h-v-pc { + background-color: rgba(var(--dt-on-surface-rgb), 0.08); } - /* File preview (separate tab) share Quick options row icon */ + // 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 (@flavor = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@flavor = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@flavor = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@flavor = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } + // File preview (in Drive) share Quick options row icon + .ba-ea-i { + filter: @text-filter; } } - /* File preview (separate tab) Print, Download, 3 dots */ + // 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 */ + // 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 (@flavor = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( - 196deg - ) brightness(90%) contrast(86%); - } - & when (@flavor = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( - 192deg - ) brightness(104%) contrast(92%); - } - & when (@flavor = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( - 193deg - ) brightness(99%) contrast(94%); - } - & when (@flavor = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( - 192deg - ) brightness(98%) contrast(95%); - } + // File preview (in Drive) Save to drive + .a-b-K-zc-Eb-bg-a-c, + // File preview (in Drive) Save to drive (clicked) + .a-b-K-X-c { + filter: @text-filter; } - /* File preview (separate tab) File title */ + // File preview (separate tab) File title .ndfHFb-c4YZDc-Wrql6b-V1ur5d, - .a-b-cg-Zf /* File preview (in Drive) File title */ { + // File preview (in Drive) File title + .a-b-cg-Zf { color: @text; } - /* File preview (separate tab) 3 dots menu item hover */ + // 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 */ { + // File preview (in Drive) 3 dots menu item hover + .a-b-v:hover { background-color: @surface0; } - /* File preview (separate tab) No preview available */ + // 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 */ + // File preview (in Drive) No preview available + .a-b-Tb-j { + background-color: var(--dt-surface-container); + color: var(--dt-on-surface); + // 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; + // File preview (in Drive) No preview available Download + .a-b-x-rb-d { + background-color: var(--dt-primary); + color: var(--dt-on-primary); text-shadow: none; border-color: transparent; &:hover { - background-color: @surface2; background-image: none; + background-color: color-mix(in oklab, var(--dt-primary), var(--dt-on-primary) 8%); } } - /* File preview (separate tab) No preview available Download icon */ + // 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 */ + // File preview (in Drive) No preview available Download icon + .a-b-x-rb-d-c { - & when (@flavor = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@flavor = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@flavor = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@flavor = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } + filter: @base-filter; } } - /* File preview (in Drive) text document */ + // File preview (in Drive) text document .a-b-r-x, - .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */ + // File preview (separate tab) text document + .ndfHFb-c4YZDc-fmcmS-bN97Pc { &, pre { @@ -539,25 +401,25 @@ color: @text !important; } } - /* File preview (in Drive) comment on image */ + // File preview (in Drive) comment on image .Yk-efwuC { background-color: @surface0 !important; - /* File preview (in Drive) comment on image person */ + // File preview (in Drive) comment on image person .Yk-Vq7Udc { background-color: @surface0 !important; [data-name] { color: @text !important; } - /* Comment text */ + // Comment text .Yk-eKrold-Sg.Yk-eKrold-Sg { color: @text !important; } - /* Comment date */ + // Comment date .Yk-eKrold-bi { color: @subtext0 !important; } } - /* File preview (in Drive) comments */ + // File preview (in Drive) comments .Yk-efwuC-vb-Gd { background-color: @surface0; &, @@ -573,7 +435,7 @@ } [role="button"] { background-color: @surface1 !important; - /* needed to override border-color */ + // needed to override border-color &[role="button"] { border-color: @overlay0 !important; } @@ -585,79 +447,119 @@ } } - /* Drive sharing window material icon */ + // File preview (in Drive) video processing banner + .a-b-Un-R3oXPe-xf { + background: var(--dt-primary-container); + color: var(--dt-on-primary-container); + } + + // Video player + [data-player-id] { + @ae-media-theme: @catppuccin[@@darkFlavor]; + --ae-media-overlay-controls-seeking-slider-active-track-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-seeking-slider-focus-handle-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-seeking-slider-pressed-handle-color: @ae-media-theme[@subtext0]; + --ae-media-overlay-controls-seeking-slider-handle-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-seeking-slider-inactive-track-color: fade(@ae-media-theme[@text], 60%); + + --ae-media-overlay-controls-iconbutton-selected-icon-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-iconbutton-selected-hover-icon-color: @ae-media-theme[@subtext1]; + --ae-media-overlay-controls-iconbutton-selected-focus-icon-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-iconbutton-selected-pressed-icon-color: @ae-media-theme[@subtext0]; + --ae-media-overlay-controls-iconbutton-unselected-icon-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-iconbutton-unselected-hover-icon-color: @ae-media-theme[@subtext1]; + --ae-media-overlay-controls-iconbutton-unselected-focus-icon-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-iconbutton-unselected-pressed-icon-color: @ae-media-theme[@subtext0]; + + --ae-media-overlay-controls-timestamp-color: @ae-media-theme[@text]; + --ae-media-overlay-controls-container-background: linear-gradient(180deg, transparent 0, fade(@ae-media-theme[@crust], 30%) 100%); + + // Context menu + .wj7EP { + --gm3-menu-container-color: fade(@ae-media-theme[@base], 80%); + --gm3-menu-list-item-selected-container-color: fade(@ae-media-theme[@text], 80%); + } + + // Play button + .QZj8kf { + --gm3-icon-button-filled-container-color: fade(@ae-media-theme[@surface1], 30%); + --gm3-icon-button-filled-unselected-container-color: @ae-media-theme[@text]; + --gm3-icon-button-filled-selected-container-color: fade(@ae-media-theme[@surface1], 30%); + --gm3-icon-button-filled-toggle-unselected-icon-color: @ae-media-theme[@base]; + --gm3-icon-button-filled-toggle-selected-icon-color: @ae-media-theme[@text]; + --gm3-icon-button-filled-toggle-selected-hover-icon-color: @ae-media-theme[@text]; + --gm3-icon-button-filled-toggle-unselected-hover-icon-color: @ae-media-theme[@base]; + --gm3-icon-button-filled-toggle-selected-focus-icon-color: @ae-media-theme[@text]; + --gm3-icon-button-filled-toggle-unselected-focus-icon-color: @ae-media-theme[@base]; + --gm3-icon-button-filled-toggle-selected-pressed-icon-color: @ae-media-theme[@text]; + --gm3-icon-button-filled-toggle-unselected-pressed-icon-color: @ae-media-theme[@base]; + } + // Settings menu + .ws5S4e { + --gm3-menu-list-item-selected-container-color: fade(@ae-media-theme[@surface1], 30%); + --gm3-list-list-item-selected-container-color: fade(@ae-media-theme[@surface1], 30%); + --gm3-menu-container-color: fade(@ae-media-theme[@surface1], 30%); + } + // Timestamp container + .grhbAe { + background-color: fade(@ae-media-theme[@surface1], 30%); + } + // Options container + .Z3tdfe::before { + background-color: fade(@ae-media-theme[@surface1], 30%); + } + // Volume popup slider container + .PqDlCb { + background-color: fade(@ae-media-theme[@surface1], 30%); + } + // Slider value indicator + .E6snnb, .dJ5x8c { + --gm3-slider-value-indicator-label-label-text-color: @text; + --gm3-slider-value-indicator-container-color: fade(@ae-media-theme[@surface0], 60%); + } + } + + // Drive sharing window material icon .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { color: @accent; } - /* Drive sharing window access hover */ + // Drive sharing window access hover .lfDNBb:hover, .lfDNBb:focus-within, .ZelW3e:hover .FYhd9e, - .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { + // Drive sharing window person row hover + .ZelW3e:focus-within .FYhd9e { background-color: @surface0; } - /* Drive sharing iframe (in Drive) */ + // Drive sharing iframe (in Drive) .lb-k-x { color-scheme: unset; } - /* Drive sharing iframe (file preview separate tab) */ + // Drive sharing iframe (file preview separate tab) .XKSfm-Sx9Kwc-bN97Pc { - color-scheme: auto; /* unset doesn't work? */ - } - [role="tooltip"], - .Kk7lMc-Ca /* Drive applications sidebar tooltip */, - .gb_2e /* Drive google account 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; - } + // unset doesn't work? + color-scheme: auto; } - /* Drive applications sidebar close button */ + // 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 */ + // Drive applications sidebar get addons .Yb-Il-d#qJTzr .Yb-Il-d-c-j { - & when (@flavor = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( - 196deg - ) brightness(90%) contrast(86%); - } - & when (@flavor = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( - 192deg - ) brightness(104%) contrast(92%); - } - & when (@flavor = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( - 193deg - ) brightness(99%) contrast(94%); - } - & when (@flavor = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( - 192deg - ) brightness(98%) contrast(95%); - } + filter: @text-filter; } - /* Drive applications sidebar close button white background */ + // Drive applications sidebar close button white background .Yb-Il-d-c-Nd { background-color: transparent; } - /* Drive icon */ + // Drive icon [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] { @darkBlue: mix(@blue, @base, 80%); @darkGreen: mix(@green, @base, 80%); @@ -668,7 +570,7 @@ content: url("data:image/svg+xml,@{svg}"); } - /* Drive upload checkmark */ + // Drive upload checkmark .z-Ea-Fj-c svg path { fill: @green; }