Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +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

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

@ -4,11 +4,6 @@
border-top: 1px solid transparent;
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 {
.status-indicator-visible;
}
@ -19,205 +14,64 @@
}
}
svg.svg-icon-inner path {
fill: var(--tab-color);
}
.icon i {
color: var(--tab-color);
}
&.is-active {
border-top: 1px solid var(--tab-color);
background-color: var(--tab-color);
background-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5) 15%,
rgba(0, 0, 0, 0.7) 30%,
rgba(0, 0, 0, 1) 100%
);
}
&.color-green,
&.color-default {
svg.svg-icon-inner path {
fill: var(--tab-green);
}
.icon i {
color: var(--tab-green);
}
&.is-active {
border-top: 1px solid var(--tab-green);
background: linear-gradient(
180deg,
rgba(88, 193, 66, 0.2) 9.34%,
rgba(88, 193, 66, 0.03) 44.16%,
rgba(88, 193, 66, 0) 86.79%
);
}
--tab-color: var(--tab-green);
}
&.color-orange {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-orange);
}
&.color-red {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-red);
}
&.color-yellow {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-yellow);
}
&.color-blue {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-blue);
}
&.color-mint {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-mint);
}
&.color-cyan {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-cyan);
}
&.color-white {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-white);
}
&.color-violet {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-violet);
}
&.color-pink {
svg.svg-icon-inner path {
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%
);
}
--tab-color: var(--tab-pink);
}
.web-share-icon {