mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-12 05:38:12 +09:00
Code

wip

Browse Source
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
padding 16px 0
color isDark ? #c5ced6 : #777
color var(--calendarDay)
&:after
content ""

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

@ -128,10 +128,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
color isDark ? #c5ced6 : #777
.mk-calendar
color var(--calendarDay)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
@ -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
@ -172,7 +168,7 @@ root(isDark)
color var(--faceTextButtonHover)
&:active
color isDark ? #b2c1d5 : #999
color var(--faceTextButtonActive)
&:first-of-type
left 0
@ -195,49 +191,46 @@ 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
@ -250,10 +243,4 @@ root(isDark)
&:active > div
background var(--primaryDarken10)
.mk-calendar[data-darkmode]
root(true)
.mk-calendar:not([data-darkmode])
root(false)
</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>

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

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

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

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

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

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

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

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

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

@ -17,6 +17,8 @@
"faceTextButton": "#9baec8",
"faceTextButtonHover": "#b2c1d5",
"faceTextButtonActive": "#b2c1d5",
"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"subNoteBg": "rgba(0, 0, 0, 0.18)",
@ -48,11 +50,14 @@
"cwButtonFg": "#393f4f",
"cwButtonHoverBg": "#707b97",
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
"calendarWeek": "#43d5dc",
"calendarSaturdayOrSunday": "#ff6679",
"calendarDay": "#c5ced6",
"desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff",
"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)",
"desktopHeaderSearchFg": "#fff",
"desktopPostFormBg": "@face",

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

@ -16,5 +16,5 @@
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"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",
"faceTextButtonHover": "#aaa",
"faceTextButtonActive": "#999",
"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
"popupBg": "#fff",
"popupFg": "#586069",
"subNoteBg": "rgba(0, 0, 0, 0.01)",
@ -48,6 +50,9 @@
"cwButtonFg": "#fff",
"cwButtonHoverBg": "#bbc4ce",
"reactionPickerButtonHoverBg": "#eee",
"calendarWeek": "#19a2a9",
"calendarSaturdayOrSunday": "#ef95a0",
"calendarDay": "#777",
"desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88",