wip
This commit is contained in:
syuilo
parent
3f4de3b1cc
commit
8e3dd75c85
45 changed files with 200 additions and 461 deletions
|
|
@ -304,9 +304,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya
|
||||
text-align center
|
||||
|
||||
> .go-index
|
||||
|
|
@ -319,7 +317,7 @@ root(isDark)
|
|||
|
||||
> header
|
||||
padding 8px
|
||||
border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
|
||||
border-bottom dashed 1px var(--reversiGameHeaderLine)
|
||||
|
||||
a
|
||||
color inherit
|
||||
|
|
@ -386,16 +384,16 @@ root(isDark)
|
|||
user-select none
|
||||
|
||||
&.empty
|
||||
border solid 2px isDark ? #51595f : #eee
|
||||
border solid 2px var(--reversiGameEmptyCell)
|
||||
|
||||
&.empty.can
|
||||
background isDark ? #51595f : #eee
|
||||
background var(--reversiGameEmptyCell)
|
||||
|
||||
&.empty.myTurn
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
border-color var(--reversiGameEmptyCellMyTurn)
|
||||
|
||||
&.can
|
||||
background isDark ? #51595f : #eee
|
||||
background var(--reversiGameEmptyCellCanPut)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
|
|
@ -409,7 +407,7 @@ root(isDark)
|
|||
box-shadow 0 0 0 4px var(--primaryAlpha07)
|
||||
|
||||
&.isEnded
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
border-color var(--reversiGameEmptyCellMyTurn)
|
||||
|
||||
&.none
|
||||
border-color transparent !important
|
||||
|
|
@ -458,10 +456,4 @@ root(isDark)
|
|||
margin 0 8px
|
||||
min-width 70px
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -138,9 +138,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
|
||||
> h1
|
||||
margin 0
|
||||
padding 24px
|
||||
|
|
@ -148,7 +146,7 @@ root(isDark)
|
|||
text-align center
|
||||
font-weight normal
|
||||
color #fff
|
||||
background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
|
||||
background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
|
||||
|
||||
& + p
|
||||
margin 0
|
||||
|
|
@ -156,7 +154,7 @@ root(isDark)
|
|||
margin-bottom 12px
|
||||
text-align center
|
||||
font-size 14px
|
||||
border-bottom solid 1px isDark ? #535f65 : #d3d9dc
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .play
|
||||
margin 0 auto
|
||||
|
|
@ -171,14 +169,14 @@ root(isDark)
|
|||
padding 16px
|
||||
font-size 14px
|
||||
text-align left
|
||||
background isDark ? #282c37 : #f5f5f5
|
||||
background var(--reversiDescBg)
|
||||
border-radius 8px
|
||||
|
||||
> section
|
||||
margin 0 auto
|
||||
padding 0 16px 16px 16px
|
||||
max-width 500px
|
||||
border-top solid 1px isDark ? #535f65 : #d3d9dc
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
|
|
@ -189,9 +187,9 @@ root(isDark)
|
|||
.invitation
|
||||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -203,10 +201,10 @@ root(isDark)
|
|||
border-color var(--primary)
|
||||
|
||||
&:hover
|
||||
background isDark ? #313543 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #1e222b : #eee
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
> .avatar
|
||||
width 32px
|
||||
|
|
@ -221,9 +219,9 @@ root(isDark)
|
|||
display block
|
||||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -232,10 +230,10 @@ root(isDark)
|
|||
user-select none
|
||||
|
||||
&:hover
|
||||
background isDark ? #313543 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #1e222b : #eee
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
> .avatar
|
||||
width 32px
|
||||
|
|
@ -246,10 +244,4 @@ root(isDark)
|
|||
margin 0 8px
|
||||
line-height 32px
|
||||
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -252,11 +252,9 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij
|
||||
text-align center
|
||||
background isDark ? #191b22 : #f9f9f9
|
||||
background var(--bg)
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
|
|
@ -274,9 +272,9 @@ root(isDark)
|
|||
width 100%
|
||||
padding 12px 14px
|
||||
background var(--face)
|
||||
border 1px solid isDark ? #6a707d : #dcdfe6
|
||||
border 1px solid var(--reversiMapSelectBorder)
|
||||
border-radius 4px
|
||||
color isDark ? #fff : #606266
|
||||
color var(--text)
|
||||
cursor pointer
|
||||
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
-webkit-appearance none
|
||||
|
|
@ -284,7 +282,7 @@ root(isDark)
|
|||
appearance none
|
||||
|
||||
&:hover
|
||||
border-color isDark ? #a7aebd : #c0c4cc
|
||||
border-color var(--reversiMapSelectHoverBorder)
|
||||
|
||||
&:focus
|
||||
&:active
|
||||
|
|
@ -294,7 +292,8 @@ root(isDark)
|
|||
> .random
|
||||
padding 32px 0
|
||||
font-size 64px
|
||||
color isDark ? #4e5961 : #d8d8d8
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> .board
|
||||
display grid
|
||||
|
|
@ -302,11 +301,11 @@ root(isDark)
|
|||
width 300px
|
||||
height 300px
|
||||
margin 0 auto
|
||||
color isDark ? #fff : #444
|
||||
color var(--text)
|
||||
|
||||
> div
|
||||
background transparent
|
||||
border solid 2px isDark ? #6a767f : #ddd
|
||||
border solid 2px var(--faceDivider)
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
|
|
@ -332,31 +331,25 @@ root(isDark)
|
|||
max-width 400px
|
||||
border-radius 4px
|
||||
background var(--face)
|
||||
color isDark ? #fff : #303133
|
||||
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
|
||||
color var(--text)
|
||||
box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
|
||||
|
||||
> header
|
||||
padding 18px 20px
|
||||
border-bottom 1px solid isDark ? #1c2023 : #ebeef5
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> div
|
||||
padding 20px
|
||||
color isDark ? #fff : #606266
|
||||
color var(--text)
|
||||
|
||||
> footer
|
||||
position sticky
|
||||
bottom 0
|
||||
padding 16px
|
||||
background rgba(isDark ? #191b22 : #fff, 0.9)
|
||||
border-top solid 1px isDark ? #606266 : #c4cdd4
|
||||
background var(--reversiRoomFooterBg)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> .status
|
||||
margin 0 0 16px 0
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -156,11 +156,9 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #191b22 : #fff
|
||||
.vchtoekanapleubgzioubdtmlkribzfd
|
||||
color var(--text)
|
||||
background var(--bg)
|
||||
|
||||
> .matching
|
||||
> h1
|
||||
|
|
@ -177,10 +175,4 @@ root(isDark)
|
|||
text-align center
|
||||
border-top dashed 1px #c4cdd4
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue