diff --git a/modules/home/aseprite/catppuccin.user.css b/modules/home/aseprite/catppuccin.user.css deleted file mode 100644 index f8116da..0000000 --- a/modules/home/aseprite/catppuccin.user.css +++ /dev/null @@ -1,1296 +0,0 @@ -/* ==UserStyle== -@name YouTube Catppuccin -@namespace github.com/catppuccin/userstyles/styles/youtube -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube -@version 3.1.5 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css -@description Soothing pastel theme for YouTube -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "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"] -@var checkbox logo "Logo" 0 -@var checkbox oledOn "Enable black bars" 0 -@var text scrollbar_width "Scrollbar width" 8px -==/UserStyle== */ -@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') { - /* youtube.com */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - #oled(@oledOn); - #logo(@logo); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - #oled(@oledOn); - #logo(@logo); - } - - /* for oled monitors */ - #oled(@oled) when (@oled =0) { - #ytd-player #container { - background: @base !important; - } - } - - #logo(@logo) { - ytd-topbar-logo-renderer.style-scope a svg > g, - svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) { - path[fill="#FF0000"] { - fill: @accent-color !important; - } - path[fill="white"] { - fill: @base !important; - } - } - & when (@logo =1) { - ytd-topbar-logo-renderer, - svg.ytd-consent-bump-v2-lightbox { - display: none; - } - } - } - - #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]; - - /* apply everywhere */ - &, - [dark], - html, - html[system-icons][dark], - html[system-icons] [dark], - html[darker-dark-theme][dark], - [darker-dark-theme] [dark] { - --yt-spec-white-1: @text !important; - --yt-spec-white-2: @subtext0 !important; - --yt-spec-white-3: @subtext1 !important; - --yt-spec-white-4: darken(@subtext1, 5%) !important; - --yt-spec-black-1: @overlay1 !important; - --yt-spec-black-2: @overlay0 !important; - --yt-spec-black-3: @surface2 !important; - --yt-spec-black-4: @surface1 !important; - --yt-spec-black-pure: @surface0 !important; - --yt-spec-grey-1: @text !important; - --yt-spec-grey-2: @subtext0 !important; - --yt-spec-grey-3: @subtext1 !important; - --yt-spec-grey-4: @overlay2 !important; - --yt-spec-grey-5: @overlay1 !important; - --yt-brand-youtube-red: @accent-color !important; - --yt-brand-medium-red: @accent-color !important; - --yt-brand-light-red: @accent-color !important; - --yt-spec-red-30: @peach !important; - --yt-spec-red-70: @red !important; - --yt-spec-pale-blue: @sky !important; - --yt-spec-light-blue: @sky !important; - --yt-spec-dark-blue: @sapphire !important; - --yt-spec-navy-blue: @teal !important; - --yt-spec-light-green: @green !important; - --yt-spec-dark-green: @green !important; - --yt-spec-yellow: @peach !important; - --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important; - --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important; - --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important; - --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important; - --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important; - --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important; - --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important; - --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important; - --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important; - --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important; - --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important; - --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important; - --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important; - --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important; - --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important; - --yt-brand-medium-red-alpha-90: fadeout(@accent-color, 0.9) !important; - --yt-brand-medium-red-alpha-30: fadeout(@accent-color, 0.3) !important; - --yt-brand-light-red-alpha-30: fadeout(@accent-color, 0.3) !important; - --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important; - --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important; - - --yt-spec-base-background: @base !important; - --yt-spec-raised-background: @mantle !important; - --yt-spec-menu-background: @mantle !important; - --yt-spec-inverted-background: @text !important; - --yt-spec-additive-background: fadeout(@surface0, 0.1) !important; - --yt-spec-outline: @surface0 !important; - --yt-spec-shadow: fadeout(@crust, 0.25) !important; - --yt-spec-text-primary: @text !important; - --yt-spec-text-secondary: @subtext0 !important; - --yt-spec-text-disabled: @subtext1 !important; - --yt-spec-text-primary-inverse: @crust !important; - --yt-spec-call-to-action: @accent-color !important; - --yt-spec-call-to-action-inverse: @accent-color !important; - --yt-spec-suggested-action: fadeout(@accent-color, 80%) !important; - --yt-spec-suggested-action-inverse: @text !important; - --yt-spec-icon-active-other: @overlay0 !important; - --yt-spec-icon-inactive: @overlay1 !important; - --yt-spec-icon-disabled: @overlay2 !important; - --yt-spec-button-chip-background-hover: @surface1 !important; - --yt-spec-touch-response: @surface0 !important; - - --yt-spec-touch-response-inverse: @accent-color !important; - --yt-spec-brand-icon-active: @accent-color !important; - --yt-spec-brand-icon-inactive: @overlay1 !important; - --yt-spec-brand-button-background: @accent-color !important; - --yt-spec-brand-link-text: @sapphire !important; - --yt-spec-wordmark-text: @text !important; - --yt-spec-error-indicator: @red !important; - --yt-spec-themed-blue: @sky !important; - --yt-spec-themed-green: @green !important; - --yt-spec-ad-indicator: @teal !important; - --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important; - --yt-spec-commerce-badge-background: @green !important; - --yt-spec-static-brand-red: @accent-color !important; - --yt-spec-static-brand-white: @text !important; - --yt-spec-static-brand-black: @base !important; - --yt-spec-static-clear-color: fadeout(@crust, 0) !important; - --yt-spec-static-clear-black: fadeout(@crust, 0) !important; - --yt-spec-static-ad-yellow: @peach !important; - --yt-spec-static-grey: @subtext0 !important; - --yt-spec-static-overlay-background-solid: @crust !important; - --yt-spec-static-overlay-background-heavy: @surface0 !important; - --yt-spec-static-overlay-background-medium: fadeout( - @crust, - 0.6 - ) !important; - --yt-spec-static-overlay-background-medium-light: fadeout( - @crust, - 0.3 - ) !important; - --yt-spec-static-overlay-background-light: fadeout( - @crust, - 0.1 - ) !important; - --yt-spec-static-overlay-text-primary: @text !important; - --yt-spec-static-overlay-text-secondary: fadeout( - @subtext0, - 0.7 - ) !important; - --yt-spec-static-overlay-text-disabled: fadeout( - @subtext0, - 0.3 - ) !important; - --yt-spec-static-overlay-call-to-action: @accent-color !important; - --yt-spec-static-overlay-icon-active-other: @text !important; - --yt-spec-static-overlay-icon-inactive: @surface1 !important; - --yt-spec-static-overlay-icon-disabled: @surface2 !important; - --yt-spec-static-overlay-button-primary: @accent-color !important; - --yt-spec-static-overlay-button-secondary: @surface0 !important; - --yt-spec-static-overlay-touch-response: @overlay1 !important; - --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; - --yt-spec-static-overlay-background-brand: @accent-color !important; - --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; - --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; - --yt-spec-assistive-feed-themed-gradient-3: @red !important; - --yt-spec-brand-background-solid: @base !important; - --yt-spec-brand-background-primary: @surface0 !important; - --yt-spec-brand-background-secondary: @mantle !important; - --yt-spec-general-background-a: @base !important; - --yt-spec-general-background-b: @mantle !important; - --yt-spec-general-background-c: @crust !important; - --yt-spec-error-background: @base !important; - --yt-spec-10-percent-layer: @surface2 !important; - --yt-spec-snackbar-background: @mantle !important; - --yt-spec-snackbar-background-updated: @mantle !important; - --yt-spec-badge-chip-background: if( - @lookup =latte, - @crust, - @surface1 - ) !important; - --yt-spec-verified-badge-background: @overlay0 !important; - --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important; - --yt-spec-call-to-action-hover: @accent-color !importantr; - --yt-spec-brand-button-background-hover: @accent-color !important; - --yt-spec-brand-link-text-fadeoutd: fadeout( - @accent-color, - 0.3 - ) !important; - --yt-spec-filled-button-focus-outline: @surface0 !important; - --yt-spec-static-overlay-button-hover: @surface1 !important; - --yt-spec-mono-filled-hover: @surface1 !important; - --yt-spec-commerce-filled-hover: @accent-color !important; - --yt-spec-mono-tonal-hover: @surface1 !important; - --yt-spec-commerce-tonal-hover: @surface2 !important; - --yt-spec-static-overlay-filled-hover: @overlay1 !important; - --yt-spec-static-overlay-tonal-hover: @surface1 !important; - --yt-spec-paper-tab-ink: fadeout(@text, 0.3); - --yt-spec-filled-button-text: @text !important; - --yt-spec-selected-nav-text: @text !important; - --iron-icon-fill-color: @text !important; - - /* Search bar */ - --ytd-searchbox-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important; - --ytd-searchbox-legacy-button-color: @mantle !important; - --ytd-searchbox-legacy-button-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-focus-color: @accent-color !important; - --ytd-searchbox-legacy-button-hover-color: @mantle !important; - --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-icon-color: @accent-color !important; - --ytd-searchbox-background: @base !important; - --ytd-searchbox-text-color: @text !important; - - /* System icons */ - --yt-spec-icon-inactive: @overlay0 !important; - --yt-spec-icon-disabled: @overlay1 !important; - --yt-spec-brand-icon-inactive: @overlay2 !important; - - /* Yt video Page */ - --yt-live-chat-background-color: @base !important; - --yt-live-chat-action-panel-background-color: @base !important; - --yt-live-chat-action-panel-background-color-transparent: @base !important; - --yt-live-chat-secondary-background-color: @surface1; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-toast-background-color: @surface2 !important; - --yt-live-chat-mode-change-background-color: @base !important; - --yt-live-chat-secondary-text-color: @subtext0 !important; - --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important; - --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important; - --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; - --yt-live-chat-enabled-send-button-color: @text !important; - --yt-live-chat-disabled-icon-button-color: @subtext1 !important; - --yt-live-chat-picker-button-hover-color: @accent-color !important; - --yt-live-chat-mention-background-color: @accent-color !important; - --yt-live-chat-mention-text-color: @text !important; - --yt-live-chat-deleted-message-color: @subtext0; - --yt-live-chat-deleted-message-bar-color: @subtext1 !important; - --yt-live-chat-reconnect-message-color: @text !important; - --yt-live-chat-disabled-button-background-color: @overlay0 !important; - --yt-live-chat-sub-panel-background-color: @base !important; - --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; - --yt-live-chat-moderator-color: @lavender !important; - --yt-live-chat-owner-color: @peach !important; - --yt-live-chat-message-highlight-background-color: @base !important; - --yt-live-chat-sponsor-color: @green !important; - --yt-live-chat-overlay-color: fadeout(@mantle, 0.5); - --yt-live-chat-dialog-background-color: @base !important; - --yt-emoji-picker-variant-selector-bg-color: @base !important; - --yt-live-chat-moderation-mode-hover-background-color: fadeout( - @mantle, - 0.3 - ) !important; - --yt-grey: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important; - --yt-emoji-picker-search-background-color: @surface0 !important; - --yt-emoji-picker-search-color: @text !important; - --yt-emoji-picker-search-placeholder-color: @accent-color !important; - --yt-live-chat-slider-active-color: @accent-color !important; - --yt-live-chat-slider-container-color: @surface0 !important; - --yt-live-chat-slider-markers-color: @text !important; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - @mantle, - transparent - ) !important; - --yt-live-chat-automod-button-background-color-hover: fadeout( - @crust, - 0.5 - ) !important; - --yt-live-chat-automod-button-explanation-color: fadeout( - @accent-color, - 0.7 - ) !important; - --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important; - --yt-live-chat-shimmer-linear-gradient: linear-gradient( - 0deg, - fadeout(@text, 0.1) 40%, - fadeout(@base, 0.3) 50%, - fadeout(@text, 0.1) 60% - ) !important; - --yt-live-chat-vem-background-color: @mantle !important; - --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important; - --yt-live-chat-product-picker-hover-color: @overlay0 !important; - --yt-live-chat-product-picker-disabled-icon-color: fadeout( - @text, - 0.3 - ) !important; - --yt-live-chat-action-panel-background-color-transparent: ( - null - ) !important; - - /* Tooltip */ - --paper-tooltip-background: @overlay0 !important; - --paper-tooltip-text-color: @text !important; - - /* links */ - --yt-endpoint-color: @accent-color !important; - --yt-endpoint-visited-color: @accent-color !important; - --yt-endpoint-hover-color: @accent-color !important; - - --sb-dark-red-outline: @accent-color !important; - --sb-main-bg-color: @base !important; - --sb-main-fg-color: @text !important; - --sb-grey-bg-color: @base !important; - --sb-grey-fg-color: @subtext0 !important; - --sb-red-bg-color: @accent-color !important; - } - - /* general colors */ - &:not(.style-scope) { - --primary-text-color: @text !important; - --primary-background-color: @base !important; - --secondary-text-color: @subtext0 !important; - --disabled-text-color: @subtext1 !important; - --divider-color: @overlay0 !important; - --error-color: @red !important; - --primary-color: @accent-color !important; - --light-primary-color: @accent-color !important; - --dark-primary-color: @blue !important; - --accent-color: @accent-color !important; - --light-accent-color: @accent-color !important; - --dark-accent-color: @accent-color !important; - --light-theme-background-color: @base !important; - --light-theme-base-color: @text !important; - --light-theme-text-color: @text !important; - --light-theme-secondary-color: @subtext0 !important; - --light-theme-disabled-color: @subtext1 !important; - --light-theme-divider-color: @overlay0 !important; - --dark-theme-background-color: @base !important; - --dark-theme-base-color: @text !important; - --dark-theme-text-color: @text !important; - --dark-theme-secondary-color: @subtext0 !important; - --dark-theme-disabled-color: @subtext1 !important; - --dark-theme-divider-color: @overlay0 !important; - } - - #channel-name.ytd-video-meta-block { - --yt-endpoint-color: @accent-color !important; - --yt-endpoint-visited-color: @accent-color !important; - color: @accent-color !important; - } - - /* selected chapter */ - ytd-macro-markers-list-item-renderer { - --ytd-macro-markers-list-item-background-color: @surface0 !important; - --ytd-macro-markers-list-item-title-color: @text !important; - --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; - --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important; - } - - /* playlist selector */ - ytd-playlist-panel-video-renderer { - --yt-lightsource-section2-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @text !important; - --yt-active-playlist-panel-background-color: @surface0 !important; - } - - ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] - .header.ytd-playlist-panel-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; - } - - /* explandable meta */ - ytd-expandable-metadata-renderer { - --yt-lightsource-section1-color: @base !important; - --yt-lightsource-section2-color: @surface0 !important; - --yt-lightsource-section3-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @subtext0 !important; - } - - yt-live-chat-renderer { - --yt-emoji-picker-renderer-height: 180px; - --yt-button-default-text-color: @text !important; - --yt-button-default-background-color: @base !important; - --yt-button-dark-text-color: @base !important; - --yt-button-dark-background-color: @accent-color !important; - --yt-button-payment-background-color: @accent-color !important; - } - - yt-icon.ytd-pinned-comment-badge-renderer * { - fill: @text !important; - } - - .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after { - background: @overlay0 !important; - } - - .html5-ypc-purchase { - background: @accent-color !important; - &:hover { - background: ligten(@accent-color, 10%) !important; - } - } - - yt-notification-action-renderer[darker-dark-theme] - tp-yt-paper-toast.yt-notification-action-renderer { - background: @overlay0 !important; - } - - /* volume bar */ - .ytp-volume-slider-handle { - background: @accent-color !important; - &::before { - background: @accent-color !important; - } - &::after { - z-index: -1; - } - } - - /* new videos dot */ - #newness-dot { - background-color: @accent-color !important; - } - - /* subtitle */ - .ytp-chrome-controls .ytp-button[aria-pressed]:after { - background-color: @accent-color !important; - } - - /* menu items */ - /* checkbox subitem */ - .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { - background: @accent-color !important; - &::after { - background: @overlay1 !important; - } - } - .ytp-menuitem:not([aria-disabled="true"]):hover { - background: @surface1 !important; - } - .ytp-settings-button.ytp-hd-quality-badge, - .ytp-settings-button.ytp-4k-quality-badge, - .ytp-settings-button.ytp-5k-quality-badge, - .ytp-settings-button.ytp-8k-quality-badge, - .ytp-settings-button.ytp-3d-badge { - &::after { - background-color: @accent-color !important; - } - } - - .ytp-panel-menu { - color: @text; - - & .ytp-menuitem:not(:last-child) svg > path { - fill: @text; - } - - & .ytp-menuitem:last-child svg:last-child { - fill: @text; - } - } - - .ytp-right-controls svg path, - .ytp-svg-fill { - fill: #fff !important; - } - - .ytp-time-current, - .ytp-time-separator, - .ytp-time-duration, - .ytp-menu-label-secondary, - .ytp-menuitem-label-count { - color: #fff; - } - - .ytp-tooltip:not([aria-hidden="true"]) { - color: @text; - } - - .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { - fill: @accent-color !important; - } - - .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { - fill: @accent-color !important; - } - - .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled { - background-color: @accent-color !important; - .yt-spec-button-shape-next__icon yt-icon svg g path { - fill: @base !important; - } - } - - /* link */ - .yt-core-attributed-string__link--call-to-action-color { - color: @sapphire !important; - &:hover { - color: @teal !important; - } - } - - /* search results */ - .sbpqs_a:before, - .sbqs_c:before { - filter: invert(1); - } - - /* Results backgrounds */ - .sbsb_a, - .sbdd_b { - background: @mantle !important; - border: none !important; - } - - /* text color */ - .gsfs { - color: @text !important; - } - - /* Hover and keyboard select background */ - .sbsb_c.gsfs:hover, - .sbsb_d { - background-color: @surface0 !important; - } - - .sbfl_b { - background-color: @mantle !important; - &:hover { - background-color: @surface0 !important; - color: @accent-color !important; - } - } - - .sbpqs_a { - color: @accent-color !important; - } - - .sbfl_a { - color: @subtext0 !important; - } - - .sbsb_i { - color: @subtext0; - } - - /* Keyboard select text color and hover text color */ - .sbsb_c:hover .sbqs_c, - .sbsb_c.gsfs.sbsb_d .sbqs_c { - color: @accent-color !important; - } - - .ytp-swatch-background-color { - background-color: @accent-color !important; - } - - /* exmplation box */ - .explanation-box[correct] * { - color: @crust !important; - } - - /* custom likes + anims */ - yt-animated-icon[animated-icon-type="LIKE"] - > ytd-lottie-player - > lottie-component - > svg - > g:nth-child(2) - > g:nth-child(2) { - /* not liked */ - > g:nth-child(2), - > g:nth-child(4) { - > path:nth-child(1) { - stroke: @text !important; - } - } - /* liked */ - > g:nth-child(1), - > g:nth-child(3) { - > path:nth-child(1) { - fill: @accent-color !important; - } - > path:nth-child(2) { - stroke: @accent-color !important; - } - } - } - - /* iv branding */ - /* Popup for when you hover over the channel avatar in the video */ - .iv-branding .branding-context-container-inner { - background-color: @base !important; - } - - .iv-branding .iv-branding-context-name { - color: @text !important; - text-shadow: none !important; - } - - /* Popup for when you hover over the channel avatar in the video */ - .iv-branding .branding-context-container-inner { - background-color: @base !important; - } - - /* Cards */ - .iv-drawer-content { - background-color: fadeout(@mantle, 5%) !important; - } - - .iv-drawer-header-text { - color: @text !important; - } - - .iv-card-content, - .ytp-ce-expanding-overlay-background, - .ytp-cards-teaser .ytp-cards-teaser-text, - .ytp-cards-teaser .ytp-cards-teaser-box { - background-color: @base !important; - } - - .ytp-cards-teaser .ytp-cards-teaser-box, - .iv-card-image { - border: 0px !important; - } - - .iv-card-content > :first-child, - .html5-video-player a, - .iv-card h2, - .ytp-cards-teaser .ytp-cards-teaser-text { - color: @text !important; - } - - /*Player tooltip background*/ - .ytp-tooltip-text { - background: @surface0 !important; - } - - .iv-card:hover .iv-card-primary-link, - .ytp-ce-website-title { - color: @accent-color !important; - } - - .ytp-popup { - background: @surface0 !important; - } - - tp-yt-paper-dialog { - background-color: @base !important; - } - - /* Temporary fix */ - .yt-core-attributed-string--link-inherit-color { - color: @text !important; - /*&:hover { - * color: @teal !important; - }*/ - } - - /* live badges */ - .badge-style-type-live-now-alternate, - ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] { - color: @crust !important; - yt-icon svg { - g path, - path { - fill: @crust !important; - } - } - } - .ytp-live-badge { - &:before { - background: @subtext1 !important; - } - &[disabled]:before { - background: @accent-color !important; - } - } - - /* notification idicator */ - .yt-spec-icon-badge-shape--type-notification - .yt-spec-icon-badge-shape__badge { - background-color: @accent-color !important; - color: @crust !important; - } - .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon { - color: var(--yt-spec-icon-active-other) !important; - } - - /* creator badges */ - ytd-author-comment-badge-renderer { - --yt-basic-background-color: @surface0 !important; - --yt-basic-foreground-title-color: @surface0 !important; - --ytd-author-comment-badge-background-color: @surface0 !important; - --ytd-author-comment-badge-name-color: @text !important; - --ytd-author-comment-badge-icon-color: @text !important; - padding-right: 6px; - padding-left: 8px; - } - - /* disable ambient mode */ - #cinematics > div > canvas { - visibility: hidden; - } - - /* badges e.g. popular */ - yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], - yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { - background: @surface0 !important; - border: 1px solid @accent-color !important; - color: @text !important; - } - - /* Search border */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent-color !important; - } - - /* Error page */ - #error-page { - background-color: @base !important; - } - - #error-page-content { - color: @text !important; - text-shadow: none; - background-color: @base !important; - > p { - color: @text !important; - text-shadow: none; - } - #masthead-search-terms.masthead-search-terms-border { - border: 1px solid @accent-color !important; - box-shadow: none !important; - } - #yt-masthead { - color: @text !important; - text-shadow: none; - #logo-container { - .logo { - filter: invert(1) grayscale(1); - } - .content-region { - color: @text !important; - text-shadow: none; - } - } - #masthead-search #masthead-search-terms-border { - input[type="text"] { - color: @text !important; - &:focus { - color: @accent-color !important; - } - } - } - .search-button { - background-color: @mantle !important; - } - } - } - - /* channel homepage */ - /* selected tab */ - .yt-tab-shape-wiz__tab--tab-selected { - color: @accent-color !important; - } - .yt-tab-group-shape-wiz__slider { - background-color: @accent-color !important; - } - - /* unselected */ - .yt-tab-shape-wiz__tab { - color: @subtext1; - } - - /* hover */ - .yt-tab-shape-wiz:hover { - .yt-tab-shape-wiz__tab { - color: lighten(@accent-color, 7.5); - } - - .yt-tab-shape-wiz__tab-bar { - background-color: lighten(@accent-color, 7.5); - } - } - - /* hopefully temporary */ - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { - background-color: @surface0; - color: @text; - } - - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled { - color: @crust; - background-color: @accent-color; - &:hover { - background-color: darken(@accent-color, 20); - } - } - - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text { - color: @accent-color; - &:hover { - background-color: fadeout(@accent-color, 90); - } - } - - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline, - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text { - color: @text; - &:hover { - background-color: @surface0; - } - } - - /* Scrollbar */ - ::-webkit-scrollbar-thumb { - background: @accent-color !important; - } - - ::-webkit-scrollbar { - width: @scrollbar_width !important; - } - - ::-webkit-scrollbar-track { - background: @base !important; - } - - ::-webkit-scrollbar-thumb { - background: @accent-color !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - } -} -@-moz-document url-prefix('https://www.youtube.com/redirect') -{ - /* youtube.com-redirect */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - #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]; - - h1 { - color: @text !important; - } - - #redirect-main-text { - color: @overlay2 !important; - .bolded { - color: @accent-color !important; - } - } - - /* search */ - #masthead-search-terms-border { - border-color: @surface0 !important; - background-color: @surface0 !important; - box-shadow: fadeout(@crust, 10%) !important; - } - - /*Community Cross-posting*/ - ytd-shared-post-renderer[uses-compact-lockup] - #repost-context.ytd-shared-post-renderer { - background-color: var(--second-background); - } - #divider-line-container.ytd-shared-post-renderer { - background-color: var(--yt-spec-10-percent-layer); - } - - #masthead-search-terms { - color: @text !important; - } - - .search-button { - background: @surface0 !important; - border-color: @surface0 !important; - } - - .search-button-content { - filter: invert(1); - } - - #redirect-backto-safety-button:hover { - color: @text !important; - } - - #logo-container .content-region { - color: @text !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - } -} - -@-moz-document url-prefix('https://studio.youtube.com') -{ - /* studio.youtube.com */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - #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]; - - &, - html, - html[dark], - html[dark][dark], - &[dark], - &[light], - [light], - html[light], - html[light][light] { - /* disable */ - --yt-spec-black-pure-alpha-80: (null) !important; - --yt-spec-black-pure-alpha-60: (null) !important; - --yt-spec-black-1-alpha-98: (null) !important; - --yt-spec-black-1-alpha-95: (null) !important; - - /* text */ - --yt-spec-text-primary: @text !important; - --ytcp-text-primary: @text !important; - --ytcp-text-primary-inverse: @base !important; - --ytcp-static-overlay-text-primary-inverse: @base !important; - --ytcp-wordmark-text: @text !important; - --ytcp-text-secondary: @subtext0 !important; - --ytcp-text-disabled: @subtext1 !important; - --ytcp-overlay-text-primary: @overlay2 !important; - - /* main bg */ - --ytcp-general-background-a: @base !important; - --yt-spec-base-background: @base !important; - --yt-spec-black-3: @base !important; - - /* secondary bg */ - --yt-spec-brand-background-solid: @mantle !important; - --ytcp-brand-background-solid: @mantle !important; - --yt-spec-raised-background: @mantle !important; - --ytcp-general-background-b: @mantle !important; - --ytcp-analytics-reach-background: @mantle !important; - --yt-spec-black-2: @mantle !important; - - /* additional bg */ - --ytcp-general-background-c: @crust !important; - - /* menu */ - --ytcp-menu-background: @surface0 !important; - - /* card borders */ - --ytcp-container-border-color: @surface0 !important; - --ytcp-container-hovered-border-color: @surface0 !important; - --ytcp-line-divider-solid: @surface0 !important; - --ytcp-container-border-color-inverse: @subtext0 !important; - --ytcp-line-divider-solid-inverse: @subtext0 !important; - - /* links */ - --ytcp-call-to-action: @sapphire !important; - --ytcp-call-to-action-inverse: @mantle !important; - - /* buttons */ - --ytcp-call-to-action-raised-background: @accent-color !important; - --yt-spec-brand-button-background: @accent-color !important; - --ytcp-call-to-action-raised-disabled: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; - --ytcp-call-to-action-raised-background-inverse: @base !important; - --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important; - - /* dropdown */ - --yt-spec-brand-background-primary: @surface0 !important; - - /* icons */ - --yt-compact-link-icon-color: @overlay2 !important; - --ytcp-icon-active: @accent-color !important; - --ytcp-icon-inactive: @overlay2 !important; - --ytcp-icon-disabled: @overlay2 !important; - --ytcp-icon-active-inverse: @overlay1 !important; - --ytcp-icon-disabled-inverse: @subtext1 !important; - - /* colors */ - --ytcp-error-red: @red !important; - --ytcp-badge-red: @red !important; - --ytcp-error-red-inverse: @red !important; - --ytcp-themed-red-inverse: @red !important; - --ytcp-themed-red: @red !important; - --ytcp-themed-blue: @blue !important; - --ytcp-badge-blue-solid: @blue !important; - --ytcp-themed-blue-inverse: @blue !important; - --ytcp-themed-green: @green !important; - --ytmus-genre-primary-melon: @green !important; - --ytcp-themed-green-inverse: @green !important; - --ytcp-analytics-pine: @green !important; - --ytcp-analytics-pine-inverse: @green !important; - --ytcp-analytics-parrot: @green !important; - --ytcp-themed-yellow: @peach !important; - --ytmus-genre-primary-gold: @peach !important; - --ytcp-yellow-inverse: @peach !important; - --ytcp-badge-yellow: @peach !important; - --ytcp-analytics-yellow: @peach !important; - --ytcp-analytics-apricot: @peach !important; - --ytcp-suggested-action: @teal !important; - --ytcp-analytics-overview: @teal !important; - --ytcp-analytics-revenue: @teal !important; - --ytcp-analytics-default-secondary: @teal !important; - --ytcp-analytics-royal-blue: @lavender !important; - --ytcp-analytics-reach: @lavender !important; - --ytcp-analytics-audience: @lavender !important; - --ytcp-analytics-engagement: @pink !important; - --ytcp-analytics-revenue-secondary: @pink !important; - --ytcp-analytics-bubblegum: @flamingo !important; - --ytmus-genre-primary-ruby: @flamingo !important; - --ytmus-genre-primary-salmon: @mauve !important; - --ytmus-genre-primary-orange: @maroon !important; - --ytmus-genre-primary-sky: @sky !important; - --ytmus-genre-primary-sky-inverse: @sky !important; - - /* misc */ - --yt-spec-badge-chip-background: @surface1 !important; - --ytcp-focus-inverse: @accent-color !important; - --ytcp-focus: @accent-color !important; - --ytcp-selected-item: @accent-color !important; - --ytcp-hover-item: @overlay2 !important; - --ytcp-chip-active-focus: @accent-color !important; - --ytcp-playhead: @overlay2 !important; - --ytcp-playhead-inverse: @overlay2 !important; - } - - ytcp-button.destructive.ytls-error-dialog { - color: @base !important; - } - - yt-formatted-string.ytls-error-dialog, - tp-yt-iron-icon.ytls-error-dialog { - color: @text !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } - } -} - -@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; - }; -}; diff --git a/modules/home/aseprite/mocha.aseprite-extension b/modules/home/aseprite/mocha.aseprite-extension new file mode 100644 index 0000000..e4a56bc Binary files /dev/null and b/modules/home/aseprite/mocha.aseprite-extension differ