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

wip

Browse Source
This commit is contained in:
syuilo 2018-09-27 22:50:34 +09:00
parent 0c7111b438
commit 1e9eeeb980
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
11 changed files with 47 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/common/views/components/messaging-room.form.vue
View File

@ -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

2
src/client/app/common/views/components/poll-editor.vue
View File

@ -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

2
src/client/app/common/views/components/ui/form/radio.vue
View File

@ -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

10
src/client/app/common/views/components/ui/input.vue
View File

@ -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

2
src/client/app/common/views/components/ui/radio.vue
View File

@ -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

4
src/client/app/common/views/components/ui/select.vue
View File

@ -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

24
src/client/app/common/views/components/ui/textarea.vue
View File

@ -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>

18
src/client/app/common/views/components/url-preview.vue
View File

@ -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>

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

@ -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",

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

@ -11,6 +11,7 @@
"text": "#b1bee3" "text": "#b1bee3"
} }
}, },
"renoteGradient": "#5d2d1a", "renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00", "renoteText": "#ff6c00",
"desktopHeaderBg": "#36314e" "desktopHeaderBg": "#36314e"

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

@ -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",