add themese
This commit is contained in:
Alberto Xamin
parent
7a6d8b31d6
commit
cae7f2dfcb
@ -10,6 +10,14 @@
|
||||
<help v-if="showHelp"/>
|
||||
<div style="position:fixed;bottom:4pt;right:4pt;display:flex;">
|
||||
<input type="button" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
|
||||
<select id="lang" v-model="theme">
|
||||
<option
|
||||
v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']"
|
||||
:key="`theme-${i}`"
|
||||
:value="theme.split('.')[0]">
|
||||
{{theme.split('.')[1]}} {{theme.split('.')[2]}}
|
||||
</option>
|
||||
</select>
|
||||
<select id="lang" v-model="$i18n.locale" @change="storeLangPref">
|
||||
<option
|
||||
v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
|
||||
@ -44,6 +52,7 @@ export default {
|
||||
c: false,
|
||||
showUpdateUI: false,
|
||||
showHelp:false,
|
||||
theme: 'light',
|
||||
}),
|
||||
computed: {
|
||||
},
|
||||
@ -74,11 +83,29 @@ export default {
|
||||
async update() {
|
||||
this.showUpdateUI = false;
|
||||
await this.$workbox.messageSW({ type: "SKIP_WAITING" });
|
||||
},
|
||||
detectColorScheme() {
|
||||
if(localStorage.getItem("theme")){
|
||||
this.theme = localStorage.getItem("theme")
|
||||
console.log("Found theme preference: " + this.theme)
|
||||
} else if(!window.matchMedia) {
|
||||
console.log("Auto theme not supported")
|
||||
} else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
console.log("Prefers dark mode")
|
||||
this.theme = "dark";
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
theme() {
|
||||
document.documentElement.setAttribute("data-theme", this.theme);
|
||||
localStorage.setItem('theme', this.theme)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.getItem('lang'))
|
||||
this.$i18n.locale = localStorage.getItem('lang')
|
||||
this.detectColorScheme()
|
||||
},
|
||||
created() {
|
||||
if (this.$workbox) {
|
||||
@ -188,10 +215,25 @@ input, select {
|
||||
input:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root, #app, input, select {
|
||||
background-color: #181a1b;
|
||||
color: rgb(174, 194, 211);
|
||||
:root {
|
||||
--font-color: #2c3e50;
|
||||
--bg-color: white;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--font-color: rgb(174, 194, 211);
|
||||
--bg-color: #181a1b;
|
||||
}
|
||||
[data-theme="sepia"] {
|
||||
--font-color: rgb(54, 43, 33);
|
||||
--bg-color: #e7d6bb;
|
||||
}
|
||||
[data-theme="grayscale"] {
|
||||
--font-color: rgb(66, 66, 66);
|
||||
--bg-color: #e2e0e0;
|
||||
}
|
||||
html, #app, input, select {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -48,15 +48,15 @@ export default {
|
||||
min-width:60pt;
|
||||
height: 100pt;
|
||||
margin: 12pt;
|
||||
background: white;
|
||||
background: var(--bg-color);
|
||||
box-shadow:
|
||||
0 0 0 3pt #987e51,
|
||||
0 0 0 6pt white,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
border-radius: 6pt;
|
||||
position: relative;
|
||||
transition: all 0.5s ease-in-out;
|
||||
color: #333;
|
||||
color: var(--font-color);
|
||||
/* overflow: hidden; */
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
@ -75,29 +75,29 @@ export default {
|
||||
.card.equipment {
|
||||
box-shadow:
|
||||
0 0 0 3pt #5c5e83,
|
||||
0 0 0 6pt white,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.character {
|
||||
box-shadow:
|
||||
0 0 0 3pt #7c795b,
|
||||
0 0 0 6pt white,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.usable-next-turn {
|
||||
box-shadow:
|
||||
0 0 0 3pt #6aa16e, 0 0 0 6pt white, 0 0 5pt 6pt #aaa
|
||||
0 0 0 3pt #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa
|
||||
}
|
||||
.card.high-noon{
|
||||
box-shadow: 0 0 0pt 4pt white, 0 0 5pt 4pt #aaa;
|
||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||
border: 2pt dotted rgb(198 78 45);
|
||||
}
|
||||
.card.fistful-of-cards{
|
||||
box-shadow: 0 0 0pt 4pt white, 0 0 5pt 4pt #aaa;
|
||||
box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
|
||||
border: 2pt dashed rgb(50 122 172);
|
||||
}
|
||||
.card.back.fistful-of-cards{
|
||||
color:white;
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(50 122 172),
|
||||
@ -150,50 +150,9 @@ export default {
|
||||
position: absolute;
|
||||
bottom: -5pt;
|
||||
right: -5pt;
|
||||
background: white;
|
||||
background: var(--bg-color);
|
||||
border-radius: 100%;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.expansion {
|
||||
background: #181a1b;
|
||||
}
|
||||
:root, #app {
|
||||
background-color: #181a1b;
|
||||
color: rgb(174, 194, 211);
|
||||
}
|
||||
.card {
|
||||
background-color: #181a1b;
|
||||
color: rgb(174, 194, 211);
|
||||
box-shadow:
|
||||
0 0 0 3pt #987e51,
|
||||
0 0 0 6pt #181a1b,
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.back{
|
||||
color:#181a1b;
|
||||
}
|
||||
.card.equipment {
|
||||
box-shadow:
|
||||
0 0 0 3pt #5c5e83,
|
||||
0 0 0 6pt #181a1b,
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.character {
|
||||
box-shadow:
|
||||
0 0 0 3pt #7c795b,
|
||||
0 0 0 6pt #181a1b,
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.usable-next-turn {
|
||||
box-shadow:
|
||||
0 0 0 3pt #6aa16e, 0 0 0 6pt #181a1b, 0 0 5pt 6pt #aaa
|
||||
}
|
||||
.card.high-noon{
|
||||
box-shadow: 0 0 0pt 4pt #181a1b, 0 0 5pt 4pt #aaa;
|
||||
}
|
||||
.card.fistful-of-cards{
|
||||
box-shadow: 0 0 0pt 4pt #181a1b, 0 0 5pt 4pt #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -211,12 +211,8 @@ export default {
|
||||
.end-turn {
|
||||
box-shadow:
|
||||
0 0 0 3pt rgb(138, 12, 12),
|
||||
0 0 0 6pt white,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa !important;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.end-turn {
|
||||
box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt #181a1b, 0 0 5pt 6pt #aaa !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
.end-turn {
|
||||
box-shadow:
|
||||
0 0 0 3pt rgb(138, 12, 12),
|
||||
0 0 0 6pt white,
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa !important;
|
||||
}
|
||||
</style>
|
||||
@ -336,7 +336,7 @@ export default {
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style >
|
||||
.is_my_turn {
|
||||
box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt white, 0 0 5pt 6pt #aaa !important;
|
||||
box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa !important;
|
||||
animation-name: turn-animation;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user