html {
/* Main colors */
--primary: #defba1;
--secondary: #cdc9ff;
--light: #f0effc;
--lightest: #fff;
--dark: #181818;
--lila: #d795f1;
--white: #fff;
--black: #000;
--danger: #ff4d4d;
--warning: #ffad33;
--success: #279c27;
--info: var(--secondary);
--telegram: #229ed9;
--form-background: #fff;
--form-text-color: var(--dark);
/* Background */
--light-background-color: var(--light);
/* Text */
--dark-text-color: var(--dark);
--text-light: #939393;
/* Charts */
--grid-color: #e0e0e0;
/* other */
--border-radius: 8px;
--border-radius-button: 18px;
--border-color: #cdcdcd;
--font-family: 'Montserrat', sans-serif;
--block-shadow: 0 0 10px rgba(0, 0, 0, 0.09);
--skeleton-bg: linear-gradient(90deg, #fff 0px, #eee 50px, #fff 100px);
--skeleton-animation: skeleton-loading 8.5s infinite forwards linear;
}
html.dark {
--primary: #defba1;
--secondary: #9d96ff;
--light: #444;
--lightest: #222;
--dark: #000;
--lila: #d795f1;
--danger: #ff4d4d;
--warning: #ffad33;
--success: #279c27;
--info: var(--secondary);
--telegram: #229ed9;
--light-background-color: #111;
--form-background: #1e1e1e;
--form-text-color: #fff;
--dark-text-color: #fff;
--text-light: #939393;
--grid-color: #555;
--border-color: #616161;
--skeleton-bg: linear-gradient(90deg, #222 0px, #333 50px, #222 100px);
}
/*
Global theming for @vuepic/vue-datepicker. Defined here (rather than scoped to
a single component) so every picker — the date inputs and the calendar view —
is themed even when the date input is not mounted. The menu is teleported to
, so these must be global anyway.
The picker always renders the `.dp--theme-light` wrapper unless its `dark` prop
is set, and it ships its own `.dp--theme-light` defaults in a stylesheet that
Vite injects after this static file. We therefore prefix the selector with
`html` to outrank those single-class defaults regardless of load order. The
variables reference the app design tokens above, so the picker follows the
light/dark `html.dark` toggle automatically.
*/
html .dp--theme-light,
html .dp--theme-dark {
--dp-font-family: var(--font-family);
--dp-font-size: 0.9rem;
--dp-input-padding: 0.55em 0.8em;
--dp-border-radius: var(--border-radius);
--dp-cell-border-radius: var(--border-radius);
--dp-background-color: var(--form-background);
--dp-text-color: var(--form-text-color);
--dp-hover-color: var(--light);
--dp-hover-text-color: var(--form-text-color);
--dp-hover-icon-color: var(--form-text-color);
--dp-primary-color: var(--primary);
--dp-primary-text-color: var(--dark);
--dp-primary-disabled-color: var(--border-color);
--dp-secondary-color: var(--text-light);
--dp-border-color: var(--border-color);
--dp-menu-border-color: var(--border-color);
--dp-border-color-hover: var(--text-light);
--dp-border-color-focus: var(--primary);
--dp-disabled-color: var(--light);
--dp-disabled-color-text: var(--text-light);
--dp-icon-color: var(--text-light);
--dp-danger-color: var(--danger);
--dp-success-color: var(--success);
--dp-marker-color: var(--danger);
--dp-tooltip-color: var(--form-background);
--dp-range-between-dates-background-color: var(--light);
--dp-range-between-dates-text-color: var(--form-text-color);
}
#root,
#root > .app {
min-height: 100vh;
}
/* skeleton animation */
@keyframes skeleton-loading {
0% {
background-position: -500px 0;
}
100% {
background-position: 500px 0;
}
}