1342 lines
35 KiB
CSS
1342 lines
35 KiB
CSS
:root {
|
|
--channeltabs-red: #f23f42;
|
|
--channeltabs-blue: #0052b6;
|
|
--channeltabs-yellow: #f0b132;
|
|
--channeltabs-green: #24934f;
|
|
--channeltabs-black: #000;
|
|
--channeltabs-white: #fff;
|
|
--channeltabs-orange: #e67e22;
|
|
--channeltabs-pink: #ff73fa;
|
|
}
|
|
|
|
.vc-channeltabs-icon {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.vc-channeltabs-guild-acronym-icon {
|
|
height: 1.25rem;
|
|
width: 1.5rem;
|
|
min-width: 1.5rem;
|
|
border-radius: 50%;
|
|
padding-top: 0.25rem;
|
|
background-color: var(--background-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vc-channeltabs-name-text {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-left: 0.125rem;
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
transition:
|
|
color 0.15s ease,
|
|
font-weight 0.1s ease,
|
|
transform 0.2s ease;
|
|
}
|
|
|
|
.vc-channeltabs-tab-inner {
|
|
border-radius: 12px;
|
|
padding: 0 28px 0 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: gap 0.15s ease, padding 0.2s ease-in-out;
|
|
}
|
|
|
|
.vc-channeltabs-tab-container,
|
|
.vc-channeltabs-bookmark-container {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-container {
|
|
position: relative;
|
|
}
|
|
|
|
.vc-channeltabs-container {
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
-webkit-app-region: no-drag;
|
|
background-color: var(--background-primary);
|
|
box-shadow: inset 0 1px 0 var(--background-base-low);
|
|
}
|
|
|
|
.vc-channeltabs-container-top {
|
|
padding-left: 4px;
|
|
box-shadow: inset 0 -1px 0 var(--background-base-low);
|
|
grid-area: notice;
|
|
z-index: 102;
|
|
}
|
|
|
|
/* as its in the same region as notices, it needs to hide itself when a notice is shown
|
|
there's no permanent notices, right? */
|
|
[class*="notice"] + .vc-channeltabs-container-top {
|
|
z-index: 1;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vc-channeltabs-separator {
|
|
width: 98%;
|
|
height: 1px;
|
|
background: var(--input-border-default, var(--input-border));
|
|
margin: 4px auto;
|
|
}
|
|
|
|
.vc-channeltabs-scroller {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
margin-top: -15px;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
.vc-channeltabs-scroller::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* tab scroller for horizontal overflow */
|
|
.vc-channeltabs-tab-scroller {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-top: 16px;
|
|
padding-bottom: 15px;
|
|
margin-top: -15px;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
.vc-channeltabs-tab-scroller-following {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.vc-channeltabs-tab-scroller::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.vc-channeltabs-bookmarks {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
padding: 2px 0 2px 8px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-placeholder-text {
|
|
color: var(--text-muted);
|
|
padding: 0.25rem 0 0 0.25rem;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-star {
|
|
fill: none;
|
|
stroke: var(--text-muted);
|
|
stroke-width: 0.075rem;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-star:hover {
|
|
stroke: var(--interactive-icon-hover);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-star-checked {
|
|
fill: var(--brand-experiment, var(--brand-500));
|
|
stroke: var(--brand-experiment, var(--brand-500));
|
|
}
|
|
|
|
.vc-channeltabs-bookmark {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: calc(8rem * var(--tab-width-scale, 1));
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
position: relative;
|
|
transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-wider {
|
|
max-width: calc(12rem * var(--tab-width-scale, 1));
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-folder {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark .vc-channeltabs-name-text {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-icon {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
border-radius: 50%;
|
|
background-color: var(--background-primary);
|
|
text-align: center;
|
|
}
|
|
|
|
.vc-channeltabs-channel-info {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vc-channeltabs-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 12px;
|
|
width: calc(12rem * var(--tab-width-scale, 1));
|
|
min-width: 0;
|
|
margin: 0 4px;
|
|
background-color: transparent;
|
|
border: 1px solid var(--background-mod-muted);
|
|
transition:
|
|
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
box-shadow 0.15s ease,
|
|
opacity 0.15s ease;
|
|
min-height: calc(38px * var(--tab-height-scale, 1));
|
|
padding: calc(6px * var(--tab-height-scale, 1)) 8px;
|
|
position: relative;
|
|
cursor: grab;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vc-channeltabs-tab:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.vc-channeltabs-tab-resize-handle {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 6px;
|
|
cursor: ew-resize;
|
|
z-index: 10;
|
|
opacity: 0;
|
|
background: var(--brand-500);
|
|
border-radius: 0 11px 11px 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.vc-channeltabs-tab-resize-handle:hover {
|
|
opacity: 0.7 !important;
|
|
}
|
|
|
|
.vc-channeltabs-no-resize-handle-animation .vc-channeltabs-tab-resize-handle {
|
|
transition: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-tab:hover .vc-channeltabs-tab-resize-handle {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.vc-channeltabs-tab-resizing {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.vc-channeltabs-tab-resizing * {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.vc-channeltabs-tab.vc-channeltabs-wider:not(.vc-channeltabs-tab-compact) {
|
|
width: calc(16rem * var(--tab-width-scale, 1));
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact {
|
|
width: auto;
|
|
min-width: calc(3rem * var(--tab-width-scale, 1));
|
|
transition: all 0.4s ease-out;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact .vc-channeltabs-tab-inner {
|
|
padding-right: 0;
|
|
transition: padding 0.4s ease-out;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact:hover .vc-channeltabs-tab-inner,
|
|
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-tab-inner {
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact .vc-channeltabs-name-text {
|
|
max-width: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
margin-left: 0.125rem;
|
|
transform: translateX(-20px);
|
|
transition:
|
|
max-width 0.4s ease-out,
|
|
opacity 0.4s ease-out,
|
|
transform 0.4s ease-out;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact:hover .vc-channeltabs-name-text,
|
|
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
|
|
max-width: 200px;
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected {
|
|
transform: translateY(-1px);
|
|
background-color: var(--background-base-low);
|
|
border: 1px solid var(--brand-500);
|
|
border-bottom: 2px solid var(--brand-500);
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-dark-theme.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
|
|
font-weight: 600;
|
|
color: var(--white-500);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-light-theme.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon span {
|
|
color: var(--white-500);
|
|
}
|
|
|
|
.vc-channeltabs-tab-container svg {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected svg,
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-close-button svg {
|
|
color: var(--white-500);
|
|
fill: var(--white-500);
|
|
}
|
|
|
|
.vc-channeltabs-container [class*="iconContainer"] {
|
|
margin: 0 -0.25rem 0 0;
|
|
pointer-events: none;
|
|
height: 1rem;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.vc-channeltabs-container [class*="numberBadge"] {
|
|
background-color: var(--channeltabs-red) !important;
|
|
color: var(--channeltabs-white);
|
|
border-radius: 50%;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.vc-channeltabs-ghost-tab {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.vc-channeltabs-hoverable:hover,
|
|
.vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) {
|
|
transform: translateY(-1px) scale(1.02);
|
|
background-color: var(--background-secondary-alt);
|
|
border-color: var(--border-subtle);
|
|
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
.vc-channeltabs-tab:active:not(.vc-channeltabs-tab-selected) {
|
|
transform: translateY(0) scale(0.98);
|
|
transition-duration: 0.05s;
|
|
}
|
|
|
|
.vc-channeltabs-button {
|
|
background-color: transparent;
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-shell {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-shell-open {
|
|
z-index: 3;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-field {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
transform: translateY(-50%) scaleX(0.92);
|
|
transform-origin: right center;
|
|
transition: width 0.18s ease, opacity 0.15s ease, transform 0.18s ease;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-shell-open .vc-channeltabs-bookmark-search-field {
|
|
width: 160px;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateY(-50%) scaleX(1);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-input {
|
|
padding-right: 34px !important;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark-search-button:hover {
|
|
color: var(--interactive-icon-hover);
|
|
}
|
|
|
|
.vc-channeltabs-new-button {
|
|
padding: 4px;
|
|
margin: 0 4px;
|
|
border-radius: 4px;
|
|
background-color: var(--background-base-low);
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vc-channeltabs-new-button:hover {
|
|
background-color: var(--background-mod-subtle);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.vc-channeltabs-new-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-new-button svg {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.vc-channeltabs-new-button:hover svg {
|
|
color: var(--interactive-icon-hover);
|
|
animation: vc-channeltabs-plus-spin 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes vc-channeltabs-plus-spin {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(90deg) scale(1.15);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(90deg) scale(1);
|
|
}
|
|
}
|
|
|
|
.vc-channeltabs-close-button {
|
|
height: 1rem;
|
|
padding: 0;
|
|
margin: 0 0 0 4px;
|
|
border-radius: 50%;
|
|
color: var(--text-muted);
|
|
transition: all 0.15s ease, transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.vc-channeltabs-close-button:hover {
|
|
background-color: var(--background-mod-subtle);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.vc-channeltabs-close-button:active {
|
|
transform: rotate(90deg) scale(0.9);
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-close-button {
|
|
color: var(--white-500);
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-close-button:hover {
|
|
background-color: color-mix(in srgb, white 15%, transparent);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-close-button:active {
|
|
transform: rotate(90deg) scale(0.9);
|
|
}
|
|
|
|
.vc-channeltabs-close-button-compact {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin-left: 0.35rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transform: translateX(-10px) scale(0.8);
|
|
transition:
|
|
opacity 0.3s ease-out 0.2s,
|
|
transform 0.3s ease-out 0.2s;
|
|
right: 4px;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact,
|
|
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-close-button.vc-channeltabs-close-button-compact:hover {
|
|
background-color: var(--background-mod-subtle);
|
|
transform: translateX(0) scale(1) rotate(90deg) !important;
|
|
transition:
|
|
opacity 0.3s ease-out 0.2s,
|
|
transform 0.2s ease-in-out,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-close-button.vc-channeltabs-close-button-compact:active {
|
|
transform: translateX(0) scale(0.9) rotate(90deg) !important;
|
|
transition:
|
|
opacity 0.3s ease-out 0.2s,
|
|
transform 0.2s ease-in-out,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
.vc-channeltabs-preview-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: calc(12rem * var(--tab-width-scale, 1));
|
|
padding: 0.125rem 0;
|
|
min-width: 0;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid var(--input-border-default, var(--input-border));
|
|
}
|
|
|
|
.vc-channeltabs-preview-tab-compact {
|
|
width: unset;
|
|
min-width: unset;
|
|
}
|
|
|
|
.vc-channeltabs-preview-tab > :is(.vc-channeltabs-emoji-container,
|
|
.vc-channeltabs-typing-indicator,
|
|
[data-has-mention]) {
|
|
display: none;
|
|
}
|
|
|
|
.vc-channeltabs-preview-text {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vc-channeltabs-tab-container .vc-channeltabs-new-button,
|
|
.vc-channeltabs-tab-container .vc-channeltabs-hoverable,
|
|
.vc-channeltabs-tab-container .vc-channeltabs-button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.vc-channeltabs-tab-container .vc-channeltabs-hoverable,
|
|
.vc-channeltabs-tab-container .vc-channeltabs-button,
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-tab-container svg {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Red glow effect for tabs with mentions */
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.vc-channeltabs-tab:has([data-has-mention="true"]) {
|
|
animation: vc-channeltabs-mention-pulse 2s ease-in-out infinite;
|
|
box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
|
|
}
|
|
|
|
@keyframes vc-channeltabs-mention-pulse {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 12px rgb(242 63 66 / 80%), 0 0 24px rgb(242 63 66 / 50%);
|
|
}
|
|
}
|
|
|
|
/* Enhance glow for selected tabs with mentions */
|
|
.vc-channeltabs-tab-selected:has([data-has-mention="true"]) {
|
|
box-shadow:
|
|
0 1px 3px rgb(0 0 0 / 20%),
|
|
0 0 12px rgb(242 63 66 / 80%),
|
|
0 0 24px rgb(242 63 66 / 50%);
|
|
}
|
|
|
|
/* Pink Nitro glow effect (easter egg) */
|
|
.vc-channeltabs-tab-nitro {
|
|
animation: vc-channeltabs-nitro-pulse 3s ease-in-out infinite;
|
|
box-shadow: 0 0 10px rgb(255 115 250 / 70%), 0 0 20px rgb(255 115 250 / 40%);
|
|
}
|
|
|
|
@keyframes vc-channeltabs-nitro-pulse {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 10px rgb(255 115 250 / 70%), 0 0 20px rgb(255 115 250 / 40%);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 16px rgb(255 115 250 / 90%), 0 0 32px rgb(255 115 250 / 60%);
|
|
}
|
|
}
|
|
|
|
/* Enhanced Nitro glow for selected tab */
|
|
.vc-channeltabs-tab-selected.vc-channeltabs-tab-nitro {
|
|
box-shadow:
|
|
0 1px 3px rgb(0 0 0 / 20%),
|
|
0 0 16px rgb(255 115 250 / 90%),
|
|
0 0 32px rgb(255 115 250 / 60%);
|
|
}
|
|
|
|
/* Nitro icon gradient animation */
|
|
.vc-channeltabs-tab-nitro .vc-channeltabs-tab-inner svg {
|
|
filter: drop-shadow(0 0 2px rgb(255 115 250 / 80%));
|
|
}
|
|
|
|
.vc-channeltabs-tab-nitro .vc-channeltabs-tab-inner svg path {
|
|
fill: rgb(255 115 250) !important;
|
|
animation: vc-channeltabs-nitro-icon-gradient 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes vc-channeltabs-nitro-icon-gradient {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
fill: rgb(255 115 250);
|
|
}
|
|
|
|
50% {
|
|
fill: rgb(255 180 250);
|
|
}
|
|
}
|
|
|
|
/* quests active gradient when quests are running */
|
|
.vc-channeltabs-tab-quests-active {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.vc-channeltabs-tab-quests-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 11px;
|
|
background: linear-gradient(135deg,
|
|
transparent,
|
|
transparent 25%,
|
|
rgb(114 137 218) 40%,
|
|
rgb(88 101 242) 50%,
|
|
rgb(71 82 196) 60%,
|
|
transparent 75%,
|
|
transparent);
|
|
background-size: 300% 300%;
|
|
animation: vc-channeltabs-quests-diagonal 5s linear infinite;
|
|
opacity: 0.8;
|
|
filter: blur(2px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vc-channeltabs-tab-quests-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 11px;
|
|
animation: vc-channeltabs-quests-glow 3s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes vc-channeltabs-quests-diagonal {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
40% {
|
|
background-position: 100% 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
60%,
|
|
100% {
|
|
background-position: 0 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes vc-channeltabs-quests-glow {
|
|
0% {
|
|
box-shadow: 0 0 8px 1px rgb(114 137 218 / 60%);
|
|
}
|
|
|
|
33% {
|
|
box-shadow: 0 0 8px 1px rgb(88 101 242 / 60%);
|
|
}
|
|
|
|
66% {
|
|
box-shadow: 0 0 8px 1px rgb(71 82 196 / 60%);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 8px 1px rgb(114 137 218 / 60%);
|
|
}
|
|
}
|
|
|
|
/* Enhanced gradient for selected Quests tab with active quests */
|
|
.vc-channeltabs-tab-selected.vc-channeltabs-tab-quests-active::before {
|
|
opacity: 1;
|
|
filter: blur(3px);
|
|
}
|
|
|
|
.vc-channeltabs-tab-selected.vc-channeltabs-tab-quests-active::after {
|
|
animation: vc-channeltabs-quests-glow-selected 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes vc-channeltabs-quests-glow-selected {
|
|
0% {
|
|
box-shadow: 0 0 12px 2px rgb(114 137 218 / 80%);
|
|
}
|
|
|
|
33% {
|
|
box-shadow: 0 0 12px 2px rgb(88 101 242 / 80%);
|
|
}
|
|
|
|
66% {
|
|
box-shadow: 0 0 12px 2px rgb(71 82 196 / 80%);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 12px 2px rgb(114 137 218 / 80%);
|
|
}
|
|
}
|
|
|
|
/* Disable Quests active animations when setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-quests-active-animation .vc-channeltabs-tab-quests-active::before,
|
|
.vc-channeltabs-container.vc-channeltabs-no-quests-active-animation .vc-channeltabs-tab-quests-active::after {
|
|
animation: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* Tab closing animation */
|
|
@keyframes vc-channeltabs-tab-close {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
max-width: 100%;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(0.95);
|
|
max-width: 50%;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateX(-20px);
|
|
}
|
|
}
|
|
|
|
.vc-channeltabs-tab-closing {
|
|
animation: vc-channeltabs-tab-close 0.2s ease-in-out forwards;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* New tab slide-in animation */
|
|
@keyframes vc-channeltabs-tab-enter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8) translateX(-20px);
|
|
}
|
|
|
|
60% {
|
|
transform: scale(1.05) translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1) translateX(0);
|
|
}
|
|
}
|
|
|
|
.vc-channeltabs-tab-entering {
|
|
animation: vc-channeltabs-tab-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* Icon scale on selection */
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-icon,
|
|
.vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon {
|
|
animation: vc-channeltabs-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes vc-channeltabs-icon-pop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Drag and drop visual feedback */
|
|
.vc-channeltabs-tab-dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(3deg);
|
|
cursor: grabbing !important;
|
|
z-index: 1000;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Disable tab transitions when any tab is being dragged for smoother reordering */
|
|
.vc-channeltabs-tab-container:has(.vc-channeltabs-tab-dragging) .vc-channeltabs-tab:not(.vc-channeltabs-tab-dragging) {
|
|
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.vc-channeltabs-tab-drop-target {
|
|
position: relative;
|
|
}
|
|
|
|
.vc-channeltabs-tab-drop-target::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--brand-500);
|
|
border-radius: 3px;
|
|
animation: vc-channeltabs-drop-indicator 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes vc-channeltabs-drop-indicator {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
opacity: 0.6;
|
|
box-shadow: 0 0 8px var(--brand-500);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 12px var(--brand-500);
|
|
}
|
|
}
|
|
|
|
.vc-channeltabs-tab-container {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
/* animation override settings */
|
|
/* stylelint-disable no-descending-specificity */
|
|
|
|
/* Hover animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-hover-animation .vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Selection animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-selection-animation .vc-channeltabs-tab-selected {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Drag & drop animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-dragging {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target::before {
|
|
display: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target {
|
|
transform: none !important;
|
|
background-color: transparent !important;
|
|
border-color: var(--background-mod-muted) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Enter/exit animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab-entering {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Also disable closing animation for instant disappear */
|
|
.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab-closing {
|
|
animation: none !important;
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab {
|
|
transition: opacity 0.2s ease-out,
|
|
transform 0.2s ease-in-out,
|
|
background-color 0.15s ease !important;
|
|
}
|
|
|
|
/* Icon pop animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-icon-pop-animation .vc-channeltabs-tab-selected .vc-channeltabs-icon,
|
|
.vc-channeltabs-container.vc-channeltabs-no-icon-pop-animation .vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Selected tab border - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-selected-border .vc-channeltabs-tab-selected {
|
|
border: 1px solid var(--background-mod-muted) !important;
|
|
border-bottom: 1px solid var(--background-mod-muted) !important;
|
|
}
|
|
|
|
/* Selected tab background - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-selected-background .vc-channeltabs-tab-selected {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Tab shadows - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab,
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab-selected,
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab:hover {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Close button rotation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-tab-selected .vc-channeltabs-close-button:hover {
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-close-button:hover {
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-tab-selected .vc-channeltabs-close-button:active {
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-close-button:active {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Plus button animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:hover {
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:active {
|
|
transform: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:hover svg {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Mention glow - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-mention-glow .vc-channeltabs-tab:has([data-has-mention="true"]) {
|
|
animation: none !important;
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 20%) !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-mention-glow .vc-channeltabs-tab-selected:has([data-has-mention="true"]) {
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 20%) !important;
|
|
}
|
|
|
|
/* Compact mode expansion animation - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact {
|
|
transition: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact .vc-channeltabs-name-text {
|
|
transition: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-close-button-compact {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Also disable tab-inner padding transition */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact .vc-channeltabs-tab-inner {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Make close button appear instantly with more specificity */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact,
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
|
|
transition: none !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
|
|
/* Tab positioning - disable if setting is off for INSTANT position changes */
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab-container {
|
|
transition: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab {
|
|
transition: none !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab-container:has(.vc-channeltabs-tab-dragging) .vc-channeltabs-tab:not(.vc-channeltabs-tab-dragging) {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Compact auto-expand selected - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-tab-inner {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
|
|
max-width: 0 !important;
|
|
opacity: 0 !important;
|
|
transform: translateX(-20px) !important;
|
|
}
|
|
|
|
/* Hide close button on selected compact tabs when auto-expand is disabled */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
|
|
opacity: 0 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Compact hover expansion - disable if setting is off */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-tab-inner {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-name-text {
|
|
max-width: 0 !important;
|
|
opacity: 0 !important;
|
|
transform: translateX(-20px) !important;
|
|
}
|
|
|
|
/* Hide close button on hover for compact tabs when hover-expand is disabled */
|
|
.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact {
|
|
opacity: 0 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Drag and drop visual feedback */
|
|
.vc-channeltabs-bookmarks-drop-target {
|
|
background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
|
|
border: 1px dashed color-mix(in srgb, var(--brand-500) 65%, transparent);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-dragging {
|
|
opacity: 0.55;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-target {
|
|
border-color: color-mix(in srgb, var(--brand-500) 70%, var(--border-subtle));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 35%, transparent);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before,
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-after::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
width: 2px;
|
|
border-radius: 999px;
|
|
background-color: var(--brand-500);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-500) 30%, transparent);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before {
|
|
left: -3px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-after::after {
|
|
right: -3px;
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-after {
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-folder-drop-target {
|
|
background-color: color-mix(in srgb, var(--brand-500) 22%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--brand-500) 80%, var(--border-subtle));
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 20%, transparent);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-folder-expanded {
|
|
background-color: var(--background-mod-strong);
|
|
}
|
|
|
|
/* Folder item styling - indented and visually connected to folder */
|
|
.vc-channeltabs-bookmark.vc-channeltabs-folder-item {
|
|
margin-left: 0.5rem;
|
|
border-left: 2px solid var(--background-mod-muted);
|
|
padding-left: 0.5rem;
|
|
opacity: 0.9;
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-folder-item:hover {
|
|
opacity: 1;
|
|
background-color: var(--background-mod-subtle);
|
|
}
|
|
|
|
/* Active bookmark visual indicator */
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active {
|
|
border: 1px solid var(--brand-500);
|
|
box-shadow: 0 0 4px var(--brand-500);
|
|
background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
|
|
}
|
|
|
|
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active:hover {
|
|
box-shadow: 0 0 6px var(--brand-500);
|
|
}
|
|
|
|
/* keybind Settings Styles */
|
|
.channelTabs-keybind-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.channelTabs-keybind-input {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 12px;
|
|
background-color: var(--background-secondary-alt);
|
|
border-radius: 8px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.channelTabs-keybind-input:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.channelTabs-keybind-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
.channelTabs-keybind-controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.channelTabs-keybind-button {
|
|
padding: 8px 16px;
|
|
background-color: var(--background-base-low);
|
|
border: 2px solid var(--input-border-default, var(--input-border));
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
min-width: 140px;
|
|
text-align: center;
|
|
font-family: var(--font-code);
|
|
font-weight: 600;
|
|
color: var(--text-strong);
|
|
transition: all 0.2s ease;
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px var(--background-mod-muted);
|
|
}
|
|
|
|
.channelTabs-keybind-button:hover:not(:disabled) {
|
|
background-color: var(--background-mod-subtle);
|
|
border-color: var(--brand-experiment);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
|
}
|
|
|
|
.channelTabs-keybind-button:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
|
|
}
|
|
|
|
.channelTabs-keybind-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.channelTabs-keybind-button.listening {
|
|
background: linear-gradient(135deg, var(--brand-experiment) 0%, var(--brand-experiment-560) 100%);
|
|
color: var(--white);
|
|
border-color: var(--brand-experiment);
|
|
animation: keybind-pulse 1.5s ease-in-out infinite;
|
|
box-shadow: 0 0 12px var(--brand-experiment);
|
|
}
|
|
|
|
@keyframes keybind-pulse {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.85;
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
|
|
.channelTabs-keybind-conflict {
|
|
color: var(--text-feedback-critical);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin-top: 2px;
|
|
animation: shake 0.3s ease;
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
/* stylelint-disable-next-line rule-empty-line-before */
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-4px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
|
|
/* Tab Number Badge Styles */
|
|
.vc-channeltabs-tab-number-badge {
|
|
background-color: rgb(0 0 0 / 25%);
|
|
color: var(--text-default);
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
max-width: 20px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition:
|
|
opacity 0.2s ease-out,
|
|
transform 0.2s ease-out,
|
|
max-width 0.2s ease-out,
|
|
margin 0.2s ease-out;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* position: Left */
|
|
.vc-channeltabs-tab-number-badge[data-position="left"] {
|
|
margin-right: 0.5rem;
|
|
transition:
|
|
opacity 0.2s ease-out,
|
|
transform 0.2s ease-out,
|
|
max-width 0.2s ease-out,
|
|
margin-right 0.2s ease-out;
|
|
}
|
|
|
|
/* position: Right */
|
|
.vc-channeltabs-tab-number-badge[data-position="right"] {
|
|
margin-left: 0.5rem;
|
|
transition:
|
|
opacity 0.2s ease-out,
|
|
transform 0.2s ease-out,
|
|
max-width 0.2s ease-out,
|
|
margin-left 0.2s ease-out;
|
|
}
|
|
|
|
/* hover effect (slight scale up) */
|
|
.vc-channeltabs-tab:hover .vc-channeltabs-tab-number-badge {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* directional slide animations for compact mode */
|
|
.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="right"] {
|
|
opacity: 0;
|
|
transform: translateX(-6px) scale(0.95);
|
|
max-width: 0;
|
|
margin-left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="left"] {
|
|
opacity: 0;
|
|
transform: translateX(-6px) scale(0.95);
|
|
max-width: 0;
|
|
margin-right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* disable transitions when compact expand animation is disabled */
|
|
.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-number-badge {
|
|
transition: none !important;
|
|
}
|