77 lines
1.9 KiB
CSS
77 lines
1.9 KiB
CSS
[data-slot="titlebar-tab-item"] {
|
|
user-select: none;
|
|
}
|
|
|
|
[data-slot="titlebar-tab-item"] a {
|
|
outline: none;
|
|
}
|
|
|
|
[data-slot="titlebar-v2"]
|
|
[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:focus-visible, [data-state="focus"]):not(
|
|
:disabled
|
|
) {
|
|
outline: none;
|
|
background-color: var(--v2-overlay-simple-overlay-hover);
|
|
}
|
|
|
|
[data-slot="titlebar-tab-item"]
|
|
[data-component="icon-button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-slot="titlebar-tab-item"]:has([data-component="icon-button-v2"]:focus-visible) [data-slot="titlebar-tab-close"] {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
[data-slot="titlebar-tab-item"]:has([data-component="icon-button-v2"]:focus-visible)
|
|
[data-slot="titlebar-tab-close-fade"] {
|
|
background-image: var(--active-bg);
|
|
}
|
|
|
|
@keyframes titlebar-tab-fade-left {
|
|
from {
|
|
visibility: hidden;
|
|
}
|
|
to {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@keyframes titlebar-tab-fade-right {
|
|
from {
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
/* The narrow ranges preserve the binary thresholds of scrollLeft > 0 and
|
|
remaining scroll distance > 1px. Hidden defaults make an inactive timeline
|
|
(no overflow) a no-op. Unsupported browsers also degrade to no fades. */
|
|
[data-slot="titlebar-tabs"] {
|
|
timeline-scope: --titlebar-tabs-scroll;
|
|
|
|
[data-slot^="titlebar-tabs-fade-"] {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@supports (animation-timeline: --titlebar-tabs-scroll) and (timeline-scope: --titlebar-tabs-scroll) {
|
|
[data-slot="titlebar-tabs-scroll"] {
|
|
scroll-timeline: --titlebar-tabs-scroll x;
|
|
}
|
|
|
|
[data-slot="titlebar-tabs-fade-left"] {
|
|
animation: titlebar-tab-fade-left linear both;
|
|
animation-timeline: --titlebar-tabs-scroll;
|
|
animation-range: 0 0.1px;
|
|
}
|
|
|
|
[data-slot="titlebar-tabs-fade-right"] {
|
|
animation: titlebar-tab-fade-right linear both;
|
|
animation-timeline: --titlebar-tabs-scroll;
|
|
animation-range: calc(100% - 1.1px) calc(100% - 1px);
|
|
}
|
|
}
|