2024-08-09 12:57:56 +00:00
|
|
|
richlistbox {
|
2024-04-08 05:38:38 +00:00
|
|
|
background: var(--material-background);
|
|
|
|
border: var(--material-panedivider);
|
2024-07-09 08:02:52 +00:00
|
|
|
// Prevent horizontal scrollbar on Windows
|
|
|
|
overflow-x: hidden;
|
2024-01-17 11:10:11 +00:00
|
|
|
|
2024-04-08 05:38:38 +00:00
|
|
|
richlistitem {
|
2024-08-09 12:57:56 +00:00
|
|
|
padding: 0.2em 0.4em;
|
|
|
|
align-items: center;
|
2024-04-08 05:38:38 +00:00
|
|
|
|
2024-08-09 12:57:56 +00:00
|
|
|
@include compact {
|
|
|
|
height: 22px;
|
|
|
|
}
|
2024-04-08 05:38:38 +00:00
|
|
|
|
2024-08-09 12:57:56 +00:00
|
|
|
@include comfortable {
|
|
|
|
height: 28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&,
|
|
|
|
& > *,
|
|
|
|
& label {
|
|
|
|
// Prevent word cut-off with double-byte characters
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2024-04-08 05:38:38 +00:00
|
|
|
|
2024-08-09 12:57:56 +00:00
|
|
|
// Selected but not focused
|
|
|
|
&[selected="true"] {
|
|
|
|
background-color: var(--color-quarternary-on-sidepane);
|
|
|
|
color: var(--color-accent-text);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
& > richlistitem {
|
|
|
|
// Selected and focused
|
|
|
|
&[selected="true"] {
|
|
|
|
background-color: var(--color-accent);
|
|
|
|
color: var(--color-accent-text);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Add focus ring to richlistbox if the richlistbox is multi-select
|
|
|
|
&[seltype="multiple"] > richlistitem {
|
|
|
|
&[selected="true"][current="true"] {
|
|
|
|
outline: var(--default-focusring);
|
|
|
|
outline-color: currentColor;
|
|
|
|
outline-offset: calc(-1 * var(--default-focusring-width));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-01-17 11:10:11 +00:00
|
|
|
}
|