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

wip

Browse Source
This commit is contained in:
syuilo 2018-09-27 17:29:57 +09:00
parent 5f289e4767
commit 5b0b83faa7
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
4 changed files with 14 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/client/app/common/views/components/messaging.vue
View File

@ -204,12 +204,10 @@ root(isDark)
left 0 left 0
z-index 1 z-index 1
width 100% width 100%
background #fff
box-shadow 0 0px 2px rgba(#000, 0.2) box-shadow 0 0px 2px rgba(#000, 0.2)
> .form > .form
padding 8px background rgba(0, 0, 0, 0.02)
background isDark ? #282c37 : #f7f7f7
> label > label
display block display block
@ -229,32 +227,22 @@ root(isDark)
bottom 0 bottom 0
left 0 left 0
width 1em width 1em
line-height 56px line-height 48px
margin auto margin auto
color #555 color #555
> input > input
margin 0 margin 0
padding 0 0 0 32px padding 0 0 0 42px
width 100% width 100%
font-size 1em font-size 1em
line-height 38px line-height 48px
color #000 color var(--faceText)
outline none outline none
background isDark ? #191b22 : #fff background transparent
border solid 1px isDark ? #495156 : #eee border none
border-radius 5px border-radius 5px
box-shadow none box-shadow none
transition color 0.5s ease, border 0.5s ease
&:hover
border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease
&:focus
color var(--primaryDarken20)
border solid 1px var(--primary)
transition color 0, border 0
> .result > .result
display block display block

19
src/client/app/common/views/components/ui/card.vue
View File

@ -20,11 +20,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ui-card
root(isDark)
margin 16px margin 16px
color isDark ? #fff : #000 color var(--faceText)
background var(--face) background var(--face)
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
@ -32,14 +30,14 @@ root(isDark)
padding 16px padding 16px
font-weight bold font-weight bold
font-size 20px font-size 20px
color isDark ? #fff : #444 color var(--faceText)
@media (min-width 500px) @media (min-width 500px)
padding 24px 32px padding 24px 32px
> section > section
padding 20px 16px padding 20px 16px
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1) border-top solid 1px var(--faceDivider)
@media (min-width 500px) @media (min-width 500px)
padding 32px padding 32px
@ -50,12 +48,5 @@ root(isDark)
> header > header
margin-bottom 16px margin-bottom 16px
font-weight bold font-weight bold
color isDark ? #fff : #444 color var(--faceText)
.ui-card[data-darkmode]
root(true)
.ui-card:not([data-darkmode])
root(false)
</style> </style>

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

@ -11,6 +11,7 @@
"scrollbarHandle": "#454954", "scrollbarHandle": "#454954",
"scrollbarHandleHover": "#535660", "scrollbarHandleHover": "#535660",
"face": "#282c37", "face": "#282c37",
"faceText": "#fff",
"faceHeader": "#313543", "faceHeader": "#313543",
"faceHeaderText": "#e3e5e8", "faceHeaderText": "#e3e5e8",
"faceDivider": "rgba(0, 0, 0, 0.3)", "faceDivider": "rgba(0, 0, 0, 0.3)",

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

@ -11,6 +11,7 @@
"scrollbarHandle": "#00000033", "scrollbarHandle": "#00000033",
"scrollbarHandleHover": "#00000066", "scrollbarHandleHover": "#00000066",
"face": "#fff", "face": "#fff",
"faceText": "#444",
"faceHeader": "#fff", "faceHeader": "#fff",
"faceHeaderText": "#888", "faceHeaderText": "#888",
"faceDivider": "rgba(0, 0, 0, 0.082)", "faceDivider": "rgba(0, 0, 0, 0.082)",