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

use css vars for button colors (#399)

Browse Source
This commit is contained in:
Red J Adaya 2024-09-20 01:44:12 +08:00 committed by GitHub
parent a50431ce2b
commit dbf88d82b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/app/element/button.less
View File

@ -1,5 +1,5 @@
/* Copyright 2024, Command Line Inc. */ // Copyright 2024, Command Line Inc.
/* SPDX-License-Identifier: Apache-2.0 */ // SPDX-License-Identifier: Apache-2.0
.button { .button {
// override default button appearance // override default button appearance
@ -26,41 +26,41 @@
&.solid { &.solid {
&.green { &.green {
color: #000000; color: var(--button-text-color);
background-color: var(--accent-color); background-color: var(--accent-color);
border: 1px solid #29f200; border: 1px solid var(--button-green-border-color);
&:hover { &:hover {
color: #000000; color: var(--button-text-color);
background-color: #29f200; background-color: var(--button-green-border-color);
} }
} }
&.grey { &.grey {
background-color: rgba(255, 255, 255, 0.04); background-color: var(--button-grey-bg);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--button-grey-bg);
color: var(--main-text-color); color: var(--main-text-color);
&:hover { &:hover {
color: var(--main-text-color); color: var(--main-text-color);
background-color: rgba(255, 255, 255, 0.09); background-color: var(--button-grey-hover-bg);
} }
} }
&.red { &.red {
background-color: #cc0000; background-color: var(--button-red-bg);
border: 1px solid #fc3131; border: 1px solid var(--button-red-border-color);
color: var(--main-text-color); color: var(--main-text-color);
&:hover { &:hover {
background-color: #f93939; background-color: var(--button-red-hover-bg);
} }
} }
&.yellow { &.yellow {
color: #000000; color: var(--button-text-color);
background-color: #c4a000; background-color: var(--button-yellow-bg);
border: 1px solid #fce94f; border: 1px solid var(--button-yellow-hover-bg);
&:hover { &:hover {
color: #000000; color: var(--button-text-color);
background-color: #fce94f; background-color: var(--button-yellow-hover-bg);
} }
} }
} }
@ -71,14 +71,14 @@
color: var(--accent-color); color: var(--accent-color);
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
&:hover { &:hover {
color: #29f200; color: var(--button-green-border-color);
border: 1px solid #29f200; border: 1px solid var(--button-green-border-color);
} }
} }
&.grey { &.grey {
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid var(--button-grey-outlined-color);
color: rgba(255, 255, 255, 0.6); color: var(--button-grey-outlined-color);
&:hover { &:hover {
color: var(--main-text-color); color: var(--main-text-color);
border: 1px solid var(--main-text-color); border: 1px solid var(--main-text-color);
@ -86,20 +86,20 @@
} }
&.red { &.red {
border: 1px solid #cc0000; border: 1px solid var(--button-red-bg);
color: #cc0000; color: var(--button-red-bg);
&:hover { &:hover {
color: #ff3c3c; color: var(--button-red-outlined-color);
border: 1px solid #ff3c3c; border: 1px solid var(--button-red-outlined-color);
} }
} }
&.yellow { &.yellow {
color: #c4a000; color: var(--button-yellow-bg);
border: 1px solid #c4a000; border: 1px solid var(--button-yellow-bg);
&:hover { &:hover {
color: #fce94f; color: var(--button-yellow-hover-bg);
border: 1px solid #fce94f; border: 1px solid var(--button-yellow-hover-bg);
} }
} }
} }
@ -115,13 +115,13 @@
border: none; border: none;
color: var(--accent-color); color: var(--accent-color);
&:hover { &:hover {
color: #29f200; color: var(--button-green-border-color);
} }
} }
&.grey { &.grey {
border: none; border: none;
color: rgba(255, 255, 255, 0.6); color: var(--button-grey-outlined-color);
&:hover { &:hover {
color: var(--main-text-color); color: var(--main-text-color);
} }
@ -129,17 +129,17 @@
&.red { &.red {
border: none; border: none;
color: #cc0000; color: var(--button-red-bg);
&:hover { &:hover {
color: #fc3131; color: var(--button-red-border-color);
} }
} }
&.yellow { &.yellow {
border: none; border: none;
color: #c4a000; color: var(--button-yellow-bg);
&:hover { &:hover {
color: #fce94f; color: var(--button-yellow-hover-bg);
} }
} }
} }

20
frontend/app/theme.less
View File

@ -133,17 +133,17 @@
--term-cursor-accent: #000000; --term-cursor-accent: #000000;
// button colors // button colors
--button-focus-border-color: rgba(88, 193, 66, 0.5); --button-text-color: #000000;
--button-green-text-color: var(--term-black);
--button-green-bg: var(--term-green); --button-green-bg: var(--term-green);
--button-green-border-color: rgb(26, 52, 21); --button-green-border-color: #29f200;
--button-grey-text-color: var(--main-text-color);
--button-grey-bg: rgba(255, 255, 255, 0.04); --button-grey-bg: rgba(255, 255, 255, 0.04);
--button-grey-hover-bg: rgba(255, 255, 255, 0.09);
--button-grey-border-color: rgba(255, 255, 255, 0.1); --button-grey-border-color: rgba(255, 255, 255, 0.1);
--button-red-text-color: var(--main-text-color); --button-grey-outlined-color: rgba(255, 255, 255, 0.6);
--button-red-bg: var(--term-red); --button-red-bg: #cc0000;
--button-red-border-color: #ff1818; --button-red-hover-bg: #f93939;
--button-yellow-text-color: var(--term-black); --button-red-border-color: #fc3131;
--button-yellow-bg: var(--term-yellow); --button-red-outlined-color: #ff3c3c;
--button-yellow-border-color: #fbd93f; --button-yellow-bg: #c4a000;
--button-yellow-hover-bg: #fce94f;
} }