150 lines
2.5 KiB
SCSS
150 lines
2.5 KiB
SCSS
// General reset styles
|
|
*
|
|
{
|
|
color: $content-color;
|
|
}
|
|
|
|
.bar.app-top-bar
|
|
{
|
|
background-color: $top-bar-bg;
|
|
|
|
.title
|
|
{
|
|
color: $top-bar-color !important;
|
|
*
|
|
{
|
|
color: $top-bar-color !important;
|
|
}
|
|
}
|
|
|
|
.button
|
|
{
|
|
color: $top-bar-color !important;
|
|
*
|
|
{
|
|
color: $top-bar-color !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Preload images aux styles (ratios)
|
|
// Auto generate ratios for the whole app (see: http://stackoverflow.com/a/18120181/1116959)
|
|
@each $ratio in $pre-img-ratios {
|
|
.pre-img._#{nth($ratio, 1)}_#{nth($ratio, 2)}
|
|
{
|
|
// Conserve aspect ratio (see: http://stackoverflow.com/a/10441480/1116959)
|
|
width: 100%;
|
|
padding-bottom: #{(nth($ratio, 2) / nth($ratio, 1)) * 100}%;
|
|
}
|
|
}
|
|
|
|
.pre-img
|
|
{
|
|
position: relative;
|
|
background-color: $pre-img-bg;
|
|
|
|
// If the image is rounded
|
|
&.rounded-image
|
|
{
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.finish-loading
|
|
{
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
img
|
|
{
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
img
|
|
{
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
@include transition(visibility 0s linear, opacity 0.5s linear);
|
|
}
|
|
}
|
|
|
|
// spinner-on-load
|
|
@include keyframes(spin) {
|
|
from {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
to {
|
|
@include transform(rotate(359deg));
|
|
}
|
|
}
|
|
.spinner-on-load
|
|
{
|
|
position: absolute;
|
|
font-size: $spinner-size;
|
|
width: $spinner-size;
|
|
height: $spinner-size;
|
|
line-height: $spinner-size;
|
|
color: $spinner-color;
|
|
@include animation(spin 2s infinite linear);
|
|
@include calc(top, "50% - #{($spinner-size/2)}");
|
|
@include calc(left, "50% - #{($spinner-size/2)}");
|
|
}
|
|
ion-spinner.spinner-on-load
|
|
{
|
|
@include animation(none);
|
|
stroke: $spinner-color;
|
|
width: $spinner-svg-size;
|
|
height: $spinner-svg-size;
|
|
line-height: inherit;
|
|
@include calc(top, "50% - #{($spinner-svg-size/2)}");
|
|
@include calc(left, "50% - #{($spinner-svg-size/2)}");
|
|
}
|
|
|
|
// Multimedia background
|
|
.multi-bg-outer
|
|
{
|
|
position: relative;
|
|
background-color: rgba(darken($multi-bg, 10%), 0.7);
|
|
height: 100%;
|
|
@include transition(all ease-in-out .3s);
|
|
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
z-index: -2;
|
|
|
|
&.finish-loading
|
|
{
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bg-overlay
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: $overlay-bg;
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.multi-bg
|
|
{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.loading-container .loading
|
|
{
|
|
background-color: $loading-background-color;
|
|
*
|
|
{
|
|
color: darken($loading-color, 5);
|
|
font-weight: 500;
|
|
}
|
|
}
|