OpenSlides/client/src/styles.scss

/** Imports the material-design-theming */
@import '~@angular/material/theming';
@include mat-core();

/** Import brand theme */
@import './assets/styles/openslides-general-theme.scss';
@import './assets/styles/openslides-theme.scss';
@import './assets/styles/openslides-dark-theme.scss';
@import './assets/styles/openslides-green-theme.scss';
@import './assets/styles/openslides-developer-theme.scss';

/** Import the component-related style sheets here */
@import './app/site/site.component.scss-theme.scss';
@import './assets/styles/global-components-style.scss';
@import './app/shared/components/projector-button/projector-button.component.scss';
@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
@import './app/site/global-spinner/global-spinner.component.scss';
@import './app/shared/components/tile/tile.component.scss';
@import './app/shared/components/block-tile/block-tile.component.scss';

/** fonts */
@import './assets/styles/fonts.scss';
@import '~material-icon-font/dist/Material-Icons.css';

/** Mix the component-related style-rules */
@mixin openslides-components-theme($theme) {
    @include os-site-theme($theme);
    @include os-components-style($theme);
    @include os-projector-button-style($theme);
    @include os-list-of-speakers-style($theme);
    @include os-sorting-tree-style($theme);
    @include os-global-spinner-theme($theme);
    @include os-tile-style($theme);
    /** More components are added here */
}

/** date-time-picker */
@import '~ng-pick-datetime/assets/style/picker.min.css';

/** Load projector specific SCSS values */
@import './assets/styles/projector.scss';

.general-theme {
    @include os-global-spinner-theme($openslides-general-theme);
}

/** Define the classes to switch between themes */
.openslides-theme {
    @include angular-material-theme($openslides-theme);
    @include openslides-components-theme($openslides-theme);

    .logo-container {
        img.dark {
            display: none;
        }
        img.default {
            display: inherit;
        }
    }
}

.openslides-dark-theme,
.openslides-developer-dark-theme {
    .logo-container {
        img.dark {
            display: inherit;
        }
        img.default {
            display: none;
        }
    }
}

.openslides-dark-theme {
    @include angular-material-theme($openslides-dark-theme);
    @include openslides-components-theme($openslides-dark-theme);
}

.openslides-green-theme {
    @include angular-material-theme($openslides-green-theme);
    @include openslides-components-theme($openslides-green-theme);
}

.openslides-developer-dark-theme {
    @include angular-material-theme($openslides-developer-theme);
    @include openslides-components-theme($openslides-developer-theme);

    * {
        font-family: monospace !important;
        color: mat-color(map-get($openslides-developer-theme, accent));
    }

    os-site {
        .active mat-icon,
        .active span {
            color: mat-color(map-get($openslides-developer-theme, accent));
        }
    }

    .custom-table-header {
        background: #000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mat-toolbar.sticky-toolbar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mat-drawer-inner-container {
        background: #000;
    }

    .mat-drawer-inner-container > * {
        background: #000 !important;
        z-index: 3;

        .os-site.nav-toolbar {
            background: #000;
        }
    }

    .mat-drawer-content > * {
        background: #000;
    }

    mat-icon {
        font-family: 'Material Icons' !important;
    }

    .mat-mini-fab.projector-active {
        background-color: mat-color(map-get($openslides-developer-theme, warn));
    }

    .mce-ico {
        font-family: 'tinymce', Arial !important;
    }
}

/** 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,
.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: 12px;
    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 {
    font-weight: 500;
}

.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;
}
mat-card {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) !important;
}
.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 {
    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
%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: 60px;
    line-height: 60px;
    text-align: right;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: flex-end;

    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;
}

/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
mat-paginator {
    min-height: 800px;
}

/* 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;
}

/** helper classes for animation */
.on-transition-fade {
    z-index: 100;
}

mat-expansion-panel {
    border-radius: 0 !important;
}

/* This destroys the projector button in list views using extension panels. */
/*mat-panel-title mat-icon {
    padding-right: 30px;
}*/

.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;
}

.mat-chip-list.user .mat-chip {
    border-radius: 16px !important;
    padding: 5px 15px !important;
    border: 1px solid;
    height: auto;
}

// to display quantities. Use in span or div
.os-amount-chip {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 3px;
    background: lightgray;
    color: #000;
    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;
}

.meta-text-block .mat-icon-button {
    margin-top: -12px !important;
}
.meta-text-block .mat-icon-button mat-icon {
    font-size: 18px;
}

/** 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-left-10 {
    margin-left: 10px;
}
.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 65px;
}

/**
 * cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
 * Depending in mobile-mode and desktop mode we need to subtract different values
 * from 100vh
 */
.virtual-scroll-full-page {
    height: calc(100vh - 128px);
}

/** media queries */

/* medium to small */
@media only screen and (max-width: 960px) {
    .virtual-scroll-full-page {
        height: calc(100vh - 64px);
    }
}

/* medium */
@media only screen and (min-width: 500px) and (max-width: 960px) {
    .content-container {
        margin: 0 25px;
    }
    .content-container h1 {
        font-size: 30px;
    }
}
/* small */
@media only screen and (max-width: 500px) {
    .content-container {
        margin: 0 15px;
    }
    .content-container 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;
}

/* 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 */
}

.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;
}

.ellipsis-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 3px;
    margin-right: 3px;
}

.white {
    color: white;
}

.queue {
    .mat-expansion-panel-body {
        padding: 0 !important;
    }
}