This commit is contained in:
syuilo 2018-09-26 20:28:13 +09:00
parent 4f663632b1
commit 6191574b60
44 changed files with 58 additions and 54 deletions

View File

@ -267,7 +267,7 @@ root(isDark)
max-width 100% max-width 100%
margin-top calc(1em + 8px) margin-top calc(1em + 8px)
overflow hidden overflow hidden
background isDark ? #313543 : #fff background var(--faceHeader)
border solid 1px rgba(#000, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
transition top 0.1s ease, left 0.1s ease transition top 0.1s ease, left 0.1s ease

View File

@ -190,7 +190,7 @@ root(isDark)
margin 8px 0 margin 8px 0
padding 8px padding 8px
color isDark ? #fff : #677f84 color isDark ? #fff : #677f84
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
border-radius 6px border-radius 6px
cursor pointer cursor pointer
@ -222,7 +222,7 @@ root(isDark)
margin 8px 0 margin 8px 0
padding 8px padding 8px
color isDark ? #fff : #677f84 color isDark ? #fff : #677f84
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
border-radius 6px border-radius 6px
cursor pointer cursor pointer

View File

@ -273,7 +273,7 @@ root(isDark)
> select > select
width 100% width 100%
padding 12px 14px padding 12px 14px
background isDark ? #282C37 : #fff background var(--face)
border 1px solid isDark ? #6a707d : #dcdfe6 border 1px solid isDark ? #6a707d : #dcdfe6
border-radius 4px border-radius 4px
color isDark ? #fff : #606266 color isDark ? #fff : #606266
@ -331,7 +331,7 @@ root(isDark)
.card .card
max-width 400px max-width 400px
border-radius 4px border-radius 4px
background isDark ? #282C37 : #fff background var(--face)
color isDark ? #fff : #303133 color isDark ? #fff : #303133
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1) box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)

View File

@ -369,7 +369,7 @@ root(isDark)
max-width 600px max-width 600px
margin 0 auto margin 0 auto
padding 0 padding 0
background rgba(isDark ? #282c37 : #fff, 0.95) //background rgba(var(--face), 0.95)
background-clip content-box background-clip content-box
> .new-message > .new-message

View File

@ -329,7 +329,7 @@ root(isDark)
> a > a
display block display block
text-decoration none text-decoration none
background isDark ? #282c37 : #fff background var(--face)
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px isDark ? #1c2023 : #eee
* *

View File

@ -25,7 +25,7 @@ export default Vue.extend({
root(isDark) root(isDark)
margin 16px margin 16px
color isDark ? #fff : #000 color isDark ? #fff : #000
background isDark ? #282C37 : #fff 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)
> header > header

View File

@ -91,7 +91,7 @@ export default Vue.extend({
transform translateY(-30px) transform translateY(-30px)
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
> div > div
> * > *

View File

@ -116,7 +116,7 @@ root(isDark)
text-align center text-align center
color isDark ? #9baec8 : #868c8c color isDark ? #9baec8 : #868c8c
$bg = isDark ? #282C37 : #fff $bg = var(--face)
@media (max-width 400px) @media (max-width 400px)
padding 16px padding 16px

View File

@ -31,7 +31,7 @@ export default define({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282c37 : #fff background var(--face)
border solid 1px isDark ? #c3831c : #ead8bb border solid 1px isDark ? #c3831c : #ead8bb
border-radius 6px border-radius 6px

View File

@ -70,7 +70,7 @@ root(isDark)
min-width 100% min-width 100%
padding 16px padding 16px
color isDark ? #fff : #222 color isDark ? #fff : #222
background isDark ? #282c37 : #fff background var(--face)
border none border none
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px isDark ? #1c2023 : #eee
border-radius 0 border-radius 0

View File

@ -21,7 +21,7 @@ root(isDark)
padding 16px padding 16px
font-size 12px font-size 12px
color isDark ? #9aa4b3 : #aaa color isDark ? #9aa4b3 : #aaa
background isDark ? #282c37 : #fff background var(--face)
a a
color isDark ? #9aa4b3 : #999 color isDark ? #9aa4b3 : #999

View File

@ -132,7 +132,7 @@ export default Vue.extend({
root(isDark) root(isDark)
color isDark ? #c5ced6 : #777 color isDark ? #c5ced6 : #777
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden

View File

@ -82,7 +82,7 @@ root(isDark)
z-index 4096 z-index 4096
width $width width $width
font-size 0.8em font-size 0.8em
background isDark ? #282c37 : #fff background var(--face)
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(#000, 0.2) box-shadow 2px 2px 8px rgba(#000, 0.2)
opacity 0 opacity 0

View File

@ -596,7 +596,7 @@ root(isDark)
overflow auto overflow auto
font-size 0.9em font-size 0.9em
color isDark ? #d2d9dc : #555 color isDark ? #d2d9dc : #555
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 1px 0 rgba(#000, 0.05) box-shadow 0 1px 0 rgba(#000, 0.05)
&, * &, *

View File

@ -230,7 +230,7 @@ export default Vue.extend({
root(isDark) root(isDark)
overflow hidden overflow hidden
text-align left text-align left
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)

View File

@ -322,7 +322,7 @@ export default Vue.extend({
root(isDark) root(isDark)
margin 0 margin 0
padding 0 padding 0
background isDark ? #282C37 : #fff background var(--face)
border-bottom solid 1px isDark ? #1c2023 : #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&[data-round] &[data-round]

View File

@ -260,7 +260,7 @@ root(isDark)
width 100% width 100%
text-align center text-align center
color #ccc color #ccc
background isDark ? #282C37 : #fff background var(--face)
border-top solid 1px isDark ? #1c2023 : #eaeaea border-top solid 1px isDark ? #1c2023 : #eaeaea
border-bottom-left-radius 6px border-bottom-left-radius 6px
border-bottom-right-radius 6px border-bottom-right-radius 6px

View File

@ -178,7 +178,7 @@ export default Vue.extend({
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden
@ -186,7 +186,7 @@ root(isDark)
> header > header
padding 0 8px padding 0 8px
z-index 10 z-index 10
background isDark ? #313543 : #fff background var(--faceHeader)
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08) box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
> .buttons > .buttons

View File

@ -47,7 +47,7 @@ root(isDark)
padding 128px 0 0 0 padding 128px 0 0 0
width 500px width 500px
color rgba(isDark ? #fff : #000, 0.6) color rgba(isDark ? #fff : #000, 0.6)
background rgba(isDark ? #282C37 : #fff, 0.9) //background rgba(var(--face), 0.9)
border-radius 0 0 8px 8px border-radius 0 0 8px 8px
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2) box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
transform translateY(-64px) transform translateY(-64px)

View File

@ -177,7 +177,7 @@ root(isDark)
transition filter 100ms ease transition filter 100ms ease
> .menu > .menu
$bgcolor = isDark ? #282c37 : #fff $bgcolor = var(--face)
display block display block
position absolute position absolute
top 56px top 56px

View File

@ -96,7 +96,7 @@ root(isDark)
color var(--primary) color var(--primary)
> .pop > .pop
$bgcolor = isDark ? #282c37 : #fff $bgcolor = var(--face)
display block display block
position absolute position absolute
top 56px top 56px

View File

@ -90,7 +90,7 @@ root(isDark)
z-index 2048 z-index 2048
margin-top -8px margin-top -8px
width 250px width 250px
background isDark ? #282c37 : #fff background var(--face)
background-clip content-box background-clip content-box
border solid 1px rgba(#000, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
@ -111,7 +111,7 @@ root(isDark)
z-index 2 z-index 2
width 58px width 58px
height 58px height 58px
border solid 3px isDark ? #282c37 : #fff border solid 3px var(--face)
border-radius 8px border-radius 8px
> .title > .title

View File

@ -35,7 +35,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden
@ -45,7 +45,7 @@ root(isDark)
box-shadow none !important box-shadow none !important
> header > header
background isDark ? #313543 : #fff background var(--faceHeader)
> .title > .title
z-index 1 z-index 1

View File

@ -562,7 +562,7 @@ root(isDark)
> .body > .body
height 100% height 100%
overflow hidden overflow hidden
background isDark ? #282C37 : #fff background var(--face)
border-radius 6px border-radius 6px
if isDark if isDark
@ -578,7 +578,7 @@ root(isDark)
overflow hidden overflow hidden
white-space nowrap white-space nowrap
cursor move cursor move
background isDark ? #313543 : #fff background var(--faceHeader)
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
box-shadow 0 1px 0 rgba(#000, 0.1) box-shadow 0 1px 0 rgba(#000, 0.1)

View File

@ -277,7 +277,7 @@ root(isDark)
width 330px width 330px
min-width 330px min-width 330px
height 100% height 100%
background isDark ? #282C37 : #fff background var(--face)
border-radius 6px border-radius 6px
//box-shadow 0 2px 16px rgba(#000, 0.1) //box-shadow 0 2px 16px rgba(#000, 0.1)
overflow hidden overflow hidden
@ -318,7 +318,7 @@ root(isDark)
padding 0 16px padding 0 16px
font-size 14px font-size 14px
color isDark ? #e3e5e8 : #888 color isDark ? #e3e5e8 : #888
background isDark ? #313543 : #fff background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.15) box-shadow 0 1px rgba(#000, 0.15)
cursor pointer cursor pointer

View File

@ -232,7 +232,7 @@ root(isDark)
width 100% width 100%
text-align center text-align center
color #ccc color #ccc
background isDark ? #282C37 : #fff background var(--face)
border-top solid 1px isDark ? #1c2023 : #eaeaea border-top solid 1px isDark ? #1c2023 : #eaeaea
border-bottom-left-radius 6px border-bottom-left-radius 6px
border-bottom-right-radius 6px border-bottom-right-radius 6px

View File

@ -37,7 +37,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)

View File

@ -41,7 +41,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden

View File

@ -103,7 +103,7 @@ export default Vue.extend({
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden

View File

@ -40,7 +40,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden

View File

@ -86,7 +86,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)

View File

@ -115,14 +115,14 @@ export default Vue.extend({
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background var(--face)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden
> header > header
padding 0 8px padding 0 8px
z-index 10 z-index 10
background isDark ? #313543 : #fff background var(--faceHeader)
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08) box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
> span > span

View File

@ -355,7 +355,7 @@ root(isDark)
.block .block
color isDark ? #fff : #444 color isDark ? #fff : #444
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
//border-radius 8px //border-radius 8px
overflow auto overflow auto
@ -364,7 +364,7 @@ root(isDark)
z-index 1 z-index 1
padding 0 16px padding 0 16px
line-height 48px line-height 48px
background isDark ? #313543 : #fff background var(--faceHeader)
if !isDark if !isDark
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1) box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)

View File

@ -100,7 +100,7 @@ root(isDark)
left 16px left 16px
width 58px width 58px
height 58px height 58px
border solid 3px isDark ? #282c37 : #fff border solid 3px var(--face)
border-radius 8px border-radius 8px
cursor pointer cursor pointer

View File

@ -59,7 +59,7 @@ root(isDark)
> .body > .body
width 100% width 100%
height 100% height 100%
background isDark ? #282c37 : #fff background var(--face)
> header > header
border-bottom solid 1px isDark ? #1b1f29 : #eee border-bottom solid 1px isDark ? #1b1f29 : #eee

View File

@ -474,7 +474,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282c37 : #fff background var(--face)
> nav > nav
display block display block
@ -490,7 +490,7 @@ root(isDark)
color rgba(isDark ? #fff : #000, 0.67) color rgba(isDark ? #fff : #000, 0.67)
-webkit-backdrop-filter blur(12px) -webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px) backdrop-filter blur(12px)
background-color rgba(isDark ? #313543 : #fff, 0.75) //background-color rgba(var(--faceHeader), 0.75)
border-bottom solid 1px rgba(#000, 0.13) border-bottom solid 1px rgba(#000, 0.13)
> p > p

View File

@ -32,7 +32,7 @@ root(isDark)
width 150px width 150px
//height 120px //height 120px
font-size 12px font-size 12px
background isDark ? #282c37 : #fff background var(--face)
border-radius 4px border-radius 4px
> a > a

View File

@ -229,7 +229,7 @@ root(isDark)
overflow hidden overflow hidden
width 100% width 100%
text-align left text-align left
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)

View File

@ -221,7 +221,7 @@ export default Vue.extend({
root(isDark) root(isDark)
overflow hidden overflow hidden
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)

View File

@ -342,7 +342,7 @@ root(isDark)
margin 32px auto margin 32px auto
> .form > .form
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)

View File

@ -45,7 +45,7 @@ root(isDark)
font-size 15px font-size 15px
font-weight normal font-weight normal
color isDark ? #b8c5cc : #465258 color isDark ? #b8c5cc : #465258
background isDark ? #282c37 : #fff background var(--face)
border-radius 8px 8px 0 0 border-radius 8px 8px 0 0
> [data-fa] > [data-fa]

View File

@ -81,7 +81,7 @@ root(isDark)
font-size 15px font-size 15px
font-weight normal font-weight normal
color isDark ? #b8c5cc : #465258 color isDark ? #b8c5cc : #465258
background isDark ? #282c37 : #fff background var(--face)
border-radius 8px 8px 0 0 border-radius 8px 8px 0 0
@media (min-width 500px) @media (min-width 500px)

View File

@ -7,5 +7,7 @@
"bg": "#191B22", "bg": "#191B22",
"scrollbarTrack": "#282C37", "scrollbarTrack": "#282C37",
"scrollbarHandle": "#454954", "scrollbarHandle": "#454954",
"scrollbarHandleHover": "#535660" "scrollbarHandleHover": "#535660",
"face": "#282c37",
"faceHeader": "#313543"
} }

View File

@ -7,5 +7,7 @@
"bg": "#f7f7f7", "bg": "#f7f7f7",
"scrollbarTrack": "#fff", "scrollbarTrack": "#fff",
"scrollbarHandle": "#00000033", "scrollbarHandle": "#00000033",
"scrollbarHandleHover": "#00000066" "scrollbarHandleHover": "#00000066",
"face": "#fff",
"faceHeader": "#fff"
} }