156 lines
3.1 KiB
SCSS
156 lines
3.1 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;
|
|
border-radius: 5px;
|
|
|
|
&:not([disabled]):hover {
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
|
|
&:not([disabled]):active {
|
|
background-color: var(--fill-quarternary);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.icon, .label {
|
|
padding-block: 2px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Hide icons on macOS. We use :is() to work around weird behavior in Fx101 where a regular child
|
|
selector doesn't match the first time the menu is opened. */
|
|
@mixin macOS-hide-menu-icons {
|
|
$selector: &;
|
|
@at-root {
|
|
@media (-moz-platform: macos) {
|
|
// Yes, every single one of these :is-es is necessary!
|
|
:is(:is(#{$selector}) .menuitem-iconic, :is(#{$selector}) .menu-iconic) {
|
|
list-style-image: none !important;
|
|
|
|
.menu-iconic-left {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin macOS-inactive-opacity {
|
|
$selector: &;
|
|
@at-root {
|
|
@media (-moz-platform: macos) {
|
|
#{$selector} {
|
|
&:-moz-window-inactive {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
This mixin replaces the default focus-rings - those are platform-specific, do not show up on some
|
|
components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
|
|
Box-shadow is used to be able to set the radius.
|
|
*/
|
|
@mixin focus-ring($width: 1px, $radius: 5px) {
|
|
&:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 $width -moz-accent-color;
|
|
border-radius: $radius;
|
|
}
|
|
}
|