mirror of
https://github.com/bwya77/autofit-tabs.git
synced 2026-07-22 11:50:30 +00:00
266 lines
No EOL
9.3 KiB
CSS
266 lines
No EOL
9.3 KiB
CSS
:root {
|
|
/* Base dimensions */
|
|
--autofit-min-width: 40px;
|
|
--autofit-left-padding: 12px;
|
|
--autofit-close-button-left-padding: 30px;
|
|
--autofit-close-button-right-padding: 8px;
|
|
--autofit-transition-duration: 375ms;
|
|
--autofit-max-width: none;
|
|
|
|
/* Additional dimensions from TypeScript */
|
|
--autofit-icon-width: 20px;
|
|
}
|
|
|
|
/* Ensure tab interior elements have proper spacing */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-max-width .workspace-tab-header-inner {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* Handle close button visibility */
|
|
.workspace-tab-header.autofit-tab:not(.is-active) .workspace-tab-header-inner-close-button {
|
|
opacity: 0;
|
|
/* Ensure close button space is always reserved even when not visible */
|
|
visibility: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.workspace-tab-header.autofit-tab:not(.is-active):hover .workspace-tab-header-inner-close-button {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Measurement */
|
|
.autofit-tab-measure {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
font: inherit;
|
|
left: -9999px;
|
|
}
|
|
|
|
/* Make sure we're respecting the transition duration setting */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab {
|
|
transition-property: width, min-width, max-width;
|
|
transition-duration: var(--autofit-transition-duration);
|
|
transition-timing-function: ease-in-out;
|
|
will-change: width;
|
|
}
|
|
|
|
/* Synchronize transitions for all child elements */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner,
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-icon,
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-title {
|
|
transition: inherit;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Prevent icon swapping/flashing during tab transitions */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header-inner-icon svg {
|
|
transition: none !important;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Ensuring proper sizing for autofit-tab & cleanup */
|
|
.workspace-tab-header.autofit-tab {
|
|
width: var(--header-width) !important;
|
|
min-width: var(--header-width) !important;
|
|
max-width: var(--header-width) !important;
|
|
transition: width var(--autofit-transition-duration) ease-in-out,
|
|
min-width var(--autofit-transition-duration) ease-in-out,
|
|
max-width var(--autofit-transition-duration) ease-in-out !important;
|
|
position: relative;
|
|
/* Reset some defaults to ensure proper layout */
|
|
display: flex !important;
|
|
contain: layout style;
|
|
}
|
|
|
|
/* Prevent icon changes during transitions */
|
|
.workspace-tab-header-inner-icon.stable-icon {
|
|
transition: none !important;
|
|
transform: translateZ(0) !important;
|
|
backface-visibility: hidden !important;
|
|
pointer-events: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Prevent icon changes completely during transitions */
|
|
.workspace-tab-header.icon-transition .workspace-tab-header-inner-icon {
|
|
transition: none !important;
|
|
pointer-events: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Apply a temporary overlay to prevent DOM structure changes from being visible */
|
|
.workspace-tab-header.icon-transition::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Help ensure proper cleanup when removing max-width setting */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-cleanup {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
max-width: none !important;
|
|
transition: none !important;
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Ensure we only style the root content area tabs */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab {
|
|
width: var(--header-width) !important;
|
|
min-width: var(--header-width) !important;
|
|
max-width: var(--header-width) !important;
|
|
position: relative;
|
|
}
|
|
|
|
/* Title styles - fix structure especially when cleaning up max-width tabs */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner,
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-cleanup .workspace-tab-header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-left: var(--autofit-left-padding);
|
|
position: relative;
|
|
}
|
|
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-title {
|
|
white-space: nowrap;
|
|
overflow: visible;
|
|
text-overflow: clip !important;
|
|
}
|
|
|
|
/* Icon styles - only for root content area */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-icon {
|
|
width: var(--autofit-icon-width);
|
|
display: var(--autofit-icon-display, flex); /* Use flex by default, none when icon width is 0 */
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: none !important;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Active tab indicator styling is managed by the theme */
|
|
|
|
/* Only applying styles to the main editor tabs, NOT sidedock or left pane */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container-inner {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none; /* Hide scrollbar in Firefox */
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
position: relative; /* Needed for tab positioning */
|
|
}
|
|
|
|
/* Hide scrollbar in Webkit browsers - only main editor tabs */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container-inner::-webkit-scrollbar {
|
|
height: 0;
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
/* Tab title styles - base for all tabs */
|
|
.workspace-tab-header-inner-title {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* Styles for tabs with max-width setting - handle overflow and ensure spacing */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-max-width .workspace-tab-header-inner-title {
|
|
text-overflow: ellipsis !important;
|
|
overflow: hidden !important;
|
|
max-width: calc(100% - var(--autofit-close-button-left-padding) - 8px);
|
|
}
|
|
|
|
/* Add padding-right to autofit tab titles to ensure space for close button */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-title {
|
|
padding-right: var(--autofit-close-button-left-padding);
|
|
}
|
|
|
|
|
|
|
|
/* Ensure tab container styling - only main editor tabs */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Closing animation - collapse completely */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-closing {
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-closing .workspace-tab-header-inner {
|
|
visibility: hidden;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Ensure tabs don't wrap - only main editor tabs */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-tab-list {
|
|
flex-wrap: nowrap !important;
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Ensure tabs outside of the visible container area don't interfere with interactions */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab.out-of-view {
|
|
visibility: hidden;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Add a class to specifically fix the draggable area problem */
|
|
.workspace-split.mod-vertical.mod-root .mod-top-left-space .workspace-tab-header-container {
|
|
position: relative;
|
|
z-index: 5; /* Ensure it stays above hidden tabs */
|
|
}
|
|
|
|
/* Fix position of close button to prevent jitter when icon width is 0 */
|
|
.workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab .workspace-tab-header-inner-close-button {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-right: var(--autofit-close-button-right-padding) !important;
|
|
}
|
|
|
|
/* Hide tab icons when setting is enabled - only in main editor tabs */
|
|
body.autofit-hide-tab-icons .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner-icon {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Hide the img elements inside the icon container - only in main editor tabs */
|
|
body.autofit-hide-tab-icons .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner-icon img {
|
|
width: 0px !important;
|
|
height: 0px !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Also hide svg icons if present - only in main editor tabs */
|
|
body.autofit-hide-tab-icons .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner-icon svg {
|
|
width: 0px !important;
|
|
height: 0px !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust left padding when icons are hidden - only in main editor tabs */
|
|
body.autofit-hide-tab-icons .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner {
|
|
padding-left: var(--autofit-left-padding) !important;
|
|
}
|
|
|
|
/* Ensure title takes full space when icons are hidden - only in main editor tabs */
|
|
body.autofit-hide-tab-icons .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner-title {
|
|
margin-left: 0 !important;
|
|
} |