diff --git a/userChrome.css b/userChrome.css index 547e561..043fffb 100644 --- a/userChrome.css +++ b/userChrome.css @@ -69,8 +69,6 @@ /** Root - Reduce Padding ***************************************************/ :root { /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ @@ -207,34 +205,7 @@ background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important; } - /** Tab Bar - Connect to window *********************************************/ - .tab-background { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; - margin-bottom: 0px !important; - } - - .tab-content { - margin-top: var(--tab-block-margin); - } - - .tab-stack { - margin-top: 0px !important; - margin-bottom: 0px !important; - } - /** Selected Tab - Color like toolbar ***************************************/ - :root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ - } -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { - /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) - */ - background-image: linear-gradient(transparent, transparent), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), - var(--lwt-header-image, none) !important; - } - /* Multi Selected Color */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme { background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), @@ -250,60 +221,6 @@ opacity: .15; } - /** Selected Tab - Box Shadow ***********************************************/ - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus) > .tab-stack > .tab-background:-moz-lwtheme { - /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; - } - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; - } - - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; - } - - /** Selected Tab - Bottom Rounded Corner ************************************/ - #tabbrowser-tabs { - --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 1px; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before, - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - /* Box */ - content: "" !important; - display: block !important; - position: absolute !important; - z-index: 1 !important; - - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; - - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var(--tabs-border-color, transparent) !important; - -moz-context-properties: fill, stroke !important; - - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before { - left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important; - background-image: url(./icons/tab-bottom-corner-left.svg); - } - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - left: auto; - right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - background-image: url(./icons/tab-bottom-corner-right.svg); - } - /** Unselected Tab - Divide line ********************************************/ #tabbrowser-arrowscrollbox { position: absolute; @@ -344,43 +261,6 @@ } /* New tab button - Looks like tab ******************************************/ - #tabs-newtab-button { - /* Original: - margin: 0 0 var(--tabs-navbar-shadow-size) !important - => Can't ovrride style. Therefore, we should approach it by bypass. - */ - --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; - - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; - } - - #tabs-newtab-button > .toolbarbutton-icon { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ - } - - /* Coner Rounding */ - #tabs-newtab-button:hover { - /* Color */ - fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */ - -moz-context-properties: fill !important; - - /* Corner Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); - } - - #tabs-newtab-button .toolbarbutton-icon { - padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; - -moz-context-properties: fill, fill-opacity; - fill: var(--toolbarbutton-icon-fill); - fill-opacity: var(--toolbarbutton-icon-fill-opacity); - } /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {