From 50f86393f36744afb5e17b5094bcb6f1176583c6 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@mailbox.org>
Date: Sun, 22 Sep 2024 10:48:50 +0200
Subject: [PATCH] Improve default button look instead of reapplying the same
style to every button variant
---
css/003-sugarcube-overwrite/general.css | 9 +++++++++
css/gui/buttons.css | 7 -------
css/gui/hotkeySettings.css | 11 +----------
css/gui/options.css | 2 --
css/gui/slaveList/quickList.css | 6 ------
css/gui/tabs.css | 6 ++++--
css/rulesAssistant/conditionEditor.css | 3 ---
src/002-config/mousetrapConfig.js | 2 +-
8 files changed, 15 insertions(+), 31 deletions(-)
diff --git a/css/003-sugarcube-overwrite/general.css b/css/003-sugarcube-overwrite/general.css
index 1929c109f2e..4c26f1fa816 100644
--- a/css/003-sugarcube-overwrite/general.css
+++ b/css/003-sugarcube-overwrite/general.css
@@ -27,3 +27,12 @@ hr {
#ui-dialog-title {
padding-left: 3.5em;
}
+
+/* make buttons look nice */
+.passage button {
+ background-color: var(--button-color);
+ border: solid 2px var(--button-border-color);
+}
+.passage button:hover {
+ background-color: var(--button-hover-color);
+}
diff --git a/css/gui/buttons.css b/css/gui/buttons.css
index a58ce9208f8..830df58b829 100644
--- a/css/gui/buttons.css
+++ b/css/gui/buttons.css
@@ -1,17 +1,10 @@
.purchase-button {
- background-color: var(--button-color);
- border: solid 2px var(--button-border-color);
font-style: normal;
margin: 0.25em 1em;
outline: none;
transition: 0.2s;
}
-.purchase-button:hover {
- background-color: var(--button-hover-color);
- border: solid 2px var(--button-border-color);
-}
-
.purchase-button.disabled, .purchase-button.disabled:hover {
background-color: black;
cursor: not-allowed;
diff --git a/css/gui/hotkeySettings.css b/css/gui/hotkeySettings.css
index 57716805ccf..5cc00bf8d44 100644
--- a/css/gui/hotkeySettings.css
+++ b/css/gui/hotkeySettings.css
@@ -20,8 +20,6 @@ div.hotkey-settings div.description {
div.hotkey-settings button {
margin: 5px;
border-width: 2px;
- background-color: var(--button-color);
- border-color: var(--button-border-color);
width: 70px;
}
@@ -30,13 +28,6 @@ div.hotkey-settings button.combination {
border-width: 0;
}
-div.hotkey-settings button.inactive, div.hotkey-settings button.inactive:hover {
+div.hotkey-settings button:disabled {
background-color: var(--button-selected-color);
- cursor: default;
-
-}
-
-div.hotkey-settings button:hover {
- background-color: var(--button-hover-color);
- border-color: var(--button-border-color);
}
diff --git a/css/gui/options.css b/css/gui/options.css
index 4599529a7dc..b3e3b7f3e49 100644
--- a/css/gui/options.css
+++ b/css/gui/options.css
@@ -22,7 +22,6 @@ div.options-group div.button-group {
.button-group button {
color: var(--link-color);
- background-color: var(--button-color);
border: none; /* outline instead of border */
/* left & right outline overlap each other so we don't have a double border */
outline: solid 2px var(--button-border-color);
@@ -33,7 +32,6 @@ div.options-group div.button-group {
}
.button-group button:hover {
- background-color: var(--button-hover-color);
color: var(--link-hover-color)
}
diff --git a/css/gui/slaveList/quickList.css b/css/gui/slaveList/quickList.css
index e307ca96368..72d44701b1e 100644
--- a/css/gui/slaveList/quickList.css
+++ b/css/gui/slaveList/quickList.css
@@ -9,12 +9,6 @@ button.quick-button {
.quick-list button {
margin: 10px;
- border: 2px solid var(--button-border-color);
- background-color: var(--button-color);
-}
-
-.quick-list button:hover {
- background-color: var(--button-hover-color);
}
.quick-list.devotion .mindbroken {
diff --git a/css/gui/tabs.css b/css/gui/tabs.css
index b789c13bb7a..7f1fa557651 100644
--- a/css/gui/tabs.css
+++ b/css/gui/tabs.css
@@ -4,8 +4,6 @@ div.tab-bar {
}
div.tab-bar button {
- background-color: var(--button-color);
- border: solid 2px var(--button-color);
color: var(--link-color);
float: left;
outline: none;
@@ -15,6 +13,10 @@ div.tab-bar button {
font-size: large;
}
+div.tab-bar button:not(:first-child) {
+ border-left: none;
+}
+
div.tab-bar button.card {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
diff --git a/css/rulesAssistant/conditionEditor.css b/css/rulesAssistant/conditionEditor.css
index 25933dc0956..cb22b6f72ae 100644
--- a/css/rulesAssistant/conditionEditor.css
+++ b/css/rulesAssistant/conditionEditor.css
@@ -8,14 +8,11 @@
.rule-builder button {
color: var(--link-color);
- background-color: var(--button-color);
- border: solid 2px var(--button-border-color);
border-radius: 4px;
margin-left: 4px;
}
.rule-builder button:hover {
- background-color: var(--button-hover-color);
color: var(--link-hover-color);
}
diff --git a/src/002-config/mousetrapConfig.js b/src/002-config/mousetrapConfig.js
index 4c04b6a8a64..80c33589143 100644
--- a/src/002-config/mousetrapConfig.js
+++ b/src/002-config/mousetrapConfig.js
@@ -153,7 +153,7 @@ App.UI.Hotkeys = (function() {
const button = App.UI.DOM.appendNewElement("button", container, "Reset");
if (isDefault(actionKey)) {
- button.className = "inactive";
+ button.disabled = true;
} else {
button.onclick = () => {
action.combinations = [...defaultCombinations[actionKey]];
--
GitLab