obsidian-plugin/andy-stack_vaultkeeper-ai
1
0
Fork 0
mirror of https://github.com/andy-stack/vaultkeeper-ai.git synced 2026-07-22 06:42:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: replace !important with doubled class selectors for specificity

Browse source 
Remove !important flags from API key validation and transparent button styles by using doubled class selectors (.class.class) to increase CSS specificity. Add explanatory comments documenting the specificity approach for future maintainability.
This commit is contained in:
Andrew Beal 2026-05-31 14:57:03 +01:00
parent 84001a88d4
commit 4763199f16
1 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
Styles/custom_styles.css
View file

@ -87,16 +87,18 @@ body:not(.is-tablet) .workspace-drawer.mod-right {
/* Settings Styles */
/* ============================== */
.api-key-setting-ok input[type="text"],
.api-key-setting-ok input[type="password"],
.api-key-setting-ok textarea {
border-color: var(--color-green) !important;
/* Class is doubled to raise specificity above Obsidian's input border
styles without referencing their selectors (future-proof) or !important. */
.api-key-setting-ok.api-key-setting-ok input[type="text"],
.api-key-setting-ok.api-key-setting-ok input[type="password"],
.api-key-setting-ok.api-key-setting-ok textarea {
border-color: var(--color-green);
}
.api-key-setting-error input[type="text"],
.api-key-setting-error input[type="password"],
.api-key-setting-error textarea {
border-color: var(--color-red) !important;
.api-key-setting-error.api-key-setting-error input[type="text"],
.api-key-setting-error.api-key-setting-error input[type="password"],
.api-key-setting-error.api-key-setting-error textarea {
border-color: var(--color-red);
}
.api-key-setting-error .setting-item-control {
@ -133,11 +135,17 @@ body:not(.is-tablet) .workspace-drawer.mod-right {
/* CSS Variables for Common Components */
/* ============================== */
.transparent-button {
border: none !important;
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
/* Doubled class + explicit interactive states beat Obsidian's
button / button:hover / button:focus styles (specificity 0-1-1)
without referencing their selectors or using !important. */
.transparent-button.transparent-button,
.transparent-button.transparent-button:hover,
.transparent-button.transparent-button:focus,
.transparent-button.transparent-button:active {
border: none;
outline: none;
box-shadow: none;
background-color: transparent;
}
.search-trigger {