diff --git a/README.md b/README.md index 6cf90ad..24fa601 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ # firefox-qutebrowser -Simple firefox theme that mimics qutebrowser. \ No newline at end of file +Simple firefox css chrome theme that mimics qutebrowser. + +Original version of this theme is available [here](https://github.com/Dook97/firefox-qutebrowser-userchrome) + +## Installation + +Just copy `userChrome.css` to the chrome directory in your firefox profile. diff --git a/userChrome.css b/userChrome.css new file mode 100644 index 0000000..72a2167 --- /dev/null +++ b/userChrome.css @@ -0,0 +1,239 @@ +:root { + --tab-active-bg-color: #292c3c; + --tab-inactive-bg-color: #51576d; + --tab-active-fg-fallback-color: #c6d0f5; /* color of text in an active tab without a container */ + --tab-inactive-fg-fallback-color: #c6d0f5; /* color of text in an inactive tab without a container */ + --urlbar-focused-bg-color: #414559; + --urlbar-not-focused-bg-color: #232634; + --toolbar-bgcolor: #303446 !important; + --tab-font: 'JetBrainsMono Nerd Font'; + --urlbar-font: 'JetBrainsMono Nerd Font'; + + /* try increasing if you encounter problems */ + --urlbar-height-setting: 30px; + --tab-min-height: 20px !important; + + /* I don't recommend you touch this unless you know what you're doing */ + --arrowpanel-menuitem-padding: 2px !important; + --arrowpanel-border-radius: 0px !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --toolbarbutton-border-radius: 0px !important; + --toolbarbutton-inner-padding: 2px 2px !important; + --toolbar-field-focus-background-color: var(--urlbar-focused-bg-color) !important; + --toolbar-field-background-color: var(--urlbar-not-focused-bg-color) !important; + --toolbar-field-focus-border-color: transparent !important; +} + +/* --- GENERAL DEBLOAT ---------------------------------- */ + +/* Bottom left page loading status or url preview */ +#statuspanel { display: none !important; } + +/* Hide dropdown that appears when you type in search bar */ +.autocomplete-history-popup, panel[type=autocomplete-richlistbox], panel[type=autocomplete] { + display: none !important; +} + +/* remove radius from right-click popup */ +menupopup, panel { --panel-border-radius: 0px !important; } +menu, menuitem, menucaption { border-radius: 0px !important; } + +/* no stupid large buttons in right-click menu */ +menupopup > #context-navigation { display: none !important; } +menupopup > #context-sep-navigation { display: none !important; } + +/* --- DEBLOAT NAVBAR ----------------------------------- */ + +#back-button { display: none; } +#forward-button { display: none; } +#reload-button { display: none; } +#stop-button { display: none; } +#home-button { display: none; } +#library-button { display: none; } +#fxa-toolbar-menu-button { display: none; } +/* empty space before and after the url bar */ +#customizableui-special-spring1, #customizableui-special-spring2 { display: none; } + +/* --- STYLE NAVBAR ------------------------------------ */ + +/* remove padding between toolbar buttons */ +toolbar .toolbarbutton-1 { padding: 0 0 !important; } + +/* add padding to the right of the last button so that it doesn't touch the edge of the window */ +#PanelUI-menu-button { + padding: 0px 4px 0px 0px !important; +} + +#urlbar-container { + --urlbar-container-height: var(--urlbar-height-setting) !important; + margin-left: 7px !important; + margin-right: 5px !important; + padding-top: 0px !important; + padding-bottom: 0px !important; + font-family: var(--urlbar-font, 'monospace'); + font-size: 12px; +} + +#urlbar { + --urlbar-height: var(--urlbar-height-setting) !important; + --urlbar-toolbar-height: var(--urlbar-height-setting) !important; + min-height: var(--urlbar-height-setting) !important; + border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25)) !important; +} + +#urlbar-input { + margin-left: 0.8em !important; + margin-right: 0.4em !important; +} + +#navigator-toolbox { + border: none !important; +} + +/* keep pop-up menus from overlapping with navbar */ +#widget-overflow { margin: 0 !important; } +#appMenu-popup { margin: 0 !important; } +#customizationui-widget-panel { margin: 0 !important; } +#unified-extensions-panel { margin: 0 !important; } + +/* --- UNIFIED EXTENSIONS BUTTON ------------------------ */ + +/* make extension icons smaller */ +#unified-extensions-view { + --uei-icon-size: 20px; +} + +/* hide bloat */ +.unified-extensions-item-message-deck, +#unified-extensions-view > .panel-header, +#unified-extensions-view > toolbarseparator, +#unified-extensions-manage-extensions { + display: none !important; +} + +/* add 3px padding on the top and the bottom of the box */ +.panel-subview-body { + padding: 3px 0px !important; +} + +#unified-extensions-view .unified-extensions-item-menu-button { + margin-inline-end: 0 !important; +} + +#unified-extensions-view .toolbarbutton-icon { + padding: 0 !important; +} + +.unified-extensions-item-contents { + line-height: 1 !important; + white-space: nowrap !important; +} + +/* --- DEBLOAT URLBAR ----------------------------------- */ + +#identity-box { display: none; } +#pageActionButton { display: none; } +#pocket-button { display: none; } +#urlbar-zoom-button { display: none; } +#tracking-protection-icon-container { display: none !important; } +#reader-mode-button{ display: none !important; } +#star-button { display: none; } +#star-button-box:hover { background: inherit !important; } + +/* Go to arrow button at the end of the urlbar when searching */ +#urlbar-go-button { display: none; } + +/* remove container indicator from urlbar */ +#userContext-label, #userContext-indicator { display: none !important;} + +/* --- STYLE TAB TOOLBAR -------------------------------- */ + +#titlebar { + --proton-tab-block-margin: 0px !important; + --tab-block-margin: 0px !important; +} + +#TabsToolbar, .tabbrowser-tab { + max-height: var(--tab-min-height) !important; + font-size: 11px !important; +} + +/* Change color of normal tabs */ +tab:not([selected="true"]) { + background-color: var(--tab-inactive-bg-color) !important; + color: var(--identity-icon-color, var(--tab-inactive-fg-fallback-color)) !important; +} + +tab { + font-family: var(--tab-font, monospace); + font-weight: bold; + border: none !important; +} + +/* safari style tab width */ +.tabbrowser-tab[fadein] { + max-width: 100vw !important; + border: none +} + +/* Hide close button on tabs */ +#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none !important; } + +.tabbrowser-tab { + /* remove border between tabs */ + padding-inline: 0px !important; + /* reduce fade effect of tab text */ + --tab-label-mask-size: 1em !important; + /* fix pinned tab behaviour on overflow */ + overflow-clip-margin: 0px !important; +} + +/* Tab: selected colors */ +#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { + background: var(--tab-active-bg-color) !important; + color: var(--identity-icon-color, var(--tab-active-fg-fallback-color)) !important; +} + +/* Tab: hovered colors */ +#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content { + background: var(--tab-active-bg-color) !important; +} + +/* hide window controls */ +.titlebar-buttonbox-container { display: none; } + +/* remove titlebar spacers */ +.titlebar-spacer { display: none !important; } + +/* disable tab shadow */ +#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: none !important; +} + +/* remove dark space between pinned tab and first non-pinned tab */ +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > +#tabbrowser-arrowscrollbox > +.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { + margin-inline-start: 0px !important; +} + +/* remove dropdown menu button which displays all tabs on overflow */ +#alltabs-button { display: none !important } + +/* fix displaying of pinned tabs on overflow */ +#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + height: var(--tab-min-height) !important; +} + +/* remove overflow scroll buttons */ +#scrollbutton-up, #scrollbutton-down { display: none !important; } + +/* remove new tab button */ +#tabs-newtab-button { + display: none !important; +} + +/* hide private browsing indicator */ +#private-browsing-indicator-with-label { + display: none; +}