308 lines
No EOL
7.5 KiB
SCSS
308 lines
No EOL
7.5 KiB
SCSS
@use 'sass:color';
|
|
@use "sass:map";
|
|
//
|
|
// 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);
|
|
}
|
|
|
|
.icon {
|
|
height: calc(1.3333333333 * var(--zotero-font-size));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.icon, .label {
|
|
padding-block: 2px;
|
|
}
|
|
}
|
|
|
|
@mixin meta-table {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
column-gap: 8px;
|
|
row-gap: 2px;
|
|
width: inherit;
|
|
|
|
.show-on-hover {
|
|
visibility: hidden;
|
|
&.no-display {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.meta-row {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: span 2;
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
// On hover of the meta-row, reveal all hidden icons
|
|
// unless there's .noHover class which keeps everything hidden
|
|
&:not(.noHover):hover .show-on-hover,
|
|
&:focus-within .show-on-hover {
|
|
visibility: visible;
|
|
display: revert;
|
|
}
|
|
|
|
.meta-data {
|
|
width: 0;
|
|
min-width: 100%;
|
|
display: flex;
|
|
toolbarbutton {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
}
|
|
editable-text {
|
|
flex: 1; // stretch value field as much as possible
|
|
max-width: 100%; // stay within .meta-data when the itemBox is narrow
|
|
.input {
|
|
// allow input to be shrunk by other elements when the itemBox is narrow
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.meta-label {
|
|
display: flex;
|
|
font-weight: normal;
|
|
text-align: end;
|
|
color: var(--fill-secondary);
|
|
|
|
&[fieldname^="creator"] {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
> label {
|
|
margin-top: 2px;
|
|
@include comfortable {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.key {
|
|
width: 100%;
|
|
}
|
|
|
|
toolbarbutton {
|
|
@include focus-ring;
|
|
|
|
// needed to have the outline appear on all platforms
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
align-self: center;
|
|
// Make all buttons tigher to not stretch the rows
|
|
height: auto;
|
|
width: auto;
|
|
padding: 1px;
|
|
border-radius: 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($thin: false, $selector: focus-visible) {
|
|
&:#{$selector} {
|
|
@media (-moz-platform: windows) {
|
|
outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border);
|
|
outline-offset: var(--width-focus-border);
|
|
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
|
|
}
|
|
|
|
@media not (-moz-platform: windows) {
|
|
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
|
|
|
|
@if $thin {
|
|
--width-focus-border: 1px;
|
|
--color-focus-border: var(--color-accent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin derive-colors($colors) {
|
|
@each $name, $color in $colors {
|
|
--#{$name}: #{$color};
|
|
}
|
|
|
|
// composite (opaque) colors
|
|
--color-quinary-on-background: #{color.mix(
|
|
map.get($colors, "color-background"), color.change(map.get($colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($colors, "fill-quinary")))
|
|
)};
|
|
--color-quarternary-on-background: #{color.mix(
|
|
map.get($colors, "color-background"), color.change(map.get($colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($colors, "fill-quarternary")))
|
|
)};
|
|
--color-quinary-on-sidepane: #{color.mix(
|
|
map.get($colors, "color-sidepane"), color.change(map.get($colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($colors, "fill-quinary")))
|
|
)};
|
|
--color-quarternary-on-sidepane: #{color.mix(
|
|
map.get($colors, "color-sidepane"), color.change(map.get($colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($colors, "fill-quarternary")))
|
|
)};
|
|
--color-stripe-on-background: #{color.mix(
|
|
map.get($colors, "color-background"), color.change(map.get($colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($colors, "color-stripe")))
|
|
)};
|
|
--color-menu-opaque: rgb(
|
|
#{color.alpha(map.get($colors, "color-menu")) * color.red(map.get($colors, "color-menu"))},
|
|
#{color.alpha(map.get($colors, "color-menu")) * color.green(map.get($colors, "color-menu"))},
|
|
#{color.alpha(map.get($colors, "color-menu")) * color.blue(map.get($colors, "color-menu"))}
|
|
);
|
|
|
|
// background materials
|
|
--material-background: var(--color-background);
|
|
--material-background50: var(--color-background50);
|
|
--material-background70: var(--color-background70);
|
|
--material-button: var(--color-button);
|
|
--material-control: var(--color-control);
|
|
--material-menu: var(--color-menu);
|
|
--material-sidepane: var(--color-sidepane);
|
|
--material-tabbar: var(--color-tabbar);
|
|
--material-toolbar: var(--color-toolbar);
|
|
--material-mix-quinary: var(--color-quinary-on-background);
|
|
--material-mix-quarternary: var(--color-quarternary-on-background);
|
|
--material-stripe: var(--color-stripe-on-background);
|
|
|
|
// border materials
|
|
--material-border-transparent: 1px solid transparent;
|
|
--material-border: 1px solid var(--color-border);
|
|
--material-border50: 1px solid var(--color-border50);
|
|
--material-panedivider: 1px solid var(--color-panedivider);
|
|
--material-border-quinary: 1px solid var(--fill-quinary);
|
|
--material-border-quarternary: 1px solid var(--fill-quarternary);
|
|
} |