159 lines
5.1 KiB
SCSS
159 lines
5.1 KiB
SCSS
/* You can add global styles to this file, and also import other style files */
|
|
@use 'variables' as vars;
|
|
@use 'common-functions';
|
|
@use 'common-variables';
|
|
@use 'assets/styles/red-theme';
|
|
|
|
@font-face {
|
|
font-family: 'OpenSans Extrabold';
|
|
src: url('./assets/styles/fonts/OpenSans-ExtraBold.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 300;
|
|
src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 400;
|
|
src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 500;
|
|
src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 600;
|
|
src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-weight: 700;
|
|
src: url('./assets/styles/fonts/Inter-VariableFont.ttf') format('truetype');
|
|
}
|
|
|
|
.error-glyph-margin {
|
|
background: url('./assets/icons/general/alert-circle.svg') no-repeat center;
|
|
background-size: 80%;
|
|
}
|
|
|
|
@include common-variables.configureLight(
|
|
$iqser-primary: vars.$primary,
|
|
$iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
|
|
$iqser-primary-2: vars.$primary-2,
|
|
$iqser-accent: vars.$accent,
|
|
$iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
|
|
$iqser-background: vars.$white,
|
|
$iqser-alt-background: vars.$grey-2,
|
|
$iqser-text: vars.$accent,
|
|
$iqser-text-rgb: common-functions.hexToRgb(vars.$accent),
|
|
$iqser-disabled: vars.$grey-7,
|
|
$iqser-not-disabled-table-item: vars.$grey-8,
|
|
$iqser-btn-bg-hover: vars.$grey-4,
|
|
$iqser-btn-bg: vars.$grey-6,
|
|
$iqser-side-nav: vars.$grey-2,
|
|
$iqser-warn: vars.$warn,
|
|
$iqser-separator: rgba(vars.$grey-4, 0.9),
|
|
$iqser-grey-2: vars.$grey-2,
|
|
$iqser-grey-3: vars.$grey-3,
|
|
$iqser-grey-4: vars.$grey-4,
|
|
$iqser-grey-5: vars.$grey-5,
|
|
$iqser-grey-6: vars.$grey-6,
|
|
$iqser-grey-7: vars.$grey-7,
|
|
$iqser-green-1: vars.$green-1,
|
|
$iqser-green-2: vars.$green-2,
|
|
$iqser-yellow-1: vars.$yellow-1,
|
|
$iqser-yellow-2: vars.$yellow-2,
|
|
$iqser-helpmode-primary: vars.$green-2,
|
|
$iqser-inputs-outline: vars.$grey-5,
|
|
$iqser-popup-background: vars.$white,
|
|
$iqser-shadow: vars.$grey-4,
|
|
$iqser-toggle-bg: vars.$grey-4,
|
|
$iqser-file-drop-drag-over: #e2eefd,
|
|
$iqser-user-avatar-1: vars.$grey-6,
|
|
$iqser-user-avatar-2: vars.$grey-4,
|
|
$iqser-annotation-hover: vars.$grey-8,
|
|
$iqser-annotation-comments-hover: vars.$grey-4,
|
|
$iqser-workload-pages-bg: vars.$grey-8,
|
|
$iqser-tab-hover: vars.$grey-6,
|
|
$iqser-loading-progress: vars.$grey-7,
|
|
$iqser-highlight-color: #fffcc4,
|
|
$iqser-skeleton-color: vars.$grey-4,
|
|
$iqser-app-name-color: vars.$accent
|
|
);
|
|
|
|
$light-accent-5: lighten(vars.$accent, 5%);
|
|
$light-accent-10: lighten(vars.$accent, 10%);
|
|
|
|
$dark-accent-5: darken(vars.$accent, 5%);
|
|
$dark-accent-8: darken(vars.$accent, 8%);
|
|
$dark-accent-10: darken(vars.$accent, 10%);
|
|
|
|
@include common-variables.configureDark(
|
|
$iqser-primary: vars.$primary,
|
|
$iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
|
|
$iqser-primary-2: vars.$primary-2,
|
|
$iqser-accent: vars.$accent,
|
|
$iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
|
|
$iqser-background: $dark-accent-10,
|
|
$iqser-alt-background: $dark-accent-5,
|
|
$iqser-text: vars.$white,
|
|
$iqser-text-rgb: common-functions.hexToRgb(vars.$white),
|
|
$iqser-disabled: vars.$grey-7,
|
|
$iqser-not-disabled-table-item: $dark-accent-5,
|
|
$iqser-btn-bg-hover: vars.$accent,
|
|
$iqser-btn-bg: $dark-accent-5,
|
|
$iqser-side-nav: $dark-accent-8,
|
|
$iqser-warn: vars.$warn,
|
|
$iqser-separator: vars.$accent,
|
|
$iqser-grey-2: vars.$grey-2,
|
|
$iqser-grey-3: vars.$grey-3,
|
|
$iqser-grey-4: vars.$grey-4,
|
|
$iqser-grey-5: vars.$grey-5,
|
|
$iqser-grey-6: vars.$grey-6,
|
|
$iqser-grey-7: vars.$grey-7,
|
|
$iqser-green-1: vars.$green-1,
|
|
$iqser-green-2: vars.$green-2,
|
|
$iqser-yellow-1: vars.$yellow-1,
|
|
$iqser-yellow-2: vars.$yellow-2,
|
|
$iqser-helpmode-primary: vars.$green-2,
|
|
$iqser-inputs-outline: $light-accent-10,
|
|
$iqser-popup-background: $dark-accent-5,
|
|
$iqser-shadow: rgba(0, 0, 0, 0.4),
|
|
$iqser-toggle-bg: $light-accent-5,
|
|
$iqser-file-drop-drag-over: $light-accent-10,
|
|
$iqser-user-avatar-1: $light-accent-5,
|
|
$iqser-user-avatar-2: $light-accent-10,
|
|
$iqser-annotation-hover: $dark-accent-5,
|
|
$iqser-annotation-comments-hover: $light-accent-5,
|
|
$iqser-workload-pages-bg: $dark-accent-8,
|
|
$iqser-tab-hover: vars.$accent,
|
|
$iqser-loading-progress: $light-accent-10,
|
|
$iqser-highlight-color: #905854,
|
|
$iqser-skeleton-color: vars.$grey-10,
|
|
$iqser-app-name-color: vars.$white
|
|
);
|
|
|
|
body {
|
|
--workload-width: 350px;
|
|
--iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
|
|
--iqser-app-name-font-size: 13px;
|
|
--iqser-logo-size: 28px;
|
|
}
|
|
|
|
#viewer {
|
|
visibility: hidden;
|
|
width: calc(100% - var(--workload-width));
|
|
height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|