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
Size64 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Changing some stuff but should "work" (hopefully)
Works best on a 1440p monitor, but it should now function flawlessly on a 1080p display.
📢 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
Brave Auto-Expand All "Show More" buttons + Others
📷 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: 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 20240429.14.35
@namespace https://userstyles.world/user/misspent
@description A Brave Search Engine Theme
@author misspent
@license MIT
==/UserStyle== */
@-moz-document domain("search.brave.com") {
/* |=========> ❗ Main Section <=========| */
*, :before, :after {border-radius: 0px !important;}
: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 */
--Reddit-Top-Answer: none; /* none = off, grid = on */
--Map-view-Snippet: none; /* none = off, grid = on */
--Sidebar-Bloat-Remover: none; /* none = off, grid = on */
--New-AI-Snippet: none; /* none | inherit */
/* => More Results Amount <= */
--Result-Tiles: 3; /* Default = 3 | Only: 2 - 4 */
--aside-Infobox-padding: 12px;
}
/* Variables | Optional */
.feedback.svelte-1hfw11j {
display: var(--Feedback-Right-Sidebar-Button); /* none = off, flex = on */
color: var(--blurple-300);
}
/* Removes stuff from sidebar that I do not care about/use/need */
aside :is(header > section, .infobox-images, #infobox > section:has(.rating)) {display: var(--Sidebar-Bloat-Remover);}
#search-elsewhere {display: var(--Find-elsewhere-bar) !important;}
#faq {display: var(--People-also-ask-snippet)}
/* Removes top question answers dropdown from everything else but Reddit */
.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;}
/* ======> Removal <====== */
#nav-tabs ul li [href*="/goggles"] {display: none !important;} /* Removes google/goggle tab on nav bar */
#results #premium-promo-wrapper {display: none;} /* Premium Pro Wrapper (Advertisement) */
.deep-results-buttons {display: none;} /* Wikipedia snippet shit */
#result-end:has([href="/help/independence#third-parties"]) {display: none;} /* Results from Microsoft Bing. Learn more */
.snippet:has(.place) {display: none;}
/* Removes profile buttons from sidebar */
.profiles .chip[href*="https://www.facebook.com/"] {display: none;}
.profiles .chip[href*="https://www.instagram.com/"] {display: none;}
.profiles .chip[href*="www.metacritic.com/"] {display: none;}
/* Removes description stuff I do not care about */
.snippet .item-attributes, .snippet .software {display: none !important;}
/* Removes ignore button/warning when using advanced keywords */
#advanced-keywords {display: none !important;}
/* Border Radius for everything */
footer.svelte-8ycoh6 {display: none} /* Massive footer at the bottom of the page | Credits, link + others stuff */
/* Scrollbar */
*:not([hide-scrollbar]) ::-webkit-scrollbar-thumb { background: #00adee !important;}
*:not([hide-scrollbar]) ::-webkit-scrollbar { width: 6px !important; background: #252525}
#predicate-entity {padding: 0px;}
.footer-text {margin-bottom: 0px;}
/* Not many great matches came back for your search */
#results .snippet.standalone.no-padding section.svelte-1l01loo:has(.svelte-1l01loo) {padding: 4px 8px 0px 8px;}
.snippet-title:visited, a:visited {color: #9d70ff !important;}
/* Delete this if it acts up (removes empty tiles) */
#cta {display: none;}
/* ======> Fixes snippets | January update change <====== */
.snippet[data-type="web"] .deep-links {overflow: hidden; display: none;} /* Wikipedia category links */
/* Fav icon */
.snippet:is([data-type="web"], #featured-snippet) img.favicon {--size: 20px !important;}
/* Other */
.snippet:is([data-type="web"], [data-type="video"], #featured-snippet) .h .url .favicon-wrapper {background: transparent !important;}
.snippet[data-type="web"] .url-path {overflow: visible;}
/* 14/02/24 Fixes */
.url.heading-serpresult > .title {order: -1; margin-left: 30px;}
.url.heading-serpresult .favicon-wrapper {position: absolute; top: -2px; left: -3px;}
.url.heading-serpresult .site .site-name,
.url.heading-serpresult .site .desktop-default-regular.t-secondary {display: none;}
.url.heading-serpresult .site-wrapper .snippet-url {margin-top: -5px;}
/* Example for this fix (first snippet) | https://search.brave.com/search?q=stealth+games */
#featured-snippet {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
/* =====> New AI | 18/04/2024 <===== */
main#search-page > div:has(#llm-container), #searchform-actions .subutton-wrapper {display: var(--New-AI-Snippet) !important;}
/* Center + width */
main#search-page > div:has(#llm-container) {
--main-column-width: auto !important;
display: flex;
justify-content: center;
}
main#search-page #llm-container {
max-width: 1300px;
margin-bottom: 1.4rem;
background: var(--color-serp-snippet-background) !important;
}
main#search-page > div:has(#llm-container) .wrapper.noscrollbar {padding: 0;}
/* Other OCD stuff */
main#search-page > div:has(#llm-container) .column-layout .cols {margin: 0px !important;}
main#search-page > div:has(#llm-container) .column-layout.has-sidebar {gap: 0px}
#llm-container {
margin: 0px 20px 20px 20px;
padding: 2px 6px 6px 6px;
background: #151515 !important;
border: 1px solid var(--border-color);
}
main#search-page > div:has(#llm-container) #chatllm .rich-snippet-content {padding: 0 1.2rem !important;}
.fade-wrapper {--height-fade: 0px !important;}
.llm-output .highlight, .llm-output .highlight-answer {background: #393e8cba;}
/* ===> Sidebar aside fixes + improvements <=== */
aside #infobox .infobox-header {padding: var(--aside-Infobox-padding) !important;}
aside #infobox .infobox-images {
margin-top: 0px;
padding: 0 var(--aside-Infobox-padding);
}
aside #infobox header section {margin: var(--aside-Infobox-padding) !important;}
aside #infobox > section {margin: 0 !important;}
/* Fixes sidebar and factsheet code */
aside #infobox section {
padding: 0px !important;
margin: var(--spacing-xl) var(--spacing-2xl);
}
aside :is(.rating , .infobox-attr, .infobox-factsheet-show-more) {padding: 0 8px !important;}
/* Cast Section */
aside #infobox > section:has(.cast) {margin: 0 8px !important}
aside #infobox > section:has(.cast) .flex-between {margin-bottom: .4rem;}
/* Other */
aside .t-tertiary {color: var(--link-secondary);}
#codebox.infobox {background: var(--color-serp-snippet-background) !important;}
/* Removes "Not many great matches" */
.snippet:has(#bad-results-info-banner) {display: none;}
/* Hide scrollbar for sidebar | IE, Edge and Firefox */
aside {
-ms-overflow-style: none !important; /* IE and Edge */
scrollbar-width: none !important; /* Firefox */
}
aside::-webkit-scrollbar {display: none !important;} /* Hide scrollbar for Chrome, Safari and Opera */
/* Calculator */
#calculator .rich-snippet-content {padding: 0 !important;}
#calculator #calc-header {margin-bottom: 6px !important;}
/* Spelling check */
body:not(.is-mobile) #altered-query {margin-top: 0rem !important; margin-bottom: 0.8rem; border: none; text-align: center; padding: 0px;}
#altered-query .desktop-default-semibold {color: #09e909;}
#altered-query :nth-child(2) a[href*="spellcheck"] {color: red !important; text-decoration: line-through;}
#info-banners {padding: 0px !important;}
/* Navbar below search fix */
.nav-tabs-content #primary-tabs {overflow: hidden !important; padding-left: 0px !important;}
#nav-tabs-container {background: transparent !important;}
/* Right-sidebar title fix */
.title-container {padding-top: .8rem !important;}
#infobox-snippet {padding: 0px !important; height: fit-content;}
#codellm {display: none;} /* Removes "Get AI assistance" useless snippet */
.feedback.svelte-8js1iq {display: none;} /* Removed feedback button */
#cta.inactive {display: none;} /* Removes empty snippet */
/* ==========> Top Answer dropdown thing ==========< */
.inline-qa--top-answer {display: var(--Reddit-Top-Answer);}
.snippet .tabs, .snippet .inline-qa--top-answer, .snippet .inline-qa--top-answer .tabs, .snippet .is-overflowing {border-color: #432e24 !important;}
.snippet .tabs .tab.tab--active {background: #3b2921 !important;}
.snippet .inline-qa--top-answer .tabs .tab:hover {background: #4a3126;}
.inline-qa code, #codebox code {background: #181818 !important}
/* Show more button */
.action-container button {border-color: #202020 !important;}
.inline-qa--top-answer .action-container {--action-button-height: 28px !important;}
/* Reddit Answer box quote */
blockquote {
background: var(--bg-01);
margin-left: 0 !important;
color: lightgreen;
}
.inline-qa-answer blockquote::before {background: #43b582 !important;}
/* =================> Summarizer <================= */
#summarizer {order: -100 !important; padding: 0px !important;}
/* Whole container and title fix */
#summarizer .rich-snippet-content {padding: 0.6rem !important;}
.summarizer-content.svelte-15peda6 .header.sve...