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 14c0c0891c..927337f013 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 @@ -50,15 +50,13 @@
-
- - -
{{ logPos }} / {{ logs.length }} -
- - -
+ + + + + +
@@ -75,6 +73,7 @@ import i18n from '../../../../../i18n'; import * as CRC32 from 'crc-32'; import Reversi, { Color } from '../../../../../../../games/reversi/core'; import { url } from '../../../../../config'; +import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'; export default Vue.extend({ i18n: i18n('common/views/components/games/reversi/reversi.game.vue'), @@ -99,7 +98,8 @@ export default Vue.extend({ o: null as Reversi, logs: [], logPos: 0, - pollingClock: null + pollingClock: null, + faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight }; }, @@ -449,7 +449,9 @@ export default Vue.extend({ padding-bottom 16px > .player - padding-bottom 32px + padding 0 16px 32px 16px + margin 0 auto + max-width 500px > span display inline-block diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue index d7d65ad87e..9376b3e724 100644 --- a/src/client/app/common/views/components/ui/button.vue +++ b/src/client/app/common/views/components/ui/button.vue @@ -79,6 +79,10 @@ export default Vue.extend({ * pointer-events none + user-select none + + &:disabled + opacity 0.7 &:focus &:after @@ -107,30 +111,30 @@ export default Vue.extend({ color var(--text) background var(--buttonBg) - &:hover + &:not(:disabled):hover background var(--buttonHoverBg) - &:active + &:not(:disabled):active background var(--buttonActiveBg) &.primary color var(--primaryForeground) background var(--primary) - &:hover + &:not(:disabled):hover background var(--primaryLighten5) - &:active + &:not(:disabled):active background var(--primaryDarken5) &:not(.fill) color var(--primary) background none - &:hover + &:not(:disabled):hover color var(--primaryDarken5) - &:active + &:not(:disabled):active background var(--primaryAlpha03)