Merge pull request #4949 from GabrielInTheWorld/lostDeep

Cleans up the stylesheets a little bit

client/src/app/shared/components/head-bar/head-bar.component.html

@@ -29,7 +29,7 @@
     <div class="spacer"></div>
 
     <!-- Button to open the global search -->
-    <button *ngIf="!vp.isMobile" mat-icon-button (click)="openSearch()">
+    <button *ngIf="!editMode" mat-icon-button (click)="openSearch()">
         <mat-icon>search</mat-icon>
     </button>
 

client/src/app/shared/components/head-bar/head-bar.component.scss

@@ -9,7 +9,6 @@
     top: 0;
     z-index: 5;
     position: sticky;
-}
 
     .toolbar-left {
         display: flex;
@@ -22,10 +21,10 @@
             width: 100%;
             overflow: hidden;
 
-        ::ng-deep .title-slot {
-            h2 {
+            .title-slot {
                 margin: 16px 0;
                 display: block;
+                h2 {
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
@@ -33,6 +32,7 @@
             }
         }
     }
+
     .toolbar-centered {
         margin: auto;
         vertical-align: baseline;
@@ -40,10 +40,11 @@
 
     .toolbar-right {
         display: flex;
-    ::ng-deep .extra-controls-slot {
+        .extra-controls-slot {
             display: flex;
         }
     }
+}
 
 mat-toolbar.multi-select {
     background-color: #757575 !important;

client/src/app/shared/components/head-bar/head-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { MainMenuService } from 'app/core/core-services/main-menu.service';
@@ -54,7 +54,8 @@ import { ViewportService } from 'app/core/ui-services/viewport.service';
 @Component({
     selector: 'os-head-bar',
     templateUrl: './head-bar.component.html',
-    styleUrls: ['./head-bar.component.scss']
+    styleUrls: ['./head-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class HeadBarComponent implements OnInit {
     /**

client/src/app/shared/components/rounded-input/rounded-input.component.ts

@@ -74,7 +74,7 @@ export class RoundedInputComponent implements OnInit, OnDestroy {
      * Whether this component should render over the full width.
      */
     @Input()
-    public fullWidth = true;
+    public fullWidth = false;
 
     /**
      * Custom `FormControl`.

client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss

@@ -32,12 +32,14 @@ mat-divider {
     margin-left: 20px;
 }
 
+mat-checkbox {
     // adds breaks to mat-checkboxes with long labels
-::ng-deep .mat-checkbox-layout {
-    white-space: normal !important;
+    .mat-checkbox-layout {
+        white-space: normal;
     }
 
     // rather than center the checkbox, put the checkbox in the first line
-::ng-deep .mat-checkbox-inner-container {
-    margin-top: 3px !important;
+    .mat-checkbox-inner-container {
+        margin-top: 3px;
+    }
 }

client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 
 import { BaseFilterListService, OsFilterOption } from 'app/core/ui-services/base-filter-list.service';
 import { BaseViewModel } from 'app/site/base/base-view-model';
@@ -17,7 +17,8 @@ import { BaseViewModel } from 'app/site/base/base-view-model';
 @Component({
     selector: 'os-filter-menu',
     templateUrl: './filter-menu.component.html',
-    styleUrls: ['./filter-menu.component.scss']
+    styleUrls: ['./filter-menu.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FilterMenuComponent implements OnInit {
     /**

client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html

@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>{{ 'Edit details for' | translate }} {{ item.getTitle() }}</h1>
 <div mat-dialog-content>
-    <form class="itemDialogForm" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
+    <form class="item-dialog-form" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
         <!-- Visibility -->
         <mat-form-field>
             <mat-select formControlName="type" placeholder="{{ 'Agenda visibility' | translate }}">
@@ -13,7 +13,9 @@
         <!-- Duration -->
         <mat-form-field>
             <input type="string" matInput placeholder="{{ 'Duration' | translate }}" formControlName="durationText" />
-            <mat-error *ngIf="agendaInfoForm.invalid">Your input does not match the following structure 'hh:mm'...</mat-error>
+            <mat-error *ngIf="agendaInfoForm.invalid"
+                >Your input does not match the following structure 'hh:mm'...</mat-error
+            >
         </mat-form-field>
 
         <!-- Item number (prefix) -->

client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.scss

@@ -1,8 +1,6 @@
-.itemDialogForm {
+.item-dialog-form {
     display: inline-block;
-    ::ng-deep {
     .mat-form-field {
         width: 100%;
     }
 }
-}

client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html

@@ -1,4 +1,4 @@
-<div class="poll-wrapper" *ngIf="poll">
+<div class="assignment-poll-wrapper" *ngIf="poll">
     <div class="poll-menu">
         <!-- Buttons -->
         <button

client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss

@@ -1,74 +1,12 @@
-::ng-deep .progress-green {
-    .mat-progress-bar-fill::after {
-        background-color: #4caf50;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #d5ecd5;
-    }
-}
-
-::ng-deep .progress-red {
-    .mat-progress-bar-fill::after {
-        background-color: #f44336;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #fcd2cf;
-    }
-}
-
-::ng-deep .progress-yellow {
-    .mat-progress-bar-fill::after {
-        background-color: #ffc107;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #fff0c4;
-    }
-}
-
-.poll-wrapper {
+.assignment-poll-wrapper {
+    @import '~assets/styles/poll-common-styles.scss';
     position: relative;
     padding: 0 15px;
-}
 
     .poll-main-content {
         padding-top: 10px;
     }
 
-.poll-result {
-    .poll-progress-bar {
-        height: 5px;
-        width: 100%;
-        .mat-progress-bar {
-            height: 100%;
-            width: 100%;
-        }
-    }
-    .poll-progress {
-        display: flex;
-        margin-bottom: 15px;
-        margin-top: 15px;
-        mat-icon {
-            min-width: 40px;
-            margin-right: 5px;
-        }
-        .progress-container {
-            width: 85%;
-        }
-    }
-}
-
-.main-nav-color {
-    color: rgba(0, 0, 0, 0.54);
-}
-
-.poll-quorum-line {
-    display: flex;
-    vertical-align: bottom;
-    .mat-button {
-        padding: 1px;
-    }
-}
-
     .poll-grid {
         display: grid;
         grid-gap: 5px;
@@ -107,3 +45,4 @@
     .hint-form {
         margin-top: 20px;
     }
+}

client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -25,7 +25,8 @@ import { ViewAssignmentPollOption } from '../../models/view-assignment-poll-opti
 @Component({
     selector: 'os-assignment-poll',
     templateUrl: './assignment-poll.component.html',
-    styleUrls: ['./assignment-poll.component.scss']
+    styleUrls: ['./assignment-poll.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AssignmentPollComponent extends BaseViewComponent implements OnInit {
     /**

client/src/app/site/common/components/super-search/super-search.component.html

@@ -1,6 +1,7 @@
 <div class="query-container">
     <div class="super-search-input">
         <os-rounded-input
+            [fullWidth]="true"
             [autofocus]="true"
             placeholder="{{ 'Search' | translate }}"
             [modelForm]="searchForm"

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -2,11 +2,6 @@
 
 $navbar-size: 64px;
 
-// multi line tooltip
-::ng-deep .mat-tooltip {
-    white-space: pre-line !important;
-}
-
 .folder-nav-bar {
     width: 100%;
     display: flex;

client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss

@@ -17,10 +17,6 @@
     }
 }
 
-::ng-deep .mat-form-field {
-    width: 50%;
-}
-
 .mat-cell > div {
     z-index: 1 !important;
 }

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html

@@ -28,7 +28,7 @@
     <mat-horizontal-stepper #matStepper linear>
         <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
             <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
-            <div>
+            <div class="amendment-create-wizard-wrapper">
                 <section
                     *ngFor="let paragraph of paragraphs"
                     class="paragraph-row"

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss

@@ -1,3 +1,4 @@
+.amendment-create-wizard-wrapper {
     .paragraph-row {
         display: flex;
         flex-direction: row;
@@ -29,7 +30,7 @@
         }
     }
 
-:host ::ng-deep .motion-text {
+    .motion-text {
         p,
         ul,
         ol,
@@ -73,13 +74,4 @@
             }
         }
     }
-
-.wide-form {
-    textarea {
-        height: 25vh;
-    }
-
-    ::ng-deep {
-        width: 100%;
-    }
 }

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
@@ -19,7 +19,8 @@ import { ViewMotion } from 'app/site/motions/models/view-motion';
 @Component({
     selector: 'os-amendment-create-wizard',
     templateUrl: './amendment-create-wizard.component.html',
-    styleUrls: ['./amendment-create-wizard.component.scss']
+    styleUrls: ['./amendment-create-wizard.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AmendmentCreateWizardComponent extends BaseViewComponent {
     /**

client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss

@@ -9,7 +9,7 @@ h4 {
     margin: 0;
 }
 
-.small-button ::ng-deep {
+.small-button {
     width: 20px;
     height: 20px;
 

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html

@@ -43,8 +43,7 @@
 <!-- The actual diff view -->
 <div class="motion-text-with-diffs">
     <div *ngIf="getTitleChangingObject() as changedTitle">
-        <div
-            class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
+        <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
             <div class="action-row" *osPerms="'motions.can_manage'">
                 <button
                     mat-icon-button
@@ -60,15 +59,14 @@
                 <i class="grey">{{ 'Rejected' | translate }}</i>
             </div>
 
-            <div class="motion-text motion-text-diff"
+            <div
+                class="motion-text motion-text-diff"
                 [class.line-numbers-none]="isLineNumberingNone()"
                 [class.line-numbers-inline]="isLineNumberingInline()"
                 [class.line-numbers-outside]="isLineNumberingOutside()"
                 [attr.data-change-id]="changedTitle.getChangeId()"
             >
-                <div class="bold">
-                    {{ 'Changed title' | translate }}:
-                </div>
+                <div class="bold">{{ 'Changed title' | translate }}:</div>
                 <div [innerHTML]="getFormattedTitleDiff()"></div>
             </div>
         </div>
@@ -153,7 +151,7 @@
         >
             <mat-icon>thumb_up</mat-icon>
             <span translate>Accept</span>
-            <mat-icon *ngIf="change.isAccepted()" class="active-indicator">done</mat-icon>
+            <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
         </button>
         <button
             type="button"
@@ -163,7 +161,7 @@
         >
             <mat-icon>thumb_down</mat-icon>
             <span translate>Reject</span>
-            <mat-icon *ngIf="change.isRejected()" class="active-indicator">done</mat-icon>
+            <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
         </button>
         <button type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
             <mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
@@ -173,11 +171,21 @@
             <mat-icon>delete</mat-icon>
             <span translate>Delete</span>
         </button>
-        <button type="button" mat-menu-item (click)="editChangeRecommendation(change, $event)" *ngIf="!change.isTitleChange()">
+        <button
+            type="button"
+            mat-menu-item
+            (click)="editChangeRecommendation(change, $event)"
+            *ngIf="!change.isTitleChange()"
+        >
             <mat-icon>edit</mat-icon>
             <span translate>Edit</span>
         </button>
-        <button type="button" mat-menu-item (click)="editTitleChangeRecommendation(change, $event)" *ngIf="change.isTitleChange()">
+        <button
+            type="button"
+            mat-menu-item
+            (click)="editTitleChangeRecommendation(change, $event)"
+            *ngIf="change.isTitleChange()"
+        >
             <mat-icon>edit</mat-icon>
             <span translate>Edit</span>
         </button>

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss

@@ -95,12 +95,9 @@
     }
 }
 
-::ng-deep .mat-menu-content {
 .active-indicator {
     font-size: 18px;
-        color: green !important;
     margin-left: 10px;
     margin-right: 0;
     margin-top: 3px;
 }
-}

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ErrorStateMatcher } from '@angular/material/core';
@@ -68,7 +68,8 @@ import {
 @Component({
     selector: 'os-motion-detail',
     templateUrl: './motion-detail.component.html',
-    styleUrls: ['./motion-detail.component.scss']
+    styleUrls: ['./motion-detail.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MotionDetailComponent extends BaseViewComponent implements OnInit, OnDestroy {
     /**

client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html

@@ -4,6 +4,7 @@
         <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
     </ng-container>
     <ng-container class="meta-text-block-content">
+        <div class="motion-poll-wrapper">
             <div *ngIf="poll.has_votes" class="poll-result">
                 <div *ngFor="let key of pollValues">
                     <div class="poll-progress" *ngIf="poll[key] !== undefined">
@@ -50,6 +51,7 @@
                     </div>
                 </div>
             </div>
+        </div>
     </ng-container>
     <ng-container class="meta-text-block-action-row" *osPerms="'motions.can_manage_metadata'">
         <button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()">

client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.scss

@@ -1,61 +1,3 @@
-::ng-deep .progress-green {
-    .mat-progress-bar-fill::after {
-        background-color: #4caf50;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #d5ecd5;
-    }
-}
-
-::ng-deep .progress-red {
-    .mat-progress-bar-fill::after {
-        background-color: #f44336;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #fcd2cf;
-    }
-}
-
-::ng-deep .progress-yellow {
-    .mat-progress-bar-fill::after {
-        background-color: #ffc107;
-    }
-    .mat-progress-bar-buffer {
-        background-color: #fff0c4;
-    }
-}
-
-.poll-result {
-    .poll-progress-bar {
-        height: 5px;
-        width: 100%;
-        .mat-progress-bar {
-            height: 100%;
-            width: 100%;
-        }
-    }
-    .poll-progress {
-        display: flex;
-        margin-bottom: 15px;
-        margin-top: 15px;
-        mat-icon {
-            min-width: 40px;
-            margin-right: 5px;
-        }
-        .progress-container {
-            width: 85%;
-        }
-    }
-}
-
-.main-nav-color {
-    color: rgba(0, 0, 0, 0.54);
-}
-
-.poll-quorum-line {
-    display: flex;
-    vertical-align: bottom;
-    .mat-button {
-        padding: 1px;
-    }
+.motion-poll-wrapper {
+    @import '~assets/styles/poll-common-styles.scss';
 }

client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
@@ -23,7 +23,8 @@ import { MotionPollDialogComponent } from './motion-poll-dialog.component';
 @Component({
     selector: 'os-motion-poll',
     templateUrl: './motion-poll.component.html',
-    styleUrls: ['./motion-poll.component.scss']
+    styleUrls: ['./motion-poll.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MotionPollComponent extends BaseViewComponent implements OnInit {
     /**

client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html

@@ -2,7 +2,7 @@
 
 <form [formGroup]="exportForm">
     <!-- Content -->
-    <div mat-dialog-content>
+    <div mat-dialog-content class="motion-export-dialog-wrapper">
         <div>
             <p class="toggle-group-head" translate>Format</p>
             <mat-button-toggle-group class="smaller-buttons" formControlName="format">

client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss

@@ -1,3 +1,4 @@
+.motion-export-dialog-wrapper {
     .toggle-group-head {
         margin-bottom: 0;
     }
@@ -6,11 +7,10 @@ h1 {
         margin: 0;
     }
 
-.smaller-buttons {
-    ::ng-deep {
-        .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-            line-height: 2.5 !important;
-            padding: 0 10px !important;
+    mat-button-toggle {
+        .mat-button-toggle-label-content {
+            line-height: 2.5;
+            padding: 0 10px;
         }
     }
 }

client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatButtonToggle } from '@angular/material/button-toggle';
 import { MatDialogRef } from '@angular/material/dialog';
@@ -20,7 +20,8 @@ import { ExportFileFormat, MotionExportInfo } from 'app/site/motions/services/mo
 @Component({
     selector: 'os-motion-export-dialog',
     templateUrl: './motion-export-dialog.component.html',
-    styleUrls: ['./motion-export-dialog.component.scss']
+    styleUrls: ['./motion-export-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MotionExportDialogComponent implements OnInit {
     /**

client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/custom-button-styles.scss';
+
 .grid-wrapper {
     display: grid;
     width: 100%;
@@ -38,27 +40,3 @@
     min-width: 60px;
     margin-right: 10px;
 }
-
-// smaller and closer mat icon buttons.
-// use on button-tags
-// TODO: Somehow does not apply when in style.scss
-.small-mat-icon-button {
-    $size: 20px;
-    margin: 0 5px;
-    position: relative;
-    width: $size;
-    height: $size;
-
-    ::ng-deep .mat-icon {
-        position: absolute;
-        left: 0;
-        top: 0;
-        line-height: normal;
-        width: $size;
-        height: $size;
-    }
-
-    .material-icons {
-        font-size: $size;
-    }
-}

client/src/app/site/projector/components/message-controls/message-controls.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/custom-button-styles.scss';
+
 .grid-wrapper {
     display: grid;
     width: 100%;
@@ -19,27 +21,3 @@
     grid-area: buttons;
     text-align: right;
 }
-
-// smaller and closer mat icon buttons.
-// use on button-tags
-// TODO: Somehow does not apply when in style.scss
-.small-mat-icon-button {
-    $size: 20px;
-    margin: 0 5px;
-    position: relative;
-    width: $size;
-    height: $size;
-
-    ::ng-deep .mat-icon {
-        position: absolute;
-        left: 0;
-        top: 0;
-        line-height: normal;
-        width: $size;
-        height: $size;
-    }
-
-    .material-icons {
-        font-size: $size;
-    }
-}

client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss

@@ -8,10 +8,6 @@ form {
     margin-top: 10px;
 }
 
-::ng-deep mat-card {
-    margin: 0;
-}
-
 .no-markup {
     /* Do not let the a tag ruin the projector */
     color: inherit;

client/src/app/site/site.component.html

@@ -90,10 +90,6 @@
                 </a>
             </span>
             <mat-divider></mat-divider>
-            <a [@navItemAnim] *ngIf="vp.isMobile" mat-list-item routerLinkActive="active" (click)="toggleSearch()">
-                <mat-icon>search</mat-icon>
-                <span translate>Search</span>
-            </a>
             <a
                 [@navItemAnim]
                 mat-list-item

client/src/app/site/site.component.ts

@@ -211,15 +211,6 @@ export class SiteComponent extends BaseComponent implements OnInit {
         this.sideNav.toggle();
     }
 
-    /**
-     * Shows the `super-search.component`,
-     * only if the user is on a mobile device.
-     */
-    public toggleSearch(): void {
-        this.overlayService.showSearch();
-        this.mobileAutoCloseNav();
-    }
-
     /**
      * Automatically close the navigation in while navigating in mobile mode
      */

client/src/app/site/users/components/user-detail/user-detail.component.html

@@ -53,9 +53,11 @@
     </mat-menu>
 </os-head-bar>
 
+<div class="content-container">
     <mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
         <ng-container *ngIf="editUser; then editView; else showView"></ng-container>
     </mat-card>
+</div>
 
 <ng-template #editView>
     <form [formGroup]="personalInfoForm" *ngIf="user" (keydown)="onKeyDown($event)">

client/src/app/site/users/components/user-detail/user-detail.component.scss

@@ -1,28 +1,24 @@
+@import '~assets/styles/media-queries.scss';
+
+@include set-breakpoint-upper(xs) {
     .form70 {
-    ::ng-deep {
         width: 70%;
     }
-}
 
     .form37 {
-    ::ng-deep {
         width: 37%;
     }
-}
 
     .form25 {
-    ::ng-deep {
         width: 25%;
     }
-}
 
     .form16 {
-    ::ng-deep {
         width: 16%;
     }
 }
 
-.force-min-with {
+.force-min-width {
     min-width: 110px;
 }
 

client/src/app/slides/core/projector-message/projector-message-slide.component.scss

@@ -23,7 +23,7 @@
         min-height: 20px;
         line-height: normal;
 
-        ::ng-deep p {
+        p {
             margin: 0 0 10px;
         }
     }

client/src/app/slides/core/projector-message/projector-message-slide.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 import { BaseSlideComponent } from 'app/slides/base-slide-component';
@@ -7,7 +7,8 @@ import { ProjectorMessageSlideData } from './projector-message-slide-data';
 @Component({
     selector: 'os-projector-message-slide',
     templateUrl: './projector-message-slide.component.html',
-    styleUrls: ['./projector-message-slide.component.scss']
+    styleUrls: ['./projector-message-slide.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ProjectorMessageSlideComponent extends BaseSlideComponent<ProjectorMessageSlideData> {
     public constructor(private sanitizer: DomSanitizer) {

client/src/app/slides/motions/motion/motion-slide.component.scss

@@ -1,6 +1,6 @@
 @import '~assets/styles/motion-styles-common';
 
-::ng-deep .paragraph-context {
+.paragraph-context {
     opacity: 0.5;
 }
 
@@ -46,7 +46,7 @@
 }
 
 /* override the absolute position of outside linenumbers on motion slide */
-:host ::ng-deep .motion-text {
+.motion-text {
     &.line-numbers-outside {
         .os-line-number {
             &:after {

client/src/app/slides/motions/motion/motion-slide.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -19,7 +19,8 @@ import { MotionSlideObjChangeReco } from './motion-slide-obj-change-reco';
 @Component({
     selector: 'os-motion-slide',
     templateUrl: './motion-slide.component.html',
-    styleUrls: ['./motion-slide.component.scss']
+    styleUrls: ['./motion-slide.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MotionSlideComponent extends BaseMotionSlideComponent<MotionSlideData>
     implements IBaseScaleScrollSlideComponent<MotionSlideData> {

client/src/assets/styles/custom-button-styles.scss

@@ -0,0 +1,22 @@
+// smaller and closer mat icon buttons.
+// use on button-tags
+.small-mat-icon-button {
+    $size: 20px;
+    margin: 0 5px;
+    position: relative;
+    width: $size;
+    height: $size;
+
+    .mat-icon {
+        position: absolute;
+        left: 0;
+        top: 0;
+        line-height: normal;
+        width: $size;
+        height: $size;
+    }
+
+    .material-icons {
+        font-size: $size;
+    }
+}

client/src/assets/styles/motion-styles-common.scss

@@ -1,8 +1,4 @@
-/* Line numbers */
-// :host ::ng-deep is needed as this styling applies to the motion html that is injected using innerHTML,
-// which doesn't have the [ngcontent]-attributes necessary for regular styles.
-// An alternative approach (in case ::ng-deep gets removed) might be to change the view encapsulation.
-:host ::ng-deep .motion-text {
+.motion-text {
     ins,
     .insert {
         color: green;
@@ -115,7 +111,7 @@
     }
 }
 
-:host ::ng-deep .amendment-view {
+.amendment-view {
     .os-split-after {
         margin-bottom: 0;
     }

client/src/assets/styles/poll-common-styles.scss

@@ -0,0 +1,63 @@
+.poll-result {
+    .poll-progress-bar {
+        height: 5px;
+        width: 100%;
+        .mat-progress-bar {
+            height: 100%;
+            width: 100%;
+        }
+    }
+    .poll-progress {
+        display: flex;
+        margin-bottom: 15px;
+        margin-top: 15px;
+        mat-icon {
+            min-width: 40px;
+            margin-right: 5px;
+        }
+        .progress-container {
+            width: 85%;
+        }
+    }
+}
+
+.poll-progress-bar {
+    mat-progress-bar {
+        &.progress-green {
+            .mat-progress-bar-fill::after {
+                background-color: #4caf50;
+            }
+            .mat-progress-bar-buffer {
+                background-color: #d5ecd5;
+            }
+        }
+        &.progress-red {
+            .mat-progress-bar-fill::after {
+                background-color: #f44336;
+            }
+            .mat-progress-bar-buffer {
+                background-color: #fcd2cf;
+            }
+        }
+        &.progress-yellow {
+            .mat-progress-bar-fill::after {
+                background-color: #ffc107;
+            }
+            .mat-progress-bar-buffer {
+                background-color: #fff0c4;
+            }
+        }
+    }
+}
+
+.poll-quorum-line {
+    display: flex;
+    vertical-align: bottom;
+    .mat-button {
+        padding: 1px;
+    }
+}
+
+.main-nav-color {
+    color: rgba(0, 0, 0, 0.54);
+}

client/src/styles.scss

@@ -328,7 +328,7 @@ mat-card {
     }
 }
 .os-form-card {
-    width: 770px;
+    max-width: 770px;
     margin-top: 20px !important;
     margin-left: auto !important;
     margin-right: auto !important;
@@ -825,10 +825,14 @@ button.mat-menu-item.selected {
     font-size: 16px;
 }
 
-.ellipsis-overflow {
+.one-line {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+.ellipsis-overflow {
+    @extend .one-line;
     padding-right: 3px;
     margin-right: 3px;
 }