diff --git a/styles/mastodon/assets/.gitkeep b/styles/mastodon/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/styles/mastodon/assets/frappe.webp b/styles/mastodon/assets/frappe.webp new file mode 100644 index 0000000000..fb5f26c0a6 Binary files /dev/null and b/styles/mastodon/assets/frappe.webp differ diff --git a/styles/mastodon/assets/help-theme.webp b/styles/mastodon/assets/help-theme.webp new file mode 100644 index 0000000000..f16d4bdbb4 Binary files /dev/null and b/styles/mastodon/assets/help-theme.webp differ diff --git a/styles/mastodon/assets/latte.webp b/styles/mastodon/assets/latte.webp new file mode 100644 index 0000000000..83507f47a0 Binary files /dev/null and b/styles/mastodon/assets/latte.webp differ diff --git a/styles/mastodon/assets/macchiato.webp b/styles/mastodon/assets/macchiato.webp new file mode 100644 index 0000000000..196ebde164 Binary files /dev/null and b/styles/mastodon/assets/macchiato.webp differ diff --git a/styles/mastodon/assets/mocha.webp b/styles/mastodon/assets/mocha.webp new file mode 100644 index 0000000000..3f730d2960 Binary files /dev/null and b/styles/mastodon/assets/mocha.webp differ diff --git a/styles/mastodon/assets/preview.webp b/styles/mastodon/assets/preview.webp new file mode 100644 index 0000000000..d62dd6f963 Binary files /dev/null and b/styles/mastodon/assets/preview.webp differ diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css index 9763f9d476..c2d33d45d5 100644 --- a/styles/mastodon/catppuccin.user.css +++ b/styles/mastodon/catppuccin.user.css @@ -2,8 +2,8 @@ @name Mastodon Catppuccin @namespace github.com/catppuccin/userstyles/styles/mastodon @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon -@version 0.0.1 -@description Soothing pastel theme for Invidious +@version 1.0.0 +@description Soothing pastel theme for Mastodon @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css @preprocessor stylus @@ -13,340 +13,586 @@ ==/UserStyle== */ @-moz-document domain("mstdn.social"), - domain("fosstodon.org") { - - colourscheme(flavour) { - - if (flavour=="Latte") { - --ctp-rosewater: #dc8a78; - --ctp-flamingo: #dd7878; - --ctp-pink: #ea76cb; - --ctp-mauve: #8839ef; - --ctp-red: #d20f39; - --ctp-maroon: #e64553; - --ctp-peach: #fe640b; - --ctp-yellow: #df8e1d; - --ctp-green: #40a02b; - --ctp-teal: #179299; - --ctp-sky: #04a5e5; - --ctp-sapphire: #209fb5; - --ctp-blue: #1e66f5; - --ctp-lavender: #7287fd; - --ctp-text: #4c4f69; - --ctp-subtext1: #5c5f77; - --ctp-subtext0: #6c6f85; - --ctp-overlay2: #7c7f93; - --ctp-overlay1: #8c8fa1; - --ctp-overlay0: #9ca0b0; - --ctp-surface2: #acb0be; - --ctp-surface1: #bcc0cc; - --ctp-surface0: #ccd0da; - --ctp-base: #eff1f5; - --ctp-mantle: #e6e9ef; - --ctp-crust: #dce0e8; - --ctp-text-inverted: var(--ctp-base); - } - - if (flavour=="Frappe") { - --ctp-rosewater: #f2d5cf; - --ctp-flamingo: #eebebe; - --ctp-pink: #f4b8e4; - --ctp-mauve: #ca9ee6; - --ctp-red: #e78284; - --ctp-maroon: #ea999c; - --ctp-peach: #ef9f76; - --ctp-yellow: #e5c890; - --ctp-green: #a6d189; - --ctp-teal: #81c8be; - --ctp-sky: #99d1db; - --ctp-sapphire: #85c1dc; - --ctp-blue: #8caaee; - --ctp-lavender: #babbf1; - --ctp-text: #c6d0f5; - --ctp-subtext1: #b5bfe2; - --ctp-subtext0: #a5adce; - --ctp-overlay2: #949cbb; - --ctp-overlay1: #838ba7; - --ctp-overlay0: #737994; - --ctp-surface2: #626880; - --ctp-surface1: #51576d; - --ctp-surface0: #414559; - --ctp-base: #303446; - --ctp-mantle: #292c3c; - --ctp-crust: #232634; - --ctp-text-inverted: var(--ctp-crust); - } - - if (flavour=="Macchiato") { - --ctp-rosewater: #f4dbd6; - --ctp-flamingo: #f0c6c6; - --ctp-pink: #f5bde6; - --ctp-mauve: #c6a0f6; - --ctp-red: #ed8796; - --ctp-maroon: #ee99a0; - --ctp-peach: #f5a97f; - --ctp-yellow: #eed49f; - --ctp-green: #a6da95; - --ctp-teal: #8bd5ca; - --ctp-sky: #91d7e3; - --ctp-sapphire: #7dc4e4; - --ctp-blue: #8aadf4; - --ctp-lavender: #b7bdf8; - --ctp-text: #cad3f5; - --ctp-subtext1: #b8c0e0; - --ctp-subtext0: #a5adcb; - --ctp-overlay2: #939ab7; - --ctp-overlay1: #8087a2; - --ctp-overlay0: #6e738d; - --ctp-surface2: #5b6078; - --ctp-surface1: #494d64; - --ctp-surface0: #363a4f; - --ctp-base: #24273a; - --ctp-mantle: #1e2030; - --ctp-crust: #181926; - --ctp-text-inverted: var(--ctp-crust); - } - - if (flavour=="Mocha") { - --ctp-rosewater: #f5e0dc; - --ctp-flamingo: #f2cdcd; - --ctp-pink: #f5c2e7; - --ctp-mauve: #cba6f7; - --ctp-red: #f38ba8; - --ctp-maroon: #eba0ac; - --ctp-peach: #fab387; - --ctp-yellow: #f9e2af; - --ctp-green: #a6e3a1; - --ctp-teal: #94e2d5; - --ctp-sky: #89dceb; - --ctp-sapphire: #74c7ec; - --ctp-lavender: #b4befe; - --ctp-blue: #89b4fa; - --ctp-text: #cdd6f4; - --ctp-subtext1: #bac2de; - --ctp-subtext0: #a6adc8; - --ctp-overlay2: #9399b2; - --ctp-overlay1: #7f849c; - --ctp-overlay0: #6c7086; - --ctp-surface2: #585b70; - --ctp-surface1: #45475a; - --ctp-surface0: #313244; - --ctp-base: #1e1e2e; - --ctp-mantle: #181825; - --ctp-crust: #11111b; - --ctp-text-inverted: var(--ctp-crust); - } - - } - - :root, - .theme-default { - if (darktheme=="Latte") { colourscheme(Latte) } - if (darktheme=="Frappe") { colourscheme(Frappe) } - if (darktheme=="Macchiato") { colourscheme(Macchiato) } - if (darktheme=="Mocha") { colourscheme(Mocha) } - } - - .theme-mastodon-light { - if (lighttheme=="Latte") { colourscheme(Latte) } - if (lighttheme=="Frappe") { colourscheme(Frappe) } - if (lighttheme=="Macchiato") { colourscheme(Macchiato) } - if (lighttheme=="Mocha") { colourscheme(Mocha) } - } - - - body { - if (blueaccent) { - --ctp-link-colour: var(--ctp-blue); - --ctp-link-hover: var(--ctp-teal); - } else { - --ctp-link-colour: var(--ctp-rosewater); - --ctp-link-hover: var(--ctp-flamingo); - } - } - - - - body, - .admin-wrapper .sidebar-wrapper__inner { - - background: var(--ctp-crust); - - color: var(--ctp-text); - - } - - - .account__header__bio .account__header__fields dt, - .account__section-headline a.active, - .account__section-headline button.active, - .notification__filter-bar a.active, - .notification__filter-bar button.active, - .account__header__bio .account__header__content, - .navigation-bar, - .column-link__badge, - .column-subheading, - .account__display-name strong, - .status__display-name strong, - .notification__message, - .public-layout .public-account-bio .account__header__content, - .reply-indicator__content, .status__content { color: var(--ctp-text); } - - - .account__header__tabs__name h1 small, - .account__header__bio .account__header__fields dd, - .empty-column-indicator, - .follow_requests-unlocked_explanation, - .account .account__display-name, - .search__input, - .search__input:focus, - .account__header__fields dt { color: var(--ctp-subtext0); } - - - .account__header__tabs__name h1, - .account__header__content a, - .account__header__bio .account__header__fields a, - .empty-column-indicator a, - .follow_requests-unlocked_explanation a, - .column-back-button, - .icon-button, - .icon-button.inverted, - .text-icon-button, - .icon-button.active, - .public-layout .public-account-bio .account__header__fields a, - .column-header__back-button, - .notification__message .fa, - .navigation-bar strong, - .reply-indicator__content a.unhandled-link, - .status__content a.unhandled-link { color: var(--ctp-link-colour); } - - - .icon-button:active, .icon-button:focus, .icon-button:hover, - .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover, - .icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover, - .public-layout .public-account-bio .account__header__fields a:hover { color: var(--ctp-link-hover); } - - - .ui__header, - .column-header, - .column-header__button, - .column-header__back-button, - .column-back-button, - .drawer__header, - .account__section-headline, - .notification__filter-bar, - .account__section-headline button, - .notification__filter-bar button, - .account__header, - .search__input, - .search__input:focus, - .column-link__badge, - .column-subheading, - .public-layout .header, - .public-layout .public-account-header__bar::before, - .account__header__fields, - .account__header__fields dt, - .account__header__fields dd:not(.account__header__bio .account__header__fields dd), - .focusable:focus, - .admin-wrapper .sidebar ul a:hover, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { +domain("fosstodon.org"), +domain("tech.lgbt"), +domain("mastodon.social") { + + colourscheme(flavour) { + + if (flavour=="Latte") { + --ctp-rosewater: #dc8a78; + --ctp-flamingo: #dd7878; + --ctp-pink: #ea76cb; + --ctp-mauve: #8839ef; + --ctp-red: #d20f39; + --ctp-maroon: #e64553; + --ctp-peach: #fe640b; + --ctp-yellow: #df8e1d; + --ctp-green: #40a02b; + --ctp-teal: #179299; + --ctp-sky: #04a5e5; + --ctp-sapphire: #209fb5; + --ctp-blue: #1e66f5; + --ctp-lavender: #7287fd; + --ctp-text: #4c4f69; + --ctp-subtext1: #5c5f77; + --ctp-subtext0: #6c6f85; + --ctp-overlay2: #7c7f93; + --ctp-overlay1: #8c8fa1; + --ctp-overlay0: #9ca0b0; + --ctp-surface2: #acb0be; + --ctp-surface1: #bcc0cc; + --ctp-surface0: #ccd0da; + --ctp-base: #eff1f5; + --ctp-mantle: #e6e9ef; + --ctp-crust: #dce0e8; + --ctp-text-inverted: var(--ctp-base); + } + + if (flavour=="Frappe") { + --ctp-rosewater: #f2d5cf; + --ctp-flamingo: #eebebe; + --ctp-pink: #f4b8e4; + --ctp-mauve: #ca9ee6; + --ctp-red: #e78284; + --ctp-maroon: #ea999c; + --ctp-peach: #ef9f76; + --ctp-yellow: #e5c890; + --ctp-green: #a6d189; + --ctp-teal: #81c8be; + --ctp-sky: #99d1db; + --ctp-sapphire: #85c1dc; + --ctp-blue: #8caaee; + --ctp-lavender: #babbf1; + --ctp-text: #c6d0f5; + --ctp-subtext1: #b5bfe2; + --ctp-subtext0: #a5adce; + --ctp-overlay2: #949cbb; + --ctp-overlay1: #838ba7; + --ctp-overlay0: #737994; + --ctp-surface2: #626880; + --ctp-surface1: #51576d; + --ctp-surface0: #414559; + --ctp-base: #303446; + --ctp-mantle: #292c3c; + --ctp-crust: #232634; + --ctp-text-inverted: var(--ctp-crust); + } + + if (flavour=="Macchiato") { + --ctp-rosewater: #f4dbd6; + --ctp-flamingo: #f0c6c6; + --ctp-pink: #f5bde6; + --ctp-mauve: #c6a0f6; + --ctp-red: #ed8796; + --ctp-maroon: #ee99a0; + --ctp-peach: #f5a97f; + --ctp-yellow: #eed49f; + --ctp-green: #a6da95; + --ctp-teal: #8bd5ca; + --ctp-sky: #91d7e3; + --ctp-sapphire: #7dc4e4; + --ctp-blue: #8aadf4; + --ctp-lavender: #b7bdf8; + --ctp-text: #cad3f5; + --ctp-subtext1: #b8c0e0; + --ctp-subtext0: #a5adcb; + --ctp-overlay2: #939ab7; + --ctp-overlay1: #8087a2; + --ctp-overlay0: #6e738d; + --ctp-surface2: #5b6078; + --ctp-surface1: #494d64; + --ctp-surface0: #363a4f; + --ctp-base: #24273a; + --ctp-mantle: #1e2030; + --ctp-crust: #181926; + --ctp-text-inverted: var(--ctp-crust); + } + + if (flavour=="Mocha") { + --ctp-rosewater: #f5e0dc; + --ctp-flamingo: #f2cdcd; + --ctp-pink: #f5c2e7; + --ctp-mauve: #cba6f7; + --ctp-red: #f38ba8; + --ctp-maroon: #eba0ac; + --ctp-peach: #fab387; + --ctp-yellow: #f9e2af; + --ctp-green: #a6e3a1; + --ctp-teal: #94e2d5; + --ctp-sky: #89dceb; + --ctp-sapphire: #74c7ec; + --ctp-lavender: #b4befe; + --ctp-blue: #89b4fa; + --ctp-text: #cdd6f4; + --ctp-subtext1: #bac2de; + --ctp-subtext0: #a6adc8; + --ctp-overlay2: #9399b2; + --ctp-overlay1: #7f849c; + --ctp-overlay0: #6c7086; + --ctp-surface2: #585b70; + --ctp-surface1: #45475a; + --ctp-surface0: #313244; + --ctp-base: #1e1e2e; + --ctp-mantle: #181825; + --ctp-crust: #11111b; + --ctp-text-inverted: var(--ctp-crust); + } + } + + :root, + .theme-default { + if (darktheme=="Latte") { + colourscheme(Latte) + } + if (darktheme=="Frappe") { + colourscheme(Frappe) + } + if (darktheme=="Macchiato") { + colourscheme(Macchiato) + } + if (darktheme=="Mocha") { + colourscheme(Mocha) + } + } + + .theme-mastodon-light { + if (lighttheme=="Latte") { + colourscheme(Latte) + } + if (lighttheme=="Frappe") { + colourscheme(Frappe) + } + if (lighttheme=="Macchiato") { + colourscheme(Macchiato) + } + if (lighttheme=="Mocha") { + colourscheme(Mocha) + } + } + + + body { + if (blueaccent) { + --ctp-link-colour: var(--ctp-blue); + --ctp-link-hover: var(--ctp-teal); + } + else { + --ctp-link-colour: var(--ctp-rosewater); + --ctp-link-hover: var(--ctp-flamingo); + } + } + + + + body, + .tabs-bar__wrapper, + .admin-wrapper .sidebar-wrapper__inner { + background: var(--ctp-crust); + color: var(--ctp-text); + } + + + .dismissable-banner__message, + .account__header__bio .account__header__fields dt, + .account__section-headline a.active, + .account__section-headline button.active, + .notification__filter-bar a.active, + .notification__filter-bar button.active, + .account__header__bio .account__header__content, + .navigation-bar, + .column-link__badge, + .column-subheading, + .account__display-name strong, + .status__display-name strong, + .notification__message, + .public-layout .public-account-bio .account__header__content, + .reply-indicator__content, + .status__content, + .card__bar .display-name strong { + color: var(--ctp-text); + } + + + .link-footer p, + .link-footer p a { + color: var(--ctp-subtext1); + } + + .account__header__tabs__name h1 small, + .account__header__bio .account__header__fields dd, + .display-name__account, + .status__relative-time, + .empty-column-indicator, + .follow_requests-unlocked_explanation, + .account .account__display-name, + .label_input .search__input, + .search__input:focus, + .account__header__fields dt { + color: var(--ctp-subtext0); + } + + .compose-panel hr, + .navigation-panel hr { + border-top-color: var(--ctp-subtext0); + } + + .trends__item, + .status, + .getting-started__trends h4, + .trends__item__name span, + .story { + border-color: var(--ctp-subtext0); + } + + + .account__header__tabs__name h1, + .account__header__content a, + .account__header__bio .account__header__fields a, + .empty-column-indicator a, + .follow_requests-unlocked_explanation a, + .column-back-button, + .icon-button, + .icon-button.inverted, + .text-icon-button, + .icon-button.active, + .public-layout .public-account-bio .account__header__fields a, + .column-header__back-button, + .notification__message .fa, + .navigation-bar strong, + .reply-indicator__content a.unhandled-link, + .status__content a.unhandled-link { + color: var(--ctp-link-colour); + } + + + .icon-button:active, + .icon-button:focus, + .icon-button:hover, + .text-icon-button:active, + .text-icon-button:focus, + .text-icon-button:hover, + .icon-button.inverted:active, + .icon-button.inverted:focus, + .icon-button.inverted:hover, + .public-layout .public-account-bio .account__header__fields a:hover { + color: var(--ctp-link-hover); + } + + + .ui__header, + .column-header, + .column-header__button, + .column-header__back-button, + .column-back-button, + .drawer__header, + .account__section-headline, + .notification__filter-bar, + .account__section-headline button, + .notification__filter-bar button, + .account__header, + .search__input, + .search__input:focus, + .column-link__badge, + .column-subheading, + .public-layout .header, + .public-layout .public-account-header__bar::before, + .account__header__fields, + .account__header__fields dt, + .account__header__fields dd:not(.account__header__bio .account__header__fields dd), + .focusable:focus, + .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected { + border-color: var(--ctp-mantle); + background: var(--ctp-surface1); + } + + .admin-wrapper .sidebar ul a:hover, + .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { + background: var(--ctp-surface0); + } + + + .dismissable-banner { + border-color: var(--ctp-surface1); + background: var(--ctp-base); + } + + .theme-mastodon-light .account__header__bar, + .theme-mastodon-light .column-header__back-button, + .account__header__bio .account__header__fields dl, + .account__header__bio .account__header__fields, + .empty-column-indicator, + .column > .scrollable, + .nothing-here, + .public-layout .public-account-bio, + .hero-widget__text, + body.admin, + .admin-wrapper .sidebar ul a.selected, + .admin-wrapper .sidebar ul ul { + border-color: var(--ctp-mantle); + background: var(--ctp-base); + } + + + .public-layout .public-account-header__tabs__tabs .counter::after { + border-color: var(--ctp-link-colour); + } + .public-layout .public-account-header__tabs__tabs .counter.active::after { + border-color: var(--ctp-link-hover); + } + + .account, + .load-gap { + border-color: var(--ctp-mantle); + } + + .account__section-headline a.active::after { + border-color: transparent transparent var(--ctp-base); + } + + .account__section-headline a.active::before, + .account__section-headline button.active::after, + .account__section-headline button.active::before, + .notification__filter-bar a.active::after, + .notification__filter-bar a.active::before, + .notification__filter-bar button.active::after, + .notification__filter-bar button.active::before { + border-color: transparent transparent var(--ctp-mantle); + } - border-color: var(--ctp-mantle); - background: var(--ctp-surface0); - } + .drawer__header a:hover, + .column-header__button:hover, + .account__section-headline button:hover, + .notification__filter-bar button:hover, + .account__section-headline a:hover { + background: var(--ctp-surface2); + } + .column-link .active, + .column-link--transparent.active, + .column-link--transparent:focus, + .column-link:focus { + color: var(--ctp-link-colour); + } - .theme-mastodon-light .account__header__bar, - .theme-mastodon-light .column-header__back-button, - .account__header__bio .account__header__fields dl, - .account__header__bio .account__header__fields, - .empty-column-indicator, - .column > .scrollable, - .nothing-here, - .public-layout .public-account-bio, - .hero-widget__text, - body.admin, - .admin-wrapper .sidebar ul a.selected, - .admin-wrapper .sidebar ul ul { + .column-link--transparent:hover, + .column-link:hover { + color: var(--ctp-link-hover); + } - border-color: var(--ctp-mantle); - background: var(--ctp-base); - - } - - - .public-layout .public-account-header__tabs__tabs .counter::after { border-color: var(--ctp-link-colour); } - .public-layout .public-account-header__tabs__tabs .counter.active::after { border-color: var(--ctp-link-hover); } - - .account, - .load-gap { border-color: var(--ctp-mantle); } - - .account__section-headline a.active::after, - .account__section-headline a.active::before, - .account__section-headline button.active::after, - .account__section-headline button.active::before, - .notification__filter-bar a.active::after, - .notification__filter-bar a.active::before, - .notification__filter-bar button.active::after, - .notification__filter-bar button.active::before { border-color: transparent transparent var(--ctp-mantle); } + .button.button-tertiary:focus, + .button.button-tertiary:hover, + .button.button-tertiary:active { + color: var(--ctp-base); + } + .button.button-tertiary { + border-color: var(--ctp-link-colour); + } - .drawer__header a:hover, - .column-header__button:hover, - .account__section-headline button:hover, - .notification__filter-bar button:hover, - .account__section-headline a:hover, - .column-link:active, .column-link:focus, .column-link:hover { background: var(--ctp-surface2); } + .button, + .button.button-tertiary, + .button.logo-button { + background: var(--ctp-link-colour); + color: var(--ctp-text-inverted); + } + .button.logo-button svg { + fill: currentColor; + } - .button, - .button.logo-button { - background: var(--ctp-link-colour); + .public-layout .header .nav-button { + background-color: var(--ctp-surface1); + } + .public-layout .header .nav-button:hover { + background-color: var(--ctp-surface2); + } - color: var(--ctp-text-inverted); + .button.button-secondary:active, + .button.button-secondary:focus, + .button.button-secondary:hover { + border-color: var(--ctp-link-hover); + color: var(--ctp-base); + transition: .4s; + } - } + .button:active, + .button:focus, + .button:hover, + .button.button-tertiary:active, + .button.button-tertiary:focus, + .button.button-tertiary:hover, + .button.logo-button:active, + .button.logo-button:focus, + .button.logo-button:hover { + background: var(--ctp-link-hover); + } - .button.logo-button svg { fill: currentColor; } + .drawer__inner, + .drawer__inner__mastodon { + background-color: var(--ctp-base); + } + .compose-form .compose-form__modifiers, + .compose-form .autosuggest-textarea__textarea, + .compose-form .spoiler-input__input { + background: var(--ctp-surface1); + color: var(--ctp-text); + } - .public-layout .header .nav-button { background-color: var(--ctp-surface1); } - .public-layout .header .nav-button:hover { background-color: var(--ctp-surface2); } + .compose-form .autosuggest-textarea__textarea::placeholder { + color: var(--ctp-subtext0); + } + .compose-form .compose-form__buttons-wrapper { + background: var(--ctp-surface0); + } - .button:active, .button:focus, .button:hover, - .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover{ background: var(--ctp-link-hover); } + .load-more:hover { + background-color: var(--ctp-mantle); + } + .character-counter { + color: var(--ctp-subtext0); + } - .drawer__header, - .drawer__inner { border: none; } + .public-layout .header, + .hero-widget, + .public-layout .public-account-header, + .public-layout .public-account-bio, + .nothing-here { + box-shadow: none; + } - .drawer__inner, - .drawer__inner__mastodon { background-color: var(--ctp-base); } + .dropdown-menu__arrow:before, + .dropdown-menu__item a, + .dropdown-menu__item button, + .dropdown-menu__container__list, + .dropdown-menu.bottom { + background: var(--ctp-surface0); + color: var(--ctp-text); + } - .compose-form .compose-form__modifiers, - .compose-form .autosuggest-textarea__textarea, - .compose-form .spoiler-input__input, - .column-link { + .dropdown-menu__item a:hover, + .dropdown-menu__item button:hover { + background: var(--ctp-surface1); + } - background: var(--ctp-surface1); + .input-copy, + .simple_form input[type=text], + .simple_form textarea, + .simple_form .block-button, + .simple_form .button, + .simple_form button { + background: var(--ctp-mantle); + color: var(--ctp-text); + } - color: var(--ctp-text); + .simple_form .block-button:hover, + .simple_form .button:hover, + .simple_form button:hover { + background: var(--ctp-surface0); + } - } + .simple_form .input.with_label .label_input > label, + .simple_form select, + .accounts-table__count, + .simple_form textarea { + color: var(--ctp-text); + } - .compose-form .autosuggest-textarea__textarea::placeholder { color: var(--ctp-subtext0); } - .compose-form .compose-form__buttons-wrapper { background: var(--ctp-surface0); } + .simple_form textarea, + .simple_form input[type=password], + .simple_form input[type=number], + .simple_form input[type=text] { + border: 1px solid var(--ctp-crust); + } + .simple_form input[type=email]:required:valid { + border: 1px solid var(--ctp-green); + } + + .simple_form input[type=password], + .simple_form input[type=number], + .simple_form input[type=email]:required:valid, + .simple_form input[type=password]:required:invalid:not(:placeholder-shown) { + color: var(--ctp-text); + background: var(--ctp-mantle); + } + + .simple_form input[type=password]:required:invalid:not(:placeholder-shown) { + border: 1px solid var(--ctp-red); + } + + .simple_form select { + background: var(--ctp-mantle) url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px; + border: 1px solid var(--ctp-crust); + } + + .simple_form input[type=datetime-local]:active, + .simple_form input[type=datetime-local]:focus, + .simple_form input[type=email]:active, + .simple_form input[type=email]:focus, + .simple_form input[type=number]:active, + .simple_form input[type=number]:focus, + .simple_form input[type=password]:active, + .simple_form input[type=password]:focus, + .simple_form input[type=text]:active, + .simple_form input[type=text]:focus, + .simple_form input[type=url]:active, + .simple_form input[type=url]:focus, + .simple_form textarea:active, + .simple_form textarea:focus { + border-color: var(--ctp-link-colour) !important; + background: var(--ctp-mantle) !important; + color: var(--ctp-text) !important; + } + + .table > thead > tr > th { + border-color: var(--ctp-link-colour) !important; + } + + .batch-table__toolbar, + .table > thead > tr > th { + background: var(--ctp-surface0) !important; + color: var(--ctp-text) !important; + } + + .simple_form input[type=datetime-local]:hover, + .simple_form input[type=email]:hover, + .simple_form input[type=number]:hover, + .simple_form input[type=password]:hover, + .simple_form input[type=text]:hover, + .simple_form input[type=url]:hover, + .simple_form textarea:hover { + background: var(--ctp-mantle) !important; + border-color: var(--ctp-link-hover) !important; + transition: 0.4s; + } + + .batch-table__row { + background: var(--ctp-surface1); + } + + .batch-table__row:hover, + .batch-table__row:nth-child(2n):hover { + background: var(--ctp-surface2); + } + + .batch-table__row:nth-child(2n), + .table > tbody > tr > td { + background: var(--ctp-surface0); + } - .load-more:hover { background-color: var(--ctp-mantle); } - .character-counter { color: var(--ctp-subtext0); } + .table > thead > tr > th { + border-bottom: 2px solid var(--ctp-surface0); + } - .public-layout .header, - .hero-widget, - .public-layout .public-account-header, - .public-layout .public-account-bio, - .nothing-here { box-shadow: none; } + .positive-hint { + color: var(--ctp-green) !important; + } + .card__bar { + background: var(--ctp-surface0); + } }