Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: remove sidebar background color (#21775)

This commit is contained in:
Kris 2023-06-06 09:24:56 -04:00 committed by GitHub
parent b7a66bd6ad
commit 10dce46886
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 76 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/stylesheets/common/base/sidebar-custom-section.scss
View File

@ -31,20 +31,6 @@
a { a {
pointer-events: none; pointer-events: none;
} }
.sidebar-section-link-wrapper {
.sidebar-section-link-prefix.icon,
.sidebar-section-link {
background: none;
color: var(--primary-low-mid);
}
.sidebar-section-link.drag {
font-weight: bold;
color: var(--primary-high);
.sidebar-section-link-prefix.icon {
color: var(--primary-high);
}
}
}
} }
} }
.discourse-touch { .discourse-touch {

20
app/assets/stylesheets/common/base/sidebar-footer.scss
View File

@ -8,8 +8,6 @@
display: flex; display: flex;
align-items: stretch; align-items: stretch;
position: relative; position: relative;
border-top: 1.5px solid var(--primary-low);
background: var(--primary-very-low);
padding: 0.5em 0.8em; padding: 0.5em 0.8em;
padding-bottom: max(env(safe-area-inset-bottom), 0.5em); padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
&:before { &:before {
@ -18,15 +16,15 @@
content: ""; content: "";
display: block; display: block;
height: 1.5em; height: 1.5em;
top: calc(-1.5em - 1px); top: -1.5em;
left: -0.5em; left: -0.5em;
right: -0.5em; right: -0.5em;
width: calc(100% + 0.5em); width: calc(100% + 0.5em);
pointer-events: none; pointer-events: none;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba(var(--primary-very-low-rgb), 0), rgba(var(--secondary-rgb), 0),
rgba(var(--primary-very-low-rgb), 1) rgba(var(--secondary-rgb), 1)
); );
} }
} }
@ -36,18 +34,14 @@
align-items: center; align-items: center;
height: 100%; height: 100%;
font-size: var(--font-down-1); font-size: var(--font-down-1);
color: var(--primary-high); color: var(--d-sidebar-link-color);
padding: 0 0.5em; padding: 0 0.5em;
&:hover, &:hover,
&:focus { &:focus {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
} }
} }
.sidebar-footer-links-separator {
color: var(--primary-low-mid);
}
.sidebar-footer-actions { .sidebar-footer-actions {
margin-left: auto; margin-left: auto;
} }
@ -59,11 +53,11 @@
.d-icon { .d-icon {
font-size: var(--font-down-1); font-size: var(--font-down-1);
color: var(--primary-medium); color: var(--d-sidebar-link-icon-color);
} }
&:focus, &:focus,
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
} }
} }
} }

12
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -2,13 +2,13 @@
&:focus-within, &:focus-within,
&:active, &:active,
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
svg.d-icon { svg.d-icon {
color: var(--primary-medium); color: var(--d-sidebar-highlight-color);
} }
} }
height: var(--d-sidebar-row-height); height: var(--d-sidebar-row-height);
color: var(--primary-high); color: var(--d-sidebar-link-color);
display: flex; display: flex;
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
@ -16,15 +16,15 @@
padding: 0 var(--d-sidebar-row-horizontal-padding); padding: 0 var(--d-sidebar-row-horizontal-padding);
justify-content: left; justify-content: left;
svg.d-icon { .d-icon {
width: var(--d-sidebar-section-link-prefix-width); width: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right); margin-right: var(--d-sidebar-section-link-prefix-margin-right);
color: var(--primary-medium); color: var(--d-sidebar-link-icon-color);
font-size: var(--font-down-1); font-size: var(--font-down-1);
} }
} }
.sidebar-more-section-links-details-content { .sidebar-more-section-links-details-content {
background-color: var(--secondary); background-color: var(--d-sidebar-background);
transition: background-color 0.25s; transition: background-color 0.25s;
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);

48
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -12,22 +12,25 @@
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
color: var(--primary-high); color: var(--d-sidebar-link-color);
transition: background-color 0.25s; transition: background-color 0.25s;
&:focus, &:focus,
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
outline: none; outline: none;
.prefix-text {
background: var(--d-sidebar-highlight-prefix-background);
}
} }
&.active { &.active {
color: var(--primary-800); color: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
.sidebar-section-link-prefix { .sidebar-section-link-prefix {
&.icon { &.icon {
color: var(--primary-medium); color: var(--d-sidebar-highlight-color);
} }
} }
} }
@ -37,7 +40,7 @@
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping padding-right: 0.1em; // avoids some overflow cropping
text-align: right; text-align: right;
color: var(--primary-700); color: var(--d-sidebar-link-badge-color);
font-size: var(--font-down-2); font-size: var(--font-down-2);
font-weight: normal; font-weight: normal;
margin-left: auto; margin-left: auto;
@ -46,7 +49,6 @@
.sidebar-section-link-suffix { .sidebar-section-link-suffix {
margin-left: 1em; margin-left: 1em;
font-size: var(--font-down-4); font-size: var(--font-down-4);
color: var(--tertiary-medium);
} }
.sidebar-section-link-content-text { .sidebar-section-link-content-text {
@ -111,23 +113,12 @@
&.text { &.text {
text-align: center; text-align: center;
.prefix-text {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(var(--primary-rgb), 0.1);
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
font-size: var(--font-down-2);
}
} }
&.icon, &.icon,
&.span { &.span {
position: relative; position: relative;
color: var(--primary-500); color: var(--d-sidebar-link-icon-color);
svg { svg {
font-size: 0.8em; font-size: 0.8em;
@ -138,7 +129,7 @@
background-color: transparent; background-color: transparent;
border-radius: 50%; border-radius: 50%;
padding: 2px 2px 3px; padding: 2px 2px 3px;
color: var(--primary-high); color: var(--d-sidebar-link-color);
height: 0.5rem; height: 0.5rem;
width: 0.5rem; width: 0.5rem;
top: -0.2em; top: -0.2em;
@ -152,12 +143,23 @@
} }
} }
.prefix-text {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: var(--d-sidebar-prefix-background);
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
font-size: var(--font-down-2);
}
.sidebar-section-link-hover { .sidebar-section-link-hover {
margin-left: auto; margin-left: auto;
.sidebar-section-hover-button { .sidebar-section-hover-button {
display: none; display: none;
color: var(--primary-medium); color: var(--d-sidebar-link-icon-color);
border: none; border: none;
background: transparent; background: transparent;
padding: 0 0 0 0.5em; padding: 0 0 0 0.5em;
@ -167,7 +169,7 @@
&:focus, &:focus,
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
color: var(--primary); color: var(--d-sidebar-highlight-color);
} }
} }
@ -178,7 +180,7 @@
&:hover { &:hover {
.sidebar-section-hover-button { .sidebar-section-hover-button {
background: var(--primary-low); background: var(--d-sidebar-highlight-background);
} }
} }
} }

20
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -15,15 +15,15 @@
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
.d-icon-globe { .d-icon-globe {
color: var(--primary-medium); color: var(--d-sidebar-highlight-color);
} }
} }
} }
&:focus-within { &:focus-within {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
} }
.sidebar-section-header-button { .sidebar-section-header-button {
@ -49,23 +49,23 @@
.d-icon { .d-icon {
font-size: var(--font-down-1); font-size: var(--font-down-1);
color: var(--primary-medium); color: var(--d-sidebar-header-icon-color);
margin: 0; margin: 0;
} }
&:focus { &:focus {
outline: none; outline: none;
background: var(--primary-medium); background: var(--d-sidebar-highlight-hover-background);
.d-icon { .d-icon {
color: var(--primary-very-low); color: var(--d-sidebar-highlight-hover-icon);
} }
} }
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
background: var(--primary-medium); background: var(--d-sidebar-highlight-hover-background);
.d-icon { .d-icon {
color: var(--primary-very-low); color: var(--d-sidebar-highlight-hover-icon);
} }
} }
} }
@ -74,7 +74,7 @@
.sidebar-section-header { .sidebar-section-header {
flex: 1 1 auto; flex: 1 1 auto;
color: var(--primary); color: var(--d-sidebar-header-color);
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding: 0; padding: 0;
@ -106,7 +106,7 @@
svg { svg {
font-size: var(--font-down-1); font-size: var(--font-down-1);
color: var(--primary-medium); color: var(--d-sidebar-header-icon-color);
} }
} }

30
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -9,6 +9,28 @@
--d-sidebar-row-horizontal-padding: 1.25rem; --d-sidebar-row-horizontal-padding: 1.25rem;
// ems so height is variable along with font size // ems so height is variable along with font size
--d-sidebar-row-height: 2.1em; --d-sidebar-row-height: 2.1em;
--d-sidebar-background: var(--secondary);
--d-sidebar-prefix-background: var(
--primary-low
); // example: chat participant count
--d-sidebar-header-color: var(--primary);
--d-sidebar-header-icon-color: var(--primary-medium);
--d-sidebar-link-color: var(--primary-high);
--d-sidebar-link-icon-color: var(--primary-500);
--d-sidebar-link-badge-color: var(--primary-700); // example: new count
--d-sidebar-highlight-background: var(--primary-low);
--d-sidebar-highlight-color: var(--primary-high);
--d-sidebar-highlight-prefix-background: var(--primary-300);
--d-sidebar-highlight-hover-background: var(
--primary-medium
); // example: hovering a button within a highlighted section
--d-sidebar-highlight-hover-icon: var(
--primary-very-low
); // example: hovering a button within a highlighted section
} }
.sidebar-row { .sidebar-row {
@ -20,11 +42,10 @@
.sidebar-wrapper { .sidebar-wrapper {
display: flex; display: flex;
--d-sidebar-highlight-color: var(--primary-low);
background-color: var(--primary-very-low);
grid-area: sidebar; grid-area: sidebar;
position: sticky; position: sticky;
top: var(--header-offset); top: var(--header-offset);
background: var(--d-sidebar-background);
@include unselectable; @include unselectable;
@ -48,6 +69,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0; padding: 0;
border-right: 1px solid var(--primary-low);
overflow-x: hidden; overflow-x: hidden;
// allows sidebar to scroll to the bottom when the composer is open // allows sidebar to scroll to the bottom when the composer is open
height: calc(100% - var(--composer-height, 0px)); height: calc(100% - var(--composer-height, 0px));
@ -98,9 +120,9 @@
.btn-flat.add-section { .btn-flat.add-section {
padding: 0.25em 0.4em; padding: 0.25em 0.4em;
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-background);
svg { svg {
color: var(--primary-medium); color: var(--d-sidebar-link-icon-color);
} }
} }
} }

2
app/assets/stylesheets/desktop/menu-panel.scss
View File

@ -11,7 +11,7 @@
// Sidebar-hamburger hybrid // Sidebar-hamburger hybrid
.hamburger-panel .revamped { .hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--d-hover); --d-sidebar-highlight-background: var(--d-hover);
--d-sidebar-row-horizontal-padding: 0.5rem; --d-sidebar-row-horizontal-padding: 0.5rem;
--d-sidebar-row-height: 30px; --d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon // 1.25rem gets text left-aligned with the hamburger icon

2
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -15,7 +15,7 @@
.hamburger-panel .revamped { .hamburger-panel .revamped {
--d-sidebar-row-horizontal-padding: 1rem; --d-sidebar-row-horizontal-padding: 1rem;
--d-sidebar-highlight-color: var(--primary-low); --d-sidebar-highlight-backgrond: var(--primary-low);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;