feat(home:firefox): minor adjustments to ooksfox css

This commit is contained in:
ooks-io 2024-08-12 19:13:57 +12:00
parent 8f3a3a8be8
commit 3d4b7f6b40

View file

@ -3,174 +3,151 @@
fonts, fonts,
... ...
}: }:
# css with palette;
'' #css
/* minimal firefox css ooks */ ''
/* minimal firefox css ooks */
/* ===== Color Variables and Root Styles ===== */ /* ===== Color Variables and Root Styles ===== */
:root { :root {
/* Base colors */ /* Fonts */
--base00: #${palette.base00}; /* ---- */ --font-mono: ${fonts.monospace.family}, monospace;
--base01: #${palette.base01}; /* --- */ }
--base02: #${palette.base02}; /* -- */
--base03: #${palette.base03}; /* - */
--base04: #${palette.base04}; /* + */
--base05: #${palette.base05}; /* ++ */
--base06: #${palette.base06}; /* +++ */
--base07: #${palette.base07}; /* ++++ */
/* Accent colors */ /* ===== General UI Modifications ===== */
--base08: #${palette.base08}; /* red */ /* Hide status panel */
--base09: #${palette.base09}; /* orange */ #statuspanel { display: none !important; }
--base0A: #${palette.base0A}; /* yellow */
--base0B: #${palette.base0B}; /* green */
--base0C: #${palette.base0C}; /* aqua/cyan */
--base0D: #${palette.base0D}; /* blue */
--base0E: #${palette.base0E}; /* purple */
--base0F: #${palette.base0F}; /* brown */
/* UI-specific colors */ /* Remove border radius from menus */
--toolbar-bgcolor: red; menupopup, panel { --panel-border-radius: 0px !important; }
--tab-active-bg-color: red; menu, menuitem, menucaption { border-radius: 0px !important; }
/* Fonts */ /* Hide navigation context menu items */
--font-mono: ${fonts.monospace.family}, monospace; menupopup > #context-navigation,
} menupopup > #context-sep-navigation { display: none !important; }
/* ===== General UI Modifications ===== */ /* Hide various toolbar buttons */
/* Hide status panel */ #back-button,
#statuspanel { display: none !important; } #forward-button,
#reload-button,
#stop-button,
#home-button,
#library-button,
#PanelUI-button,
#unified-extensions-button,
#star-button,
#reader-mode-button,
#save-to-pocket-button,
#tracking-protection-icon-container,
#page-action-buttons,
#fxa-toolbar-menu-button,
#identity-box { display: none !important; }
/* Remove border radius from menus */ /* Hide customizable UI springs */
menupopup, panel { --panel-border-radius: 0px !important; } #customizableui-special-spring1,
menu, menuitem, menucaption { border-radius: 0px !important; } #customizableui-special-spring2 { display: none; }
/* Hide navigation context menu items */ /* Hide Personal Toolbar */
menupopup > #context-navigation, #PersonalToolbar { display: none !important; }
menupopup > #context-sep-navigation { display: none !important; }
/* Hide various toolbar buttons */ /* ===== URL Bar Styling ===== */
#back-button,
#forward-button,
#reload-button,
#stop-button,
#home-button,
#library-button,
#PanelUI-button,
#unified-extensions-button,
#star-button,
#reader-mode-button,
#save-to-pocket-button,
#tracking-protection-icon-container,
#page-action-buttons,
#fxa-toolbar-menu-button,
#identity-box { display: none !important; }
/* Hide customizable UI springs */ #urlbar-container {
#customizableui-special-spring1, margin-left: 0 !important;
#customizableui-special-spring2 { display: none; } margin-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0!important;
}
/* Hide Personal Toolbar */ #urlbar-background {
#PersonalToolbar { display: none !important; } border: solid 1px !important;
border-radius: 0 !important;
outline: none !important;
background: #${crust} !important;
}
/* ===== URL Bar Styling ===== */ #navigator-toolbox {
/* Style input box */ border: none !important;
moz-input-box { border-bottom: solid 1px !important;\
background: var(--base01) !important; }
color: var(--base07) !important;
border: solid 1px var(--base05) !important;
}
/* Style input box */ /* Hide URL bar go button */
#urlbar-input-container { .urlbar-go-button { display: none !important; }
background: var(--base08) !important;
color: var(--base07) !important;
border: none !important;
border-radius: 5 !important;
}
/* Hide URL bar go button */ /* Remove navigation bar background */
.urlbar-go-button { display: none !important; } #nav-bar.browser-toolbar { background: none !important; }
/* Remove navigation bar background */ /* Position and style navigation bar */
#nav-bar.browser-toolbar { background: none !important; }
/* Position and style navigation bar */ #nav-bar {
#nav-bar { text-align: center;
opacity: 0; min-height: 0 !important;
text-align: center; max-height: 0 !important;
position: fixed !important; height: 0 !important;
border: solid 1px var(--nix-fg1) !important; }
top: 30px;
left: 25%;
right: 25%;
z-index: 1;
}
/* Expand navigation bar on focus */ /* Expand navigation bar on focus */
#nav-bar:focus-within { #nav-bar:focus-within {
opacity: 1; max-height: 40px !important;
max-height: 40px !important; height: 60px !important;
height: 60px !important; min-height: 15px !important;
min-height: 15px !important; }
}
/* ===== Tab Bar Styling ===== */ /* ===== Tab Bar Styling ===== */
/* Hide title bar buttons and spacer */ /* Hide title bar buttons and spacer */
.titlebar-close, .titlebar-close,
.titlebar-spacer { display: none !important; } .titlebar-spacer { display: none !important; }
/* Remove tab margin */ /* Remove tab margin */
#titlebar { #titlebar {
--proton-tab-block-margin: 0px !important; --proton-tab-block-margin: 0px !important;
--tab-block-margin: 0px !important; --tab-block-margin: 0px !important;
} }
/* Remove tab shadows */ /* Remove tab shadows */
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
box-shadow: none !important; box-shadow: none !important;
} }
/* Hide tab-related buttons */ /* Hide tab-related buttons */
#alltabs-button, #alltabs-button,
#tabs-newtab-button, #tabs-newtab-button,
#firefox-view-button, #firefox-view-button,
#new-tab-button, #new-tab-button,
.tab-close-button { display: none !important; } .tab-close-button { display: none !important; }
/* Style tabs */ /* Style tabs */
tab { tab {
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: bold; font-weight: bold;
} }
/* Set tab and tab bar height */ /* Set tab and tab bar height */
#TabsToolbar, .tabbrowser-tab { #TabsToolbar, .tabbrowser-tab {
max-height: 35px !important; max-height: 35px !important;
background: var(--base00) !important; background: #${crust} !important;
padding-bottom:0 !important; border: none;
border: none; }
}
/* Center tabs when not overflowing */ /* Center tabs when not overflowing */
#tabbrowser-arrowscrollbox:not([overflowing]) { #tabbrowser-arrowscrollbox:not([overflowing]) {
--uc-flex-justify: center; --uc-flex-justify: center;
} }
scrollbox[orient="horizontal"] { scrollbox[orient="horizontal"] {
justify-content: var(--uc-flex-justify, initial); justify-content: var(--uc-flex-justify, initial);
} }
/* Style selected tabs */ /* Style selected tabs */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
border: solid 1px var(--base05) !important; border: solid 1px var(--base05) !important;
color: var(--base07); color: var(--base07);
background: var(--base02) background: var(--base02)
} }
/* Style non-selected tabs */ /* Style non-selected tabs */
tab:not([selected="true"]) { tab:not([selected="true"]) {
/* border: solid 1px var(--base05) !important; */ /* border: solid 1px var(--base05) !important; */
background: var(--base01) !important; background: var(--base01) !important;
} }
'' ''