film-exif/public/css/app.css

154 lines
2.5 KiB
CSS
Raw Normal View History

2018-03-30 18:49:49 -04:00
/**
* Custom styles for electron app
*/
2018-04-03 14:13:16 -04:00
/*! Classes */
.abs-center {
height: auto;
margin: auto;
width: auto;
}
2018-04-03 21:47:41 -04:00
.container {
padding: 0;
margin: 0;
}
2018-04-03 14:13:16 -04:00
.full-height {
2018-04-03 21:47:41 -04:00
height: calc(100% - 60px);
}
.row {
margin: inherit;
2018-04-03 14:13:16 -04:00
}
/*! Elements */
html, body {
height: 100vh;
}
2018-04-03 16:52:58 -04:00
bs-container > * {
padding: 0.5em 1em;
}
2018-04-04 19:26:34 -04:00
bs-card,
bs-card-deck,
bs-card-group,
bs-card-header,
bs-card-body,
bs-card-footer,
2018-04-04 09:32:18 -04:00
bs-form-feedback,
bs-form-group,
bs-jumbotron {
display: block;
}
2018-04-03 14:13:16 -04:00
/*! Ids */
2018-04-12 21:57:16 -04:00
/* -----------------------------------------------------------------------------
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
}