Create userChrome.css
This commit is contained in:
kittenlikeasmallcat
GitHub
parent
a7b0394454
commit
58afc932aa
|
|
@ -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); }
|
||||
Loading…
Reference in New Issue