sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2781 from syuilo/theme

Browse Source 
Theme
This commit is contained in:
syuilo
2018-09-29 00:48:56 +09:00
committed by GitHub
parent d5818214f3 f26e641905
commit 8b68c5da37
191 changed files with 2147 additions and 3369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/client/app/desktop/views/components/calendar.vue
View File

@@ -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>

4
src/client/app/desktop/views/components/charts.vue
View File

@@ -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

32
src/client/app/desktop/views/components/choose-file-from-drive-window.vue
View File

@@ -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

20
src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
View File

@@ -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

26
src/client/app/desktop/views/components/context-menu.menu.vue
View File

@@ -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>

10
src/client/app/desktop/views/components/context-menu.vue
View File

@@ -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>

24
src/client/app/desktop/views/components/crop-window.vue
View File

@@ -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 {

10
src/client/app/desktop/views/components/dialog.vue
View File

@@ -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

22
src/client/app/desktop/views/components/drive.file.vue
View File

@@ -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>

22
src/client/app/desktop/views/components/drive.folder.vue
View File

@@ -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>

23
src/client/app/desktop/views/components/drive.vue
View File

@@ -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>

37
src/client/app/desktop/views/components/follow-button.vue
View File

@@ -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>

24
src/client/app/desktop/views/components/home.vue
View File

@@ -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>

30
src/client/app/desktop/views/components/input-dialog.vue
View File

@@ -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

60
src/client/app/desktop/views/components/note-detail.vue
View File

@@ -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>

12
src/client/app/desktop/views/components/note-preview.vue
View File

@@ -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>

14
src/client/app/desktop/views/components/notes.note.sub.vue
View File

@@ -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>

54
src/client/app/desktop/views/components/notes.note.vue
View File

@@ -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>

26
src/client/app/desktop/views/components/notes.vue
View File

@@ -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>

22
src/client/app/desktop/views/components/notifications.vue
View File

@@ -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>

11
src/client/app/desktop/views/components/post-form-window.vue
View File

@@ -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>

92
src/client/app/desktop/views/components/post-form.vue
View File

@@ -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>

22
src/client/app/desktop/views/components/progress-dialog.vue
View File

@@ -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

13
src/client/app/desktop/views/components/received-follow-requests-window.vue
View File

@@ -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>

19
src/client/app/desktop/views/components/renote-form.vue
View File

@@ -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>

19
src/client/app/desktop/views/components/settings.profile.vue
View File

@@ -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>

9
src/client/app/desktop/views/components/settings.tags.vue
View File

@@ -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>

144
src/client/app/desktop/views/components/settings.vue
View File

@@ -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>

2
src/client/app/desktop/views/components/sub-note-content.vue
View File

@@ -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%

2
src/client/app/desktop/views/components/timeline.core.vue
View File

@@ -215,7 +215,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline-core
> .mk-friends-maker

37
src/client/app/desktop/views/components/timeline.vue
View File

@@ -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>

14
src/client/app/desktop/views/components/ui-notification.vue
View File

@@ -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>

33
src/client/app/desktop/views/components/ui.header.account.vue
View File

@@ -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>

18
src/client/app/desktop/views/components/ui.header.nav.vue
View File

@@ -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>

22
src/client/app/desktop/views/components/ui.header.notifications.vue
View File

@@ -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>

10
src/client/app/desktop/views/components/ui.header.post.vue
View File

@@ -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>

21
src/client/app/desktop/views/components/ui.header.search.vue
View File

@@ -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>

89
src/client/app/desktop/views/components/ui.header.vue
View File

@@ -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>

13
src/client/app/desktop/views/components/user-lists-window.vue
View File

@@ -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>

27
src/client/app/desktop/views/components/user-preview.vue
View File

@@ -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>

6
src/client/app/desktop/views/components/users-list.vue
View File

@@ -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

36
src/client/app/desktop/views/components/widget-container.vue
View File

@@ -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>

38
src/client/app/desktop/views/components/window.vue
View File

@@ -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>