Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adjust the active tab gradient to make it more visible with the new UI changes (#346)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-02-27 12:13:57 -08:00 committed by GitHub
parent 3612bc3ae8
commit d9ca9394ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/app/workspace/screen/tabs.less
View File

@ -4,11 +4,6 @@
border-top: 1px solid transparent; border-top: 1px solid transparent;
font-size: 12.5px; font-size: 12.5px;
// this comes back when we have a completely removable left-sidebar
// &:first-child {
// border-radius: var(--app-border-radius) 0px 0px 0px;
// }
&:not(:hover) .status-indicator { &:not(:hover) .status-indicator {
.status-indicator-visible; .status-indicator-visible;
} }
@ -19,205 +14,64 @@
} }
} }
&.color-green,
&.color-default {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: var(--tab-green); fill: var(--tab-color);
} }
.icon i { .icon i {
color: var(--tab-green); color: var(--tab-color);
} }
&.is-active { &.is-active {
border-top: 1px solid var(--tab-green); border-top: 1px solid var(--tab-color);
background: linear-gradient( background-color: var(--tab-color);
180deg, background-image: linear-gradient(
rgba(88, 193, 66, 0.2) 9.34%, rgba(0, 0, 0, 0),
rgba(88, 193, 66, 0.03) 44.16%, rgba(0, 0, 0, 0.5) 15%,
rgba(88, 193, 66, 0) 86.79% rgba(0, 0, 0, 0.7) 30%,
rgba(0, 0, 0, 1) 100%
); );
} }
&.color-green,
&.color-default {
--tab-color: var(--tab-green);
} }
&.color-orange { &.color-orange {
svg.svg-icon-inner path { --tab-color: var(--tab-orange);
fill: var(--tab-orange);
}
.icon i {
color: var(--tab-orange);
}
&.is-active {
border-top: 1px solid var(--tab-orange);
background: linear-gradient(
180deg,
rgba(239, 113, 59, 0.2) 9.34%,
rgba(239, 113, 59, 0.03) 44.16%,
rgba(239, 113, 59, 0) 86.79%
);
}
} }
&.color-red { &.color-red {
svg.svg-icon-inner path { --tab-color: var(--tab-red);
fill: var(--tab-red);
}
.icon i {
color: var(--tab-red);
}
&.is-active {
border-top: 1px solid var(--tab-red);
background: linear-gradient(
180deg,
rgba(229, 77, 46, 0.2) 9.34%,
rgba(229, 77, 46, 0.03) 44.16%,
rgba(229, 77, 46, 0) 86.79%
);
}
} }
&.color-yellow { &.color-yellow {
svg.svg-icon-inner path { --tab-color: var(--tab-yellow);
fill: var(--tab-yellow);
}
.icon i {
color: var(--tab-yellow);
}
&.is-active {
border-top: 1px solid var(--tab-yellow);
background: linear-gradient(
180deg,
rgba(224, 185, 86, 0.2) 9.34%,
rgba(224, 185, 86, 0.03) 44.16%,
rgba(224, 185, 86, 0) 86.79%
);
}
} }
&.color-blue { &.color-blue {
svg.svg-icon-inner path { --tab-color: var(--tab-blue);
fill: var(--tab-blue);
}
.icon i {
color: var(--tab-blue);
}
&.is-active {
border-top: 1px solid var(--tab-blue);
background: linear-gradient(
180deg,
rgba(57, 113, 255, 0.2) 9.34%,
rgba(57, 113, 255, 0.03) 44.16%,
rgba(57, 113, 255, 0) 77.18%
);
}
} }
&.color-mint { &.color-mint {
svg.svg-icon-inner path { --tab-color: var(--tab-mint);
fill: var(--tab-mint);
}
.icon i {
color: var(--tab-mint);
}
&.is-active {
border-top: 1px solid var(--tab-mint);
background: linear-gradient(
180deg,
rgba(75, 255, 169, 0.2) 9.34%,
rgba(75, 255, 169, 0.03) 44.16%,
rgba(75, 255, 169, 0) 77.18%
);
}
} }
&.color-cyan { &.color-cyan {
svg.svg-icon-inner path { --tab-color: var(--tab-cyan);
fill: var(--tab-cyan);
}
.icon i {
color: var(--tab-cyan);
}
&.is-active {
border-top: 1px solid var(--tab-cyan);
background: linear-gradient(
180deg,
rgba(75, 223, 255, 0.2) 9.34%,
rgba(75, 223, 255, 0.03) 44.16%,
rgba(58, 186, 214, 0) 86.79%
);
}
} }
&.color-white { &.color-white {
svg.svg-icon-inner path { --tab-color: var(--tab-white);
fill: var(--tab-white);
}
.icon i {
color: var(--tab-white);
}
&.is-active {
border-top: 1px solid var(--tab-white);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 9.34%,
rgba(255, 255, 255, 0.03) 44.16%,
rgba(255, 255, 255, 0) 86.79%
);
}
} }
&.color-violet { &.color-violet {
svg.svg-icon-inner path { --tab-color: var(--tab-violet);
fill: var(--tab-violet);
}
.icon i {
color: var(--tab-violet);
}
&.is-active {
border-top: 1px solid var(--tab-violet);
background: linear-gradient(
180deg,
rgba(186, 118, 255, 0.2) 9.34%,
rgba(186, 118, 255, 0.03) 44.16%,
rgba(186, 118, 255, 0) 86.79%
);
}
} }
&.color-pink { &.color-pink {
svg.svg-icon-inner path { --tab-color: var(--tab-pink);
fill: var(--tab-pink);
}
.icon i {
color: var(--tab-pink);
}
&.is-active {
border-top: 1px solid var(--tab-pink);
background: linear-gradient(
180deg,
rgba(255, 136, 165, 0.2) 9.34%,
rgba(255, 136, 165, 0.03) 44.16%,
rgba(255, 136, 165, 0) 86.79%
);
}
} }
.web-share-icon { .web-share-icon {