zotero/scss/abstracts/_variables.scss
2024-02-01 14:49:59 +08:00

114 lines
2.6 KiB
SCSS

//
// Variables
// --------------------------------------------------
// Dimensions
// --------------------------------------------------
$space-min: 4px;
$space-xs: 8px;
$space-sm: 12px;
$space-md: 16px;
$space-lg: 24px;
$space-xl: 32px;
$space-xxl: 48px;
$space-max: 64px;
$space-thumb: 42px;
// Typography
// --------------------------------------------------
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-base: $font-family-sans-serif;
$font-size-base: 13px;
$font-size-h1: 20px;
$font-size-h2: 16px;
$line-height-base: 1.539;
$line-height-computed: ceil($font-size-base * $line-height-base);
// todo: line-height-small
$line-height-large: 26px;
$line-height-large-touch: $space-thumb;
$link-hover-decoration: underline;
$headings-font-family: inherit;
$headings-font-weight: 400;
$headings-line-height: 1.2;
// Components
// --------------------------------------------------
$padding-base-vertical: 2px;
$padding-base-horizontal: $space-xs;
$padding-large-horizontal: $space-sm;
$border-radius-small: 3px;
$border-radius-base: 4px;
$border-radius-large: 6px;
$border-width: 1px;
$separator-width: 1px;
// Buttons
// --------------------------------------------------
$btn-disabled-opacity: 0.5;
// Z-index master list
// --------------------------------------------------
$z-index-mobile-nav: 0;
$z-index-navbar-bg: 10;
$z-index-main: 10;
$z-index-level: 10;
$z-index-level-active: 20;
$z-index-navbar: 20;
$z-index-menu: 30;
$z-index-modal: 40;
$z-index-drag-layer: 50;
$z-index-loading-cover: 60;
// Item pane
// --------------------------------------------------
$item-pane-sections: (
"info": var(--accent-blue),
"abstract": var(--accent-azure),
"attachments": var(--accent-green),
"notes": var(--accent-yellow),
"attachment-info": var(--accent-green),
"attachment-preview": #926d70,
"attachment-annotations": var(--tag-purple),
"libraries-collections": var(--accent-teal),
"tags": var(--accent-orange),
"related": var(--accent-wood),
);
$tagColorsLookup: (
'#ff6666': --tag-red,
'#ff8c19': --tag-orange,
'#999999': --tag-gray,
'#5fb236': --tag-green,
'#009980': --tag-teal,
'#2ea8e5': --tag-blue,
'#576dd9': --tag-indigo,
'#a28ae5': --tag-purple,
'#a6507b': --tag-plum,
);
// Layout constants
// --------------------------------------------------
$min-width-collections-pane: 200px;
$min-width-items-pane: 370px;
$min-width-item-pane: 300px;
$min-width-context-pane: 340px;
$width-sidenav: 37px;