diff --git a/.mozilla/chrome/userChrome.css b/.mozilla/chrome/userChrome.css new file mode 100644 index 0000000..157c45e --- /dev/null +++ b/.mozilla/chrome/userChrome.css @@ -0,0 +1,163 @@ +/* Dark Blank Pages */ + +tabbrowser tabpanels { background-color: rgb(19,19,20) !important; } +browser { background-color: #131314 !important; } + +/* Centered Tab Labels*/ + +.tab-label-container{ display: grid; justify-content: safe center } +.tab-label,.tab-secondary-label{ overflow: hidden } +.tabbrowser-tab[selected]:not(:hover) .tab-label-container, +#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container{ margin-inline-end: 7px } + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_line_loading_indicator.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Hide the normal loading indicator (just show tab-icon instead) and make the top tab-line bounce left-to-right */ + +@keyframes tab-loading-line-anim{from{background-position-x: left}to{background-position-x: right}} +.tabbrowser-tab[busy] > .tab-stack > .tab-background::before, +.tab-background[selected]::before{ + content: ""; + display: -moz-box; + background-image: linear-gradient(currentColor,currentColor); + background-size: 100%; + transition: background-size 5000ms linear; +} +.tab-throbber{ display: none } +.tab-icon-image[src]{ display: -moz-box } +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [sharing]){ display: none !important; } +.tab-icon-image{ filter:saturate(60%) opacity(50%) !important; } +.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [sharing], :not([pinned])) { +opacity: 1 !important; + bottom: 1px !important; + padding: 0px !important; +fill-opacity: 1 !important; +} + +.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){ + grid-template-areas: "a s"; +} +.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; } +.tab-icon-overlay, +.tab-icon-image, +.tab-throbber{ opacity: 1 !important; } + +.tab-icon-overlay:not([pinned]){ + padding: 0px !important; + margin-inline: -3px 4px !important; +} + +.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { +opacity: 1 !important; +margin-top: -7px !important; + padding: 1px !important; +stroke: none !important; +fill-opacity: 1 !important; +} + +####################################### +#tabbrowser-tabpanels{ + background-color: var(--uc-light-bkgnd-color,rgb(46,54,69)) !important; +} +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Always show tab close button on hover and never otherwise */ +.tabbrowser-tab .tab-close-button{ + display:none; +} +.tabbrowser-tab:not([pinned]):hover .tab-close-button{ + display:-moz-box !important; +} + +:root{ + --multirow-n-rows: 3; + --multirow-tab-min-width: 100px; + --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */ +} + +#tabbrowser-tabs{ + min-height: unset !important; + padding-inline-start: 0px !important;} + +@-moz-document url(chrome://browser/content/browser.xhtml){ + + #scrollbutton-up~spacer, + #scrollbutton-up, + #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) } + + scrollbox[part][orient="horizontal"]{ + display: flex; + flex-wrap: wrap; + overflow-y: auto; + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows)); + scrollbar-color: currentColor transparent; + scrollbar-width: thin; + scroll-snap-type: y mandatory; + } +} + +.scrollbox-clip[orient="horizontal"], +#tabbrowser-arrowscrollbox{ + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; +} + +.tabbrowser-tab{ scroll-snap-align: start; } + +.tabbrowser-tab[fadein]:not([pinned]){ + min-width: var(--multirow-tab-min-width) !important; + flex-grow: var(--multirow-tab-dynamic-width);} + +#tabs-newtab-button{ margin-bottom: 0 !important; } + +#main-menubar:last-child{ padding-inline-end: 40px } + +#toolbar-menubar > #menubar-items:hover{z-index: 2;} +#file-menu{ + padding-inline-start: 30px; + background: url(chrome://browser/skin/settings.svg) no-repeat 10px; + fill: currentColor; + -moz-context-properties: fill +} + +:root {--tab-min-height: 12px !important; + --tab-max-height: 12px !important;} + +#tabbrowser-tabs { --tab-min-height: var(--tab-min-height) !important; } +#tab-background { max-height: var(--tab-min-height) !important; } +.tab-label-container{ height: var(--tab-min-height) !important; } +.tabs-newtab-button{ margin: var(--newtab-margin) !important; } + +/* Disable animation for selected and pinned tabs */ +.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none } + +/* Always show tab close button on hover and never otherwise */ +.tabbrowser-tab .tab-close-button{display:always;} +.tabbrowser-tab:not([pinned]):hover .tab-close-button{ display:-moz-box !important;} +.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important;} + +/* This style makes Firefox use your linux system style for window control buttons. +Normally those are only used with default system (auto) theme. */ +.titlebar-button{ list-style-image: none !important; appearance: auto !important;} +.titlebar-min {-moz-default-appearance: -moz-window-button-restore !important;} +.titlebar-max {-moz-default-appearance: -moz-window-button-maximize !important;} +.titlebar-restore {-moz-default-appearance: -moz-window-button-restore !important;} +.titlebar-close {-moz-default-appearance: -moz-window-button-restore !important;} + +/* This style hides the main toolbar and shows it when the cursor is +over the tabs toolbar as well as whenever the focus is inside nav-bar, such as when urlbar is focused. */ +:root{ --uc-navbar-transform: -41px } +:root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck) +{ transform: translateY(var(--uc-navbar-transform))} +:root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck) +{transform: none !important; opacity: 1 !important; } +#nav-bar:not([customizing]) +{ opacity: 0; transition: transform 0ms !important; position: relative; z-index: 2; } +#TabsToolbar{ position: relative; z-index: 3; } +#titlebar:hover ~ .browser-toolbar, +#nav-bar:hover, #nav-bar:hover + #PersonalToolbar +{ transform: translateY(0); opacity: 1; transition-duration: 0ms !important;} +:root[sessionrestored]:not([inFullscreen]) > body > #browser{ margin-top: var(--uc-navbar-transform); }