summaryrefslogtreecommitdiff
path: root/www/styles
diff options
context:
space:
mode:
authorChristian Pointner <equinox@helsinki.at>2017-01-16 06:15:41 (GMT)
committerChristian Pointner <equinox@helsinki.at>2017-01-16 06:15:41 (GMT)
commit7ca592a6d8378eb5474c6ee4935f157ee1f546d0 (patch)
tree5805e04bece479ec2d04b058674f402285cd3a6a /www/styles
parent86e72f4a3432798dafb196be0ac84c50582724c1 (diff)
show loading screen
Diffstat (limited to 'www/styles')
-rw-r--r--www/styles/common.css135
-rw-r--r--www/styles/todo.css13
2 files changed, 148 insertions, 0 deletions
diff --git a/www/styles/common.css b/www/styles/common.css
index 7e0d8a8..36fcb36 100644
--- a/www/styles/common.css
+++ b/www/styles/common.css
@@ -24,3 +24,138 @@ body {
font-family: Sans-Serif;
}
+
+.sk-fading-circle {
+ width: 2em;
+ height: 2em;
+ position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+ content: '';
+ display: block;
+ margin: 0 auto;
+ width: 15%;
+ height: 15%;
+ background-color: #333;
+ border-radius: 100%;
+ -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+ animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+ -webkit-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+ -webkit-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+ -webkit-transform: rotate(120deg);
+ -ms-transform: rotate(120deg);
+ transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+ -webkit-transform: rotate(150deg);
+ -ms-transform: rotate(150deg);
+ transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+ -webkit-transform: rotate(210deg);
+ -ms-transform: rotate(210deg);
+ transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+ -webkit-transform: rotate(240deg);
+ -ms-transform: rotate(240deg);
+ transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+ -webkit-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+ -webkit-transform: rotate(300deg);
+ -ms-transform: rotate(300deg);
+ transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+ -webkit-transform: rotate(330deg);
+ -ms-transform: rotate(330deg);
+ transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+ -webkit-animation-delay: -1s;
+ animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+ -webkit-animation-delay: -0.7s;
+ animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+ -webkit-animation-delay: -0.6s;
+ animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+ -webkit-animation-delay: -0.5s;
+ animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+ -webkit-animation-delay: -0.4s;
+ animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+ -webkit-animation-delay: -0.3s;
+ animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+ -webkit-animation-delay: -0.2s;
+ animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+ -webkit-animation-delay: -0.1s;
+ animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+ 0%, 39%, 100% { opacity: 0; }
+ 40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+ 0%, 39%, 100% { opacity: 0; }
+ 40% { opacity: 1; }
+} \ No newline at end of file
diff --git a/www/styles/todo.css b/www/styles/todo.css
index 74ec1e5..09726f2 100644
--- a/www/styles/todo.css
+++ b/www/styles/todo.css
@@ -54,6 +54,14 @@ body {
}
+#loading-inner {
+ width: 60px;
+ margin-top: 5em;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
#shows div.show {
padding: 0.2em 0;
}
@@ -66,6 +74,11 @@ div.show span {
font-weight: bold;
}
+div.show span.show-title {
+ white-space:nowrap;
+ overflow:hidden;
+}
+
div.show span.show-start {
font-size: 0.75em;
margin-left: 5em;