mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 14:15:43 +01:00
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
|
.mkw-calendar--body
|
||||||
padding 16px 0
|
padding 16px 0
|
||||||
color isDark ? #c5ced6 : #777
|
color var(--calendarDay)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue