126 lines
4.6 KiB
SCSS
126 lines
4.6 KiB
SCSS
@include NotOption("userChrome.tab.photon_like_contextline") {
|
|
.tab-context-line {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
$containerPositionX: 9px;
|
|
--uc-container-position-x: #{ $containerPositionX };
|
|
&:-moz-locale-dir(rtl) {
|
|
--uc-container-position-x: #{ $containerPositionX * -1 };
|
|
}
|
|
|
|
--uc-container-position-y-default: 11.5px;
|
|
--uc-container-position-y-bottom: calc(50% + var(--uc-container-position-y-default));
|
|
--uc-container-position-y: var(--uc-container-position-y-bottom);
|
|
@include Option("userChrome.tab.container.on_top") {
|
|
--uc-container-position-y: calc(var(--uc-container-position-y-bottom) * -1);
|
|
}
|
|
|
|
// Pinned Tab - Titlechanged Indicator override
|
|
--uc-titlechanged-container-position-x: 32%, 50%, 70%;
|
|
}
|
|
:root[uidensity="compact"] #tabbrowser-tabs {
|
|
--uc-container-position-y-default: 10.5px;
|
|
|
|
--uc-titlechanged-container-position-x: 30%, 50%, 70%;
|
|
}
|
|
:root[uidensity="touch"] #tabbrowser-tabs {
|
|
--uc-container-position-y-default: 12.5px;
|
|
}
|
|
.tab-content::before {
|
|
/* Box Model */
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));
|
|
|
|
/* Shape */
|
|
border-bottom: 2px solid var(--identity-icon-color);
|
|
width: 25%;
|
|
opacity: 0.75;
|
|
}
|
|
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
|
width: calc(100% - 30px);
|
|
opacity: 1;
|
|
}
|
|
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
|
width: calc(100% - 33px);
|
|
}
|
|
|
|
/* Animate */
|
|
@include Animate {
|
|
.tab-content:not([titlechanged])::before {
|
|
transition: 0.15s var(--animation-easing-function);
|
|
transition-property: width, opacity;
|
|
}
|
|
}
|
|
|
|
/* Pinned Tab */
|
|
.tabbrowser-tab[pinned] .tab-content::before {
|
|
transform: translateY(var(--uc-container-position-y));
|
|
width: 16px;
|
|
}
|
|
@include Option("userChrome.tab.close_button_at_pinned") {
|
|
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
|
opacity: 0;
|
|
}
|
|
// Don't hide at userChrome.tab.close_button_at_pinned.background
|
|
}
|
|
|
|
@include NotOption("userChrome.tab.container.on_top") {
|
|
.tab-content[titlechanged]::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Pinned Tab - Titlechanged Indicator override */
|
|
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
|
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
|
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
|
|
--dotted-identity-image: radial-gradient(
|
|
circle,
|
|
var(--identity-icon-color),
|
|
var(--identity-icon-color) 2px,
|
|
transparent 2px
|
|
);
|
|
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
|
|
background-position-x: var(--uc-titlechanged-container-position-x) !important;
|
|
}
|
|
|
|
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
|
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
|
background-position-y: top var(--uc-container-position-y) !important;
|
|
}
|
|
|
|
/* Pinned Tab - Titlechanged & soundplaying */
|
|
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
|
> .tab-stack
|
|
> .tab-content[attention]:not([selected]),
|
|
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
|
> .tab-stack
|
|
> .tab-content[pinned][titlechanged]:not([selected]) {
|
|
--uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
|
|
}
|
|
:root[uidensity="compact"]
|
|
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
|
> .tab-stack
|
|
> .tab-content[attention]:not([selected]),
|
|
:root[uidensity="compact"]
|
|
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
|
> .tab-stack
|
|
> .tab-content[pinned][titlechanged]:not([selected]) {
|
|
--uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
|
|
}
|
|
}
|
|
|
|
@include Option("userChrome.tab.container.on_top") {
|
|
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
|
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
|
background-position-y: top var(--uc-container-position-y-bottom) !important;
|
|
}
|
|
}
|