110 lines
1.9 KiB
SCSS
110 lines
1.9 KiB
SCSS
//
|
|
// Mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin compact {
|
|
$selector: &;
|
|
@at-root [zoteroUIDensity="compact"] {
|
|
@if $selector {
|
|
#{$selector} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin comfortable {
|
|
$selector: &;
|
|
@at-root [zoteroUIDensity="comfortable"] {
|
|
@if $selector {
|
|
#{$selector} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
// @NOTE: this mixin uses `state` mixin, therefore must be used in a selector nested
|
|
// underneath selectors listed in arguments, e.g., .virtualized-table .row
|
|
// by default. See `state` mixin for more details.
|
|
@mixin focus-states(
|
|
$selectedState: '.row.selected',
|
|
$focused: '.virtualized-table:focus-within'
|
|
) {
|
|
@media (prefers-color-scheme: light) {
|
|
@content("light");
|
|
|
|
@include state($selectedState) {
|
|
@include state($focused) {
|
|
@content("white");
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@content("dark");
|
|
|
|
@include state($selectedState) {
|
|
@include state($focused) {
|
|
@content("white");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// An implementation of Firefox light-dark() CSS mixin, which is not supported in 102
|
|
@mixin light-dark($prop, $light-color, $dark-color) {
|
|
@media (prefers-color-scheme: light) {
|
|
#{$prop}: $light-color;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#{$prop}: $dark-color;
|
|
}
|
|
}
|
|
|
|
@mixin color-scheme {
|
|
@media (prefers-color-scheme: light) {
|
|
@content("light");
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@content("dark");
|
|
}
|
|
}
|
|
|
|
@mixin clicky-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
padding-inline-start: 4px;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
border-radius: 5px;
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
|
|
.label {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 10;
|
|
width: 0; // Needed to allow the label to shrink for some reason
|
|
flex: 1;
|
|
overflow: hidden;
|
|
line-height: 16px;
|
|
}
|
|
|
|
@include comfortable {
|
|
.icon, .label {
|
|
padding-block: 2px;
|
|
}
|
|
}
|
|
}
|