forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
syuilo
parent
904114740b
commit
f5f2215b47
44 changed files with 58 additions and 54 deletions
|
|
@ -267,7 +267,7 @@ root(isDark)
|
|||
max-width 100%
|
||||
margin-top calc(1em + 8px)
|
||||
overflow hidden
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
border solid 1px rgba(#000, 0.1)
|
||||
border-radius 4px
|
||||
transition top 0.1s ease, left 0.1s ease
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ root(isDark)
|
|||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
|
@ -222,7 +222,7 @@ root(isDark)
|
|||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ root(isDark)
|
|||
> select
|
||||
width 100%
|
||||
padding 12px 14px
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border 1px solid isDark ? #6a707d : #dcdfe6
|
||||
border-radius 4px
|
||||
color isDark ? #fff : #606266
|
||||
|
|
@ -331,7 +331,7 @@ root(isDark)
|
|||
.card
|
||||
max-width 400px
|
||||
border-radius 4px
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
color isDark ? #fff : #303133
|
||||
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
|
||||
|
||||
|
|
|
|||
|
|
@ -369,7 +369,7 @@ root(isDark)
|
|||
max-width 600px
|
||||
margin 0 auto
|
||||
padding 0
|
||||
background rgba(isDark ? #282c37 : #fff, 0.95)
|
||||
//background rgba(var(--face), 0.95)
|
||||
background-clip content-box
|
||||
|
||||
> .new-message
|
||||
|
|
|
|||
|
|
@ -329,7 +329,7 @@ root(isDark)
|
|||
> a
|
||||
display block
|
||||
text-decoration none
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
*
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
margin 16px
|
||||
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)
|
||||
|
||||
> header
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default Vue.extend({
|
|||
transform translateY(-30px)
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
|
||||
> div
|
||||
> *
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ root(isDark)
|
|||
text-align center
|
||||
color isDark ? #9baec8 : #868c8c
|
||||
|
||||
$bg = isDark ? #282C37 : #fff
|
||||
$bg = var(--face)
|
||||
|
||||
@media (max-width 400px)
|
||||
padding 16px
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default define({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border solid 1px isDark ? #c3831c : #ead8bb
|
||||
border-radius 6px
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ root(isDark)
|
|||
min-width 100%
|
||||
padding 16px
|
||||
color isDark ? #fff : #222
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border none
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-radius 0
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ root(isDark)
|
|||
padding 16px
|
||||
font-size 12px
|
||||
color isDark ? #9aa4b3 : #aaa
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
|
||||
a
|
||||
color isDark ? #9aa4b3 : #999
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
color isDark ? #c5ced6 : #777
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ root(isDark)
|
|||
z-index 4096
|
||||
width $width
|
||||
font-size 0.8em
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||
opacity 0
|
||||
|
|
|
|||
|
|
@ -596,7 +596,7 @@ root(isDark)
|
|||
overflow auto
|
||||
font-size 0.9em
|
||||
color isDark ? #d2d9dc : #555
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
box-shadow 0 1px 0 rgba(#000, 0.05)
|
||||
|
||||
&, *
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
overflow hidden
|
||||
text-align left
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
&[data-round]
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ root(isDark)
|
|||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ export default Vue.extend({
|
|||
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
@ -186,7 +186,7 @@ root(isDark)
|
|||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
|
||||
> .buttons
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ root(isDark)
|
|||
padding 128px 0 0 0
|
||||
width 500px
|
||||
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
|
||||
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
|
||||
transform translateY(-64px)
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ root(isDark)
|
|||
transition filter 100ms ease
|
||||
|
||||
> .menu
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
$bgcolor = var(--face)
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ root(isDark)
|
|||
color var(--primary)
|
||||
|
||||
> .pop
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
$bgcolor = var(--face)
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ root(isDark)
|
|||
z-index 2048
|
||||
margin-top -8px
|
||||
width 250px
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
background-clip content-box
|
||||
border solid 1px rgba(#000, 0.1)
|
||||
border-radius 4px
|
||||
|
|
@ -111,7 +111,7 @@ root(isDark)
|
|||
z-index 2
|
||||
width 58px
|
||||
height 58px
|
||||
border solid 3px isDark ? #282c37 : #fff
|
||||
border solid 3px var(--face)
|
||||
border-radius 8px
|
||||
|
||||
> .title
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
@ -45,7 +45,7 @@ root(isDark)
|
|||
box-shadow none !important
|
||||
|
||||
> header
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
|
|
|
|||
|
|
@ -562,7 +562,7 @@ root(isDark)
|
|||
> .body
|
||||
height 100%
|
||||
overflow hidden
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 6px
|
||||
|
||||
if isDark
|
||||
|
|
@ -578,7 +578,7 @@ root(isDark)
|
|||
overflow hidden
|
||||
white-space nowrap
|
||||
cursor move
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
border-radius 6px 6px 0 0
|
||||
box-shadow 0 1px 0 rgba(#000, 0.1)
|
||||
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@ root(isDark)
|
|||
width 330px
|
||||
min-width 330px
|
||||
height 100%
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 6px
|
||||
//box-shadow 0 2px 16px rgba(#000, 0.1)
|
||||
overflow hidden
|
||||
|
|
@ -318,7 +318,7 @@ root(isDark)
|
|||
padding 0 16px
|
||||
font-size 14px
|
||||
color isDark ? #e3e5e8 : #888
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px rgba(#000, 0.15)
|
||||
cursor pointer
|
||||
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ root(isDark)
|
|||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default Vue.extend({
|
|||
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
|
|
|
|||
|
|
@ -115,14 +115,14 @@ export default Vue.extend({
|
|||
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
|
||||
> span
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ root(isDark)
|
|||
|
||||
.block
|
||||
color isDark ? #fff : #444
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
//border-radius 8px
|
||||
overflow auto
|
||||
|
|
@ -364,7 +364,7 @@ root(isDark)
|
|||
z-index 1
|
||||
padding 0 16px
|
||||
line-height 48px
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
|
||||
if !isDark
|
||||
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ root(isDark)
|
|||
left 16px
|
||||
width 58px
|
||||
height 58px
|
||||
border solid 3px isDark ? #282c37 : #fff
|
||||
border solid 3px var(--face)
|
||||
border-radius 8px
|
||||
cursor pointer
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ root(isDark)
|
|||
> .body
|
||||
width 100%
|
||||
height 100%
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
|
||||
> header
|
||||
border-bottom solid 1px isDark ? #1b1f29 : #eee
|
||||
|
|
|
|||
|
|
@ -474,7 +474,7 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
|
||||
> nav
|
||||
display block
|
||||
|
|
@ -490,7 +490,7 @@ root(isDark)
|
|||
color rgba(isDark ? #fff : #000, 0.67)
|
||||
-webkit-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)
|
||||
|
||||
> p
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ root(isDark)
|
|||
width 150px
|
||||
//height 120px
|
||||
font-size 12px
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border-radius 4px
|
||||
|
||||
> a
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ root(isDark)
|
|||
overflow hidden
|
||||
width 100%
|
||||
text-align left
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
overflow hidden
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
|
|
|
|||
|
|
@ -342,7 +342,7 @@ root(isDark)
|
|||
margin 32px auto
|
||||
|
||||
> .form
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ root(isDark)
|
|||
font-size 15px
|
||||
font-weight normal
|
||||
color isDark ? #b8c5cc : #465258
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
> [data-fa]
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ root(isDark)
|
|||
font-size 15px
|
||||
font-weight normal
|
||||
color isDark ? #b8c5cc : #465258
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--face)
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
@media (min-width 500px)
|
||||
|
|
|
|||
|
|
@ -7,5 +7,7 @@
|
|||
"bg": "#191B22",
|
||||
"scrollbarTrack": "#282C37",
|
||||
"scrollbarHandle": "#454954",
|
||||
"scrollbarHandleHover": "#535660"
|
||||
"scrollbarHandleHover": "#535660",
|
||||
"face": "#282c37",
|
||||
"faceHeader": "#313543"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,5 +7,7 @@
|
|||
"bg": "#f7f7f7",
|
||||
"scrollbarTrack": "#fff",
|
||||
"scrollbarHandle": "#00000033",
|
||||
"scrollbarHandleHover": "#00000066"
|
||||
"scrollbarHandleHover": "#00000066",
|
||||
"face": "#fff",
|
||||
"faceHeader": "#fff"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue