diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 92c36017e3c..0c9f74cb83e 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -3,16 +3,23 @@ .sidebar-more-section-links-details-summary { padding: 0.35em 0.5em; - color: var(--tertiary); + color: var(--primary-high); font-size: var(--font-down-1); transition: background-color 0.25s; + display: flex; + align-items: center; + list-style: none; + .d-icon { + margin-left: auto; + color: var(--primary-medium); + } + + &:focus, &:hover { background: var(--d-sidebar-highlight-color); } - list-style: none; - &::before { display: none; } diff --git a/app/assets/stylesheets/desktop/sidebar-section.scss b/app/assets/stylesheets/desktop/sidebar-section.scss index a0c4b231a2d..cdfe15ac6f5 100644 --- a/app/assets/stylesheets/desktop/sidebar-section.scss +++ b/app/assets/stylesheets/desktop/sidebar-section.scss @@ -3,17 +3,22 @@ .sidebar-section-header-button, .sidebar-section-header-caret, .sidebar-section-header-dropdown { - opacity: 0; - transition: opacity 0.25s; - transition-delay: 0.5s; + .discourse-no-touch & { + opacity: 0; + transition: opacity 0.25s; + transition-delay: 0.5s; + } } - &:hover { - .sidebar-section-header-button, - .sidebar-section-header-caret, - .sidebar-section-header-dropdown { - opacity: 1; - transition-delay: 0s; + .discourse-no-touch & { + &:focus-within, + &:hover { + .sidebar-section-header-button, + .sidebar-section-header-caret, + .sidebar-section-header-dropdown { + opacity: 1; + transition-delay: 0s; + } } } } diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss index fd3cffe0bab..2c83a26bbdc 100644 --- a/app/assets/stylesheets/mobile/sidebar.scss +++ b/app/assets/stylesheets/mobile/sidebar.scss @@ -16,3 +16,8 @@ margin-right: 0; padding-left: 0.25em; } + +.sidebar-more-section-links-details + .sidebar-more-section-links-details-summary { + font-size: var(--font-0); +}