summaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/app/common/views/widgets/nav.vue14
-rw-r--r--src/client/app/common/views/widgets/posts-monitor.vue10
-rw-r--r--src/client/app/common/views/widgets/rss.vue16
-rw-r--r--src/client/app/common/views/widgets/server.cpu-memory.vue10
-rw-r--r--src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue2
-rw-r--r--src/client/app/mobile/views/pages/user.vue34
-rw-r--r--src/client/theme/dark.json9
-rw-r--r--src/client/theme/light.json9
8 files changed, 45 insertions, 59 deletions
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 04dfe97c72..12003db3f2 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -16,23 +16,17 @@ export default define({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.mkw-nav
.mkw-nav--body
padding 16px
font-size 12px
- color isDark ? #9aa4b3 : #aaa
+ color var(--text)
background var(--face)
a
- color isDark ? #9aa4b3 : #999
+ color var(--text)
i
- color isDark ? #9aa4b3 : #ccc
-
-.mkw-nav[data-darkmode]
- root(true)
-
-.mkw-nav:not([data-darkmode])
- root(false)
+ color var(--text)
</style>
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 801307be54..09f766696b 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -173,7 +173,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.qpdmibaztplkylerhdbllwcokyrfxeyj
&.dual
> svg
width 50%
@@ -192,7 +192,7 @@ root(isDark)
> text
font-size 5px
- fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+ fill var(--chartCaption)
> tspan
opacity 0.5
@@ -202,10 +202,4 @@ root(isDark)
display block
clear both
-.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
- root(true)
-
-.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index a777388cdb..448eee9fb6 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -65,7 +65,7 @@ export default define({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.mkw-rss
.mkw-rss--body
.feed
padding 12px 16px
@@ -74,8 +74,8 @@ root(isDark)
> a
display block
padding 4px 0
- color isDark ? #9aa4b3 : #666
- border-bottom dashed 1px isDark ? #1c2023 : #eee
+ color var(--text)
+ border-bottom dashed 1px var(--faceDivider)
&:last-child
border-bottom none
@@ -90,7 +90,7 @@ root(isDark)
margin-right 4px
&[data-mobile]
- background isDark ? #21242f : #f3f3f3
+ background var(--face)
.feed
padding 0
@@ -100,12 +100,6 @@ root(isDark)
border-bottom none
&:nth-child(even)
- background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
-
-.mkw-rss[data-darkmode]
- root(true)
-
-.mkw-rss:not([data-darkmode])
- root(false)
+ background rgba(#000, 0.05)
</style>
diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue
index b0421d6150..55aa1ea895 100644
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/src/client/app/common/views/widgets/server.cpu-memory.vue
@@ -129,7 +129,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.cpu-memory
> svg
display block
padding 10px
@@ -144,7 +144,7 @@ root(isDark)
> text
font-size 5px
- fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+ fill var(--chartCaption)
> tspan
opacity 0.5
@@ -154,10 +154,4 @@ root(isDark)
display block
clear both
-.cpu-memory[data-darkmode]
- root(true)
-
-.cpu-memory:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index d14ce12553..ebaa11478d 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -125,7 +125,7 @@ root(isDark)
> text
font-size 10px
- fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+ fill var(--chartCaption)
> tspan
opacity 0.5
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 1ff81fc0c6..d7edda1a74 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,10 +115,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark)
- $bg = isDark ? #22252f : #f7f7f7
+main
+ $bg = var(--face)
> .is-suspended
> .is-remote
@@ -148,7 +146,7 @@ root(isDark)
> .banner
padding-bottom 33.3%
- background-color isDark ? #5f7273 : #cacaca
+ background-color rgba(0, 0, 0, 0.1)
background-size cover
background-position center
@@ -198,26 +196,26 @@ root(isDark)
margin 0
line-height 22px
font-size 20px
- color isDark ? #fff : #757c82
+ color var(--mobileUserPageName)
> .username
display inline-block
line-height 20px
font-size 16px
font-weight bold
- color isDark ? #657786 : #969ea5
+ color var(--mobileUserPageAcct)
> .followed
margin-left 8px
padding 2px 4px
font-size 12px
- color isDark ? #657786 : #fff
- background isDark ? #f8f8f8 : #a7bec7
+ color var(--mobileUserPageFollowedFg)
+ background var(--mobileUserPageFollowedBg)
border-radius 4px
> .description
margin 8px 0
- color isDark ? #fff : #757c82
+ color var(--mobileUserPageDescription)
> .info
margin 8px 0
@@ -225,14 +223,14 @@ root(isDark)
> p
display inline
margin 0 16px 0 0
- color isDark ? #a9b9c1 : #90989c
+ color var(--text)
> i
margin-right 4px
> .status
> a
- color isDark ? #657786 : #818a92
+ color var(--text)
&:not(:last-child)
margin-right 16px
@@ -240,7 +238,7 @@ root(isDark)
> b
margin-right 4px
font-size 16px
- color isDark ? #fff : #787e86
+ color var(--mobileUserPageStatusHighlight)
> i
font-size 14px
@@ -249,7 +247,7 @@ root(isDark)
position -webkit-sticky
position sticky
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
z-index 2
@@ -266,7 +264,7 @@ root(isDark)
line-height 48px
font-size 12px
text-decoration none
- color isDark ? #657786 : #9ca1a5
+ color var(--text)
border-bottom solid 2px transparent
@media (min-width 400px)
@@ -289,10 +287,4 @@ root(isDark)
@media (min-width 600px)
padding 32px
-main[data-darkmode]
- root(true)
-
-main:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8a39648037..896ac7a920 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -86,6 +86,8 @@
"calendarSaturdayOrSunday": "#ff6679",
"calendarDay": "#c5ced6",
+ "chartCaption": ":alpha<0.6<$text",
+
"announcementsBg": "#253a50",
"announcementsTitle": "#539eff",
"announcementsText": "#fff",
@@ -125,6 +127,13 @@
"desktopSettingsNavItem": ":alpha<0.8<$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)",
"mobileAnnouncementFg": "#fff",
"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f5003ae2ec..fe018b5476 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -86,6 +86,8 @@
"calendarSaturdayOrSunday": "#ef95a0",
"calendarDay": "#777",
+ "chartCaption": ":alpha<0.6<$text",
+
"announcementsBg": "#f3f9ff",
"announcementsTitle": "#4078c0",
"announcementsText": "#57616f",
@@ -125,6 +127,13 @@
"desktopSettingsNavItem": ":alpha<0.8<$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)",
"mobileAnnouncementFg": "#3f4967",
"mobileSignedInAsBg": "#fcfff5",
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-04 10:07:51 +0000