DEV: Button stylesheet cleanup (#50)

This commit is contained in:
Jordan Vidrine
2025-03-14 15:30:00 -05:00
committed by GitHub
parent f70c452f26
commit 8b09523510
3 changed files with 21 additions and 101 deletions
+2 -89
View File
@@ -6,33 +6,6 @@
transition: none; transition: none;
} }
.btn-default,
.btn-primary,
.btn-danger,
.select-kit .select-kit-header {
//using this hard coded value to make standalone icon-only btns perfect circles; I can't target the class no-text see below line 18
padding: var(--spacing-block-s) 0.665rem;
//theres buttons with text hidden that dont have the no-text class, and my :has workaround for some reason refuses to work
// &.no-text,
// .btn-icon-text:has(.d-button-label) {
// padding-inline: 0.665rem;
// }
}
.btn.btn-transparent.btn-icon-text {
background-color: transparent;
.d-icon {
color: inherit;
}
&.--active .d-icon {
color: var(--accent-color);
}
&:hover {
box-shadow: none;
}
}
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text { .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
background: var(--accent-color); background: var(--accent-color);
&:hover { &:hover {
@@ -48,29 +21,15 @@
} }
} }
.discourse-no-touch .btn.post-action-menu__reply:hover {
box-shadow: none;
}
.post-info.edits .btn-flat {
background-color: transparent;
&:hover {
box-shadow: none;
}
}
.discourse-no-touch .btn-default.sidebar-new-topic-button, .discourse-no-touch .btn-default.sidebar-new-topic-button,
.discourse-no-touch .interface-color-selector-content, .discourse-no-touch .btn-default,
.btn-default, .discourse-no-touch .select-kit .select-kit-header.btn-default {
.btn-icon-text,
.select-kit .select-kit-header.btn-default {
background: var(--primary-100); background: var(--primary-100);
.d-icon { .d-icon {
color: var(--accent-color); color: var(--accent-color);
} }
&:hover { &:hover {
.discourse-no-touch & {
border-color: transparent; border-color: transparent;
box-shadow: 0px 0px 8px 1px var(--button-box-shadow); box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
background: var(--d-content-background); background: var(--d-content-background);
@@ -79,9 +38,7 @@
color: var(--accent-color); color: var(--accent-color);
} }
} }
}
&:focus-visible { &:focus-visible {
.discourse-no-touch & {
background: var(--d-content-background); background: var(--d-content-background);
color: var(--accent-color); color: var(--accent-color);
box-shadow: 0px 0px 0px 3px var(--button-box-shadow); box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
@@ -89,7 +46,6 @@
color: var(--accent-color); color: var(--accent-color);
} }
} }
}
&:active:not(:hover, :focus) { &:active:not(:hover, :focus) {
color: var(--primary); color: var(--primary);
background: var(--tertiary-300); background: var(--tertiary-300);
@@ -128,46 +84,3 @@
background: oklch(from var(--accent-color) 30% c h) !important; background: oklch(from var(--accent-color) 30% c h) !important;
} }
} }
.post-controls {
svg.d-icon:not(.d-icon-heart, .d-icon-far-heart) {
color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
}
}
.discourse-reactions-double-button:hover .reactions-counter {
color: var(--love);
}
.discourse-no-touch
.discourse-reactions-actions.has-reacted
.discourse-reactions-double-button:hover,
.discourse-no-touch
.discourse-reactions-actions.has-reacted.can-toggle-reaction
.discourse-reactions-reaction-button:hover
.reaction-button,
.discourse-no-touch
.discourse-reactions-actions.has-reacted:not(.can-toggle-reaction)
.discourse-reactions-reaction-button:hover
.reaction-button {
background: var(--love-low);
.d-icon-heart {
color: var(--love);
}
}
//undoing the outline for select-kit, since Im using a custom visual cue
.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
.select-kit.single-select .select-kit-header:not(.btn):focus,
.select-kit.single-select .select-kit-header:not(.btn):active {
outline: transparent;
border-color: var(--accent-color);
}
.fk-d-menu__inner-content {
.btn-icon-text.btn-flat:hover {
background-color: var(--d-selected);
box-shadow: none;
color: var(--primary);
}
}
+8
View File
@@ -41,6 +41,14 @@
oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h), oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h) oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
); );
--tertiary-300: light-dark(
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
);
--tertiary-high: light-dark(
oklch(from var(--accent-color) calc(l * 1) c h),
oklch(from var(--accent-color) calc(l * 1) c h)
);
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color); --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
--search-color: light-dark( --search-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h), oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+2 -3
View File
@@ -44,8 +44,7 @@
.d-header-icons .d-header-icons
.header-color-scheme-toggle .header-color-scheme-toggle
.-expanded .-expanded
> .d-icon, > .d-icon {
.discourse-no-touch .btn-flat:hover .d-icon {
color: var(--header_primary-medium); color: var(--header_primary-medium);
} }
@@ -79,7 +78,7 @@
.user-menu .quick-access-panel li.do-not-disturb, .user-menu .quick-access-panel li.do-not-disturb,
.menu-panel .panel-body-bottom .btn, .menu-panel .panel-body-bottom .btn,
.menu-panel .panel-body-bottom .btn:hover { .menu-panel .panel-body-bottom .btn:hover {
background-color: var(--d-content-background); // background-color: var(--d-content-background);
} }
body.login-page, body.login-page,