wip
This commit is contained in:
parent
18be0d36f3
commit
fccfe19e13
8 changed files with 45 additions and 59 deletions
|
@ -16,23 +16,17 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mkw-nav
|
||||||
.mkw-nav--body
|
.mkw-nav--body
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #9aa4b3 : #aaa
|
color var(--text)
|
||||||
background var(--face)
|
background var(--face)
|
||||||
|
|
||||||
a
|
a
|
||||||
color isDark ? #9aa4b3 : #999
|
color var(--text)
|
||||||
|
|
||||||
i
|
i
|
||||||
color isDark ? #9aa4b3 : #ccc
|
color var(--text)
|
||||||
|
|
||||||
.mkw-nav[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-nav:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -173,7 +173,7 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.qpdmibaztplkylerhdbllwcokyrfxeyj
|
||||||
&.dual
|
&.dual
|
||||||
> svg
|
> svg
|
||||||
width 50%
|
width 50%
|
||||||
|
@ -192,7 +192,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 5px
|
font-size 5px
|
||||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
> tspan
|
> tspan
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
@ -202,10 +202,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -65,7 +65,7 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mkw-rss
|
||||||
.mkw-rss--body
|
.mkw-rss--body
|
||||||
.feed
|
.feed
|
||||||
padding 12px 16px
|
padding 12px 16px
|
||||||
|
@ -74,8 +74,8 @@ root(isDark)
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
padding 4px 0
|
padding 4px 0
|
||||||
color isDark ? #9aa4b3 : #666
|
color var(--text)
|
||||||
border-bottom dashed 1px isDark ? #1c2023 : #eee
|
border-bottom dashed 1px var(--faceDivider)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
@ -90,7 +90,7 @@ root(isDark)
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
&[data-mobile]
|
&[data-mobile]
|
||||||
background isDark ? #21242f : #f3f3f3
|
background var(--face)
|
||||||
|
|
||||||
.feed
|
.feed
|
||||||
padding 0
|
padding 0
|
||||||
|
@ -100,12 +100,6 @@ root(isDark)
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
||||||
&:nth-child(even)
|
&:nth-child(even)
|
||||||
background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
.mkw-rss[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-rss:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -129,7 +129,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.cpu-memory
|
||||||
> svg
|
> svg
|
||||||
display block
|
display block
|
||||||
padding 10px
|
padding 10px
|
||||||
|
@ -144,7 +144,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 5px
|
font-size 5px
|
||||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
> tspan
|
> tspan
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
@ -154,10 +154,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.cpu-memory[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.cpu-memory:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -125,7 +125,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 10px
|
font-size 10px
|
||||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
> tspan
|
> tspan
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
|
@ -115,10 +115,8 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
main
|
||||||
|
$bg = var(--face)
|
||||||
root(isDark)
|
|
||||||
$bg = isDark ? #22252f : #f7f7f7
|
|
||||||
|
|
||||||
> .is-suspended
|
> .is-suspended
|
||||||
> .is-remote
|
> .is-remote
|
||||||
|
@ -148,7 +146,7 @@ root(isDark)
|
||||||
|
|
||||||
> .banner
|
> .banner
|
||||||
padding-bottom 33.3%
|
padding-bottom 33.3%
|
||||||
background-color isDark ? #5f7273 : #cacaca
|
background-color rgba(0, 0, 0, 0.1)
|
||||||
background-size cover
|
background-size cover
|
||||||
background-position center
|
background-position center
|
||||||
|
|
||||||
|
@ -198,26 +196,26 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
line-height 22px
|
line-height 22px
|
||||||
font-size 20px
|
font-size 20px
|
||||||
color isDark ? #fff : #757c82
|
color var(--mobileUserPageName)
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
display inline-block
|
display inline-block
|
||||||
line-height 20px
|
line-height 20px
|
||||||
font-size 16px
|
font-size 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color isDark ? #657786 : #969ea5
|
color var(--mobileUserPageAcct)
|
||||||
|
|
||||||
> .followed
|
> .followed
|
||||||
margin-left 8px
|
margin-left 8px
|
||||||
padding 2px 4px
|
padding 2px 4px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #657786 : #fff
|
color var(--mobileUserPageFollowedFg)
|
||||||
background isDark ? #f8f8f8 : #a7bec7
|
background var(--mobileUserPageFollowedBg)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> .description
|
> .description
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
color isDark ? #fff : #757c82
|
color var(--mobileUserPageDescription)
|
||||||
|
|
||||||
> .info
|
> .info
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
|
@ -225,14 +223,14 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
display inline
|
display inline
|
||||||
margin 0 16px 0 0
|
margin 0 16px 0 0
|
||||||
color isDark ? #a9b9c1 : #90989c
|
color var(--text)
|
||||||
|
|
||||||
> i
|
> i
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
> .status
|
> .status
|
||||||
> a
|
> a
|
||||||
color isDark ? #657786 : #818a92
|
color var(--text)
|
||||||
|
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right 16px
|
margin-right 16px
|
||||||
|
@ -240,7 +238,7 @@ root(isDark)
|
||||||
> b
|
> b
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color isDark ? #fff : #787e86
|
color var(--mobileUserPageStatusHighlight)
|
||||||
|
|
||||||
> i
|
> i
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
@ -249,7 +247,7 @@ root(isDark)
|
||||||
position -webkit-sticky
|
position -webkit-sticky
|
||||||
position sticky
|
position sticky
|
||||||
top 47px
|
top 47px
|
||||||
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
|
box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
|
||||||
background-color $bg
|
background-color $bg
|
||||||
z-index 2
|
z-index 2
|
||||||
|
|
||||||
|
@ -266,7 +264,7 @@ root(isDark)
|
||||||
line-height 48px
|
line-height 48px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
text-decoration none
|
text-decoration none
|
||||||
color isDark ? #657786 : #9ca1a5
|
color var(--text)
|
||||||
border-bottom solid 2px transparent
|
border-bottom solid 2px transparent
|
||||||
|
|
||||||
@media (min-width 400px)
|
@media (min-width 400px)
|
||||||
|
@ -289,10 +287,4 @@ root(isDark)
|
||||||
@media (min-width 600px)
|
@media (min-width 600px)
|
||||||
padding 32px
|
padding 32px
|
||||||
|
|
||||||
main[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
main:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -86,6 +86,8 @@
|
||||||
"calendarSaturdayOrSunday": "#ff6679",
|
"calendarSaturdayOrSunday": "#ff6679",
|
||||||
"calendarDay": "#c5ced6",
|
"calendarDay": "#c5ced6",
|
||||||
|
|
||||||
|
"chartCaption": ":alpha<0.6<$text",
|
||||||
|
|
||||||
"announcementsBg": "#253a50",
|
"announcementsBg": "#253a50",
|
||||||
"announcementsTitle": "#539eff",
|
"announcementsTitle": "#539eff",
|
||||||
"announcementsText": "#fff",
|
"announcementsText": "#fff",
|
||||||
|
@ -125,6 +127,13 @@
|
||||||
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
||||||
"desktopSettingsNavItemHover": ":lighten<10<$text",
|
"desktopSettingsNavItemHover": ":lighten<10<$text",
|
||||||
|
|
||||||
|
"mobileUserPageName": "#fff",
|
||||||
|
"mobileUserPageAcct": "$text",
|
||||||
|
"mobileUserPageDescription": "$text",
|
||||||
|
"mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)",
|
||||||
|
"mobileUserPageFollowedFg": "$text",
|
||||||
|
"mobileUserPageStatusHighlight": "#fff",
|
||||||
|
"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)",
|
||||||
"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
|
"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
|
||||||
"mobileAnnouncementFg": "#fff",
|
"mobileAnnouncementFg": "#fff",
|
||||||
"mobileSignedInAsBg": "#273c34",
|
"mobileSignedInAsBg": "#273c34",
|
||||||
|
|
|
@ -86,6 +86,8 @@
|
||||||
"calendarSaturdayOrSunday": "#ef95a0",
|
"calendarSaturdayOrSunday": "#ef95a0",
|
||||||
"calendarDay": "#777",
|
"calendarDay": "#777",
|
||||||
|
|
||||||
|
"chartCaption": ":alpha<0.6<$text",
|
||||||
|
|
||||||
"announcementsBg": "#f3f9ff",
|
"announcementsBg": "#f3f9ff",
|
||||||
"announcementsTitle": "#4078c0",
|
"announcementsTitle": "#4078c0",
|
||||||
"announcementsText": "#57616f",
|
"announcementsText": "#57616f",
|
||||||
|
@ -125,6 +127,13 @@
|
||||||
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
"desktopSettingsNavItem": ":alpha<0.8<$text",
|
||||||
"desktopSettingsNavItemHover": ":darken<10<$text",
|
"desktopSettingsNavItemHover": ":darken<10<$text",
|
||||||
|
|
||||||
|
"mobileUserPageName": "#757c82",
|
||||||
|
"mobileUserPageAcct": "#969ea5",
|
||||||
|
"mobileUserPageDescription": "#757c82",
|
||||||
|
"mobileUserPageFollowedBg": "#a7bec7",
|
||||||
|
"mobileUserPageFollowedFg": "#fff",
|
||||||
|
"mobileUserPageStatusHighlight": "#787e86",
|
||||||
|
"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)",
|
||||||
"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
|
"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
|
||||||
"mobileAnnouncementFg": "#3f4967",
|
"mobileAnnouncementFg": "#3f4967",
|
||||||
"mobileSignedInAsBg": "#fcfff5",
|
"mobileSignedInAsBg": "#fcfff5",
|
||||||
|
|
Loading…
Reference in a new issue