wip
This commit is contained in:
parent
e9940c9221
commit
f2874d778a
|
@ -94,13 +94,13 @@ export default Vue.extend({
|
||||||
margin 0 auto -38px auto
|
margin 0 auto -38px auto
|
||||||
border solid 5px #fff
|
border solid 5px #fff
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
box-shadow 0 2px 2px rgba(0, 0, 0, 0.1)
|
box-shadow 0 2px 2px rgba(#000, 0.1)
|
||||||
|
|
||||||
> .app
|
> .app
|
||||||
padding 44px 16px 0 16px
|
padding 44px 16px 0 16px
|
||||||
color #555
|
color #555
|
||||||
background #eee
|
background #eee
|
||||||
box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset
|
box-shadow 0 2px 2px rgba(#000, 0.1) inset
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
|
|
|
@ -94,7 +94,7 @@ export default Vue.extend({
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
text-align center
|
text-align center
|
||||||
background #fff
|
background #fff
|
||||||
box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
|
box-shadow 0px 4px 16px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .fetching
|
> .fetching
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
@ -234,7 +234,7 @@ export default Vue.extend({
|
||||||
margin-top calc(1em + 8px)
|
margin-top calc(1em + 8px)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.1)
|
border solid 1px rgba(#000, 0.1)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
transition top 0.1s ease, left 0.1s ease
|
transition top 0.1s ease, left 0.1s ease
|
||||||
|
|
||||||
|
@ -253,7 +253,7 @@ export default Vue.extend({
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
overflow hidden
|
overflow hidden
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
cursor default
|
cursor default
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
|
@ -285,10 +285,10 @@ export default Vue.extend({
|
||||||
|
|
||||||
.name
|
.name
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
|
|
||||||
.username
|
.username
|
||||||
color rgba(0, 0, 0, 0.3)
|
color rgba(#000, 0.3)
|
||||||
|
|
||||||
> .emojis > li
|
> .emojis > li
|
||||||
|
|
||||||
|
@ -298,10 +298,10 @@ export default Vue.extend({
|
||||||
width 24px
|
width 24px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
|
|
||||||
.alias
|
.alias
|
||||||
margin 0 0 0 8px
|
margin 0 0 0 8px
|
||||||
color rgba(0, 0, 0, 0.3)
|
color rgba(#000, 0.3)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -134,7 +134,7 @@ export default Vue.extend({
|
||||||
bottom -4px
|
bottom -4px
|
||||||
left -12px
|
left -12px
|
||||||
margin 0
|
margin 0
|
||||||
color rgba(0, 0, 0, 0.5)
|
color rgba(#000, 0.5)
|
||||||
font-size 11px
|
font-size 11px
|
||||||
|
|
||||||
> .content
|
> .content
|
||||||
|
@ -146,7 +146,7 @@ export default Vue.extend({
|
||||||
overflow hidden
|
overflow hidden
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color rgba(0, 0, 0, 0.5)
|
color rgba(#000, 0.5)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
display block
|
display block
|
||||||
|
@ -155,7 +155,7 @@ export default Vue.extend({
|
||||||
overflow hidden
|
overflow hidden
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
|
|
||||||
& + .file
|
& + .file
|
||||||
> a
|
> a
|
||||||
|
@ -195,7 +195,7 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
margin 2px 0 0 0
|
margin 2px 0 0 0
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color rgba(0, 0, 0, 0.4)
|
color rgba(#000, 0.4)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
|
|
|
@ -256,7 +256,7 @@ export default Vue.extend({
|
||||||
padding 16px 8px 8px 8px
|
padding 16px 8px 8px 8px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(0, 0, 0, 0.4)
|
color rgba(#000, 0.4)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -267,7 +267,7 @@ export default Vue.extend({
|
||||||
padding 16px 8px 8px 8px
|
padding 16px 8px 8px 8px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(0, 0, 0, 0.4)
|
color rgba(#000, 0.4)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -278,7 +278,7 @@ export default Vue.extend({
|
||||||
padding 16px
|
padding 16px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(0, 0, 0, 0.4)
|
color rgba(#000, 0.4)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -289,14 +289,14 @@ export default Vue.extend({
|
||||||
padding 0 12px
|
padding 0 12px
|
||||||
line-height 24px
|
line-height 24px
|
||||||
color #fff
|
color #fff
|
||||||
background rgba(0, 0, 0, 0.3)
|
background rgba(#000, 0.3)
|
||||||
border-radius 12px
|
border-radius 12px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.4)
|
background rgba(#000, 0.4)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba(0, 0, 0, 0.5)
|
background rgba(#000, 0.5)
|
||||||
|
|
||||||
&.fetching
|
&.fetching
|
||||||
cursor wait
|
cursor wait
|
||||||
|
@ -322,7 +322,7 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(#000, 0.1)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display inline-block
|
display inline-block
|
||||||
|
@ -330,7 +330,7 @@ export default Vue.extend({
|
||||||
padding 0 16px
|
padding 0 16px
|
||||||
//font-weight bold
|
//font-weight bold
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(0, 0, 0, 0.3)
|
color rgba(#000, 0.3)
|
||||||
background #fff
|
background #fff
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
|
|
@ -205,7 +205,7 @@ root(isDark)
|
||||||
z-index 1
|
z-index 1
|
||||||
width 100%
|
width 100%
|
||||||
background #fff
|
background #fff
|
||||||
box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0px 2px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .form
|
> .form
|
||||||
padding 8px
|
padding 8px
|
||||||
|
@ -279,7 +279,7 @@ root(isDark)
|
||||||
vertical-align top
|
vertical-align top
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
overflow hidden
|
overflow hidden
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
text-decoration none
|
text-decoration none
|
||||||
transition none
|
transition none
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
@ -318,11 +318,11 @@ root(isDark)
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
/*font-weight bold*/
|
/*font-weight bold*/
|
||||||
font-weight normal
|
font-weight normal
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(#000, 0.8)
|
||||||
|
|
||||||
.username
|
.username
|
||||||
font-weight normal
|
font-weight normal
|
||||||
color rgba(0, 0, 0, 0.3)
|
color rgba(#000, 0.3)
|
||||||
|
|
||||||
> .history
|
> .history
|
||||||
|
|
||||||
|
@ -383,17 +383,17 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #fff : rgba(0, 0, 0, 0.9)
|
color isDark ? #fff : rgba(#000, 0.9)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
transition all 0.1s ease
|
transition all 0.1s ease
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
margin 0 8px
|
margin 0 8px
|
||||||
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
|
color isDark ? #606984 : rgba(#000, 0.5)
|
||||||
|
|
||||||
> .mk-time
|
> .mk-time
|
||||||
margin 0 0 0 auto
|
margin 0 0 0 auto
|
||||||
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
|
color isDark ? #606984 : rgba(#000, 0.5)
|
||||||
font-size 80%
|
font-size 80%
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
|
@ -413,10 +413,10 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 1.1em
|
font-size 1.1em
|
||||||
color isDark ? #fff : rgba(0, 0, 0, 0.8)
|
color isDark ? #fff : rgba(#000, 0.8)
|
||||||
|
|
||||||
.me
|
.me
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
|
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
|
||||||
|
|
||||||
> .image
|
> .image
|
||||||
display block
|
display block
|
||||||
|
|
|
@ -105,7 +105,7 @@ $border-color = rgba(27, 31, 35, 0.15)
|
||||||
z-index 10000
|
z-index 10000
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(#000, 0.1)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
> .popover
|
> .popover
|
||||||
|
|
|
@ -88,10 +88,10 @@ root(isDark)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(#000, 0.1)
|
||||||
|
|
||||||
> .backdrop
|
> .backdrop
|
||||||
position absolute
|
position absolute
|
||||||
|
|
|
@ -91,7 +91,7 @@ export default Vue.extend({
|
||||||
width 100%
|
width 100%
|
||||||
line-height 44px
|
line-height 44px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color rgba(0, 0, 0, 0.7)
|
color rgba(#000, 0.7)
|
||||||
background #fff
|
background #fff
|
||||||
outline none
|
outline none
|
||||||
border solid 1px #eee
|
border solid 1px #eee
|
||||||
|
@ -117,7 +117,7 @@ export default Vue.extend({
|
||||||
margin -6px 0 0 0
|
margin -6px 0 0 0
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1.2em
|
font-size 1.2em
|
||||||
color rgba(0, 0, 0, 0.5)
|
color rgba(#000, 0.5)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
|
@ -234,13 +234,13 @@ export default Vue.extend({
|
||||||
color #333 !important
|
color #333 !important
|
||||||
background #fff !important
|
background #fff !important
|
||||||
outline none
|
outline none
|
||||||
border solid 1px rgba(0, 0, 0, 0.1)
|
border solid 1px rgba(#000, 0.1)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
box-shadow 0 0 0 114514px #fff inset
|
box-shadow 0 0 0 114514px #fff inset
|
||||||
transition all .3s ease
|
transition all .3s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color rgba(0, 0, 0, 0.2)
|
border-color rgba(#000, 0.2)
|
||||||
transition all .1s ease
|
transition all .1s ease
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
|
|
|
@ -73,7 +73,7 @@ export default Vue.extend({
|
||||||
padding 6px 12px
|
padding 6px 12px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color #fff
|
color #fff
|
||||||
background rgba(0, 0, 0, 0.8)
|
background rgba(#000, 0.8)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> p
|
> p
|
||||||
|
|
|
@ -53,18 +53,28 @@ export default Vue.extend({
|
||||||
const width = popover.offsetWidth;
|
const width = popover.offsetWidth;
|
||||||
const height = popover.offsetHeight;
|
const height = popover.offsetHeight;
|
||||||
|
|
||||||
|
let left;
|
||||||
|
let top;
|
||||||
|
|
||||||
if (this.compact) {
|
if (this.compact) {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||||
popover.style.left = (x - (width / 2)) + 'px';
|
left = (x - (width / 2));
|
||||||
popover.style.top = (y - (height / 2)) + 'px';
|
top = (y - (height / 2));
|
||||||
} else {
|
} else {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||||
popover.style.left = (x - (width / 2)) + 'px';
|
left = (x - (width / 2));
|
||||||
popover.style.top = y + 'px';
|
top = y;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (left + width > window.innerWidth) {
|
||||||
|
left = window.innerWidth - width;
|
||||||
|
}
|
||||||
|
|
||||||
|
popover.style.left = left + 'px';
|
||||||
|
popover.style.top = top + 'px';
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: this.$refs.backdrop,
|
targets: this.$refs.backdrop,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
|
|
|
@ -62,7 +62,7 @@ export default Vue.extend({
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size .9em
|
font-size .9em
|
||||||
color #4C4C4C
|
color #4C4C4C
|
||||||
border-bottom 1px solid rgba(0, 0, 0, 0.05)
|
border-bottom 1px solid rgba(#000, 0.05)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
|
@ -78,7 +78,7 @@ export default define({
|
||||||
color #555
|
color #555
|
||||||
|
|
||||||
&:nth-child(odd)
|
&:nth-child(odd)
|
||||||
background rgba(0, 0, 0, 0.025)
|
background rgba(#000, 0.025)
|
||||||
|
|
||||||
> b
|
> b
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -113,7 +113,7 @@ root(isDark)
|
||||||
padding 16px 0
|
padding 16px 0
|
||||||
color isDark ? #c5ced6 :#777
|
color isDark ? #c5ced6 :#777
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&[data-special='on-new-years-day']
|
&[data-special='on-new-years-day']
|
||||||
|
@ -126,7 +126,7 @@ root(isDark)
|
||||||
&[data-mobile]
|
&[data-mobile]
|
||||||
border none
|
border none
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
|
@ -46,7 +46,7 @@ root(isDark)
|
||||||
border none
|
border none
|
||||||
background #ead8bb
|
background #ead8bb
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
> article
|
> article
|
||||||
> h1
|
> h1
|
||||||
|
|
|
@ -92,7 +92,7 @@ root(isDark)
|
||||||
padding 8px 16px
|
padding 8px 16px
|
||||||
|
|
||||||
&:nth-child(even)
|
&:nth-child(even)
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
.mkw-rss[data-darkmode]
|
.mkw-rss[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
cx="50%" cy="50%"
|
cx="50%" cy="50%"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="0.1"
|
stroke-width="0.1"
|
||||||
stroke="rgba(0, 0, 0, 0.05)"/>
|
stroke="rgba(#000, 0.05)"/>
|
||||||
<circle
|
<circle
|
||||||
:r="r"
|
:r="r"
|
||||||
cx="50%" cy="50%"
|
cx="50%" cy="50%"
|
||||||
|
@ -56,7 +56,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 0.15px
|
font-size 0.15px
|
||||||
fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
|
fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
|
||||||
|
|
||||||
svg[data-darkmode]
|
svg[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
@ -122,13 +122,13 @@ export default define({
|
||||||
.mkw-slideshow
|
.mkw-slideshow
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&[data-mobile]
|
&[data-mobile]
|
||||||
border none
|
border none
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -61,6 +61,6 @@ svg
|
||||||
|
|
||||||
&.day
|
&.day
|
||||||
&:hover
|
&:hover
|
||||||
fill rgba(0, 0, 0, 0.05)
|
fill rgba(#000, 0.05)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -136,7 +136,7 @@ export default Vue.extend({
|
||||||
root(isDark)
|
root(isDark)
|
||||||
color isDark ? #c5ced6 : #777
|
color isDark ? #c5ced6 : #777
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&[data-melt]
|
&[data-melt]
|
||||||
|
@ -152,7 +152,7 @@ root(isDark)
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -214,10 +214,10 @@ root(isDark)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&:hover > div
|
&:hover > div
|
||||||
background rgba(0, 0, 0, 0.025)
|
background rgba(#000, 0.025)
|
||||||
|
|
||||||
&:active > div
|
&:active > div
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
&[data-is-donichi]
|
&[data-is-donichi]
|
||||||
color #ef95a0
|
color #ef95a0
|
||||||
|
@ -233,10 +233,10 @@ root(isDark)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
> div
|
> div
|
||||||
background rgba(0, 0, 0, 0.025)
|
background rgba(#000, 0.025)
|
||||||
|
|
||||||
&:active > div
|
&:active > div
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
&[data-today]
|
&[data-today]
|
||||||
> div
|
> div
|
||||||
|
|
|
@ -106,7 +106,7 @@ root(isDark)
|
||||||
width $width
|
width $width
|
||||||
background isDark ? #282c37 :#fff
|
background isDark ? #282c37 :#fff
|
||||||
border-radius 0 4px 4px 4px
|
border-radius 0 4px 4px 4px
|
||||||
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||||
transition visibility 0s linear 0.2s
|
transition visibility 0s linear 0.2s
|
||||||
|
|
||||||
.menu[data-darkmode]
|
.menu[data-darkmode]
|
||||||
|
|
|
@ -68,7 +68,7 @@ root(isDark)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
background isDark ? #282c37 : #fff
|
background isDark ? #282c37 : #fff
|
||||||
border-radius 0 4px 4px 4px
|
border-radius 0 4px 4px 4px
|
||||||
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
.context-menu[data-darkmode]
|
.context-menu[data-darkmode]
|
||||||
|
|
|
@ -102,7 +102,7 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.7)
|
background rgba(#000, 0.7)
|
||||||
opacity 0
|
opacity 0
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
|
|
|
@ -195,7 +195,7 @@ root(isDark)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
&:before
|
&:before
|
||||||
|
@ -203,7 +203,7 @@ root(isDark)
|
||||||
background #0b65a5
|
background #0b65a5
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(#000, 0.1)
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
&:before
|
&:before
|
||||||
|
|
|
@ -587,7 +587,7 @@ root(isDark)
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color isDark ? #d2d9dc : #555
|
color isDark ? #d2d9dc : #555
|
||||||
background isDark ? #282c37 : #fff
|
background isDark ? #282c37 : #fff
|
||||||
box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
|
box-shadow 0 1px 0 rgba(#000, 0.05)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
user-select none
|
user-select none
|
||||||
|
@ -733,7 +733,7 @@ root(isDark)
|
||||||
display inline-block
|
display inline-block
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
background-color rgba(0, 0, 0, 0.3)
|
background-color rgba(#000, 0.3)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
|
|
||||||
animation sk-bounce 2.0s infinite ease-in-out
|
animation sk-bounce 2.0s infinite ease-in-out
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
display inline-block
|
display inline-block
|
||||||
width 18px
|
width 18px
|
||||||
height 18px
|
height 18px
|
||||||
background-color rgba(0, 0, 0, 0.3)
|
background-color rgba(#000, 0.3)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
animation bounce 1.4s infinite ease-in-out both
|
animation bounce 1.4s infinite ease-in-out both
|
||||||
|
|
||||||
|
|
|
@ -251,7 +251,7 @@ root(isDark)
|
||||||
height 48px
|
height 48px
|
||||||
color isDark ? #fff : #000
|
color isDark ? #fff : #000
|
||||||
background isDark ? #313543 : #f7f7f7
|
background isDark ? #313543 : #f7f7f7
|
||||||
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
|
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||||
|
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
|
|
|
@ -52,7 +52,7 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.7)
|
background rgba(#000, 0.7)
|
||||||
|
|
||||||
> img
|
> img
|
||||||
position fixed
|
position fixed
|
||||||
|
|
|
@ -54,7 +54,7 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.7)
|
background rgba(#000, 0.7)
|
||||||
|
|
||||||
> video
|
> video
|
||||||
position fixed
|
position fixed
|
||||||
|
|
|
@ -85,7 +85,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.mk-mentions
|
.mk-mentions
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> header
|
> header
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
|
<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
|
||||||
<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
|
<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="media" v-if="note.mediaIds.length > 0">
|
<div class="media" v-if="note.mediaIds.length > 0">
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
|
<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
|
||||||
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="media" v-if="p.media.length > 0">
|
<div class="media" v-if="p.media.length > 0">
|
||||||
|
@ -222,7 +223,7 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-align left
|
text-align left
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.1)
|
border solid 1px rgba(#000, 0.1)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> .read-more
|
> .read-more
|
||||||
|
|
|
@ -607,7 +607,7 @@ root(isDark)
|
||||||
|
|
||||||
> .detail
|
> .detail
|
||||||
padding-top 4px
|
padding-top 4px
|
||||||
background rgba(0, 0, 0, 0.0125)
|
background rgba(#000, 0.0125)
|
||||||
|
|
||||||
.note[data-darkmode]
|
.note[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
@ -204,7 +204,7 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
@ -215,7 +215,7 @@ root(isDark)
|
||||||
top 16px
|
top 16px
|
||||||
right 12px
|
right 12px
|
||||||
vertical-align top
|
vertical-align top
|
||||||
color isDark ? #606984 : rgba(0, 0, 0, 0.6)
|
color isDark ? #606984 : rgba(#000, 0.6)
|
||||||
font-size small
|
font-size small
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
|
@ -250,10 +250,10 @@ root(isDark)
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.note-preview
|
.note-preview
|
||||||
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
|
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||||
|
|
||||||
.note-ref
|
.note-ref
|
||||||
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
|
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
font-size 1em
|
font-size 1em
|
||||||
|
@ -282,7 +282,7 @@ root(isDark)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color isDark ? #666b79 : #aaa
|
color isDark ? #666b79 : #aaa
|
||||||
background isDark ? #242731 : #fdfdfd
|
background isDark ? #242731 : #fdfdfd
|
||||||
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||||
|
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
@ -295,13 +295,13 @@ root(isDark)
|
||||||
width 100%
|
width 100%
|
||||||
padding 16px
|
padding 16px
|
||||||
color #555
|
color #555
|
||||||
border-top solid 1px rgba(0, 0, 0, 0.05)
|
border-top solid 1px rgba(#000, 0.05)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.025)
|
background rgba(#000, 0.025)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
&.fetching
|
&.fetching
|
||||||
cursor wait
|
cursor wait
|
||||||
|
|
|
@ -364,7 +364,6 @@ root(isDark)
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
> .content
|
> .content
|
||||||
|
|
||||||
> input
|
> input
|
||||||
> textarea
|
> textarea
|
||||||
display block
|
display block
|
||||||
|
@ -585,7 +584,7 @@ root(isDark)
|
||||||
color rgba($theme-color, 0.6)
|
color rgba($theme-color, 0.6)
|
||||||
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
|
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color rgba($theme-color, 0.5)
|
||||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
|
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
&:after
|
&:after
|
||||||
|
|
|
@ -59,7 +59,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
root(isDark)
|
root(isDark)
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> header
|
> header
|
||||||
|
|
|
@ -165,7 +165,7 @@ root(isDark)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
background $bgcolor
|
background $bgcolor
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
|
box-shadow 0 1px 4px rgba(#000, 0.25)
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
content ""
|
content ""
|
||||||
|
@ -176,7 +176,7 @@ root(isDark)
|
||||||
right 12px
|
right 12px
|
||||||
border-top solid 14px transparent
|
border-top solid 14px transparent
|
||||||
border-right solid 14px transparent
|
border-right solid 14px transparent
|
||||||
border-bottom solid 14px rgba(0, 0, 0, 0.1)
|
border-bottom solid 14px rgba(#000, 0.1)
|
||||||
border-left solid 14px transparent
|
border-left solid 14px transparent
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
|
|
|
@ -125,7 +125,7 @@ root(isDark)
|
||||||
width 300px
|
width 300px
|
||||||
background $bgcolor
|
background $bgcolor
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
|
box-shadow 0 1px 4px rgba(#000, 0.25)
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
content ""
|
content ""
|
||||||
|
@ -136,7 +136,7 @@ root(isDark)
|
||||||
right 74px
|
right 74px
|
||||||
border-top solid 14px transparent
|
border-top solid 14px transparent
|
||||||
border-right solid 14px transparent
|
border-right solid 14px transparent
|
||||||
border-bottom solid 14px rgba(0, 0, 0, 0.1)
|
border-bottom solid 14px rgba(#000, 0.1)
|
||||||
border-left solid 14px transparent
|
border-left solid 14px transparent
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
|
|
|
@ -50,7 +50,7 @@ export default Vue.extend({
|
||||||
width 14em
|
width 14em
|
||||||
height 32px
|
height 32px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
background rgba(0, 0, 0, 0.05)
|
background rgba(#000, 0.05)
|
||||||
outline none
|
outline none
|
||||||
//border solid 1px #ddd
|
//border solid 1px #ddd
|
||||||
border none
|
border none
|
||||||
|
@ -62,7 +62,7 @@ export default Vue.extend({
|
||||||
color #9eaba8
|
color #9eaba8
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.08)
|
background rgba(#000, 0.08)
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
|
box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
|
||||||
|
|
|
@ -103,7 +103,7 @@ root(isDark)
|
||||||
top 0
|
top 0
|
||||||
z-index 1000
|
z-index 1000
|
||||||
width 100%
|
width 100%
|
||||||
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
|
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||||
|
|
||||||
> .main
|
> .main
|
||||||
height 48px
|
height 48px
|
||||||
|
|
|
@ -94,7 +94,7 @@ root(isDark)
|
||||||
width 250px
|
width 250px
|
||||||
background isDark ? #282c37 : #fff
|
background isDark ? #282c37 : #fff
|
||||||
background-clip content-box
|
background-clip content-box
|
||||||
border solid 1px rgba(0, 0, 0, 0.1)
|
border solid 1px rgba(#000, 0.1)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
|
@ -119,7 +119,7 @@ export default Vue.extend({
|
||||||
overflow auto
|
overflow auto
|
||||||
|
|
||||||
> *
|
> *
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px rgba(#000, 0.05)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
max-width 600px
|
max-width 600px
|
||||||
|
|
|
@ -36,7 +36,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
root(isDark)
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ root(isDark)
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color isDark ? #e3e5e8 : #888
|
color isDark ? #e3e5e8 : #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 6px
|
margin-right 6px
|
||||||
|
|
|
@ -17,14 +17,16 @@
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div>
|
<template v-if="canResize">
|
||||||
<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div>
|
<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
|
||||||
<div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div>
|
<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
|
||||||
<div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div>
|
<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
|
||||||
<div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div>
|
<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
|
||||||
<div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div>
|
<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
|
||||||
<div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div>
|
<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
|
||||||
<div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
|
<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
|
||||||
|
<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -85,7 +87,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
isFlexible(): boolean {
|
isFlexible(): boolean {
|
||||||
return this.height == null;
|
return this.height == 'auto';
|
||||||
},
|
},
|
||||||
canResize(): boolean {
|
canResize(): boolean {
|
||||||
return !this.isFlexible;
|
return !this.isFlexible;
|
||||||
|
@ -476,7 +478,7 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.7)
|
background rgba(#000, 0.7)
|
||||||
opacity 0
|
opacity 0
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
|
@ -493,7 +495,7 @@ root(isDark)
|
||||||
&:focus
|
&:focus
|
||||||
&:not([data-is-modal])
|
&:not([data-is-modal])
|
||||||
> .body
|
> .body
|
||||||
box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
|
||||||
|
|
||||||
> .handle
|
> .handle
|
||||||
$size = 8px
|
$size = 8px
|
||||||
|
@ -561,7 +563,7 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background isDark ? #282C37 : #fff
|
background isDark ? #282C37 : #fff
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
|
box-shadow 0 2px 6px 0 rgba(#000, 0.2)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
$header-height = 40px
|
$header-height = 40px
|
||||||
|
|
|
@ -114,7 +114,7 @@ export default Vue.extend({
|
||||||
.notes
|
.notes
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.followers-you-know
|
.followers-you-know
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
|
@ -49,7 +49,7 @@ export default Vue.extend({
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> i
|
> i
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -44,7 +44,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.friends
|
.friends
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
|
@ -55,7 +55,7 @@ export default Vue.extend({
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> i
|
> i
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -72,7 +72,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background #f7f7f7
|
background #f7f7f7
|
||||||
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
|
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||||
|
|
||||||
> .is-suspended
|
> .is-suspended
|
||||||
> .is-remote
|
> .is-remote
|
||||||
|
@ -99,7 +99,7 @@ export default Vue.extend({
|
||||||
background-color #383838
|
background-color #383838
|
||||||
|
|
||||||
> .fade
|
> .fade
|
||||||
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
|
background linear-gradient(transparent, rgba(#000, 0.7))
|
||||||
|
|
||||||
> .container
|
> .container
|
||||||
> .title
|
> .title
|
||||||
|
@ -142,7 +142,7 @@ export default Vue.extend({
|
||||||
margin 0
|
margin 0
|
||||||
border solid 3px #fff
|
border solid 3px #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
|
box-shadow 1px 1px 3px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
position absolute
|
position absolute
|
||||||
|
|
|
@ -65,7 +65,7 @@ export default Vue.extend({
|
||||||
width calc(100% - 275px * 2)
|
width calc(100% - 275px * 2)
|
||||||
|
|
||||||
> .timeline
|
> .timeline
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> div
|
> div
|
||||||
|
@ -91,7 +91,7 @@ export default Vue.extend({
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #aaa
|
color #aaa
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
a
|
a
|
||||||
|
|
|
@ -41,7 +41,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.photos
|
.photos
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
|
@ -52,7 +52,7 @@ export default Vue.extend({
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> i
|
> i
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -118,7 +118,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.profile
|
.profile
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> *:first-child
|
> *:first-child
|
||||||
|
|
|
@ -231,14 +231,14 @@ export default Vue.extend({
|
||||||
width 410px
|
width 410px
|
||||||
background #fff
|
background #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1)
|
box-shadow 0 0 0 12px rgba(#000, 0.1)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
> header
|
> header
|
||||||
z-index 1
|
z-index 1
|
||||||
padding 12px 16px
|
padding 12px 16px
|
||||||
color #888d94
|
color #888d94
|
||||||
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
|
box-shadow 0 1px 0px rgba(#000, 0.1)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
position absolute
|
position absolute
|
||||||
|
|
|
@ -61,7 +61,7 @@ export default define({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mkw-channel
|
.mkw-channel
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
@ -73,7 +73,7 @@ export default define({
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -59,7 +59,7 @@ export default define({
|
||||||
.mkw-post-form
|
.mkw-post-form
|
||||||
background #fff
|
background #fff
|
||||||
overflow hidden
|
overflow hidden
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
|
@ -70,7 +70,7 @@ export default define({
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color #888
|
color #888
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -45,7 +45,7 @@ export default define({
|
||||||
root(isDark)
|
root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background isDark ? #282c37 : #fff
|
background isDark ? #282c37 : #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
border solid 1px rgba(#000, 0.075)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&[data-compact]
|
&[data-compact]
|
||||||
|
@ -54,14 +54,14 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.5)
|
background rgba(#000, 0.5)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
top ((100px - 58px) / 2)
|
top ((100px - 58px) / 2)
|
||||||
left ((100px - 58px) / 2)
|
left ((100px - 58px) / 2)
|
||||||
border none
|
border none
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
|
box-shadow 0 0 16px rgba(#000, 0.5)
|
||||||
|
|
||||||
> .name
|
> .name
|
||||||
position absolute
|
position absolute
|
||||||
|
@ -70,7 +70,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
line-height 100px
|
line-height 100px
|
||||||
color #fff
|
color #fff
|
||||||
text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
|
text-shadow 0 0 8px rgba(#000, 0.5)
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
display none
|
display none
|
||||||
|
|
|
@ -54,7 +54,7 @@ export default Vue.extend({
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
padding 8px
|
padding 8px
|
||||||
background rgba(0, 0, 0, 0.2)
|
background rgba(#000, 0.2)
|
||||||
|
|
||||||
> .body
|
> .body
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
padding 8px
|
padding 8px
|
||||||
background rgba(0, 0, 0, 0.2)
|
background rgba(#000, 0.2)
|
||||||
|
|
||||||
> .body
|
> .body
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -139,7 +139,7 @@ export default Vue.extend({
|
||||||
max-width 100%
|
max-width 100%
|
||||||
max-height 300px
|
max-height 300px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
|
box-shadow 1px 1px 4px rgba(#000, 0.2)
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
padding 8px 8px 0 8px
|
padding 8px 8px 0 8px
|
||||||
|
@ -226,7 +226,7 @@ export default Vue.extend({
|
||||||
background-color #767676
|
background-color #767676
|
||||||
background-image none
|
background-image none
|
||||||
border-color #444
|
border-color #444
|
||||||
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
|
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -474,11 +474,11 @@ export default Vue.extend({
|
||||||
overflow auto
|
overflow auto
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color rgba(0, 0, 0, 0.67)
|
color rgba(#000, 0.67)
|
||||||
-webkit-backdrop-filter blur(12px)
|
-webkit-backdrop-filter blur(12px)
|
||||||
backdrop-filter blur(12px)
|
backdrop-filter blur(12px)
|
||||||
background-color rgba(#fff, 0.75)
|
background-color rgba(#fff, 0.75)
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.13)
|
border-bottom solid 1px rgba(#000, 0.13)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
> a
|
> a
|
||||||
|
@ -555,7 +555,7 @@ export default Vue.extend({
|
||||||
display inline-block
|
display inline-block
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
background rgba(0, 0, 0, 0.2)
|
background rgba(#000, 0.2)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
|
|
||||||
animation sk-bounce 2.0s infinite ease-in-out
|
animation sk-bounce 2.0s infinite ease-in-out
|
||||||
|
|
|
@ -57,7 +57,7 @@ export default Vue.extend({
|
||||||
.mk-friends-maker
|
.mk-friends-maker
|
||||||
background #fff
|
background #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
|
<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
|
||||||
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
||||||
|
|
|
@ -107,10 +107,11 @@ root(isDark)
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background isDark ? #282C37 :#fff
|
background isDark ? #282C37 :#fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||||
|
|
||||||
.transition
|
.transition
|
||||||
.mk-notifications-enter
|
.mk-notifications-enter
|
||||||
|
@ -147,7 +148,7 @@ root(isDark)
|
||||||
width 100%
|
width 100%
|
||||||
padding 16px
|
padding 16px
|
||||||
color #555
|
color #555
|
||||||
border-top solid 1px rgba(0, 0, 0, 0.05)
|
border-top solid 1px rgba(#000, 0.05)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
|
@ -10,6 +10,10 @@
|
||||||
</header>
|
</header>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<mk-note-preview v-if="reply" :note="reply"/>
|
<mk-note-preview v-if="reply" :note="reply"/>
|
||||||
|
<div v-if="visibility == 'specified'" class="visibleUsers">
|
||||||
|
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
||||||
|
<a @click="addVisibleUser">+ユーザーを追加</a>
|
||||||
|
</div>
|
||||||
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
|
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
|
||||||
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea>
|
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea>
|
||||||
<div class="attaches" v-show="files.length != 0">
|
<div class="attaches" v-show="files.length != 0">
|
||||||
|
@ -27,6 +31,7 @@
|
||||||
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
|
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
|
||||||
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
|
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
|
||||||
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
|
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
|
||||||
|
<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
|
||||||
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,11 +40,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import * as XDraggable from 'vuedraggable';
|
import * as XDraggable from 'vuedraggable';
|
||||||
|
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||||
import getKao from '../../../common/scripts/get-kao';
|
import getKao from '../../../common/scripts/get-kao';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
components: {
|
components: {
|
||||||
XDraggable
|
XDraggable,
|
||||||
|
MkVisibilityChooser
|
||||||
},
|
},
|
||||||
|
|
||||||
props: ['reply'],
|
props: ['reply'],
|
||||||
|
@ -52,6 +59,8 @@ export default Vue.extend({
|
||||||
files: [],
|
files: [],
|
||||||
poll: false,
|
poll: false,
|
||||||
geo: null,
|
geo: null,
|
||||||
|
visibility: 'public',
|
||||||
|
visibleUsers: [],
|
||||||
useCw: false,
|
useCw: false,
|
||||||
cw: null
|
cw: null
|
||||||
};
|
};
|
||||||
|
@ -121,6 +130,33 @@ export default Vue.extend({
|
||||||
this.geo = null;
|
this.geo = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setVisibility() {
|
||||||
|
const w = (this as any).os.new(MkVisibilityChooser, {
|
||||||
|
source: this.$refs.visibilityButton,
|
||||||
|
compact: true,
|
||||||
|
v: this.visibility
|
||||||
|
});
|
||||||
|
w.$once('chosen', v => {
|
||||||
|
this.visibility = v;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addVisibleUser() {
|
||||||
|
(this as any).apis.input({
|
||||||
|
title: 'ユーザー名を入力してください'
|
||||||
|
}).then(username => {
|
||||||
|
(this as any).api('users/show', {
|
||||||
|
username
|
||||||
|
}).then(user => {
|
||||||
|
this.visibleUsers.push(user);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
removeVisibleUser(user) {
|
||||||
|
this.visibleUsers = this.visibleUsers.filter(u => u != user);
|
||||||
|
},
|
||||||
|
|
||||||
clear() {
|
clear() {
|
||||||
this.text = '';
|
this.text = '';
|
||||||
this.files = [];
|
this.files = [];
|
||||||
|
@ -145,6 +181,8 @@ export default Vue.extend({
|
||||||
heading: isNaN(this.geo.heading) ? null : this.geo.heading,
|
heading: isNaN(this.geo.heading) ? null : this.geo.heading,
|
||||||
speed: this.geo.speed,
|
speed: this.geo.speed,
|
||||||
} : null,
|
} : null,
|
||||||
|
visibility: this.visibility,
|
||||||
|
visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
|
||||||
viaMobile: viaMobile
|
viaMobile: viaMobile
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
this.$emit('note');
|
this.$emit('note');
|
||||||
|
@ -169,33 +207,33 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.mk-post-form
|
root(isDark)
|
||||||
max-width 500px
|
max-width 500px
|
||||||
width calc(100% - 16px)
|
width calc(100% - 16px)
|
||||||
margin 8px auto
|
margin 8px auto
|
||||||
background #fff
|
background isDark ? #282C37 : #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
margin 16px auto
|
margin 16px auto
|
||||||
width calc(100% - 32px)
|
width calc(100% - 32px)
|
||||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||||
|
|
||||||
@media (min-width 600px)
|
@media (min-width 600px)
|
||||||
margin 32px auto
|
margin 32px auto
|
||||||
|
|
||||||
> header
|
> header
|
||||||
z-index 1
|
z-index 1000
|
||||||
height 50px
|
height 50px
|
||||||
box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1)
|
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
|
||||||
|
|
||||||
> .cancel
|
> .cancel
|
||||||
padding 0
|
padding 0
|
||||||
width 50px
|
width 50px
|
||||||
line-height 50px
|
line-height 50px
|
||||||
font-size 24px
|
font-size 24px
|
||||||
color #555
|
color isDark ? #9baec8 : #555
|
||||||
|
|
||||||
> div
|
> div
|
||||||
position absolute
|
position absolute
|
||||||
|
@ -229,6 +267,38 @@ export default Vue.extend({
|
||||||
> .mk-note-preview
|
> .mk-note-preview
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
||||||
|
> .visibleUsers
|
||||||
|
margin-bottom 8px
|
||||||
|
font-size 14px
|
||||||
|
|
||||||
|
> span
|
||||||
|
margin-right 16px
|
||||||
|
color isDark ? #fff : #666
|
||||||
|
|
||||||
|
> input
|
||||||
|
z-index 1
|
||||||
|
|
||||||
|
> input
|
||||||
|
> textarea
|
||||||
|
display block
|
||||||
|
padding 12px
|
||||||
|
margin 0
|
||||||
|
width 100%
|
||||||
|
font-size 16px
|
||||||
|
color isDark ? #fff : #333
|
||||||
|
background isDark ? #191d23 : #fff
|
||||||
|
border none
|
||||||
|
border-radius 0
|
||||||
|
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
opacity 0.5
|
||||||
|
|
||||||
|
> textarea
|
||||||
|
max-width 100%
|
||||||
|
min-width 100%
|
||||||
|
min-height 80px
|
||||||
|
|
||||||
> .attaches
|
> .attaches
|
||||||
|
|
||||||
> .files
|
> .files
|
||||||
|
@ -262,31 +332,12 @@ export default Vue.extend({
|
||||||
> .file
|
> .file
|
||||||
display none
|
display none
|
||||||
|
|
||||||
> input
|
|
||||||
> textarea
|
|
||||||
display block
|
|
||||||
padding 12px
|
|
||||||
margin 0
|
|
||||||
width 100%
|
|
||||||
font-size 16px
|
|
||||||
color #333
|
|
||||||
border none
|
|
||||||
border-bottom solid 1px #ddd
|
|
||||||
border-radius 0
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.5
|
|
||||||
|
|
||||||
> textarea
|
|
||||||
max-width 100%
|
|
||||||
min-width 100%
|
|
||||||
min-height 80px
|
|
||||||
|
|
||||||
> .upload
|
> .upload
|
||||||
> .drive
|
> .drive
|
||||||
> .kao
|
> .kao
|
||||||
> .poll
|
> .poll
|
||||||
> .geo
|
> .geo
|
||||||
|
> .visibility
|
||||||
display inline-block
|
display inline-block
|
||||||
padding 0
|
padding 0
|
||||||
margin 0
|
margin 0
|
||||||
|
@ -300,5 +351,10 @@ export default Vue.extend({
|
||||||
border-radius 0
|
border-radius 0
|
||||||
box-shadow none
|
box-shadow none
|
||||||
|
|
||||||
</style>
|
.mk-post-form[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.mk-post-form:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
|
@ -74,7 +74,7 @@ export default Vue.extend({
|
||||||
justify-content center
|
justify-content center
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 600px
|
max-width 600px
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.2)
|
border-bottom solid 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display block
|
display block
|
||||||
|
@ -97,7 +97,7 @@ export default Vue.extend({
|
||||||
font-size 12px
|
font-size 12px
|
||||||
line-height 1
|
line-height 1
|
||||||
color #fff
|
color #fff
|
||||||
background rgba(0, 0, 0, 0.3)
|
background rgba(#000, 0.3)
|
||||||
border-radius 20px
|
border-radius 20px
|
||||||
|
|
||||||
> .users
|
> .users
|
||||||
|
@ -106,14 +106,14 @@ export default Vue.extend({
|
||||||
width calc(100% - 16px)
|
width calc(100% - 16px)
|
||||||
background #fff
|
background #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
margin 16px auto
|
margin 16px auto
|
||||||
width calc(100% - 32px)
|
width calc(100% - 32px)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px rgba(#000, 0.05)
|
||||||
|
|
||||||
> .no
|
> .no
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default Vue.extend({
|
||||||
.mk-widget-container
|
.mk-widget-container
|
||||||
background #eee
|
background #eee
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
&.hideHeader
|
&.hideHeader
|
||||||
|
|
|
@ -121,7 +121,7 @@ root(isDark)
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background isDark ? #272f3a : #fff
|
background isDark ? #272f3a : #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
|
box-shadow 0 0 16px rgba(#000, 0.1)
|
||||||
|
|
||||||
$balloon-size = 16px
|
$balloon-size = 16px
|
||||||
|
|
||||||
|
|
|
@ -136,7 +136,7 @@ export default Vue.extend({
|
||||||
.form
|
.form
|
||||||
position relative
|
position relative
|
||||||
background #fff
|
background #fff
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
|
@ -145,7 +145,7 @@ export default Vue.extend({
|
||||||
position absolute
|
position absolute
|
||||||
bottom -20px
|
bottom -20px
|
||||||
left calc(50% - 10px)
|
left calc(50% - 10px)
|
||||||
border-top solid 10px rgba(0, 0, 0, 0.2)
|
border-top solid 10px rgba(#000, 0.2)
|
||||||
border-right solid 10px transparent
|
border-right solid 10px transparent
|
||||||
border-bottom solid 10px transparent
|
border-bottom solid 10px transparent
|
||||||
border-left solid 10px transparent
|
border-left solid 10px transparent
|
||||||
|
|
|
@ -84,7 +84,7 @@ export default Vue.extend({
|
||||||
width calc(100% - 16px)
|
width calc(100% - 16px)
|
||||||
background #fff
|
background #fff
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
margin 16px auto
|
margin 16px auto
|
||||||
|
|
|
@ -62,7 +62,7 @@ export default Vue.extend({
|
||||||
width 100%
|
width 100%
|
||||||
z-index 1000
|
z-index 1000
|
||||||
background #fff
|
background #fff
|
||||||
box-shadow 0 1px rgba(0, 0, 0, 0.1)
|
box-shadow 0 1px rgba(#000, 0.1)
|
||||||
|
|
||||||
> h1
|
> h1
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
@ -62,7 +62,7 @@ export default Vue.extend({
|
||||||
width calc(100% - 32px)
|
width calc(100% - 32px)
|
||||||
list-style none
|
list-style none
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.2)
|
border solid 1px rgba(#000, 0.2)
|
||||||
border-radius $radius
|
border-radius $radius
|
||||||
|
|
||||||
> li
|
> li
|
||||||
|
@ -70,7 +70,7 @@ export default Vue.extend({
|
||||||
border-bottom solid 1px #ddd
|
border-bottom solid 1px #ddd
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(#000, 0.1)
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
border-top-left-radius $radius
|
border-top-left-radius $radius
|
||||||
|
|
|
@ -40,7 +40,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.form
|
.form
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.2)
|
border solid 1px rgba(#000, 0.2)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
|
|
@ -108,7 +108,7 @@ export default Vue.extend({
|
||||||
.form
|
.form
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.2)
|
border solid 1px rgba(#000, 0.2)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
@ -131,7 +131,7 @@ export default Vue.extend({
|
||||||
margin 0 0 16px 0
|
margin 0 0 16px 0
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color rgba(0, 0, 0, 0.7)
|
color rgba(#000, 0.7)
|
||||||
background #fff
|
background #fff
|
||||||
outline none
|
outline none
|
||||||
border solid 1px #ddd
|
border solid 1px #ddd
|
||||||
|
@ -156,7 +156,7 @@ export default Vue.extend({
|
||||||
background-color #767676
|
background-color #767676
|
||||||
background-image none
|
background-image none
|
||||||
border-color #444
|
border-color #444
|
||||||
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
|
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
padding 16px
|
padding 16px
|
||||||
|
@ -164,7 +164,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
> .tl
|
> .tl
|
||||||
background #fff
|
background #fff
|
||||||
border solid 1px rgba(0, 0, 0, 0.2)
|
border solid 1px rgba(#000, 0.2)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
|
|
|
@ -34,7 +34,7 @@ export default define({
|
||||||
display block
|
display block
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(0, 0, 0, 0.5)
|
background rgba(#000, 0.5)
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
display block
|
display block
|
||||||
|
@ -47,7 +47,7 @@ export default define({
|
||||||
left ((100px - 58px) / 2)
|
left ((100px - 58px) / 2)
|
||||||
border none
|
border none
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
|
box-shadow 0 0 16px rgba(#000, 0.5)
|
||||||
|
|
||||||
.name
|
.name
|
||||||
display block
|
display block
|
||||||
|
@ -58,6 +58,6 @@ export default define({
|
||||||
line-height 100px
|
line-height 100px
|
||||||
color #fff
|
color #fff
|
||||||
font-weight bold
|
font-weight bold
|
||||||
text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
|
text-shadow 0 0 8px rgba(#000, 0.5)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,6 +3,10 @@
|
||||||
* @param {*} note 投稿
|
* @param {*} note 投稿
|
||||||
*/
|
*/
|
||||||
const summarize = (note: any): string => {
|
const summarize = (note: any): string => {
|
||||||
|
if (note.isHidden) {
|
||||||
|
return '(非公開の投稿)';
|
||||||
|
}
|
||||||
|
|
||||||
let summary = '';
|
let summary = '';
|
||||||
|
|
||||||
// チャンネル
|
// チャンネル
|
||||||
|
|
Loading…
Reference in New Issue