diff --git a/styles/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less
index b2f7758269..04840ede2c 100644
--- a/styles/brave-search/catppuccin.user.less
+++ b/styles/brave-search/catppuccin.user.less
@@ -37,145 +37,163 @@
#lib.palette();
#lib.defaults();
- &, .is-serp {
- --color-page-background: @base;
- --color-container-background: @crust;
- --color-container-highlight: @mantle;
- --color-serp-header-background: @crust;
- --color-text-interactive: @accent;
- --color-divider-subtle: @surface0;
- --color-divider-interactive: @accent;
- --color-text-primary: @text;
- --color-serp-bar-bg: @mantle;
- --color-serp-divider-subtle-container: @surface0;
- --color-gray-30: @subtext0;
- --color-gray-40: @overlay2;
- --color-text-secondary: @subtext1;
- --color-text-tertiary: @subtext0;
- --color-icon-default: @overlay2;
- --color-serp-snippet-background: @base;
- --color-link-default: @blue;
- --color-link-visited: @mauve;
- --color-tabs-search-text-default: @accent;
- --color-primary-50: @accent;
- --color-primitive-primary-60: @accent;
- --color-primitive-primary-70: darken(@accent, 5%);
- --color-container-interactive: transparent;
- --color-button-background: @accent;
- --color-button-disabled: fade(@surface2, 30%);
- --color-serp-settings-background: @mantle;
- }
- dialog {
- color: @text;
-
- &::backdrop {
- background-color: fade(@crust, 30%);
- }
- }
-
- #searchform::after {
- outline-color: @surface0;
- }
- #searchform-actions::before {
- background: none !important;
- }
- #submit-button, #submit-llm-button {
- svg {
- fill: @overlay2;
- }
-
- &:hover:not(:disabled) {
- background: linear-gradient(
- 314deg,
- @peach 8.49%,
- @pink 43.72%,
- @mauve 99.51%
- );
-
- svg {
- fill: @base;
+ color: @text; // inherited text (e.g. feedback modal)
+
+ --color-text-primary: @text;
+ --color-text-secondary: @subtext1;
+ --color-text-tertiary: @subtext0;
+ --color-text-disabled: @overlay1;
+
+ --color-icon-default: @overlay2;
+ --color-icon-secondary: @overlay1;
+ --color-icon-disabled: @surface2;
+
+ --color-divider-subtle: @surface0;
+ --color-divider-strong: @surface2;
+
+ --color-button-disabled: @surface1;
+
+ --color-search-background-page: @base;
+ --color-search-background-search-bar: @surface0;
+ --color-search-background-container: @surface0;
+ --color-search-links-link: @blue;
+ --color-search-background-settings: @mantle;
+ --color-search-background-highlight: @surface1;
+ --color-search-background-interactive-normal: fade(@accent, 20%);
+ --color-search-divider-subtle: @surface1;
+ --color-search-divider-subtle-container: @surface1;
+ --color-search-divider-interactive: fade(@accent, 30%);
+ --color-search-background-enrichment-cards: @surface0;
+ --color-search-background-suggest-highlight: @surface1;
+ --color-search-background-user-message-bubble: @surface0;
+
+ --color-primary-20: fade(@accent, 30%); // rerank
+ --color-neutral-20: @surface1; // search elsewhere link hover border
+ --color-neutral-5: @surface0; // location sharing ip address info
+
+ --color-white: @text;
+ --color-schemes-primary: @accent;
+ --color-schemes-on-primary: @base;
+
+ --color-link-visited: @lavender;
+
+ // Tooltips
+ --color-primitive-neutral-98: @text;
+ --color-primitive-neutral-0: @surface0;
+
+ /* Search Results */
+ --color-serp-header-background: @base;
+ .related-query .icon {
+ color: @overlay2;
+ }
+ // Pagination "Next"
+ .button.type--plain, .button.type--plain-outlined-subtle {
+ --dsbtn-hover-background: @surface1 !important;
+ }
+
+ /* Settings */
+ --color-page-background: @base;
+ --color-container-background: @surface0;
+ --color-primary-50: @accent; // icons
+
+ .form-switch {
+ --switch-off-background-color: @overlay0;
+ --switch-off-background-color-hover: @overlay1;
+ --switch-off-dot-color: @text;
+ --switch-on-background-color: @accent;
+ --switch-on-background-color-hover: lighten(@accent, 5%);
+ --switch-on-dot-color: @base;
+ }
+
+ /* Search Home */
+
+ .example-searches {
+ .card {
+ background: @surface0;
+ &:hover {
+ background: @surface1;
}
}
}
- #clear-query-button svg {
- fill: @overlay2;
+ .download-cta-background::before {
+ background-image: linear-gradient(
+ 90deg,
+ @surface0 0%,
+ @surface1 100%
+ ) !important;
+ mask: none;
}
- #searchbox::placeholder {
- color: @subtext0;
+ .suggestions {
+ border-top-color: @surface1 !important;
}
- .button.type--filled.theme--default {
- color: @base;
- &:disabled {
- color: fade(@text, 50%);
+ // LLM
+ --gradient-icons-active: linear-gradient(
+ 321.5013deg,
+ @peach 3%,
+ @pink 40%,
+ @mauve 99%
+ );
+ #gradient-icons-active stop {
+ &:nth-child(1) {
+ stop-color: @peach !important;
+ }
+ &:nth-child(2) {
+ stop-color: @pink !important;
+ }
+ &:nth-child(3) {
+ stop-color: @mauve !important;
}
}
- .button.type--outlined.theme--default:hover {
- background-color: @accent;
- border-color: @accent !important;
- color: @base !important;
- }
- .tab-item.active .icon {
- fill: @accent !important;
- }
- .tab-item.active ::after {
- background: @accent !important;
- }
- .conversation-input-field.type--default {
- background: @crust;
- border-color: @crust;
- color: @text;
- }
+ .subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible {
+ background: linear-gradient(
+ 314deg,
+ @peach 8.49%,
+ @pink 43.72%,
+ @mauve 99.51%
+ );
- .logo-img {
- @svg: escape(
- ''
+ .icon {
+ fill: @base !important;
+ }
+ }
+ .suggestion.ask .ask-badge::before {
+ background-image: linear-gradient(
+ 352deg,
+ fade(@peach, 15%) 3%,
+ fade(@pink, 15%) 40%,
+ fade(@mauve, 15%) 99%
);
- content: url("data:image/svg+xml,@{svg}");
}
- .nav-logo .logo-large {
+ #logo img, #nav-logo img, .logo-large {
@svg: escape(
- ''
+ ''
);
content: url("data:image/svg+xml,@{svg}");
}
- .nav-logo .logo-small {
+ .nav-logo .logo-small, .logo-wrapper img {
@svg: escape(
- ''
+ ''
);
content: url("data:image/svg+xml,@{svg}");
}
.waves-bottom {
@svg: escape(
- ''
+ ''
);
- background-image: url("data:image/svg+xml,@{svg}");
+ background-image: url("data:image/svg+xml,@{svg}") !important;
}
.waves-top {
@svg: escape(
- ''
+ ''
);
- background-image: url("data:image/svg+xml,@{svg}");
- }
-
- input[type="radio"]:checked::after {
- background-color: @accent;
- }
-
- .feedback-footer {
- #logo {
- @svg: escape(
- ''
- );
- content: url("data:image/svg+xml,@{svg}");
- height: 48px;
- }
+ background-image: url("data:image/svg+xml,@{svg}") !important;
}
}
}