new
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,120 @@
|
||||
#loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#loading * {
|
||||
text-align: center;
|
||||
}
|
||||
#loading .box{
|
||||
/*border: 1px solid;*/
|
||||
position: absolute;
|
||||
width:400px;
|
||||
height:200px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-200px;
|
||||
margin-top:-200px;
|
||||
display: none;
|
||||
color: white;
|
||||
}
|
||||
#loading-powered-by{
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: grey;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
}
|
||||
#loading .title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#on-load-file-name{
|
||||
font-size: 16px;
|
||||
color: grey;
|
||||
line-height: 35px;
|
||||
}
|
||||
#text-percent{
|
||||
font-size: 30px;
|
||||
top: 83px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.circle-box{
|
||||
margin: 30px auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative
|
||||
}
|
||||
.mask{
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.mask.right{
|
||||
right: 0;
|
||||
}
|
||||
.mask.left{
|
||||
left: 0;
|
||||
}
|
||||
.circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #4e4e4e;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.5s ;
|
||||
}
|
||||
.circle.right{
|
||||
clip:rect(0,auto,auto,100px);
|
||||
border: 2px solid white;
|
||||
transform: rotate(-180deg);
|
||||
left: -100px;
|
||||
}
|
||||
.circle.left{
|
||||
clip:rect(0,100px,auto,auto);
|
||||
border: 2px solid white;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
/*https://www.html5tricks.com/demo/css3-loading-cool-styles/index.html*/
|
||||
.load-3 {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 32%;
|
||||
width: 100%;
|
||||
}
|
||||
.load-3 .k-line2 {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-100px);
|
||||
background-color: #ffffff;
|
||||
animation: k-loadingS 4s infinite;
|
||||
animation-delay: .8s;
|
||||
}
|
||||
@keyframes k-loadingS {
|
||||
40% {
|
||||
transform:translateX(0);
|
||||
opacity:.8
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100px);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,117 @@
|
||||
#yl .tiles-box{
|
||||
position: absolute;
|
||||
height: calc(100% - 24px);
|
||||
padding: 8px 16px;
|
||||
padding-right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: calc(100% - 328px);
|
||||
top: 16px;
|
||||
transition:left 0.3s ;
|
||||
/*column-count: 3;*/
|
||||
}
|
||||
#yl.small-screen .tiles-box{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: calc(100% - 56px);
|
||||
}
|
||||
#yl .tiles-flex-container{
|
||||
width: 100%;
|
||||
column-gap: 0;
|
||||
}
|
||||
#yl .tiles{
|
||||
top :0;
|
||||
overflow: hidden;
|
||||
transition: left 0.3s;
|
||||
break-inside: avoid;
|
||||
}
|
||||
#yl .tiles>.title{
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
line-height: 3em;
|
||||
overflow: hidden;
|
||||
height: 3em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#yl .tiles>.title>.tip{
|
||||
float: right;
|
||||
line-height: inherit;
|
||||
font-size: 1.5em;
|
||||
margin-right: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#yl .tiles:hover>.title>.tip {
|
||||
opacity: 1;
|
||||
}
|
||||
#yl .tiles .vue-grid-item{
|
||||
/*background-color: #4fa1da;*/
|
||||
opacity: 0.9;
|
||||
/*transition: opacity 0.3s ;*/
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item:hover{
|
||||
opacity: 1;
|
||||
box-shadow: inset 0 0 0 2px white;
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item.vue-grid-placeholder{
|
||||
background: rgba(105, 120, 135, 0.52);
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item:hover .tile{
|
||||
animation-fill-mode: backwards ;
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile>.mask{
|
||||
height: 100%;
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile>.mask>.badge {
|
||||
right: 0.2em;
|
||||
top: 0.2em;
|
||||
transform: none;
|
||||
border-radius: 0;
|
||||
padding: 0.2em;
|
||||
min-width: 2em;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.71);
|
||||
}
|
||||
#yl .vue-grid-item>.vue-resizable-handle{
|
||||
opacity: 0;
|
||||
}
|
||||
#yl .vue-grid-item:hover>.vue-resizable-handle{
|
||||
opacity: 1;
|
||||
}
|
||||
#yl .tiles .tile .icon{
|
||||
color:white;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
#yl .tiles .tile .title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.5em;
|
||||
text-shadow: 0px 0px 4px #0000006b;
|
||||
}
|
||||
|
||||
#yl .tiles .tile .custom-tile{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.layui-layer.yl{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
.layui-layer.yl .layui-layer-title{
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.layui-layer.yl .layui-layer-btn0,.layui-layer.yl .layui-layer-btn1{
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.layui-layer.yl .layui-layer-content .layui-layer-input{
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: calc(100% - 50px);
|
||||
line-height: 20px;
|
||||
padding: 0.5em;
|
||||
outline: none;
|
||||
}
|
||||
Reference in New Issue
Block a user