UX: Small tweaks to colors (#37)
This commit is contained in:
+14
-1
@@ -35,6 +35,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.discourse-no-touch .btn.post-action-menu__reply: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 .interface-color-selector-content,
|
||||||
.btn-default,
|
.btn-default,
|
||||||
@@ -48,7 +52,7 @@
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
border: 1px solid 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);
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
@@ -88,12 +92,17 @@
|
|||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
||||||
|
color: var(--accent-text-color);
|
||||||
|
.d-icon {
|
||||||
|
color: var(--accent-text-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||||
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
||||||
|
color: var(--accent-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
@@ -114,3 +123,7 @@
|
|||||||
outline: transparent;
|
outline: transparent;
|
||||||
border-color: var(--accent-color);
|
border-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__item .btn {
|
||||||
|
background-color: var(--d-content-background);
|
||||||
|
}
|
||||||
|
|||||||
+12
-20
@@ -10,21 +10,18 @@
|
|||||||
oklch(from var(--accent-color) 10% 0.025 h)
|
oklch(from var(--accent-color) 10% 0.025 h)
|
||||||
);
|
);
|
||||||
--header_primary-low-mid: light-dark(
|
--header_primary-low-mid: light-dark(
|
||||||
oklch(from var(--background-color) calc(l * 0.8) calc(c * 2) h),
|
oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
|
||||||
oklch(from var(--accent-color) calc(l * 0.9) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
--header_primary-medium: light-dark(
|
--header_primary-medium: light-dark(
|
||||||
oklch(from var(--background-color) calc(l * 0.6) calc(c * 2) h),
|
oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
|
||||||
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
--d-content-background: light-dark(
|
--d-content-background: light-dark(
|
||||||
oklch(from var(--accent-color) calc(l * 2) 0 h),
|
oklch(from var(--accent-color) calc(l * 2) 0 h),
|
||||||
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
|
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
|
||||||
);
|
);
|
||||||
--primary-300: light-dark(
|
--primary-300: light-dark(#d1d1d1, #838383);
|
||||||
oklch(from var(--accent-color) calc(l * 1.75) 0 h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.75) 0 h)
|
|
||||||
);
|
|
||||||
--primary-low: var(--primary-300);
|
--primary-low: var(--primary-300);
|
||||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
||||||
--tertiary-med-or-tertiary: var(--accent-color);
|
--tertiary-med-or-tertiary: var(--accent-color);
|
||||||
@@ -46,12 +43,12 @@
|
|||||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
||||||
);
|
);
|
||||||
--d-selected: light-dark(
|
--d-selected: light-dark(
|
||||||
oklch(from var(--background-color) calc(l * 0.9) calc(c * 2) h),
|
oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
|
||||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
--d-sidebar-highlight-hover-background: var(--d-selected);
|
--d-sidebar-highlight-hover-background: var(--d-selected);
|
||||||
--d-sidebar-border-color: light-dark(
|
--d-sidebar-border-color: light-dark(
|
||||||
oklch(from var(--background-color) calc(l * 0.85) calc(c * 1) h),
|
oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
|
||||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
--d-chat-border: light-dark(
|
--d-chat-border: light-dark(
|
||||||
@@ -59,26 +56,21 @@
|
|||||||
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
--accent-text-color: light-dark(#ffffff, #0f1024);
|
--accent-text-color: light-dark(#ffffff, #0f1024);
|
||||||
--d-sidebar-link-icon-color: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--d-nav-color--active: var(--accent-color);
|
--d-nav-color--active: var(--accent-color);
|
||||||
--d-sidebar-background: var(--background-color);
|
--d-sidebar-background: var(--background-color);
|
||||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||||
--d-sidebar-link-color: light-dark(
|
--d-sidebar-link-color: light-dark(
|
||||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h),
|
oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
||||||
);
|
);
|
||||||
|
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
||||||
--d-sidebar-header-color: var(--d-sidebar-link-color);
|
--d-sidebar-header-color: var(--d-sidebar-link-color);
|
||||||
|
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
|
||||||
--d-sidebar-suffix-color: light-dark(
|
--d-sidebar-suffix-color: light-dark(
|
||||||
oklch(from var(--accent-base-color) calc(l * 0.5) calc(c * 0.9) h),
|
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
|
||||||
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
|
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
|
||||||
);
|
);
|
||||||
--d-sidebar-active-suffix-color: light-dark(
|
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||||
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.9) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.9) h)
|
|
||||||
);
|
|
||||||
--link-color: light-dark(
|
--link-color: light-dark(
|
||||||
var(--accent-base-color),
|
var(--accent-base-color),
|
||||||
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
||||||
|
|||||||
@@ -37,6 +37,7 @@
|
|||||||
.discourse-no-touch .header-sidebar-toggle button:hover {
|
.discourse-no-touch .header-sidebar-toggle button:hover {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
|
.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
|
||||||
.drop-down-mode .d-header-icons .active .icon > .d-icon,
|
.drop-down-mode .d-header-icons .active .icon > .d-icon,
|
||||||
.drop-down-mode
|
.drop-down-mode
|
||||||
|
|||||||
Reference in New Issue
Block a user