PART 2: Slightly modernize the look - After #7072

assets/stylesheets/ace.css

@@ -1,6 +1,6 @@
 .ace_editor {
-position: relative;
+  position: relative;
   height: 100%;
   box-sizing: border-box;
   margin-bottom: 10px;
-}
+}

assets/stylesheets/admin-pages.scss

@@ -28,11 +28,13 @@
     padding: 3px;
   }
 }
-#scheduled-product-modal table, #scheduled-products h3 + table {
+#scheduled-product-modal table,
+#scheduled-products h3 + table {
   border: none;
   width: 100%;
   font-family: monospace;
-  th, td {
+  th,
+  td {
     padding: 1px;
     border: none;
   }
@@ -57,7 +59,8 @@
   padding: 2px;
 }
 html:not([data-bs-theme='dark']) .tab-pane {
-  table#results, .comments {
+  table#results,
+  .comments {
     padding-top: 9px;
   }
 }
@@ -133,7 +136,8 @@ a.add-parent-group {
 #job_group_list {
   margin: 0 0 20px;
   padding: 0;
-  li, div {
+  li,
+  div {
     font-weight: 500;
     font-size: 120%;
     list-style-type: none;
@@ -177,7 +181,8 @@ a.add-parent-group {
     display: none;
   }
   span {
-    &.glyphicon, &[class*='fa-'] {
+    &.glyphicon,
+    &[class*='fa-'] {
       color: #aaa;
       margin: 0 5px;
     }
@@ -186,7 +191,8 @@ a.add-parent-group {
       margin: 3px;
     }
   }
-  a[class*='fa-plus'], a[class*='fa-trash'] {
+  a[class*='fa-plus'],
+  a[class*='fa-trash'] {
     float: right;
     display: inline-block;
     margin: 5px;
@@ -227,7 +233,8 @@ a.add-parent-group {
   #job_group_list ul li {
     background-color: $btn-default-bg-dark;
   }
-  .dragover::after, .parent-dragover::before {
+  .dragover::after,
+  .parent-dragover::before {
     border-color: $btn-default-color-dark !important;
   }
 }
@@ -307,13 +314,15 @@ h2 + * {
   clear: right;
 }
 .mediagroup {
-  th.arch, td.arch {
+  th.arch,
+  td.arch {
     text-align: center;
   }
   th.prio {
     width: 3em;
   }
-  th.prio, td.prio {
+  th.prio,
+  td.prio {
     text-align: center;
   }
 }
@@ -367,7 +376,8 @@ table#users {
       margin-top: 10px;
       margin-bottom: 0;
     }
-    ul, span {
+    ul,
+    span {
       font-weight: normal;
     }
   }
@@ -386,13 +396,16 @@ table#users {
 .custom_needle_range {
   display: table-row;
   margin-bottom: 5px;
-  select, input, button {
+  select,
+  input,
+  button {
     font-size: 90%;
     display: table-cell;
     margin-left: 2px;
     height: 2rem !important;
   }
-  select, input[type='datetime-local'] {
+  select,
+  input[type='datetime-local'] {
     width: initial;
   }
 }

assets/stylesheets/back_to_top.css

@@ -1,12 +1,12 @@
 .back-to-top {
-    bottom: 20px;
-    border-radius: 50rem;
-    cursor: pointer;
-    display: none;
-    position: fixed;
-    right: 20px;
-    z-index: 1000;
-    width: 2.2rem;
-    height: 2.2rem;
-    padding: 0;
+  bottom: 20px;
+  border-radius: 50rem;
+  cursor: pointer;
+  display: none;
+  position: fixed;
+  right: 20px;
+  z-index: 1000;
+  width: 2.2rem;
+  height: 2.2rem;
+  padding: 0;
 }

assets/stylesheets/comments.scss

@@ -1,4 +1,5 @@
-.trigger-edit-button, .remove-edit-button {
+.trigger-edit-button,
+.remove-edit-button {
   float: right;
   margin-top: -2px;
   margin-left: 4px;
@@ -33,15 +34,19 @@
       }
     }
   }
-  .openqa-bugref, .openqa-label, .openqa-flag, .openqa-testref {
+  .openqa-bugref,
+  .openqa-label,
+  .openqa-flag,
+  .openqa-testref {
     position: relative;
     padding: 0.3em;
     padding-left: 0.25em;
     border-radius: 0.25rem;
     white-space: nowrap;
     line-height: 2.05;
   }
-  .openqa-bugref, .openqa-testref {
+  .openqa-bugref,
+  .openqa-testref {
     background-color: #eee;
     color: #666;
     border: 1px solid #ddd;
@@ -60,10 +65,12 @@
     padding-left: 0.2em;
     padding-right: 0.23em;
   }
-  .openqa-label, .openqa-flag {
+  .openqa-label,
+  .openqa-flag {
     padding-left: 1.25em;
   }
-  .openqa-label::before, .openqa-flag::before {
+  .openqa-label::before,
+  .openqa-flag::before {
     display: inline-block;
     font-style: normal;
     font-variant: normal;

assets/stylesheets/dashboard.scss

@@ -30,12 +30,15 @@ td div.progress {
       text-decoration: none;
     }
   }
-  .progress-bar-passed, .progress-bar-softfailed, .progress-bar-unfinished {
+  .progress-bar-passed,
+  .progress-bar-softfailed,
+  .progress-bar-unfinished {
     a {
       color: $color-result;
     }
   }
-  .progress-bar-failed, .progress-bar-skipped {
+  .progress-bar-failed,
+  .progress-bar-skipped {
     a {
       color: black;
     }
@@ -90,7 +93,8 @@ td div.progress {
   margin-left: 2px;
   margin-right: 2px;
 }
-.build_group_children, .build-row {
+.build_group_children,
+.build-row {
   .h4::before {
     display: inline-box;
     min-width: 10px;

assets/stylesheets/dependency_graph.scss

@@ -53,13 +53,15 @@
       &.passed {
         background-color: $color-ok;
       }
-      &.failed, &.parallel_failed {
+      &.failed,
+      &.parallel_failed {
         background-color: $color-result-failed;
       }
       &.softfailed {
         background-color: $color-softfailed;
       }
-      &.incomplete, &.timeout_exceeded {
+      &.incomplete,
+      &.timeout_exceeded {
         color: white;
         background-color: $color-incomplete;
       }
@@ -70,10 +72,13 @@
         color: white;
         background-color: $color-state-scheduled;
       }
-      &.cancelled, &.user_cancelled {
+      &.cancelled,
+      &.user_cancelled {
         background-color: $color-state-cancelled;
       }
-      &.assigned, &.running, &.uploading {
+      &.assigned,
+      &.running,
+      &.uploading {
         background-color: $color-state-running;
       }
     }

assets/stylesheets/disable_animations.css

@@ -1,9 +1,9 @@
 /* ensure smooth scrolling (enabled by Bootstrap) is disabled during tests */
 :root {
-    scroll-behavior: auto !important;
+  scroll-behavior: auto !important;
 }
 /* avoid all kinds of animations, e.g. the transition used in Bootstrap popovers */
 * {
-    animation: none !important;
-    transition: none !important;
+  animation: none !important;
+  transition: none !important;
 }

assets/stylesheets/forms.scss

@@ -34,7 +34,8 @@
     &:focus {
       background-color: $bg;
     }
-    &:hover, &:active:hover {
+    &:hover,
+    &:active:hover {
       background-color: darken($bg, 6%);
     }
     &:active {
@@ -53,7 +54,8 @@
     border-radius: $btn-border-radius-base;
     @include box-shadow(none);
     color: $btn-default-color;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       @include box-shadow(none);
       color: $btn-default-color;
       text-decoration: none;
@@ -66,11 +68,17 @@
   }
 }
 .btn-group {
-  .btn + .btn, .btn + .btn-group, .btn-group + .btn, .btn-group + .btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
     margin-left: 0;
   }
   &-vertical {
-    > .btn + .btn, > .btn + .btn-group, > .btn-group + .btn, > .btn-group + .btn-group {
+    > .btn + .btn,
+    > .btn + .btn-group,
+    > .btn-group + .btn,
+    > .btn-group + .btn-group {
       margin-top: 0;
     }
   }