vim-webgl-component
Version:
A demonstration app built on top of the vim-webgl-viewer
168 lines (159 loc) • 2.93 kB
CSS
.vim-measure {
background-color: white;
}
.vim-measure table {
border-collapse: collapse;
}
.vim-measure table tr {
border: 1px solid;
border-color: black;
}
.vim-measure-label-d,
.vim-measure-label-x,
.vim-measure-label-y,
.vim-measure-label-z {
color: white;
width: 10px;
text-align: center;
padding: 5px;
}
.vim-measure-label-d {
background-color: black;
}
.vim-measure-label-x {
background-color: red;
}
.vim-measure-label-y {
background-color: green;
}
.vim-measure-label-z {
background-color: blue;
}
.vim-measure-value-d,
.vim-measure-value-x,
.vim-measure-value-y,
.vim-measure-value-z {
text-align: center;
padding: 5px;
}
.lds-roller {
display: block;
top: 10px;
left: 10px;
position: absolute;
width: 20px;
height: 20px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 20px 20px;
}
.lds-roller div:after {
content: ' ';
display: block;
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #40a6de;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 32px;
left: 32px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 35px;
left: 28px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 37px;
left: 24px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 38px;
left: 20px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 37px;
left: 16px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 35px;
left: 12px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 32px;
left: 8px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 28px;
left: 5px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader {
width: 100%;
height: 4px;
display: block;
top: 0px;
position: absolute;
overflow: hidden;
}
.loader::after {
content: '';
width: 30%;
height: 4.8px;
background: linear-gradient(
to right,
#40a6de00 0%,
#40a6deff 20%,
#40a6deff 80%,
#40a6de00 100%
);
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}