7ad66b99e7
work in progress added input to select custom and default server when creating comment the problem of synchronizing the two commentServer of the application was solved btn moved to the correct component and syncs correctly Fixed why it didn't show comments Aligned input size and location of the refresh btn changed, and added maximum and minimum width for the comment server margin removed change using overflow refresh
120 lines
3.1 KiB
SCSS
120 lines
3.1 KiB
SCSS
@import 'breakpoints';
|
|
$spacing-vertical: 2rem;
|
|
$spacing-width: 36px;
|
|
:root {
|
|
--border-radius: 6px;
|
|
--border-radius-thumbnail: 6px;
|
|
--height-input: 2.5rem;
|
|
--height-input-slim: 1.8rem;
|
|
--height-button: 2.5rem;
|
|
--height-button-mobile: 2rem;
|
|
--height-checkbox: 24px;
|
|
--height-radio: 24px;
|
|
--height-badge: 24px;
|
|
|
|
// Spacing
|
|
--spacing-xxxs: calc(2rem / 6);
|
|
--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;
|
|
--spacing-xxl: 4rem;
|
|
--spacing-vertical: 2rem;
|
|
--spacing-width: 36px;
|
|
|
|
// 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-xxxsmall: 0.5rem;
|
|
--font-xxsmall: 0.65rem;
|
|
--font-xsmall: 0.7777rem;
|
|
--font-small: 0.8333rem;
|
|
--font-large: 1.3rem;
|
|
--font-title: 1.71rem;
|
|
--font-heading: 2.94rem;
|
|
|
|
// Width & spacing
|
|
--page-max-width: 1280px;
|
|
--page-max-width--filepage: 1700px;
|
|
--mac-titlebar-height: 24px;
|
|
--mobile: 600px;
|
|
--side-nav-width: 230px;
|
|
--side-nav-width--micro: 93px;
|
|
|
|
--spacing-main-padding: var(--spacing-xl);
|
|
--floating-viewer-width: 32rem;
|
|
--floating-viewer-height: 18rem; // 32 * 9/16
|
|
--floating-viewer-info-height: 4rem;
|
|
--floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
|
|
--option-select-width: 8rem;
|
|
|
|
--input-select-server-min-width: 100px;
|
|
--input-select-server-max-width: 250px;
|
|
|
|
// Text
|
|
--text-max-width: 660px;
|
|
--text-link-padding: 4px;
|
|
|
|
// Tabs
|
|
--tab-indicator-size: 0.5rem;
|
|
|
|
// Header
|
|
// This is tied to the floating player so it knows where to attach to
|
|
// ui/component/fileRenderFloating/view.jsx
|
|
--header-height: 60px;
|
|
--header-height-mobile: 56px;
|
|
|
|
// Inline Player
|
|
// --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
|
|
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 4);
|
|
--mobile-player-max-height: 50vh;
|
|
|
|
// Card
|
|
--card-radius: var(--border-radius);
|
|
--card-max-width: 1000px;
|
|
--card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
|
|
// Modal
|
|
--modal-width: 550px;
|
|
|
|
// Animation :)
|
|
--animation-duration: 0.2s;
|
|
--animation-style: ease-in-out;
|
|
|
|
// Image
|
|
--thumbnail-preview-height: 100px;
|
|
--thumbnail-preview-width: 177px;
|
|
--cover-photo-height: 210px;
|
|
--channel-thumbnail-width: 10rem;
|
|
--channel-thumbnail-width--small: 4rem;
|
|
--file-list-thumbnail-width: 12rem;
|
|
|
|
--tag-height: 1.5rem;
|
|
|
|
--livestream-comments-width: 30rem;
|
|
--live-timestamp-opacity: 0;
|
|
|
|
// Animations
|
|
--resizing-animation-function: ease-in;
|
|
--resizing-animation-timing: 180ms;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
:root {
|
|
--font-body: 0.8rem;
|
|
}
|
|
}
|