mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-22 14:05:12 +00:00
🎨
This commit is contained in:
parent
3b10e93efe
commit
a4726e683b
2 changed files with 22 additions and 16 deletions
|
@ -50,15 +50,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="player" v-if="game.isEnded">
|
<div class="player" v-if="game.isEnded">
|
||||||
<div>
|
|
||||||
<button @click="logPos = 0" :disabled="logPos == 0"><fa icon="angle-double-left"/></button>
|
|
||||||
<button @click="logPos--" :disabled="logPos == 0"><fa icon="angle-left"/></button>
|
|
||||||
</div>
|
|
||||||
<span>{{ logPos }} / {{ logs.length }}</span>
|
<span>{{ logPos }} / {{ logs.length }}</span>
|
||||||
<div>
|
<ui-horizon-group>
|
||||||
<button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button>
|
<ui-button @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></ui-button>
|
||||||
<button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button>
|
<ui-button @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></ui-button>
|
||||||
</div>
|
<ui-button @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></ui-button>
|
||||||
|
<ui-button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></ui-button>
|
||||||
|
</ui-horizon-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
@ -75,6 +73,7 @@ import i18n from '../../../../../i18n';
|
||||||
import * as CRC32 from 'crc-32';
|
import * as CRC32 from 'crc-32';
|
||||||
import Reversi, { Color } from '../../../../../../../games/reversi/core';
|
import Reversi, { Color } from '../../../../../../../games/reversi/core';
|
||||||
import { url } from '../../../../../config';
|
import { url } from '../../../../../config';
|
||||||
|
import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
|
i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
|
||||||
|
@ -99,7 +98,8 @@ export default Vue.extend({
|
||||||
o: null as Reversi,
|
o: null as Reversi,
|
||||||
logs: [],
|
logs: [],
|
||||||
logPos: 0,
|
logPos: 0,
|
||||||
pollingClock: null
|
pollingClock: null,
|
||||||
|
faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -449,7 +449,9 @@ export default Vue.extend({
|
||||||
padding-bottom 16px
|
padding-bottom 16px
|
||||||
|
|
||||||
> .player
|
> .player
|
||||||
padding-bottom 32px
|
padding 0 16px 32px 16px
|
||||||
|
margin 0 auto
|
||||||
|
max-width 500px
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
|
@ -79,6 +79,10 @@ export default Vue.extend({
|
||||||
|
|
||||||
*
|
*
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
&:after
|
&:after
|
||||||
|
@ -107,30 +111,30 @@ export default Vue.extend({
|
||||||
color var(--text)
|
color var(--text)
|
||||||
background var(--buttonBg)
|
background var(--buttonBg)
|
||||||
|
|
||||||
&:hover
|
&:not(:disabled):hover
|
||||||
background var(--buttonHoverBg)
|
background var(--buttonHoverBg)
|
||||||
|
|
||||||
&:active
|
&:not(:disabled):active
|
||||||
background var(--buttonActiveBg)
|
background var(--buttonActiveBg)
|
||||||
|
|
||||||
&.primary
|
&.primary
|
||||||
color var(--primaryForeground)
|
color var(--primaryForeground)
|
||||||
background var(--primary)
|
background var(--primary)
|
||||||
|
|
||||||
&:hover
|
&:not(:disabled):hover
|
||||||
background var(--primaryLighten5)
|
background var(--primaryLighten5)
|
||||||
|
|
||||||
&:active
|
&:not(:disabled):active
|
||||||
background var(--primaryDarken5)
|
background var(--primaryDarken5)
|
||||||
|
|
||||||
&:not(.fill)
|
&:not(.fill)
|
||||||
color var(--primary)
|
color var(--primary)
|
||||||
background none
|
background none
|
||||||
|
|
||||||
&:hover
|
&:not(:disabled):hover
|
||||||
color var(--primaryDarken5)
|
color var(--primaryDarken5)
|
||||||
|
|
||||||
&:active
|
&:not(:disabled):active
|
||||||
background var(--primaryAlpha03)
|
background var(--primaryAlpha03)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue