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

20
frontend/app/theme.less
View File

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