diff options
Diffstat (limited to 'src/client')
5 files changed, 92 insertions, 69 deletions
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue index 34e9705dd4..57bdf7417b 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.game.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue @@ -1,5 +1,5 @@ <template> -<div class="root"> +<div class="xqnhankfuuilcwvhgsopeqncafzsquya"> <header><b>{{ blackUser | userName }}</b>(%i18n:common.reversi.black%) vs <b>{{ whiteUser | userName }}</b>(%i18n:common.reversi.white%)</header> <div style="overflow: hidden"> @@ -258,12 +258,12 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.root +root(isDark) text-align center > header padding 8px - border-bottom dashed 1px #c4cdd4 + border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4 > .board width calc(100% - 16px) @@ -327,16 +327,16 @@ export default Vue.extend({ user-select none &.empty - border solid 2px #eee + border solid 2px isDark ? #51595f : #eee &.empty.can - background #eee + background isDark ? #51595f : #eee &.empty.myTurn - border-color #ddd + border-color isDark ? #6a767f : #ddd &.can - background #eee + background isDark ? #51595f : #eee cursor pointer &:hover @@ -350,7 +350,7 @@ export default Vue.extend({ box-shadow 0 0 0 4px rgba($theme-color, 0.7) &.isEnded - border-color #ddd + border-color isDark ? #6a767f : #ddd &.none border-color transparent !important @@ -388,4 +388,11 @@ export default Vue.extend({ display inline-block margin 0 8px min-width 70px + +.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode] + root(true) + +.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue index cd1b12ab2a..de5040f630 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.room.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue @@ -17,12 +17,13 @@ </header> <div> - <div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> + <div class="random" v-if="game.settings.map == null">%fa:dice%</div> + <div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> <div v-for="(x, i) in game.settings.map.join('')" :data-none="x == ' '" @click="onPixelClick(i, x)"> - <template v-if="x == 'b'">%fa:circle%</template> - <template v-if="x == 'w'">%fa:circle R%</template> + <template v-if="x == 'b'"><template v-if="$store.state.device.darkmode">%fa:circle R%</template><template v-else>%fa:circle%</template></template> + <template v-if="x == 'w'"><template v-if="$store.state.device.darkmode">%fa:circle%</template><template v-else>%fa:circle R%</template></template> </div> </div> </div> @@ -35,8 +36,8 @@ <div> <form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio> - <form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> - <form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> + <form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> + <form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio> </div> </div> @@ -250,7 +251,7 @@ export default Vue.extend({ root(isDark) text-align center - background #f9f9f9 + background isDark ? #191b22 : #f9f9f9 > header padding 8px @@ -266,40 +267,72 @@ root(isDark) > header > select width 100% - padding 12px 16px - border 1px solid #dcdfe6 + padding 12px 14px + background isDark ? #282C37 : #fff + border 1px solid isDark ? #6a707d : #dcdfe6 border-radius 4px - color #606266 + color isDark ? #fff : #606266 + cursor pointer transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) &:hover - border-color #c0c4cc + border-color isDark ? #a7aebd : #c0c4cc &:focus &:active border-color $theme-color + > div + > .random + padding 32px 0 + font-size 64px + color isDark ? #4e5961 : #d8d8d8 + + > .board + display grid + grid-gap 4px + width 300px + height 300px + margin 0 auto + color isDark ? #fff : #444 + + > div + background transparent + border solid 2px isDark ? #6a767f : #ddd + border-radius 6px + overflow hidden + cursor pointer + + * + pointer-events none + user-select none + width 100% + height 100% + + &[data-none] + border-color transparent + .card max-width 400px border-radius 4px - border 1px solid #ebeef5 background isDark ? #282C37 : #fff - color #303133 + color isDark ? #fff : #303133 box-shadow 0 2px 12px 0 rgba(#000, 0.1) > header padding 18px 20px - border-bottom 1px solid #ebeef5 + border-bottom 1px solid isDark ? #1c2023 : #ebeef5 > div padding 20px + color isDark ? #fff : #606266 > footer position sticky bottom 0 padding 16px - background rgba(255, 255, 255, 0.9) - border-top solid 1px #c4cdd4 + background rgba(isDark ? #191b22 : #fff, 0.9) + border-top solid 1px isDark ? #606266 : #c4cdd4 > .status margin 0 0 16px 0 @@ -311,29 +344,3 @@ root(isDark) root(false) </style> - -<style lang="stylus" module> -.board - display grid - grid-gap 4px - width 300px - height 300px - margin 0 auto - - > div - background transparent - border solid 2px #ddd - border-radius 6px - overflow hidden - cursor pointer - - * - pointer-events none - user-select none - width 100% - height 100% - - &[data-none] - border-color transparent - -</style> diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue index dd3423a938..b6b13bdd97 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.vue @@ -1,5 +1,5 @@ <template> -<div class="mk-reversi"> +<div class="vchtoekanapleubgzioubdtmlkribzfd"> <div v-if="game"> <x-gameroom :game="game"/> </div> @@ -200,9 +200,9 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-reversi - color #677f84 - background #fff +root(isDark) + color isDark ? #fff : #677f84 + background isDark ? #191b22 : #fff > .matching > h1 @@ -227,7 +227,7 @@ export default Vue.extend({ text-align center font-weight normal color #fff - background linear-gradient(to bottom, #8bca3e, #d6cf31) + background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31) & + p margin 0 @@ -235,7 +235,7 @@ export default Vue.extend({ margin-bottom 12px text-align center font-size 14px - border-bottom solid 1px #d3d9dc + border-bottom solid 1px isDark ? #535f65 : #d3d9dc > .play margin 0 auto @@ -250,14 +250,14 @@ export default Vue.extend({ padding 16px font-size 14px text-align left - background #f5f5f5 + background isDark ? #282c37 : #f5f5f5 border-radius 8px > section margin 0 auto padding 0 16px 16px 16px max-width 500px - border-top solid 1px #d3d9dc + border-top solid 1px isDark ? #535f65 : #d3d9dc > h2 margin 0 @@ -298,8 +298,9 @@ export default Vue.extend({ display block margin 8px 0 padding 8px - color #677f84 - border solid 1px #e1e5e8 + color isDark ? #fff : #677f84 + background isDark ? #282c37 : #fff + box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) border-radius 6px cursor pointer @@ -307,14 +308,11 @@ export default Vue.extend({ pointer-events none user-select none - &:focus - border-color $theme-color - &:hover - background #f5f5f5 + background isDark ? #313543 : #f5f5f5 &:active - background #eee + background isDark ? #1e222b : #eee > .avatar width 32px @@ -324,4 +322,11 @@ export default Vue.extend({ > span margin 0 8px line-height 32px + +.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode] + root(true) + +.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue index 3d81a83496..6e1475bc38 100644 --- a/src/client/app/common/views/components/ui/form/button.vue +++ b/src/client/app/common/views/components/ui/form/button.vue @@ -38,18 +38,18 @@ root(isDark) margin 0 padding 12px 20px font-size 14px - border 1px solid #dcdfe6 + border 1px solid isDark ? #6d727d : #dcdfe6 border-radius 4px outline none box-shadow none - color #606266 + color isDark ? #fff : #606266 transition 0.1s &:hover &:focus color $theme-color - background rgba($theme-color, 0.12) - border-color rgba($theme-color, 0.3) + background rgba($theme-color, isDark ? 0.2 : 0.12) + border-color rgba($theme-color, isDark ? 0.5 : 0.3) &:active color darken($theme-color, 20%) diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue index 1b337c3bea..831981bb3e 100644 --- a/src/client/app/common/views/components/ui/form/radio.vue +++ b/src/client/app/common/views/components/ui/form/radio.vue @@ -60,6 +60,10 @@ root(isDark) > * user-select none + &:hover + > .button + border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + &.disabled opacity 0.6 cursor not-allowed @@ -89,7 +93,7 @@ root(isDark) width 20px height 20px background none - border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) + border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4) border-radius 100% transition inherit |