* { /* QS COLORS */ --qs-color-black: #000; --qs-color-blue: rgb(0, 106, 179); --qs-color-red: rgb(243, 64, 42); --qs-color-lightblue: rgb(200, 221, 240); --qs-color-yellow: rgb(254, 206, 67); --qs-color-grey: #484848; /* QS FONTS font property: style, variant, weight, size, family */ --qs-font-family: 'Meta Ot'; --qs-font-text: normal normal normal 1em var(--qs-font-family); --qs-font-hint: italic normal normal 0.8em var(--qs-font-family); --qs-color-hint: var(--qs-color-grey); --qs-font-mono: normal normal normal 0.8rem monospace; --qs-font-header-1: normal normal normal 2.3rem var(--qs-font-family); --qs-color-header-1: var(--qs-color-blue); --qs-font-header-2: normal normal normal 1.7rem var(--qs-font-family); --qs-color-header-2: var(--qs-color-blue); --qs-font-header-3: normal normal bold 1.2rem var(--qs-font-family); --qs-color-header-3: var(--qs-color-black); --qt-scrollbar-size: 12px; --qt-scrollbar-thumbBackground: #bbbbbb; --qt-scrollbar-border-radius: 0; --qs-page-content-padding: 15px; /* configure Qualitype components */ --qt-font-default: var(--qs-font-text); --qt-primary-color: var(--qs-color-blue); --qt-secondary-color: #e6f0f9; --qt-color-error: rgb(221, 44, 0); --qt-color-hint: var(--qs-color-hint); --qt-font-hint: var(--qs-font-hint); --qt-drawer-scrim-color: #006BB555; --qt-drawer-condensed-width: 40px; --qt-drawer-transition-delay: 200ms; --qt-drawer-button-color: var(--qs-color-lightblue); /* filter drawer */ --qt-filterview-background: white; --qt-table-filterview-padding: var(--qs-page-content-padding); --qt-editview-padding: var(--qs-page-content-padding); --qt-multiview-highlight-color: var(--qs-color-blue); --qt-multiview-hover-color: #d7ecfc; --qt-multiview-accordeon-title-background: #edf7ff; --qt-basic-input-colorLabel: var(--qs-color-grey); --qt-basic-input-unitTextColor: var(--qs-color-grey); --qt-disabled-input-opacity: 0.75; --qt-box-shadow: rgba(0, 0, 0, 0.14) 0 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 5px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -2px; --qt-checkbox-checkedBackground: var(--qs-color-blue); --qt-checkbox-errorBorder: var(--qs-color-red); --qt-table-textColor: var(--qs-color-grey); --qt-table-headerFontColor: var(--qs-color-blue); --qt-table-headerBackgroundColor: white; --qt-table-rowBackgroundEven: #f3f3f3; --qt-table-rowBackgroundOdd: white; --qt-table-rowBackgroundSelected: rgb(171, 209, 240); --error-color: var(--qt-color-error); --qtcard-headerBackground: var(--qs-color-blue); --qtcard-headerColor: white; --qtcard-borderRadius: 0; --qtcard-shadow: none; --qtcard-background: #eee; --qtSiteWarning-background: #e6e687; --qt-basic-input-lineColorNormal: var(--qs-color-blue); --qt-basic-input-lineColorFocussed: var(--qs-color-blue); --qt-basic-input-lineColorError: var(--qs-color-red); --qt-basic-input-lineColorDisabled: var(--qs-color-black); --qt-basic-input-suffixColorNormal: var(--qs-color-blue); --qt-basic-input-suffixColorDisabled: var(--qs-color-black); --qt-font-family: var(--qs-font-family); --qt-breadcrumb-background: white; --qt-breadcrumb-font-color: var(--qs-color-blue); --qt-breadcrumb-font-size: 0.8em; --qt-breadcrumb-box-shadow: none; --qt-toolbar-background: var(--qs-color-blue); --qt-toolbar-shadow: none; --qt-toolbar-font: var(--qs-font-header-1); --qt-toolbar-fontcolor: white; --qt-basic-input-appendixBorderRadius: 0; --qs-input-primaryColor: rgb(63, 81, 181); } body { margin: 0; padding: 0; font: var(--qs-font-text); color: var(--qs-color-black); } qs-app { overflow: hidden; overscroll-behavior: none; } toast-list { box-sizing: border-box; position: fixed; right: 24px; max-width: 300px; top: 70px; z-index: var(--qt-toastmanager-zIndex, 5); } toast-list > div { position: relative; outline: none; box-sizing: border-box; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); padding: 16px 24px; background: #323232; color: #f0f0f0; font-size: 0.9em; margin-bottom: 16px; opacity: 0; } toast-list > div[opened] { opacity: 1; } toast-list .closebutton { position: absolute; top: 2px; right: 5px; cursor: pointer; font-size: 0.8em; opacity: 0.8; } qs-process-list, qs-process-indicator { position: fixed; bottom: 1rem; right: 1rem; padding: 3px; border-radius: 3px; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20); z-index: 3; background: white; } qs-process-indicator, qs-process-list > header { display: grid; grid-template-columns: min-content auto min-content min-content; align-items: center; gap: 0.4rem; padding: 0.1rem; } qs-process-list > content { display: block; } qs-process-list > content[empty] { text-align: center; font: var(--qs-font-hint); } qs-process-list item-list { display: block; max-height: 300px; overflow-y: auto; scrollbar-width: auto; } qs-process-list item-list::-webkit-scrollbar { width: var(--qt-scrollbar-size); height: var(--qt-scrollbar-size); } qs-process-list item-list::-webkit-scrollbar-thumb { background: var(--qt-scrollbar-thumbBackground); border-radius: var(--qt-scrollbar-border-radius); } qs-process-indicator, qs-process-list .btn-close, qs-process-list .btn-minimize { cursor: pointer; } qs-process-list item { display: block; border: 1px solid #999; box-sizing: border-box; padding: 4px; margin: 8px; box-shadow:0 0 3px rgba(0,0,0,.5); position: relative; } qs-process-list item:hover { border-color: #333; } qs-process-list item .layout { display: grid; grid-template-columns: [col-1] auto [col-2] 1fr [col-3] auto [col-4] auto [col-end]; grid-template-rows: 1fr; align-items: center; } qs-process-list item .state { grid: 1 / col-1 / 2 / col-2; } qs-process-list item .name { grid: 1 / col-2 / 2 / col-3; } qs-process-list item .btn-open { grid: 1 / col-3 / 2 / col-4; } qs-process-list item .btn-remove { grid: 1 / col-4 / 2 / col-end; } qs-process-list item .progressBar { position: absolute; top: 0; left: 0; height: 100%; background: rgba(0,0,0,.1); } qs-process-list item .name { cursor: default; padding-left: 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } qs-process-list item .infotext { font: var(--qs-font-hint); opacity: 0.8; } qs-process-list item .btn-open { cursor: pointer; margin-left: 8px; } qs-process-list item .btn-remove { cursor: pointer; margin-left: 8px; } body { --qt-drawer-width: min(340px, 100dvw); } body[qs-app="fumi"] { --qt-drawer-width: min(385px, 100dvw); }