mirror of
https://github.com/wavetermdev/backup.git
synced 2026-08-05 13:57:07 -07: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
+67
-75
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user