22a374a150
Sets the main container to absolute, makes it easier to detect the pages height ngrid lists can dynamically detect the page height using flexbox, remove external class injection from list-views, add "spacer-bottom-60" class for the jitsi-container, add it everywhere where the jitsi container could hide the content.
778 lines
13 KiB
SCSS
778 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;
|
|
}
|
|
|
|
/**
|
|
* Compilcated ngrid hack: The meta row won't disappear (just like that)
|
|
* Select the first ever container pbl-ngrid-container div and hide
|
|
*/
|
|
.pbl-ngrid-container {
|
|
> div {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|