2022-02-06 12:08:19 +08:00
|
|
|
// 调色盘 @satori
|
2022-01-31 07:06:01 +08:00
|
|
|
// 背景色 基调为纯白 #ffffff
|
|
|
|
|
// 背景色 主调为薄灰 #f5f6f7
|
|
|
|
|
// 前景色 基调为深灰 #222222
|
|
|
|
|
// 前景色 主调为厚黑 #111111
|
|
|
|
|
|
|
|
|
|
:root
|
|
|
|
|
--background-default: #ffffff
|
|
|
|
|
--background-main: #f5f6f7
|
|
|
|
|
|
|
|
|
|
--color-default: rgba(0,30,38, 1)
|
|
|
|
|
--color-main: rgba(0,30,38, 1)
|
|
|
|
|
|
2022-02-06 12:08:19 +08:00
|
|
|
// 仪式(突出重点的展示)
|
2022-01-31 07:06:01 +08:00
|
|
|
.ceremony
|
|
|
|
|
padding-top: 10rem
|
|
|
|
|
padding-bottom: 10rem
|
|
|
|
|
margin: 10rem 0
|
|
|
|
|
background: var(--background-main)
|
|
|
|
|
|
2022-02-06 12:08:19 +08:00
|
|
|
// 界限(对不同屏幕的使用宽度)
|
2022-01-31 07:06:01 +08:00
|
|
|
.circumscription
|
2022-02-06 12:08:19 +08:00
|
|
|
transition: all .25s linear
|
2022-01-31 07:06:01 +08:00
|
|
|
@media (min-width: 480px)
|
|
|
|
|
margin: 0 2rem
|
2022-02-06 12:08:19 +08:00
|
|
|
@media (min-width: 1024px)
|
|
|
|
|
max-width: 980px
|
|
|
|
|
margin-left: auto
|
|
|
|
|
margin-right: auto
|
2022-01-31 07:06:01 +08:00
|
|
|
@media (min-width: 1280px)
|
|
|
|
|
max-width: 1200px
|
|
|
|
|
margin-left: auto
|
|
|
|
|
margin-right: auto
|
|
|
|
|
// 汇聚 converge
|
2022-02-07 01:12:33 +08:00
|
|
|
|
|
|
|
|
// 控制台
|
|
|
|
|
.console
|
|
|
|
|
position: fixed
|
|
|
|
|
top: 0
|
|
|
|
|
left: 0
|
|
|
|
|
right: 0
|
|
|
|
|
bottom: 0
|
|
|
|
|
background: rgba(0,0,0,.9)
|
|
|
|
|
z-index: 1024
|
2022-02-07 22:27:54 +08:00
|
|
|
|
|
|
|
|
// 一些奇怪的按钮
|
|
|
|
|
button.magic
|
|
|
|
|
width: 2.6rem
|
|
|
|
|
height: 2.6rem
|
|
|
|
|
line-height: 2.6rem
|
|
|
|
|
border-radius: 1.3rem
|
|
|
|
|
background: #222222
|
|
|
|
|
color: #fafafa
|
|
|
|
|
font-size: 1.3rem
|
|
|
|
|
text-align: center
|
|
|
|
|
padding: 0
|
|
|
|
|
transition: all .25s linear
|
|
|
|
|
button.magic:hover
|
|
|
|
|
background: #000000
|
|
|
|
|
color: #ffffff
|
|
|
|
|
width: 6rem
|
