69adc1d41c
Add Chat User Interface Restructure some services Virtual Scrolling Manual change detection for message updates Enhanced Date pipe Message layout Tabbed reusable chat window Deleting messages Further permission checks Delete-prompts Mobile friendly chat usage automatically scroll to bottom
799 lines
13 KiB
SCSS
799 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;
|
|
}
|
|
|
|
// for aligning text lines with an icon and or link
|
|
.line-and-icon {
|
|
display: block;
|
|
line-height: 40px;
|
|
h2,
|
|
span,
|
|
a {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.mat-icon-button,
|
|
.mat-icon {
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
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-bottom-340 {
|
|
margin-bottom: 340px !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;
|
|
}
|
|
|
|
/**
|
|
* simply hide something
|
|
*/
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.hide-height {
|
|
height: 0 !important;
|
|
}
|