mirror of
https://codeberg.org/yeentown/barkey
synced 2024-11-23 07:15:11 +00:00
wip
This commit is contained in:
parent
0c7111b438
commit
1e9eeeb980
11 changed files with 47 additions and 40 deletions
|
@ -209,7 +209,7 @@ root(isDark)
|
||||||
padding 8px
|
padding 8px
|
||||||
resize none
|
resize none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-top solid 1px isDark ? #4b5056 : #eee
|
border-top solid 1px isDark ? #4b5056 : #eee
|
||||||
|
|
|
@ -103,7 +103,7 @@ root(isDark)
|
||||||
padding 6px 8px
|
padding 6px 8px
|
||||||
width 300px
|
width 300px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background isDark ? #191b22 : #fff
|
background isDark ? #191b22 : #fff
|
||||||
border solid 1px var(--primaryAlpha01)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
|
@ -62,7 +62,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> .button
|
> .button
|
||||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
border solid 2px var(--inputLabel)
|
||||||
|
|
||||||
&.disabled
|
&.disabled
|
||||||
opacity 0.6
|
opacity 0.6
|
||||||
|
|
|
@ -167,7 +167,7 @@ root(isDark, fill)
|
||||||
width 24px
|
width 24px
|
||||||
text-align center
|
text-align center
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
|
|
||||||
&:not(:empty) + .input
|
&:not(:empty) + .input
|
||||||
margin-left 28px
|
margin-left 28px
|
||||||
|
@ -183,7 +183,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 1px
|
height 1px
|
||||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
background var(--inputBorder)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
|
@ -242,7 +242,7 @@ root(isDark, fill)
|
||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
|
@ -257,7 +257,7 @@ root(isDark, fill)
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
@ -280,7 +280,7 @@ root(isDark, fill)
|
||||||
top 0
|
top 0
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height fill ? 44px : 32px
|
line-height fill ? 44px : 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
&:empty
|
&:empty
|
||||||
|
|
|
@ -87,7 +87,7 @@ root(isDark)
|
||||||
width 20px
|
width 20px
|
||||||
height 20px
|
height 20px
|
||||||
background none
|
background none
|
||||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
border solid 2px var(--inputLabel)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
transition inherit
|
transition inherit
|
||||||
|
|
||||||
|
|
|
@ -103,7 +103,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 1px
|
height 1px
|
||||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
background var(--inputBorder)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
|
@ -143,7 +143,7 @@ root(isDark, fill)
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
height 32px
|
height 32px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
|
@ -63,9 +63,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
root(fill)
|
||||||
|
|
||||||
root(isDark, fill)
|
|
||||||
margin 42px 0 32px 0
|
margin 42px 0 32px 0
|
||||||
|
|
||||||
> .input
|
> .input
|
||||||
|
@ -84,7 +82,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
background none
|
background none
|
||||||
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
border solid 1px var(--inputBorder)
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
|
@ -112,7 +110,7 @@ root(isDark, fill)
|
||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
|
@ -126,7 +124,7 @@ root(isDark, fill)
|
||||||
font inherit
|
font inherit
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
@ -159,16 +157,10 @@ root(isDark, fill)
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.75)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-textarea[data-darkmode]
|
.ui-textarea.fill
|
||||||
&.fill
|
root(true)
|
||||||
root(true, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(true, false)
|
|
||||||
|
|
||||||
.ui-textarea:not([data-darkmode])
|
.ui-textarea:not(.fill)
|
||||||
&.fill
|
root(false)
|
||||||
root(false, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(false, false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -200,17 +200,17 @@ export default Vue.extend({
|
||||||
top 0
|
top 0
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
root(isDark)
|
.mk-url-preview
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
font-size 14px
|
font-size 14px
|
||||||
border solid 1px isDark ? #191b1f : #eee
|
border solid 1px var(--urlPreviewBorder)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration none
|
text-decoration none
|
||||||
border-color isDark ? #4f5561 : #ddd
|
border-color var(--urlPreviewBorderHover)
|
||||||
|
|
||||||
> article > header > h1
|
> article > header > h1
|
||||||
text-decoration underline
|
text-decoration underline
|
||||||
|
@ -235,11 +235,11 @@ root(isDark)
|
||||||
> h1
|
> h1
|
||||||
margin 0
|
margin 0
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #d6dae0 : #555
|
color var(--urlPreviewTitle)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
color isDark ? #a4aab3 : #777
|
color var(--urlPreviewText)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
@ -256,7 +256,7 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0
|
margin 0
|
||||||
color isDark ? #b0b4bf : #666
|
color var(--urlPreviewInfo)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
line-height 16px
|
line-height 16px
|
||||||
vertical-align top
|
vertical-align top
|
||||||
|
@ -322,10 +322,4 @@ root(isDark)
|
||||||
width 12px
|
width 12px
|
||||||
height 12px
|
height 12px
|
||||||
|
|
||||||
.mk-url-preview[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-url-preview:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -6,9 +6,10 @@
|
||||||
"vars": {
|
"vars": {
|
||||||
"primary": "#fb4e4e",
|
"primary": "#fb4e4e",
|
||||||
"secondary": "#282C37",
|
"secondary": "#282C37",
|
||||||
"text": "#d0e0ea"
|
"text": "#d6dae0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"primary": "$primary",
|
"primary": "$primary",
|
||||||
"primaryForeground": "#fff",
|
"primaryForeground": "#fff",
|
||||||
"bg": ":darken<8<$secondary",
|
"bg": ":darken<8<$secondary",
|
||||||
|
@ -54,6 +55,9 @@
|
||||||
"dateDividerFg": "#666b79",
|
"dateDividerFg": "#666b79",
|
||||||
|
|
||||||
"switchTrack": "rgba(255, 255, 255, 0.15)",
|
"switchTrack": "rgba(255, 255, 255, 0.15)",
|
||||||
|
"inputBorder": "rgba(255, 255, 255, 0.7)",
|
||||||
|
"inputLabel": "rgba(255, 255, 255, 0.7)",
|
||||||
|
"inputText": "#fff",
|
||||||
|
|
||||||
"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
|
"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
|
||||||
"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
|
"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
|
||||||
|
@ -65,6 +69,12 @@
|
||||||
|
|
||||||
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
|
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
|
||||||
|
|
||||||
|
"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
|
||||||
|
"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
|
||||||
|
"urlPreviewTitle": "$text",
|
||||||
|
"urlPreviewText": ":alpha<0.7<$text",
|
||||||
|
"urlPreviewInfo": ":alpha<0.8<$text",
|
||||||
|
|
||||||
"calendarWeek": "#43d5dc",
|
"calendarWeek": "#43d5dc",
|
||||||
"calendarSaturdayOrSunday": "#ff6679",
|
"calendarSaturdayOrSunday": "#ff6679",
|
||||||
"calendarDay": "#c5ced6",
|
"calendarDay": "#c5ced6",
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
"text": "#b1bee3"
|
"text": "#b1bee3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"renoteGradient": "#5d2d1a",
|
"renoteGradient": "#5d2d1a",
|
||||||
"renoteText": "#ff6c00",
|
"renoteText": "#ff6c00",
|
||||||
"desktopHeaderBg": "#36314e"
|
"desktopHeaderBg": "#36314e"
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
"text": "#666"
|
"text": "#666"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"primary": "$primary",
|
"primary": "$primary",
|
||||||
"primaryForeground": "#fff",
|
"primaryForeground": "#fff",
|
||||||
"bg": ":darken<8<$secondary",
|
"bg": ":darken<8<$secondary",
|
||||||
|
@ -54,6 +55,9 @@
|
||||||
"dateDividerFg": "#aaa",
|
"dateDividerFg": "#aaa",
|
||||||
|
|
||||||
"switchTrack": "rgba(0, 0, 0, 0.25)",
|
"switchTrack": "rgba(0, 0, 0, 0.25)",
|
||||||
|
"inputBorder": "rgba(0, 0, 0, 0.42)",
|
||||||
|
"inputLabel": "rgba(0, 0, 0, 0.54)",
|
||||||
|
"inputText": "#000",
|
||||||
|
|
||||||
"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
|
"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
|
||||||
"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
|
"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
|
||||||
|
@ -65,6 +69,12 @@
|
||||||
|
|
||||||
"reactionPickerButtonHoverBg": "#eee",
|
"reactionPickerButtonHoverBg": "#eee",
|
||||||
|
|
||||||
|
"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
|
||||||
|
"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
|
||||||
|
"urlPreviewTitle": "$text",
|
||||||
|
"urlPreviewText": ":alpha<0.7<$text",
|
||||||
|
"urlPreviewInfo": ":alpha<0.8<$text",
|
||||||
|
|
||||||
"calendarWeek": "#19a2a9",
|
"calendarWeek": "#19a2a9",
|
||||||
"calendarSaturdayOrSunday": "#ef95a0",
|
"calendarSaturdayOrSunday": "#ef95a0",
|
||||||
"calendarDay": "#777",
|
"calendarDay": "#777",
|
||||||
|
|
Loading…
Reference in a new issue