style(next): buttons: rename the CSS variables to avoid clashing with another button styles

This commit is contained in:
Adorian Doran 2025-01-29 21:17:20 +02:00
parent 96b25b8e5e
commit 16ea6186dd
3 changed files with 17 additions and 17 deletions

View File

@ -19,11 +19,11 @@
--accented-background-color: #555;
--button-background-color: #ffffff28;
--button-text-color: #ffffffc2;
--button-hover-background-color: #ffffff37;
--button-hover-text-color: white;
--button-shadow-color: #00000080;
--cmd-button-background-color: #ffffff28;
--cmd-button-text-color: #ffffffc2;
--cmd-button-hover-background-color: #ffffff37;
--cmd-button-hover-text-color: white;
--cmd-button-shadow-color: #00000080;
--muted-text-color: #bbb;

View File

@ -19,11 +19,11 @@
--accented-background-color: #f5f5f5;
--button-background-color: #0000000f;
--button-text-color: #000000ad;
--button-hover-background-color: #00000016;
--button-hover-text-color: #000;
--button-shadow-color: #00000040;
--cmd-button-background-color: #0000000f;
--cmd-button-text-color: #000000ad;
--cmd-button-hover-background-color: #00000016;
--cmd-button-hover-text-color: #000;
--cmd-button-shadow-color: #00000040;
--muted-text-color: #666;

View File

@ -5,12 +5,12 @@
button.btn.btn-primary,
button.btn.btn-secondary,
button.btn.btn-sm {
box-shadow: 1px 1px 1px var(--button-shadow-color);
box-shadow: 1px 1px 1px var(--cmd-button-shadow-color);
padding: 4px 16px;
border: unset;
border-radius: 6px;
background: var(--button-background-color);
color: var(--button-text-color);
background: var(--cmd-button-background-color);
color: var(--cmd-button-text-color);
}
button.btn.btn-primary,
@ -22,8 +22,8 @@ button.btn.btn-sm {
button.btn.btn-primary:hover,
button.btn.btn-secondary:hover,
button.btn.btn-sm:hover {
background: var(--button-hover-background-color);
color: var(--button-hover-text-color);
background: var(--cmd-button-hover-background-color);
color: var(--cmd-button-hover-text-color);
}
button.btn.btn-primary:active,
@ -31,8 +31,8 @@ button.btn.btn-secondary:active,
button.btn.btn-sm:active {
box-shadow: unset;
opacity: .85;
background: var(--button-background-color) !important;
color: var(--button-text-color) !important;
background: var(--cmd-button-background-color) !important;
color: var(--cmd-button-text-color) !important;
transform: scale(.95);
}