Skip to content

Instantly share code, notes, and snippets.

@huytd

huytd/Dia-like-Firefox--README.md

Last active April 7, 2026 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save huytd/0ed3be96eddc93ca322002773c3e53aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save huytd/0ed3be96eddc93ca322002773c3e53aa to your computer and use it in GitHub Desktop.
Download ZIP
Dia-like Firefox
Raw
userChrome.css
/* Chrome-style Active Tabs for Firefox */
/* Place this file in: <Firefox Profile>/chrome/userChrome.css */
/* Enable: about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true */
/* ============================================
COLOR SCHEME (light / dark)
============================================ */
:root {
--chrome-bg: #ddd9ce;
--chrome-hover: #ccc7bb;
--chrome-active: #ffffff;
--chrome-multiselected: #e8eaed;
--chrome-close-hover: rgba(0, 0, 0, 0.1);
--chrome-label-inactive-opacity: 0.7;
--chrome-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
--chrome-tab-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
:root {
--chrome-bg: #202124;
--chrome-hover: #35363a;
--chrome-active: #292a2d;
--chrome-multiselected: #35363a;
--chrome-close-hover: rgba(255, 255, 255, 0.15);
--chrome-label-inactive-opacity: 0.6;
--chrome-card-shadow: none;
--chrome-tab-shadow: none;
}
}
/* ============================================
TAB BAR BACKGROUND
============================================ */
#tabbrowser-tabs {
--tab-min-height: 33px !important;
--tab-min-width: 0 !important;
}
:root {
--tab-min-height: 33px !important;
}
#TabsToolbar {
background-color: var(--chrome-bg) !important;
padding-top: 4px !important;
padding-bottom: 0 !important;
height: auto !important;
min-height: 0 !important;
}
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox {
min-height: 0 !important;
max-height: 34px !important;
}
#tabbrowser-arrowscrollbox {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-inline-start: 10px !important;
overflow: visible !important;
}
#tabbrowser-arrowscrollbox-periphery,
#tabbrowser-tabs {
overflow: visible !important;
}
scrollbox[part="scrollbox"] {
overflow: clip !important;
overflow-clip-margin: 10px !important;
}
/* Remove default tab line/indicator */
.tab-line,
.tabbrowser-tab .tab-context-line {
display: none !important;
}
/* ============================================
ALL TABS - BASE STYLING
============================================ */
.tabbrowser-tab {
margin: 0 !important;
padding: 0 !important;
border-radius: 8px 8px 0 0 !important;
position: relative !important;
overflow: visible !important;
height: 33px !important;
min-height: 33px !important;
max-height: 33px !important;
}
.tab-stack {
min-height: 0 !important;
max-height: 34px !important;
}
.tab-background {
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
margin-block: 0 !important;
padding: 0 !important;
outline: none !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Kill any Firefox default tab background effects */
.tab-background::before,
.tab-background::after {
display: none !important;
}
/* ============================================
INACTIVE TABS
============================================ */
.tabbrowser-tab:not([selected]) .tab-background,
.tabbrowser-tab:not([selected]):not([multiselected]) .tab-background {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
.tabbrowser-tab:not([selected]):not([multiselected]):hover .tab-background {
background-color: var(--chrome-hover) !important;
}
/* Hide all tab separators */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
/* preserve only for selected tab (overridden below) */
}
.tabbrowser-tab:not([selected])::before {
display: none !important;
}
/* ============================================
ACTIVE TAB - CHROME STYLE
============================================ */
.tabbrowser-tab[selected] .tab-background {
background: var(--chrome-active) !important;
background-color: var(--chrome-active) !important;
background-image: none !important;
border-radius: 8px 8px 0 0 !important;
box-shadow: var(--chrome-tab-shadow) !important;
}
.tabbrowser-tab[selected] {
z-index: 2 !important;
overflow: visible !important;
}
/* Inverted rounded corner - LEFT side (on the tab itself, not tab-background) */
.tabbrowser-tab[selected]::before {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: -8px !important;
width: 8px !important;
height: 8px !important;
background: transparent !important;
background-image: radial-gradient(circle at 0 0, transparent 8px, var(--chrome-active) 8.5px) !important;
z-index: 3 !important;
pointer-events: none !important;
}
/* Inverted rounded corner - RIGHT side (on the tab itself, not tab-background) */
.tabbrowser-tab[selected]::after {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
right: -8px !important;
width: 8px !important;
height: 8px !important;
background: transparent !important;
background-image: radial-gradient(circle at 8px 0, transparent 8px, var(--chrome-active) 8.5px) !important;
z-index: 3 !important;
pointer-events: none !important;
}
/* ============================================
TAB TEXT
============================================ */
.tab-label {
font-size: 12px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.tabbrowser-tab:not([selected]) .tab-label {
opacity: var(--chrome-label-inactive-opacity) !important;
}
.tabbrowser-tab[selected] .tab-label {
opacity: 1 !important;
}
/* ============================================
TOOLBAR (blends with active tab)
============================================ */
#nav-bar {
background-color: var(--chrome-active) !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
margin-top: -1px !important;
padding-top: 4px !important;
margin-left: 6px !important;
margin-right: 6px !important;
border-radius: 10px 10px 0 0 !important;
}
/* Remove any separator between tabs and nav-bar */
#navigator-toolbox {
border-bottom: none !important;
box-shadow: none !important;
}
#navigator-toolbox::after {
display: none !important;
border: none !important;
}
/* ============================================
NEW TAB BUTTON
============================================ */
#tabs-newtab-button,
#TabsToolbar #new-tab-button {
border-radius: 8px 8px 0 0 !important;
padding: 4px 8px !important;
}
#tabs-newtab-button:hover,
#TabsToolbar #new-tab-button:hover {
background-color: var(--chrome-hover) !important;
}
/* ============================================
CLOSE BUTTON ON TABS
============================================ */
.tab-close-button {
border-radius: 50% !important;
padding: 2px !important;
width: 18px !important;
height: 18px !important;
}
.tab-close-button:hover {
background-color: var(--chrome-close-hover) !important;
}
/* ============================================
MULTISELECTED TABS
============================================ */
.tabbrowser-tab[multiselected] .tab-background {
background-color: var(--chrome-multiselected) !important;
border-radius: 8px 8px 0 0 !important;
}
/* ============================================
UNIFIED BACKGROUND COLOR
============================================ */
/* Make the entire window background the same color */
#main-window,
#navigator-toolbox,
#titlebar {
background-color: var(--chrome-bg) !important;
}
/* ============================================
CONTENT AREA - ROUNDED CORNERS + PADDING
============================================ */
/* Padding around the web content */
#browser {
background-color: var(--chrome-bg) !important;
padding: 0 6px 6px 6px !important;
}
#appcontent {
background-color: var(--chrome-bg) !important;
}
/* Round the content panels (no top rounding - connects to nav-bar) */
.browserStack,
browser[type="content"],
#tabbrowser-tabpanels {
border-radius: 0 0 10px 10px !important;
overflow: hidden !important;
box-shadow: var(--chrome-card-shadow) !important;
}
Raw
vimium-vomnibar.css
/* ============================================================
CLAUDE PALETTE VOMNIBAR THEME — READABILITY FIX
Fixes: source/title/url running together, long URL overflow,
low hierarchy contrast
============================================================
chrome://extensions → Vimium → Options → Custom Vomnibar CSS
============================================================ */
/* ── Main panel ── */
#vomnibar {
top: 8vh;
left: 50%;
transform: translateX(-50%);
width: min(660px, calc(100% - 32px));
background: #faf9f7;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(0, 0, 0, 0.05),
0 12px 32px rgba(0, 0, 0, 0.10),
0 32px 64px rgba(0, 0, 0, 0.07);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Inter", "Helvetica Neue", sans-serif;
overflow: hidden;
}
/* ── Search area ── */
#vomnibar-search-area {
padding: 18px 20px 14px;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
/* ── Input ── */
#vomnibar input {
font-size: 16px;
font-weight: 400;
height: auto;
padding: 0;
line-height: 1.5;
background: transparent;
color: #111;
border: none;
box-shadow: none;
width: 100%;
outline: none;
box-sizing: border-box;
caret-color: #111;
}
#vomnibar input::placeholder { color: rgba(0, 0, 0, 0.28); }
/* ── Results list ── */
#vomnibar ul {
border-radius: 0 0 14px 14px;
padding: 6px 8px 10px;
max-height: 70vh;
overflow-y: auto;
}
/* ── Each row ── */
#vomnibar li {
border-bottom: none;
padding: 7px 10px;
font-size: 15px;
color: #1a1a1a;
border-radius: 8px;
margin: 1px 0;
transition: background 80ms ease;
/* Prevent any overflow bleeding */
overflow: hidden;
}
#vomnibar li:last-of-type { border-bottom: none; margin-bottom: 2px; }
/* ── Selected row ── */
#vomnibar li.selected { background: #edecea; }
/* ── top-half: source badge + title on one line ── */
#vomnibar li .top-half {
display: flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
overflow: hidden;
}
/* ── Source badge (history / domain / bookmark) ── */
#vomnibar li .source {
flex-shrink: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: lowercase;
color: #999;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
padding: 1px 5px;
line-height: 1.6;
}
/* ── Title ── */
#vomnibar li .title,
#vomnibar li em {
color: #111;
font-weight: 500;
font-size: 15.5px;
font-style: normal;
margin: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Matched chars in title ── */
#vomnibar li .match { color: #111; font-weight: 700; }
#vomnibar li em .match,
#vomnibar li .title .match { color: #111; font-weight: 700; }
/* ── bottom-half: URL, truncated ── */
#vomnibar li .bottom-half {
display: block;
margin-top: 1px;
padding: 0;
/* Truncate long URLs — the biggest readability fix */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* ── URL text ── */
#vomnibar li .url {
font-size: 13.5px;
color: #999;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
/* Remove the default float that causes overlap */
float: none;
}
/* ── Relevancy score (hide it) ── */
#vomnibar li .relevancy { display: none; }
/* ── Icon ── */
#vomnibar li .icon {
padding: 0 8px 0 0;
opacity: 0.45;
vertical-align: middle;
flex-shrink: 0;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.10);
border-radius: 3px;
}
/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
#vomnibar {
background: #1c1b19;
border-color: rgba(255, 255, 255, 0.07);
box-shadow:
0 0 0 0.5px rgba(0, 0, 0, 0.4),
0 12px 32px rgba(0, 0, 0, 0.4),
0 32px 64px rgba(0, 0, 0, 0.3);
}
#vomnibar-search-area { border-bottom-color: rgba(255, 255, 255, 0.07); }
#vomnibar input { color: #e8e6e0; }
#vomnibar input::placeholder { color: rgba(255, 255, 255, 0.22); }
#vomnibar li { color: #d4d0c8; }
#vomnibar li.selected { background: #2a2925; }
#vomnibar li .title,
#vomnibar li em { color: #e8e6e0; }
#vomnibar li .source {
color: #666;
background: rgba(255, 255, 255, 0.06);
}
#vomnibar li .url { color: #666; }
#vomnibar li .match { color: #e8e6e0; }
#vomnibar li em .match,
#vomnibar li .title .match { color: #e8e6e0; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment