github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 03:40:00 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: remove sidebar background color (#21775)

Browse Source
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 {
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 {

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

@ -8,8 +8,6 @@
display: flex;
align-items: stretch;
position: relative;
border-top: 1.5px solid var(--primary-low);
background: var(--primary-very-low);
padding: 0.5em 0.8em;
padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
&:before {
@ -18,15 +16,15 @@
content: "";
display: block;
height: 1.5em;
top: calc(-1.5em - 1px);
top: -1.5em;
left: -0.5em;
right: -0.5em;
width: calc(100% + 0.5em);
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(var(--primary-very-low-rgb), 0),
rgba(var(--primary-very-low-rgb), 1)
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
}
@ -36,18 +34,14 @@
align-items: center;
height: 100%;
font-size: var(--font-down-1);
color: var(--primary-high);
color: var(--d-sidebar-link-color);
padding: 0 0.5em;
&:hover,
&: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 {
margin-left: auto;
}
@ -59,11 +53,11 @@
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
color: var(--d-sidebar-link-icon-color);
}
&:focus,
&: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,
&:active,
&:hover {
background: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
svg.d-icon {
color: var(--primary-medium);
color: var(--d-sidebar-highlight-color);
}
}
height: var(--d-sidebar-row-height);
color: var(--primary-high);
color: var(--d-sidebar-link-color);
display: flex;
list-style: none;
box-sizing: border-box;
@ -16,15 +16,15 @@
padding: 0 var(--d-sidebar-row-horizontal-padding);
justify-content: left;
svg.d-icon {
.d-icon {
width: var(--d-sidebar-section-link-prefix-width);
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);
}
}
.sidebar-more-section-links-details-content {
background-color: var(--secondary);
background-color: var(--d-sidebar-background);
transition: background-color 0.25s;
box-shadow: shadow("dropdown");
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;
width: 100%;
align-items: center;
color: var(--primary-high);
color: var(--d-sidebar-link-color);
transition: background-color 0.25s;
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
outline: none;
.prefix-text {
background: var(--d-sidebar-highlight-prefix-background);
}
}
&.active {
color: var(--primary-800);
background: var(--d-sidebar-highlight-color);
color: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
.sidebar-section-link-prefix {
&.icon {
color: var(--primary-medium);
color: var(--d-sidebar-highlight-color);
}
}
}
@ -37,7 +40,7 @@
padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping
text-align: right;
color: var(--primary-700);
color: var(--d-sidebar-link-badge-color);
font-size: var(--font-down-2);
font-weight: normal;
margin-left: auto;
@ -46,7 +49,6 @@
.sidebar-section-link-suffix {
margin-left: 1em;
font-size: var(--font-down-4);
color: var(--tertiary-medium);
}
.sidebar-section-link-content-text {
@ -111,23 +113,12 @@
&.text {
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,
&.span {
position: relative;
color: var(--primary-500);
color: var(--d-sidebar-link-icon-color);
svg {
font-size: 0.8em;
@ -138,7 +129,7 @@
background-color: transparent;
border-radius: 50%;
padding: 2px 2px 3px;
color: var(--primary-high);
color: var(--d-sidebar-link-color);
height: 0.5rem;
width: 0.5rem;
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 {
margin-left: auto;
.sidebar-section-hover-button {
display: none;
color: var(--primary-medium);
color: var(--d-sidebar-link-icon-color);
border: none;
background: transparent;
padding: 0 0 0 0.5em;
@ -167,7 +169,7 @@
&:focus,
.discourse-no-touch & {
&:hover {
color: var(--primary);
color: var(--d-sidebar-highlight-color);
}
}
@ -178,7 +180,7 @@
&:hover {
.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 & {
&:hover {
background: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
.d-icon-globe {
color: var(--primary-medium);
color: var(--d-sidebar-highlight-color);
}
}
}
&:focus-within {
background: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
}
.sidebar-section-header-button {
@ -49,23 +49,23 @@
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
color: var(--d-sidebar-header-icon-color);
margin: 0;
}
&:focus {
outline: none;
background: var(--primary-medium);
background: var(--d-sidebar-highlight-hover-background);
.d-icon {
color: var(--primary-very-low);
color: var(--d-sidebar-highlight-hover-icon);
}
}
.discourse-no-touch & {
&:hover {
background: var(--primary-medium);
background: var(--d-sidebar-highlight-hover-background);
.d-icon {
color: var(--primary-very-low);
color: var(--d-sidebar-highlight-hover-icon);
}
}
}
@ -74,7 +74,7 @@
.sidebar-section-header {
flex: 1 1 auto;
color: var(--primary);
color: var(--d-sidebar-header-color);
align-items: center;
min-width: 0;
padding: 0;
@ -106,7 +106,7 @@
svg {
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;
// ems so height is variable along with font size
--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 {
@ -20,11 +42,10 @@
.sidebar-wrapper {
display: flex;
--d-sidebar-highlight-color: var(--primary-low);
background-color: var(--primary-very-low);
grid-area: sidebar;
position: sticky;
top: var(--header-offset);
background: var(--d-sidebar-background);
@include unselectable;
@ -48,6 +69,7 @@
height: 100%;
width: 100%;
padding: 0;
border-right: 1px solid var(--primary-low);
overflow-x: hidden;
// allows sidebar to scroll to the bottom when the composer is open
height: calc(100% - var(--composer-height, 0px));
@ -98,9 +120,9 @@
.btn-flat.add-section {
padding: 0.25em 0.4em;
&:hover {
background: var(--d-sidebar-highlight-color);
background: var(--d-sidebar-highlight-background);
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
.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-height: 30px;
// 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 {
--d-sidebar-row-horizontal-padding: 1rem;
--d-sidebar-highlight-color: var(--primary-low);
--d-sidebar-highlight-backgrond: var(--primary-low);
box-sizing: border-box;
padding: 0;