lbry-desktop/ui/scss/init/_vars.scss

109 lines
2.7 KiB
SCSS
Raw Normal View History

2018-10-17 19:14:24 +02:00
// Both of these should probably die and become variables as well
$spacing-vertical: 2rem;
2018-03-26 23:32:43 +02:00
$spacing-width: 36px;
2021-05-27 02:25:09 +02:00
$breakpoint-xxsmall: 450px;
2019-12-18 06:27:08 +01:00
$breakpoint-xsmall: 600px;
$breakpoint-small: 900px;
$breakpoint-medium: 1150px;
2020-08-10 22:47:39 +02:00
$breakpoint-large: 1600px;
2017-08-13 07:37:33 +02:00
2017-08-18 07:37:35 +02:00
:root {
2020-07-24 19:17:43 +02:00
--border-radius: 5px;
--height-input: 2.5rem;
--height-button: 2.5rem;
--height-checkbox: 24px;
--height-radio: 24px;
--height-badge: 24px;
// Spacing
--spacing-xxs: calc(2rem / 5);
--spacing-xs: calc(2rem / 4);
--spacing-s: calc(2rem / 3);
--spacing-m: calc(2rem / 2);
--spacing-l: 2rem;
--spacing-xl: 3rem;
// Aspect ratio
--aspect-ratio-bluray: 41.6666666667%; // 12:5
--aspect-ratio-panavision: 36.3636363636%; // 11:4
--aspect-ratio-sd: 75%; // 4:3
--aspect-ratio-standard: 56.25%; // 16:9
// Type
--font-mono: 'Fira Code';
--font-sans: Inter;
--font-serif: Georgia;
--font-weight-base: 400;
--font-weight-light: 300;
--font-weight-bold: 700;
--font-base: 14px;
--font-body: 1rem;
--font-xxsmall: 0.65rem;
2020-07-24 19:17:43 +02:00
--font-xsmall: 0.7344rem;
--font-small: 0.8571rem;
--font-large: 1.3rem;
--font-title: 1.71rem;
--font-heading: 2.94rem;
2018-10-17 19:14:24 +02:00
// Width & spacing
2020-08-10 22:47:39 +02:00
--page-max-width: 1280px;
--page-max-width--filepage: 1700px;
--mac-titlebar-height: 24px;
2019-06-11 20:10:58 +02:00
--mobile: 600px;
--side-nav-width: 230px;
2020-10-01 22:59:11 +02:00
--side-nav-width--micro: 125px;
2020-06-01 19:03:19 +02:00
--spacing-main-padding: var(--spacing-xl);
2019-08-13 07:35:13 +02:00
--floating-viewer-width: 32rem;
--floating-viewer-height: 18rem; // 32 * 9/16
--floating-viewer-info-height: 5rem;
--floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
--option-select-width: 8rem;
2019-05-07 04:35:04 +02:00
2018-10-17 19:14:24 +02:00
// Text
2017-08-18 07:37:35 +02:00
--text-max-width: 660px;
--text-link-padding: 4px;
2019-05-07 04:35:04 +02:00
// Tabs
--tab-indicator-size: 0.5rem;
2018-10-17 19:14:24 +02:00
// Header
// This is tied to the floating player so it knows where to attach to
// ui/component/fileRenderFloating/view.jsx
--header-height: 80px;
2018-04-17 04:21:19 +02:00
2019-11-14 18:23:42 +01:00
// Inline Player
2020-06-01 19:03:19 +02:00
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
2019-11-14 18:23:42 +01:00
2018-10-17 19:14:24 +02:00
// Card
2019-11-22 22:13:00 +01:00
--card-radius: var(--border-radius);
2018-06-18 18:30:24 +02:00
--card-max-width: 1000px;
2020-03-18 18:33:17 +01:00
--card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2018-03-26 23:32:43 +02:00
2018-10-17 19:14:24 +02:00
// Modal
2020-02-06 19:49:05 +01:00
--modal-width: 550px;
2018-10-17 19:14:24 +02:00
// Animation :)
2019-05-07 04:35:04 +02:00
--animation-duration: 0.2s;
--animation-style: ease-in-out;
2018-07-18 17:55:17 +02:00
2018-10-17 19:14:24 +02:00
// Image
2018-07-18 17:55:17 +02:00
--thumbnail-preview-height: 100px;
--thumbnail-preview-width: 177px;
--cover-photo-height: 210px;
2019-06-11 20:10:58 +02:00
--channel-thumbnail-width: 10rem;
2019-07-21 23:31:22 +02:00
--channel-thumbnail-width--small: 4rem;
2019-06-11 20:10:58 +02:00
--file-list-thumbnail-width: 10rem;
2019-11-22 22:13:00 +01:00
--tag-height: 1.5rem;
2021-04-23 21:59:48 +02:00
--livestream-comments-width: 30rem;
2017-08-13 07:37:33 +02:00
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
:root {
2020-08-21 21:44:54 +02:00
--font-body: 0.8rem;
2019-12-18 06:27:08 +01:00
}
}