|
|
|
|
@ -208,12 +208,20 @@ fieldset {
|
|
|
|
|
border: var(--el-border-color) 1px solid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@layer {
|
|
|
|
|
|
|
|
|
|
.w-abs {
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.w-lines {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
@ -221,6 +229,7 @@ fieldset {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-flex-column {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -231,14 +240,93 @@ fieldset {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 印章效果 */
|
|
|
|
|
.w-seal {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: flex;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 6em;
|
|
|
|
|
height: 6em;
|
|
|
|
|
border-radius: 10em;
|
|
|
|
|
border: .25em solid currentColor;
|
|
|
|
|
background-color: #FFF;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
transform: rotate(-25deg);
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
|
|
&>div {
|
|
|
|
|
border: .13em solid currentColor;
|
|
|
|
|
padding: .3em 0;
|
|
|
|
|
width: 4.3em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 5em;
|
|
|
|
|
height: 5em;
|
|
|
|
|
border: .15em solid currentColor;
|
|
|
|
|
border-radius: 10em;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 3.5em;
|
|
|
|
|
height: 3.5em;
|
|
|
|
|
border: .15em solid currentColor;
|
|
|
|
|
border-color: currentColor #0000 currentColor #0000;
|
|
|
|
|
border-radius: 10em;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.w-loading {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
border-radius: 1em;
|
|
|
|
|
border: .2em solid currentColor;
|
|
|
|
|
border-top-color: #0000;
|
|
|
|
|
animation: w-am-loading 1s infinite;
|
|
|
|
|
border: solid .2em currentColor;
|
|
|
|
|
mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
|
|
|
|
|
animation: w-am-loading 1s ease infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-inner-loading {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
background-color: var(--bg-color, #0003);
|
|
|
|
|
backdrop-filter: blur(.1em);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: '';
|
|
|
|
|
font-size: var(--size, 1em);
|
|
|
|
|
display: block;
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
border-radius: 1em;
|
|
|
|
|
border: solid .2em var(--loading-color, currentColor);
|
|
|
|
|
mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
|
|
|
|
|
animation: w-am-loading 1s ease infinite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes w-am-loading {
|
|
|
|
|
@ -252,38 +340,114 @@ fieldset {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@property --border-gradient-angle {
|
|
|
|
|
syntax: "<angle>";
|
|
|
|
|
inherits: true;
|
|
|
|
|
initial-value: 0turn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-border-light,
|
|
|
|
|
.w-border-light-1,
|
|
|
|
|
.w-border-light-2,
|
|
|
|
|
.w-border-light-3 {
|
|
|
|
|
position: relative;
|
|
|
|
|
border: none !important;
|
|
|
|
|
animation-play-state: inherit;
|
|
|
|
|
|
|
|
|
|
--border: .1em solid #0000;
|
|
|
|
|
--border-light-color: #FFF9;
|
|
|
|
|
--time: 5s;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
border: var(--border);
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
border: var(--border);
|
|
|
|
|
border-color: var(--border-light-color);
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%, #0000 50%, #000 60%, #0000 61%);
|
|
|
|
|
animation: am-frame var(--time) infinite linear;
|
|
|
|
|
animation-play-state: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-border-light-1::after {
|
|
|
|
|
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.w-border-light-3::after {
|
|
|
|
|
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000,#0000 23%, #000 33%, #0000 34%,#0000 56%,#000 66%,#0000 67%, #0000 89%, #000 99%, #0000 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes am-frame {
|
|
|
|
|
0% {
|
|
|
|
|
--border-gradient-angle: 0turn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
--border-gradient-angle: 1turn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-part-hide {
|
|
|
|
|
--top: 1em;
|
|
|
|
|
--bottom: 1em;
|
|
|
|
|
mask-image: linear-gradient(to bottom,#0000 0%,#000 var(--top),#000 calc(100% - var(--bottom)), #0000 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-radio,
|
|
|
|
|
.w-checkbox {
|
|
|
|
|
--btn-color-inner: var(--btn-color, currentColor);
|
|
|
|
|
--opacity: .6;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
font-size: var(--btn-size, inherit);
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
height: 1.5em;
|
|
|
|
|
opacity: var(--opacity);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border: solid 1px var(--btn-color-inner);
|
|
|
|
|
border: solid .1em var(--btn-color-inner);
|
|
|
|
|
margin-right: .2em;
|
|
|
|
|
border-radius: .2em;
|
|
|
|
|
background-color: var(--btn-bg-color-inner, #0000);
|
|
|
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzA5NzA3MjQ5OTg3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyODUiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTg0My42OTM5NTkgMjkzLjYwOTA2MSA0MjUuMjU1ODY5IDcxMi4wNTYzNjIgMTg2LjE0NTAyNiA0NzIuOTQ3NTY2IDY2LjU3OTg4MyA1OTIuNTA0NTIyIDQyNS4yNTU4NjkgOTUxLjE2NTE1OCA5NjMuMjYwMTI2IDQxMy4xNzQyMDRaIiBwLWlkPSI0Mjg2IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+");
|
|
|
|
|
background-size: .65em .65em;
|
|
|
|
|
background-size: 1em 1em;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: var(--background-position-inner, center -1em);
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transform: scale(.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
|
--btn-color-inner: var(--selected-btn-color, var(--w-main));
|
|
|
|
|
--btn-color-inner: var(--selected-btn-color, var(--el-color-primary));
|
|
|
|
|
--opacity: 1;
|
|
|
|
|
--btn-bg-color-inner: var(--selected-btn-color, var(--w-main));
|
|
|
|
|
--background-position-inner: center .1em;
|
|
|
|
|
--btn-bg-color-inner: var(--selected-btn-color, var(--el-color-primary));
|
|
|
|
|
--background-position-inner: center 0.1em;
|
|
|
|
|
color: var(--selected-text-color, currentColor);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -292,3 +456,40 @@ fieldset {
|
|
|
|
|
.w-radio::before {
|
|
|
|
|
border-radius: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@property --data-num {
|
|
|
|
|
syntax: "<number>";
|
|
|
|
|
inherits: true;
|
|
|
|
|
initial-value: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.w-breathing {
|
|
|
|
|
--filter: brightness(110%);
|
|
|
|
|
--transform: scale(1.1);
|
|
|
|
|
--time: 1.3s;
|
|
|
|
|
--data-num: 0;
|
|
|
|
|
--data-num-to: 1;
|
|
|
|
|
animation: w-am-breathing var(--time) infinite linear;
|
|
|
|
|
animation-play-state: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes w-am-breathing {
|
|
|
|
|
0% {
|
|
|
|
|
filter: none;
|
|
|
|
|
transform: none;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
45% {
|
|
|
|
|
filter: var(--filter);
|
|
|
|
|
transform: var(--transform);
|
|
|
|
|
--data-num: var(--data-num-to);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
90% {
|
|
|
|
|
filter: none;
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|