fix crazy hack for firefox by using smarter css selectors

app/rest/templates/trend.tpl

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