1283 lines
20 KiB
CSS
1283 lines
20 KiB
CSS
/*
|
||
=================================================================================
|
||
* License: GPL-2.0 license
|
||
* Author: 众产® https://ciy.cn/code
|
||
* Version: 0.1.0
|
||
=================================================================================
|
||
--txt[1-9] 文字色系
|
||
--bg[1-9] 背景边框色系
|
||
--man/imp/warn/dag 强调色系
|
||
|
||
.ciy* 常用专属样式
|
||
.btn 定制button样式
|
||
.md* 简约MarkDown样式
|
||
|
||
*/
|
||
page,
|
||
body {
|
||
/* 1 淡 5 9浓 */
|
||
|
||
/*
|
||
zIndex z-index 规划:
|
||
1-9 页内rel
|
||
10-30 页内fix btnadd 10；
|
||
31-39 组件fix
|
||
40-49 header/tabbar fix
|
||
50-60 auth登录？
|
||
99 captcha
|
||
100-120 tip/冒泡提示
|
||
50000 header/tabbar
|
||
50005 camera
|
||
50010 组件全屏mask
|
||
50020 alert
|
||
50030 toast
|
||
|
||
|
||
title bg2
|
||
card bg2 title bg4
|
||
grid bg3
|
||
pagebg bg4
|
||
tabbar bg3 bg6
|
||
card bg3
|
||
*/
|
||
|
||
/* 文字色 */
|
||
--txt1: #8c9ba4;
|
||
--txt2: #818e97;
|
||
--txt3: #738088;
|
||
--txt4: #646e76;
|
||
--txt5: #576067;
|
||
--txt6: #454d52;
|
||
--txt7: #2c3236;
|
||
--txt8: #060708;
|
||
--txt9: #000000;
|
||
|
||
/* 背景边框色 */
|
||
--bg1: #ffffff;
|
||
--bg2: #fbfbfc;
|
||
--bg3: #f7f8f8;
|
||
--bg4: #f0f2f2;
|
||
--bg5: #e3e6e7;
|
||
--bg6: #cdd2d4;
|
||
--bg7: #afb6b9;
|
||
--bg8: #939da1;
|
||
--bg9: #7e8a8e;
|
||
|
||
|
||
/* 主色 */
|
||
--man2: #e1f6ff;
|
||
--man3: #a6d2fa;
|
||
--man4: #80c1f3;
|
||
--man5: #1E9FFF;
|
||
--man6: #1989d8;
|
||
--man7: #8568f7;
|
||
--mant: #ffffff;
|
||
|
||
/* 成功色 */
|
||
--succ4: #02dd40;
|
||
--succ5: #03a547;
|
||
--succ6: #036d2d;
|
||
--succt: #ffffff;
|
||
/* 警示色 */
|
||
--warn4: #fcfbc7;
|
||
--warn5: #f5d417;
|
||
--warn6: #e39725;
|
||
--warnt: #ffffff;
|
||
/* 失败色 */
|
||
--dag4: #ffac37;
|
||
--dag5: #e34242;
|
||
--dag6: #a91313;
|
||
--dagt: #ffffff;
|
||
|
||
--e-switch-bg: #ffffff;
|
||
--e-switch-br: #dcdcdc;
|
||
--e-switch-txt: #2c3236;
|
||
--e-switch-chkbgdis: #1b709e;
|
||
--e-switch-chkbg: #19a2fc;
|
||
--e-switch-chktxt: #ffffff;
|
||
--e-switch-shadow: 0 2px 5px 1px #00000042;
|
||
|
||
--e-userbg1: #aedc05;
|
||
--e-userbg2: #16ea2e;
|
||
--e-headerbg1: #dff7ff;
|
||
--e-headerbg2: #eaffe6;
|
||
}
|
||
|
||
.dark {
|
||
/* 文字色 */
|
||
--txt1: #8d9ca6;
|
||
--txt2: #98a5ae;
|
||
--txt3: #a5b1b9;
|
||
--txt4: #b1bbc2;
|
||
--txt5: #c2cad0;
|
||
--txt6: #d3d9dd;
|
||
--txt7: #e7eaec;
|
||
--txt8: #f5f6f7;
|
||
--txt9: #ffffff;
|
||
|
||
/* 背景边框色 */
|
||
--bg1: #000000;
|
||
--bg2: #0d1112;
|
||
--bg3: #151a1b;
|
||
--bg4: #1f2526;
|
||
--bg5: #272e2f;
|
||
--bg6: #32393b;
|
||
--bg7: #485155;
|
||
--bg8: #5d686d;
|
||
--bg9: #6f7c82;
|
||
|
||
|
||
--man3: #032c44;
|
||
--man4: #175787;
|
||
--man5: #1E9FFF;
|
||
--man6: #83c1f1;
|
||
--man7: #8568f7;
|
||
--mant: #ffffff;
|
||
|
||
/* 成功色 */
|
||
--succ4: #036d2d;
|
||
--succ5: #03a547;
|
||
--succ6: #02dd40;
|
||
--succt: #ffffff;
|
||
/* 警示色 */
|
||
--warn4: #e39725;
|
||
--warn5: #f5d417;
|
||
--warn6: #fcfbc7;
|
||
--warnt: #ffffff;
|
||
/* 失败色 */
|
||
--dag4: #a91313;
|
||
--dag5: #e34242;
|
||
--dag6: #f9ddc0;
|
||
--dagt: #ffffff;
|
||
|
||
--e-userbg1: #b9b527;
|
||
--e-userbg2: #00770e;
|
||
|
||
--e-headerbg1: #07bff1;
|
||
--e-headerbg2: #2c700c;
|
||
}
|
||
|
||
page,
|
||
body,
|
||
view,
|
||
text {
|
||
box-sizing: border-box;
|
||
/* font-size: clamp(14px, 4vw, 40px); */
|
||
font-size-adjust: ex-height 0.53;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.def {
|
||
background: var(--bg2) !important;
|
||
color: var(--txt7) !important;
|
||
}
|
||
|
||
.def.b {
|
||
border: 1px solid var(--bg6) !important;
|
||
}
|
||
|
||
.def.liner {
|
||
background: linear-gradient(310deg, var(--bg3), var(--bg6)) !important;
|
||
}
|
||
|
||
.dag {
|
||
background: var(--dag5) !important;
|
||
color: var(--dagt) !important;
|
||
border: 1px solid var(--dag5) !important;
|
||
}
|
||
|
||
.dag.b {
|
||
border: 1px solid var(--dag6) !important;
|
||
}
|
||
|
||
.dag.liner {
|
||
background: linear-gradient(310deg, var(--dag5), var(--dag6)) !important;
|
||
}
|
||
|
||
.succ {
|
||
background: var(--succ5) !important;
|
||
color: var(--succt) !important;
|
||
border: 1px solid var(--succ5) !important;
|
||
}
|
||
|
||
.succ.b {
|
||
border: 1px solid var(--succ6) !important;
|
||
}
|
||
|
||
.succ.liner {
|
||
background: linear-gradient(310deg, var(--succ5), var(--succ6)) !important;
|
||
}
|
||
|
||
.warn {
|
||
background: var(--warn6) !important;
|
||
color: var(--warnt) !important;
|
||
border: 1px solid var(--warn6) !important;
|
||
}
|
||
|
||
.warn.b {
|
||
border: 1px solid var(--warn6) !important;
|
||
}
|
||
|
||
.warn.liner {
|
||
background: linear-gradient(310deg, var(--warn5), var(--warn6)) !important;
|
||
}
|
||
|
||
.man {
|
||
background: var(--man6) !important;
|
||
color: var(--mant) !important;
|
||
border: 1px solid var(--man6) !important;
|
||
}
|
||
|
||
.man.b {
|
||
border: 1px solid var(--man7) !important;
|
||
}
|
||
|
||
.man.liner {
|
||
background: linear-gradient(310deg, var(--man6), var(--man7)) !important;
|
||
}
|
||
|
||
/*列表页*/
|
||
.ciy-list {
|
||
position: relative;
|
||
margin: 1rem;
|
||
padding: 0.8rem;
|
||
background: var(--bg1);
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
transition: transform ease-in 0.5s;
|
||
}
|
||
|
||
.ciy-list.del {
|
||
transform: translateX(-100vw);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.ciy-list .l0 {
|
||
font-size: 0.8rem;
|
||
padding-right: 6rem;
|
||
color: var(--txt1);
|
||
}
|
||
|
||
.ciy-list .l1 {
|
||
font-size: 1.2rem;
|
||
padding: 0.3em 1.5em 0.3em 0.5rem;
|
||
}
|
||
|
||
.ciy-list .l2 {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.5em 0;
|
||
}
|
||
|
||
.ciy-list .l2>label {
|
||
color: var(--txt9);
|
||
min-width: 5rem;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.ciy-list .l2>view {
|
||
flex: 1;
|
||
color: var(--txt6);
|
||
text-align: right;
|
||
}
|
||
|
||
.ciy-list .l3 {
|
||
font-size: 0.9rem;
|
||
padding: 0.3em 1.3rem;
|
||
color: var(--txt3);
|
||
}
|
||
|
||
.ciy-list .rtz {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: -2.5rem;
|
||
height: 2rem;
|
||
line-height: 2rem;
|
||
width: 9rem;
|
||
text-align: center;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.ciy-list .rt {
|
||
position: absolute;
|
||
top: 0.8rem;
|
||
right: 0.8rem;
|
||
text-align: right;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.ciy-list .rb {
|
||
text-align: right;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.ciy-list .lb {
|
||
position: absolute;
|
||
bottom: 0.9rem;
|
||
left: 1.2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.ciy-list .dot {
|
||
position: absolute;
|
||
bottom: 0.5rem;
|
||
right: 1rem;
|
||
padding: 1rem;
|
||
width: 1.3rem;
|
||
height: 1.3rem;
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUwOS4xMDAyMzQyNiA1MTJtLTE1My4yNzMzMzEzNCAwYTE1My4yNzMzMzEzNiAxNTMuMjczMzMxMzYgMCAxIDAgMzA2LjU0NjY2MjcgMCAxNTMuMjczMzMxMzYgMTUzLjI3MzMzMTM2IDAgMSAwLTMwNi41NDY2NjI3IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PHBhdGggZD0iTTc4OS43NjE4NDA4MiA1MTJtLTkxLjQ2MTE4MTY0IDBhOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAgMTgyLjkyMjM2MzI5IDAgOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAtMTgyLjkyMjM2MzI5IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PHBhdGggZD0iTTIzNC4yMzgxNTkxOCA1MTJtLTkxLjQ2MTE4MTY0IDBhOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAgMTgyLjkyMjM2MzI4IDAgOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAtMTgyLjkyMjM2MzI4IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PC9zdmc+");
|
||
}
|
||
|
||
|
||
.ciy-add {
|
||
position: fixed;
|
||
bottom: 1rem;
|
||
right: 1rem;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
opacity: 0.95;
|
||
z-index: 10;
|
||
border-radius: 2rem;
|
||
background: linear-gradient(90deg, #8568f7, #4981ff);
|
||
}
|
||
|
||
.ciy-add::after {
|
||
content: ' ';
|
||
position: absolute;
|
||
margin: 1rem;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkyNS42OTYgMzg0cTE5LjQ1NiAwIDM3LjM3NiA3LjY4dDMwLjcyIDIwLjQ4IDIwLjQ4IDMwLjcyIDcuNjggMzcuMzc2cTAgMjAuNDgtNy42OCAzNy44ODh0LTIwLjQ4IDMwLjIwOC0zMC43MiAyMC40OC0zNy4zNzYgNy42OGwtMjg3Ljc0NCAwIDAgMjg3Ljc0NHEwIDIwLjQ4LTcuNjggMzcuODg4dC0yMC40OCAzMC4yMDgtMzAuNzIgMjAuNDgtMzcuMzc2IDcuNjhxLTIwLjQ4IDAtMzcuODg4LTcuNjh0LTMwLjIwOC0yMC40OC0yMC40OC0zMC4yMDgtNy42OC0zNy44ODhsMC0yODcuNzQ0LTI4Ny43NDQgMHEtMjAuNDggMC0zNy44ODgtNy42OHQtMzAuMjA4LTIwLjQ4LTIwLjQ4LTMwLjIwOC03LjY4LTM3Ljg4OHEwLTE5LjQ1NiA3LjY4LTM3LjM3NnQyMC40OC0zMC43MiAzMC4yMDgtMjAuNDggMzcuODg4LTcuNjhsMjg3Ljc0NCAwIDAtMjg3Ljc0NHEwLTE5LjQ1NiA3LjY4LTM3LjM3NnQyMC40OC0zMC43MiAzMC4yMDgtMjAuNDggMzcuODg4LTcuNjhxMzkuOTM2IDAgNjguMDk2IDI4LjE2dDI4LjE2IDY4LjA5NmwwIDI4Ny43NDQgMjg3Ljc0NCAweiIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pNi41NTEwM2E4MW5Iald1ViIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==");
|
||
}
|
||
|
||
.ciy-close {
|
||
position: absolute;
|
||
font-size: 2rem;
|
||
color: var(--dagt);
|
||
line-height: 0.9rem;
|
||
background: var(--dag5);
|
||
width: 1rem;
|
||
height: 1rem;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.btn {
|
||
background: linear-gradient(347deg, var(--man5), var(--man7));
|
||
color: var(--mant);
|
||
border: 1px solid var(--man6);
|
||
position: relative;
|
||
display: inline-block;
|
||
padding: 0.5em 0.8rem;
|
||
font-size: 1rem;
|
||
line-height: 1rem;
|
||
margin: 2px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
-ms-touch-action: manipulation;
|
||
touch-action: manipulation;
|
||
cursor: pointer;
|
||
border-radius: 0.7rem;
|
||
}
|
||
|
||
.btn::after {
|
||
content: "Loading...";
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0.3rem;
|
||
width: auto;
|
||
height: auto;
|
||
top: auto;
|
||
left: auto;
|
||
font-size: 1rem;
|
||
transform-origin: right bottom;
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn.button-hover,
|
||
.btn:active {
|
||
background: var(--man5);
|
||
color: var(--mant);
|
||
border: 1px solid var(--bg9);
|
||
}
|
||
|
||
.btn.loading::after {
|
||
opacity: 0.5;
|
||
transform: scale(0.4);
|
||
}
|
||
|
||
.btn.lg {
|
||
font-size: 1.3rem;
|
||
padding-left: 1.5rem;
|
||
padding-right: 1.5rem;
|
||
}
|
||
|
||
.btn.lgg {
|
||
font-size: 1.5rem;
|
||
padding: 0.7em 1.5rem;
|
||
}
|
||
|
||
.btn.sm {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.btn.smm {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.btn.xs {
|
||
font-size: 0.7rem;
|
||
padding: 0.2em 0.8rem;
|
||
}
|
||
|
||
.btn.sq {
|
||
border-radius: 0.3rem;
|
||
}
|
||
|
||
.btn.cc {
|
||
border-radius: 1.5rem;
|
||
}
|
||
|
||
.btn.long {
|
||
width: 80%;
|
||
}
|
||
|
||
.btn[disabled] {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.btn.def {
|
||
border: 1px solid var(--bg6);
|
||
}
|
||
|
||
.btn.def:active {
|
||
background: var(--bg1) !important;
|
||
color: var(--txt9) !important;
|
||
border: 1px solid var(--bg9);
|
||
}
|
||
|
||
.btn.tran {
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
|
||
|
||
/*页面flex布局模式*/
|
||
.ciy-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
.ciy-page .main {
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
|
||
/*说明块*/
|
||
.ciy-tip {
|
||
background: var(--warn4);
|
||
margin: 0.5rem;
|
||
padding: 0.5rem;
|
||
border: 1px solid var(--warn5);
|
||
border-radius: 0.3rem;
|
||
color: var(--txt8);
|
||
}
|
||
|
||
/*断行*/
|
||
.ciy-height {
|
||
height: 0.3rem;
|
||
}
|
||
|
||
|
||
/*分隔线装饰*/
|
||
.ciy-hr {
|
||
position: relative;
|
||
z-index: 10;
|
||
height: 1px;
|
||
width: 100%;
|
||
flex: none;
|
||
background: linear-gradient(90deg, transparent, var(--bg7), transparent);
|
||
}
|
||
|
||
/*九宫格*/
|
||
.ciy-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ciy-grid .grid {
|
||
width: 25%;
|
||
text-align: center;
|
||
padding-top: 0.8rem;
|
||
padding-bottom: 0.2rem;
|
||
}
|
||
|
||
.ciy-grid.grid3 .grid {
|
||
width: 33.3%;
|
||
}
|
||
|
||
.ciy-grid.grid5 .grid {
|
||
width: 20%;
|
||
}
|
||
|
||
.ciy-grid .name {
|
||
padding: 0.5em 0;
|
||
color: var(--txt7);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.ciy-grid .icon {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
display: block;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
background-size: cover;
|
||
}
|
||
|
||
.ciy-grid .br {
|
||
width: 100%;
|
||
height: 0;
|
||
}
|
||
|
||
.ciy-grid .title {
|
||
width: 100%;
|
||
margin: 1em 0 0 0.5rem;
|
||
font-weight: bolder;
|
||
text-shadow: 0 0 2px var(--bg2);
|
||
letter-spacing: 2px;
|
||
color: var(--txt7);
|
||
}
|
||
|
||
/*标题分隔*/
|
||
.ciy-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.8em 1rem;
|
||
font-size: 1.1rem;
|
||
position: relative;
|
||
font-weight: bolder;
|
||
color: var(--txt9);
|
||
}
|
||
|
||
.ciy-title.mk::before {
|
||
content: "";
|
||
width: 0.4rem;
|
||
height: 1.5rem;
|
||
margin-right: 0.3rem;
|
||
border-radius: 0.3rem;
|
||
vertical-align: middle;
|
||
background: linear-gradient(-60deg, var(--man4), var(--man7));
|
||
}
|
||
|
||
|
||
.ciy-title .title {
|
||
flex: 1;
|
||
color: var(--txt9);
|
||
}
|
||
|
||
.ciy-title .right {
|
||
font-size: 0.9rem;
|
||
font-weight: normal;
|
||
color: var(--txt5);
|
||
}
|
||
|
||
.ciy-caption {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.8em 1rem;
|
||
font-size: 1.1rem;
|
||
position: relative;
|
||
font-weight: bolder;
|
||
background: var(--bg2);
|
||
color: var(--txt7);
|
||
border-top: 1px solid var(--bg5);
|
||
border-bottom: 1px solid var(--bg6);
|
||
}
|
||
|
||
.ciy-caption.mk::before {
|
||
content: "";
|
||
width: 0.3rem;
|
||
height: 1.5rem;
|
||
margin-right: 0.3rem;
|
||
border-radius: 0.3rem;
|
||
vertical-align: middle;
|
||
background: var(--man5);
|
||
}
|
||
|
||
.ciy-caption .title {
|
||
flex: 1;
|
||
color: var(--txt9);
|
||
}
|
||
|
||
.ciy-caption .right {
|
||
font-size: 0.9rem;
|
||
font-weight: normal;
|
||
color: var(--txt5);
|
||
}
|
||
|
||
.ciy-caption .sub {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 3rem;
|
||
font-size: 0.7rem;
|
||
font-weight: normal;
|
||
color: var(--txt1);
|
||
}
|
||
|
||
/*卡片块*/
|
||
.ciy-card {
|
||
margin: 0.5rem;
|
||
border: 1px solid var(--bg6);
|
||
border-radius: 0.3rem;
|
||
box-shadow: 0 0 6px var(--bg6);
|
||
background: var(--bg2);
|
||
position: relative;
|
||
}
|
||
|
||
.ciy-card>.title {
|
||
border-radius: 0.3em 0.3em 0 0;
|
||
padding-left: 1rem;
|
||
height: 2.5rem;
|
||
line-height: 2.5rem;
|
||
background: var(--bg4);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ciy-card>.title.mk::before {
|
||
content: "";
|
||
width: 0.2rem;
|
||
display: inline-block;
|
||
border-radius: 0.2rem;
|
||
margin-right: 0.4rem;
|
||
vertical-align: middle;
|
||
height: 1.5rem;
|
||
background: var(--man5);
|
||
}
|
||
|
||
.ciy-card .right {
|
||
position: absolute;
|
||
height: 2.5rem;
|
||
line-height: 2.5rem;
|
||
padding-right: 1rem;
|
||
color: var(--txt5);
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.ciy-card>.content {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.ciy-card>.content>view {
|
||
line-height: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.ciy-load {
|
||
padding: 3em 0 8em 3rem;
|
||
line-height: 2rem;
|
||
background: linear-gradient(180deg, var(--bg5), transparent);
|
||
}
|
||
|
||
.ciy-skeleton {
|
||
background: var(--bg4);
|
||
background: linear-gradient(45deg, var(--bg4) 25%, var(--bg1) 50%, var(--bg4) 75%);
|
||
background-size: 200% 100%;
|
||
animation: skeleton 3s linear infinite;
|
||
border-radius: 0.3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
@keyframes skeleton {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
.code,
|
||
.kbd {
|
||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||
padding: 0.1em 0.4em 0 0.4rem;
|
||
margin: 0 0.2rem;
|
||
font-size: 0.9rem;
|
||
line-height: 1.3rem;
|
||
border-radius: 0.2rem;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
.code {
|
||
color: #bd210c;
|
||
border: 1px solid #f5dde3;
|
||
background-color: #f9f2f4;
|
||
}
|
||
|
||
.kbd {
|
||
color: #ffffff;
|
||
background: linear-gradient(340deg, var(--man5), var(--man7));
|
||
}
|
||
|
||
.ciy-icon-arrow {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE5MiAzNjBjMC0xMC43NTIgMy45NjgtMjAuMDk2IDExLjkwNC0yOC4wOTZDMjExLjkwNCAzMjMuOTA0IDIyMS4yNDggMzIwIDIzMiAzMjBsNTYwIDBjMTAuODE2IDAgMjAuMTYgMy45MDQgMjguMDk2IDExLjkwNEM4MjguMDk2IDMzOS45MDQgODMyIDM0OS4yNDggODMyIDM2MHMtMy45MDQgMjAuMDk2LTExLjkwNCAyOC4wOTZsLTI4MCAyODBDNTMyLjE2IDY3NS45NjggNTIyLjgxNiA2ODAgNTEyIDY4MGMtMTAuNzUyIDAtMjAuMDk2LTMuOTY4LTI4LjA5Ni0xMS45MDRMMjAzLjkwNCAzODguMDk2QzE5NS45NjggMzgwLjA5NiAxOTIgMzcwLjc1MiAxOTIgMzYweiIgZmlsbD0iIzhhOGE4YSI+PC9wYXRoPjwvc3ZnPg==");
|
||
}
|
||
|
||
.ciy-form-group {
|
||
background: var(--bg2);
|
||
margin: 1rem;
|
||
overflow: hidden;
|
||
border-radius: 0.5rem;
|
||
position: relative;
|
||
border: 1px solid var(--bg4);
|
||
border-bottom: 2px solid var(--bg6);
|
||
|
||
}
|
||
|
||
.ciy-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 1rem;
|
||
z-index: 40;
|
||
text-align: center;
|
||
background: var(--bg1);
|
||
border-top: 1px solid var(--bg6);
|
||
}
|
||
|
||
.ciy-form-bottom {
|
||
position: relative;
|
||
z-index: 40;
|
||
text-align: center;
|
||
padding: 0.5em 0;
|
||
}
|
||
|
||
.ciy-form {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--bg5);
|
||
min-height: 4rem;
|
||
}
|
||
|
||
.ciy-form>view {
|
||
text-align: right;
|
||
flex: 1;
|
||
}
|
||
|
||
.ciy-form>view:last-child {
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
.ciy-form>label {
|
||
margin: 0 1rem;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
align-self: flex-start;
|
||
line-height: 4rem;
|
||
}
|
||
|
||
.ciy-form>label.imp {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ciy-form>label.imp::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0.3rem;
|
||
top: 0.8rem;
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
background: var(--dag5);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.char2 label.imp::before,
|
||
.char3 label.imp::before,
|
||
.char4 label.imp::before,
|
||
.char5 label.imp::before,
|
||
.char6 label.imp::before {
|
||
right: -0.5rem;
|
||
left: auto;
|
||
}
|
||
|
||
.char2 label,
|
||
.char3 label,
|
||
.char4 label,
|
||
.char5 label,
|
||
.char6 label {
|
||
text-align: right;
|
||
position: relative;
|
||
}
|
||
|
||
.char2 label {
|
||
min-width: 2rem;
|
||
}
|
||
|
||
.char3 label {
|
||
min-width: 3rem;
|
||
}
|
||
|
||
.char4 label {
|
||
min-width: 4rem;
|
||
}
|
||
|
||
.char5 label {
|
||
min-width: 5rem;
|
||
}
|
||
|
||
.char6 label {
|
||
min-width: 6rem;
|
||
}
|
||
|
||
.ciy-form.v {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.ciy-form.v>view {
|
||
text-align: left;
|
||
margin: 0 0.5rem;
|
||
width: calc(100% - 1em);
|
||
}
|
||
|
||
.ciy-form.v>label {
|
||
height: 2rem;
|
||
line-height: 2rem;
|
||
}
|
||
|
||
.ciy-waterfall {
|
||
column-count: 2;
|
||
column-gap: 0.5rem;
|
||
}
|
||
|
||
.ciy-waterfall .itmcont {
|
||
margin-bottom: 0.5rem;
|
||
width: 100%;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.ciy-edit:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 1em var(--bg1) inset;
|
||
}
|
||
|
||
.md-h1 {
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
line-height: 1.5rem;
|
||
text-align: left;
|
||
padding: 0.5em 0 0.5em 0.5rem;
|
||
}
|
||
|
||
.md-h2 {
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
line-height: 1.8rem;
|
||
padding: 0.5em 0 0.5em 0.5rem;
|
||
}
|
||
|
||
.md-h3,
|
||
.md-h4,
|
||
.md-h5 {
|
||
font-weight: bold;
|
||
font-size: 1rem;
|
||
line-height: 1.5rem;
|
||
padding: 0.5em 0 0.5em 0.5rem;
|
||
}
|
||
|
||
.md-content {
|
||
font-size: 1rem;
|
||
text-indent: 1rem;
|
||
line-height: 2rem;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.md-code {
|
||
text-indent: 0;
|
||
padding: 0.2em 0.4rem;
|
||
font-size: 0.9rem;
|
||
line-height: 1rem;
|
||
margin: 0 0.2rem;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
color: #ffffff;
|
||
background: linear-gradient(340deg, var(--man5), var(--man7));
|
||
border-radius: 0.2rem;
|
||
}
|
||
|
||
.txt-smmm.txt-smmm.txt-smmm {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.txt-smm.txt-smm.txt-smm {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.txt-sm.txt-sm.txt-sm {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.txt-lg.txt-lg.txt-lg {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.txt-lgg.txt-lgg.txt-lgg {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.txt-lggg.txt-lggg.txt-lggg {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.txt-lgggg.txt-lgggg.txt-lgggg {
|
||
font-size: 3rem;
|
||
}
|
||
|
||
.txt-wb.txt-wb.txt-wb {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.txt-wl.txt-wl.txt-wl {
|
||
font-weight: 300;
|
||
}
|
||
|
||
.txt-un.txt-un.txt-un {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.txt-del.txt-del.txt-del {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.txt-left.txt-left.txt-left {
|
||
text-align: left;
|
||
}
|
||
|
||
.txt-center.txt-center.txt-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.txt-right.txt-right.txt-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.txt-just.txt-just {
|
||
text-align: justify;
|
||
}
|
||
|
||
.txt-nowrap.txt-nowrap {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.txt-over.txt-over {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.txt1.txt1.txt1 {
|
||
color: var(--txt1);
|
||
}
|
||
|
||
.txt2.txt2.txt2 {
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.txt3.txt3.txt3 {
|
||
color: var(--txt3);
|
||
}
|
||
|
||
.txt4.txt4.txt4 {
|
||
color: var(--txt4);
|
||
}
|
||
|
||
.txt5.txt5.txt5 {
|
||
color: var(--txt5);
|
||
}
|
||
|
||
.txt6.txt6.txt6 {
|
||
color: var(--txt6);
|
||
}
|
||
|
||
.txt7.txt7.txt7 {
|
||
color: var(--txt7);
|
||
}
|
||
|
||
.txt8.txt8.txt8 {
|
||
color: var(--txt8);
|
||
}
|
||
|
||
.txt9.txt9.txt9 {
|
||
color: var(--txt9);
|
||
}
|
||
|
||
.bg1.bg1.bg1 {
|
||
background-color: var(--bg1);
|
||
}
|
||
|
||
.bg2.bg2.bg2 {
|
||
background-color: var(--bg2);
|
||
}
|
||
|
||
.bg3.bg3.bg3 {
|
||
background-color: var(--bg3);
|
||
}
|
||
|
||
.bg4.bg4.bg4 {
|
||
background-color: var(--bg4);
|
||
}
|
||
|
||
.bg5.bg5.bg5 {
|
||
background-color: var(--bg5);
|
||
}
|
||
|
||
.bg6.bg6.bg6 {
|
||
background-color: var(--bg6);
|
||
}
|
||
|
||
.bg7.bg7.bg7 {
|
||
background-color: var(--bg7);
|
||
}
|
||
|
||
.bg8.bg8.bg8 {
|
||
background-color: var(--bg8);
|
||
}
|
||
|
||
.bg9.bg9.bg9 {
|
||
background-color: var(--bg9);
|
||
}
|
||
|
||
.px1.px1.px1 {
|
||
padding-left: 0.25rem;
|
||
padding-right: 0.25rem;
|
||
}
|
||
|
||
.px2.px2.px2 {
|
||
padding-left: 0.5rem;
|
||
padding-right: 0.5rem;
|
||
}
|
||
|
||
.px3.px3.px3 {
|
||
padding-left: 0.75rem;
|
||
padding-right: 0.75rem;
|
||
}
|
||
|
||
.px4.px4.px4 {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.py1.py1.py1 {
|
||
padding-top: 0.25rem;
|
||
padding-bottom: 0.25rem;
|
||
}
|
||
|
||
.py2.py2.py2 {
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.py3.py3.py3 {
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
}
|
||
|
||
.py4.py4.py4 {
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.mx0.mx0.mx0 {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.mx1.mx1.mx1 {
|
||
margin-left: 0.25rem;
|
||
margin-right: 0.25rem;
|
||
}
|
||
|
||
.mx2.mx2.mx2 {
|
||
margin-left: 0.5rem;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.mx3.mx3.mx3 {
|
||
margin-left: 0.75rem;
|
||
margin-right: 0.75rem;
|
||
}
|
||
|
||
.mx4.mx4.mx4 {
|
||
margin-left: 1rem;
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
.my0.my0.my0 {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.my1.my1.my1 {
|
||
margin-top: 0.25rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.my2.my2.my2 {
|
||
margin-top: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.my3.my3.my3 {
|
||
margin-top: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.my4.my4.my4 {
|
||
margin-top: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.block.block {
|
||
display: block;
|
||
}
|
||
|
||
.flex.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flexcol.flexcol {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex1.flex1 {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.flexnone.flexnone {
|
||
flex: none;
|
||
}
|
||
|
||
.flex-center.flex-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-wrap.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hide.hide.hide {
|
||
display: none;
|
||
}
|
||
|
||
.noselect.noselect.noselect {
|
||
user-select: none;
|
||
}
|
||
|
||
.tran5.tran5.tran5 {
|
||
transition: all .5s;
|
||
-webkit-transition: all .5s;
|
||
}
|
||
|
||
.sta.sta.sta {
|
||
position: static;
|
||
}
|
||
|
||
.abs.abs.abs {
|
||
position: absolute;
|
||
}
|
||
|
||
.fix.fix.fix {
|
||
position: fixed;
|
||
}
|
||
|
||
.rel.rel.rel {
|
||
position: relative;
|
||
}
|
||
|
||
.sti.sti.sti {
|
||
position: sticky;
|
||
z-index: 40;
|
||
}
|
||
|
||
.t0.t0.t0 {
|
||
top: 0;
|
||
}
|
||
|
||
.l0.l0.l0 {
|
||
left: 0;
|
||
}
|
||
|
||
.r0.r0.r0 {
|
||
right: 0;
|
||
}
|
||
|
||
.b0.b0.b0 {
|
||
bottom: 0;
|
||
}
|
||
|
||
.t1.t1.t1 {
|
||
top: 0.5rem;
|
||
}
|
||
|
||
.l1.l1.l1 {
|
||
left: 0.5rem;
|
||
}
|
||
|
||
.r1.r1.r1 {
|
||
right: 0.5rem;
|
||
}
|
||
|
||
.b1.b1.b1 {
|
||
bottom: 0.5rem;
|
||
}
|
||
|
||
.t2.t2.t2 {
|
||
top: 1rem;
|
||
}
|
||
|
||
.l2.l2.l2 {
|
||
left: 1rem;
|
||
}
|
||
|
||
.r2.r2.r2 {
|
||
right: 1rem;
|
||
}
|
||
|
||
.b2.b2.b2 {
|
||
bottom: 1rem;
|
||
}
|
||
|
||
.lh1.lh1.lh1 {
|
||
line-height: 1rem;
|
||
}
|
||
|
||
.lh2.lh2.lh2 {
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
.lh3.lh3.lh3 {
|
||
line-height: 2rem;
|
||
}
|
||
|
||
.lh4.lh4.lh4 {
|
||
line-height: 2.5rem;
|
||
} |