liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: admin rendering UI + dark mode

Browse Source
This commit is contained in:
Nick
2019-08-04 23:53:21 -04:00
parent 0f9ddf1e5d
commit c4629419d3
35 changed files with 232 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/themes/default/components/page.vue
View File

@@ -2,7 +2,7 @@
v-app(v-scroll='upBtnScroll', :dark='darkMode')
nav-header
v-navigation-drawer(
:class='darkMode ? `grey darken-5` : `primary`'
:class='darkMode ? `grey darken-4-d4` : `primary`'
dark
app
clipped
@@ -12,7 +12,7 @@
:right='$vuetify.rtl'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar(:color='darkMode ? `grey darken-5` : `primary`', :items='sidebar')
nav-sidebar(:color='darkMode ? `grey darken-4-d4` : `primary`', :items='sidebar')
v-fab-transition
v-btn(
@@ -57,7 +57,7 @@
v-layout(row)
v-flex.page-col-sd(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp', style='margin-top: -90px;')
v-card(v-if='toc.length')
.overline.pa-5.pb-0(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') {{$t('common:page.toc')}}
.overline.pa-5.pb-0(:class='darkMode ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')
template(v-for='(tocItem, tocIdx) in toc')
v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
@@ -67,12 +67,12 @@
template(v-for='tocSubItem in tocItem.children')
v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.pl-3(color='grey lighten-1', small) mdi-chevron-right
v-list-item-title.pl-3.caption.grey--text.text--darken-1 {{tocSubItem.title}}
v-list-item-title.pl-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
//- v-divider(inset, v-if='tocIdx < toc.length - 1')
v-card.mt-5
.pa-5.pt-3
.overline.indigo--text.d-flex.align-center
.overline.indigo--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : ``')
span {{$t('common:page.lastEditedBy')}}
v-spacer
v-tooltip(top, v-if='isAuthenticated')
@@ -85,7 +85,7 @@
v-card.mt-5(v-if='tags.length > 0 || true')
.pa-5
.overline.teal--text.pb-2 Tags
.overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags
v-chip.mr-1(
label
color='teal lighten-5'
@@ -98,7 +98,7 @@
v-card.mt-5
.pa-5
.overline.pb-2.yellow--text.text--darken-4 Rating
.overline.pb-2.yellow--text(:class='$vuetify.theme.dark ? `text--darken-3` : `text--darken-4`') Rating
.text-center
v-rating(
v-model='rating'

16
client/themes/default/scss/app.scss
View File

@@ -10,11 +10,11 @@
}
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 4%);
// background-color: darken(mc('grey', '900'), 4%);
color: mc('grey', '300');
a {
color: mc('indigo', '200');
color: mc('blue', '100');
}
}
@@ -57,7 +57,7 @@
position: relative;
@at-root .theme--dark & {
color: mc('teal', '100');
color: mc('grey', '300');
}
&::after {
@@ -71,7 +71,7 @@
border-radius: 3px;
@at-root .theme--dark & {
background: linear-gradient(to right, mc('teal', '300') 0%, mc('teal', '500') 10%, rgba(mc('teal', '900'), 0) 100%);
background: linear-gradient(to right, mc('blue', '300') 0%, mc('blue', '500') 10%, rgba(mc('blue', '900'), 0) 100%);
}
@at-root .application--is-rtl & {
@@ -227,7 +227,7 @@
@at-root .theme--dark & {
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('blue', '900'), rgba(darken(mc('blue', '900'), 5%), .2));
background-image: radial-gradient(ellipse at top, rgba(mc('blue', '900'), .25), rgba(darken(mc('blue', '900'), 5%), .2));
border-color: mc('blue', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -245,7 +245,7 @@
@at-root .theme--dark & {
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('orange', '900'), rgba(darken(mc('orange', '900'), 5%), .2));
background-image: radial-gradient(ellipse at top, rgba(mc('orange', '900'), .25), rgba(darken(mc('orange', '900'), 5%), .2));
border-color: mc('orange', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -263,7 +263,7 @@
@at-root .theme--dark & {
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('red', '900'), rgba(darken(mc('red', '900'), 5%), .2));
background-image: radial-gradient(ellipse at top, rgba(mc('red', '900'), .1), rgba(darken(mc('red', '900'), 5%), .2));
border-color: mc('red', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
@@ -281,7 +281,7 @@
@at-root .theme--dark & {
background-color: mc('grey', '900');
background-image: radial-gradient(ellipse at top, mc('green', '900'), rgba(darken(mc('green', '900'), 5%), .2));
background-image: radial-gradient(ellipse at top, rgba(mc('green', '900'), .4), rgba(darken(mc('green', '900'), 5%), .2));
border-color: mc('green', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}