wip
This commit is contained in:
parent
9e319006f3
commit
a36d73cb52
10 changed files with 47 additions and 62 deletions
|
@ -124,7 +124,7 @@ root(isDark)
|
|||
|
||||
.mkw-calendar--body
|
||||
padding 16px 0
|
||||
color isDark ? #c5ced6 : #777
|
||||
color var(--calendarDay)
|
||||
|
||||
&:after
|
||||
content ""
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -16,5 +16,5 @@
|
|||
"renoteGradient": "#5d2d1a",
|
||||
"renoteText": "#ff6c00",
|
||||
"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
|
||||
"desktopHeaderBg": "#0c0b19"
|
||||
"desktopHeaderBg": "#36314e"
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue