diff --git a/src/materials.less b/src/materials.less index 770d6e5..17332be 100644 --- a/src/materials.less +++ b/src/materials.less @@ -1,5 +1,19 @@ // Mica-like material from Windows 11 +.mica-header(@name: "Discord") { + display: flex; + flex-direction: column; + &::before { + content: @name; + color: var(--header-primary); + padding: ((48px - 20px) / 2) 16px; // 20px is line-height + font-size: 15px; + line-height: 20px; + font-weight: 500; + font-family: var(--font-display); + } +} + [class^="sidebar-"] { &, & > nav { background-color: transparent; @@ -14,16 +28,14 @@ background-color: var(--background-secondary); } - nav[class^="private"] { - &::before { - content: "Discord"; - color: var(--header-primary); - margin: ((48px - 20px) / 2) 16px; // 20px is line-height - font-size: 15px; - line-height: 20px; - font-weight: 500; - font-family: var(--font-display); - } + nav[class^="private"] + { .mica-header(); } + + & > div[class*="scrollerBase-"] { + .mica-header("Discover"); + + & > h2[class^="discoverHeader-"] + { &:extend(.hide); } } section { // bottom panel diff --git a/src/style.less b/src/style.less index 12888ac..8041605 100644 --- a/src/style.less +++ b/src/style.less @@ -189,7 +189,9 @@ div[class*="stickyHeader-"], #status-picker-idle, #status-picker-dnd, #status-picker-invisible { - margin: 8px; + padding: 8px; + margin: 2px; + & > div { padding: 0;