f3fe98436e
Allows to import giant sets of users as CSV. Tested 500k. The client is fine. The python server and the SQL data base really do not like that.
768 lines
13 KiB
SCSS
768 lines
13 KiB
SCSS
/** theming */
|
|
@import './assets/styles/component-themes.scss';
|
|
|
|
/** fonts */
|
|
@import './assets/styles/fonts.scss';
|
|
@import '~material-icon-font/dist/Material-Icons.css';
|
|
|
|
/** Videojs */
|
|
@import '~video.js/dist/video-js.css';
|
|
|
|
/** Load projector specific SCSS values */
|
|
@import './assets/styles/projector.scss';
|
|
|
|
/** Load global scss variables and device mixing */
|
|
@import './assets/styles/variables.scss';
|
|
|
|
.pbl-ngrid-cell {
|
|
.fill {
|
|
position: relative;
|
|
display: inherit;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
// try to put all children in the in the vertical middle
|
|
* {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
}
|
|
|
|
.checkbox-ripple-padding {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.detail-link {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.pbl-ngrid-no-data {
|
|
position: absolute;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
top: 5%;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100px; /* Need a specific value to work */
|
|
font-style: italic;
|
|
}
|
|
|
|
/** Define the general style-rules */
|
|
* {
|
|
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.mat-toolbar h2,
|
|
.mat-dialog-title {
|
|
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
mat-icon {
|
|
font-family: 'Material Icons' !important;
|
|
}
|
|
|
|
body {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
.title-font,
|
|
.slidetitle h1,
|
|
.slidetitle h2 {
|
|
font-family: OSFont Condensed, Fira Sans Condensed, Roboto-condensed, Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
padding-bottom: 10px;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-size: 36px;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 500;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 400;
|
|
font-size: 100%;
|
|
margin-bottom: 5px;
|
|
|
|
.mat-icon-button mat-icon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: 90%;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
strong,
|
|
b,
|
|
.bold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.generic-mini-button {
|
|
bottom: -28px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.save-button {
|
|
// needs to be important or will be overwritten locally
|
|
background-color: rgb(77, 243, 86) !important;
|
|
}
|
|
|
|
.text-success {
|
|
color: rgb(77, 243, 86);
|
|
}
|
|
|
|
// transform text to uppercase. Use on span, p, h, (...)
|
|
.upper {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.red-warning-text {
|
|
color: red;
|
|
.mat-icon {
|
|
color: red !important;
|
|
}
|
|
}
|
|
|
|
.green-text {
|
|
// TODO better name/theming
|
|
color: #5a5;
|
|
}
|
|
|
|
.icon-text-distance {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.no-content {
|
|
text-align: center;
|
|
color: gray;
|
|
}
|
|
|
|
.regular-shadow {
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) !important;
|
|
}
|
|
|
|
.mat-card {
|
|
@extend .regular-shadow;
|
|
}
|
|
|
|
.os-card {
|
|
max-width: 770px;
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
font-size: 16px;
|
|
|
|
.mat-select-arrow-wrapper {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.os-form-card {
|
|
max-width: 770px;
|
|
margin-top: 20px !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
font-size: 16px;
|
|
padding: 27px;
|
|
|
|
.mat-form-field {
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
|
|
.os-form-card-mobile {
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
|
|
.mat-form-field,
|
|
.mat-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.projector-card .mat-form-field-infix {
|
|
width: 290px;
|
|
}
|
|
|
|
// Shared table definitions
|
|
// TODO: Might be deprecated since we now have Virtual Scrolling Tables
|
|
%os-table {
|
|
width: 100%;
|
|
|
|
/** size of the mat row */
|
|
mat-row {
|
|
position: relative;
|
|
min-height: 60px;
|
|
}
|
|
mat-row.lg {
|
|
height: 110px;
|
|
min-height: 90px;
|
|
}
|
|
mat-row:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.025);
|
|
}
|
|
mat-row.selected {
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.055);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
width: 0%;
|
|
margin-left: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
margin-left: -100%;
|
|
}
|
|
}
|
|
|
|
//custom table header for search button, filtering and more. Used in ListViews
|
|
.custom-table-header {
|
|
width: 100%;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: right;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
|
|
button {
|
|
border-radius: 0%;
|
|
}
|
|
|
|
input {
|
|
position: relative;
|
|
max-width: 400px;
|
|
z-index: 2;
|
|
padding-right: 5px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.mat-icon {
|
|
vertical-align: text-bottom;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.os-listview-table {
|
|
@extend %os-table;
|
|
|
|
/* multi select column */
|
|
.mat-column-selector {
|
|
flex: 0 0 60px;
|
|
}
|
|
/* projector button column */
|
|
.mat-column-projector {
|
|
flex: 0 0 40px;
|
|
overflow: visible;
|
|
}
|
|
/** hide mat header row */
|
|
.mat-header-row {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.os-headed-listview-table {
|
|
@extend %os-table;
|
|
}
|
|
|
|
/* hide scrollbars caused by hidden filter dialog outside of the viewport */
|
|
.mat-drawer-content {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.card-plus-distance {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/**title of an app page*/
|
|
.app-name {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/**content of an app page*/
|
|
.app-content {
|
|
margin: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
/**even distribution of elements in a row*/
|
|
.flex-spaced {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/**use to push content to the right side*/
|
|
.spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.mat-expansion-panel {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.mat-menu-panel {
|
|
max-width: initial !important;
|
|
}
|
|
|
|
.hidden-cell {
|
|
flex: 0;
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
.file-drop-zone-style {
|
|
border: 2px dotted #0782d0 !important;
|
|
height: 100px;
|
|
}
|
|
|
|
.file-drop-content-style {
|
|
height: 100px;
|
|
|
|
.ngx-file-drop__drop-zone-label {
|
|
color: #0782d0;
|
|
line-height: 100px;
|
|
}
|
|
}
|
|
|
|
.os-tree {
|
|
.node-content-wrapper {
|
|
border: 1px black;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
tree-loading-component {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mat-chip,
|
|
.mat-basic-chip {
|
|
font-size: 12px;
|
|
min-height: 22px !important;
|
|
border-radius: 5px !important;
|
|
padding: 0px 8px !important;
|
|
margin: 0;
|
|
line-height: 2;
|
|
display: inline-flex;
|
|
}
|
|
|
|
// to display quantities. Use in span or div
|
|
.os-amount-chip {
|
|
border-radius: 50%;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mat-chip:focus,
|
|
.mat-basic-chip:focus {
|
|
outline: none;
|
|
}
|
|
button.mat-menu-item.selected {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.mat-menu-item .mat-icon {
|
|
margin-right: 8px !important;
|
|
}
|
|
|
|
/** helper classes for margin/padding */
|
|
.spacer-top-3 {
|
|
margin-top: 3px !important;
|
|
}
|
|
|
|
.spacer-top-5 {
|
|
margin-top: 5px !important;
|
|
}
|
|
|
|
.spacer-top-10 {
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
.spacer-top-20 {
|
|
margin-top: 20px !important;
|
|
}
|
|
|
|
.spacer-bottom-10 {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.spacer-bottom-20 {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.spacer-bottom-40 {
|
|
margin-bottom: 40px !important;
|
|
}
|
|
|
|
.spacer-bottom-60 {
|
|
margin-bottom: 60px !important;
|
|
}
|
|
|
|
.spacer-left-10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.spacer-left-20 {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.spacer-left-50 {
|
|
margin-left: 50px !important;
|
|
}
|
|
|
|
.button24 {
|
|
background-color: white;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
.icon24 {
|
|
font-size: 16px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.mat-mini-fab.large {
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
|
|
.mat-icon {
|
|
font-size: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.mat-radio-button {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.content-container {
|
|
margin: 0 15px;
|
|
h1 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
|
|
.innerTable {
|
|
display: inline-block;
|
|
line-height: 150%;
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
.cdk-column-menu {
|
|
padding: 0 16px 0 0 !important;
|
|
}
|
|
|
|
/** media queries */
|
|
@include desktop {
|
|
.content-container {
|
|
margin: 0 25px;
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** more helper classes **/
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.pointer:hover {
|
|
cursor: pointer;
|
|
}
|
|
.pointer.selected {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/** Colors **/
|
|
.lightblue {
|
|
background-color: rgb(33, 150, 243) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.darkblue {
|
|
background-color: rgb(63, 81, 181) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.green,
|
|
.success {
|
|
background-color: rgb(76, 175, 80) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.red,
|
|
.error {
|
|
background-color: rgb(255, 82, 82) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.yellow,
|
|
.warning {
|
|
background-color: rgb(255, 193, 7) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.bluegrey {
|
|
background-color: rgb(96, 125, 139) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.grey {
|
|
background-color: #e0e0e0 !important;
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
}
|
|
|
|
.multi-line-chip {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* TODO: move to site.component.scss-theme.scss (does not work currently) */
|
|
|
|
/* make the .user-menu expansion panel look like the nav-toolbar above */
|
|
.user-menu {
|
|
min-height: 48px;
|
|
|
|
.mat-expansion-panel-header {
|
|
padding: 0 16px !important;
|
|
}
|
|
|
|
.mat-expansion-panel-body {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.mat-drawer-inner-container {
|
|
scrollbar-width: none; /* hide scrollbars in Firefox */
|
|
-ms-overflow-style: -ms-autohiding-scrollbar; /* hide scrollbars in Edge until the scrollable area is hovered */
|
|
}
|
|
|
|
.mat-drawer-inner-container::-webkit-scrollbar {
|
|
display: none !important; /* hide scrollbars in webkit browsers */
|
|
}
|
|
|
|
.small-spinner {
|
|
// 24px is the size of a normal icon
|
|
$spinner-size: 24px;
|
|
height: $spinner-size !important;
|
|
height: $spinner-size !important;
|
|
svg {
|
|
height: $spinner-size !important;
|
|
height: $spinner-size !important;
|
|
}
|
|
}
|
|
|
|
.import-table {
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.mat-header-cell {
|
|
min-width: 100px;
|
|
flex: 2;
|
|
padding-right: 8px;
|
|
}
|
|
.mat-cell {
|
|
min-width: 100px;
|
|
flex: 2;
|
|
padding-top: 2px;
|
|
padding-right: 8px;
|
|
}
|
|
.selection {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.import-done {
|
|
background-color: #cfc;
|
|
}
|
|
.import-error {
|
|
background-color: #fcc;
|
|
}
|
|
|
|
.code {
|
|
padding-left: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
div.wrapper {
|
|
display: flex;
|
|
vertical-align: bottom;
|
|
padding: 10px;
|
|
}
|
|
|
|
div.summary {
|
|
display: flex;
|
|
}
|
|
|
|
.hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.newBadge {
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.first-column {
|
|
flex: 1;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.filter-imports {
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
.table-view-list-title {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.one-line {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ellipsis-overflow {
|
|
@extend .one-line;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.white {
|
|
color: white;
|
|
}
|
|
|
|
.queue {
|
|
.mat-expansion-panel-body {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fix to enable multi line mat hints. See:
|
|
* https://github.com/angular/components/issues/5227
|
|
*/
|
|
.mat-form-field {
|
|
.mat-form-field-wrapper {
|
|
padding-bottom: 0;
|
|
|
|
.mat-form-field-underline {
|
|
position: initial !important;
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.mat-form-field-subscript-wrapper,
|
|
.mat-form-field-ripple {
|
|
position: initial !important;
|
|
display: table;
|
|
}
|
|
|
|
.mat-form-field-subscript-wrapper {
|
|
min-height: calc(1em + 1px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Use to disable events on (i.e) matMenuTriggerFor
|
|
*/
|
|
.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
// custom horrizontal scroll-bar
|
|
|
|
.h-scroller {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: 5px;
|
|
scrollbar-color: #666666;
|
|
}
|
|
|
|
.h-scroller::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
.h-scroller::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
height: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.h-scroller::-webkit-scrollbar-corner {
|
|
display: none;
|
|
height: 0px;
|
|
width: 0px;
|
|
}
|