Florian Duros
1c8654e394
* feat(sc): add notification decoration to header * feat(vm): add notification decoration to vm * test(e2e): add test
109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
/*
|
|
* Copyright 2026 Element Creations Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.header {
|
|
/* Remove button default style */
|
|
background: unset;
|
|
border: none;
|
|
text-align: unset;
|
|
|
|
width: 100%;
|
|
cursor: pointer;
|
|
font: var(--cpd-font-body-sm-regular);
|
|
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
|
|
color: var(--cpd-color-text-secondary);
|
|
padding: var(--cpd-space-1x) 0;
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:has(button[data-state="open"]) {
|
|
color: var(--cpd-color-text-primary);
|
|
|
|
svg {
|
|
fill: var(--cpd-color-icon-primary);
|
|
}
|
|
|
|
.container {
|
|
background-color: var(--cpd-color-bg-action-tertiary-hovered);
|
|
}
|
|
|
|
.menu {
|
|
display: initial;
|
|
}
|
|
|
|
/* When a menu is present and revealed on hover, hide the decoration to avoid clutter.
|
|
Default sections have no menu, so their decoration stays visible on hover. */
|
|
.notificationDecoration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.chevron {
|
|
transition: transform 0.05s linear;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chevron {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
&[aria-expanded="true"] {
|
|
.chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&.unread {
|
|
font: var(--cpd-font-body-sm-semibold);
|
|
color: var(--cpd-color-text-primary);
|
|
}
|
|
}
|
|
|
|
.container {
|
|
margin: 0 var(--cpd-space-3x);
|
|
padding: var(--cpd-space-1-5x) var(--cpd-space-2x) var(--cpd-space-1-5x) var(--cpd-space-1x);
|
|
border-radius: 8px;
|
|
|
|
div {
|
|
min-width: 0;
|
|
}
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.firstHeader {
|
|
padding-top: 0;
|
|
|
|
/* The first item sits flush with the scroller's top edge, so the default outline
|
|
would be clipped by overflow:auto. Inset it so it stays inside the button. */
|
|
&:focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.lastHeader {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dropTarget {
|
|
box-shadow: inset 0 0 0 2px var(--cpd-color-border-accent-primary);
|
|
}
|
|
|
|
.menu {
|
|
display: none;
|
|
}
|