wip
This commit is contained in:
parent
1eb6ad58d5
commit
0ef64a6d0b
|
@ -137,7 +137,7 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
font-weight bold
|
font-weight bold
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
margin 0 .5em 0 0
|
margin 0 .5em 0 0
|
||||||
|
|
|
@ -225,8 +225,6 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
||||||
|
|
||||||
root(isDark)
|
root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-align left
|
text-align left
|
||||||
|
@ -243,24 +241,24 @@ root(isDark)
|
||||||
text-align center
|
text-align center
|
||||||
color #999
|
color #999
|
||||||
cursor pointer
|
cursor pointer
|
||||||
background isDark ? #21242d : #fafafa
|
background var(--subNoteBg)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
border-bottom solid 1px var(--faceDivider)
|
||||||
border-radius 6px 6px 0 0
|
border-radius var(--round) var(--round) 0 0
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #2e3440 : #f6f6f6
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #21242b : #f0f0f0
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
color isDark ? #21242b : #ccc
|
cursor wait
|
||||||
|
|
||||||
> .conversation
|
> .conversation
|
||||||
> *
|
> *
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
color var(--renoteText)
|
color var(--renoteText)
|
||||||
|
@ -287,7 +285,7 @@ root(isDark)
|
||||||
padding-top 8px
|
padding-top 8px
|
||||||
|
|
||||||
> .reply-to
|
> .reply-to
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> article
|
> article
|
||||||
padding 28px 32px 18px 32px
|
padding 28px 32px 18px 32px
|
||||||
|
@ -299,7 +297,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> footer > button
|
> footer > button
|
||||||
color isDark ? #707b97 : #888
|
color var(--noteActionsHighlighted)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
width 60px
|
width 60px
|
||||||
|
@ -316,7 +314,7 @@ root(isDark)
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0
|
margin 0
|
||||||
line-height 24px
|
line-height 24px
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
font-size 18px
|
font-size 18px
|
||||||
font-weight 700
|
font-weight 700
|
||||||
text-align left
|
text-align left
|
||||||
|
@ -394,20 +392,20 @@ root(isDark)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ccc
|
color var(--noteActions)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #a1a8bf : #444
|
color var(--noteActionsHover)
|
||||||
|
|
||||||
&.replyButton:hover
|
&.replyButton:hover
|
||||||
color #0af
|
color var(--noteActionsReplyHover)
|
||||||
|
|
||||||
&.renoteButton:hover
|
&.renoteButton:hover
|
||||||
color #8d0
|
color var(--noteActionsRenoteHover)
|
||||||
|
|
||||||
&.reactionButton:hover
|
&.reactionButton:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .count
|
> .count
|
||||||
display inline
|
display inline
|
||||||
|
@ -415,11 +413,11 @@ root(isDark)
|
||||||
color #999
|
color #999
|
||||||
|
|
||||||
&.reacted, &.reacted:hover
|
&.reacted, &.reacted:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .replies
|
> .replies
|
||||||
> *
|
> *
|
||||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
border-top 1px solid var(--faceDivider)
|
||||||
|
|
||||||
.mk-note-detail[data-darkmode]
|
.mk-note-detail[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
@ -47,7 +47,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px 32px
|
padding 16px 32px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
background isDark ? #21242d : #fcfcfc
|
background var(--subNoteBg)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
|
|
|
@ -398,7 +398,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> .main > footer > button
|
> .main > footer > button
|
||||||
color isDark ? #707b97 : #888
|
color var(--noteActionsHighlighted)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
|
@ -500,22 +500,22 @@ root(isDark)
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ddd
|
color var(--noteActions)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #a1a8bf : #444
|
color var(--noteActionsHover)
|
||||||
|
|
||||||
&.replyButton:hover
|
&.replyButton:hover
|
||||||
color #0af
|
color var(--noteActionsReplyHover)
|
||||||
|
|
||||||
&.renoteButton:hover
|
&.renoteButton:hover
|
||||||
color #8d0
|
color var(--noteActionsRenoteHover)
|
||||||
|
|
||||||
&.reactionButton:hover
|
&.reactionButton:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .count
|
> .count
|
||||||
display inline
|
display inline
|
||||||
|
@ -523,7 +523,7 @@ root(isDark)
|
||||||
color #999
|
color #999
|
||||||
|
|
||||||
&.reacted, &.reacted:hover
|
&.reacted, &.reacted:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .detail
|
> .detail
|
||||||
padding-top 4px
|
padding-top 4px
|
||||||
|
|
|
@ -33,7 +33,7 @@ root(isDark)
|
||||||
display flex
|
display flex
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 10px
|
font-size 10px
|
||||||
background isDark ? #21242d : #fcfcfc
|
background var(--subNoteBg)
|
||||||
|
|
||||||
&.smart
|
&.smart
|
||||||
> .main
|
> .main
|
||||||
|
|
|
@ -402,7 +402,7 @@ root(isDark)
|
||||||
border none
|
border none
|
||||||
box-shadow none
|
box-shadow none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ddd
|
color var(--noteActions)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
|
|
|
@ -223,8 +223,6 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
||||||
|
|
||||||
root(isDark)
|
root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
width 100%
|
width 100%
|
||||||
|
@ -248,22 +246,22 @@ root(isDark)
|
||||||
text-align center
|
text-align center
|
||||||
color #999
|
color #999
|
||||||
cursor pointer
|
cursor pointer
|
||||||
background isDark ? #21242d : #fafafa
|
background var(--subNoteBg)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
border-bottom solid 1px var(--faceDivider)
|
||||||
border-radius 6px 6px 0 0
|
border-radius 6px 6px 0 0
|
||||||
box-shadow none
|
box-shadow none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #16181d : #f6f6f6
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:disabled
|
&:active
|
||||||
color #ccc
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
> .conversation
|
> .conversation
|
||||||
> *
|
> *
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
color var(--renoteText)
|
color var(--renoteText)
|
||||||
|
@ -290,7 +288,7 @@ root(isDark)
|
||||||
padding-top 8px
|
padding-top 8px
|
||||||
|
|
||||||
> .reply-to
|
> .reply-to
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> article
|
> article
|
||||||
padding 14px 16px 9px 16px
|
padding 14px 16px 9px 16px
|
||||||
|
@ -323,7 +321,7 @@ root(isDark)
|
||||||
> .name
|
> .name
|
||||||
display inline-block
|
display inline-block
|
||||||
margin .4em 0
|
margin .4em 0
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
font-size 16px
|
font-size 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
text-align left
|
text-align left
|
||||||
|
@ -407,7 +405,7 @@ root(isDark)
|
||||||
border none
|
border none
|
||||||
box-shadow none
|
box-shadow none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ddd
|
color var(--noteActions)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
|
@ -426,7 +424,7 @@ root(isDark)
|
||||||
|
|
||||||
> .replies
|
> .replies
|
||||||
> *
|
> *
|
||||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
border-top 1px solid var(--faceDivider)
|
||||||
|
|
||||||
.mk-note-detail[data-darkmode]
|
.mk-note-detail[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
@ -45,7 +45,7 @@ root(isDark)
|
||||||
display flex
|
display flex
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 10px
|
font-size 10px
|
||||||
background isDark ? #21242d : #fcfcfc
|
background var(--subNoteBg)
|
||||||
|
|
||||||
@media (min-width 350px)
|
@media (min-width 350px)
|
||||||
font-size 12px
|
font-size 12px
|
||||||
|
|
|
@ -442,7 +442,7 @@ root(isDark)
|
||||||
border none
|
border none
|
||||||
box-shadow none
|
box-shadow none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ddd
|
color var(--noteActions)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
|
|
|
@ -14,8 +14,15 @@
|
||||||
"faceDivider": "rgba(0, 0, 0, 0.3)",
|
"faceDivider": "rgba(0, 0, 0, 0.3)",
|
||||||
"popupBg": "#2c303c",
|
"popupBg": "#2c303c",
|
||||||
"popupFg": "#d6dce2",
|
"popupFg": "#d6dce2",
|
||||||
|
"subNoteBg": "rgba(0, 0, 0, 0.18)",
|
||||||
"renoteGradient": "#314027",
|
"renoteGradient": "#314027",
|
||||||
"renoteText": "#9dbb00",
|
"renoteText": "#9dbb00",
|
||||||
|
"noteActions": "#606984",
|
||||||
|
"noteActionsHover": "#a1a8bf",
|
||||||
|
"noteActionsReplyHover": "#0af",
|
||||||
|
"noteActionsRenoteHover": "#8d0",
|
||||||
|
"noteActionsReactionHover": "#fa0",
|
||||||
|
"noteActionsHighlighted": "#707b97",
|
||||||
"modalBackdrop": "rgba(0, 0, 0, 0.5)",
|
"modalBackdrop": "rgba(0, 0, 0, 0.5)",
|
||||||
"dateDividerBg": "#242731",
|
"dateDividerBg": "#242731",
|
||||||
"dateDividerFg": "#666b79",
|
"dateDividerFg": "#666b79",
|
||||||
|
|
|
@ -7,9 +7,9 @@
|
||||||
"primary": "#fb8d4e",
|
"primary": "#fb8d4e",
|
||||||
"primaryForeground": "#fff",
|
"primaryForeground": "#fff",
|
||||||
"bg": "#1b1a35",
|
"bg": "#1b1a35",
|
||||||
"face": "#282c37",
|
"face": "#2e2a3e",
|
||||||
"faceHeader": "#313543",
|
"faceHeader": "#36314e",
|
||||||
"faceDivider": "rgba(0, 0, 0, 0.3)",
|
"dateDividerBg": "#26253c",
|
||||||
"popupBg": "#2c303c",
|
"popupBg": "#2c303c",
|
||||||
"popupFg": "#d6dce2",
|
"popupFg": "#d6dce2",
|
||||||
"renoteGradient": "#5d2d1a",
|
"renoteGradient": "#5d2d1a",
|
||||||
|
|
|
@ -14,8 +14,15 @@
|
||||||
"faceDivider": "rgba(0, 0, 0, 0.082)",
|
"faceDivider": "rgba(0, 0, 0, 0.082)",
|
||||||
"popupBg": "#fff",
|
"popupBg": "#fff",
|
||||||
"popupFg": "#586069",
|
"popupFg": "#586069",
|
||||||
|
"subNoteBg": "rgba(0, 0, 0, 0.01)",
|
||||||
"renoteGradient": "#edfde2",
|
"renoteGradient": "#edfde2",
|
||||||
"renoteText": "#9dbb00",
|
"renoteText": "#9dbb00",
|
||||||
|
"noteActions": "#ddd",
|
||||||
|
"noteActionsHover": "#444",
|
||||||
|
"noteActionsReplyHover": "#0af",
|
||||||
|
"noteActionsRenoteHover": "#8d0",
|
||||||
|
"noteActionsReactionHover": "#fa0",
|
||||||
|
"noteActionsHighlighted": "#888",
|
||||||
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
|
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
|
||||||
"dateDividerBg": "#fdfdfd",
|
"dateDividerBg": "#fdfdfd",
|
||||||
"dateDividerFg": "#aaa",
|
"dateDividerFg": "#aaa",
|
||||||
|
|
Loading…
Reference in New Issue