From d354461784bf934b7829b20e1f29b55b10257b25 Mon Sep 17 00:00:00 2001
From: GabrielMeyer <meyergabriel@live.de>
Date: Tue, 27 Aug 2019 12:22:41 +0200
Subject: [PATCH] Cleans up the stylesheets a little bit

- Removes all `::ng-deep`
- Merges some re-used styles to one stylesheet
- The icon to open the global search will always be seen in the headbar
---
 .../head-bar/head-bar.component.html          |   2 +-
 .../head-bar/head-bar.component.scss          |  49 ++++---
 .../components/head-bar/head-bar.component.ts |   5 +-
 .../rounded-input/rounded-input.component.ts  |   2 +-
 .../filter-menu/filter-menu.component.scss    |  16 +-
 .../filter-menu/filter-menu.component.ts      |   5 +-
 .../item-info-dialog.component.html           |   6 +-
 .../item-info-dialog.component.scss           |   8 +-
 .../assignment-poll.component.html            |   2 +-
 .../assignment-poll.component.scss            | 131 +++++------------
 .../assignment-poll.component.ts              |   5 +-
 .../super-search/super-search.component.html  |   1 +
 .../mediafile-list.component.scss             |   5 -
 .../category-list.component.scss              |   4 -
 .../amendment-create-wizard.component.html    |   2 +-
 .../amendment-create-wizard.component.scss    | 138 +++++++++---------
 .../amendment-create-wizard.component.ts      |   5 +-
 .../manage-submitters.component.scss          |   2 +-
 .../motion-detail-diff.component.html         |  36 +++--
 .../motion-detail-diff.component.scss         |  13 +-
 .../motion-detail/motion-detail.component.ts  |   5 +-
 .../motion-poll/motion-poll.component.html    |  80 +++++-----
 .../motion-poll/motion-poll.component.scss    |  62 +-------
 .../motion-poll/motion-poll.component.ts      |   5 +-
 .../motion-export-dialog.component.html       |   2 +-
 .../motion-export-dialog.component.scss       |  22 +--
 .../motion-export-dialog.component.ts         |   5 +-
 .../countdown-controls.component.scss         |  26 +---
 .../message-controls.component.scss           |  26 +---
 .../projector-list-entry.component.scss       |   4 -
 client/src/app/site/site.component.html       |   4 -
 client/src/app/site/site.component.ts         |   9 --
 .../user-detail/user-detail.component.html    |   8 +-
 .../user-detail/user-detail.component.scss    |  20 +--
 .../projector-message-slide.component.scss    |   2 +-
 .../projector-message-slide.component.ts      |   5 +-
 .../motion/motion-slide.component.scss        |   4 +-
 .../motions/motion/motion-slide.component.ts  |   5 +-
 .../assets/styles/custom-button-styles.scss   |  22 +++
 .../assets/styles/motion-styles-common.scss   |   8 +-
 .../src/assets/styles/poll-common-styles.scss |  63 ++++++++
 client/src/styles.scss                        |   8 +-
 42 files changed, 369 insertions(+), 463 deletions(-)
 create mode 100644 client/src/assets/styles/custom-button-styles.scss
 create mode 100644 client/src/assets/styles/poll-common-styles.scss

diff --git a/client/src/app/shared/components/head-bar/head-bar.component.html b/client/src/app/shared/components/head-bar/head-bar.component.html
index 822383572..a80da1c80 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.html
+++ b/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>
 
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.scss b/client/src/app/shared/components/head-bar/head-bar.component.scss
index f6292214d..9c896bae0 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.scss
+++ b/client/src/app/shared/components/head-bar/head-bar.component.scss
@@ -9,39 +9,40 @@
     top: 0;
     z-index: 5;
     position: sticky;
-}
 
-.toolbar-left {
-    display: flex;
-    max-width: calc(100% - 100px);
-    button {
-        margin: 12px 0;
-    }
-    .toolbar-left-text {
-        margin-left: 10px;
-        width: 100%;
-        overflow: hidden;
+    .toolbar-left {
+        display: flex;
+        max-width: calc(100% - 100px);
+        button {
+            margin: 12px 0;
+        }
+        .toolbar-left-text {
+            margin-left: 10px;
+            width: 100%;
+            overflow: hidden;
 
-        ::ng-deep .title-slot {
-            h2 {
+            .title-slot {
                 margin: 16px 0;
                 display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                h2 {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
         }
     }
-}
-.toolbar-centered {
-    margin: auto;
-    vertical-align: baseline;
-}
 
-.toolbar-right {
-    display: flex;
-    ::ng-deep .extra-controls-slot {
+    .toolbar-centered {
+        margin: auto;
+        vertical-align: baseline;
+    }
+
+    .toolbar-right {
         display: flex;
+        .extra-controls-slot {
+            display: flex;
+        }
     }
 }
 
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.ts b/client/src/app/shared/components/head-bar/head-bar.component.ts
index ee89160b8..6873f2235 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/shared/components/rounded-input/rounded-input.component.ts b/client/src/app/shared/components/rounded-input/rounded-input.component.ts
index 73e8c256f..903ef16f5 100644
--- a/client/src/app/shared/components/rounded-input/rounded-input.component.ts
+++ b/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`.
diff --git a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
index 191b24a66..95b0e822f 100644
--- a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
+++ b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
@@ -32,12 +32,14 @@ mat-divider {
     margin-left: 20px;
 }
 
-// adds breaks to mat-checkboxes with long labels
-::ng-deep .mat-checkbox-layout {
-    white-space: normal !important;
-}
+mat-checkbox {
+    // adds breaks to mat-checkboxes with long labels
+    .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;
+    // rather than center the checkbox, put the checkbox in the first line
+    .mat-checkbox-inner-container {
+        margin-top: 3px;
+    }
 }
diff --git a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.ts b/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.ts
index ca6729e79..dc3a1a5b5 100644
--- a/client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html b/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
index 0aee2a67b..0f0532415 100644
--- a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
+++ b/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) -->
diff --git a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.scss b/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.scss
index fe0684637..317c76252 100644
--- a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.scss
+++ b/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%;
-        }
+    .mat-form-field {
+        width: 100%;
     }
 }
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
index b0c306548..1f1a27e35 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
+++ b/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
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
index e0615a7d6..7e088701d 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
@@ -1,109 +1,48 @@
-::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-main-content {
+        padding-top: 10px;
+    }
 
-.poll-result {
-    .poll-progress-bar {
-        height: 5px;
-        width: 100%;
-        .mat-progress-bar {
-            height: 100%;
-            width: 100%;
+    .poll-grid {
+        display: grid;
+        grid-gap: 5px;
+        padding: 5px;
+        grid-template-columns: 30px auto 250px 150px;
+        .candidate-name {
+            word-wrap: break-word;
         }
     }
-    .poll-progress {
-        display: flex;
-        margin-bottom: 15px;
-        margin-top: 15px;
+
+    .poll-menu {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .poll-quorum {
+        text-align: right;
+        margin-right: 10px;
         mat-icon {
-            min-width: 40px;
-            margin-right: 5px;
-        }
-        .progress-container {
-            width: 85%;
+            vertical-align: middle;
+            font-size: 100%;
         }
     }
-}
 
-.main-nav-color {
-    color: rgba(0, 0, 0, 0.54);
-}
+    .top-aligned {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 
-.poll-quorum-line {
-    display: flex;
-    vertical-align: bottom;
-    .mat-button {
-        padding: 1px;
+    .wide {
+        width: 90%;
+    }
+
+    .hint-form {
+        margin-top: 20px;
     }
 }
-
-.poll-grid {
-    display: grid;
-    grid-gap: 5px;
-    padding: 5px;
-    grid-template-columns: 30px auto 250px 150px;
-    .candidate-name {
-        word-wrap: break-word;
-    }
-}
-
-.poll-menu {
-    position: absolute;
-    top: 0;
-    right: 0;
-}
-
-.poll-quorum {
-    text-align: right;
-    margin-right: 10px;
-    mat-icon {
-        vertical-align: middle;
-        font-size: 100%;
-    }
-}
-
-.top-aligned {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.wide {
-    width: 90%;
-}
-
-.hint-form {
-    margin-top: 20px;
-}
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
index 7b76a530d..bc505ebd6 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/common/components/super-search/super-search.component.html b/client/src/app/site/common/components/super-search/super-search.component.html
index fef81c728..43196eafb 100644
--- a/client/src/app/site/common/components/super-search/super-search.component.html
+++ b/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"
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
index 549404585..aa00316c1 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
+++ b/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;
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
index 12df1e302..f5efea718 100644
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
+++ b/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;
 }
diff --git a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
index 6c820f220..50e365df7 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
+++ b/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"
diff --git a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
index 8eda01463..7f205d1a3 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
+++ b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
@@ -1,85 +1,77 @@
-.paragraph-row {
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    padding: 20px 0;
-
-    &:hover {
-        background-color: #eee;
-    }
-    &.active {
-        cursor: default;
-        background-color: #ccc;
-        &:hover {
-            background-color: #ccc;
-        }
-    }
-
-    .paragraph-select {
-        flex-basis: 50px;
-        flex-grow: 0;
-
+.amendment-create-wizard-wrapper {
+    .paragraph-row {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .paragraph-text {
-        flex: 1;
-    }
-}
+        flex-direction: row;
+        cursor: pointer;
+        padding: 20px 0;
 
-:host ::ng-deep .motion-text {
-    p,
-    ul,
-    ol,
-    li,
-    blockquote {
-        margin-top: 0;
-        margin-bottom: 0;
+        &:hover {
+            background-color: #eee;
+        }
+        &.active {
+            cursor: default;
+            background-color: #ccc;
+            &:hover {
+                background-color: #ccc;
+            }
+        }
+
+        .paragraph-select {
+            flex-basis: 50px;
+            flex-grow: 0;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .paragraph-text {
+            flex: 1;
+        }
     }
 
-    li {
-        padding-bottom: 10px;
-    }
+    .motion-text {
+        p,
+        ul,
+        ol,
+        li,
+        blockquote {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
 
-    ol,
-    ul {
-        margin-left: 15px;
-        margin-bottom: 0;
-    }
+        li {
+            padding-bottom: 10px;
+        }
 
-    padding-left: 40px;
-    position: relative;
+        ol,
+        ul {
+            margin-left: 15px;
+            margin-bottom: 0;
+        }
 
-    .os-line-number {
-        display: inline-block;
-        font-size: 0;
-        line-height: 0;
-        width: 22px;
-        height: 22px;
-        position: absolute;
-        left: 0;
-        padding-right: 55px;
+        padding-left: 40px;
+        position: relative;
 
-        &:after {
-            content: attr(data-line-number);
+        .os-line-number {
+            display: inline-block;
+            font-size: 0;
+            line-height: 0;
+            width: 22px;
+            height: 22px;
             position: absolute;
-            top: 13px;
-            vertical-align: top;
-            color: gray;
-            font-size: 12px;
-            font-weight: normal;
+            left: 0;
+            padding-right: 55px;
+
+            &:after {
+                content: attr(data-line-number);
+                position: absolute;
+                top: 13px;
+                vertical-align: top;
+                color: gray;
+                font-size: 12px;
+                font-weight: normal;
+            }
         }
     }
 }
-
-.wide-form {
-    textarea {
-        height: 25vh;
-    }
-
-    ::ng-deep {
-        width: 100%;
-    }
-}
diff --git a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts
index 6d652cbd7..fc4b0ee0f 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss b/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss
index c9cdece4b..3447bfc73 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss
+++ b/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;
 
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
index 2634b4d55..232883fd8 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
+++ b/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"
-                 [class.line-numbers-none]="isLineNumberingNone()"
-                 [class.line-numbers-inline]="isLineNumberingInline()"
-                 [class.line-numbers-outside]="isLineNumberingOutside()"
-                 [attr.data-change-id]="changedTitle.getChangeId()"
+            <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>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss
index 44f738980..cf751bde2 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss
@@ -101,12 +101,9 @@
     }
 }
 
-::ng-deep .mat-menu-content {
-    .active-indicator {
-        font-size: 18px;
-        color: green !important;
-        margin-left: 10px;
-        margin-right: 0;
-        margin-top: 3px;
-    }
+.active-indicator {
+    font-size: 18px;
+    margin-left: 10px;
+    margin-right: 0;
+    margin-top: 3px;
 }
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts
index 419e3807d..b8d6672f8 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
index 8b3a9fa3a..d0a6295a7 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
@@ -4,49 +4,51 @@
         <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
     </ng-container>
     <ng-container class="meta-text-block-content">
-        <div *ngIf="poll.has_votes" class="poll-result">
-            <div *ngFor="let key of pollValues">
-                <div class="poll-progress" *ngIf="poll[key] !== undefined">
-                    <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
-                        {{ getIcon(key) }}
-                    </mat-icon>
-                    <div class="progress-container">
-                        <div>
-                            <span>{{ getLabel(key) | translate }}</span
-                            >:&nbsp;{{ getNumber(key) }}
-                            <span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
-                        </div>
-                        <div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
-                            <mat-progress-bar
-                                mode="determinate"
-                                [value]="getPercent(key)"
-                                [ngClass]="pollService.getProgressBarColor(key)"
-                            >
-                            </mat-progress-bar>
+        <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">
+                        <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
+                            {{ getIcon(key) }}
+                        </mat-icon>
+                        <div class="progress-container">
+                            <div>
+                                <span>{{ getLabel(key) | translate }}</span
+                                >:&nbsp;{{ getNumber(key) }}
+                                <span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
+                            </div>
+                            <div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
+                                <mat-progress-bar
+                                    mode="determinate"
+                                    [value]="getPercent(key)"
+                                    [ngClass]="pollService.getProgressBarColor(key)"
+                                >
+                                </mat-progress-bar>
+                            </div>
                         </div>
                     </div>
+                    <hr *ngIf="key === 'abstain'" flex />
                 </div>
-                <hr *ngIf="key === 'abstain'" flex />
-            </div>
-            <!-- quorum -->
-            <div *osPerms="'motions.can_manage'">
-                <div class="poll-quorum-line" *ngIf="!abstractPoll">
-                    <span>
-                        <span *ngIf="yesQuorum">
-                            <mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
-                            <mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
+                <!-- quorum -->
+                <div *osPerms="'motions.can_manage'">
+                    <div class="poll-quorum-line" *ngIf="!abstractPoll">
+                        <span>
+                            <span *ngIf="yesQuorum">
+                                <mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
+                                <mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
+                            </span>
+                            <button mat-button [matMenuTriggerFor]="majorityMenu">
+                                &nbsp;<span>{{ getQuorumLabel() | translate }}</span> &nbsp;<span
+                                    *ngIf="majorityChoice !== 'disabled'"
+                                    >({{ yesQuorum }})</span
+                                >
+                            </button>
+                            <span *ngIf="majorityChoice !== 'disabled'">
+                                <span *ngIf="quorumYesReached" translate> reached.</span>
+                                <span *ngIf="!quorumYesReached" translate> not reached.</span>
+                            </span>
                         </span>
-                        <button mat-button [matMenuTriggerFor]="majorityMenu">
-                            &nbsp;<span>{{ getQuorumLabel() | translate }}</span> &nbsp;<span
-                                *ngIf="majorityChoice !== 'disabled'"
-                                >({{ yesQuorum }})</span
-                            >
-                        </button>
-                        <span *ngIf="majorityChoice !== 'disabled'">
-                            <span *ngIf="quorumYesReached" translate> reached.</span>
-                            <span *ngIf="!quorumYesReached" translate> not reached.</span>
-                        </span>
-                    </span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.scss b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.scss
index b24fe7fa4..bf93cef22 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.scss
+++ b/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';
 }
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts
index e62cbc17e..64b71b9dd 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
index 7b39459eb..fe8b4c603 100644
--- a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
+++ b/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">
diff --git a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss
index 1c1d77582..50a0f0aa7 100644
--- a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss
+++ b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss
@@ -1,16 +1,16 @@
-.toggle-group-head {
-    margin-bottom: 0;
-}
+.motion-export-dialog-wrapper {
+    .toggle-group-head {
+        margin-bottom: 0;
+    }
 
-h1 {
-    margin: 0;
-}
+    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;
         }
     }
 }
diff --git a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.ts b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.ts
index 4c700fc91..b6b173ba8 100644
--- a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.ts
+++ b/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 {
     /**
diff --git a/client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss b/client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss
index af1015596..753fd0ef4 100644
--- a/client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss
+++ b/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;
-    }
-}
diff --git a/client/src/app/site/projector/components/message-controls/message-controls.component.scss b/client/src/app/site/projector/components/message-controls/message-controls.component.scss
index 33710aeba..c0b6e07e2 100644
--- a/client/src/app/site/projector/components/message-controls/message-controls.component.scss
+++ b/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;
-    }
-}
diff --git a/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss b/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss
index 044266278..c3f92052d 100644
--- a/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss
+++ b/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;
diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 0c2e47f68..a1ce2b3ad 100644
--- a/client/src/app/site/site.component.html
+++ b/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
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index 1633b4e04..1ff31b82f 100644
--- a/client/src/app/site/site.component.ts
+++ b/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
      */
diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.html b/client/src/app/site/users/components/user-detail/user-detail.component.html
index def128a6b..a3bfc02c6 100644
--- a/client/src/app/site/users/components/user-detail/user-detail.component.html
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.html
@@ -53,9 +53,11 @@
     </mat-menu>
 </os-head-bar>
 
-<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 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)">
diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.scss b/client/src/app/site/users/components/user-detail/user-detail.component.scss
index b5e2c3895..8cb719f73 100644
--- a/client/src/app/site/users/components/user-detail/user-detail.component.scss
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.scss
@@ -1,28 +1,24 @@
-.form70 {
-    ::ng-deep {
+@import '~assets/styles/media-queries.scss';
+
+@include set-breakpoint-upper(xs) {
+    .form70 {
         width: 70%;
     }
-}
 
-.form37 {
-    ::ng-deep {
+    .form37 {
         width: 37%;
     }
-}
 
-.form25 {
-    ::ng-deep {
+    .form25 {
         width: 25%;
     }
-}
 
-.form16 {
-    ::ng-deep {
+    .form16 {
         width: 16%;
     }
 }
 
-.force-min-with {
+.force-min-width {
     min-width: 110px;
 }
 
diff --git a/client/src/app/slides/core/projector-message/projector-message-slide.component.scss b/client/src/app/slides/core/projector-message/projector-message-slide.component.scss
index ecfd91d33..99731a634 100644
--- a/client/src/app/slides/core/projector-message/projector-message-slide.component.scss
+++ b/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;
         }
     }
diff --git a/client/src/app/slides/core/projector-message/projector-message-slide.component.ts b/client/src/app/slides/core/projector-message/projector-message-slide.component.ts
index f9350b6b3..94ed37161 100644
--- a/client/src/app/slides/core/projector-message/projector-message-slide.component.ts
+++ b/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) {
diff --git a/client/src/app/slides/motions/motion/motion-slide.component.scss b/client/src/app/slides/motions/motion/motion-slide.component.scss
index eaf6ec233..c3f8742fa 100644
--- a/client/src/app/slides/motions/motion/motion-slide.component.scss
+++ b/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 {
diff --git a/client/src/app/slides/motions/motion/motion-slide.component.ts b/client/src/app/slides/motions/motion/motion-slide.component.ts
index c5b55bfca..64fbdbdb2 100644
--- a/client/src/app/slides/motions/motion/motion-slide.component.ts
+++ b/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> {
diff --git a/client/src/assets/styles/custom-button-styles.scss b/client/src/assets/styles/custom-button-styles.scss
new file mode 100644
index 000000000..6abe1c63a
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/client/src/assets/styles/motion-styles-common.scss b/client/src/assets/styles/motion-styles-common.scss
index 5b16fdffe..38423cad3 100644
--- a/client/src/assets/styles/motion-styles-common.scss
+++ b/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;
     }
diff --git a/client/src/assets/styles/poll-common-styles.scss b/client/src/assets/styles/poll-common-styles.scss
new file mode 100644
index 000000000..9e37c7a1d
--- /dev/null
+++ b/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);
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 0177c351e..19dd804d8 100644
--- a/client/src/styles.scss
+++ b/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;
 }