firefox: rework useChrome theme
This commit is contained in:
parent
a99ae9e8b8
commit
0251c7883b
2 changed files with 171 additions and 122 deletions
|
|
@ -3,6 +3,7 @@
|
|||
lib,
|
||||
inputs',
|
||||
osConfig,
|
||||
hozen,
|
||||
...
|
||||
}: let
|
||||
inherit (lib) mkIf mkMerge;
|
||||
|
|
@ -45,7 +46,7 @@ in {
|
|||
# onepassword-password-manager # cannot get this to work unfree issue.
|
||||
];
|
||||
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;
|
||||
};
|
||||
profiles.testing = {
|
||||
|
|
|
|||
|
|
@ -1,152 +1,200 @@
|
|||
{
|
||||
palette,
|
||||
hozen,
|
||||
fonts,
|
||||
...
|
||||
}:
|
||||
with palette;
|
||||
}: let
|
||||
inherit (hozen) color;
|
||||
in
|
||||
#css
|
||||
''
|
||||
/* minimal firefox css ooks */
|
||||
|
||||
/* ===== Color Variables and Root Styles ===== */
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-mono: ${fonts.monospace.family}, monospace;
|
||||
|
||||
--clr-menu: #${color.layout.menu};
|
||||
--clr-fg: #${color.typography.text};
|
||||
--clr-secondary: #${color.secondary.base};
|
||||
|
||||
|
||||
--border: 1px solid var(--clr-fg);
|
||||
--border-active: 1px solid var(--clr-fg);
|
||||
--border-inactive: 1px solid var(--clr-secondary);
|
||||
|
||||
--font-base: ${fonts.monospace.family};
|
||||
|
||||
}
|
||||
|
||||
/* ===== General UI Modifications ===== */
|
||||
/* Hide status panel */
|
||||
#statuspanel { display: none !important; }
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: ${fonts.monospace.family};
|
||||
}
|
||||
|
||||
/* Remove border radius from menus */
|
||||
menupopup, panel { --panel-border-radius: 0px !important; }
|
||||
menu, menuitem, menucaption { border-radius: 0px !important; }
|
||||
|
||||
/* Hide navigation context menu items */
|
||||
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,
|
||||
#customizableui-special-spring2 { display: none; }
|
||||
|
||||
/* Hide Personal Toolbar */
|
||||
#PersonalToolbar { display: none !important; }
|
||||
|
||||
/* ===== URL Bar Styling ===== */
|
||||
|
||||
#urlbar-container {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0!important;
|
||||
#nav-bar {
|
||||
border: var(--border) !important;
|
||||
background-color: var(--clr-menu) !important;
|
||||
}
|
||||
#urlbar {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#urlbar-background {
|
||||
border: solid 1px !important;
|
||||
border-radius: 0 !important;
|
||||
outline: none !important;
|
||||
background: #${crust} !important;
|
||||
background-color: transparent !important;
|
||||
border: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
border: none !important;
|
||||
border-bottom: solid 1px !important;\
|
||||
#urlbar-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide URL bar go button */
|
||||
.urlbar-go-button { display: none !important; }
|
||||
|
||||
/* Remove navigation bar background */
|
||||
#nav-bar.browser-toolbar { background: none !important; }
|
||||
|
||||
/* Position and style navigation bar */
|
||||
|
||||
#nav-bar {
|
||||
text-align: center;
|
||||
min-height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
height: 0 !important;
|
||||
.urlbarView {
|
||||
text-align: start;
|
||||
border: var(--border) !important;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
background-color: var(--clr-menu);
|
||||
}
|
||||
|
||||
/* Expand navigation bar on focus */
|
||||
#nav-bar:focus-within {
|
||||
max-height: 40px !important;
|
||||
height: 60px !important;
|
||||
min-height: 15px !important;
|
||||
.urlbar-input-container {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
/* ===== Tab Bar Styling ===== */
|
||||
/* Hide title bar buttons and spacer */
|
||||
.titlebar-close,
|
||||
.titlebar-spacer { display: none !important; }
|
||||
|
||||
/* Remove tab margin */
|
||||
#titlebar {
|
||||
--proton-tab-block-margin: 0px !important;
|
||||
--tab-block-margin: 0px !important;
|
||||
#identity-icon {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
/* Remove tab shadows */
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: none !important;
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Hide tab-related buttons */
|
||||
#alltabs-button,
|
||||
.titlebar-buttonbox-container,
|
||||
.tab-close-button,
|
||||
.titlebar-spacer,
|
||||
#tabs-newtab-button,
|
||||
#alltabs-button,
|
||||
#firefox-view-button,
|
||||
#new-tab-button,
|
||||
.tab-close-button { display: none !important; }
|
||||
|
||||
/* Style tabs */
|
||||
tab {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
#new-tab-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Set tab and tab bar height */
|
||||
#TabsToolbar, .tabbrowser-tab {
|
||||
max-height: 35px !important;
|
||||
background: #${crust} !important;
|
||||
border: none;
|
||||
|
||||
#tabbrowser-tabs {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
margin-inline: 0px !important;
|
||||
border: unset !important;
|
||||
border-bottom: var(--border-inactive) !important;
|
||||
}
|
||||
|
||||
/* Center tabs when not overflowing */
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) {
|
||||
--uc-flex-justify: center;
|
||||
.tabbrowser-tab {
|
||||
padding: 5px !important;
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
scrollbox[orient="horizontal"] {
|
||||
justify-content: var(--uc-flex-justify, initial);
|
||||
.tabbrowser-tab[pinned] {
|
||||
margin: 0px !important;
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
/* Style selected tabs */
|
||||
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
|
||||
border: solid 1px var(--base05) !important;
|
||||
color: var(--base07);
|
||||
background: var(--base02)
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
|
||||
margin-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
/* Style non-selected tabs */
|
||||
tab:not([selected="true"]) {
|
||||
/* border: solid 1px var(--base05) !important; */
|
||||
background: var(--base01) !important;
|
||||
.tab-stack {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
.tab-background {
|
||||
border-radius: 0px;
|
||||
border: var(--border-inactive);
|
||||
}
|
||||
.tab-background[selected] {
|
||||
border: var(--border-active);
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
padding-left: 0px !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
root{
|
||||
--uc-navbar-transform: -40px;
|
||||
}
|
||||
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
|
||||
|
||||
#navigator-toolbox > div{ display: contents; }
|
||||
:root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
||||
transform: translateY(var(--uc-navbar-transform))
|
||||
}
|
||||
:root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#nav-bar:not([customizing]){
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
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); }
|
||||
''
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue