Merge pull request #5416 from tsiegleauq/solarized-dark-theme

Enhance dark theme
This commit is contained in:
Sean 2020-06-16 13:25:43 +02:00 committed by GitHub
commit bc1373b696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 442 additions and 466 deletions

View File

@ -12,7 +12,7 @@ export class ThemeService {
/**
* Constant, that describes the default theme class.
*/
public static DEFAULT_THEME = 'openslides-theme';
public static DEFAULT_THEME = 'openslides-default-light-theme';
/**
* Constant path of the logo with dark colors for bright themes.
@ -54,7 +54,7 @@ export class ThemeService {
this.currentTheme = theme;
const classList = document.getElementsByTagName('body')[0].classList; // Get the classlist of the body.
const toRemove = Array.from(classList).filter((item: string) => item.includes('theme'));
const toRemove = Array.from(classList).filter((item: string) => item.includes('-theme'));
if (toRemove.length) {
classList.remove(...toRemove); // Remove all old themes.
}

View File

@ -5,7 +5,7 @@
<button
type="button"
mat-button
color="primary"
color=""
(click)="openExternal()"
matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
>
@ -78,7 +78,7 @@
(click)="enterConversation()"
matTooltip="{{ 'Enter live conference' | translate }}"
>
<mat-icon color="primary">meeting_room</mat-icon>
<mat-icon color="">meeting_room</mat-icon>
</button>
<mat-icon *ngIf="enableJitsi && !isAccessPermitted" class="indicator">no_meeting_room</mat-icon>

View File

@ -115,7 +115,7 @@
type="button"
mat-raised-button
(click)="onUploadButton()"
color="primary"
color="accent"
[disabled]="uploadList.data.length === 0"
>
<span>{{ 'Upload' | translate }}</span>

View File

@ -45,7 +45,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button osAutofocus (click)="onProject()" color="primary">{{ 'Project' | translate }}</button>
<button mat-button osAutofocus (click)="onProject()" color="accent">{{ 'Project' | translate }}</button>
<button mat-button (click)="onAddToPreview()">{{ 'Add to queue' | translate }}</button>
<button mat-button (click)="onCancel()">{{ 'Cancel' | translate }}</button>
</mat-dialog-actions>

View File

@ -17,7 +17,7 @@
(click)="toggleUserIsPresent()"
*ngIf="allowSelfSetPresent"
>
<mat-icon [color]="user.is_present ? 'primary' : ''" class="menu-icon">
<mat-icon [color]="user.is_present ? 'accent' : ''" class="menu-icon">
{{ user.is_present ? 'check_box' : 'check_box_outline_blank' }}
</mat-icon>
<span class="menu-text">{{ 'Present' | translate }}</span>

View File

@ -41,7 +41,7 @@
{{ assignment.getListTitle() }}
</div>
<mat-chip-list class="ellipsis-overflow" *ngIf="vp.isMobile">
<mat-chip color="primary" selected>
<mat-chip color="" selected>
{{ assignment.phaseString | translate }}
</mat-chip>
</mat-chip-list>

View File

@ -18,7 +18,7 @@
<button
type="submit"
mat-raised-button
color="primary"
color="accent"
class="submit-button"
[disabled]="newPasswordForm.invalid"
>

View File

@ -18,7 +18,7 @@
<button
type="submit"
mat-raised-button
color="primary"
color="accent"
class="submit-button"
[disabled]="resetPasswordForm.invalid"
>

View File

@ -294,7 +294,7 @@
type="submit"
mat-button
[disabled]="!fileEditForm.valid"
color="primary"
color="accent"
(click)="onSaveEditedFile(fileEditForm.value)"
>
<span>{{ 'Save' | translate }}</span>
@ -326,7 +326,7 @@
</form>
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [disabled]="!newDirectoryForm.valid" color="primary" [mat-dialog-close]="true">
<button type="submit" mat-button [disabled]="!newDirectoryForm.valid" color="accent" [mat-dialog-close]="true">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">
@ -353,7 +353,7 @@
</mat-form-field>
</div>
<div mat-dialog-actions>
<button type="submit" mat-button color="primary" [mat-dialog-close]="true">
<button type="submit" mat-button color="accent" [mat-dialog-close]="true">
<span>{{ 'Move' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -107,7 +107,7 @@
</form>
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [disabled]="!editForm.valid" color="primary" (click)="save()">
<button type="submit" mat-button [disabled]="!editForm.valid" color="accent" (click)="save()">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -209,7 +209,7 @@
</form>
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [disabled]="!blockEditForm.valid" color="primary" (click)="saveBlock()">
<button type="submit" mat-button [disabled]="!blockEditForm.valid" color="accent" (click)="saveBlock()">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -135,7 +135,7 @@
</h1>
<button
mat-icon-button
color="primary"
color="accent"
(click)="toggleFavorite()"
matTooltip="{{ 'Mark as personal favorite' | translate }}"
>
@ -215,7 +215,7 @@
<button
type="button"
mat-stroked-button
color="primary"
color="accent"
(click)="support()"
*ngIf="perms.isAllowed('support', motion)"
>
@ -229,7 +229,7 @@
*ngIf="perms.isAllowed('unsupport', motion)"
(click)="unsupport()"
mat-stroked-button
color="primary"
color="accent"
>
<mat-icon>thumb_down</mat-icon>
{{ 'Unsupport' | translate }}

View File

@ -407,7 +407,7 @@
</div>
<div mat-dialog-actions>
<button type="submit" mat-button color="primary" [mat-dialog-close]="infoDialog">
<button type="submit" mat-button color="accent" [mat-dialog-close]="infoDialog">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -142,7 +142,7 @@
type="submit"
[disabled]="dialogData.value === '' && !dialogData.allowEmpty"
mat-button
color="primary"
color="accent"
[mat-dialog-close]="{ action: 'update', value: dialogData.value }"
>
<span>{{ 'Save' | translate }}</span>

View File

@ -44,7 +44,7 @@
<button
type="submit"
mat-button
color="primary"
color="accent"
[disabled]="newWorkflowTitle === ''"
[mat-dialog-close]="newWorkflowTitle"
>

View File

@ -104,7 +104,7 @@
<!-- Action buttons -->
<div mat-dialog-actions>
<button mat-button type="button" color="primary" [mat-dialog-close]="exportForm.value">
<button mat-button type="button" color="accent" [mat-dialog-close]="exportForm.value">
<span>{{ 'Export' | translate }}</span>
</button>
<button mat-button type="button" (click)="onCloseClick()">

View File

@ -30,7 +30,7 @@
<button
type="submit"
mat-button
color="primary"
color="accent"
[mat-dialog-close]="countdownForm.value"
[disabled]="!countdownForm.valid"
>

View File

@ -12,7 +12,7 @@
<button
type="submit"
mat-button
color="primary"
color="accent"
[mat-dialog-close]="messageForm.value"
[disabled]="!messageForm.valid"
>

View File

@ -181,7 +181,7 @@
<!-- Actions -->
<div mat-dialog-actions>
<mat-divider></mat-divider>
<button type="submit" mat-button color="primary">
<button type="submit" mat-button color="accent">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -22,7 +22,7 @@
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [disabled]="!createForm.valid" color="primary" [mat-dialog-close]="true">
<button type="submit" mat-button [disabled]="!createForm.valid" color="accent" [mat-dialog-close]="true">
<span>{{ 'Create' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">

View File

@ -7,6 +7,7 @@
$warn: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$is-dark-theme: map-get($theme, is-dark);
os-site {
/* main background color */
@ -41,10 +42,10 @@
/** style the active link */
.active {
mat-icon {
color: mat-color($primary);
color: mat-color(if($is-dark-theme, $accent, $primary));
}
span {
color: mat-color($primary);
color: mat-color(if($is-dark-theme, $accent, $primary));
}
}
}

View File

@ -49,7 +49,7 @@
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [mat-dialog-close]="true" color="primary">
<button type="submit" mat-button [mat-dialog-close]="true" color="accent">
<span>{{ 'Save' | translate }}</span>
</button>
<button type="button" mat-button [mat-dialog-close]="false">

View File

@ -77,7 +77,7 @@
type="submit"
mat-button
[disabled]="!groupForm.valid"
color="primary"
color="accent"
(click)="saveGroup(groupForm.value)"
>
<span>{{ 'Save' | translate }}</span>

View File

@ -295,7 +295,7 @@
<button
type="submit"
mat-button
color="primary"
color="accent"
[mat-dialog-close]="{
groups_id: infoDialog.groups_id,
gender: infoDialog.gender,

View File

@ -0,0 +1,32 @@
$openslides-blue: (
50: #e6eff2,
100: #c1d6e0,
200: #98bbcb,
300: #6fa0b6,
400: #508ba6,
500: #317796,
600: #2c6f8e,
700: #256483,
800: #1f5a79,
900: #134768,
A100: #9fd7ff,
A200: #6cc2ff,
A400: #39acff,
A700: #1fa2ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

View File

@ -0,0 +1,32 @@
$openslides-cyan: (
50: #e5f4f3,
100: #bfe3e0,
200: #95d0cc,
300: #6abdb7,
400: #4aafa7,
500: #2aa198,
600: #259990,
700: #1f8f85,
800: #19857b,
900: #0f746a,
A100: #a7fff5,
A200: #74ffef,
A400: #41ffe9,
A700: #28ffe6,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

View File

@ -0,0 +1,32 @@
$openslides-grey: (
50: #eee8d5,
100: #93a1a1,
200: #93a1a1,
300: #839496,
400: #657b83,
500: #586e75,
600: #586e75,
700: #586e75,
800: #073642,
900: #002b36,
A100: #99b5c8,
A200: #65a2ce,
A400: #3d93d1,
A700: #268bd2,
contrast: (
50: #002b36,
100: #002b36,
200: #002b36,
300: #002b36,
400: #002b36,
500: #fdf6e3,
600: #fdf6e3,
700: #fdf6e3,
800: #fdf6e3,
900: #fdf6e3,
A100: #002b36,
A200: #002b36,
A400: #002b36,
A700: #002b36
)
);

View File

@ -30,9 +30,3 @@ $openslides-green: (
A700: #000000
)
);
$openslides-primary: mat-palette($openslides-green);
$openslides-accent: mat-palette($mat-amber);
$openslides-warn: mat-palette($mat-red);
$openslides-green-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,32 @@
$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
)
);

View File

@ -0,0 +1,152 @@
/** Imports the material-design-theming */
@import '~@angular/material/theming';
@include mat-core();
/** NGrid theme */
@import '~@pebula/ngrid/theming';
$narrow-spacing: (
spacing: $pbl-spacing-theme-narrow
);
/** Import brand theme */
@import './assets/styles/themes/default-dark.scss';
@import './assets/styles/themes/default-light.scss';
@import './assets/styles/themes/green-dark.scss';
@import './assets/styles/themes/green-light.scss';
@import './assets/styles/themes/red-dark.scss';
@import './assets/styles/themes/red-light.scss';
@import './assets/styles/themes/solarized-dark.scss';
/** Global component style definition */
@import './assets/styles/global-components-style.scss';
/** Import the component-related style sheets here */
@import './app/site/site.component.scss-theme.scss';
@import './app/shared/components/projector-button/projector-button.component.scss';
@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
@import './app/shared/components/global-spinner/global-spinner.component.scss';
@import './app/shared/components/tile/tile.component.scss';
@import './app/shared/components/block-tile/block-tile.component.scss';
@import './app/shared/components/icon-container/icon-container.component.scss';
@import './app/site/common/components/start/start.component.scss';
@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
@import './app/site/common/components/super-search/super-search.component.scss';
@import './app/shared/components/rounded-input/rounded-input.component.scss';
@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
@import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
@import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
@import './app/shared/components/banner/banner.component.scss-theme.scss';
@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
@import './app/site/assignments/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
@import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
@import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
@import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
/** Mix the component-related style-rules. Every single custom style goes here */
@mixin openslides-components-theme($theme) {
@include os-site-theme($theme);
@include os-components-style($theme);
@include os-projector-button-style($theme);
@include os-list-of-speakers-style($theme);
@include os-sorting-tree-style($theme);
@include os-global-spinner-theme($theme);
@include os-tile-style($theme);
@include os-mediafile-list-theme($theme);
@include os-super-search-style($theme);
@include os-rounded-input-style($theme);
@include os-meta-text-block-style($theme);
@include os-config-field-style($theme);
@include os-amendment-create-wizard-style($theme);
@include os-motion-detail-diff-style($theme);
@include os-banner-style($theme);
@include os-motion-poll-style($theme);
@include os-motion-poll-detail-style($theme);
@include os-assignment-poll-detail-style($theme);
@include os-progress-snack-bar-style($theme);
@include os-jitsi-theme($theme);
@include os-list-view-table-theme($theme);
@include os-user-statistics-style($theme);
@include os-login-wrapper-theme($theme);
}
.openslides-default-light-theme {
@include angular-material-theme($openslides-default-light);
@include openslides-components-theme($openslides-default-light);
$ngrid-material-theme: pbl-light-theme($openslides-default-light);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-default-dark-theme {
@include angular-material-theme($openslides-default-dark);
@include openslides-components-theme($openslides-default-dark);
$ngrid-material-theme: pbl-dark-theme($openslides-default-dark);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-red-light-theme {
@include angular-material-theme($openslides-red-light);
@include openslides-components-theme($openslides-red-light);
$ngrid-material-theme: pbl-light-theme($openslides-red-light);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-red-dark-theme {
@include angular-material-theme($openslides-red-dark);
@include openslides-components-theme($openslides-red-dark);
$ngrid-material-theme: pbl-dark-theme($openslides-red-dark);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-green-light-theme {
@include angular-material-theme($openslides-green-light);
@include openslides-components-theme($openslides-green-light);
$ngrid-material-theme: pbl-light-theme($openslides-green-light);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-green-dark-theme {
@include angular-material-theme($openslides-green-dark);
@include openslides-components-theme($openslides-green-dark);
$ngrid-material-theme: pbl-dark-theme($openslides-green-dark);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-solarized-dark-theme {
@include angular-material-theme($openslides-solarized-dark);
@include openslides-components-theme($openslides-solarized-dark);
$ngrid-material-theme: pbl-dark-theme($openslides-solarized-dark);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
/**
* Custom configuration for light themes
*/
[class^="openslides-"][class*="-light-theme"] {
.logo-container {
img.dark {
display: none;
}
img.default {
display: inherit;
}
}
}
/**
* Custom configuration for dark themes
*/
[class^="openslides-"][class*="-dark-theme"] {
.logo-container {
img.dark {
display: inherit;
}
img.default {
display: none;
}
}
}

View File

@ -1,45 +0,0 @@
// 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,
$openslides-accent,
$openslides-warn
);

View File

@ -1,75 +0,0 @@
$openslides-developer-primary: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$openslides-developer-accent: (
50 : #f4f9e1,
100 : #e5f0b3,
200 : #d3e781,
300 : #c1dd4e,
400 : #b4d528,
500 : #a7ce02,
600 : #9fc902,
700 : #96c201,
800 : #8cbc01,
900 : #7cb001,
A100 : #f2ffda,
A200 : #e1ffa7,
A400 : #cfff74,
A700 : #c6ff5a,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$openslides-primary: mat-palette($openslides-developer-primary);
$openslides-accent: mat-palette($openslides-developer-accent);
$openslides-warn: mat-palette($mat-pink);
$openslides-developer-theme: mat-dark-theme(
$openslides-primary,
$openslides-accent,
$openslides-warn
);

View File

@ -1,40 +0,0 @@
$openslides-primary-dark: (
50 : #e0e0e0,
100 : #b3b3b3,
200 : #808080,
300 : #4d4d4d,
400 : #262626,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #a6a6a6,
A200 : #8c8c8c,
A400 : #737373,
A700 : #666666,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
$openslides-primary: mat-palette($openslides-primary-dark, 500, 700, 900);
$openslides-general-theme: mat-light-theme(
$openslides-primary,
$openslides-primary,
$openslides-primary
);

View File

@ -1,75 +0,0 @@
// define a real custom palette (using http://mcg.mbitson.com)
$openslides-blue: (
50: #e6eff2,
100: #c1d6e0,
200: #98bbcb,
300: #6fa0b6,
400: #508ba6,
500: #317796,
600: #2c6f8e,
700: #256483,
800: #1f5a79,
900: #134768,
A100: #9fd7ff,
A200: #6cc2ff,
A400: #39acff,
A700: #1fa2ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
// Generate paletes using: https://material.io/design/color/
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
$openslides-primary: mat-palette($openslides-blue);
$openslides-accent: mat-palette($mat-light-blue);
$openslides-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
// Create Sass color vars (for using in scss files).
// This will be set dynamically with the selecting theme
// $os-primary: mat-color($openslides-primary);
// $os-accent: mat-color($openslides-accent);
// $os-warn: mat-color($openslides-warn);
$os-outline: mat-color($mat-grey, 300);
$os-background: mat-color($mat-grey, 100);
/** This is the workaround to set a custom background-color
* In the first step the color must be merged, in order to have to a map.
* The components will get a value from this map.
*/
$background: map-get($openslides-theme, background);
$background: map_merge(
$background,
(
background: $os-background
)
);
/**
* Merge the theme with the custom-background.
*/
$openslides-theme: map_merge(
$openslides-theme,
(
background: $background
)
);

View File

@ -0,0 +1,8 @@
@import './assets/styles/color-palettes/os-blue';
$openslides-primary: mat-palette($openslides-blue);
$openslides-accent: mat-palette($mat-light-blue);
$openslides-warn: mat-palette($mat-red);
$openslides-default-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,38 @@
@import './assets/styles/color-palettes/os-blue';
// Generate paletes using: https://material.io/design/color/
// default values for mat-palette: $default: 500, $lighter: 100, $darker: 700.
$openslides-primary: mat-palette($openslides-blue);
$openslides-accent: mat-palette($mat-light-blue);
$openslides-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$openslides-default-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
// Create Sass color vars (for using in scss files).
// This will be set dynamically with the selecting theme
$os-outline: mat-color($mat-grey, 300);
$os-background: mat-color($mat-grey, 100);
/** This is the workaround to set a custom background-color
* In the first step the color must be merged, in order to have to a map.
* The components will get a value from this map.
*/
$background: map-get($openslides-default-light, background);
$background: map_merge(
$background,
(
background: $os-background
)
);
/**
* Merge the theme with the custom-background.
*/
$openslides-default-light: map_merge(
$openslides-default-light,
(
background: $background
)
);

View File

@ -0,0 +1,7 @@
@import './assets/styles/color-palettes/os-green.scss';
$openslides-primary: mat-palette($openslides-green);
$openslides-accent: mat-palette($mat-amber);
$openslides-warn: mat-palette($mat-red);
$openslides-green-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,7 @@
@import './assets/styles/color-palettes/os-green.scss';
$openslides-primary: mat-palette($openslides-green);
$openslides-accent: mat-palette($mat-amber);
$openslides-warn: mat-palette($mat-red);
$openslides-green-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,7 @@
@import './assets/styles/color-palettes/os-red.scss';
$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-red-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,7 @@
@import './assets/styles/color-palettes/os-red.scss';
$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-red-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -0,0 +1,8 @@
@import './assets/styles/color-palettes/os-cyan.scss';
@import './assets/styles/color-palettes/os-gray.scss';
$openslides-primary: mat-palette($openslides-grey);
$openslides-accent: mat-palette($openslides-cyan);
$openslides-warn: mat-palette($mat-orange);
$openslides-solarized-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);

View File

@ -1,195 +1,19 @@
/** Imports the material-design-theming */
@import '~@angular/material/theming';
@include mat-core();
/** Import brand theme */
@import './assets/styles/openslides-general-theme.scss';
@import './assets/styles/openslides-theme.scss';
@import './assets/styles/openslides-dark-theme.scss';
@import './assets/styles/openslides-green-theme.scss';
@import './assets/styles/openslides-developer-theme.scss';
/** Import the component-related style sheets here */
@import './app/site/site.component.scss-theme.scss';
@import './assets/styles/global-components-style.scss';
@import './app/shared/components/projector-button/projector-button.component.scss';
@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
@import './app/shared/components/global-spinner/global-spinner.component.scss';
@import './app/shared/components/tile/tile.component.scss';
@import './app/shared/components/block-tile/block-tile.component.scss';
@import './app/shared/components/icon-container/icon-container.component.scss';
@import './app/site/common/components/start/start.component.scss';
@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
@import './app/site/common/components/super-search/super-search.component.scss';
@import './app/shared/components/rounded-input/rounded-input.component.scss';
@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
@import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
@import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
@import './app/shared/components/banner/banner.component.scss-theme.scss';
@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
@import './app/site/assignments/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
@import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
@import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
@import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
/** theming */
@import './assets/styles/component-themes.scss';
/** fonts */
@import './assets/styles/fonts.scss';
@import '~material-icon-font/dist/Material-Icons.css';
/** NGrid */
@import '~@pebula/ngrid/theming';
$narrow-spacing: (
spacing: $pbl-spacing-theme-narrow
);
/** Videjs */
/** Videojs */
@import '~video.js/dist/video-js.css';
/** Mix the component-related style-rules */
@mixin openslides-components-theme($theme) {
@include os-site-theme($theme);
@include os-components-style($theme);
@include os-projector-button-style($theme);
@include os-list-of-speakers-style($theme);
@include os-sorting-tree-style($theme);
@include os-global-spinner-theme($theme);
@include os-tile-style($theme);
@include os-mediafile-list-theme($theme);
@include os-super-search-style($theme);
@include os-rounded-input-style($theme);
@include os-meta-text-block-style($theme);
@include os-config-field-style($theme);
@include os-amendment-create-wizard-style($theme);
@include os-motion-detail-diff-style($theme);
@include os-banner-style($theme);
@include os-motion-poll-style($theme);
@include os-motion-poll-detail-style($theme);
@include os-assignment-poll-detail-style($theme);
@include os-progress-snack-bar-style($theme);
@include os-jitsi-theme($theme);
@include os-list-view-table-theme($theme);
@include os-user-statistics-style($theme);
@include os-user-statistics-style($theme);
@include os-login-wrapper-theme($theme);
}
/** Load projector specific SCSS values */
@import './assets/styles/projector.scss';
/** Load global scss variables and device mixing */
@import './assets/styles/variables.scss';
.general-theme {
@include os-global-spinner-theme($openslides-general-theme);
}
/** Define the classes to switch between themes */
.openslides-theme {
@include angular-material-theme($openslides-theme);
@include openslides-components-theme($openslides-theme);
$ngrid-material-theme: pbl-light-theme($openslides-theme);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
.logo-container {
img.dark {
display: none;
}
img.default {
display: inherit;
}
}
}
.openslides-dark-theme,
.openslides-developer-dark-theme {
color: white;
.logo-container {
img.dark {
display: inherit;
}
img.default {
display: none;
}
}
}
.openslides-dark-theme {
@include angular-material-theme($openslides-dark-theme);
@include openslides-components-theme($openslides-dark-theme);
$ngrid-material-theme: pbl-dark-theme($openslides-dark-theme);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-green-theme {
@include angular-material-theme($openslides-green-theme);
@include openslides-components-theme($openslides-green-theme);
$ngrid-material-theme: pbl-light-theme($openslides-green-theme);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
}
.openslides-developer-dark-theme {
@include angular-material-theme($openslides-developer-theme);
@include openslides-components-theme($openslides-developer-theme);
$ngrid-material-theme: pbl-dark-theme($openslides-developer-theme);
@include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
* {
font-family: monospace !important;
color: mat-color(map-get($openslides-developer-theme, accent));
}
os-site {
.active mat-icon,
.active span {
color: mat-color(map-get($openslides-developer-theme, accent));
}
}
.custom-table-header {
background: #000;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mat-toolbar.sticky-toolbar {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
height: 64px;
}
.mat-drawer-inner-container {
background: #000;
}
.mat-drawer-inner-container > * {
background: #000 !important;
z-index: 3;
.os-site.nav-toolbar {
background: #000;
}
}
.mat-drawer-content > * {
background: #000;
}
mat-icon {
font-family: 'Material Icons' !important;
}
.mat-mini-fab.projector-active {
background-color: mat-color(map-get($openslides-developer-theme, warn));
}
.mce-ico {
font-family: 'tinymce', Arial !important;
}
}
.pbl-ngrid-cell {
.fill {
position: relative;
@ -236,6 +60,7 @@ $narrow-spacing: (
* {
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
}
.mat-toolbar h2,
.mat-dialog-title {
font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
@ -268,6 +93,7 @@ h1 {
font-weight: normal;
font-size: 36px;
}
h3 {
font-weight: 500;
margin-bottom: 0;
@ -330,7 +156,7 @@ b,
.red-warning-text {
color: red;
mat-icon {
.mat-icon {
color: red !important;
}
}
@ -369,6 +195,7 @@ b,
visibility: hidden;
}
}
.os-form-card {
max-width: 770px;
margin-top: 20px !important;
@ -392,6 +219,7 @@ b,
width: 100%;
}
}
.projector-card .mat-form-field-infix {
width: 290px;
}
@ -452,7 +280,7 @@ b,
margin-right: 0px;
}
mat-icon {
.mat-icon {
vertical-align: text-bottom;
margin-right: 2px;
}
@ -481,7 +309,7 @@ b,
}
/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
mat-paginator {
.mat-paginator {
min-height: 800px;
}
@ -516,15 +344,10 @@ mat-paginator {
flex: 1 1 auto;
}
mat-expansion-panel {
.mat-expansion-panel {
border-radius: 0 !important;
}
/* This destroys the projector button in list views using extension panels. */
/*mat-panel-title mat-icon {
padding-right: 30px;
}*/
.mat-menu-panel {
max-width: initial !important;
}
@ -598,30 +421,39 @@ button.mat-menu-item.selected {
.spacer-top-3 {
margin-top: 3px !important;
}
.spacer-top-5 {
margin-top: 5px !important;
}
.spacer-top-10 {
margin-top: 10px !important;
}
.spacer-top-20 {
margin-top: 20px !important;
}
.spacer-bottom-10 {
margin-bottom: 10px !important;
}
.spacer-bottom-20 {
margin-bottom: 20px !important;
}
.spacer-bottom-40 {
margin-bottom: 40px !important;
}
.spacer-left-10 {
margin-left: 10px;
}
.spacer-left-20 {
margin-left: 20px;
}
.spacer-left-50 {
margin-left: 50px !important;
}
@ -631,6 +463,7 @@ button.mat-menu-item.selected {
width: 24px !important;
height: 24px !important;
}
.icon24 {
font-size: 16px;
margin-top: -8px;
@ -648,10 +481,12 @@ button.mat-menu-item.selected {
line-height: 24px;
}
}
.title {
padding-top: 20px;
padding-bottom: 20px;
}
.mat-radio-button {
padding-right: 20px;
}
@ -935,6 +770,7 @@ button.mat-menu-item.selected {
scrollbar-width: 5px;
scrollbar-color: #666666;
}
.h-scroller::-webkit-scrollbar {
width: 5px;
height: 5px;

View File

@ -151,16 +151,34 @@ def get_config_variables():
yield ConfigVariable(
name="openslides_theme",
default_value="openslides-theme",
default_value="openslides-default-light",
input_type="choice",
label="OpenSlides Theme",
choices=(
{"value": "openslides-theme", "display_name": "OpenSlides Default"},
{"value": "openslides-dark-theme", "display_name": "OpenSlides Dark"},
{"value": "openslides-green-theme", "display_name": "OpenSlides Green"},
{
"value": "openslides-developer-dark-theme",
"display_name": "OpenSlides Developer",
"value": "openslides-default-light-theme",
"display_name": "OpenSlides Default",
},
{
"value": "openslides-default-dark-theme",
"display_name": "OpenSlides Dark",
},
{"value": "openslides-red-light-theme", "display_name": "OpenSlides Red"},
{
"value": "openslides-red-dark-theme",
"display_name": "OpenSlides Red Dark",
},
{
"value": "openslides-green-light-theme",
"display_name": "OpenSlides Green",
},
{
"value": "openslides-green-dark-theme",
"display_name": "OpenSlides Green Dark",
},
{
"value": "openslides-solarized-dark-theme",
"display_name": "OpenSlides Solarized",
},
),
weight=154,