mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-03-13 13:39:48 +01:00
368 lines
8.3 KiB
Plaintext
368 lines
8.3 KiB
Plaintext
@import "../../../app/common/themes/themes.less";
|
|
|
|
#main .screen-tabs .screen-tab {
|
|
border-top: 1px solid transparent;
|
|
font-size: 12.5px;
|
|
|
|
&:first-child {
|
|
border-radius: 8px 0px 0px 0px;
|
|
}
|
|
|
|
&.color-green,
|
|
&.color-default {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-green;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-green;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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%
|
|
);
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-green;
|
|
}
|
|
}
|
|
|
|
&.color-orange {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-orange;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-orange;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-red;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-red;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-yellow;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-yellow;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-blue;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-blue;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-mint;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-mint;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-cyan;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-cyan;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-white;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-white;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-violet;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-violet;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
svg.svg-icon-inner path {
|
|
fill: @tab-pink;
|
|
}
|
|
|
|
.icon i {
|
|
color: @tab-pink;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: 1px solid @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 {
|
|
position: relative;
|
|
top: 1px;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
.screen-tabs-container {
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
z-index: 200;
|
|
}
|
|
|
|
&:hover .cmd-hints {
|
|
display: flex;
|
|
}
|
|
|
|
.cmd-hints {
|
|
position: absolute;
|
|
bottom: -18px;
|
|
left: 0px;
|
|
display: flex;
|
|
}
|
|
|
|
.screen-tabs-container-inner {
|
|
overflow-x: scroll;
|
|
&::-webkit-scrollbar-thumb,
|
|
&::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
&:hover::-webkit-scrollbar-thumb {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.screen-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.screen-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 3em;
|
|
min-width: 13.6em;
|
|
max-width: 13.6em;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding: 0 8px 0 8px;
|
|
|
|
.front-icon {
|
|
margin-right: 5px;
|
|
.svg-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.fa-icon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.tab-name {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&.is-active {
|
|
border-top: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.is-archived {
|
|
.fa.fa-archive {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
// Only one of these will be visible at a time
|
|
.end-icon {
|
|
// This makes the calculations below easier since we don't need to account for the right margin on the parent tab.
|
|
margin: 0 -8px 0 0;
|
|
.end-icon-inner {
|
|
& > div {
|
|
text-align: center;
|
|
align-items: center;
|
|
& > * {
|
|
margin: auto auto;
|
|
}
|
|
width: 20px;
|
|
}
|
|
}
|
|
.status-indicator {
|
|
display: block;
|
|
// The status indicator is a little shorter than the text; this raises it up a bit so it's more centered vertically
|
|
padding-bottom: 1px;
|
|
margin-top: -1px;
|
|
}
|
|
.tab-gear {
|
|
display: none;
|
|
.icon {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.tab-index {
|
|
display: none;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.tab-gear {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .screen-tab {
|
|
.tab-index {
|
|
display: block;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover .screen-tab:hover .tab-index {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.new-screen {
|
|
flex-shrink: 0;
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 37px;
|
|
|
|
.icon {
|
|
height: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
padding: 0.4em;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|