ooks/ooknet
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

firefox: rework useChrome theme

Browse source
This commit is contained in:
ooks-io 2024-11-15 15:20:11 +11:00
parent a99ae9e8b8
commit 0251c7883b
2 changed files with 171 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/home/workstation/browser/firefox/default.nix
View file

@ -3,6 +3,7 @@
lib, lib,
inputs', inputs',
osConfig, osConfig,
hozen,
... ...
}: let }: let
inherit (lib) mkIf mkMerge; inherit (lib) mkIf mkMerge;
@ -45,7 +46,7 @@ in {
# onepassword-password-manager # cannot get this to work unfree issue. # onepassword-password-manager # cannot get this to work unfree issue.
]; ];
settings = import ./settings/ooksJs.nix; settings = import ./settings/ooksJs.nix;
userChrome = import ./theme/ooksfox.nix {inherit fonts palette;}; userChrome = import ./theme/ooksfox.nix {inherit fonts hozen;};
userContent = import ./theme/penguinFoxContent.nix; userContent = import ./theme/penguinFoxContent.nix;
}; };
profiles.testing = { profiles.testing = {

290
modules/home/workstation/browser/firefox/theme/ooksfox.nix
View file

@ -1,152 +1,200 @@
{ {
palette, hozen,
fonts, fonts,
... ...
}: }: let
with palette; inherit (hozen) color;
#css in
#css
'' ''
/* minimal firefox css ooks */ :root {
/* ===== Color Variables and Root Styles ===== */ --clr-menu: #${color.layout.menu};
:root { --clr-fg: #${color.typography.text};
/* Fonts */ --clr-secondary: #${color.secondary.base};
--font-mono: ${fonts.monospace.family}, monospace;
}
/* ===== General UI Modifications ===== */
/* Hide status panel */
#statuspanel { display: none !important; }
/* Remove border radius from menus */ --border: 1px solid var(--clr-fg);
menupopup, panel { --panel-border-radius: 0px !important; } --border-active: 1px solid var(--clr-fg);
menu, menuitem, menucaption { border-radius: 0px !important; } --border-inactive: 1px solid var(--clr-secondary);
/* Hide navigation context menu items */ --font-base: ${fonts.monospace.family};
menupopup > #context-navigation,
menupopup > #context-sep-navigation { display: none !important; }
/* Hide various toolbar buttons */ }
#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 */ * {
#customizableui-special-spring1, border-radius: 0 !important;
#customizableui-special-spring2 { display: none; } font-family: ${fonts.monospace.family};
}
/* Hide Personal Toolbar */ #nav-bar {
#PersonalToolbar { display: none !important; } border: var(--border) !important;
background-color: var(--clr-menu) !important;
}
#urlbar {
text-align: center;
}
/* ===== URL Bar Styling ===== */ #urlbar-background {
background-color: transparent !important;
border: unset !important;
box-shadow: unset !important;
}
#urlbar-container { #urlbar-container {
margin-left: 0 !important; padding: 0 !important;
margin-right: 0 !important; }
padding-top: 0 !important;
padding-bottom: 0!important;
}
#urlbar-background { .urlbarView {
border: solid 1px !important; text-align: start;
border-radius: 0 !important; border: var(--border) !important;
outline: none !important; margin: 0;
background: #${crust} !important; padding: 0 !important;
} background-color: var(--clr-menu);
}
#navigator-toolbox { .urlbar-input-container {
border: none !important; margin: 0px !important;
border-bottom: solid 1px !important;\ }
}
/* Hide URL bar go button */
.urlbar-go-button { display: none !important; }
/* Remove navigation bar background */ #identity-icon {
#nav-bar.browser-toolbar { background: none !important; } color: red !important;
}
/* Position and style navigation bar */ #forward-button,
#stop-button,
#star-button-box,
#translations-button,
#reload-button,
#identity-box,
#tracking-protection-icon-container,
#save-to-pocket-button,
.urlbar-page-action,
.urlbar-go-button,
/* firefox account button */
#fxa-toolbar-menu-button,
/* hamburger menu icon */
#PanelUI-button,
#PersonalToolbar
{
display: none;
}
#nav-bar { .titlebar-buttonbox-container,
text-align: center; .tab-close-button,
min-height: 0 !important; .titlebar-spacer,
max-height: 0 !important; #tabs-newtab-button,
height: 0 !important; #alltabs-button,
} #firefox-view-button,
#new-tab-button {
display: none;
}
/* Expand navigation bar on focus */
#nav-bar:focus-within {
max-height: 40px !important;
height: 60px !important;
min-height: 15px !important;
}
/* ===== Tab Bar Styling ===== */ #tabbrowser-tabs {
/* Hide title bar buttons and spacer */ margin: 0 !important;
.titlebar-close, padding: 0 !important;
.titlebar-spacer { display: none !important; }
/* Remove tab margin */ margin-inline: 0px !important;
#titlebar { border: unset !important;
--proton-tab-block-margin: 0px !important; border-bottom: var(--border-inactive) !important;
--tab-block-margin: 0px !important; }
}
/* Remove tab shadows */ .tabbrowser-tab {
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { padding: 5px !important;
box-shadow: none !important; padding-left: 5px !important;
} }
/* Hide tab-related buttons */ .tabbrowser-tab[pinned] {
#alltabs-button, margin: 0px !important;
#tabs-newtab-button, padding: 5px !important;
#firefox-view-button, }
#new-tab-button,
.tab-close-button { display: none !important; }
/* Style tabs */ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
tab { margin-inline-start: 0px !important;
font-family: var(--font-mono); }
font-weight: bold;
}
/* Set tab and tab bar height */ .tab-stack {
#TabsToolbar, .tabbrowser-tab { margin-inline: 0 !important;
max-height: 35px !important; }
background: #${crust} !important; .tab-background {
border: none; border-radius: 0px;
} border: var(--border-inactive);
}
.tab-background[selected] {
border: var(--border-active);
}
/* Center tabs when not overflowing */ #TabsToolbar {
#tabbrowser-arrowscrollbox:not([overflowing]) { padding-left: 0px !important;
--uc-flex-justify: center; margin: 0;
} padding: 0;
}
scrollbox[orient="horizontal"] { root{
justify-content: var(--uc-flex-justify, initial); --uc-navbar-transform: -40px;
} }
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
/* Style selected tabs */ #navigator-toolbox > div{ display: contents; }
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { :root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
border: solid 1px var(--base05) !important; transform: translateY(var(--uc-navbar-transform))
color: var(--base07); }
background: var(--base02) :root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
} transform: none !important;
opacity: 1 !important;
}
/* Style non-selected tabs */ #nav-bar:not([customizing]){
tab:not([selected="true"]) { opacity: 0;
/* border: solid 1px var(--base05) !important; */ position: relative;
background: var(--base01) !important; z-index: 2;
} }
#titlebar{ position: relative; z-index: 3 }
#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox{
z-index: auto !important;
}
#navigator-toolbox:focus-within > .browser-toolbar{
transform: translateY(0);
opacity: 1;
}
#titlebar:hover ~ .browser-toolbar,
.browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
#nav-bar:hover,
#nav-bar:hover + #PersonalToolbar{
transform: translateY(0);
opacity: 1;
}
:root[sessionrestored] #urlbar[popover]{
opacity: 0;
pointer-events: none;
transform: translateY(var(--uc-navbar-transform));
}
#mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
#nav-bar:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#mainPopupSet:has(> [role="group"][panelopen]) ~ #navigator-toolbox > .browser-toolbar{
transform: translateY(0);
opacity: 1;
}
#nav-bar.browser-titlebar{
background: inherit;
}
#toolbar-menubar:not([autohide="true"]) ~ #nav-bar.browser-titlebar{
background-position-y: -28px; /* best guess, could vary */
border-top: none !important;
}
/* Move up the content view */
:root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
'' ''