Changelog is at the bottom of the Notes section.
Looks best with the following:
1080p: Zoom 70%
1440p: Zoom 80%
Brave Search: Reformed by misspent
Details
Authormisspent
LicenseMIT
Categorybrave
Created
Updated
Size46 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
🚩 21/05/2024: Whole code rewrite - If there are any problems, they should be resolved quickly.
Works best on a 1440p monitor, not sure about 1080.
Important Install?: Brave Auto-Expand All "Show More" buttons + Others
📢 IMPORTANT: Your browser has to support :has selector for this and most of my other themes to work properly | Set layout.css.has-selector.enabled to “true” in about:config on Firefox for :has selector to work.
📢 IMPORTANT: If you have issues, please click the "Homepage" button and go to issues on the GitHub page, or click this.
📢 IMPORTANT: Add/remove an "M" at the end of the "search.brave.co(m)" below each snippet section for the snippet to work/not
📢 IMPORTANT: Enable "Dark" Mode in settings (top right settings icon)
Other: Zoom 80% on 1440p for ultimate climax
My Other Themes
Preview
✅ Features
- ✔️ Everything is square
- ✔️ Colour coding (optional)
- ✔️ More results + Other features
- ❌ Can't change the colours of anything unless you know what you're looking for
- ⭕ Work in progress, not perfect and more than likely never will be.
- ⛔ May not work properly for other browsers, nor will it work that well when not in dark mode
- ⛔ Works in different ways depending on your resolution, I only have 1440p display.
🖥️ Scripts I use
Brave - Discussions Reddit Title Replacer
📷 More Screenshots
(Previews/screenshots may become out-of-date at some point)
Images Section Results
Videos Section Results
More News Results
📜 Configurable & Extra's
⌨ Variables
:root {
--Feedback-Right-Sidebar-Button: none; /* none = off, flex = on */
--Find-elsewhere-bar: none; /* none = off, flex = on */
--Brave-AI-Text: none; /* none = off, flex = on */
--People-also-ask-snippet: none; /* none = off, inherit = on */
/* => More Results Amount <= */
--Result-Tiles: 3; /* Default = 3 | Only go above 3, nerds :) CBA to fix cause I'm an ass | Advised not to change */
}
📝 Changelog
Changelog: 21/05/2024:
- Whole codebase has undergone a complete rewrite.
- Information is now recorded and organized more comprehensively.
- Performance optimizations have been implemented for better efficiency + loading.
- Consistency has been significantly enhanced by utilizing Brave's native variables.
Changelog: 15/10/23:
- Successfully implemented a long-awaited feature.
- Streamlined and organized the codebase by removing redundant and buggy code.
- Optimized the interface for 1080p displays, ensuring a seamless viewing experience.
- Enhanced the layout to maximize on-screen content without the need for excessive scrolling.
- For any issues or concerns, please feel free to open an issue on GitHub.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Brave: Styled
@version 20241123.16.06
@namespace https://userstyles.world/user/misspent
@description A Brave Search Engine Theme
@author misspent
@license MIT
==/UserStyle== */
@-moz-document domain("search.brave.com") {
/* |=========> 🔧 Variables <=========| */
/* My personal ones */
:root {
/* Removals */
--Sidebar-Bloat-Remover: none;
--Reddit-Top-Answer: none;
--People-also-ask: initial;
--People-also-ask-Half-Screen: none;
/* Ai */
--New-AI-Snippet: grid; /* grid */
--Answer-with-AI-Dropdown: flex; /* flex */
/* Colors */
--Other-Backgrounds: #191919;
/* Mine / Other */
--All-Results-SNIPPETS-Video-News-etc: none; /* Removes videos, news & other "Clusters" from main search */
}
/* Padding, Width, Spcaing, Etc */
:root {
--main-column-width: 100%; /* Changed - Whole page */
--sidebar-width: 370px;
--main-gap: 16px; /* Changed - Main gaps OCD approves */
--header-height: 58px;
--max-content-width: calc(var(--main-column-width) + var(--sidebar-width) + var(--main-gap));
--search-form-width: 712px;;
--search-form-height: 48px;
--search-form-logo-gap: var(--spacing-4xl);
--normal-snippet-width: 672px;
--snippet-padding-top: 1.2rem;
--snippet-padding-side: 22px;
--snippet-padding-bottom: 1.7rem;
--main-content-padding: 166px;
--base-padding: 16px;
--spacing-xs: .1rem;
--spacing-s: .1rem;
--spacing-m: 8px;
--spacing-m-2: .5rem;
--spacing-l: 8px;
--spacing-xl: 8px;
--spacing-2xl: 8px;
--spacing-3xl: 1.6rem;
--spacing-4xl: 8px;
--spacing-6xl: 2.4rem;
--border-radius-2xs: 0px;
--border-radius-xs: 0px;
--border-radius-s: 0px;
--border-radius-m: 0px;
--border-radius-l: 0px;
--border-radius-xl: 0px;
--border-radius-full: 0px;
--icon-2xs: 14px;
--icon-xs: 16px;
--icon-s: 18px;
--icon-m: 20px;
--icon-l: 24px;
--icon-xl: 32px;
--elevation-01: none;
--elevation-02: none;
--elevation-03: none;
--elevation-04: none;
--elevation-05: none;
--focus-visible: none;
--blur: blur(0px);
--blur-modal: blur(0px);
--blur-regular: blur(0px);
--text-2xs: .4rem;
--text-xs-2: .5rem;
--text-xs: .55rem;
--text-sm-2: .6rem;
--text-sm: .65rem;
--text-md-2: .7rem;
--text-md: .75rem;
--text-h4: .8rem;
--text-l: .9rem;
--text-xl-2: .95rem;
}
/* Left-side only */
main.main-column {
--color-link-default: #fff;
--icon-s: 20px;
}
/* Colours */
:root:not(.light), :root:not(.light) ::after, :root.dark, :root.dark ::after, .btn {
--color-primitive-black: #000000;
--color-primitive-gray-01: #f3f5f7;
--color-primitive-gray-10: #ebeef0;
--color-primitive-gray-60: #546771;
--color-primitive-primary-40: #7c91ff;
--color-primitive-primary-60: #3f39e8;
--color-primitive-primary-70: #3b08c2;
--color-primitive-white: #ffffff;
--color-blue-20: #0b355d;
--color-gray-10: #21272a;
--color-gray-20: #262626; /* Highlight/:hover - Hover over pagination button */
--color-gray-30: #546771;
--color-gray-40: #62757e;
--color-gray-50: #a1b2ba;
--color-gray-60: #becad0;
--color-gray-70: #ebeef0;
--color-green-10: #092c09;
--color-green-20: #123f13;
--color-green-30: #19721e;
--color-green-40: #3c823c;
--color-pink-40: #c24580;
--color-primary-10: #1c0d64;
--color-primary-20: #2a118e;
--color-primary-30: #3f39e8;
--color-primary-40: #545ff8;
--color-primary-50: #00adee; /* Changed - buttons? */
--color-primary-60: #b7c6ff;
--color-primary-70: #e9eeff;
--color-purple-40: #7064d3;
--color-red-20: #620f18;
--color-red-40: #e11f3d;
--color-secondary-40: #cd4400;
--color-teal-40: #077f8d;
--gradient-panel-background: linear-gradient( 96.98deg, #3b08c2 0%, #3f39e8 100% );
--gradient-hero: linear-gradient(174deg, #ff4000 2.32%, #ff1f01 93.33%);
--gradient-llm: transparent; /* Changed - New AI Gradient */
--color-button-background: #3f39e8;
--color-button-disabled: #687b854d;
--color-container-background: var(--color-serp-snippet-background); /* Changed - Search settings containers */
--color-container-disabled: #c3c9d32e;
--color-container-highlight: #101010; /* Changed - Search settings */
--color-container-interactive: #1c0d64;
--color-dialogs-scrim-background: #21272ab2;
--color-divider-interactive: #00adee66; /* Changed - Button separators? */
--color-divider-strong: #a1b2ba66;
--color-divider-subtle: #202020; /* Changed - Borders */
--color-icon-default: #a1b2ba;
--color-icon-disabled: #687b8580;
--color-icon-interactive: #00adee; /* Changed - Interative button icons */
--color-link-default: #00adee; /* Changed - Sidebar links */
--color-link-visited: #9d70ff;
--color-page-background: #101010; /* Changed - Main Background */
--color-systemfeedback-error-background: #460a10;
--color-systemfeedback-error-text: #ffb1b0;
--color-systemfeedback-info-text: #a0cdff;
--color-systemfeedback-success-text: #94df91;
--color-tabs-search-text-default: #ff6022;
--color-text-disabled: #ebeef080;
--color-text-interactive: #678deb; /* Changed - Interactive buttons? */
--color-text-primary: #f3f5f7;
--color-text-secondary: #dadfe1;
--color-text-tertiary: #aaaaaa; /* Changed - Other lower/grey text (sub) */
--color-serp-bar-bg: #101010; /* Changed - Searchbar */
--color-serp-breadcrumbs: #00adeed6; /* Changed - Breadcrumbs ulr in snippets */
--color-serp-divider-subtle-container: var(--Other-Backgrounds); /* Changed - Searchbar border */
--color-serp-header-background: #151515; /* Changed - header background */
--color-serp-snippet-background: #151515; /* Changed - Snippets */
--color-code-01: #525964;
--color-code-02: #acbbd5;
--color-code-03: #7fa569;
--color-code-04: #5198d4;
--color-code-05: #b26ac7;
--color-code-border: #22232a;
--elevation-primary: rgba(255, 255, 255, .15);
--elevation-secondary: rgba(0, 0, 0, .8);
--btn-background: var(--color-serp-snippet-background); /* Changed - Next * Prev button */
}
.cols.svelte-ls0vpt {
width: 100%;
max-width: auto !important;
}
/* ==========================================> Variable classes <========================================== */
/* Removes top question answers dropdown */
.inline-qa--top-answer {display: var(--Reddit-Top-Answer);}
.snippet:has(:is([href*="https://stackoverflow.com/questions/"], [href*="https://superuser.com/questions/"], [href*="https://webapps.stackexchange.com/questions/"], [href*="https://community.wemod.com/"], [href*="https://forums.tomshardware.com/"], [href*="https://dietpi.com/forum/"], [href*="https://unix.stackexchange.com/questions/"], [href*="https://ell.stackexchange.com/questions/"], [href*="https://hinative.com/questions/"], [href*="https://www.slant.co/topics/"], [href*="https://english.stackexchange.com/questions/"], [href*="https://gaming.stackexchange.com/questions/"], [href*="https://discussion.fedoraproject.org/"], [href*="https://ask.fedoraproject.org/"], [href*="https://discuss.privacyguides.net/"], [href*="https://askubuntu.com/questions/"], [href*="https://serverfault.com/questions/"], [href*="https://community.sophos.com/"], [href*="https://wordpress.stackexchange.com/questions/"], [href*="https://webmasters.stackexchange.com/questions/"], [href*="https://community.letsencrypt.org/"], [href*="https://github.community/"], [href*="https://forum.freecodecamp.org/"], [href*="https://security.stackexchange.com/questions/"], [href*="https://meta.stackexchange.com/questions/"])) .inline-qa--top-answer {display: none;}
/* Remove videos, news & maybe others from "ALL" results */
.snippet.standalone[data-type="cluster"] {display: var(--All-Results-SNIPPETS-Video-News-etc);}
}
@-moz-document domain("search.brave.com") {
/* Testing stuff */
/* ===> Show live updates / tags on snippets <=== */
.snippet:not(.standalone) .url .site-wrapper .site .desktop-default-regular {
display: flex !important;
flex-direction: row-reverse;
}
.snippet:not(.standalone) .url .site-wrapper .site {
display: grid !important;
grid-template-columns: 96% 1fr;
max-width: 100%;
}
.snippet:not(.standalone) .url .site-wrapper .site .sitename-container {grid-column: 2; grid-row: 1;}
.snippet:not(.standalone) .url .site-wrapper .site .snippet-url {grid-column: 1; grid-row: 1;}
/* Removals */
.snippet:not(.standalone) .url .site-wrapper .site .desktop-default-regular .sitename {display: none;}
}
@-moz-document domain("search.brave.com") {
/* |=> 🖥️ More Results + Main Layout <=| */
/* Removes sidebar if sidebar has no contents or isn't relevant (Improves loading + layout?) */
.column-layout.noscrollbar.has-sidebar aside {display: none !important;}
.column-layout.noscrollbar.has-sidebar aside:has(#infobox-snippet) {
display: flex !important;
flex-direction: column;
gap: 8px;
}
/* Search: https://search.brave.com/search?q=New+York+restaurant */
.column-layout.noscrollbar:has(#info-banners) {align-items: center;}
/* ====> More Results <=== */
#results {
display: grid !important;
grid-template-columns: repeat(auto-fill,minmax(790px,1fr)); /* Higher than 800 = half-screen sidebar offset */
gap: 8px;
overflow: hidden;
min-height: auto;
}
#search-page .column-layout { /* Whole page? */
max-width: var(--main-column-width);
padding: 0;
}
#results.section:first-child {margin-right: 0vw;}
/* => Next & Previous Page container <= */
#pag...