:root { --d-sidebar-section-link-prefix-margin-right: 0.4rem; --d-sidebar-section-link-prefix-width: 20px; } .sidebar-section-link-wrapper { display: flex; align-items: center; position: relative; .sidebar-section-link { display: inline-flex; width: 100%; align-items: center; color: var(--primary-high); transition: background-color 0.25s; &:focus, &:hover { background: var(--d-sidebar-highlight-color); outline: none; } &.active { color: var(--primary); background: var(--d-sidebar-highlight-color); .sidebar-section-link-prefix { &.icon { color: var(--primary-high); } } } .sidebar-section-link-content-badge { @include ellipsis; padding-left: 0.5em; text-align: right; color: var(--tertiary); font-size: var(--font-down-1); font-weight: normal; margin-left: auto; } .sidebar-section-link-suffix { margin-left: 0.25rem; font-size: var(--font-down-4); color: var(--tertiary-medium); } .sidebar-section-link-content-text { @include ellipsis; .emoji { width: 15px; height: 15px; } .badge-wrapper { font-size: 100%; width: 100%; .category-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .sidebar-section-link-personal-messages-sent, .sidebar-section-link-personal-messages-new, .sidebar-section-link-personal-messages-archive, .sidebar-section-link-personal-messages-unread, .sidebar-section-link-group-messages-new, .sidebar-section-link-group-messages-unread, .sidebar-section-link-group-messages-archive { .sidebar-section-link-content-text { margin-left: calc( var(--d-sidebar-section-link-prefix-margin-right) + var(--d-sidebar-section-link-prefix-width) ); } } .sidebar-section-link-review { .sidebar-section-link-content-badge { color: var(--danger); } } .sidebar-section-link-prefix { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--d-sidebar-section-link-prefix-width); height: var(--d-sidebar-section-link-prefix-width); margin-right: var(--d-sidebar-section-link-prefix-margin-right); &.image { img { border-radius: 100%; aspect-ratio: auto 20 / 20; width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); } } &.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); } } &.icon, &.span { position: relative; color: var(--primary-medium); svg { font-size: var(--font-down-1); } .prefix-badge { position: absolute; background-color: transparent; border-radius: 50%; padding: 2px 2px 3px; color: var(--primary-high); height: 0.5rem; width: 0.5rem; top: -0.2em; right: 0; margin-right: -0.2em; } } .prefix-span { width: 0.9em; height: 0.9em; } } .sidebar-section-link-hover { margin-left: auto; .sidebar-section-hover-button { display: none; color: var(--primary-medium); border: none; background: transparent; padding: 0 0 0 0.5em; height: 100%; transition: background-color 0.25s; &:focus, .discourse-no-touch & { &:hover { color: var(--primary); } } svg { font-size: var(--font-down-1); } } &:hover { .sidebar-section-hover-button { background: var(--primary-low); } } } &:hover { .sidebar-section-hover-button { display: block; } } }