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

Fix colour theme visibility

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/14/head
trivernis 2 years ago
parent 5b00bd7a5b
commit e5a071cfad
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
9 changed files with 83 additions and 88 deletions
Show Stats Download Patch File Download Diff File

6
mediarepo-ui/angular.json
Unescape Escape View File

@ -37,7 +37,8 @@
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
"src/styles.scss",
"src/material-theme-correction.scss"
],
"scripts": []
},
@ -110,7 +111,8 @@
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
"src/styles.scss",
"src/material-theme-correction.scss"
],
"scripts": []
}

5
mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss
Unescape Escape View File

@ -1,3 +1,8 @@
@import "src/colors";
.image-full-view-inner {
background-color: $background-darker-05;
}
.image-drag-container, .image-scale-container {
height: 100%;

26
mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss
Unescape Escape View File

@ -1,26 +0,0 @@
@use 'sass:map';
@use '../../../../../../node_modules/@angular/material/index' as mat;
@mixin color($theme) {
$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary');
mat-card.selected {
background-color: mat.get-color-from-palette($primary-palette, 'darker');
}
}
@mixin typography($theme) {
}
@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);
}
}

7
mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss
Unescape Escape View File

@ -1,8 +1,15 @@
@import "src/colors";
mat-card {
height: calc(100% - 32px);
width: calc(100% - 32px);
user-select: none;
cursor: pointer;
background: $background-lighter-05;
}
mat-card.selected {
background: $primary-darker-10;
}
mat-card-content {

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

@ -1,36 +0,0 @@
@use 'sass:map';
@use '../../../../../../node_modules/@angular/material/index' 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');
.tag-input-item {
background-color: dimgrey;
border-radius: 1em;
}
mat-form-field:focus {
background-color: dimgrey;
}
#sort-button {
background-color: darken(dimgrey, 5);
}
}
@mixin typography($theme) {
}
@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);
}
}

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

@ -1,3 +1,5 @@
@import "src/colors";
.full-width {
width: auto;
min-width: 100%;
@ -7,7 +9,6 @@
width: calc(100% - 64px);
height: 2.7em;
padding: 0.5em 0;
box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset;
overflow-x: auto;
overflow-y: hidden;
}
@ -93,12 +94,12 @@
}
.selectable-tag:hover {
background-color: darken(dimgrey, 10);
background-color: $background-lighter-05;
}
.selectable-tag:active {
cursor: pointer;
background-color: darken(dimgrey, 5);
background-color: $background-lighter-10;
}
cdk-virtual-scroll-viewport {
@ -137,3 +138,16 @@ mat-divider {
margin-left: 1em;
margin-right: 1em;
}
.tag-input-item {
background-color: $background-lighter-10;
border-radius: 1em;
}
mat-form-field:focus {
background-color: dimgrey;
}
#sort-button {
background-color: $background-lighter-10;
}

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

@ -21,8 +21,9 @@ $warn-chill: #fcd349;
$text: #FFF;
$text-darker-10: darken($text, 10%);
$background: #424242;
$background-lighter-05: lighten($background, 4%);
$background: darken(#424242, 5%);
$background-darker-05: darken($background, 5%);
$background-lighter-05: lighten($background, 5%);
$background-lighter-10: lighten($background, 10%);
// specifics

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

@ -0,0 +1,44 @@
@import "colors";
.mat-form-field.mat-focused .mat-form-field-label {
color: $primary-lighter-30;
}
.mat-input-element {
caret-color: $primary-lighter-20;
}
.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
background: rgba(255, 255, 255, 0.05);
color: $primary-lighter-20;
}
.mat-dialog-container {
background: $background;
}
.mat-drawer {
background: $background;
}
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
background: $background;
}
// scrollbar
::-webkit-scrollbar {
width: 15px;
height: 15px;
background: $background-darker-05;
}
::-webkit-scrollbar-thumb {
background: $primary-darker-10;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: $primary;
border-radius: 5px;
}

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

@ -1,14 +1,12 @@
@use 'sass:map';
@use "@angular/material" as mat;
@use 'src/app/app.component-theme' as app;
@use 'app/components/shared/file/file-card/file-card.component-theme' as file-card;
@use 'app/components/shared/sidebar/file-search/file-search.component-theme' as file-search;
@include mat.core();
$theme: mat.define-dark-theme((
color: (
primary: mat.define-palette(mat.$purple-palette, 700, 500, 800),
primary: mat.define-palette(mat.$purple-palette, 500, 300, 800),
accent: mat.define-palette(mat.$green-palette, A200, A100, A400),
warn: mat.define-palette(mat.$red-palette),
background: mat.define-palette(mat.$blue-grey-palette)
@ -18,28 +16,14 @@ $theme: mat.define-dark-theme((
)
));
$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary');
$accent-pallette: map.get($color-config, 'accent');
$background-pallette: map.get($color-config, 'background');
$warn-palette: map.get($color-config, 'warn');
::-webkit-scrollbar {
width: 15px;
height: 15px;
background: #272727;
}
::-webkit-scrollbar-thumb {
background: mat.get-color-from-palette($primary-palette, 'darker');
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: mat.get-color-from-palette($primary-palette);
}
@include mat.all-component-themes($theme);
@include app.theme($theme);
@include file-card.theme($theme);
@include file-search.theme($theme);

Write Preview
Loading…
Cancel
Save