heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-09-27 16:49:18 +09:00
parent 9e319006f3
commit a36d73cb52
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
10 changed files with 47 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/common/views/widgets/calendar.vue
View File

@ -124,7 +124,7 @@ root(isDark)
.mkw-calendar--body .mkw-calendar--body
padding 16px 0 padding 16px 0
color isDark ? #c5ced6 : #777 color var(--calendarDay)
&:after &:after
content "" content ""

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

@ -128,10 +128,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-calendar
color var(--calendarDay)
root(isDark)
color isDark ? #c5ced6 : #777
background var(--face) background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
@ -149,12 +147,10 @@ root(isDark)
line-height 42px line-height 42px
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color isDark ? #c5ced6 : #888 color var(--faceHeaderText)
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 1px rgba(#000, 0.07)
if isDark
background #313543
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
@ -172,7 +168,7 @@ root(isDark)
color var(--faceTextButtonHover) color var(--faceTextButtonHover)
&:active &:active
color isDark ? #b2c1d5 : #999 color var(--faceTextButtonActive)
&:first-of-type &:first-of-type
left 0 left 0
@ -195,49 +191,46 @@ root(isDark)
font-size 14px font-size 14px
&.weekday &.weekday
color isDark ? #43d5dc : #19a2a9 color var(--calendarWeek)
&[data-is-donichi] &[data-is-donichi]
color isDark ? #ff6679 : #ef95a0 color var(--calendarSaturdayOrSunday)
&[data-today] &[data-today]
box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset box-shadow 0 0 0 1px var(--calendarWeek) inset
border-radius 6px border-radius 6px
&[data-is-donichi] &[data-is-donichi]
box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
&.day &.day
cursor pointer cursor pointer
color isDark ? #c5ced6 : #777 color var(--calendarDay)
> div > div
border-radius 6px border-radius 6px
&:hover > div &:hover > div
background rgba(#000, isDark ? 0.1 : 0.025) background var(--faceClearButtonHover)
&:active > div &:active > div
background rgba(#000, isDark ? 0.2 : 0.05) background var(--faceClearButtonActive)
&[data-is-donichi] &[data-is-donichi]
color isDark ? #ff6679 : #ef95a0 color var(--calendarSaturdayOrSunday)
&[data-is-out-of-range] &[data-is-out-of-range]
cursor default cursor default
color rgba(isDark ? #c5ced6 : #777, 0.5) opacity 0.5
&[data-is-donichi]
color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
&[data-selected] &[data-selected]
font-weight bold font-weight bold
> div > div
background rgba(#000, isDark ? 0.1 : 0.025) background var(--faceClearButtonHover)
&:active > div &:active > div
background rgba(#000, isDark ? 0.2 : 0.05) background var(--faceClearButtonActive)
&[data-today] &[data-today]
> div > div
@ -250,10 +243,4 @@ root(isDark)
&:active > div &:active > div
background var(--primaryDarken10) background var(--primaryDarken10)
.mk-calendar[data-darkmode]
root(true)
.mk-calendar:not([data-darkmode])
root(false)
</style> </style>

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

@ -191,7 +191,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-notifications
.transition .transition
.mk-notifications-enter .mk-notifications-enter
.mk-notifications-leave-to .mk-notifications-leave-to
@ -208,7 +208,7 @@ root(isDark)
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 13px font-size 13px
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05) border-bottom solid 1px var(--faceDivider)
&:last-child &:last-child
border-bottom none border-bottom none
@ -219,7 +219,7 @@ root(isDark)
top 16px top 16px
right 12px right 12px
vertical-align top vertical-align top
color isDark ? #606984 : rgba(#000, 0.6) color var(--noteHeaderInfo)
font-size small font-size small
&:after &:after
@ -249,10 +249,10 @@ root(isDark)
margin-right 4px margin-right 4px
.note-preview .note-preview
color isDark ? #c2cad4 : rgba(#000, 0.7) color var(--noteText)
.note-ref .note-ref
color isDark ? #c2cad4 : rgba(#000, 0.7) color var(--noteText)
[data-fa] [data-fa]
font-size 1em font-size 1em
@ -283,9 +283,9 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05) border-bottom solid 1px var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -327,10 +327,4 @@ root(isDark)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style> </style>

4
src/client/app/desktop/views/pages/deck/deck.notes.vue
View File

@ -214,8 +214,8 @@ root(isDark)
line-height 32px line-height 32px
font-size 14px font-size 14px
text-align center text-align center
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
span span

4
src/client/app/desktop/views/pages/deck/deck.notifications.vue
View File

@ -177,8 +177,8 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
span span

4
src/client/app/mobile/views/components/notes.vue
View File

@ -243,8 +243,8 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.9em font-size 0.9em
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
span span

14
src/client/app/mobile/views/components/notifications.vue
View File

@ -104,9 +104,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-notifications
margin 0 auto margin 0 auto
background isDark ? #282C37 :#fff background var(--face)
border-radius 8px border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1) box-shadow 0 0 2px rgba(#000, 0.1)
overflow hidden overflow hidden
@ -134,8 +134,8 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
span span
@ -169,10 +169,4 @@ root(isDark)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style> </style>

7
src/client/theme/dark.json
View File

@ -17,6 +17,8 @@
"faceTextButton": "#9baec8", "faceTextButton": "#9baec8",
"faceTextButtonHover": "#b2c1d5", "faceTextButtonHover": "#b2c1d5",
"faceTextButtonActive": "#b2c1d5", "faceTextButtonActive": "#b2c1d5",
"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
"popupBg": "#2c303c", "popupBg": "#2c303c",
"popupFg": "#d6dce2", "popupFg": "#d6dce2",
"subNoteBg": "rgba(0, 0, 0, 0.18)", "subNoteBg": "rgba(0, 0, 0, 0.18)",
@ -48,11 +50,14 @@
"cwButtonFg": "#393f4f", "cwButtonFg": "#393f4f",
"cwButtonHoverBg": "#707b97", "cwButtonHoverBg": "#707b97",
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)", "reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
"calendarWeek": "#43d5dc",
"calendarSaturdayOrSunday": "#ff6679",
"calendarDay": "#c5ced6",
"desktopHeaderBg": "#313543", "desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca", "desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff", "desktopHeaderHoverFg": "#fff",
"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')", "desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)", "desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)", "desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
"desktopHeaderSearchFg": "#fff", "desktopHeaderSearchFg": "#fff",
"desktopPostFormBg": "@face", "desktopPostFormBg": "@face",

2
src/client/theme/halloween.json
View File

@ -16,5 +16,5 @@
"renoteGradient": "#5d2d1a", "renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00", "renoteText": "#ff6c00",
"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)", "reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
"desktopHeaderBg": "#0c0b19" "desktopHeaderBg": "#36314e"
} }

5
src/client/theme/light.json
View File

@ -17,6 +17,8 @@
"faceTextButton": "#ccc", "faceTextButton": "#ccc",
"faceTextButtonHover": "#aaa", "faceTextButtonHover": "#aaa",
"faceTextButtonActive": "#999", "faceTextButtonActive": "#999",
"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
"popupBg": "#fff", "popupBg": "#fff",
"popupFg": "#586069", "popupFg": "#586069",
"subNoteBg": "rgba(0, 0, 0, 0.01)", "subNoteBg": "rgba(0, 0, 0, 0.01)",
@ -48,6 +50,9 @@
"cwButtonFg": "#fff", "cwButtonFg": "#fff",
"cwButtonHoverBg": "#bbc4ce", "cwButtonHoverBg": "#bbc4ce",
"reactionPickerButtonHoverBg": "#eee", "reactionPickerButtonHoverBg": "#eee",
"calendarWeek": "#19a2a9",
"calendarSaturdayOrSunday": "#ef95a0",
"calendarDay": "#777",
"desktopHeaderBg": "#f7f7f7", "desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8", "desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88", "desktopHeaderHoverFg": "#7b8c88",