206 lines
6.4 KiB
SCSS
206 lines
6.4 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');
|
|
}
|
|
|
|
.glyph-margin {
|
|
background-size: 80%;
|
|
|
|
&.error {
|
|
background: url('assets/icons/general/alert-circle.svg') no-repeat center;
|
|
}
|
|
|
|
&.warning {
|
|
background: url('assets/icons/general/alert-warning-circle.svg') no-repeat center;
|
|
}
|
|
}
|
|
|
|
.codicon-error {
|
|
background: url('assets/icons/general/alert-circle.svg') no-repeat center;
|
|
}
|
|
|
|
.codicon-warning {
|
|
background: url('assets/icons/general/alert-warning-circle.svg') no-repeat center;
|
|
}
|
|
|
|
.codicon-error::before,
|
|
.codicon-warning::before {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@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;
|
|
--documine-workload-content-width: 287px;
|
|
--structured-component-management-width: 35%;
|
|
--quick-navigation-width: 61px;
|
|
--iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
|
|
--iqser-app-name-font-size: 13px;
|
|
--iqser-logo-size: 28px;
|
|
--documine-viewer-width: calc(
|
|
100% - var(--structured-component-management-width) - calc(var(--documine-workload-content-width) - 55px) - var(
|
|
--quick-navigation-width
|
|
) - 3px
|
|
);
|
|
--viewer-height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
|
|
}
|
|
|
|
.redaction-viewer {
|
|
visibility: hidden;
|
|
width: calc(100% - var(--workload-width));
|
|
height: var(--viewer-height);
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.documine-viewer {
|
|
visibility: hidden;
|
|
width: var(--documine-viewer-width);
|
|
height: var(--viewer-height);
|
|
bottom: 0;
|
|
right: calc(var(--quick-navigation-width) + 3px);
|
|
position: absolute;
|
|
|
|
&.document-info {
|
|
width: calc(
|
|
100% - var(--structured-component-management-width) - calc(var(--documine-workload-content-width) - 55px) - var(
|
|
--workload-width
|
|
) - 3px
|
|
);
|
|
right: calc(var(--workload-width) + 1px);
|
|
}
|
|
}
|