5E/5e-drs
1
0
Fork 0
mirror of https://github.com/em-squared/5e-drs.git synced 2025-10-31 05:24:20 +00:00
Code Issues Projects Releases Wiki Activity

style light et dark

Browse source
This commit is contained in:
Maxime Moraine 2020-04-16 18:08:21 +02:00
parent fc5e3cad66
commit 71ab024b95
9 changed files with 86 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/.vuepress/theme/components/Monster.vue
View file

@ -22,7 +22,7 @@
</div>
<div class="monster-ability-scores d-flex">
<div class="monster-ability-scores-physical d-flex">
<div class="ability-str text-center px-2">
<div class="ability-str text-center">
<div class="ability-label">
<strong>For</strong>
</div>
@ -30,7 +30,7 @@
{{ displayAbilityScore(monster.abilityScores.for) }}
</div>
</div>
<div class="ability-dex text-center px-2">
<div class="ability-dex text-center">
<div class="ability-label">
<strong>Dex</strong>
</div>
@ -38,7 +38,7 @@
{{ displayAbilityScore(monster.abilityScores.dex) }}
</div>
</div>
<div class="ability-con text-center px-2">
<div class="ability-con text-center">
<div class="ability-label">
<strong>Con</strong>
</div>
@ -48,7 +48,7 @@
</div>
</div>
<div class="monster-ability-scores-mental d-flex">
<div class="ability-int text-center px-2">
<div class="ability-int text-center">
<div class="ability-label">
<strong>Int</strong>
</div>
@ -56,7 +56,7 @@
{{ displayAbilityScore(monster.abilityScores.int) }}
</div>
</div>
<div class="ability-wis text-center px-2">
<div class="ability-wis text-center">
<div class="ability-label">
<strong>Sag</strong>
</div>
@ -64,7 +64,7 @@
{{ displayAbilityScore(monster.abilityScores.sag) }}
</div>
</div>
<div class="ability-cha text-center px-2">
<div class="ability-cha text-center">
<div class="ability-label">
<strong>Cha</strong>
</div>
@ -428,4 +428,18 @@ export default {
</script>
<style lang="scss">
@import '../styles/colors';
.monster-ability-scores {
margin: 12px 0;
.ability-label, .ability-score {
padding: 0 8px;
}
.ability-label {
border-bottom: 1px solid $color-dragon;
}
}
</style>

1
docs/.vuepress/theme/components/Navbar.vue
View file

@ -7,6 +7,7 @@
<SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
<!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
<v-spacer />
<v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon><v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon></v-btn>
<v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$store.commit('setIsOpenAboutDialog', true)" icon><v-icon>mdi-information</v-icon></v-btn>
<v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
<v-icon>{{ rightDrawerIcon }}</v-icon>

18
docs/.vuepress/theme/components/PageToc.vue
View file

@ -35,7 +35,7 @@ export default {
},
mounted () {
}
}
</script>
@ -60,4 +60,20 @@ export default {
}
}
}
.theme--dark {
.page-toc {
ul {
li {
a {
color: lighten($color-gray, 20);
&:hover {
color: lighten($color-dragon, 15);
}
}
}
}
}
}
</style>

5
docs/.vuepress/theme/styles/_layout.scss
View file

@ -1,3 +1,6 @@
.page.content {
//padding: 0 24px;
.column-count-3 {
column-count: 3;
margin-bottom: 12px;
}
}

20
docs/.vuepress/theme/styles/_tables.scss
View file

@ -42,7 +42,9 @@ table {
padding: 6px 12px;
border-bottom: none !important;
}
}
.theme--light {
thead {
background-color: $color-table-header-bg;
color: #fff;
@ -69,3 +71,21 @@ table {
}
}
}
.theme--dark {
thead {
background-color: darken($color-gray, 10);
}
tbody {
tr {
&:nth-of-type(even) {
background-color: darken($color-gray, 10);
}
&:nth-of-type(odd):hover {
background-color: inherit !important;
}
td {
}
}
}
}

22
docs/.vuepress/theme/styles/_typography.scss
View file

@ -14,3 +14,25 @@
.source {
font-size: 0.8rem;
}
.theme--light {
h1, h2 {
color: $color-dragon;
}
h2 {
border-bottom: 1px solid $color-dragon;
margin-bottom: 12px;
}
h3, h4, h5, h6 {
color: $color-hero;
}
}
.theme--dark {
h2 {
border-bottom: 1px solid #fff;
margin-bottom: 12px;
}
}