CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3213 styles: Dark mode fixes

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2019-12-17 10:48:43 +01:00
parent a6e68c7176
commit b44a4ae464
5 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addon/mod/forum/components/post/post.scss
View File

@ -2,6 +2,10 @@ ion-app.app-root addon-mod-forum-post .addon-mod_forum-post {
background-color: $white; background-color: $white;
border-bottom: 1px solid $list-md-border-color; border-bottom: 1px solid $list-md-border-color;
@include darkmode() {
background-color: $core-dark-item-bg-color;
}
.addon-forum-star { .addon-forum-star {
color: $core-star-color; color: $core-star-color;
} }

2
src/addon/mod/forum/pages/discussion/discussion.scss
View File

@ -2,7 +2,7 @@ ion-app.app-root page-addon-mod-forum-discussion {
.highlight .card-header .item { .highlight .card-header .item {
background-color: $gray-lighter; background-color: $gray-lighter;
@include darkmode() { @include darkmode() {
background-color: $black; background-color: $gray-dark;
} }
} }

19
src/addon/mod/wiki/components/index/index.scss
View File

@ -4,6 +4,11 @@ $addon-mod-wiki-toc-title-color: $gray-darker !default;
$addon-mod-wiki-toc-border-color: $gray-dark !default; $addon-mod-wiki-toc-border-color: $gray-dark !default;
$addon-mod-wiki-toc-background-color: $gray-light !default; $addon-mod-wiki-toc-background-color: $gray-light !default;
$addon-mod-wiki-dark-toc-title-color: $white !default;
$addon-mod-wiki-dark-toc-border-color: $gray-dark !default;
$addon-mod-wiki-dark-toc-background-color: $gray-darker !default;
$addon-mod-wiki-dark-newentry-link-color: $red-light !default;
ion-app.app-root addon-mod-wiki-index { ion-app.app-root addon-mod-wiki-index {
background-color: $white; background-color: $white;
@include darkmode() { @include darkmode() {
@ -28,6 +33,17 @@ ion-app.app-root addon-mod-wiki-index {
a { a {
color: $link-color; color: $link-color;
} }
@include darkmode() {
border: 1px solid $addon-mod-wiki-dark-toc-border-color;
background: $addon-mod-wiki-dark-toc-background-color;
p {
color: $core-dark-text-color !important;
}
a {
color: $core-dark-link-color;
}
}
margin: 16px; margin: 16px;
padding: 8px; padding: 8px;
} }
@ -55,6 +71,9 @@ ion-app.app-root addon-mod-wiki-index {
.wiki_newentry { .wiki_newentry {
color: $addon-mod-wiki-newentry-link-color; color: $addon-mod-wiki-newentry-link-color;
font-style: italic; font-style: italic;
@include darkmode() {
color: $addon-mod-wiki-dark-newentry-link-color !important;
}
} }
/* Hide edit section links */ /* Hide edit section links */

4
src/app/app.scss
View File

@ -500,7 +500,7 @@ ion-app.app-root {
@include darkmode() { @include darkmode() {
ion-select.core-button-select, ion-select.core-button-select,
.core-button-select { .core-button-select {
background-color: $core-dark-item-divider-bg-color; background-color: $core-dark-item-bg-color;
&.select-md, &.select-md,
@ -509,7 +509,7 @@ ion-app.app-root {
&.button-ios, &.button-ios,
&.select-wp, &.select-wp,
&.button-wp { &.button-wp {
background: $core-dark-item-divider-bg-color; background: $core-dark-item-bg-color;
} }
} }
} }

7
src/theme/dark.scss
View File

@ -3,8 +3,8 @@ $core-dark-text-secondary-color: $gray-light !default;
$core-dark-link-color: $blue-light !default; $core-dark-link-color: $blue-light !default;
$core-dark-item-bg-color: $gray-darker !default; $core-dark-item-bg-color: $gray-darker !default;
$core-dark-item-divider-bg-color: $black !default; $core-dark-item-divider-bg-color: $gray-dark !default;
$core-dark-background-color: $gray-dark !default; $core-dark-background-color: $black !default;
// Login. // Login.
$core-dark-login-page-background-color: radial-gradient(white, $gray-dark) !default; $core-dark-login-page-background-color: radial-gradient(white, $gray-dark) !default;
@ -31,7 +31,8 @@ ion-app.app-root .ion-page {
.item, .item,
.item-select, .item-select,
ion-card, ion-card,
.card-header { .card-header,
.card-content {
color: $core-dark-text-color; color: $core-dark-text-color;
background-color: $core-dark-item-bg-color; background-color: $core-dark-item-bg-color;