154 lines
2.5 KiB
CSS
154 lines
2.5 KiB
CSS
/**
|
|
* Custom styles for electron app
|
|
*/
|
|
|
|
/*! Classes */
|
|
.abs-center {
|
|
height: auto;
|
|
margin: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.container {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.full-height {
|
|
height: calc(100% - 60px);
|
|
}
|
|
|
|
.row {
|
|
margin: inherit;
|
|
}
|
|
|
|
/*! Elements */
|
|
html, body {
|
|
height: 100vh;
|
|
}
|
|
|
|
bs-container > * {
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
bs-card,
|
|
bs-card-deck,
|
|
bs-card-group,
|
|
bs-card-header,
|
|
bs-card-body,
|
|
bs-card-footer,
|
|
bs-form-feedback,
|
|
bs-form-group,
|
|
bs-jumbotron {
|
|
display: block;
|
|
}
|
|
|
|
/*! Ids */
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
CSS loading icon
|
|
------------------------------------------------------------------------------*/
|
|
|
|
cssload-loader {
|
|
display: flex;
|
|
/* position: relative;
|
|
left: calc(50% - 50px); */
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
perspective: 780px;
|
|
margin: auto;
|
|
}
|
|
|
|
cssload-inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: auto;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
cssload-one {
|
|
left: 0%;
|
|
top: 0%;
|
|
animation: cssload-rotate-one 1.15s linear infinite;
|
|
border-bottom: 3px solid rgb(0,0,0);
|
|
}
|
|
|
|
cssload-two {
|
|
right: 0%;
|
|
top: 0%;
|
|
animation: cssload-rotate-two 1.15s linear infinite;
|
|
border-right: 3px solid rgb(0,0,0);
|
|
}
|
|
|
|
cssload-three {
|
|
right: 0%;
|
|
bottom: 0%;
|
|
animation: cssload-rotate-three 1.15s linear infinite;
|
|
border-top: 3px solid rgb(0,0,0);
|
|
}
|
|
|
|
@keyframes cssload-rotate-one {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes cssload-rotate-two {
|
|
0% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes cssload-rotate-three {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
Loading overlay
|
|
-----------------------------------------------------------------------------*/
|
|
#loading-shadow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 500;
|
|
}
|
|
|
|
#loading-shadow loading-wrapper {
|
|
position: fixed;
|
|
z-index: 501;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#loading-shadow loading-content {
|
|
position: relative;
|
|
color: #fff
|
|
}
|
|
|
|
loading-content .cssload-inner {
|
|
border-color: #fff
|
|
}
|