syuilo
@@ -128,11 +128,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
color isDark ? #c5ced6 : #777
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-calendar
|
||||
color var(--calendarDay)
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -149,12 +147,10 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color isDark ? #c5ced6 : #888
|
||||
color var(--faceHeaderText)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
if isDark
|
||||
background #313543
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
@@ -166,13 +162,13 @@ root(isDark)
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
&:first-of-type
|
||||
left 0
|
||||
@@ -195,65 +191,56 @@ root(isDark)
|
||||
font-size 14px
|
||||
|
||||
&.weekday
|
||||
color isDark ? #43d5dc : #19a2a9
|
||||
color var(--calendarWeek)
|
||||
|
||||
&[data-is-donichi]
|
||||
color isDark ? #ff6679 : #ef95a0
|
||||
color var(--calendarSaturdayOrSunday)
|
||||
|
||||
&[data-today]
|
||||
box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
|
||||
box-shadow 0 0 0 1px var(--calendarWeek) inset
|
||||
border-radius 6px
|
||||
|
||||
&[data-is-donichi]
|
||||
box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
|
||||
box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
|
||||
|
||||
&.day
|
||||
cursor pointer
|
||||
color isDark ? #c5ced6 : #777
|
||||
color var(--calendarDay)
|
||||
|
||||
> div
|
||||
border-radius 6px
|
||||
|
||||
&:hover > div
|
||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
||||
background var(--faceClearButtonHover)
|
||||
|
||||
&:active > div
|
||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
||||
background var(--faceClearButtonActive)
|
||||
|
||||
&[data-is-donichi]
|
||||
color isDark ? #ff6679 : #ef95a0
|
||||
color var(--calendarSaturdayOrSunday)
|
||||
|
||||
&[data-is-out-of-range]
|
||||
cursor default
|
||||
color rgba(isDark ? #c5ced6 : #777, 0.5)
|
||||
|
||||
&[data-is-donichi]
|
||||
color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
|
||||
opacity 0.5
|
||||
|
||||
&[data-selected]
|
||||
font-weight bold
|
||||
|
||||
> div
|
||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
||||
background var(--faceClearButtonHover)
|
||||
|
||||
&:active > div
|
||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
||||
background var(--faceClearButtonActive)
|
||||
|
||||
&[data-today]
|
||||
> div
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:hover > div
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active > div
|
||||
background darken($theme-color, 10%)
|
||||
|
||||
.mk-calendar[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-calendar:not([data-darkmode])
|
||||
root(false)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -649,7 +649,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.gkgckalzgidaygcxnugepioremxvxvpt
|
||||
padding 32px
|
||||
@@ -675,7 +675,7 @@ export default Vue.extend({
|
||||
|
||||
*
|
||||
&:not(.active)
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor pointer
|
||||
|
||||
> div
|
||||
|
||||
@@ -59,7 +59,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.title
|
||||
> [data-fa]
|
||||
@@ -74,7 +74,7 @@ export default Vue.extend({
|
||||
|
||||
.footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.upload
|
||||
display inline-block
|
||||
@@ -87,7 +87,7 @@ export default Vue.extend({
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
@@ -95,13 +95,13 @@ export default Vue.extend({
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.3)
|
||||
border-color var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
color var(--primaryAlpha06)
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.5)
|
||||
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
|
||||
border-color var(--primaryAlpha05)
|
||||
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
@@ -112,7 +112,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
.ok
|
||||
@@ -138,7 +138,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -147,20 +147,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@@ -37,7 +37,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.title
|
||||
> [data-fa]
|
||||
@@ -48,7 +48,7 @@ export default Vue.extend({
|
||||
|
||||
.footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@@ -73,7 +73,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -82,20 +82,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@@ -31,9 +31,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.menu
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
@@ -48,7 +46,7 @@ root(isDark)
|
||||
&.divider
|
||||
margin-top $padding
|
||||
padding-top $padding
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
&.nest
|
||||
> p
|
||||
@@ -69,7 +67,7 @@ root(isDark)
|
||||
|
||||
&:active
|
||||
> p, a
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> p, a
|
||||
display block
|
||||
@@ -77,7 +75,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0 32px 0 38px
|
||||
line-height $item-height
|
||||
color isDark ? #c8cece : #868C8C
|
||||
color var(--text)
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
|
||||
@@ -90,14 +88,14 @@ root(isDark)
|
||||
&:hover
|
||||
> p, a
|
||||
text-decoration none
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
&:active
|
||||
> p, a
|
||||
text-decoration none
|
||||
background darken($theme-color, 10%)
|
||||
color $theme-color-foreground
|
||||
background var(--primaryDarken10)
|
||||
color var(--primaryForeground)
|
||||
|
||||
li > ul
|
||||
visibility hidden
|
||||
@@ -106,17 +104,11 @@ root(isDark)
|
||||
left $width
|
||||
margin-top -($padding)
|
||||
width $width
|
||||
background isDark ? #282c37 :#fff
|
||||
background var(--popupBg)
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||
transition visibility 0s linear 0.2s
|
||||
|
||||
.menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
|
||||
@@ -71,7 +71,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.context-menu
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
@@ -82,15 +82,9 @@ root(isDark)
|
||||
z-index 4096
|
||||
width $width
|
||||
font-size 0.8em
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--popupBg)
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||
opacity 0
|
||||
|
||||
.context-menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.context-menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -61,7 +61,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
> [data-fa]
|
||||
@@ -73,7 +73,7 @@ export default Vue.extend({
|
||||
|
||||
.actions
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@@ -98,7 +98,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -111,20 +111,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
.skip
|
||||
@@ -155,11 +155,11 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.cropper-view-box {
|
||||
outline-color: $theme-color;
|
||||
outline-color: var(--primary);
|
||||
}
|
||||
|
||||
.cropper-line, .cropper-point {
|
||||
background-color: $theme-color;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.cropper-bg {
|
||||
|
||||
@@ -91,7 +91,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-dialog
|
||||
> .bg
|
||||
@@ -144,20 +144,20 @@ export default Vue.extend({
|
||||
margin 0 0.375em
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
color var(--primaryDarken10)
|
||||
transition color 0s ease
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
margin 1em 0
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
// color #43A4EC
|
||||
font-weight bold
|
||||
|
||||
|
||||
@@ -200,9 +200,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv
|
||||
padding 8px 0 0 0
|
||||
height 180px
|
||||
border-radius 4px
|
||||
@@ -237,13 +235,13 @@ root(isDark)
|
||||
background #ce2212
|
||||
|
||||
&[data-is-selected]
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
> .label
|
||||
&:before
|
||||
@@ -251,7 +249,7 @@ root(isDark)
|
||||
display none
|
||||
|
||||
> .name
|
||||
color $theme-color-foreground
|
||||
color var(--primaryForeground)
|
||||
|
||||
&[data-is-contextmenu-showing]
|
||||
&:after
|
||||
@@ -262,7 +260,7 @@ root(isDark)
|
||||
right -4px
|
||||
bottom -4px
|
||||
left -4px
|
||||
border 2px dashed rgba($theme-color, 0.3)
|
||||
border 2px dashed var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
> .label
|
||||
@@ -337,16 +335,10 @@ root(isDark)
|
||||
font-size 0.8em
|
||||
text-align center
|
||||
word-break break-all
|
||||
color isDark ? #fff : #444
|
||||
color var(--text)
|
||||
overflow hidden
|
||||
|
||||
> .ext
|
||||
opacity 0.5
|
||||
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -214,12 +214,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd
|
||||
padding 8px
|
||||
height 64px
|
||||
background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
|
||||
background var(--desktopDriveFolderBg)
|
||||
border-radius 4px
|
||||
|
||||
&, *
|
||||
@@ -229,10 +227,10 @@ root(isDark)
|
||||
pointer-events none
|
||||
|
||||
&:hover
|
||||
background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
||||
background var(--desktopDriveFolderHoverBg)
|
||||
|
||||
&:active
|
||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
|
||||
background var(--desktopDriveFolderActiveBg)
|
||||
|
||||
&[data-is-contextmenu-showing]
|
||||
&[data-draghover]
|
||||
@@ -244,26 +242,20 @@ root(isDark)
|
||||
right -4px
|
||||
bottom -4px
|
||||
left -4px
|
||||
border 2px dashed rgba($theme-color, 0.3)
|
||||
border 2px dashed var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
&[data-draghover]
|
||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
||||
background var(--desktopDriveFolderActiveBg)
|
||||
|
||||
> .name
|
||||
margin 0
|
||||
font-size 0.9em
|
||||
color isDark ? #fff : darken($theme-color, 30%)
|
||||
color var(--desktopDriveFolderFg)
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
margin-left 2px
|
||||
text-align left
|
||||
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -585,18 +585,15 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.mk-drive
|
||||
> nav
|
||||
display block
|
||||
z-index 2
|
||||
width 100%
|
||||
overflow auto
|
||||
font-size 0.9em
|
||||
color isDark ? #d2d9dc : #555
|
||||
background isDark ? #282c37 : #fff
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 1px 0 rgba(#000, 0.05)
|
||||
|
||||
&, *
|
||||
@@ -674,7 +671,7 @@ root(isDark)
|
||||
padding 8px
|
||||
height calc(100% - 38px)
|
||||
overflow auto
|
||||
background isDark ? #191b22 : #fff
|
||||
background var(--desktopDriveBg)
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
@@ -697,8 +694,8 @@ root(isDark)
|
||||
z-index 128
|
||||
top 0
|
||||
left 0
|
||||
border solid 1px $theme-color
|
||||
background rgba($theme-color, 0.5)
|
||||
border solid 1px var(--primary)
|
||||
background var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
> .contents
|
||||
@@ -769,7 +766,7 @@ root(isDark)
|
||||
top 38px
|
||||
width 100%
|
||||
height calc(100% - 38px)
|
||||
border dashed 2px rgba($theme-color, 0.5)
|
||||
border dashed 2px var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
> .mk-uploader
|
||||
@@ -780,10 +777,4 @@ root(isDark)
|
||||
> input
|
||||
display none
|
||||
|
||||
.mk-drive[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-drive:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -101,9 +101,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-follow-button
|
||||
display block
|
||||
cursor pointer
|
||||
padding 0
|
||||
@@ -126,37 +124,34 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:not(.active)
|
||||
color isDark ? #fff : #888
|
||||
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px isDark ? #1c2023 : #e2e2e2
|
||||
color var(--primary)
|
||||
border solid 1px var(--primary)
|
||||
|
||||
&:hover
|
||||
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
background var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
background isDark ? #22262f : #ececec
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
background var(--primaryAlpha05)
|
||||
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border solid 1px var(--primary)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background var(--primaryLighten5)
|
||||
border-color var(--primaryLighten5)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primaryDarken5)
|
||||
border-color var(--primaryDarken5)
|
||||
|
||||
&.wait
|
||||
cursor wait !important
|
||||
@@ -167,10 +162,4 @@ root(isDark)
|
||||
height 38px
|
||||
line-height 38px
|
||||
|
||||
.mk-follow-button[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-follow-button:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -247,9 +247,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-home
|
||||
display block
|
||||
|
||||
&[data-customize]
|
||||
@@ -279,8 +277,8 @@ root(isDark)
|
||||
left 0
|
||||
width 100%
|
||||
height 48px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #313543 : #f7f7f7
|
||||
color var(--text)
|
||||
background var(--desktopHeaderBg)
|
||||
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||
|
||||
> a
|
||||
@@ -292,15 +290,15 @@ root(isDark)
|
||||
padding 0 16px
|
||||
line-height 48px
|
||||
text-decoration none
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
transition background 0.1s ease
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
transition background 0s ease
|
||||
|
||||
> [data-fa]
|
||||
@@ -320,7 +318,7 @@ root(isDark)
|
||||
line-height 48px
|
||||
|
||||
&.trash
|
||||
border-left solid 1px isDark ? #1c2023 : #ddd
|
||||
border-left solid 1px var(--faceDivider)
|
||||
|
||||
> div
|
||||
width 100%
|
||||
@@ -395,10 +393,4 @@ root(isDark)
|
||||
max-width 700px
|
||||
margin 0 auto
|
||||
|
||||
.mk-home[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-home:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default Vue.extend({
|
||||
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
> [data-fa]
|
||||
@@ -96,25 +96,25 @@ export default Vue.extend({
|
||||
color #333
|
||||
background #fff
|
||||
outline none
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-radius 4px
|
||||
transition border-color .3s ease
|
||||
|
||||
&:hover
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
color $theme-color
|
||||
border-color rgba($theme-color, 0.5)
|
||||
color var(--primary)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&::-webkit-input-placeholder
|
||||
color rgba($theme-color, 0.3)
|
||||
color var(--primaryAlpha03)
|
||||
|
||||
.actions
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@@ -139,7 +139,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -148,20 +148,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@@ -225,12 +225,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-note-detail
|
||||
overflow hidden
|
||||
text-align left
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
@@ -243,28 +241,28 @@ root(isDark)
|
||||
text-align center
|
||||
color #999
|
||||
cursor pointer
|
||||
background isDark ? #21242d : #fafafa
|
||||
background var(--subNoteBg)
|
||||
outline none
|
||||
border none
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
||||
border-radius 6px 6px 0 0
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
border-radius var(--round) var(--round) 0 0
|
||||
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f6f6f6
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #f0f0f0
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
&:disabled
|
||||
color isDark ? #21242b : #ccc
|
||||
cursor wait
|
||||
|
||||
> .conversation
|
||||
> *
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> .renote
|
||||
color #9dbb00
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
color var(--renoteText)
|
||||
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
@@ -287,7 +285,7 @@ root(isDark)
|
||||
padding-top 8px
|
||||
|
||||
> .reply-to
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> article
|
||||
padding 28px 32px 18px 32px
|
||||
@@ -299,7 +297,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
> footer > button
|
||||
color isDark ? #707b97 : #888
|
||||
color var(--noteActionsHighlighted)
|
||||
|
||||
> .avatar
|
||||
width 60px
|
||||
@@ -316,7 +314,7 @@ root(isDark)
|
||||
display inline-block
|
||||
margin 0
|
||||
line-height 24px
|
||||
color isDark ? #fff : #627079
|
||||
color var(--noteHeaderName)
|
||||
font-size 18px
|
||||
font-weight 700
|
||||
text-align left
|
||||
@@ -329,14 +327,14 @@ root(isDark)
|
||||
display block
|
||||
text-align left
|
||||
margin 0
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteHeaderAcct)
|
||||
|
||||
> .time
|
||||
position absolute
|
||||
top 0
|
||||
right 32px
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
|
||||
> .body
|
||||
padding 8px 0
|
||||
@@ -347,7 +345,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@@ -360,14 +358,14 @@ root(isDark)
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.5em
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .renote
|
||||
margin 8px 0
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px #c0dac6
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> .location
|
||||
@@ -394,20 +392,20 @@ root(isDark)
|
||||
background transparent
|
||||
border none
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteActions)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #a1a8bf : #444
|
||||
color var(--noteActionsHover)
|
||||
|
||||
&.replyButton:hover
|
||||
color #0af
|
||||
color var(--noteActionsReplyHover)
|
||||
|
||||
&.renoteButton:hover
|
||||
color #8d0
|
||||
color var(--noteActionsRenoteHover)
|
||||
|
||||
&.reactionButton:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
@@ -415,16 +413,10 @@ root(isDark)
|
||||
color #999
|
||||
|
||||
&.reacted, &.reacted:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
.mk-note-detail[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-detail:not([data-darkmode])
|
||||
root(false)
|
||||
border-top 1px solid var(--faceDivider)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -47,7 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj
|
||||
display flex
|
||||
font-size 0.9em
|
||||
|
||||
@@ -71,7 +71,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@@ -81,12 +81,6 @@ root(isDark)
|
||||
cursor default
|
||||
margin 0
|
||||
padding 0
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--subNoteText)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -42,12 +42,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql
|
||||
display flex
|
||||
margin 0
|
||||
padding 16px 32px
|
||||
font-size 0.9em
|
||||
background isDark ? #21242d : #fcfcfc
|
||||
background var(--subNoteBg)
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
@@ -72,7 +72,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@@ -82,16 +82,10 @@ root(isDark)
|
||||
cursor default
|
||||
margin 0
|
||||
padding 0
|
||||
color isDark ? #959ba7 : #717171
|
||||
color var(--subNoteText)
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -317,13 +317,11 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.note
|
||||
margin 0
|
||||
padding 0
|
||||
background isDark ? #282C37 : #fff
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
background var(--face)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&[data-round]
|
||||
&:first-child
|
||||
@@ -348,7 +346,7 @@ root(isDark)
|
||||
right 2px
|
||||
bottom 2px
|
||||
left 2px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
> .renote
|
||||
@@ -357,8 +355,8 @@ root(isDark)
|
||||
padding 16px 32px 8px 32px
|
||||
line-height 28px
|
||||
white-space pre
|
||||
color #9dbb00
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
color var(--renoteText)
|
||||
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||
|
||||
.avatar
|
||||
display inline-block
|
||||
@@ -398,7 +396,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color isDark ? #707b97 : #888
|
||||
color var(--noteActionsHighlighted)
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
@@ -426,7 +424,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@@ -439,7 +437,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
>>> .title
|
||||
display block
|
||||
@@ -447,7 +445,7 @@ root(isDark)
|
||||
padding 4px
|
||||
font-size 90%
|
||||
text-align center
|
||||
background isDark ? #2f3944 : #eef1f3
|
||||
background var(--mfmTitleBg)
|
||||
border-radius 4px
|
||||
|
||||
>>> .code
|
||||
@@ -456,17 +454,17 @@ root(isDark)
|
||||
>>> .quote
|
||||
margin 8px
|
||||
padding 6px 12px
|
||||
color isDark ? #6f808e : #aaa
|
||||
border-left solid 3px isDark ? #637182 : #eee
|
||||
color var(--mfmQuote)
|
||||
border-left solid 3px var(--mfmQuoteLine)
|
||||
|
||||
> .reply
|
||||
margin-right 8px
|
||||
color isDark ? #99abbf : #717171
|
||||
color var(--text)
|
||||
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color #a0bf46
|
||||
color var(--renoteText)
|
||||
|
||||
> .location
|
||||
margin 4px 0
|
||||
@@ -491,7 +489,7 @@ root(isDark)
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px isDark ? #4e945e : #c0dac6
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> footer
|
||||
@@ -500,22 +498,22 @@ root(isDark)
|
||||
padding 0 8px
|
||||
line-height 32px
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #ddd
|
||||
color var(--noteActions)
|
||||
background transparent
|
||||
border none
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #a1a8bf : #444
|
||||
color var(--noteActionsHover)
|
||||
|
||||
&.replyButton:hover
|
||||
color #0af
|
||||
color var(--noteActionsReplyHover)
|
||||
|
||||
&.renoteButton:hover
|
||||
color #8d0
|
||||
color var(--noteActionsRenoteHover)
|
||||
|
||||
&.reactionButton:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
@@ -523,18 +521,12 @@ root(isDark)
|
||||
color #999
|
||||
|
||||
&.reacted, &.reacted:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .detail
|
||||
padding-top 4px
|
||||
background rgba(#000, 0.0125)
|
||||
|
||||
.note[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.note:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@@ -557,7 +549,7 @@ root(isDark)
|
||||
padding 0 4px
|
||||
margin-left 4px
|
||||
font-size 80%
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border-radius 4px
|
||||
</style>
|
||||
|
||||
@@ -216,9 +216,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-notes
|
||||
.transition
|
||||
.mk-notes-enter
|
||||
.mk-notes-leave-to
|
||||
@@ -235,9 +233,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
font-size 14px
|
||||
text-align center
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@@ -250,7 +248,7 @@ root(isDark)
|
||||
position sticky
|
||||
z-index 100
|
||||
height 3px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> footer
|
||||
> button
|
||||
@@ -260,21 +258,15 @@ root(isDark)
|
||||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
background var(--face)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #eee
|
||||
|
||||
.mk-notes[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notes:not([data-darkmode])
|
||||
root(false)
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -191,7 +191,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-notifications
|
||||
.transition
|
||||
.mk-notifications-enter
|
||||
.mk-notifications-leave-to
|
||||
@@ -208,7 +208,7 @@ root(isDark)
|
||||
padding 16px
|
||||
overflow-wrap break-word
|
||||
font-size 13px
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
@@ -219,7 +219,7 @@ root(isDark)
|
||||
top 16px
|
||||
right 12px
|
||||
vertical-align top
|
||||
color isDark ? #606984 : rgba(#000, 0.6)
|
||||
color var(--noteHeaderInfo)
|
||||
font-size small
|
||||
|
||||
&:after
|
||||
@@ -249,10 +249,10 @@ root(isDark)
|
||||
margin-right 4px
|
||||
|
||||
.note-preview
|
||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||
color var(--noteText)
|
||||
|
||||
.note-ref
|
||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||
color var(--noteText)
|
||||
|
||||
[data-fa]
|
||||
font-size 1em
|
||||
@@ -283,9 +283,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@@ -327,10 +327,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mk-notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -77,7 +77,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-post-form-window
|
||||
.mk-post-form-window--header
|
||||
.icon
|
||||
margin-right 8px
|
||||
@@ -94,15 +94,6 @@ root(isDark)
|
||||
|
||||
.mk-post-form-window--body
|
||||
.notePreview
|
||||
if isDark
|
||||
margin 16px 22px 0 22px
|
||||
else
|
||||
margin 16px 22px
|
||||
|
||||
.mk-post-form-window[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-post-form-window:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -446,12 +446,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-post-form
|
||||
display block
|
||||
padding 16px
|
||||
background isDark ? #282C37 : lighten($theme-color, 95%)
|
||||
background var(--desktopPostFormBg)
|
||||
|
||||
&:after
|
||||
content ""
|
||||
@@ -465,26 +463,26 @@ root(isDark)
|
||||
width 100%
|
||||
padding 12px
|
||||
font-size 16px
|
||||
color isDark ? #fff : #333
|
||||
background isDark ? #191d23 : #fff
|
||||
color var(--desktopPostFormTextareaFg)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
outline none
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-radius 4px
|
||||
transition border-color .2s ease
|
||||
|
||||
&:hover
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
border-color rgba($theme-color, 0.5)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
|
||||
&::-webkit-input-placeholder
|
||||
color rgba($theme-color, 0.3)
|
||||
color var(--primaryAlpha03)
|
||||
|
||||
> input
|
||||
margin-bottom 8px
|
||||
@@ -498,17 +496,17 @@ root(isDark)
|
||||
&:hover
|
||||
& + *
|
||||
& + * + *
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
& + *
|
||||
& + * + *
|
||||
border-color rgba($theme-color, 0.5)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&.with
|
||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
||||
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||
border-radius 4px 4px 0 0
|
||||
|
||||
> .visibleUsers
|
||||
@@ -517,7 +515,7 @@ root(isDark)
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color isDark ? #fff : #666
|
||||
color var(--primary)
|
||||
|
||||
> .hashtags
|
||||
margin 0 0 8px 0
|
||||
@@ -526,7 +524,7 @@ root(isDark)
|
||||
font-size 14px
|
||||
|
||||
> b
|
||||
color isDark ? #9baec8 : darken($theme-color, 20%)
|
||||
color var(--primary)
|
||||
|
||||
> *
|
||||
margin-right 8px
|
||||
@@ -535,14 +533,14 @@ root(isDark)
|
||||
> .files
|
||||
margin 0
|
||||
padding 0
|
||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-top none
|
||||
border-radius 0 0 4px 4px
|
||||
transition border-color .3s ease
|
||||
|
||||
&.with
|
||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
||||
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||
border-radius 0
|
||||
|
||||
> .remain
|
||||
@@ -552,7 +550,7 @@ root(isDark)
|
||||
right 8px
|
||||
margin 0
|
||||
padding 0
|
||||
color rgba($theme-color, 0.4)
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
@@ -586,8 +584,8 @@ root(isDark)
|
||||
cursor pointer
|
||||
|
||||
> .mk-poll-editor
|
||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-top none
|
||||
border-radius 0 0 4px 4px
|
||||
transition border-color .3s ease
|
||||
@@ -595,7 +593,7 @@ root(isDark)
|
||||
> .mk-uploader
|
||||
margin 8px 0 0 0
|
||||
padding 8px
|
||||
border solid 1px rgba($theme-color, 0.2)
|
||||
border solid 1px var(--primaryAlpha02)
|
||||
border-radius 4px
|
||||
|
||||
input[type='file']
|
||||
@@ -612,22 +610,20 @@ root(isDark)
|
||||
width 110px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
outline none
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
border none
|
||||
border-radius 4px
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background var(--primaryLighten5)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primaryDarken5)
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
@@ -638,7 +634,7 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -648,13 +644,13 @@ root(isDark)
|
||||
&.wait
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
darken($theme-color, 10%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
darken($theme-color, 10%) 50%,
|
||||
darken($theme-color, 10%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
var(--primaryDarken10) 25%,
|
||||
var(--primary) 25%,
|
||||
var(--primary) 50%,
|
||||
var(--primaryDarken10) 50%,
|
||||
var(--primaryDarken10) 75%,
|
||||
var(--primary) 75%,
|
||||
var(--primary)
|
||||
)
|
||||
background-size 32px 32px
|
||||
animation stripe-bg 1.5s linear infinite
|
||||
@@ -673,7 +669,7 @@ root(isDark)
|
||||
right 138px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
|
||||
&.over
|
||||
color #ec3828
|
||||
@@ -691,7 +687,7 @@ root(isDark)
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color isDark ? $theme-color : rgba($theme-color, 0.5)
|
||||
color var(--desktopPostFormTransparentButtonFg)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
@@ -699,12 +695,12 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
|
||||
border-color var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
|
||||
border-color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha06)
|
||||
background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
|
||||
border-color var(--primaryAlpha05)
|
||||
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||
|
||||
&:focus
|
||||
@@ -716,7 +712,7 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
> .dropzone
|
||||
@@ -725,13 +721,7 @@ root(isDark)
|
||||
top 0
|
||||
width 100%
|
||||
height 100%
|
||||
border dashed 2px rgba($theme-color, 0.5)
|
||||
border dashed 2px var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
.mk-post-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-post-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -37,7 +37,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.body
|
||||
padding 18px 24px 24px 24px
|
||||
@@ -53,7 +53,7 @@ export default Vue.extend({
|
||||
margin 0 0 4px 0
|
||||
text-align center
|
||||
line-height 16px
|
||||
color rgba($theme-color, 0.7)
|
||||
color var(--primaryAlpha07)
|
||||
|
||||
&:after
|
||||
content '%'
|
||||
@@ -69,21 +69,21 @@ 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)
|
||||
|
||||
.waiting
|
||||
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 progress-dialog-tag-progress-waiting 1.5s linear infinite
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
|
||||
<span slot="header">%fa:envelope R% %i18n:@title%</span>
|
||||
|
||||
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
|
||||
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
|
||||
<div v-for="req in requests">
|
||||
<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
|
||||
<span>
|
||||
@@ -47,8 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc
|
||||
padding 16px
|
||||
|
||||
> button
|
||||
@@ -57,16 +56,10 @@ root(isDark)
|
||||
> div
|
||||
display flex
|
||||
padding 16px
|
||||
border solid 1px isDark ? #1c2023 : #eee
|
||||
border solid 1px var(--faceDivider)
|
||||
border-radius 4px
|
||||
|
||||
> span
|
||||
margin 0 0 0 auto
|
||||
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<template v-if="!quote">
|
||||
<footer>
|
||||
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
|
||||
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
|
||||
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
|
||||
<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
|
||||
<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-if="quote">
|
||||
@@ -57,16 +57,13 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.mk-renote-form
|
||||
> .preview
|
||||
margin 16px 22px
|
||||
|
||||
> footer
|
||||
height 72px
|
||||
background isDark ? #313543 : lighten($theme-color, 95%)
|
||||
background var(--desktopRenoteFormFooter)
|
||||
|
||||
> .quote
|
||||
position absolute
|
||||
@@ -74,7 +71,7 @@ root(isDark)
|
||||
left 28px
|
||||
line-height 40px
|
||||
|
||||
button
|
||||
> .button
|
||||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
@@ -87,10 +84,4 @@ root(isDark)
|
||||
&.ok
|
||||
right 16px
|
||||
|
||||
.mk-renote-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-renote-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -6,31 +6,28 @@
|
||||
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@name%</p>
|
||||
<input v-model="name" type="text" class="ui"/>
|
||||
<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@location%</p>
|
||||
<input v-model="location" type="text" class="ui"/>
|
||||
<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@description%</p>
|
||||
<textarea v-model="description" class="ui"></textarea>
|
||||
<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@birthday%</p>
|
||||
<input type="date" v-model="birthday"/>
|
||||
</label>
|
||||
<button class="ui primary" @click="save">%i18n:@save%</button>
|
||||
<ui-button primary @click="save">%i18n:@save%</ui-button>
|
||||
<section>
|
||||
<h2>%i18n:@locked-account%</h2>
|
||||
<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/>
|
||||
<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
|
||||
</section>
|
||||
<section>
|
||||
<h2>%i18n:@other%</h2>
|
||||
<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
|
||||
<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
|
||||
<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
|
||||
<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
|
||||
<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
|
||||
<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -47,8 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.vfcitkilproprqtbnpoertpsziierwzi
|
||||
> .timeline
|
||||
padding-bottom 16px
|
||||
border-bottom solid 1px rgba(#000, 0.1)
|
||||
@@ -56,10 +55,4 @@ root(isDark)
|
||||
> .add
|
||||
margin-top 16px
|
||||
|
||||
.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -19,18 +19,25 @@
|
||||
<x-profile/>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@theme%</h1>
|
||||
<mk-theme/>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@behaviour%</h1>
|
||||
<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
|
||||
<span>%i18n:@fetch-on-scroll-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
|
||||
<span>%i18n:@auto-popout-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="fetchOnScroll">
|
||||
%i18n:@fetch-on-scroll%
|
||||
<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
|
||||
</ui-switch>
|
||||
<ui-switch v-model="autoPopout">
|
||||
%i18n:@auto-popout%
|
||||
<span slot="desc">%i18n:@auto-popout-desc%</span>
|
||||
</ui-switch>
|
||||
|
||||
<section>
|
||||
<header>%i18n:@note-visibility%</header>
|
||||
<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
|
||||
<ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
|
||||
<section>
|
||||
<header>%i18n:@default-note-visibility%</header>
|
||||
<ui-select v-model="defaultNoteVisibility">
|
||||
@@ -45,9 +52,10 @@
|
||||
|
||||
<details>
|
||||
<summary>%i18n:@advanced%</summary>
|
||||
<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
|
||||
<span>%i18n:@api-via-stream-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="apiViaStream">
|
||||
%i18n:@api-via-stream%
|
||||
<span slot="desc">%i18n:@api-via-stream-desc%</span>
|
||||
</ui-switch>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
@@ -59,37 +67,35 @@
|
||||
<div class="div">
|
||||
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
|
||||
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
|
||||
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
|
||||
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
|
||||
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
|
||||
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
|
||||
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
|
||||
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
|
||||
<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
|
||||
<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
|
||||
<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
|
||||
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
|
||||
<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
|
||||
<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
|
||||
<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
|
||||
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
|
||||
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
|
||||
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
|
||||
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||
</div>
|
||||
<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
|
||||
<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
|
||||
<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
|
||||
<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
|
||||
<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
|
||||
<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
|
||||
<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
|
||||
<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
|
||||
<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
|
||||
<span>%i18n:@show-maps-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
|
||||
<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
|
||||
<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
|
||||
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
|
||||
<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
|
||||
<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
|
||||
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
|
||||
<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
|
||||
<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
|
||||
<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
|
||||
<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
|
||||
<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
|
||||
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
|
||||
<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
|
||||
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@sound%</h1>
|
||||
<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%">
|
||||
<span>%i18n:@enable-sounds-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="enableSounds">
|
||||
%i18n:@enable-sounds%
|
||||
<span slot="desc">%i18n:@enable-sounds-desc%</span>
|
||||
</ui-switch>
|
||||
<label>%i18n:@volume%</label>
|
||||
<input type="range"
|
||||
v-model="soundVolume"
|
||||
@@ -102,7 +108,7 @@
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@mobile%</h1>
|
||||
<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/>
|
||||
<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
@@ -131,9 +137,10 @@
|
||||
|
||||
<section class="notification" v-show="page == 'notification'">
|
||||
<h1>%i18n:@notification%</h1>
|
||||
<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%">
|
||||
<span>%i18n:@auto-watch-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
|
||||
%i18n:@auto-watch%
|
||||
<span slot="desc">%i18n:@auto-watch-desc%</span>
|
||||
</ui-switch>
|
||||
</section>
|
||||
|
||||
<section class="drive" v-show="page == 'drive'">
|
||||
@@ -201,20 +208,23 @@
|
||||
</button>
|
||||
<details>
|
||||
<summary>%i18n:@update-settings%</summary>
|
||||
<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%">
|
||||
<span>%i18n:@prevent-update-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="preventUpdate">
|
||||
%i18n:@prevent-update%
|
||||
<span slot="desc">%i18n:@prevent-update-desc%</span>
|
||||
</ui-switch>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="other" v-show="page == 'other'">
|
||||
<h1>%i18n:@advanced-settings%</h1>
|
||||
<mk-switch v-model="debug" text="%i18n:@debug-mode%">
|
||||
<span>%i18n:@debug-mode-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
|
||||
<span>%i18n:@experimental-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="debug">
|
||||
%i18n:@debug-mode%
|
||||
<span slot="desc">%i18n:@debug-mode-desc%</span>
|
||||
</ui-switch>
|
||||
<ui-switch v-model="enableExperimentalFeatures">
|
||||
%i18n:@experimental%
|
||||
<span slot="desc">%i18n:@experimental-desc%</span>
|
||||
</ui-switch>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -421,12 +431,7 @@ export default Vue.extend({
|
||||
disableViaMobile: {
|
||||
get() { return this.$store.state.settings.disableViaMobile; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
|
||||
},
|
||||
|
||||
gradientWindowHeader: {
|
||||
get() { return this.$store.state.settings.gradientWindowHeader; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
(this as any).os.getMeta().then(meta => {
|
||||
@@ -492,9 +497,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-settings
|
||||
display flex
|
||||
width 100%
|
||||
height 100%
|
||||
@@ -505,13 +508,13 @@ root(isDark)
|
||||
height 100%
|
||||
padding 16px 0 0 0
|
||||
overflow auto
|
||||
border-right solid 1px isDark ? #1c2023 : #ddd
|
||||
border-right solid 1px var(--faceDivider)
|
||||
|
||||
> p
|
||||
display block
|
||||
padding 10px 16px
|
||||
margin 0
|
||||
color isDark ? #9aa2a7 : #666
|
||||
color var(--desktopSettingsNavItem)
|
||||
cursor pointer
|
||||
user-select none
|
||||
transition margin-left 0.2s ease
|
||||
@@ -520,11 +523,11 @@ root(isDark)
|
||||
margin-right 4px
|
||||
|
||||
&:hover
|
||||
color isDark ? #fff : #555
|
||||
color var(--desktopSettingsNavItemHover)
|
||||
|
||||
&.active
|
||||
margin-left 8px
|
||||
color $theme-color !important
|
||||
color var(--primary) !important
|
||||
|
||||
> .pages
|
||||
width 100%
|
||||
@@ -534,14 +537,13 @@ root(isDark)
|
||||
|
||||
> section
|
||||
margin 32px
|
||||
color isDark ? #c4ccd2 : #4a535a
|
||||
color var(--text)
|
||||
|
||||
> h1
|
||||
margin 0 0 1em 0
|
||||
padding 0 0 8px 0
|
||||
font-size 1em
|
||||
color isDark ? #e3e7ea : #555
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&, >>> *
|
||||
.ui.button.block
|
||||
@@ -554,18 +556,12 @@ root(isDark)
|
||||
margin 0 0 1em 0
|
||||
padding 0 0 8px 0
|
||||
font-size 1em
|
||||
color isDark ? #e3e7ea : #555
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
color var(--text)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .web
|
||||
> .div
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
margin 16px 0
|
||||
|
||||
.mk-settings[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-settings:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,7 @@ export default Vue.extend({
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color #a0bf46
|
||||
color var(--renoteText)
|
||||
|
||||
mk-poll
|
||||
font-size 80%
|
||||
|
||||
@@ -215,7 +215,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-timeline-core
|
||||
> .mk-friends-maker
|
||||
|
||||
@@ -175,10 +175,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-timeline
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -186,8 +184,8 @@ root(isDark)
|
||||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
||||
|
||||
> .buttons
|
||||
position absolute
|
||||
@@ -200,23 +198,20 @@ root(isDark)
|
||||
padding 0 8px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
> .badge
|
||||
position absolute
|
||||
top -4px
|
||||
right 4px
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor default
|
||||
|
||||
&:before
|
||||
@@ -227,7 +222,7 @@ root(isDark)
|
||||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> span
|
||||
display inline-block
|
||||
@@ -237,7 +232,7 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor default
|
||||
font-weight bold
|
||||
|
||||
@@ -249,19 +244,13 @@ root(isDark)
|
||||
left -8px
|
||||
width calc(100% + 16px)
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&:not([data-active])
|
||||
color isDark ? #9aa2a7 : #6f7477
|
||||
color var(--desktopTimelineSrc)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #d9dcde : #525a5f
|
||||
|
||||
.mk-timeline[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-timeline:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--desktopTimelineSrcHover)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -36,7 +36,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-ui-notification
|
||||
display block
|
||||
position fixed
|
||||
z-index 10000
|
||||
@@ -46,10 +46,10 @@ root(isDark)
|
||||
margin 0 auto
|
||||
padding 128px 0 0 0
|
||||
width 500px
|
||||
color rgba(isDark ? #fff : #000, 0.6)
|
||||
background rgba(isDark ? #282C37 : #fff, 0.9)
|
||||
color var(--desktopNotificationFg)
|
||||
background var(--desktopNotificationBg)
|
||||
border-radius 0 0 8px 8px
|
||||
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
|
||||
box-shadow 0 2px 4px var(--desktopNotificationShadow)
|
||||
transform translateY(-64px)
|
||||
opacity 0
|
||||
|
||||
@@ -58,10 +58,4 @@ root(isDark)
|
||||
line-height 64px
|
||||
text-align center
|
||||
|
||||
.mk-ui-notification[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-ui-notification:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -127,14 +127,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.account
|
||||
> .header
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
@@ -144,14 +142,11 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> .avatar
|
||||
filter saturate(150%)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> .username
|
||||
display block
|
||||
float left
|
||||
@@ -177,7 +172,7 @@ root(isDark)
|
||||
transition filter 100ms ease
|
||||
|
||||
> .menu
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
$bgcolor = var(--face)
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
@@ -220,7 +215,7 @@ root(isDark)
|
||||
|
||||
& + ul
|
||||
padding-top 10px
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> li
|
||||
display block
|
||||
@@ -234,7 +229,7 @@ root(isDark)
|
||||
padding 0 28px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color isDark ? #c8cece : #868C8C
|
||||
color var(--text)
|
||||
cursor pointer
|
||||
|
||||
*
|
||||
@@ -249,8 +244,8 @@ root(isDark)
|
||||
padding 2px 8px
|
||||
font-size 90%
|
||||
font-style normal
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
border-radius 8px
|
||||
|
||||
> [data-fa]:first-child
|
||||
@@ -269,11 +264,11 @@ root(isDark)
|
||||
|
||||
&:hover, &:active
|
||||
text-decoration none
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
&.signout
|
||||
$color = #e64137
|
||||
@@ -290,10 +285,4 @@ root(isDark)
|
||||
transform-origin: center -16px;
|
||||
}
|
||||
|
||||
.account[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.account:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -95,9 +95,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.nav
|
||||
display inline-block
|
||||
margin 0
|
||||
padding 0
|
||||
@@ -120,7 +118,7 @@ root(isDark)
|
||||
|
||||
&.active
|
||||
> a
|
||||
border-bottom solid 3px $theme-color
|
||||
border-bottom solid 3px var(--primary)
|
||||
|
||||
> a
|
||||
display inline-block
|
||||
@@ -129,7 +127,7 @@ root(isDark)
|
||||
padding 0 24px
|
||||
font-size 13px
|
||||
font-variant small-caps
|
||||
color isDark ? #b8c5ca : #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
text-decoration none
|
||||
transition none
|
||||
cursor pointer
|
||||
@@ -138,7 +136,7 @@ root(isDark)
|
||||
pointer-events none
|
||||
|
||||
&:hover
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
text-decoration none
|
||||
|
||||
> [data-fa]:first-child
|
||||
@@ -147,7 +145,7 @@ root(isDark)
|
||||
> [data-fa]:last-child
|
||||
margin-left 5px
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
@media (max-width 1100px)
|
||||
margin-left -5px
|
||||
@@ -162,10 +160,4 @@ root(isDark)
|
||||
@media (max-width 700px)
|
||||
padding 0 12px
|
||||
|
||||
.nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nav:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -61,16 +61,13 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.notifications
|
||||
> button
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
width 32px
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
@@ -80,10 +77,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> [data-fa].bell
|
||||
font-size 1.2em
|
||||
@@ -93,10 +87,10 @@ root(isDark)
|
||||
margin-left -5px
|
||||
vertical-align super
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> .pop
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
$bgcolor = var(--face)
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
@@ -135,10 +129,4 @@ root(isDark)
|
||||
font-size 1rem
|
||||
overflow auto
|
||||
|
||||
.notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -17,7 +17,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.note
|
||||
display inline-block
|
||||
@@ -33,8 +33,8 @@ export default Vue.extend({
|
||||
font-size 1.2em
|
||||
font-weight normal
|
||||
text-decoration none
|
||||
color $theme-color-foreground
|
||||
background $theme-color !important
|
||||
color var(--primaryForeground)
|
||||
background var(--primary) !important
|
||||
outline none
|
||||
border none
|
||||
border-radius 4px
|
||||
@@ -45,10 +45,10 @@ export default Vue.extend({
|
||||
pointer-events none
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%) !important
|
||||
background var(--primaryLighten10) !important
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%) !important
|
||||
background var(--primaryDarken10) !important
|
||||
transition background 0s ease
|
||||
|
||||
</style>
|
||||
|
||||
@@ -28,8 +28,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
root(isDark)
|
||||
.search
|
||||
> [data-fa]
|
||||
display block
|
||||
position absolute
|
||||
@@ -38,7 +37,7 @@ root(isDark)
|
||||
width 48px
|
||||
text-align center
|
||||
line-height 48px
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
pointer-events none
|
||||
|
||||
> *
|
||||
@@ -52,26 +51,20 @@ root(isDark)
|
||||
width 14em
|
||||
height 32px
|
||||
font-size 1em
|
||||
background rgba(#000, 0.05)
|
||||
background var(--desktopHeaderSearchBg)
|
||||
outline none
|
||||
//border solid 1px #ddd
|
||||
border none
|
||||
border-radius 16px
|
||||
transition color 0.5s ease, border 0.5s ease
|
||||
color isDark ? #fff : #000
|
||||
color var(--desktopHeaderSearchFg)
|
||||
|
||||
&::placeholder
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
|
||||
&:hover
|
||||
background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
|
||||
background var(--desktopHeaderSearchHoverBg)
|
||||
|
||||
&:focus
|
||||
box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
|
||||
box-shadow 0 0 0 2px var(--primaryAlpha05) !important
|
||||
|
||||
.search[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.search:not([data-darkmode])
|
||||
root(false)
|
||||
</style>
|
||||
|
||||
@@ -5,13 +5,14 @@
|
||||
<div class="main" ref="main">
|
||||
<div class="backdrop"></div>
|
||||
<div class="main">
|
||||
<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
|
||||
<div class="container" ref="mainContainer">
|
||||
<div class="left">
|
||||
<x-nav/>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="icon" @click="goToTop"></div>
|
||||
<div class="icon" @click="goToTop">
|
||||
<img svg-inline src="../../assets/header-icon.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<x-search/>
|
||||
@@ -64,55 +65,6 @@ export default Vue.extend({
|
||||
|
||||
mounted() {
|
||||
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
|
||||
|
||||
if (this.$store.getters.isSignedIn) {
|
||||
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
|
||||
const isHisasiburi = ago >= 3600;
|
||||
this.$store.state.i.lastUsedAt = new Date();
|
||||
|
||||
if (isHisasiburi) {
|
||||
(this.$refs.welcomeback as any).style.display = 'block';
|
||||
(this.$refs.main as any).style.overflow = 'hidden';
|
||||
|
||||
anime({
|
||||
targets: this.$refs.welcomeback,
|
||||
top: '0',
|
||||
opacity: 1,
|
||||
delay: 1000,
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.$refs.mainContainer,
|
||||
opacity: 0,
|
||||
delay: 1000,
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.$refs.welcomeback,
|
||||
top: '-48px',
|
||||
opacity: 0,
|
||||
duration: 500,
|
||||
complete: () => {
|
||||
(this.$refs.welcomeback as any).style.display = 'none';
|
||||
(this.$refs.main as any).style.overflow = 'initial';
|
||||
},
|
||||
easing: 'easeInQuad'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.$refs.mainContainer,
|
||||
opacity: 1,
|
||||
duration: 500,
|
||||
easing: 'easeInQuad'
|
||||
});
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -127,7 +79,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.header
|
||||
position fixed
|
||||
top 0
|
||||
z-index 1000
|
||||
@@ -151,7 +103,7 @@ root(isDark)
|
||||
z-index 1000
|
||||
width 100%
|
||||
height 48px
|
||||
background isDark ? #313543 : #f7f7f7
|
||||
background var(--desktopHeaderBg)
|
||||
|
||||
> .main
|
||||
z-index 1001
|
||||
@@ -161,17 +113,6 @@ root(isDark)
|
||||
font-size 0.9rem
|
||||
user-select none
|
||||
|
||||
> p
|
||||
display none
|
||||
position absolute
|
||||
top 48px
|
||||
width 100%
|
||||
line-height 48px
|
||||
margin 0
|
||||
text-align center
|
||||
color isDark ? #fff : #888
|
||||
opacity 0
|
||||
|
||||
> .container
|
||||
display flex
|
||||
width 100%
|
||||
@@ -189,13 +130,15 @@ root(isDark)
|
||||
margin auto
|
||||
display block
|
||||
width 48px
|
||||
height 48px
|
||||
background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
|
||||
background-size 24px
|
||||
background-position center
|
||||
background-repeat no-repeat
|
||||
opacity 0.3
|
||||
text-align center
|
||||
cursor pointer
|
||||
opacity 0.5
|
||||
|
||||
> svg
|
||||
width 24px
|
||||
height 48px
|
||||
vertical-align top
|
||||
fill var(--desktopHeaderFg)
|
||||
|
||||
> .left,
|
||||
> .center
|
||||
@@ -212,10 +155,4 @@ root(isDark)
|
||||
> .mk-ui-header-search
|
||||
display none
|
||||
|
||||
.header[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.header:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
|
||||
<span slot="header">%fa:list% %i18n:@title%</span>
|
||||
|
||||
<div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode">
|
||||
<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
|
||||
<button class="ui" @click="add">%i18n:@create-list%</button>
|
||||
<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
|
||||
</div>
|
||||
@@ -47,8 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.xkxvokkjlptzyewouewmceqcxhpgzprp
|
||||
padding 16px
|
||||
|
||||
> button
|
||||
@@ -57,13 +56,7 @@ root(isDark)
|
||||
> a
|
||||
display block
|
||||
padding 16px
|
||||
border solid 1px isDark ? #1c2023 : #eee
|
||||
border solid 1px var(--faceDivider)
|
||||
border-radius 4px
|
||||
|
||||
.xkxvokkjlptzyewouewmceqcxhpgzprp[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.xkxvokkjlptzyewouewmceqcxhpgzprp:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -83,14 +83,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-user-preview
|
||||
position absolute
|
||||
z-index 2048
|
||||
margin-top -8px
|
||||
width 250px
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
background-clip content-box
|
||||
border solid 1px rgba(#000, 0.1)
|
||||
border-radius 4px
|
||||
@@ -99,7 +97,7 @@ root(isDark)
|
||||
|
||||
> .banner
|
||||
height 84px
|
||||
background-color isDark ? #1c1e26 : #f5f5f5
|
||||
background-color rgba(0, 0, 0, 0.1)
|
||||
background-size cover
|
||||
background-position center
|
||||
|
||||
@@ -111,7 +109,7 @@ root(isDark)
|
||||
z-index 2
|
||||
width 58px
|
||||
height 58px
|
||||
border solid 3px isDark ? #282c37 : #fff
|
||||
border solid 3px var(--face)
|
||||
border-radius 8px
|
||||
|
||||
> .title
|
||||
@@ -123,19 +121,20 @@ root(isDark)
|
||||
margin 0
|
||||
font-weight bold
|
||||
line-height 16px
|
||||
color isDark ? #fff : #656565
|
||||
color var(--text)
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
line-height 16px
|
||||
font-size 0.8em
|
||||
color isDark ? #606984 : #999
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> .description
|
||||
padding 0 16px
|
||||
font-size 0.7em
|
||||
color isDark ? #9ea4ad : #555
|
||||
color var(--text)
|
||||
|
||||
> .status
|
||||
padding 8px 16px
|
||||
@@ -147,21 +146,15 @@ root(isDark)
|
||||
> p
|
||||
margin 0
|
||||
font-size 0.7em
|
||||
color #aaa
|
||||
color var(--text)
|
||||
|
||||
> span
|
||||
font-size 1em
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
top 92px
|
||||
right 8px
|
||||
|
||||
.mk-user-preview[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-user-preview:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -69,7 +69,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-users-list
|
||||
height 100%
|
||||
@@ -104,8 +104,8 @@ export default Vue.extend({
|
||||
|
||||
&[data-active]
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
border-color $theme-color
|
||||
color var(--primary)
|
||||
border-color var(--primary)
|
||||
cursor default
|
||||
|
||||
> span
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="mk-widget-container" :class="{ naked }">
|
||||
<header :class="{ withGradient }" v-if="showHeader">
|
||||
<header v-if="showHeader">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<slot name="func"></slot>
|
||||
</header>
|
||||
@@ -20,22 +20,13 @@ export default Vue.extend({
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
withGradient(): boolean {
|
||||
return this.$store.getters.isSignedIn
|
||||
? this.$store.state.settings.gradientWindowHeader != null
|
||||
? this.$store.state.settings.gradientWindowHeader
|
||||
: false
|
||||
: false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-widget-container
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -45,7 +36,7 @@ root(isDark)
|
||||
box-shadow none !important
|
||||
|
||||
> header
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
@@ -54,7 +45,7 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color isDark ? #e3e5e8 : #888
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
> [data-fa]
|
||||
@@ -72,23 +63,12 @@ root(isDark)
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
|
||||
&.withGradient
|
||||
> .title
|
||||
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
|
||||
box-shadow 0 1px rgba(#000, 0.11)
|
||||
|
||||
.mk-widget-container[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-widget-container:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
|
||||
<div class="body">
|
||||
<header ref="header"
|
||||
:class="{ withGradient: $store.state.settings.gradientWindowHeader }"
|
||||
@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
|
||||
>
|
||||
<h1><slot name="header"></slot></h1>
|
||||
@@ -463,9 +462,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-window
|
||||
display block
|
||||
|
||||
> .bg
|
||||
@@ -493,10 +490,7 @@ root(isDark)
|
||||
&:focus
|
||||
&:not([data-is-modal])
|
||||
> .body
|
||||
if isDark
|
||||
box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 12px 0 rgba(#000, 0.5)
|
||||
else
|
||||
box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
|
||||
box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 var(--desktopWindowShadow)
|
||||
|
||||
> .handle
|
||||
$size = 8px
|
||||
@@ -562,13 +556,9 @@ root(isDark)
|
||||
> .body
|
||||
height 100%
|
||||
overflow hidden
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 6px
|
||||
|
||||
if isDark
|
||||
box-shadow 0 2px 12px 0 rgba(#000, 0.5)
|
||||
else
|
||||
box-shadow 0 2px 6px 0 rgba(#000, 0.2)
|
||||
box-shadow 0 2px 12px 0 rgba(#000, 0.5)
|
||||
|
||||
> header
|
||||
$header-height = 40px
|
||||
@@ -578,14 +568,10 @@ root(isDark)
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
cursor move
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
border-radius 6px 6px 0 0
|
||||
box-shadow 0 1px 0 rgba(#000, 0.1)
|
||||
|
||||
&.withGradient
|
||||
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
|
||||
box-shadow 0 1px 0 rgba(#000, 0.15)
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
|
||||
@@ -600,7 +586,7 @@ root(isDark)
|
||||
font-size 1em
|
||||
line-height $header-height
|
||||
font-weight normal
|
||||
color isDark ? #e3e5e8 : #666
|
||||
color var(--desktopWindowTitle)
|
||||
|
||||
> div:last-child
|
||||
position absolute
|
||||
@@ -615,16 +601,16 @@ root(isDark)
|
||||
padding 0
|
||||
cursor pointer
|
||||
font-size 1em
|
||||
color isDark ? #9baec8 : rgba(#000, 0.4)
|
||||
color var(--faceTextButton)
|
||||
border none
|
||||
outline none
|
||||
background transparent
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : rgba(#000, 0.6)
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : darken(#000, 30%)
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
> [data-fa]
|
||||
padding 0
|
||||
@@ -639,10 +625,4 @@ root(isDark)
|
||||
> .main > .body > .content
|
||||
height calc(100% - 40px)
|
||||
|
||||
.mk-window[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-window:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.qldxjjsrseehkusjuoooapmsprvfrxyl
|
||||
textarea
|
||||
|
||||
@@ -111,7 +111,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.zyknedwtlthezamcjlolyusmipqmjgxz
|
||||
> svg
|
||||
display block
|
||||
width 50%
|
||||
@@ -125,7 +125,7 @@ root(isDark)
|
||||
|
||||
> text
|
||||
font-size 10px
|
||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
||||
fill var(--chartCaption)
|
||||
|
||||
> tspan
|
||||
opacity 0.5
|
||||
@@ -135,10 +135,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.zyknedwtlthezamcjlolyusmipqmjgxz[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.zyknedwtlthezamcjlolyusmipqmjgxz:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -95,7 +95,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.obdskegsannmntldydackcpzezagxqfy
|
||||
> .stats
|
||||
@@ -112,7 +112,7 @@ export default Vue.extend({
|
||||
|
||||
> *:first-child
|
||||
display block
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> *:last-child
|
||||
font-size 70%
|
||||
|
||||
@@ -31,7 +31,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.jdnqwkzlnxcfftthoybjxrebyolvoucw
|
||||
textarea
|
||||
|
||||
@@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
||||
@@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
||||
@@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
||||
@@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
header
|
||||
margin 10px 0
|
||||
|
||||
@@ -70,7 +70,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-admin
|
||||
display flex
|
||||
@@ -106,7 +106,7 @@ export default Vue.extend({
|
||||
|
||||
&.active
|
||||
margin-left 8px
|
||||
color $theme-color !important
|
||||
color var(--primary) !important
|
||||
|
||||
> main
|
||||
width 100%
|
||||
|
||||
@@ -269,24 +269,22 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
|
||||
$header-height = 42px
|
||||
|
||||
width 330px
|
||||
min-width 330px
|
||||
height 100%
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 6px
|
||||
//box-shadow 0 2px 16px rgba(#000, 0.1)
|
||||
overflow hidden
|
||||
|
||||
&.draghover
|
||||
box-shadow 0 0 0 2px rgba($theme-color, 0.8)
|
||||
box-shadow 0 0 0 2px var(--primaryAlpha08)
|
||||
|
||||
&.dragging
|
||||
box-shadow 0 0 0 2px rgba($theme-color, 0.4)
|
||||
box-shadow 0 0 0 2px var(--primaryAlpha04)
|
||||
|
||||
&.dropready
|
||||
*
|
||||
@@ -301,15 +299,14 @@ root(isDark)
|
||||
min-width 285px
|
||||
|
||||
&.naked
|
||||
background rgba(#000, isDark ? 0.25 : 0.1)
|
||||
background var(--deckAcrylicColumnBg)
|
||||
|
||||
> header
|
||||
background transparent
|
||||
box-shadow none
|
||||
|
||||
if !isDark
|
||||
> button
|
||||
color #bbb
|
||||
> button
|
||||
color var(--text)
|
||||
|
||||
> header
|
||||
display flex
|
||||
@@ -317,8 +314,8 @@ root(isDark)
|
||||
line-height $header-height
|
||||
padding 0 16px
|
||||
font-size 14px
|
||||
color isDark ? #e3e5e8 : #888
|
||||
background isDark ? #313543 : #fff
|
||||
color var(--faceHeaderText)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px rgba(#000, 0.15)
|
||||
cursor pointer
|
||||
|
||||
@@ -329,7 +326,7 @@ root(isDark)
|
||||
pointer-events none
|
||||
|
||||
&.indicate
|
||||
box-shadow 0 3px 0 0 $theme-color
|
||||
box-shadow 0 3px 0 0 var(--primary)
|
||||
|
||||
> span
|
||||
[data-fa]
|
||||
@@ -344,13 +341,13 @@ root(isDark)
|
||||
width $header-height
|
||||
line-height $header-height
|
||||
font-size 16px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
> .toggleActive
|
||||
margin-left -16px
|
||||
@@ -364,10 +361,4 @@ root(isDark)
|
||||
overflow auto
|
||||
overflow-x hidden
|
||||
|
||||
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -29,11 +29,11 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.fnlfosztlhtptnongximhlbykxblytcq
|
||||
display flex
|
||||
padding 16px
|
||||
font-size 10px
|
||||
background isDark ? #21242d : #fcfcfc
|
||||
background var(--subNoteBg)
|
||||
|
||||
&.smart
|
||||
> .main
|
||||
@@ -62,16 +62,10 @@ root(isDark)
|
||||
> .text
|
||||
margin 0
|
||||
padding 0
|
||||
color isDark ? #959ba7 : #717171
|
||||
color var(--subNoteText)
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
.fnlfosztlhtptnongximhlbykxblytcq[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.fnlfosztlhtptnongximhlbykxblytcq:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -214,9 +214,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
mediaRoot(isDark)
|
||||
.srwrkujossgfuhrbnvqkybtzxpblgchi
|
||||
font-size 13px
|
||||
margin 4px 12px
|
||||
|
||||
@@ -226,9 +224,9 @@ mediaRoot(isDark)
|
||||
&:last-child
|
||||
margin-bottom 12px
|
||||
|
||||
root(isDark)
|
||||
.zyjjkidcqjnlegkqebitfviomuqmseqk
|
||||
font-size 13px
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-of-type
|
||||
border-bottom none
|
||||
@@ -246,8 +244,8 @@ root(isDark)
|
||||
padding 8px 16px 0 16px
|
||||
line-height 28px
|
||||
white-space pre
|
||||
color #9dbb00
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
color var(--renoteText)
|
||||
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||
|
||||
.avatar
|
||||
flex-shrink 0
|
||||
@@ -309,24 +307,11 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
|
||||
> .toggle
|
||||
display inline-block
|
||||
padding 4px 8px
|
||||
font-size 0.7em
|
||||
color isDark ? #393f4f : #fff
|
||||
background isDark ? #687390 : #b1b9c1
|
||||
border-radius 2px
|
||||
cursor pointer
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
background isDark ? #707b97 : #bbc4ce
|
||||
|
||||
> .content
|
||||
|
||||
> .text
|
||||
@@ -334,7 +319,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
>>> .title
|
||||
display block
|
||||
@@ -342,7 +327,7 @@ root(isDark)
|
||||
padding 4px
|
||||
font-size 90%
|
||||
text-align center
|
||||
background isDark ? #2f3944 : #eef1f3
|
||||
background var(--mfmTitleBg)
|
||||
border-radius 4px
|
||||
|
||||
>>> .code
|
||||
@@ -351,25 +336,25 @@ root(isDark)
|
||||
>>> .quote
|
||||
margin 8px
|
||||
padding 6px 12px
|
||||
color isDark ? #6f808e : #aaa
|
||||
border-left solid 3px isDark ? #637182 : #eee
|
||||
color var(--mfmQuote)
|
||||
border-left solid 3px var(--mfmQuoteLine)
|
||||
|
||||
> .reply
|
||||
margin-right 8px
|
||||
color isDark ? #99abbf : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color #a0bf46
|
||||
color var(--renoteText)
|
||||
|
||||
[data-is-me]:after
|
||||
content "you"
|
||||
padding 0 4px
|
||||
margin-left 4px
|
||||
font-size 80%
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border-radius 4px
|
||||
|
||||
.mk-url-preview
|
||||
@@ -400,7 +385,7 @@ root(isDark)
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px isDark ? #4e945e : #c0dac6
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> .app
|
||||
@@ -415,14 +400,14 @@ root(isDark)
|
||||
border none
|
||||
box-shadow none
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #ddd
|
||||
color var(--noteActions)
|
||||
cursor pointer
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 28px
|
||||
|
||||
&:hover
|
||||
color isDark ? #9198af : #666
|
||||
color var(--noteActionsHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
@@ -430,18 +415,6 @@ root(isDark)
|
||||
color #999
|
||||
|
||||
&.reacted
|
||||
color $theme-color
|
||||
|
||||
.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
|
||||
mediaRoot(true)
|
||||
|
||||
.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
|
||||
mediaRoot(false)
|
||||
color var(--primary)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -195,9 +195,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.eamppglmnmimdhrlzhplwpvyeaqmmhxu
|
||||
.transition
|
||||
.mk-notes-enter
|
||||
.mk-notes-leave-to
|
||||
@@ -214,9 +212,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
font-size 14px
|
||||
text-align center
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@@ -232,21 +230,15 @@ root(isDark)
|
||||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
background var(--face)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #eee
|
||||
|
||||
.eamppglmnmimdhrlzhplwpvyeaqmmhxu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.eamppglmnmimdhrlzhplwpvyeaqmmhxu:not([data-darkmode])
|
||||
root(false)
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -109,7 +109,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.dsfykdcjpuwfvpefwufddclpjhzktmpw
|
||||
> .notification
|
||||
padding 16px
|
||||
font-size 13px
|
||||
@@ -142,14 +142,14 @@ root(isDark)
|
||||
|
||||
> .mk-time
|
||||
margin-left auto
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
font-size 0.9em
|
||||
|
||||
> .note-preview
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .note-ref
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
[data-fa]
|
||||
font-size 1em
|
||||
@@ -170,10 +170,4 @@ root(isDark)
|
||||
> div > header i
|
||||
color #888
|
||||
|
||||
.dsfykdcjpuwfvpefwufddclpjhzktmpw[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.dsfykdcjpuwfvpefwufddclpjhzktmpw:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -155,8 +155,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
|
||||
.oxynyeqmfvracxnglgulyqfgqxnxmehl
|
||||
.transition
|
||||
.mk-notifications-enter
|
||||
.mk-notifications-leave-to
|
||||
@@ -169,7 +168,7 @@ root(isDark)
|
||||
> .notifications
|
||||
|
||||
> .notification:not(:last-child)
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .date
|
||||
display block
|
||||
@@ -177,9 +176,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@@ -221,10 +220,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.oxynyeqmfvracxnglgulyqfgqxnxmehl[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.oxynyeqmfvracxnglgulyqfgqxnxmehl:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
</span>
|
||||
|
||||
<div class="editor" style="padding:0 12px" v-if="edit">
|
||||
<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
|
||||
<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
|
||||
<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
|
||||
<ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
|
||||
</div>
|
||||
<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
|
||||
<x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<mk-ui :class="$style.root">
|
||||
<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode" :style="style">
|
||||
<div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style">
|
||||
<template v-for="ids in layout">
|
||||
<div v-if="ids.length > 1" class="folder">
|
||||
<template v-for="id, i in ids">
|
||||
@@ -221,9 +221,7 @@ export default Vue.extend({
|
||||
</style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.qlvquzbjribqcaozciifydkngcwtyzje
|
||||
display flex
|
||||
flex 1
|
||||
padding 16px 0 16px 16px
|
||||
@@ -251,18 +249,12 @@ root(isDark)
|
||||
|
||||
> button
|
||||
padding 0 16px
|
||||
color isDark ? #93a0a5 : #888
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b8c5ca : #777
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : #555
|
||||
|
||||
.qlvquzbjribqcaozciifydkngcwtyzje[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.qlvquzbjribqcaozciifydkngcwtyzje:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -135,9 +135,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.wtdtxvecapixsepjtcupubtsmometobz
|
||||
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
|
||||
> header
|
||||
padding 16px
|
||||
@@ -169,14 +167,5 @@ root(isDark)
|
||||
background rgba(#000, 0.7)
|
||||
border-radius 4px
|
||||
|
||||
> header
|
||||
color isDark ? #fff : #000
|
||||
|
||||
.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mkp-selectdrive
|
||||
display block
|
||||
@@ -72,7 +72,7 @@ export default Vue.extend({
|
||||
left 0
|
||||
width 100%
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.upload
|
||||
display inline-block
|
||||
@@ -85,7 +85,7 @@ export default Vue.extend({
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
@@ -93,13 +93,13 @@ export default Vue.extend({
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.3)
|
||||
border-color var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
color var(--primaryAlpha06)
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.5)
|
||||
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
|
||||
border-color var(--primaryAlpha05)
|
||||
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
@@ -110,7 +110,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
.ok
|
||||
@@ -136,7 +136,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@@ -145,20 +145,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@@ -34,7 +34,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.tcrwdhwpuxrwmcttxjcsehgpagpstqey
|
||||
width 100%
|
||||
@@ -54,7 +54,7 @@ export default Vue.extend({
|
||||
|
||||
> *:first-child
|
||||
display block
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> *:last-child
|
||||
font-size 70%
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<mk-widget-container>
|
||||
<template slot="header">%fa:users% %i18n:@users%</template>
|
||||
<button slot="func" title="%i18n:@add-user%" @click="add">%fa:plus%</button>
|
||||
|
||||
<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
|
||||
<template v-else-if="users.length != 0">
|
||||
<div class="user" v-for="_user in users">
|
||||
<mk-avatar class="avatar" :user="_user"/>
|
||||
<div class="body">
|
||||
<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
|
||||
<p class="username">@{{ _user | acct }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p class="empty" v-else>%i18n:@no-one%</p>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
list: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/show', {
|
||||
userIds: this.list.userIds
|
||||
}).then(users => {
|
||||
this.users = users;
|
||||
this.fetching = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
(this as any).apis.input({
|
||||
title: '%i18n:@username%',
|
||||
}).then(async (username: string) => {
|
||||
if (username.startsWith('@')) username = username.slice(1);
|
||||
const user = await (this as any).api('users/show', {
|
||||
username
|
||||
});
|
||||
|
||||
(this as any).api('users/lists/push', {
|
||||
listId: this.list.id,
|
||||
userId: user.id
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
float left
|
||||
margin 0 12px 0 0
|
||||
width 42px
|
||||
height 42px
|
||||
border-radius 8px
|
||||
|
||||
> .body
|
||||
float left
|
||||
width calc(100% - 54px)
|
||||
|
||||
> .name
|
||||
margin 0
|
||||
font-size 16px
|
||||
line-height 24px
|
||||
color isDark ? #fff : #555
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
font-size 15px
|
||||
line-height 16px
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
|
||||
root(true)
|
||||
|
||||
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<mk-ui>
|
||||
<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
|
||||
<div>
|
||||
<div><h1>{{ list.title }}</h1></div>
|
||||
<x-users :list="list"/>
|
||||
</div>
|
||||
<main>
|
||||
<mk-user-list-timeline :list="list"/>
|
||||
</main>
|
||||
</div>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XUsers from './user-list.users.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XUsers
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
list: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: 'fetch'
|
||||
},
|
||||
mounted() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('users/lists/show', {
|
||||
listId: this.$route.params.list
|
||||
}).then(list => {
|
||||
this.list = list;
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
|
||||
display flex
|
||||
justify-content center
|
||||
margin 0 auto
|
||||
max-width 1200px
|
||||
|
||||
> main
|
||||
> div > div
|
||||
> *:not(:last-child)
|
||||
margin-bottom 16px
|
||||
|
||||
> main
|
||||
padding 16px
|
||||
width calc(100% - 275px * 2)
|
||||
|
||||
> div
|
||||
width 275px
|
||||
margin 0
|
||||
padding 16px 0 16px 16px
|
||||
|
||||
</style>
|
||||
@@ -36,8 +36,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.vahgrswmbzfdlmomxnqftuueyvwaafth
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
@@ -48,7 +48,7 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color isDark ? #e3e5e8 : #888
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
> i
|
||||
@@ -77,10 +77,4 @@ root(isDark)
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
.vahgrswmbzfdlmomxnqftuueyvwaafth[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vahgrswmbzfdlmomxnqftuueyvwaafth:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -40,8 +40,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.hozptpaliadatkehcmcayizwzwwctpbc
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -53,8 +53,8 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
background isDark ? #313543 : inherit
|
||||
color isDark ? #e3e5e8 : #888
|
||||
background var(--faceHeader)
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
> i
|
||||
@@ -72,7 +72,7 @@ root(isDark)
|
||||
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px isDark ? #21242f : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
@@ -98,24 +98,19 @@ root(isDark)
|
||||
margin 0
|
||||
font-size 16px
|
||||
line-height 24px
|
||||
color isDark ? #ccc : #555
|
||||
color var(--text)
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
font-size 15px
|
||||
line-height 16px
|
||||
color isDark ? #555 : #ccc
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
top 16px
|
||||
right 16px
|
||||
|
||||
.hozptpaliadatkehcmcayizwzwwctpbc[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.hozptpaliadatkehcmcayizwzwwctpbc:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -100,10 +100,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.header
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -182,12 +180,12 @@ root(isDark)
|
||||
|
||||
> .body
|
||||
padding 16px 16px 16px 154px
|
||||
color isDark ? #c5ced6 : #555
|
||||
color var(--text)
|
||||
|
||||
> .status
|
||||
margin-top 16px
|
||||
padding-top 16px
|
||||
border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
font-size 80%
|
||||
|
||||
> *
|
||||
@@ -196,24 +194,18 @@ root(isDark)
|
||||
margin-right 16px
|
||||
|
||||
&:not(:last-child)
|
||||
border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
|
||||
border-right solid 1px var(--faceDivider)
|
||||
|
||||
&.clickable
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #fff : #000
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
> b
|
||||
margin-right 4px
|
||||
font-size 1rem
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
|
||||
.header[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.header:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--primary)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -39,8 +39,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.dzsuvbsrrrwobdxifudxuefculdfiaxd
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@@ -52,8 +52,8 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
background: isDark ? #313543 : inherit
|
||||
color isDark ? #e3e5e8 : #888
|
||||
background var(--faceHeader)
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
> i
|
||||
@@ -87,10 +87,4 @@ root(isDark)
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
.dzsuvbsrrrwobdxifudxuefculdfiaxd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.dzsuvbsrrrwobdxifudxuefculdfiaxd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -85,8 +85,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.profile
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
@@ -96,7 +96,7 @@ root(isDark)
|
||||
> .friend-form
|
||||
padding 16px
|
||||
text-align center
|
||||
border-bottom solid 1px isDark ? #21242f : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .followed
|
||||
margin 12px 0 0 0
|
||||
@@ -114,7 +114,7 @@ root(isDark)
|
||||
> .action-form
|
||||
padding 16px
|
||||
text-align center
|
||||
border-bottom solid 1px isDark ? #21242f : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> *
|
||||
width 100%
|
||||
@@ -122,10 +122,4 @@ root(isDark)
|
||||
&:not(:last-child)
|
||||
margin-bottom 12px
|
||||
|
||||
.profile[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.profile:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -112,18 +112,16 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.oh5y2r7l5lx8j6jj791ykeiwgihheguk
|
||||
background var(--face)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
||||
|
||||
> span
|
||||
display inline-block
|
||||
@@ -133,7 +131,7 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor default
|
||||
font-weight bold
|
||||
|
||||
@@ -145,14 +143,14 @@ root(isDark)
|
||||
left -8px
|
||||
width calc(100% + 16px)
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&:not([data-active])
|
||||
color isDark ? #9aa2a7 : #6f7477
|
||||
color var(--desktopTimelineSrc)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #d9dcde : #525a5f
|
||||
color var(--desktopTimelineSrcHover)
|
||||
|
||||
> .loading
|
||||
padding 64px 0
|
||||
@@ -171,10 +169,4 @@ root(isDark)
|
||||
font-size 3em
|
||||
color #ccc
|
||||
|
||||
.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<mk-ui>
|
||||
<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
|
||||
<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
|
||||
<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
|
||||
<div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
|
||||
<main>
|
||||
@@ -79,7 +79,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.xygkxeaeontfaokvqmiblezmhvhostak
|
||||
width 980px
|
||||
padding 16px
|
||||
margin 0 auto
|
||||
@@ -93,12 +93,12 @@ root(isDark)
|
||||
border-radius var(--round)
|
||||
|
||||
&.is-suspended
|
||||
color isDark ? #ffb4b4 : #570808
|
||||
background isDark ? #611d1d : #ffdbdb
|
||||
color var(--suspendedInfoFg)
|
||||
background var(--suspendedInfoBg)
|
||||
|
||||
&.is-remote
|
||||
color isDark ? #ffbd3e : #573c08
|
||||
background isDark ? #42321c : #fff0db
|
||||
color var(--remoteInfoFg)
|
||||
background var(--remoteInfoBg)
|
||||
|
||||
> a
|
||||
font-weight bold
|
||||
@@ -139,21 +139,15 @@ root(isDark)
|
||||
> .nav
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color #aaa
|
||||
background isDark ? #21242f : #fff
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
a
|
||||
color #999
|
||||
color var(--text)99
|
||||
|
||||
i
|
||||
color #ccc
|
||||
|
||||
.xygkxeaeontfaokvqmiblezmhvhostak[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.xygkxeaeontfaokvqmiblezmhvhostak:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--text)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="main block">
|
||||
<div>
|
||||
<h1 v-if="name != 'Misskey'">{{ name }}</h1>
|
||||
<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
|
||||
<h1 v-else><img svg-inline src="../../../../assets/title.svg" :alt="name"></h1>
|
||||
|
||||
<div class="info">
|
||||
<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
|
||||
@@ -95,7 +95,7 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<modal name="about" :class="$store.state.device.darkmode ? ['about', 'modal-dark'] : ['about', 'modal-light']" width="800px" height="auto" scrollable>
|
||||
<modal name="about" class="about modal" width="800px" height="auto" scrollable>
|
||||
<article class="fpdezooorhntlzyeszemrsqdlgbysvxq">
|
||||
<h1>%i18n:common.intro.title%</h1>
|
||||
<p v-html="'%i18n:common.intro.about%'"></p>
|
||||
@@ -134,12 +134,12 @@
|
||||
</article>
|
||||
</modal>
|
||||
|
||||
<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
|
||||
<modal name="signup" class="modal" width="450px" height="auto" scrollable>
|
||||
<header class="formHeader">%i18n:@signup%</header>
|
||||
<mk-signup class="form"/>
|
||||
</modal>
|
||||
|
||||
<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
|
||||
<modal name="signin" class="modal" width="450px" height="auto" scrollable>
|
||||
<header class="formHeader">%i18n:@signin%</header>
|
||||
<mk-signin class="form"/>
|
||||
</modal>
|
||||
@@ -226,23 +226,7 @@ export default Vue.extend({
|
||||
.v--modal-overlay
|
||||
background rgba(0, 0, 0, 0.6)
|
||||
|
||||
.modal-light
|
||||
.v--modal-box
|
||||
color #777
|
||||
|
||||
.formHeader
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
.modal-dark
|
||||
.v--modal-box
|
||||
background #313543
|
||||
color #fff
|
||||
|
||||
.formHeader
|
||||
border-bottom solid 1px rgba(#000, 0.2)
|
||||
|
||||
.modal-light
|
||||
.modal-dark
|
||||
.modal
|
||||
.form
|
||||
padding 24px 48px 48px 48px
|
||||
|
||||
@@ -252,6 +236,13 @@ export default Vue.extend({
|
||||
margin 0 48px
|
||||
font-size 1.5em
|
||||
|
||||
.v--modal-box
|
||||
background var(--face)
|
||||
color var(--text)
|
||||
|
||||
.formHeader
|
||||
border-bottom solid 1px rgba(#000, 0.2)
|
||||
|
||||
.v--modal-overlay.about
|
||||
.v--modal-box.v--modal
|
||||
margin 32px 0
|
||||
@@ -267,7 +258,7 @@ export default Vue.extend({
|
||||
|
||||
> section
|
||||
> h2
|
||||
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> section
|
||||
display grid
|
||||
@@ -276,7 +267,7 @@ export default Vue.extend({
|
||||
gap 32px
|
||||
margin-bottom 32px
|
||||
padding-bottom 32px
|
||||
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
&:nth-child(odd)
|
||||
grid-template-columns 1fr 180px
|
||||
@@ -303,15 +294,9 @@ export default Vue.extend({
|
||||
</style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-welcome
|
||||
display flex
|
||||
min-height 100vh
|
||||
//background-color #00070F
|
||||
//background-image url('/assets/bg.jpg')
|
||||
//background-position center
|
||||
//background-size cover
|
||||
|
||||
> .banner
|
||||
position absolute
|
||||
@@ -331,7 +316,7 @@ root(isDark)
|
||||
left 0
|
||||
width 100%
|
||||
height 100px
|
||||
background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
|
||||
background linear-gradient(transparent, var(--bg))
|
||||
|
||||
> .forkit
|
||||
position absolute
|
||||
@@ -345,7 +330,7 @@ root(isDark)
|
||||
left 16px
|
||||
padding 16px
|
||||
font-size 18px
|
||||
color isDark ? #fff : #444
|
||||
color var(--text)
|
||||
|
||||
> main
|
||||
margin 0 auto
|
||||
@@ -354,8 +339,8 @@ root(isDark)
|
||||
max-width 1200px
|
||||
|
||||
.block
|
||||
color isDark ? #fff : #444
|
||||
background isDark ? #282C37 : #fff
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
//border-radius 8px
|
||||
overflow auto
|
||||
@@ -364,10 +349,8 @@ root(isDark)
|
||||
z-index 1
|
||||
padding 0 16px
|
||||
line-height 48px
|
||||
background isDark ? #313543 : #fff
|
||||
|
||||
if !isDark
|
||||
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
|
||||
|
||||
& + div
|
||||
max-height calc(100% - 48px)
|
||||
@@ -385,7 +368,7 @@ root(isDark)
|
||||
> .main
|
||||
grid-row 1
|
||||
grid-column 1 / 3
|
||||
border-top solid 5px $theme-color
|
||||
border-top solid 5px var(--primary)
|
||||
|
||||
> div
|
||||
padding 32px
|
||||
@@ -394,9 +377,11 @@ root(isDark)
|
||||
> h1
|
||||
margin 0
|
||||
|
||||
> img
|
||||
> svg
|
||||
margin -8px 0 0 -16px
|
||||
max-width 280px
|
||||
width 280px
|
||||
height 100px
|
||||
fill currentColor
|
||||
|
||||
> .info
|
||||
margin 0 auto 16px auto
|
||||
@@ -406,7 +391,7 @@ root(isDark)
|
||||
> .stats
|
||||
margin-left 16px
|
||||
padding-left 16px
|
||||
border-left solid 1px isDark ? #fff : #444
|
||||
border-left solid 1px var(--faceDivider)
|
||||
|
||||
> *
|
||||
margin-right 16px
|
||||
@@ -426,7 +411,7 @@ root(isDark)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> .char
|
||||
display block
|
||||
@@ -449,7 +434,7 @@ root(isDark)
|
||||
> div
|
||||
padding 0 0 16px 0
|
||||
margin 0 0 16px 0
|
||||
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> h1
|
||||
margin 0
|
||||
@@ -518,10 +503,4 @@ root(isDark)
|
||||
display block
|
||||
margin 0
|
||||
|
||||
.mk-welcome[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-welcome:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template slot="header">%fa:chart-pie%%i18n:@title%</template>
|
||||
<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
|
||||
|
||||
<div class="mkw-polls--body" :data-darkmode="$store.state.device.darkmode">
|
||||
<div class="mkw-polls--body">
|
||||
<div class="poll" v-if="!fetching && poll != null">
|
||||
<p v-if="poll.text"><router-link :to="poll | notePage">{{ poll.text }}</router-link></p>
|
||||
<p v-if="!poll.text"><router-link :to="poll | notePage">%fa:link%</router-link></p>
|
||||
@@ -64,11 +64,11 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-polls--body
|
||||
> .poll
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color isDark ? #9ea4ad : #555
|
||||
color var(--text)
|
||||
|
||||
> p
|
||||
margin 0 0 8px 0
|
||||
@@ -91,10 +91,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mkw-polls--body[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-polls--body:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -68,7 +68,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mkw-post-form
|
||||
background #fff
|
||||
@@ -107,8 +107,8 @@ export default define({
|
||||
margin 0
|
||||
padding 0 10px
|
||||
height 28px
|
||||
color $theme-color-foreground
|
||||
background $theme-color !important
|
||||
color var(--primaryForeground)
|
||||
background var(--primary) !important
|
||||
outline none
|
||||
border none
|
||||
border-radius 4px
|
||||
@@ -116,10 +116,10 @@ export default define({
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%) !important
|
||||
background var(--primaryLighten10) !important
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%) !important
|
||||
background var(--primaryDarken10) !important
|
||||
transition background 0s ease
|
||||
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
|
||||
:data-compact="props.design == 1 || props.design == 2"
|
||||
:data-melt="props.design == 2"
|
||||
:data-darkmode="$store.state.device.darkmode"
|
||||
>
|
||||
<div class="banner"
|
||||
:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
|
||||
@@ -46,8 +45,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
|
||||
.egwyvoaaryotefqhqtmiyawwefemjfsd-body
|
||||
&[data-compact]
|
||||
> .banner:before
|
||||
content ""
|
||||
@@ -88,7 +86,7 @@ root(isDark)
|
||||
|
||||
> .banner
|
||||
height 100px
|
||||
background-color isDark ? #303e4a : #f5f5f5
|
||||
background-color var(--primaryDarken10)
|
||||
background-size cover
|
||||
background-position center
|
||||
cursor pointer
|
||||
@@ -100,7 +98,7 @@ root(isDark)
|
||||
left 16px
|
||||
width 58px
|
||||
height 58px
|
||||
border solid 3px isDark ? #282c37 : #fff
|
||||
border solid 3px var(--face)
|
||||
border-radius 8px
|
||||
cursor pointer
|
||||
|
||||
@@ -109,19 +107,14 @@ root(isDark)
|
||||
margin 10px 0 0 84px
|
||||
line-height 16px
|
||||
font-weight bold
|
||||
color isDark ? #fff : #555
|
||||
color var(--text)
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 4px 0 8px 84px
|
||||
line-height 16px
|
||||
font-size 0.9em
|
||||
color isDark ? #606984 : #999
|
||||
|
||||
.egwyvoaaryotefqhqtmiyawwefemjfsd-body[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.egwyvoaaryotefqhqtmiyawwefemjfsd-body:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
</style>
|
||||
|
||||
@@ -67,7 +67,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-trends
|
||||
.mkw-trends--body
|
||||
> .note
|
||||
padding 16px
|
||||
@@ -98,10 +98,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mkw-trends[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-trends:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -73,11 +73,11 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-users
|
||||
.mkw-users--body
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
@@ -103,14 +103,15 @@ root(isDark)
|
||||
margin 0
|
||||
font-size 16px
|
||||
line-height 24px
|
||||
color isDark ? #fff : #555
|
||||
color var(--text)
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
font-size 15px
|
||||
line-height 16px
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
@@ -132,10 +133,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mkw-users[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-users:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user