photoprism/frontend/src/css/app.css
Michael Mayer f89a4346e8 Colorchange loading animation
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
2019-12-09 02:06:43 +01:00

154 lines
2.7 KiB
CSS

@import url("../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
@import url("../../node_modules/vuetify/dist/vuetify.min.css");
@import url("../../node_modules/leaflet/dist/leaflet.css");
@import url("maps.css");
@import url("viewer.css");
@import url("photos.css");
@import url("labels.css");
@keyframes colorchange
{
0% {background: #EF5350;}
25% {background: #FFD600;}
50% {background: #00ACC1;}
75% {background: #00BFA5;}
100% {background: #E57373;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: #EF5350;}
25% {background: #FFD600;}
50% {background: #00ACC1;}
75% {background: #00BFA5;}
100% {background: #E57373;}
}
.colorchange {
animation: colorchange 5s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 5s infinite; /* Chrome and Safari */
}
body {
background: rgb(250, 250, 250);
color: #333333;
font-family: Roboto, sans-serif;;
}
footer {
clear: both;
padding: 1rem 2rem;
}
main {
padding: 0;
margin: 0;
z-index: 1;
}
#p-busy-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
}
#p-navigation {
z-index: 10;
}
#photoprism div.loading {
text-align: center;
margin: 50px 20px;
}
#photoprism div.loading p {
color: #616161;
}
#photoprism main a {
color: #00B8D4;
}
#photoprism main .p-results a {
color: #333333;
}
#photoprism main .p-inline-edit a,
#photoprism main .p-inline-edit a span {
color: #333333;
cursor: text;
}
#photoprism main a.v-tabs__item {
color: #546E7A;
}
#photoprism main a.v-tabs__item--active {
color: #455A64;
}
#photoprism .v-badge__badge {
font-size: 12px;
height: 19px;
width: 19px;
right: -20px;
top: -8px;
}
#photoprism .p-pointer {
cursor: pointer;
}
#photoprism .p-logs {
color: white;
}
#photoprism .p-log-empty,
#photoprism .p-log-message{
display: block;
text-align: left;
font-size: 1em;
font-family: monospace;
white-space: normal;
color: white;
padding: 4px;
margin: 0;
}
#photoprism .p-log-empty {
font-weight: normal;
}
#photoprism .p-log-message {
font-weight: bold;
}
#photoprism .p-log-message span {
color: #FEFEFE;
font-weight: normal;
}
#photoprism .p-log-fatal,
#photoprism .p-log-critical,
#photoprism .p-log-error {
color: #F48FB1;
}
#photoprism .p-log-fatal {
color: #FFECB3;
}
#photoprism .p-log-info {
color: #82B1FF;
}
#photoprism .p-log-debug {
color: #EEEEEE;
}