diff options
Diffstat (limited to 'home-manager/resources/firefox/userChrome.css')
| -rw-r--r-- | home-manager/resources/firefox/userChrome.css | 245 |
1 files changed, 106 insertions, 139 deletions
diff --git a/home-manager/resources/firefox/userChrome.css b/home-manager/resources/firefox/userChrome.css index 2bbb2a1..7ec4588 100644 --- a/home-manager/resources/firefox/userChrome.css +++ b/home-manager/resources/firefox/userChrome.css @@ -1,64 +1,43 @@ +/* TODO create separate repo for this */ /* TOP BAR */ #navigator-toolbox { --uc-navigationbar-width: 40vw; -} - -/* Remove overflow button */ -#nav-bar-overflow-button { display: none; } - -/* remove alltabs button */ -#alltabs-button { display: none; } - -/* Change background color of toolbar */ -#navigator-toolbox-background { - background: var(--toolbar-field-border-color) !important; -} - -/* Change background color of bookmarks toolbar */ -#PersonalToolbar { - background: var(--toolbox-bgcolor) !important; -} -/* Adjust spacing of toolbar items */ -#PlacesToolbarItems { - gap: .35rem; - margin-block: .2rem; -} - -/* Fix vertical spacing of tabs */ -#TabsToolbar { - margin-top: -1px; -} + #TabsToolbar { + /* Move new tab to far right */ + #tabbrowser-arrowscrollbox-periphery { margin-left: auto } + /* remove alltabs button */ + #alltabs-button { display: none } + } -/* Move new tab to far right */ -#tabbrowser-arrowscrollbox-periphery { - margin-left: auto; -} + #nav-bar { + /* Remove overflow button */ + #nav-bar-overflow-button { display: none } + } -/* Fix spacing around tabs by removing nav bar top border */ -#nav-bar { - border: none !important; + #PersonalToolbar { + /* Change background color of bookmarks toolbar */ + background: var(--toolbox-bgcolor) !important; + /* Adjust spacing of toolbar items */ + #PlacesToolbarItems { gap: .35rem; margin-block: .2rem } + } } /* Media queries for width of nav bar */ @media screen and (max-width: 1000px) { - #navigator-toolbox { - --uc-navigationbar-width: 50vw; - } + #navigator-toolbox { --uc-navigationbar-width: 50vw } } @media screen and (max-width: 800px) { - #navigator-toolbox { - --uc-navigationbar-width: 60vw; - } + #navigator-toolbox { --uc-navigationbar-width: 60vw } } /* Change look of tabs in smaller view */ @media screen and (max-width: 800px) { - .tab-background { - margin-block: .2em !important; - } - #TabsToolbar { - margin-left: 5px; + #TabsToolbar-customization-target { + /* TODO fix w/o. Don't allow tabbar to move up when moving tabs */ + height: 37px; + /* Make tabs fill more vertical space */ + .tab-background { margin-block: 1px !important } } } @@ -66,61 +45,56 @@ /* COMBINE TOP BAR */ /* Combine top bar into single line if width >= 800px */ @media screen and (min-width: 800px) { - :root { - --uc-toolbar-height: 36px; /* Half height bar */ - } + /* Half height bar */ + :root { --uc-toolbar-height: 36px } /* Modify these to change relative widths or default height */ #navigator-toolbox { margin-bottom: 0px; padding-top: 1px; /* Top bar is cut off otherwise */ - } - - #TabsToolbar { - margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */ - margin-top: -4px; - margin-bottom: 2px; - } - #tabbrowser-tabs { - height: var(--uc-toolbar-height); - } - - /* Tabs extend to bottom of bar */ - .tab-background { - margin-bottom: 0 !important; - margin-top: 3px !important; /* See above navigator-toolbox rule. Avoid cutting off top */ - } - - /* Center tab buttons */ - #tabs-newtab-button, - #alltabs-button - { - margin-top: 4px !important; - } - - /* Integrate url / nav bar */ - #nav-bar { - margin-right:calc(100vw - var(--uc-navigationbar-width)); - margin-top: calc(0px - var(--uc-toolbar-height)); - border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0; - border-right: 1px solid ThreeDShadow !important; - box-shadow: 0 0 4px rgba(0,0,0,.4) !important; - } - - /* 1px margin on touch density causes tabs to be too high */ - .tab-close-button { - margin-top: 0 !important - } - - /* Make opened urlbar overlay the toolbar */ - #urlbar[open]:focus-within { - min-width: 50vw !important; - } - - /* Remove min and max width of urlbar */ - #urlbar-container { - width: 0 !important; + #TabsToolbar { + margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */ + margin-top: -4px; + margin-bottom: 2px; + + #TabsToolbar-customization-target { + height: var(--uc-toolbar-height); + + /* Tabs extend to bottom of bar */ + .tab-background { + margin-bottom: 0 !important; + margin-top: 3px !important; /* See above navigator-toolbox rule. Avoid cutting off top */ + } + + /* 1px margin on touch density causes tabs to be too high */ + .tab-close-button { margin-top: 0 !important } + } + + /* Center tab buttons */ + #tabs-newtab-button, #alltabs-button { margin-top: 4px !important } + } + + /* Integrate url / nav bar */ + #nav-bar { + margin-right:calc(100vw - var(--uc-navigationbar-width)); + margin-top: calc(0px - var(--uc-toolbar-height)); + border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0; + border-right: 1px solid ThreeDShadow !important; + box-shadow: 0 0 4px rgba(0,0,0,.4) !important; + /* Fix spacing around tabs by removing nav bar top border */ + border: none !important; + + #urlbar-container { + /* Remove min and max width of urlbar */ + width: 0 !important; + /* Make opened urlbar overlay the toolbar */ + #urlbar[open]:focus-within { min-width: 50vw !important } + } + } + + /* Bottom of tags is cut off by 1px without this */ + #PersonalToolbar { margin-top: 1px } } /* Fix customization view */ @@ -149,48 +123,43 @@ findbar { background: -moz-headerbar Field !important; border-top-width: 0px !important; border-bottom: 1px solid ThreeDShadow; -} -findbar .findbar-container { - padding-bottom: 5px !important; /* Move search bar closer to left edge */ - padding-top: 2px !important; /* Move search bar closer to left edge */ - height: max-content !important; - gap: 2px; - justify-content: space-between; - flex-wrap: wrap; -} - -/* Force textbox to fill up first line */ -findbar .findbar-textbox { - width: 100% !important; - background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */ -} - -/* Hide description showing wrap conditions etc. */ -findbar description { - display: none; -} - -/* Move found matches label (roughly) into the textbox */ -findbar label.found-matches, -findbar description { - position: absolute; - top: 6.5px; - right: 110px; - color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important; - /* So this text overrides the text below, TODO find a more elegant solution */ - padding-inline: 1ex; - background: Field; -} - -/* Show description when it says "Phrase Not Found" */ -findbar description[status=notfound] { - display: inline-block; -} - -/* Force checkboxes onto second line */ -findbar .findbar-container hbox { - width: 100%; + .findbar-container { + padding-bottom: 5px !important; /* Move search bar closer to left edge */ + padding-top: 2px !important; /* Move search bar closer to left edge */ + height: max-content !important; + gap: 2px; + justify-content: space-between; + flex-wrap: wrap; + + /* Force textbox to fill up first line */ + .findbar-textbox { + width: 100% !important; + background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */ + } + + description { + /* Hide description showing wrap conditions etc. */ + display: none; + /* Show description when it says "Phrase Not Found" */ + &[status=notfound] { display: inline-block } + } + + /* Move found matches label (roughly) into the textbox */ + label.found-matches, + description { + position: absolute; + top: 6.5px; + right: 110px; + color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important; + /* So this text overrides the text below, TODO find a more elegant solution */ + padding-inline: 1ex; + background: Field; + } + + /* Force checkboxes onto second line */ + hbox { width: 100% } + } } @@ -200,9 +169,7 @@ findbar .findbar-container hbox { background: -moz-headerbar Field !important; border-top: 1px solid ThreeDShadow !important; z-index: 1000; /* To not be affected by shadow from navbar */ - } - /* Space out bookmark items */ - .bookmark-item .toolbarbutton-text { - padding: 2.5px 4px; + /* Space out bookmark items */ + .bookmark-item .toolbarbutton-text { padding: 2.5px 4px } } } |