mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
Convert the rest of the colors to CSS variables (#333)
* css variables for sidebar * type * line css vars * lines css vars * bookmarks css vars * clientsettings css vars * button.less css vars * checkbox.less css vars * cmdstrcode.less css vars * dropdown.less css vars * markdown css vars * status css vars * convert all hex colors to rgb color * textfield css vars * toggle css vars * tooltip css vars * statusindicator css vars * about modal css vars * disconnected modal css vars * editremoteconn modal css vars * linesettings modal css vars * tos modal css vars * viewremoteconndetail modal css vars * prompt css vars * connections view css vars * add colors comments * history view css vars * cmdinput css vars * cmdinput css vars * screenview css vars * convert less vars to css vars
This commit is contained in:
Red J Adaya
GitHub
parent
85d4259937
commit
19daffad56
142
src/app/app.less
142
src/app/app.less
@ -12,12 +12,12 @@ body {
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
background-color: black;
|
||||
color: @base-color;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
&.is-dev .sidebar {
|
||||
background-color: @base-background-dev;
|
||||
background-color: var(--app-bg-color-dev);
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,8 +27,8 @@ textarea {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
background: @base-background;
|
||||
color: @base-color;
|
||||
background: var(--app-bg-color);
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
// typography
|
||||
@ -49,7 +49,7 @@ textarea {
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
font-family: @text-s1-font;
|
||||
color: @text-primary;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
.text-standard {
|
||||
@ -84,11 +84,11 @@ textarea {
|
||||
}
|
||||
|
||||
body a {
|
||||
color: @wave-green;
|
||||
color: var(--app-accent-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: @wave-green;
|
||||
color: var(--app-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ body code {
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
@ -137,19 +137,11 @@ svg.icon {
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background-color: @scrollbar-background !important;
|
||||
background-color: var(--scrollbar-thumb-color) !important;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: @scrollbar-thumb !important;
|
||||
}
|
||||
|
||||
.glow {
|
||||
&:focus,
|
||||
&:hover {
|
||||
border: 1px solid @background-session-components !important;
|
||||
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
background-color: var(--scrollbar-thumb-color) !important;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
@ -165,10 +157,10 @@ svg.icon {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: @button-background !important;
|
||||
color: @wave-green;
|
||||
color: var(--app-accent-color);
|
||||
.hoverEffect;
|
||||
&:hover {
|
||||
color: @wave-green;
|
||||
color: var(--app-accent-color);
|
||||
}
|
||||
&.disabled {
|
||||
color: fade(@disabled-color, 60%);
|
||||
@ -263,7 +255,7 @@ a.a-block {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @term-white;
|
||||
background-color: var(--app-text-color);
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -324,43 +316,43 @@ a.a-block {
|
||||
}
|
||||
|
||||
.text-button {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
cursor: pointer;
|
||||
background-color: #171717;
|
||||
outline: 2px solid #171717;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
background-color: #333;
|
||||
outline: 2px solid #333;
|
||||
}
|
||||
|
||||
&.connect-button {
|
||||
color: @term-green;
|
||||
color: var(--button-primary-bg-color);
|
||||
&:hover {
|
||||
color: @term-green;
|
||||
color: var(--button-primary-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.disconnect-button {
|
||||
color: @term-red;
|
||||
color: var(--button-error-bg-color);
|
||||
&:hover {
|
||||
color: @term-red;
|
||||
color: var(--button-error-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.success-button {
|
||||
color: @term-green;
|
||||
color: var(--button-primary-bg-color);
|
||||
&:hover {
|
||||
color: @term-green;
|
||||
color: var(--button-primary-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.error-button {
|
||||
color: @term-red;
|
||||
color: var(--button-error-bg-color);
|
||||
&:hover {
|
||||
color: @term-red;
|
||||
color: var(--button-error-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -399,12 +391,12 @@ a.a-block {
|
||||
&.active,
|
||||
&.active.selected {
|
||||
display: block;
|
||||
background-color: @tab-blue !important;
|
||||
background-color: var(--tab-blue) !important;
|
||||
}
|
||||
|
||||
&.active.selected.fg-focus {
|
||||
display: block;
|
||||
background-color: @tab-green !important;
|
||||
background-color: var(--tab-green) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -438,12 +430,12 @@ a.a-block {
|
||||
}
|
||||
|
||||
.load-error-text {
|
||||
color: @term-red;
|
||||
color: var(--tab-red);
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.plugin-info-text {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
@ -492,138 +484,138 @@ a.a-block {
|
||||
.icon.color-green {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-green;
|
||||
fill: var(--tab-green);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-green;
|
||||
color: var(--tab-green);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-red {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-red;
|
||||
fill: var(--tab-red);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-red;
|
||||
color: var(--tab-green);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-orange {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-orange;
|
||||
fill: var(--tab-orange);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-orange;
|
||||
color: var(--tab-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-blue {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-blue;
|
||||
fill: var(--tab-blue);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-blue;
|
||||
color: var(--tab-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-yellow {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-yellow;
|
||||
fill: var(--tab-yellow);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-yellow;
|
||||
color: var(--tab-yellow);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-pink {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-pink;
|
||||
fill: var(--tab-pink);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-pink;
|
||||
color: var(--tab-pink);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-mint {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-mint;
|
||||
fill: var(--tab-mint);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-mint;
|
||||
color: var(--tab-mint);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-cyan {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-cyan;
|
||||
fill: var(--tab-cyan);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-cyan;
|
||||
color: var(--tab-cyan);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-violet {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-violet;
|
||||
fill: var(--tab-violet);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-violet;
|
||||
color: var(--tab-violet);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.color-white {
|
||||
path,
|
||||
circle {
|
||||
fill: @tab-white;
|
||||
fill: var(--tab-white);
|
||||
}
|
||||
|
||||
i {
|
||||
color: @tab-white;
|
||||
color: var(--tab-white);
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon.status-connected {
|
||||
path,
|
||||
circle {
|
||||
fill: @status-connected;
|
||||
fill: var(--status-connected-color);
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon.status-connecting {
|
||||
path,
|
||||
circle {
|
||||
fill: @status-connecting;
|
||||
fill: var(--status-connecting-color);
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon.status-disconnected {
|
||||
path,
|
||||
circle {
|
||||
fill: @status-disconnected;
|
||||
fill: var(--status-disconnected-color);
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon.status-error {
|
||||
path,
|
||||
circle {
|
||||
fill: @status-error;
|
||||
fill: var(--status-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -649,7 +641,7 @@ a.a-block {
|
||||
}
|
||||
|
||||
.view {
|
||||
background-color: @background-session;
|
||||
background-color: var(--session-bg-color);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -687,12 +679,12 @@ a.a-block {
|
||||
}
|
||||
|
||||
&.settings-error {
|
||||
color: @term-red;
|
||||
color: var(--term-red);
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #200707;
|
||||
border: 1px solid @term-red;
|
||||
border: 1px solid var(--term-red);
|
||||
font-weight: bold;
|
||||
|
||||
.error-dismiss {
|
||||
@ -716,7 +708,7 @@ a.a-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
|
||||
&.settings-clickable {
|
||||
cursor: pointer;
|
||||
@ -747,37 +739,37 @@ a.a-block {
|
||||
}
|
||||
|
||||
.tab-color-icon.color-default path {
|
||||
fill: @tab-green;
|
||||
fill: var(--tab-green);
|
||||
}
|
||||
.tab-color-icon.color-green path {
|
||||
fill: @tab-green;
|
||||
fill: var(--tab-green);
|
||||
}
|
||||
.tab-color-icon.color-orange path {
|
||||
fill: @tab-orange;
|
||||
fill: var(--tab-orange);
|
||||
}
|
||||
.tab-color-icon.color-red path {
|
||||
fill: @tab-red;
|
||||
fill: var(--tab-red);
|
||||
}
|
||||
.tab-color-icon.color-yellow path {
|
||||
fill: @tab-yellow;
|
||||
fill: var(--tab-yellow);
|
||||
}
|
||||
.tab-color-icon.color-blue path {
|
||||
fill: @tab-blue;
|
||||
fill: var(--tab-blue);
|
||||
}
|
||||
.tab-color-icon.color-mint path {
|
||||
fill: @tab-mint;
|
||||
fill: var(--tab-mint);
|
||||
}
|
||||
.tab-color-icon.color-cyan path {
|
||||
fill: @tab-cyan;
|
||||
fill: var(--tab-cyan);
|
||||
}
|
||||
.tab-color-icon.color-white path {
|
||||
fill: @tab-white;
|
||||
fill: var(--tab-white);
|
||||
}
|
||||
.tab-color-icon.color-violet path {
|
||||
fill: @tab-violet;
|
||||
fill: var(--tab-violet);
|
||||
}
|
||||
.tab-color-icon.color-pink path {
|
||||
fill: @tab-pink;
|
||||
fill: var(--tab-pink);
|
||||
}
|
||||
|
||||
.tab-colors,
|
||||
@ -817,7 +809,7 @@ a.a-block {
|
||||
.action-text {
|
||||
margin-left: 20px;
|
||||
|
||||
color: @term-red;
|
||||
color: var(--term-red);
|
||||
}
|
||||
|
||||
.settings-share-link {
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
|
||||
.bookmarks-view {
|
||||
background-color: @background-session;
|
||||
background-color: var(--session-bg-color);
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
@ -14,7 +12,7 @@
|
||||
svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,15 +29,15 @@
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
|
||||
.bookmarks-list {
|
||||
color: @term-white;
|
||||
color: var(--bookmarks-text-color);
|
||||
margin: 4px 10px 5px 5px;
|
||||
|
||||
.no-bookmarks {
|
||||
color: @term-white;
|
||||
color: var(--bookmarks-text-color);
|
||||
padding: 30px 10px 35px 10px;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
@ -75,21 +73,21 @@
|
||||
}
|
||||
|
||||
label {
|
||||
color: @term-white;
|
||||
color: var(--bookmarks-text-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 80%;
|
||||
min-width: 50%;
|
||||
color: @term-white;
|
||||
background-color: @term-black;
|
||||
color: var(--bookmarks-text-color);
|
||||
background-color: var(--bookmarks-textarea-bg-color);
|
||||
}
|
||||
|
||||
.bookmark-id-div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
color: @disabled-color;
|
||||
color: var(--bookmarks-disabled-text-color);
|
||||
right: 5px;
|
||||
bottom: 2px;
|
||||
font-size: 0.8em;
|
||||
@ -104,7 +102,7 @@
|
||||
flex-direction: row;
|
||||
|
||||
visibility: hidden;
|
||||
color: @term-white;
|
||||
color: var(--bookmarks-text-color);
|
||||
|
||||
.bookmark-control:first-child {
|
||||
margin-left: 0;
|
||||
@ -116,7 +114,7 @@
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
color: @term-bright-white;
|
||||
color: var(--bookmarks-control-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
|
||||
.clientsettings-view {
|
||||
background-color: @background-session;
|
||||
background-color: var(--session-bg-color);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -58,12 +58,12 @@
|
||||
}
|
||||
|
||||
&.settings-error {
|
||||
color: @term-red;
|
||||
color: var(--view-error-color);
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #200707;
|
||||
border: 1px solid @term-red;
|
||||
border: 1px solid var(--view-error-color);
|
||||
font-weight: bold;
|
||||
|
||||
.error-dismiss {
|
||||
@ -119,37 +119,37 @@
|
||||
}
|
||||
|
||||
.tab-color-icon.color-default path {
|
||||
fill: @tab-green;
|
||||
fill: var(--tab-green);
|
||||
}
|
||||
.tab-color-icon.color-green path {
|
||||
fill: @tab-green;
|
||||
fill: var(--tab-green);
|
||||
}
|
||||
.tab-color-icon.color-orange path {
|
||||
fill: @tab-orange;
|
||||
fill: var(--tab-orange);
|
||||
}
|
||||
.tab-color-icon.color-red path {
|
||||
fill: @tab-red;
|
||||
fill: var(--tab-red);
|
||||
}
|
||||
.tab-color-icon.color-yellow path {
|
||||
fill: @tab-yellow;
|
||||
fill: var(--tab-yellow);
|
||||
}
|
||||
.tab-color-icon.color-blue path {
|
||||
fill: @tab-blue;
|
||||
fill: var(--tab-blue);
|
||||
}
|
||||
.tab-color-icon.color-mint path {
|
||||
fill: @tab-mint;
|
||||
fill: var(--tab-mint);
|
||||
}
|
||||
.tab-color-icon.color-cyan path {
|
||||
fill: @tab-cyan;
|
||||
fill: var(--tab-cyan);
|
||||
}
|
||||
.tab-color-icon.color-white path {
|
||||
fill: @tab-white;
|
||||
fill: var(--tab-white);
|
||||
}
|
||||
.tab-color-icon.color-violet path {
|
||||
fill: @tab-violet;
|
||||
fill: var(--tab-violet);
|
||||
}
|
||||
.tab-color-icon.color-pink path {
|
||||
fill: @tab-pink;
|
||||
fill: var(--tab-pink);
|
||||
}
|
||||
|
||||
.tab-colors,
|
||||
@ -189,7 +189,7 @@
|
||||
.action-text {
|
||||
margin-left: 20px;
|
||||
|
||||
color: @term-red;
|
||||
color: var(--view-error-color);
|
||||
}
|
||||
|
||||
.settings-share-link {
|
||||
|
||||
@ -15,35 +15,26 @@
|
||||
border-radius: 6px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
}
|
||||
|
||||
i {
|
||||
fill: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: @term-green;
|
||||
background: none;
|
||||
|
||||
i {
|
||||
fill: @term-green;
|
||||
fill: var(--button-primary-bg-color);
|
||||
}
|
||||
|
||||
&.solid {
|
||||
color: @term-bright-white;
|
||||
background: @term-green;
|
||||
color: var(--button-text-color);
|
||||
background: var(--button-primary-bg-color);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
|
||||
|
||||
i {
|
||||
fill: @term-white;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: 1px solid @term-green;
|
||||
border: 1px solid var(--button-primary-bg-color);
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
@ -51,68 +42,32 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @term-bright-white;
|
||||
color: var(--button-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
background: none;
|
||||
|
||||
&.solid {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
background: var(--button-secondary-bg-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border: 1px solid var(--button-secondary-bg-color);
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
padding: 6px 10px;
|
||||
|
||||
i {
|
||||
fill: @term-green;
|
||||
fill: var(--button-primary-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-yellow {
|
||||
&.solid {
|
||||
border-color: @warning-yellow;
|
||||
background-color: mix(@warning-yellow, @term-white, 50%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
color: @warning-yellow;
|
||||
border-color: @warning-yellow;
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
border-color: @term-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
}
|
||||
}
|
||||
|
||||
&.color-red {
|
||||
&.solid {
|
||||
border-color: @term-red;
|
||||
background-color: mix(@term-red, @term-white, 50%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
color: @term-red;
|
||||
border-color: @term-red;
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @term-bright-white;
|
||||
color: var(--checkbox-bg-color);
|
||||
transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
|
||||
}
|
||||
input[type="checkbox"] + label > span {
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label > span {
|
||||
border: 10px solid @term-green;
|
||||
border: 10px solid var(--button-primary-bg-color);
|
||||
}
|
||||
input[type="checkbox"]:checked + label > span:before {
|
||||
content: "";
|
||||
@ -47,8 +47,8 @@
|
||||
left: 3px;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
border-right: 2px solid var(--checkbox-check-color);
|
||||
border-bottom: 2px solid var(--checkbox-check-color);
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 0% 100%;
|
||||
animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
.code-div {
|
||||
background-color: @term-black;
|
||||
background-color: var(--cmdstrcode-bg-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 100px;
|
||||
@ -48,10 +48,10 @@
|
||||
code {
|
||||
flex-shrink: 0;
|
||||
min-width: 100px;
|
||||
color: @term-white;
|
||||
color: var(--cmdstrcode-text-color);
|
||||
white-space: pre;
|
||||
padding: 2px 8px 2px 8px;
|
||||
background-color: @term-black;
|
||||
background-color: var(--cmdstrcode-bg-color);
|
||||
font-size: 1em;
|
||||
font-family: @fixed-font;
|
||||
}
|
||||
@ -74,7 +74,7 @@
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
color: var(--cmdstrcode-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -83,20 +83,3 @@
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.copied-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @term-white;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
animation-name: fade-in-out;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
top: 16px;
|
||||
font-size: 12.5px;
|
||||
transition: all 0.3s;
|
||||
color: @term-white;
|
||||
color: var(--dropdown-text-color);
|
||||
line-height: 10px;
|
||||
|
||||
&.float {
|
||||
@ -94,11 +94,11 @@
|
||||
}
|
||||
|
||||
&-error {
|
||||
border-color: @term-red;
|
||||
border-color: var(--dropdown-error-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @term-green;
|
||||
border-color: var(--dropdown-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
|
||||
.markdown {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
font-family: @markdown-font;
|
||||
font-size: 14px;
|
||||
overflow-wrap: break-word;
|
||||
@ -11,8 +11,8 @@
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: @markdown-highlight;
|
||||
color: @term-white;
|
||||
background-color: var(--markdown-bg-color);
|
||||
color: var(--app-text-color);
|
||||
font-family: var(--termfontfamily);
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -24,13 +24,13 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
a {
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
table {
|
||||
tr th {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,19 +57,19 @@
|
||||
blockquote {
|
||||
margin: 4px 10px 4px 10px;
|
||||
border-radius: 3px;
|
||||
background-color: @markdown-highlight;
|
||||
background-color: var(--markdown-bg-color);
|
||||
padding: 2px 4px 2px 6px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: @markdown-highlight;
|
||||
background-color: var(--markdown-bg-color);
|
||||
margin: 4px 10px 4px 10px;
|
||||
padding: 6px 6px 6px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre.selected {
|
||||
outline: 2px solid @term-green;
|
||||
outline: 2px solid var(--markdown-outline-color);
|
||||
}
|
||||
|
||||
.title.is-1 {
|
||||
|
||||
@ -13,18 +13,18 @@
|
||||
}
|
||||
|
||||
.dot.green {
|
||||
background-color: @status-connected;
|
||||
background-color: var(--status-connected-color);
|
||||
}
|
||||
|
||||
.dot.red {
|
||||
background-color: @status-error;
|
||||
background-color: var(--status-error-color);
|
||||
}
|
||||
|
||||
.dot.gray {
|
||||
background-color: @status-disconnected;
|
||||
background-color: var(--status-disconnected-color);
|
||||
}
|
||||
|
||||
.dot.yellow {
|
||||
background-color: @status-connecting;
|
||||
background-color: var(--status-connecting-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: @term-green;
|
||||
border-color: var(--textfield-focused-border-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: @term-red;
|
||||
border-color: var(--textfield-error-border-color);
|
||||
}
|
||||
|
||||
&-inner {
|
||||
@ -42,7 +42,7 @@
|
||||
top: 16px;
|
||||
font-size: 12.5px;
|
||||
transition: all 0.3s;
|
||||
color: @text-secondary;
|
||||
color: var(--textfield-label-color);
|
||||
line-height: 10px;
|
||||
|
||||
&.float {
|
||||
@ -63,7 +63,7 @@
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color: @term-bright-white;
|
||||
color: var(--textfield-text-color);
|
||||
line-height: 20px;
|
||||
|
||||
&.offset-left {
|
||||
|
||||
@ -17,6 +17,7 @@ interface TextFieldProps {
|
||||
value?: string;
|
||||
className?: string;
|
||||
onChange?: (value: string) => void;
|
||||
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
||||
placeholder?: string;
|
||||
defaultValue?: string;
|
||||
decoration?: TextFieldDecorationProps;
|
||||
@ -157,6 +158,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
|
||||
onChange={this.handleInputChange}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
onKeyDown={this.props.onKeyDown}
|
||||
placeholder={placeholder}
|
||||
maxLength={maxLength}
|
||||
autoFocus={autoFocus}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #333;
|
||||
background-color: var(--toggle-bg-color);
|
||||
transition: 0.5s;
|
||||
border-radius: 33px;
|
||||
}
|
||||
@ -32,13 +32,13 @@
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: @term-white;
|
||||
background-color: var(--toggle-thumb-color);
|
||||
transition: 0.5s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: @term-green;
|
||||
background-color: var(--toggle-checked-bg-color);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
i {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
fill: @base-color;
|
||||
fill: var(--checkbox-text-color);
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,18 +75,18 @@ The following accounts for a debounce in the status indicator. We will only disp
|
||||
visibility: hidden;
|
||||
}
|
||||
.spin #spinner {
|
||||
stroke: @term-white;
|
||||
stroke: var(--status-indicator-color);
|
||||
}
|
||||
&.error #indicator {
|
||||
visibility: visible;
|
||||
fill: @term-red;
|
||||
fill: var(--status-indicator-error);
|
||||
}
|
||||
&.success #indicator {
|
||||
visibility: visible;
|
||||
fill: @term-green;
|
||||
fill: var(--status-indicator-success);
|
||||
}
|
||||
&.output #indicator {
|
||||
visibility: visible;
|
||||
fill: @term-white;
|
||||
fill: var(--status-indicator-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,12 +38,12 @@
|
||||
line-height: 20px;
|
||||
|
||||
div:first-child {
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
div:first-child + div {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
margin-bottom: 5px;
|
||||
|
||||
i {
|
||||
color: @term-green;
|
||||
color: var(--status-updated-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -80,7 +80,7 @@
|
||||
.status.outdated {
|
||||
div {
|
||||
i {
|
||||
color: @term-yellow;
|
||||
color: var(--status-outdated-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
|
||||
.about-section:last-child {
|
||||
margin-bottom: 24px;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.modal-content {
|
||||
footer {
|
||||
.footer-text-link {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -31,17 +31,11 @@
|
||||
}
|
||||
|
||||
pre {
|
||||
color: @term-white;
|
||||
background-color: @term-black;
|
||||
color: var(--app-text-color);
|
||||
background-color: var(--pre-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wave-modal-footer {
|
||||
button:first-child {
|
||||
color: @term-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
gap: 12px;
|
||||
|
||||
.name {
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
width: 100%;
|
||||
|
||||
.settings-input .hotkey {
|
||||
color: @text-secondary;
|
||||
color: var(--hotkey-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
text-align: center;
|
||||
|
||||
font-style: normal;
|
||||
@ -56,13 +56,13 @@
|
||||
flex: 1 0 0;
|
||||
|
||||
.item-title {
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.rconndetail-name {
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
@ -73,7 +73,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
fill: @wave-green;
|
||||
fill: var(--app-accent-color);
|
||||
}
|
||||
|
||||
i {
|
||||
@ -19,57 +19,57 @@
|
||||
}
|
||||
|
||||
.term-prompt-branch {
|
||||
color: @term-white;
|
||||
color: var(--prompt-white);
|
||||
}
|
||||
|
||||
.term-prompt-python {
|
||||
color: @term-bright-magenta;
|
||||
color: var(--prompt-bright-magenta);
|
||||
}
|
||||
|
||||
.term-prompt-remote {
|
||||
}
|
||||
|
||||
.term-prompt-remote {
|
||||
color: @term-bright-green;
|
||||
color: var(--prompt-bright-green);
|
||||
|
||||
&.color-green {
|
||||
color: @term-bright-green;
|
||||
color: var(--prompt-bright-green);
|
||||
}
|
||||
|
||||
&.color-red {
|
||||
color: @term-bright-red;
|
||||
color: var(--prompt-bright-red);
|
||||
}
|
||||
|
||||
&.color-blue {
|
||||
color: @term-bright-blue;
|
||||
color: var(--prompt-bright-blue);
|
||||
}
|
||||
|
||||
&.color-yellow {
|
||||
color: @term-bright-yellow;
|
||||
color: var(--prompt-bright-yellow);
|
||||
}
|
||||
|
||||
&.color-magenta {
|
||||
color: @term-bright-magenta;
|
||||
color: var(--prompt-bright-magenta);
|
||||
}
|
||||
|
||||
&.color-cyan {
|
||||
color: @term-bright-cyan;
|
||||
color: var(--prompt-bright-cyan);
|
||||
}
|
||||
|
||||
&.color-white {
|
||||
color: @term-bright-white;
|
||||
color: var(--prompt-bright-white);
|
||||
}
|
||||
|
||||
&.color-orange {
|
||||
color: @tab-orange;
|
||||
color: var(--prompt-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.term-prompt-cwd {
|
||||
color: @term-bright-green;
|
||||
color: var(--prompt-bright-green);
|
||||
}
|
||||
|
||||
.term-prompt-end {
|
||||
color: @term-bright-green;
|
||||
color: var(--prompt-bright-green);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,13 +39,13 @@
|
||||
th {
|
||||
height: 32px;
|
||||
padding: 5px 15px 5px 10px;
|
||||
color: @text-secondary;
|
||||
color: var(--view-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
tr.connections-item {
|
||||
border-bottom: 1px solid rgba(241, 246, 243, 0.15);
|
||||
color: @text-secondary;
|
||||
color: var(--view-text-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
|
||||
.history-view {
|
||||
background-color: @background-session;
|
||||
background-color: var(--session-bg-color);
|
||||
|
||||
.icon {
|
||||
width: 1.3em !important;
|
||||
height: 1.3em !important;
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
|
||||
.history-checkbox {
|
||||
@ -51,7 +51,7 @@
|
||||
svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,15 +63,6 @@
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
padding: 0.5em 1em;
|
||||
background-color: @background-session-components;
|
||||
color: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.history-search {
|
||||
@ -99,7 +90,7 @@
|
||||
.label {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
color: @base-color;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
@ -110,7 +101,7 @@
|
||||
.session-dropdown,
|
||||
.remote-dropdown {
|
||||
.dropdown-item {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
@ -130,7 +121,7 @@
|
||||
.search-checkbox {
|
||||
margin-left: 15px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: @base-border;
|
||||
background: var(--button-secondary-bg-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -163,7 +154,7 @@
|
||||
|
||||
.reset-button {
|
||||
margin-left: 1em;
|
||||
color: @base-color;
|
||||
color: var(--app-text-color);
|
||||
line-height: 1.75em;
|
||||
}
|
||||
}
|
||||
@ -191,7 +182,7 @@
|
||||
.trash-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: @text-secondary;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
|
||||
.control-checkbox {
|
||||
@ -216,11 +207,11 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
&.delete-button.is-active {
|
||||
color: @term-bright-red !important;
|
||||
color: var(--view-error-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -273,7 +264,7 @@
|
||||
.line-container {
|
||||
padding: 0px 10px 10px 10px;
|
||||
overflow-x: auto;
|
||||
background-color: @term-black;
|
||||
background-color: var(--prompt-black);
|
||||
}
|
||||
|
||||
.line-context {
|
||||
@ -285,10 +276,10 @@
|
||||
|
||||
.vic-btn {
|
||||
cursor: pointer;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -312,7 +303,7 @@
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(250, 250, 250, 0.1);
|
||||
align-items: center;
|
||||
color: @text-secondary;
|
||||
color: var(--app-text-color);
|
||||
|
||||
&.is-selected {
|
||||
background-color: #222;
|
||||
@ -373,7 +364,7 @@
|
||||
}
|
||||
|
||||
td.cmdstr {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
flex: 1 0 0;
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
|
||||
@ -13,8 +13,8 @@ import dayjs from "dayjs";
|
||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat";
|
||||
import { Line } from "@/app/line/linecomps";
|
||||
import { CmdStrCode } from "@/common/elements";
|
||||
import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
|
||||
import { TextField } from "@/elements";
|
||||
|
||||
import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
|
||||
import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg";
|
||||
@ -194,9 +194,9 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
changeSearchText(e: any) {
|
||||
changeSearchText(val: string) {
|
||||
mobx.action(() => {
|
||||
GlobalModel.historyViewModel.searchText.set(e.target.value);
|
||||
GlobalModel.historyViewModel.searchText.set(val);
|
||||
})();
|
||||
}
|
||||
|
||||
@ -433,19 +433,12 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
<div className="history-title">History</div>
|
||||
<div className="history-search">
|
||||
<div className="main-search field">
|
||||
<p className="control has-icons-left">
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
<TextField
|
||||
placeholder="Exact String Search"
|
||||
value={hvm.searchText.get()}
|
||||
onChange={this.changeSearchText}
|
||||
onKeyDown={this.searchKeyDown}
|
||||
decoration={{ startDecoration: <SearchIcon className="icon" /> }}
|
||||
/>
|
||||
<span className="is-small is-left">
|
||||
<SearchIcon className="icon" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="advanced-search">
|
||||
<div
|
||||
|
||||
@ -10,103 +10,123 @@
|
||||
--termlineheight: 15px;
|
||||
--termpad: 7px; // padding value (scaled to termfontsize)
|
||||
|
||||
// primary
|
||||
--primary-text-color: #eceeec;
|
||||
--primary-icon-color: var(--primary-text-color);
|
||||
--primary-border-color: #333;
|
||||
--primary-background-color: rgba(21, 23, 21, 1);
|
||||
--primary-background: rgba(21, 23, 21, 1);
|
||||
--primary-accent-color: rgb(88, 193, 66);
|
||||
--wave-green: rgb(88, 193, 66);
|
||||
--wave-green-faded: rgba(88, 193, 66, 0.4);
|
||||
--success-green: rgb(38, 97, 26);
|
||||
--error-red: #cc0000;
|
||||
--warning-yellow: #ffa500;
|
||||
|
||||
--text-primary: #fff;
|
||||
--text-secondary: #c3c8c2;
|
||||
--text-caption: #8b918a;
|
||||
|
||||
--base-background-transparent: rgba(21, 23, 21, 0.7);
|
||||
--base-background-dev: rgba(21, 23, 48, 0.7);
|
||||
--background-session: rgba(13, 13, 13, 0.85);
|
||||
--background-session-components: rgba(48, 49, 48, 0.6);
|
||||
--background-session-components-solid: rgb(33, 34, 33);
|
||||
|
||||
--cmd-input-border-color: rgba(88, 193, 66, 0.8);
|
||||
|
||||
--disabled-background: rgba(76, 81, 75, 1);
|
||||
--disabled-color: #adadad;
|
||||
--disabled-color-faded: rgba(173, 173, 173, 0.6);
|
||||
--scrollbar-background: rgba(21, 23, 21, 1);
|
||||
--scrollbar-thumb-background: rgb(134, 134, 134);
|
||||
--button-background: rgb(38, 38, 38);
|
||||
--button-disabled-background: rgb(30, 29, 29);
|
||||
|
||||
--textarea-background: #2a2a2a;
|
||||
|
||||
--status-connected: #46a758;
|
||||
--status-connecting: #f5d90a;
|
||||
--status-error: #e54d2e;
|
||||
--status-disconnected: #c3c8c2;
|
||||
|
||||
--term-text-error: #cc0000;
|
||||
--term-error-color: rgb(204, 0, 0);
|
||||
--term-text-yellow: #c4a000;
|
||||
--term-black: #000000;
|
||||
--term-text-red: #cc0000;
|
||||
--term-green: #4e9a06;
|
||||
--term-blue: #3465a4;
|
||||
--term-cyan: #06989a;
|
||||
--term-text-white: #d3d7cf;
|
||||
--term-bright-red: #ef2929;
|
||||
--term-bright-green: #58c142;
|
||||
--term-bright-yellow: #fce94f;
|
||||
--term-bright-blue: #32afff;
|
||||
--term-bright-magenta: #ad7fa8;
|
||||
--term-bright-cyan: #34e2e2;
|
||||
--term-bright-white: #ffffff;
|
||||
|
||||
--button-bg-yellow: #e9be68;
|
||||
--button-bg-red: #d06c68;
|
||||
|
||||
--history-error-red: #d06c68;
|
||||
--history-selected-error-red: #f79494;
|
||||
|
||||
--tab-red: #e54d2e;
|
||||
--tab-orange: #ef713b;
|
||||
--tab-yellow: #e0b956;
|
||||
--tab-green: #58c142;
|
||||
--tab-mint: #4bffa9;
|
||||
--tab-cyan: #4bdfff;
|
||||
--tab-blue: #3971ff;
|
||||
--tab-violet: #ba76ff;
|
||||
--tab-pink: #e05677;
|
||||
--tab-white: #ffffff;
|
||||
|
||||
--soft-blue: #729fcf;
|
||||
--active-menu-color: rgb(0, 71, 171);
|
||||
|
||||
// global colors
|
||||
--app-accent-color: rgb(88, 193, 66);
|
||||
--app-error-color: rgb(204, 0, 0);
|
||||
--app-warning-color: rgb(255, 165, 0);
|
||||
--app-scrollbar-thumb-color: rgb(134, 134, 134);
|
||||
--app-text-color: rgb(236, 238, 236);
|
||||
--app-border-color: #333;
|
||||
--app-border: rgba(241, 246, 243, 0.08);
|
||||
--app-text-color: rgb(211, 215, 207);
|
||||
--app-text-primary-color: rgb(255, 255, 255);
|
||||
--app-text-secondary-color: rgb(195, 200, 194);
|
||||
--app-border-color: rgb(51, 51, 51);
|
||||
--app-bg-color: rgba(21, 23, 21, 1);
|
||||
--app-bg-color-dev: rgba(21, 23, 48, 1);
|
||||
|
||||
--sidebar-dev-bg-color: #151730;
|
||||
--sidebar-separator-color: rgba(241, 246, 243, 0.08);
|
||||
--sidebar-workspace-active-color: rgba(241, 246, 243, 0.08);
|
||||
--sidebar-separator-color: rgba(241, 246, 243, 0.08);
|
||||
--sidebar-settings-color: #ffffff;
|
||||
// global generic colors
|
||||
--app-black: rgb(0, 0, 0);
|
||||
|
||||
--line-sidebar-message-text: #c4a000;
|
||||
// scrollbar colors
|
||||
--scrollbar-background-color: rgba(21, 23, 21, 1);
|
||||
--scrollbar-thumb-color: rgb(134, 134, 134);
|
||||
|
||||
// code color
|
||||
--pre-bg-color: rgb(0, 0, 0);
|
||||
|
||||
// tab colors
|
||||
--tab-red: rgb(229, 77, 46);
|
||||
--tab-orange: rgb(239, 113, 59);
|
||||
--tab-yellow: rgb(224, 185, 86);
|
||||
--tab-green: rgb(88, 193, 66);
|
||||
--tab-mint: rgb(75, 255, 169);
|
||||
--tab-cyan: rgb(75, 223, 255);
|
||||
--tab-blue: rgb(57, 113, 255);
|
||||
--tab-violet: rgb(186, 118, 255);
|
||||
--tab-pink: rgb(224, 86, 119);
|
||||
--tab-white: rgb(255, 255, 255);
|
||||
|
||||
// prompt colors
|
||||
--prompt-black: rgb(0, 0, 0);
|
||||
--prompt-white: rgb(211, 215, 207);
|
||||
--prompt-orange: rgb(239, 113, 59);
|
||||
--prompt-blue: rgb(52, 101, 164);
|
||||
--prompt-bright-black: rgb(85, 87, 83);
|
||||
--prompt-bright-red: rgb(239, 41, 41);
|
||||
--prompt-bright-green: rgb(88, 193, 66);
|
||||
--prompt-bright-yellow: rgb(252, 233, 79);
|
||||
--prompt-bright-blue: rgb(50, 175, 255);
|
||||
--prompt-bright-magenta: rgb(173, 127, 168);
|
||||
--prompt-bright-cyan: rgb(52, 226, 226);
|
||||
--prompt-bright-white: rgb(255, 255, 255);
|
||||
|
||||
// button colors
|
||||
--button-text-color: rgb(255, 255, 255);
|
||||
--button-primary-bg-color: rgb(78, 154, 6);
|
||||
--button-secondary-bg-color: rgba(255, 255, 255, 0.09);
|
||||
--button-warning-bg-color: rgb(204, 0, 0);
|
||||
|
||||
// input colors
|
||||
--checkbox-text-color: rgb(255, 255, 255);
|
||||
--checkbox-bg-color: rgb(78, 154, 6);
|
||||
--checkbox-check-color: rgb(255, 255, 255);
|
||||
|
||||
// dropdown colors
|
||||
--dropdown-text-color: rgb(211, 215, 207);
|
||||
--dropdown-error-color: rgb(229, 77, 46);
|
||||
--dropdown-focus-color: rgb(78, 154, 6);
|
||||
|
||||
// textfield colors
|
||||
--textfield-focused-border-color: rgb(78, 154, 6);
|
||||
--textfield-error-border-color: rgb(229, 77, 46);
|
||||
--textfield-label-color: rgb(195, 200, 194);
|
||||
--textfield-text-color: rgb(255, 255, 255);
|
||||
|
||||
// toggle colors
|
||||
--toggle-bg-color: rgb(51, 51, 51);
|
||||
--toggle-thumb-color: rgb(211, 215, 207);
|
||||
--toggle-checked-bg-color: rgb(78, 154, 6);
|
||||
|
||||
// cmdstrcode colors
|
||||
--cmdstrcode-bg-color: rgb(0, 0, 0);
|
||||
--cmdstrcode-text-color: rgb(211, 215, 207);
|
||||
|
||||
// markdown colors
|
||||
--markdown-bg-color: rgb(35, 35, 35);
|
||||
--markdown-outline-color: rgb(78, 154, 6);
|
||||
|
||||
// status(remote) colors
|
||||
// todo: all status colors must be unified
|
||||
--status-connected-color: rgb(70, 167, 88);
|
||||
--status-connecting-color: rgb(245, 217, 10);
|
||||
--status-error-color: rgb(229, 77, 46);
|
||||
--status-disconnected-color: rgb(195, 200, 194);
|
||||
|
||||
// status indicator colors
|
||||
// todo: all status colors must be unified
|
||||
--status-indicator-color: rgb(211, 215, 207);
|
||||
--status-indicator-error: rgb(204, 0, 0);
|
||||
--status-indicator-success: rgb(78, 154, 6);
|
||||
|
||||
// status(version) colors
|
||||
// todo: all status colors must be unified
|
||||
--status-outdated-color: rgb(196, 160, 0);
|
||||
--status-updated-color: rgb(78, 154, 6);
|
||||
|
||||
// term status colors
|
||||
// todo: all status colors must be unified
|
||||
--term-error-color: rgb(204, 0, 0);
|
||||
--term-warning-color: rgb(196, 160, 0);
|
||||
|
||||
// hotkey colors
|
||||
--hotkey-text-color: rgb(195, 200, 194);
|
||||
|
||||
// sidebar colors
|
||||
--sidebar-dev-bg-color: rgb(21, 23, 48);
|
||||
--sidebar-settings-color: rgb(255, 255, 255);
|
||||
|
||||
// line colors
|
||||
--line-sidebar-message-color: rgb(196, 160, 0);
|
||||
|
||||
--line-background: rgba(21, 23, 21, 1);
|
||||
--line-avatar-color: #eceeec;
|
||||
--line-text-color: #f2f4f2;
|
||||
--line-text-color: rgb(211, 215, 207);
|
||||
--line-svg-fill-color: rgb(150, 152, 150);
|
||||
--line-svg-hover-fill-color: #eceeec;
|
||||
--line-selected-border-color: rgb(193, 195, 193);
|
||||
@ -121,7 +141,7 @@
|
||||
--line-selected-error-border-color: rgba(204, 0, 0, 0.8);
|
||||
--line-selected-error-bg-color: rgb(19, 4, 3);
|
||||
--line-error-bg-color: rgba(200, 0, 0, 0.1);
|
||||
--line-error-border-left-color: --line-selected-error-border-color;
|
||||
--line-error-border-left-color: rgba(204, 0, 0, 0.8);
|
||||
--line-simple-text-color: rgba(236, 238, 236, 0.6);
|
||||
--line-meta-text-color: rgb(139, 145, 138);
|
||||
--line-meta-user-color: rgba(140, 184, 232);
|
||||
@ -130,4 +150,35 @@
|
||||
--line-status-success-fill: rgb(88, 193, 66);
|
||||
--line-status-error-fill: #cc0000;
|
||||
--line-status-warning-fill: #ffa500;
|
||||
|
||||
// view colors
|
||||
// todo: bookmarks is a view, colors must be unified with --view* colors
|
||||
--bookmarks-text-color: rgb(211, 215, 207);
|
||||
--bookmarks-textarea-bg-color: rgb(0, 0, 0);
|
||||
--bookmarks-disabled-text-color: rgb(173, 173, 173);
|
||||
--bookmarks-control-hover-color: rgb(255, 255, 255);
|
||||
|
||||
// view colors
|
||||
--view-error-color: rgb(204, 0, 0);
|
||||
--view-text-color: rgb(195, 200, 194);
|
||||
|
||||
// session colors
|
||||
--session-bg-color: rgba(13, 13, 13, 0.85);
|
||||
|
||||
// cmdinput colors
|
||||
--cmdinput-textarea-bg-color: rgb(27, 12, 12);
|
||||
--cmdinput-text-error-color: rgb(239, 41, 41);
|
||||
--cmdinput-history-title-color: rgb(114, 159, 207);
|
||||
--cmdinput-remote-title-color: rgb(6, 152, 154);
|
||||
--cmdinput-history-item-error-color: rgb(220, 119, 118);
|
||||
--cmdinput-history-item-selected-error-color: rgb(247, 148, 148);
|
||||
--cmdinput-remote-field-control-color: rgb(0, 0, 0);
|
||||
--cmdinput-warning-color: rgb(255, 165, 0);
|
||||
--cmdinput-button-bg-color: rgb(88, 193, 66);
|
||||
--cmdinput-comment-button-bg-color: rgb(57, 113, 255);
|
||||
--cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
|
||||
--cmdinput-history-bg-color: rgb(21, 23, 21, 1);
|
||||
|
||||
// screen view color
|
||||
--screen-view-text-caption-color: rgb(139, 145, 138);
|
||||
}
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 20;
|
||||
border-radius: 10px;
|
||||
border-left: 1px solid var(--primary-border-color);
|
||||
border-bottom: 1px solid var(--primary-border-color);
|
||||
border-left: 1px solid var(--app-border-color);
|
||||
border-bottom: 1px solid var(--app-border-color);
|
||||
|
||||
.title-bar-drag {
|
||||
-webkit-app-region: drag;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
width: 100%;
|
||||
padding: var(--termfontsize);
|
||||
z-index: 100;
|
||||
border-top: 1px solid @thin-border-color;
|
||||
border-top: 1px solid var(--app-border-color);
|
||||
|
||||
&.active {
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
.remote-status-warning {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: @term-yellow;
|
||||
color: var(--cmdinput-warning-color);
|
||||
align-items: center;
|
||||
|
||||
.button {
|
||||
@ -52,7 +52,7 @@
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
@ -82,11 +82,11 @@
|
||||
height: 1em;
|
||||
margin: 0 0.5em;
|
||||
vertical-align: text-top;
|
||||
fill: @base-color;
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
|
||||
.warning {
|
||||
fill: @warning-yellow;
|
||||
fill: var(--cmdinput-warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,17 +120,17 @@
|
||||
bottom: calc(-13px + var(--termpad));
|
||||
right: 0px;
|
||||
font-size: 10px;
|
||||
color: @text-secondary;
|
||||
color: var(--app-text-secondary-color);
|
||||
line-height: 1;
|
||||
padding: 0px 8px 3px 8px;
|
||||
background-color: @textarea-background;
|
||||
background-color: var(--cmdinput-textarea-bg);
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: @term-bright-white;
|
||||
background-color: @textarea-background;
|
||||
color: var(--app-text-primary-color);
|
||||
background-color: var(--cmdinput-textarea-bg);
|
||||
padding: var(--termpad);
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
@ -158,17 +158,17 @@
|
||||
|
||||
.cmd-quick-context .button {
|
||||
background-color: #000 !important;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
&.inputmode-global .cmd-quick-context .button {
|
||||
color: @term-black;
|
||||
background-color: @tab-green !important;
|
||||
color: var(--app-black);
|
||||
background-color: var(--cmdinput-button-bg-color) !important;
|
||||
}
|
||||
|
||||
&.inputmode-comment .cmd-quick-context .button {
|
||||
color: @term-black;
|
||||
background-color: @tab-blue !important;
|
||||
color: var(--app-black);
|
||||
background-color: var(--cmdinput-comment-button-bg-color) !important;
|
||||
}
|
||||
|
||||
.cmd-exec {
|
||||
@ -181,11 +181,11 @@
|
||||
height: 2.5em;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
fill: @wave-green;
|
||||
fill: var(--app-accent-color);
|
||||
padding: 0.25em;
|
||||
}
|
||||
.icon.disabled {
|
||||
fill: @disabled-background;
|
||||
fill: var(--cmdinput-disabled-icon-color);
|
||||
cursor: default;
|
||||
}
|
||||
.cmd-btn {
|
||||
@ -223,8 +223,8 @@
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
color: @term-bright-white;
|
||||
background-color: @textarea-background;
|
||||
color: var(--app-text-primary-color);
|
||||
background-color: var(--cmdinput-textarea-bg);
|
||||
padding: 0.5em;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
@ -250,7 +250,7 @@
|
||||
}
|
||||
|
||||
.chat-msg-assistant {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
.chat-msg-user {
|
||||
@ -262,7 +262,7 @@
|
||||
}
|
||||
|
||||
.chat-msg-error {
|
||||
color: @term-bright-red;
|
||||
color: var(--cmdinput-text-error);
|
||||
font-family: @markdown-font;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -273,7 +273,7 @@
|
||||
}
|
||||
|
||||
.cmd-history {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
margin-bottom: 5px;
|
||||
overflow: auto;
|
||||
flex-shrink: 1;
|
||||
@ -283,8 +283,8 @@
|
||||
z-index: 102;
|
||||
top: 5px;
|
||||
left: 20px;
|
||||
background-color: @background-session-components-solid;
|
||||
color: @soft-blue;
|
||||
background-color: var(--cmdinput-history-bg-color);
|
||||
color: var(--cmdinput-history-title-color);
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -311,7 +311,7 @@
|
||||
|
||||
.history-items {
|
||||
margin-top: 24px;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
|
||||
padding-bottom: 6px;
|
||||
|
||||
@ -320,7 +320,7 @@
|
||||
}
|
||||
|
||||
.history-item.history-haderror {
|
||||
color: mix(@term-red, @term-white, 50%);
|
||||
color: var(--cmdinput-history-item-error-color);
|
||||
}
|
||||
|
||||
.history-line:first-child {
|
||||
@ -338,12 +338,12 @@
|
||||
|
||||
.history-item.is-selected {
|
||||
font-weight: bold;
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.history-item.is-selected.history-haderror {
|
||||
color: mix(@term-bright-red, @term-bright-white, 50%);
|
||||
color: var(--cmdinput-history-item-selected-error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -354,21 +354,16 @@
|
||||
margin-bottom: var(--termpad);
|
||||
|
||||
.info-msg {
|
||||
color: @soft-blue;
|
||||
color: var(--cmdinput-history-title-color);
|
||||
padding-bottom: 2px;
|
||||
|
||||
a {
|
||||
color: @term-blue;
|
||||
color: var(--prompt-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.info-title {
|
||||
color: @soft-blue;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.info-lines {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
white-space: pre;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
@ -384,7 +379,7 @@
|
||||
|
||||
.info-comp {
|
||||
min-width: 200px;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
margin-right: 10px;
|
||||
|
||||
&.has-space {
|
||||
@ -393,19 +388,19 @@
|
||||
}
|
||||
|
||||
.metacmd-comp {
|
||||
color: @term-bright-green;
|
||||
color: var(--prompt-bright-green);
|
||||
}
|
||||
}
|
||||
|
||||
.info-error {
|
||||
color: @term-red;
|
||||
color: var(--cmdinput-text-error-color);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.info-remote-showall {
|
||||
table.remotes-table {
|
||||
th {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -429,7 +424,7 @@
|
||||
|
||||
.info-remote-title {
|
||||
font-weight: bold;
|
||||
color: @term-cyan;
|
||||
color: var(--cmdinput-remote-title-color);
|
||||
}
|
||||
|
||||
.info-error,
|
||||
@ -464,7 +459,7 @@
|
||||
white-space: pre;
|
||||
width: 140px;
|
||||
font-weight: bold;
|
||||
color: @term-bright-white;
|
||||
color: var(--app-text-primary-color);
|
||||
}
|
||||
|
||||
.undo-icon {
|
||||
@ -478,8 +473,8 @@
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"] {
|
||||
background-color: @term-black;
|
||||
color: @term-white;
|
||||
background-color: var(--app-black);
|
||||
color: var(--app-text-color);
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
@ -494,8 +489,8 @@
|
||||
&.select-input {
|
||||
select {
|
||||
width: 200px;
|
||||
background-color: @term-black;
|
||||
color: @term-white;
|
||||
background-color: var(--app-black);
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.screen-view {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
border-top: 1px solid @thin-border-color;
|
||||
border-top: 1px solid var(--app-border-color);
|
||||
}
|
||||
|
||||
.screen-sidebar,
|
||||
@ -21,7 +21,7 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid @thin-border-color;
|
||||
border-left: 1px solid var(--app-border-color);
|
||||
|
||||
.sidebar-header {
|
||||
/* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
|
||||
@ -29,12 +29,12 @@
|
||||
flex-direction: row;
|
||||
padding: 3px 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid @thin-border-color;
|
||||
border-bottom: 1px solid var(--app-border-color);
|
||||
font-size: var(--termfontsize);
|
||||
font-family: var(--termfontfamily);
|
||||
font-weight: normal;
|
||||
line-height: var(--termlineheight);
|
||||
color: @text-caption;
|
||||
color: var(--screen-view-text-caption-color);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
@ -99,13 +99,13 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: rgba(78, 154, 6, 0.65);
|
||||
color: @term-black;
|
||||
color: var(--app-black);
|
||||
padding: 2px 8px 2px 4px;
|
||||
border-bottom-left-radius: 5px;
|
||||
z-index: 10;
|
||||
|
||||
&.is-active {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
|
||||
.render-mode {
|
||||
@ -113,10 +113,10 @@
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
|
||||
&:hover {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
}
|
||||
|
||||
.share-tag {
|
||||
color: @term-white;
|
||||
color: var(--app-text-color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40%;
|
||||
@ -192,7 +192,7 @@
|
||||
padding: 1.5em 1em;
|
||||
margin-top: 0;
|
||||
line-height: 2.5em;
|
||||
border-top: 1px solid @base-border;
|
||||
border-top: 1px solid var(--app-border);
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
@ -240,7 +240,7 @@
|
||||
}
|
||||
|
||||
.cr-help-text {
|
||||
color: @text-caption;
|
||||
color: var(--screen-view-text-caption-color);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -328,17 +328,17 @@
|
||||
height: 16px;
|
||||
|
||||
path {
|
||||
fill: @text-primary;
|
||||
fill: var(--app-text-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-standard {
|
||||
color: @text-secondary;
|
||||
color: var(--app-text-secondary-color);
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: @text-caption;
|
||||
color: var(--screen-view-text-caption-color);
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
}
|
||||
border-radius: 10px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
border-bottom: 1px solid @thin-border-color;
|
||||
border-right: 1px solid @thin-border-color;
|
||||
border-left: 1px solid @thin-border-color;
|
||||
border-bottom: 1px solid var(--app-border-color);
|
||||
border-right: 1px solid var(--app-border-color);
|
||||
border-left: 1px solid var(--app-border-color);
|
||||
background-color: black;
|
||||
|
||||
.center-message {
|
||||
@ -21,6 +21,6 @@
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: @text-secondary;
|
||||
color: var(--app-text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user