Merge pull request #4387 from GabrielInTheWorld/change-dark-theme
Changes the primary palette for dark theme
This commit is contained in:
Emanuel Schütze
GitHub
commit
3e2b201ee2
|
|
@ -8,7 +8,9 @@
|
|||
<mat-checkbox [checked]="isProjectorSelected(projector)" (change)="toggleProjector(projector)">
|
||||
{{ projector.name | translate }}
|
||||
</mat-checkbox>
|
||||
<span *ngIf="isProjectedOn(projector)" class="right"> <mat-icon>videocam</mat-icon> </span>
|
||||
<span *ngIf="isProjectedOn(projector)" class="right">
|
||||
<mat-icon matTooltip="{{ 'Is already projected' | translate }}" matTooltipPosition="above">videocam</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
.projector-inactive {
|
||||
background-color: white !important;
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
mat-icon {
|
||||
color: grey !important;
|
||||
@mixin os-projector-button-style($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$contrast: map-get($primary, contrast);
|
||||
|
||||
.mat-mini-fab.projector-inactive {
|
||||
color: mat-color($contrast, A200) !important;
|
||||
background-color: mat-color($contrast, 500) !important;
|
||||
}
|
||||
|
||||
.mat-menu-item.projector-active,
|
||||
.projector-active > .mat-icon {
|
||||
color: mat-color($primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** TODO: Take this from the accent color. Make the hovering visible */
|
||||
|
||||
.projector-active {
|
||||
background-color: #03a9f4;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
button.mat-menu-item.projector-active:hover {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
|
||||
<div *ngIf="configItem.inputType === 'boolean'">
|
||||
<mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox>
|
||||
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
|
||||
<mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
|
||||
<div class="error" *ngIf="error">{{ error }}</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<div *ngIf="configItem.inputType === 'text'">
|
||||
<mat-form-field>
|
||||
<textarea rows="10" matInput placeholder="{{ configItem.label | translate }}" [value]="translatedValue"></textarea>
|
||||
<div class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</div>
|
||||
<mat-hint class="hint" *ngIf="configItem.helpText && !error">{{ configItem.helpText | translate }}</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,18 +13,6 @@ input[type='color'] {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Custom hint and error classes for the checkbox. Same values as .mat-hint and -mat-error */
|
||||
.hint,
|
||||
.error {
|
||||
font-size: 75%;
|
||||
}
|
||||
.hint {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.config-field-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ table {
|
|||
.hint-text {
|
||||
padding-top: 30px;
|
||||
padding-left: 25px;
|
||||
background-color: #ffffff; // put in theme later
|
||||
}
|
||||
|
||||
.new-group-form {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,22 @@
|
|||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.projected .mat-icon {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
//custom table header for search button, filtering and more. Used in ListViews
|
||||
.custom-table-header {
|
||||
background: mat-color($background, background);
|
||||
}
|
||||
|
||||
/* Custom hint and error classes. Same values as .mat-hint and -mat-error */
|
||||
.hint,
|
||||
.error {
|
||||
font-size: 75%;
|
||||
display: block;
|
||||
}
|
||||
.error {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,42 @@
|
|||
$openslides-primary: mat-palette($mat-light-blue, 500, 100, 700);
|
||||
$openslides-accent: mat-palette($mat-orange, 700, 300, 900);
|
||||
$openslides-warn: mat-palette($mat-red, 600, 500, 700);
|
||||
// Defines the primary palette using the dark theme
|
||||
$openslides-primary-red: (
|
||||
50 : #f8e4e5,
|
||||
100 : #edbbbd,
|
||||
200 : #e18e91,
|
||||
300 : #d56065,
|
||||
400 : #cc3e44,
|
||||
500 : #c31c23,
|
||||
600 : #bd191f,
|
||||
700 : #b5141a,
|
||||
800 : #ae1115,
|
||||
900 : #a1090c,
|
||||
A100 : #ffcece,
|
||||
A200 : #ff9b9b,
|
||||
A400 : #ff6869,
|
||||
A700 : #ff4e50,
|
||||
contrast: (
|
||||
50 : #000000,
|
||||
100 : #000000,
|
||||
200 : #000000,
|
||||
300 : #000000,
|
||||
400 : #ffffff,
|
||||
500 : #ffffff,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100: #404040,
|
||||
A200 : #303030,
|
||||
A400 : #262626,
|
||||
A700 : #1a1a1a
|
||||
)
|
||||
);
|
||||
|
||||
// TODO: /projectors/detail/*
|
||||
|
||||
$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
|
||||
$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
|
||||
$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
|
||||
|
||||
$openslides-dark-theme: mat-dark-theme(
|
||||
$openslides-primary,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
/** Import the component-related stylesheets 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';
|
||||
|
||||
/** fonts */
|
||||
@import './assets/styles/fonts.scss';
|
||||
|
|
@ -19,6 +20,7 @@
|
|||
@mixin openslides-components-theme($theme) {
|
||||
@include os-site-theme($theme);
|
||||
@include os-components-style($theme);
|
||||
@include os-projector-button-style($theme);
|
||||
/** More components are added here */
|
||||
}
|
||||
|
||||
|
|
@ -505,10 +507,6 @@ button.mat-menu-item.selected {
|
|||
color: rgba(0, 0, 0, 0.87) !important;
|
||||
}
|
||||
|
||||
.projected {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
/* TODO: move to site.component.scss-theme.scss (does not work currently) */
|
||||
|
||||
/* make the .user-menu expansion panel look like the nav-toolbar above */
|
||||
|
|
|
|||
Loading…
Reference in New Issue