|
@@ -25,7 +25,7 @@ body {
|
|
color: #cccccc;
|
|
color: #cccccc;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
-.loader-container {
|
|
|
|
|
|
+div.loader-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50vw;
|
|
left: 50vw;
|
|
top: 50vh;
|
|
top: 50vh;
|
|
@@ -35,23 +35,26 @@ body {
|
|
height: 9em;
|
|
height: 9em;
|
|
width: 175px;
|
|
width: 175px;
|
|
}
|
|
}
|
|
-.loader-container:has(+ .done) {
|
|
|
|
|
|
+div.loader-container:not(:has(+ .done)) {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+.loader-container:not(:last-child) {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
div.progress {
|
|
div.progress {
|
|
margin: 1em 0 1em;
|
|
margin: 1em 0 1em;
|
|
}
|
|
}
|
|
-div.progress label {
|
|
|
|
|
|
+div.progress:not(:has(+ .done)) {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+.progress label {
|
|
text-align:left;
|
|
text-align:left;
|
|
}
|
|
}
|
|
-div.progress label:after {
|
|
|
|
|
|
+.progress label:after {
|
|
content: "...";
|
|
content: "...";
|
|
}
|
|
}
|
|
-div.progress:has(+ .done) {
|
|
|
|
|
|
+.progress:not(:last-child) {
|
|
display: none;
|
|
display: none;
|
|
-}
|
|
|
|
-div.progress:has(+ .done) label:after {
|
|
|
|
- content: "";
|
|
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
</head>
|
|
</head>
|
|
@@ -62,14 +65,8 @@ div.progress:has(+ .done) label:after {
|
|
% if end:
|
|
% if end:
|
|
</div>
|
|
</div>
|
|
<div class="done"></div>
|
|
<div class="done"></div>
|
|
- <!-- firefox doesn't support :has() css -->
|
|
|
|
- <style>
|
|
|
|
-div.loader-container {
|
|
|
|
- display: none;
|
|
|
|
-}
|
|
|
|
- <!-- -->
|
|
|
|
- </style>
|
|
|
|
{{!form}}
|
|
{{!form}}
|
|
{{!svg}}
|
|
{{!svg}}
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|
|
|
|
+% end
|