69b4789c17
Unify richlistitem styling rules - Fix richlistitem unwanted focus ring on Linux fix: #4510 - Simplify richlistbox styling rules and do not follow Mozilla code - Use --default-focusring-width for v-table
54 lines
1.1 KiB
SCSS
54 lines
1.1 KiB
SCSS
richlistbox {
|
|
background: var(--material-background);
|
|
border: var(--material-panedivider);
|
|
// Prevent horizontal scrollbar on Windows
|
|
overflow-x: hidden;
|
|
|
|
richlistitem {
|
|
padding: 0.2em 0.4em;
|
|
align-items: center;
|
|
|
|
@include compact {
|
|
height: 22px;
|
|
}
|
|
|
|
@include comfortable {
|
|
height: 28px;
|
|
}
|
|
|
|
&,
|
|
& > *,
|
|
& label {
|
|
// Prevent word cut-off with double-byte characters
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
// 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));
|
|
}
|
|
}
|
|
}
|
|
}
|