Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change background color to a more blueish grey

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/14/head
trivernis 2 years ago
parent fbe516a7df
commit bb725f6dfb
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
12 changed files with 87 additions and 62 deletions
Show Stats Download Patch File Download Diff File

40
mediarepo-ui/src/app/app.component-theme.scss
Unescape Escape View File

@ -1,40 +0,0 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin color($theme) {
$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
body {
background-color: darken(#303030, 5);
color: white
}
.warn {
background-color: mat.get-color-from-palette($warn-palette);
color: white
}
}
@mixin typography($theme) {
// Get the typography config from the theme.
$typography-config: mat.get-typography-config($theme);
body {
font-family: mat.font-family($typography-config);
}
}
@mixin theme($theme) {
$color-config: mat.get-color-config($theme);
@if $color-config != null {
@include color($theme);
}
$typography-config: mat.get-typography-config($theme);
@if $typography-config != null {
@include typography($theme);
}
}

12
mediarepo-ui/src/app/app.component.scss
Unescape Escape View File

@ -1,5 +1,16 @@
@import "src/colors";
:host, ::ng-deep body {
font-family: $font-family;
background-color: $background;
color: white
}
::ng-deep .warn {
background-color: $warn;
color: white
}
::ng-deep .mat-button-wrapper > ng-icon {
font-size: 26px;
}
@ -16,3 +27,4 @@
background-color: $warn;
color: $text;
}

2
mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html
Unescape Escape View File

@ -6,7 +6,7 @@
{{message}}
</div>
<div *ngIf="this.allowCancel" class="busy-dialog-actions" mat-dialog-actions>
<button (click)="this.dialogRef.close(false)" mat-flat-button>
<button (click)="this.dialogRef.close(false)" color="primary" mat-stroked-button>
Cancel
</button>
</div>

4
mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss
Unescape Escape View File

@ -1,5 +1,7 @@
@import "src/colors";
.selectable.selected {
background-color: #5c5c5c;
background-color: $background-lighter-10;
}
body {

1
mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss
Unescape Escape View File

@ -45,6 +45,7 @@
width: 100%;
height: 100%;
border-top: 2px solid $background-darker-05;
background-color: $background;
.file-item {
width: 100%;

25
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
Unescape Escape View File

@ -85,22 +85,22 @@
cursor: pointer;
user-select: none;
font-size: 1.2em;
transition-duration: 0.1s;
transition-duration: 0.2s;
width: 100%;
background-color: $background-lighter-05;
app-tag-item {
margin: auto auto auto 0.25em;
&:hover {
background-color: $background-lighter-10;
}
}
.selectable-tag:hover {
background-color: $background-lighter-10;
}
&:active {
cursor: pointer;
background-color: $background;
}
.selectable-tag:active {
cursor: pointer;
background-color: $background;
app-tag-item {
margin: auto auto auto 0.25em;
}
}
cdk-virtual-scroll-viewport {
@ -143,6 +143,11 @@ mat-divider {
.tag-input-item {
background-color: $background-lighter-10;
border-radius: 1em;
transition-duration: 0.2s;
&:hover {
background-color: $background-lighter-15;
}
}
mat-form-field:focus {

8
mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss
Unescape Escape View File

@ -1,8 +1,10 @@
@import "src/colors";
mat-list {
height: 100%;
width: 100%;
display: block;
background-color: #353535;
background-color: $background;
padding: 0;
border-radius: 0.25em;
}
@ -22,7 +24,7 @@ mat-list-item.or-filter-list-item {
}
.selected {
background-color: #5c5c5c;
background-color: $background-lighter-10;
}
app-selectable {
@ -31,5 +33,5 @@ app-selectable {
}
.or-combinator {
color: #7dff70;
color: $accent-lighter-10;
}

4
mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss
Unescape Escape View File

@ -6,4 +6,8 @@
background-color: $background-lighter-10;
text-overflow: ellipsis;
overflow: hidden;
&:hover {
background-color: $background-lighter-15;
}
}

5
mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts
Unescape Escape View File

@ -1,10 +1,11 @@
import {Component, Input} from "@angular/core";
import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
import {Tag} from "../../../../../api/models/Tag";
@Component({
selector: "app-tag-item",
templateUrl: "./tag-item.component.html",
styleUrls: ["./tag-item.component.scss"]
styleUrls: ["./tag-item.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TagItemComponent {

8
mediarepo-ui/src/colors.scss
Unescape Escape View File

@ -22,11 +22,17 @@ $warn-chill: #fcd349;
$text: #FFF;
$text-darker-10: darken($text, 10%);
$background: darken(#424242, 5%);
$background: darken(#373a46, 10%);
$background-darker-05: darken($background, 5%);
$background-darker-10: darken($background, 10%);
$background-lighter-05: lighten($background, 5%);
$background-lighter-10: lighten($background, 10%);
$background-lighter-15: lighten($background, 15%);
// specifics
$tag-namespace: $accent-lighter-10;
// fonts
$typography-config: mat.get-typography-config($theme);
$font-family: mat.font-family($typography-config);

38
mediarepo-ui/src/material-theme-correction.scss
Unescape Escape View File

@ -14,17 +14,51 @@
}
.mat-dialog-container {
background: $background;
background: $background-lighter-05;
}
.mat-drawer {
background: $background;
background: $background !important;
}
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
background: $background;
}
.mat-form-field-flex {
background: $background-lighter-05;
}
.mat-form-field-appearance-fill .mat-form-field-flex {
background: $background-lighter-05;
}
.mat-autocomplete-panel, mat-option, .mat-menu-panel {
background: $background-lighter-05;
}
button .mat-flat-button {
background: $background-lighter-05;
}
mat-option {
&.mat-selected {
background: $background-lighter-10 !important;
}
&:hover {
background: darken($background-lighter-10, 1%) !important;
}
}
mat-toolbar.mat-toolbar {
background: $background-darker-05;
}
.mat-card {
background: $background-lighter-10;
}
// scrollbar
::-webkit-scrollbar {

2
mediarepo-ui/src/styles.scss
Unescape Escape View File

@ -1,6 +1,5 @@
@use 'sass:map';
@use "@angular/material" as mat;
@use 'src/app/app.component-theme' as app;
@include mat.core();
@ -25,5 +24,4 @@ $warn-palette: map.get($color-config, 'warn');
@include mat.all-component-themes($theme);
@include app.theme($theme);

Write Preview
Loading…
Cancel
Save