sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-09-26 20:19:35 +09:00
parent d2d3f7810e
commit 904114740b
110 changed files with 529 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/app/common/views/components/autocomplete.vue
View File

@ -259,7 +259,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
position fixed
@ -302,13 +302,13 @@ root(isDark)
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
&[data-selected='true']
background $theme-color
background var(--primary)
&, *
color #fff !important
&:active
background darken($theme-color, 10%)
background var(--primaryDarken10)
&, *
color #fff !important

12
src/client/app/common/views/components/connect-failed.vue
View File

@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-connect-failed
width 100%
@ -70,17 +70,17 @@ export default Vue.extend({
display block
margin 1em auto 0 auto
padding 8px 10px
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:focus
outline solid 3px rgba($theme-color, 0.3)
outline solid 3px var(--primaryAlpha03)
&:hover
background lighten($theme-color, 10%)
background var(--primaryLighten10)
&:active
background darken($theme-color, 10%)
background var(--primaryDarken10)
> .thanks
display block

6
src/client/app/common/views/components/forkit.vue
View File

@ -9,7 +9,7 @@
</template>
<style lang="stylus" scoped>
@import '~const.styl'
.a
display block
@ -18,8 +18,8 @@
display block
//fill #151513
//color #fff
fill $theme-color
color $theme-color-foreground
fill var(--primary)
color var(--primaryForeground)
.octo-arm
transform-origin 130px 106px

10
src/client/app/common/views/components/games/reversi/reversi.game.vue
View File

@ -304,7 +304,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
text-align center
@ -399,14 +399,14 @@ root(isDark)
cursor pointer
&:hover
border-color darken($theme-color, 10%)
background $theme-color
border-color var(--primaryDarken10)
background var(--primary)
&:active
background darken($theme-color, 10%)
background var(--primaryDarken10)
&.prev
box-shadow 0 0 0 4px rgba($theme-color, 0.7)
box-shadow 0 0 0 4px var(--primaryAlpha07)
&.isEnded
border-color isDark ? #6a767f : #ddd

4
src/client/app/common/views/components/games/reversi/reversi.index.vue
View File

@ -138,7 +138,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
> h1
@ -200,7 +200,7 @@ root(isDark)
user-select none
&:focus
border-color $theme-color
border-color var(--primary)
&:hover
background isDark ? #313543 : #f5f5f5

4
src/client/app/common/views/components/games/reversi/reversi.room.vue
View File

@ -252,7 +252,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
text-align center
@ -288,7 +288,7 @@ root(isDark)
&:focus
&:active
border-color $theme-color
border-color var(--primary)
> div
> .random

2
src/client/app/common/views/components/games/reversi/reversi.vue
View File

@ -156,7 +156,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
color isDark ? #fff : #677f84

10
src/client/app/common/views/components/menu.vue
View File

@ -117,7 +117,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
$bg-color = isDark ? #2c303c : #fff
@ -182,13 +182,13 @@ root(isDark)
color isDark ? #d6dce2 : #111
&:hover
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
text-decoration none
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
color var(--primaryForeground)
background var(--primaryDarken10)
> div
margin 8px 0

10
src/client/app/common/views/components/messaging-room.form.vue
View File

@ -195,7 +195,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
> textarea
@ -234,10 +234,10 @@ root(isDark)
transition color 0.1s ease
&:hover
color $theme-color
color var(--primary)
&:active
color darken($theme-color, 10%)
color var(--primaryDarken10)
transition color 0s ease
.files
@ -293,10 +293,10 @@ root(isDark)
transition color 0.1s ease
&:hover
color $theme-color
color var(--primary)
&:active
color darken($theme-color, 10%)
color var(--primaryDarken10)
transition color 0s ease
input[type=file]

4
src/client/app/common/views/components/messaging-room.message.vue
View File

@ -59,10 +59,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
$me-balloon-color = $theme-color
$me-balloon-color = var(--primary)
padding 10px 12px 10px 12px
background-color transparent

10
src/client/app/common/views/components/messaging-room.vue
View File

@ -262,7 +262,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex
@ -386,15 +386,15 @@ root(isDark)
cursor pointer
line-height 32px
font-size 12px
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
border-radius 16px
&:hover
background lighten($theme-color, 10%)
background var(--primaryLighten10)
&:active
background darken($theme-color, 10%)
background var(--primaryDarken10)
> [data-fa]
position absolute

10
src/client/app/common/views/components/messaging.vue
View File

@ -167,7 +167,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
@ -252,8 +252,8 @@ root(isDark)
transition border 0.2s ease
&:focus
color darken($theme-color, 20%)
border solid 1px $theme-color
color var(--primaryDarken20)
border solid 1px var(--primary)
transition color 0, border 0
> .result
@ -287,7 +287,7 @@ root(isDark)
&:hover
&:focus
color #fff
background $theme-color
background var(--primary)
.name
color #fff
@ -297,7 +297,7 @@ root(isDark)
&:active
color #fff
background darken($theme-color, 10%)
background var(--primaryDarken10)
.name
color #fff

2
src/client/app/common/views/components/note-header.vue
View File

@ -42,7 +42,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex

22
src/client/app/common/views/components/poll-editor.vue
View File

@ -68,7 +68,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
padding 8px
@ -105,42 +105,42 @@ root(isDark)
font-size 14px
color isDark ? #fff : #000
background isDark ? #191b22 : #fff
border solid 1px rgba($theme-color, 0.1)
border solid 1px var(--primaryAlpha01)
border-radius 4px
&:hover
border-color rgba($theme-color, 0.2)
border-color var(--primaryAlpha02)
&:focus
border-color rgba($theme-color, 0.5)
border-color var(--primaryAlpha05)
> button
padding 4px 8px
color rgba($theme-color, 0.4)
color var(--primaryAlpha04)
&:hover
color rgba($theme-color, 0.6)
color var(--primaryAlpha06)
&:active
color darken($theme-color, 30%)
color var(--primaryDarken30)
> .add
margin 8px 0 0 0
vertical-align top
color $theme-color
color var(--primary)
> .destroy
position absolute
top 0
right 0
padding 4px 8px
color rgba($theme-color, 0.4)
color var(--primaryAlpha04)
&:hover
color rgba($theme-color, 0.6)
color var(--primaryAlpha06)
&:active
color darken($theme-color, 30%)
color var(--primaryDarken30)
.mk-poll-editor[data-darkmode]
root(true)

4
src/client/app/common/views/components/poll.vue
View File

@ -67,7 +67,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
@ -99,7 +99,7 @@ root(isDark)
top 0
left 0
height 100%
background $theme-color
background var(--primary)
transition width 1s ease
> span

6
src/client/app/common/views/components/reaction-picker.vue
View File

@ -210,7 +210,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15)
@ -301,7 +301,7 @@ root(isDark)
right 0
bottom 0
left 0
border 2px solid rgba($theme-color, 0.3)
border 2px solid var(--primaryAlpha03)
border-radius 4px
> button
@ -315,7 +315,7 @@ root(isDark)
background isDark ? #252731 : #eee
&:active
background $theme-color
background var(--primary)
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode]

2
src/client/app/common/views/components/signin.vue
View File

@ -68,7 +68,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-signin
color #555

2
src/client/app/common/views/components/signup.vue
View File

@ -151,7 +151,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-signup
min-width 302px

16
src/client/app/common/views/components/switch.vue
View File

@ -85,7 +85,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex
@ -102,21 +102,21 @@ root(isDark)
&.checked
> .button
background-color $theme-color
border-color $theme-color
background-color var(--primary)
border-color var(--primary)
> .label
> span
color $theme-color
color var(--primary)
&:hover
> .label
> span
color darken($theme-color, 10%)
color var(--primaryDarken10)
> .button
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
background var(--primaryDarken10)
border-color var(--primaryDarken10)
&:hover
> .label
@ -144,7 +144,7 @@ root(isDark)
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border 2px solid var(--primaryAlpha03)
border-radius 14px
> .button

16
src/client/app/common/views/components/ui/button.vue
View File

@ -32,7 +32,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
> button
@ -49,23 +49,23 @@ root(isDark, fill)
box-shadow none
if fill
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:hover
background lighten($theme-color, 5%)
background var(--primaryLighten5)
&:active
background darken($theme-color, 5%)
background var(--primaryDarken5)
else
color $theme-color
color var(--primary)
background none
&:hover
color darken($theme-color, 5%)
color var(--primaryDarken5)
&:active
background rgba($theme-color, 0.3)
background var(--primaryAlpha03)
.ui-button[data-darkmode]
&.fill

2
src/client/app/common/views/components/ui/card.vue
View File

@ -20,7 +20,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
margin 16px

2
src/client/app/common/views/components/ui/form.vue
View File

@ -19,7 +19,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-form
> fieldset

28
src/client/app/common/views/components/ui/form/button.vue
View File

@ -25,7 +25,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-block
@ -50,30 +50,30 @@ root(isDark)
&:hover
&:focus
color $theme-color
background rgba($theme-color, isDark ? 0.2 : 0.12)
border-color rgba($theme-color, isDark ? 0.5 : 0.3)
color var(--primary)
//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
&:active
color darken($theme-color, 20%)
background rgba($theme-color, 0.12)
border-color $theme-color
color var(--primaryDarken20)
//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
border-color var(--primary)
transition all 0s
&.primary
> button
border 1px solid $theme-color
background $theme-color
color $theme-color-foreground
border 1px solid var(--primary)
background var(--primary)
color var(--primaryForeground)
&:hover
&:focus
background lighten($theme-color, 20%)
border-color lighten($theme-color, 20%)
background var(--primaryLighten20)
border-color var(--primaryLighten20)
&:active
background darken($theme-color, 20%)
border-color darken($theme-color, 20%)
background var(--primaryDarken20)
border-color var(--primaryDarken20)
transition all 0s
&.round

8
src/client/app/common/views/components/ui/form/radio.vue
View File

@ -49,7 +49,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-flex
@ -70,15 +70,15 @@ root(isDark)
&.checked
> .button
border-color $theme-color
border-color var(--primary)
&:after
background-color $theme-color
background-color var(--primary)
transform scale(1)
opacity 1
> .label
color $theme-color
color var(--primary)
> input
position absolute

6
src/client/app/common/views/components/ui/input.vue
View File

@ -155,7 +155,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
@ -193,7 +193,7 @@ root(isDark, fill)
left 0
right 0
height 2px
background $theme-color
background var(--primary)
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -325,7 +325,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
color $theme-color
color var(--primary)
&.focused
&.filled

6
src/client/app/common/views/components/ui/radio.vue
View File

@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-block
@ -68,10 +68,10 @@ root(isDark)
&.checked
> .button
border-color $theme-color
border-color var(--primary)
&:after
background-color $theme-color
background-color var(--primary)
transform scale(1)
opacity 1

6
src/client/app/common/views/components/ui/select.vue
View File

@ -70,7 +70,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
@ -113,7 +113,7 @@ root(isDark, fill)
left 0
right 0
height 2px
background $theme-color
background var(--primary)
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -190,7 +190,7 @@ root(isDark, fill)
transform scaleX(1)
> .label
color $theme-color
color var(--primary)
&.focused
&.filled

8
src/client/app/common/views/components/ui/switch.vue
View File

@ -56,7 +56,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex
@ -79,11 +79,11 @@ root(isDark)
&.checked
> .button
background-color rgba($theme-color, 0.4)
border-color rgba($theme-color, 0.4)
background-color var(--primaryAlpha04)
border-color var(--primaryAlpha04)
> *
background-color $theme-color
background-color var(--primary)
transform translateX(14px)
> input

6
src/client/app/common/views/components/ui/textarea.vue
View File

@ -63,7 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 42px 0 32px 0
@ -97,7 +97,7 @@ root(isDark, fill)
left 0
right 0
background none
border solid 2px $theme-color
border solid 2px var(--primary)
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -149,7 +149,7 @@ root(isDark, fill)
opacity 1
> .label
color $theme-color
color var(--primary)
&.focused
&.filled

30
src/client/app/common/views/components/uploader.vue
View File

@ -81,7 +81,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-uploader
overflow auto
@ -100,7 +100,7 @@ export default Vue.extend({
margin 8px 0 0 0
padding 0
height 36px
box-shadow 0 -1px 0 rgba($theme-color, 0.1)
box-shadow 0 -1px 0 var(--primaryAlpha01)
border-top solid 8px transparent
&:first-child
@ -127,7 +127,7 @@ export default Vue.extend({
padding 0
max-width 256px
font-size 0.8em
color rgba($theme-color, 0.7)
color var(--primaryAlpha07)
white-space nowrap
text-overflow ellipsis
overflow hidden
@ -145,17 +145,17 @@ export default Vue.extend({
font-size 0.8em
> .initing
color rgba($theme-color, 0.5)
color var(--primaryAlpha05)
> .kb
color rgba($theme-color, 0.5)
color var(--primaryAlpha05)
> .percentage
display inline-block
width 48px
text-align right
color rgba($theme-color, 0.7)
color var(--primaryAlpha07)
&:after
content '%'
@ -174,10 +174,10 @@ export default Vue.extend({
overflow hidden
&::-webkit-progress-value
background $theme-color
background var(--primary)
&::-webkit-progress-bar
background rgba($theme-color, 0.1)
background var(--primaryAlpha01)
> .progress
display block
@ -191,13 +191,13 @@ export default Vue.extend({
border-radius 4px
background linear-gradient(
45deg,
lighten($theme-color, 30%) 25%,
$theme-color 25%,
$theme-color 50%,
lighten($theme-color, 30%) 50%,
lighten($theme-color, 30%) 75%,
$theme-color 75%,
$theme-color
var(--primaryLighten30) 25%,
var(--primary) 25%,
var(--primary) 50%,
var(--primaryLighten30) 50%,
var(--primaryLighten30) 75%,
var(--primary) 75%,
var(--primary)
)
background-size 32px 32px
animation bg 1.5s linear infinite

6
src/client/app/common/views/components/visibility-chooser.vue
View File

@ -127,7 +127,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15)
@ -199,8 +199,8 @@ root(isDark)
background isDark ? #21242b : #ddd
&.active
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
> *
user-select none