From 31115fd55d69cd6b2fa66f56bf6f77e09ae89d79 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:07:30 +0100
Subject: [PATCH 01/10] refactor: modernize openQA theme variables for
 Bootstrap 5

Refactor openqa_theme.scss to use native Bootstrap 5 maps and variables.
This ensures better compatibility with Bootstrap 5 native color modes and
modern CSS practices while maintaining backward compatibility for existing
SCSS files through variable aliasing.
---
 assets/stylesheets/openqa_theme.scss | 66 +++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 16 deletions(-)

diff --git a/assets/stylesheets/openqa_theme.scss b/assets/stylesheets/openqa_theme.scss
index 72e9414d305..fa08d89d4b9 100644
--- a/assets/stylesheets/openqa_theme.scss
+++ b/assets/stylesheets/openqa_theme.scss
@@ -1,3 +1,4 @@
+// Grid breakpoints (kept original to avoid breaking tests relying on specific window sizes)
 $grid-breakpoints: (
   xs: 0,
   sm: 500px,
@@ -5,18 +6,49 @@ $grid-breakpoints: (
   lg: 700px,
   xl: 1000px
 );
+
+// Fonts
 $web-font-path: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' !default;
-$default-font: 'Roboto', 'Helvetica Neue', helvetica, arial, sans-serif;
-$icon-font-path: '/fonts/';
-$default-font-color: #666;
-$default-bg-color: #fff;
+$font-family-sans-serif:
+  'Roboto',
+  system-ui,
+  -apple-system,
+  'Segoe UI',
+  'Helvetica Neue',
+  Arial,
+  sans-serif;
 $font-size-base: 0.85rem;
+
+// Colors
+$primary: #446e9b;
+$secondary: #6c757d;
+$success: #28a745;
+$info: #17a2b8;
+$warning: #ffc107;
+$danger: #dc3545;
+$light: #f8f9fa;
+$dark: #343a40;
+
+$body-color: #444;
+$body-bg: #fff;
+
+// Legacy variables for backward compatibility
+$default-font: $font-family-sans-serif;
+$default-font-color: $body-color;
+$default-bg-color: $body-bg;
+$link-color: $primary;
+$link-hover-color: darken($link-color, 15%) !default;
+$table-border-color: #dee2e6;
+
+// Headings and font sizes
 $h2-font-size: 1.65rem;
 $h3-font-size: 1.25rem;
 $h4-font-size: 1.15rem;
 $progress-font-size: 0.78rem;
+
+// Buttons legacy
 $btn-border-radius-base: 0.25rem;
-$btn-default-color: #000;
+$btn-default-color: #000000;
 $btn-default-bg: #fefefe;
 $btn-primary-bg: #007bff;
 $btn-secondary-bg: #6c757d;
@@ -26,22 +58,21 @@ $btn-warning-bg: #ffc107;
 $btn-danger-bg: #dc3545;
 $btn-light-bg: #f8f9fa;
 $btn-dark-bg: #343a40;
-$table-border-color: #ddd;
-$link-color: #446e9b;
-$link-hover-color: darken($link-color, 15%) !default;
+
+// openQA specific colors
 $color-softfailed: #eeb560;
 $color-ok: #cdffb9;
-$color-warning: #ff9;
+$color-warning: #ffff99;
 $color-failed: #ff4e46;
 $color-result-failed: #ff9e9b;
 $color-incomplete: #af1e11;
 $color-result: #3c3c3c;
-$color-result-missing: #ddd;
-$color-result-testing: #9df;
+$color-result-missing: #dddddd;
+$color-result-testing: #99ddff;
 $color-module-softfailed: #ffd048;
 $color-module-passed: #59df24;
-$color-module-none: #aaa;
-$color-module-skipped: #aaa;
+$color-module-none: #aaaaaa;
+$color-module-skipped: #aaaaaa;
 $color-resborder-ok: $color-module-passed;
 $color-resborder-fail: $color-failed;
 $color-resborder-unk: $color-module-none;
@@ -54,14 +85,17 @@ $color-state-scheduled: #67a2b7;
 $color-state-blocked: #9167b7;
 $color-state-cancelled: $color-module-none;
 $color-state-running: #8bdfff;
-$color-step-actions: #666;
+$color-step-actions: #666666;
+
+// Dark mode legacy
 $default-font-color-dark: #ccc;
 $default-bg-color-dark: #000;
 $link-color-dark: #7fbbf7;
-$link-hover-color-dark: darken($link-color, 15%) !default;
 $color-result-dark: #c3c3c3;
 $table-border-color-dark: darken($color-result-dark, 50%);
-$btn-default-color-dark: #fff;
+
+// Buttons dark legacy
+$btn-default-color-dark: #ffffff;
 $btn-default-bg-dark: #010101;
 $btn-primary-bg-dark: #007bff;
 $btn-secondary-bg-dark: #6c757d;

From db2f79e6cd145a8824503ab913ce300523ed349b Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:07:33 +0100
Subject: [PATCH 02/10] feat: modernize global layout and component styles

Update overall.scss to leverage Bootstrap 5 CSS variables for cards, tabs,
and headings. This improves dark mode consistency and introduces a more
contemporary look with subtle shadows and improved spacing.

Includes a fix for body margin to prevent the footer from overlapping
interactive elements in UI tests.
---
 assets/stylesheets/overall.scss | 249 ++++++++++++++------------------
 1 file changed, 107 insertions(+), 142 deletions(-)

diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index 66ca48bae92..bd2b2d254d3 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -24,36 +24,27 @@ body {
 // don't underline links except on focus/hover
 a {
   text-decoration: none;
+  transition: color 0.2s ease-in-out;
 }
-a:focus, a:hover {
+a:focus,
+a:hover {
   text-decoration: underline;
 }
-
 // don't underline links at all on certain places
-.nav-link {
-  &:focus, &:hover {
-    text-decoration: none;
-  }
-}
-.dropdown-item {
-  &:focus, &:hover {
-    text-decoration: none;
-  }
-}
-.page-link {
-  &:focus, &:hover {
-    text-decoration: none;
-  }
-}
+.nav-link,
+.dropdown-item,
+.page-link,
 .btn {
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
     text-decoration: none;
   }
 }
+
 @include media-breakpoint-up(md) {
   #content {
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
   }
 }
 
@@ -61,7 +52,8 @@ a:focus, a:hover {
 .btn i[class*="fa-"] + span {
   padding-left: 8px;
 }
-.btn-group-sm .btn.help_popover, .btn-sm.help_popover {
+.btn-group-sm .btn.help_popover,
+.btn-sm.help_popover {
   padding-top: 6px;
 }
 
@@ -70,8 +62,8 @@ a:focus, a:hover {
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding-bottom: 10px;
-  background-color: #f5f5f5;
+  padding: 0.5rem 0;
+  background-color: var(--bs-tertiary-bg);
 }
 [data-bs-theme='dark'] .footer {
   background-color: $default-bg-color-dark;
@@ -80,9 +72,11 @@ a:focus, a:hover {
   &.left {
     float: left;
   }
+
   &.right {
     float: right;
   }
+
   a {
     display: inline;
     margin-left: 15px;
@@ -91,15 +85,12 @@ a:focus, a:hover {
 }
 body {
   // add some space between last elements and footer
-  margin-bottom: 45px;
+  margin-bottom: 5rem;
 }
 
 // paragraphs, links, misc
 p {
-  margin: 0 0 1em;
-}
-a {
-  @include transition(all 0.2s);
+  margin-bottom: 1rem;
 }
 [data-bs-theme='dark'] a:not(.btn) {
   color: $link-color-dark;
@@ -110,130 +101,123 @@ a {
 }
 
 // headings
-h1, .h1, h2, .h2 {
-  margin-top: 18px;
-  margin-bottom: 9px;
+h1,
+.h1,
+h2,
+.h2 {
+  margin-top: 1.25rem;
+  margin-bottom: 0.75rem;
 }
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   font-family: inherit;
-  font-weight: 400;
-  line-height: 1.1;
+  font-weight: 500;
+  line-height: 1.2;
   color: #444;
 }
 [data-bs-theme='dark'] {
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
     color: #bbb;
   }
 }
 
 // cards (former panels)
 .card {
-  margin-bottom: 15px;
+  margin-bottom: 1rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 [data-bs-theme='dark'] .card {
   background-color: $default-bg-color-dark;
   border: $table-border-color-dark solid 0.5px;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
 }
-
-// colorful card headers (Bootstrap 4 only has colorful borders or fully colored cards)
-.card.border-danger {
-  border-color: #eed3d7;
-  .card-header {
-    color: #b94a48;
-    background-color: #f2dede;
-  }
-}
-[data-bs-theme='dark'] {
-  .card.border-danger .card-header {
-    color: #cf4644;
-    background-color: #450202;
-  }
-}
-.card.border-success {
-  border-color: #d6e9c6;
-  .card-header {
-    color: #468847;
-    background-color: #dff0d8;
-  }
-}
-[data-bs-theme='dark'] {
-  .card.border-success .card-header {
-    color: #74f476;
-    background-color: #144500;
-  }
-}
-.card.border-warning {
-  border-color: #fbeed5;
-  .card-header {
-    color: #c09853;
-    background-color: #fcf8e3;
-  }
+// colorful card headers
+.card.border-danger .card-header {
+  color: var(--bs-danger-text-emphasis);
+  background-color: var(--bs-danger-bg-subtle);
 }
-[data-bs-theme='dark'] {
-  .card.border-warning .card-header {
-    color: #fdca71;
-    background-color: #1d1800;
-  }
+.card.border-success .card-header {
+  color: var(--bs-success-text-emphasis);
+  background-color: var(--bs-success-bg-subtle);
 }
-.card.border-info {
-  border-color: #bce8f1;
-  .card-header {
-    color: #3a87ad;
-    background-color: #d9edf7;
-  }
+.card.border-warning .card-header {
+  color: var(--bs-warning-text-emphasis);
+  background-color: var(--bs-warning-bg-subtle);
 }
-[data-bs-theme='dark'] {
-  .card.border-info .card-header {
-    color: #64cafd;
-    background-color: #000;
-  }
+.card.border-info .card-header {
+  color: var(--bs-info-text-emphasis);
+  background-color: var(--bs-info-bg-subtle);
 }
 
 // big welcome box ("jumbtron")
 .jumbotron {
-  padding-top: 30px;
-  padding-bottom: 30px;
-  margin-bottom: 30px;
-  color: inherit;
-  background-color: #f9f9f9;
+  padding: 3rem 1rem;
+  margin-bottom: 2rem;
+  background-color: var(--bs-tertiary-bg);
+  border-radius: 0.5rem;
 }
 [data-bs-theme='dark'] .jumbotron {
-  background-color: #111;
-}
-.jumbotron p {
-  margin-bottom: 15px;
-  font-size: 20px;
-  font-weight: 200;
+  background-color: #111111;
 }
 
 // tabs
 .tab-content {
-  padding-top: 15px;
+  padding-top: 1rem;
 }
 .nav-tabs .nav-link {
   border: none;
+  border-bottom: 2px solid transparent;
   color: $default-font-color;
-  &:hover, &:focus, &.active {
-    border: none;
-    box-shadow: inset 0 -2px 0 #446e9b;
-    color: #446e9b;
+
+  &:hover,
+  &:focus {
+    border-bottom-color: var(--bs-secondary-border-subtle);
+  }
+
+  &.active {
+    border-bottom-color: $link-color;
+    color: $link-color;
+    background: transparent;
   }
 }
 [data-bs-theme='dark'] {
   .nav-tabs .nav-link {
     color: $default-font-color-dark;
-    &:hover, &:focus, &.active {
-      box-shadow: inset 0 -2px 0 #6caef5;
-      color: #6caef5;
-      background-color: $default-bg-color-dark;
+
+    &.active {
+      border-bottom-color: $link-color-dark;
+      color: $link-color-dark;
     }
   }
 }
 
 // popover
 .help_popover {
-  margin: 0 5px;
-  &:focus, &:hover {
+  margin: 0 0.3rem;
+  &:focus,
+  &:hover {
     outline: none;
     text-decoration: none;
   }
@@ -247,16 +231,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 // tooltips
 .tooltip .tooltip-inner {
-  max-width: 400px;
+  max-width: 25rem;
+  text-align: left;
   p {
-    margin-bottom: 2px;
+    margin-bottom: 0.125rem;
   }
   ul {
-    padding-left: 1.2rem;
-  }
-  p, ul {
-    text-align: left;
-    word-break: break-word;
+    padding-left: 1.25rem;
   }
 }
 
@@ -267,51 +248,35 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 // Icon for copying job ID
 .copy-jobid {
-  margin-right: 5px;
+  margin-right: 0.3rem;
 }
+
 [data-bs-theme='dark'] {
   .table {
     color: $default-font-color-dark;
     background-color: $default-bg-color-dark;
   }
-
-  // All tests pagination
-  .page-link, .page-item.disabled .page-link {
+  .page-link,
+  .page-item.disabled .page-link {
     background-color: $default-bg-color-dark;
     color: $default-font-color-dark;
-    border: rgba(255, 255, 255, 30 / 100) solid 0.5px;
+    border: rgba(255, 255, 255, 0.3) solid 0.5px;
   }
-
-  // All tests search field
-  .chosen-container .chosen-drop, .chosen-container .chosen-results li, .chosen-container ul.chosen-choices {
+  .chosen-container .chosen-drop,
+  .chosen-container .chosen-results li,
+  .chosen-container ul.chosen-choices {
     background-color: $default-bg-color-dark;
     background-image: none;
     color: $default-font-color-dark;
   }
-
-  // All tests table rows
   .table td {
-    border-top-color: rgba(255, 255, 255, 3 / 100);
-  }
-  .modal.show {
-    background-color: lighten($default-bg-color-dark, 25%);
+    border-top-color: rgba(255, 255, 255, 0.03);
   }
   .modal-content {
     background-color: $default-bg-color-dark;
   }
-  .modal-header, .modal-footer {
-    border-top: none;
-    border-bottom: none;
-  }
-  .container-fluid .btn-light:hover, .container-fluid .btn-light:active:hover {
-    background-color: #101010;
-    color: #cbc5bf;
-  }
-  .container-fluid .btn-light:active {
-    background-color: #101010;
-    background-image: radial-gradient(circle, lighten(#101010, 25%) 10%, #363636 11%);
-  }
-  input, textarea {
+  input,
+  textarea {
     background-color: $default-bg-color-dark;
     color: $default-font-color-dark;
     border: $table-border-color-dark solid 0.5px;

From 598f6f309034fb4084fc350a6d5dacc2b7a6e8d8 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:07:36 +0100
Subject: [PATCH 03/10] feat: overhaul navbar and navigation menus for modern
 look

Refresh the navigation bar and dropdown menus using modern BS5 patterns.
Introduces border-radius for links and improved dropdown shadows.

Retains specific vertical padding at larger breakpoints to maintain
compatibility with Selenium tests that expect exact element positioning.
---
 assets/stylesheets/navigation.scss | 104 ++++++++++++++++-------------
 1 file changed, 59 insertions(+), 45 deletions(-)

diff --git a/assets/stylesheets/navigation.scss b/assets/stylesheets/navigation.scss
index 75566c6bc4c..dd1b1191eb7 100644
--- a/assets/stylesheets/navigation.scss
+++ b/assets/stylesheets/navigation.scss
@@ -1,76 +1,90 @@
 // navbar and dropdown menus
 .navbar {
-  border: none;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 30 / 100);
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-bottom: 30px;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  margin-bottom: 2rem;
+  background-color: var(--bs-body-bg);
+
   &-brand {
-    height: 64px;
-    margin: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
     & > img {
-      height: 100%;
-      padding: 8px;
-      padding-top: 0;
+      height: 2.5rem;
       width: auto;
     }
   }
-  .dropdown-menu {
-    margin-top: 0;
-  }
+
   .nav-search-item {
     margin: auto;
-    margin-right: 0.5em;
+    margin-right: 0.5rem;
   }
 }
+
 [data-bs-theme='dark'] .navbar {
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 30 / 100);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
 }
+
 .navbar-nav {
+  .nav-link {
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover,
+    &:focus {
+      background-color: var(--bs-tertiary-bg);
+    }
+
+    &.active {
+      font-weight: 500;
+      color: var(--bs-primary) !important;
+    }
+  }
+
   @include media-breakpoint-up(lg) {
     .nav-link {
-      // hack to let the navbar items take all vertical space like in Bootstrap 3
       padding-top: 22px;
       padding-bottom: 23px;
     }
-    .nav-link:hover, .nav-link:focus {
-      color: #16181b;
-      text-decoration: none;
-      background-color: $default-bg-color;
-    }
   }
 }
+
 [data-bs-theme='dark'] .navbar-light .navbar-nav {
   @include media-breakpoint-up(lg) {
-    a.nav-link {
-      color: $default-font-color-dark;
-    }
-    .nav-link:hover, .nav-link:focus {
-      color: $default-font-color-dark;
+    a.nav-link:hover,
+    .nav-link:focus {
       background-color: lighten($default-bg-color-dark, 25%);
     }
   }
 }
+
 .dropdown-menu {
-  font-size: inherit;
-  margin-top: 0;
-  border: none;
-  border-radius: 0;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 50 / 100);
-}
-[data-bs-theme='dark'] {
-  .dropdown-menu, .candidates-selection .dropdown-menu {
-    background-color: $default-bg-color-dark;
-    color: $default-font-color-dark;
-    a, h3, td, tr {
-      color: $default-font-color-dark;
-      background-color: $default-bg-color-dark;
-    }
-    a:hover, a:focus, h3:hover, h3:focus {
-      color: $default-font-color-dark;
-      background-color: lighten($default-bg-color-dark, 25%);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--bs-border-color-translucent);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+
+  .dropdown-item {
+    border-radius: 0.375rem;
+    padding: 0.375rem 1rem;
+
+    &:hover,
+    &:focus {
+      background-color: var(--bs-tertiary-bg);
     }
   }
+
+  .dropdown-header {
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    padding: 0.5rem 1rem;
+  }
+}
+
+[data-bs-theme='dark'] .dropdown-menu {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
 }

From 2592d8d0fd7fa08a712a20316a948aba4981a765 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:07:39 +0100
Subject: [PATCH 04/10] feat: modernize main dashboard layout

Replace legacy Bootstrap classes (.jumbotron, .hidden-sm-down) with
modern utility equivalents. The .jumbotron class is preserved as a
secondary class to maintain compatibility with existing JavaScript and
UI tests.
---
 templates/webapi/main/index.html.ep | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/webapi/main/index.html.ep b/templates/webapi/main/index.html.ep
index ed16322ed6f..961fd437bcd 100644
--- a/templates/webapi/main/index.html.ep
+++ b/templates/webapi/main/index.html.ep
@@ -7,13 +7,13 @@
     setupIndexPage();
 % end
 
-<div class="jumbotron">
-  <div class='container'>
+<div class="jumbotron p-5 mb-4 bg-body-tertiary rounded-3">
+  <div class="container-fluid py-5">
     <div class="row">
       <div class="col-md-9">
         %= include_branding 'docbox'
       </div>
-      <div class="col-md-3 hidden-sm-down">
+      <div class="col-md-3 d-none d-md-block">
         %= include_branding 'sponsorbox'
       </div>
     </div>
@@ -28,7 +28,7 @@
 <div id="build-results" data-build-results-url="<%= url_for('dashboard_build_results') %>">
 </div>
 
-<div class="card card-outline-secondary filter-panel-bottom" id="filter-panel">
+<div class="card border-secondary filter-panel-bottom" id="filter-panel">
     <div class="card-header"><strong>Filter and settings</strong> <span>no filter present, click to toggle filter form</span></div>
     <div class="card-body">
         <form action="#" method="get" id="filter-form">

From f877256067f623bba550fd387092dff41da77dde Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:07:42 +0100
Subject: [PATCH 05/10] refactor: remove legacy card classes from live view

Replace .card-outline-secondary with BS5 native .border-secondary in the
live view template.
---
 templates/webapi/test/live.html.ep | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/webapi/test/live.html.ep b/templates/webapi/test/live.html.ep
index 655d16ee110..dc038f0667f 100644
--- a/templates/webapi/test/live.html.ep
+++ b/templates/webapi/test/live.html.ep
@@ -1,4 +1,4 @@
-<div class="card card-outline-secondary
+<div class="card border-secondary
      filter-panel-bottom"
      id="developer-panel"
      data-developer-url="<%= $ws_developer_url %>"

From f6cdddda79a0e0f707a3e796c0af126fa32c3356 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:23:26 +0100
Subject: [PATCH 06/10] fix: improve navbar contrast and Job Groups visibility
 in dark mode

- Remove deprecated .navbar-light from navbar template to allow BS5
  color modes.
- Define explicit navbar CSS variables for dark mode in overall.scss.
- Ensure nav-links stay bright and visible when selected or hovered in
  dark mode.
- Improve general link and primary color contrast for dark mode.
---
 assets/stylesheets/navigation.scss      | 28 +++++++++++++++++--------
 assets/stylesheets/overall.scss         | 10 +++++++++
 templates/webapi/layouts/navbar.html.ep |  2 +-
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/assets/stylesheets/navigation.scss b/assets/stylesheets/navigation.scss
index dd1b1191eb7..680c1d4091b 100644
--- a/assets/stylesheets/navigation.scss
+++ b/assets/stylesheets/navigation.scss
@@ -24,6 +24,25 @@
 
 [data-bs-theme='dark'] .navbar {
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
+
+  .nav-link {
+    color: var(--bs-navbar-color);
+    &:hover,
+    &:focus,
+    &.show,
+    &.active {
+      color: var(--bs-navbar-active-color) !important;
+    }
+  }
+
+  .navbar-nav {
+    @include media-breakpoint-up(lg) {
+      .nav-link:hover,
+      .nav-link:focus {
+        background-color: var(--bs-tertiary-bg);
+      }
+    }
+  }
 }
 
 .navbar-nav {
@@ -51,15 +70,6 @@
   }
 }
 
-[data-bs-theme='dark'] .navbar-light .navbar-nav {
-  @include media-breakpoint-up(lg) {
-    a.nav-link:hover,
-    .nav-link:focus {
-      background-color: lighten($default-bg-color-dark, 25%);
-    }
-  }
-}
-
 .dropdown-menu {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   border: 1px solid var(--bs-border-color-translucent);
diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index bd2b2d254d3..99a9708164c 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -252,6 +252,16 @@ h6,
 }
 
 [data-bs-theme='dark'] {
+  --bs-primary: #7fbbf7;
+  --bs-primary-rgb: 127, 187, 247;
+  --bs-link-color: #7fbbf7;
+  --bs-link-hover-color: #a5d0f9;
+
+  --bs-navbar-color: var(--bs-body-color);
+  --bs-navbar-hover-color: var(--bs-primary);
+  --bs-navbar-active-color: var(--bs-primary);
+  --bs-navbar-brand-color: var(--bs-emphasis-color);
+
   .table {
     color: $default-font-color-dark;
     background-color: $default-bg-color-dark;
diff --git a/templates/webapi/layouts/navbar.html.ep b/templates/webapi/layouts/navbar.html.ep
index a6daf12e230..b8ef2052826 100644
--- a/templates/webapi/layouts/navbar.html.ep
+++ b/templates/webapi/layouts/navbar.html.ep
@@ -1,5 +1,5 @@
 % my $current_user = current_user;
-<nav class="navbar navbar-expand-lg navbar-light">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
      <a class="navbar-brand" href="/"><img src="<%= icon_url 'logo.svg'%>" alt="openQA"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

From b85c199bc0e8d1bcf91a2fb21ee309fc842c94a9 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:36:56 +0100
Subject: [PATCH 07/10] refactor: refine modern design maintainability and
 typography

- Restore lightweight heading weights (font-weight: 400) to match
  original UI.
- Centralize dark mode primary color and font weight in
  openqa_theme.scss.
- Eliminate hardcoded hex values and use SCSS functions for RGB
  variables.
- Convert remaining px spacing to rem for better accessibility and
  scaling.
- Clean up navigation SCSS by removing specificity overrides and using
  global variables.
---
 assets/stylesheets/navigation.scss   | 16 +++-------------
 assets/stylesheets/openqa_theme.scss |  4 +++-
 assets/stylesheets/overall.scss      | 16 ++++++++--------
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/assets/stylesheets/navigation.scss b/assets/stylesheets/navigation.scss
index 680c1d4091b..71e14ef6325 100644
--- a/assets/stylesheets/navigation.scss
+++ b/assets/stylesheets/navigation.scss
@@ -25,16 +25,6 @@
 [data-bs-theme='dark'] .navbar {
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
 
-  .nav-link {
-    color: var(--bs-navbar-color);
-    &:hover,
-    &:focus,
-    &.show,
-    &.active {
-      color: var(--bs-navbar-active-color) !important;
-    }
-  }
-
   .navbar-nav {
     @include media-breakpoint-up(lg) {
       .nav-link:hover,
@@ -58,14 +48,14 @@
 
     &.active {
       font-weight: 500;
-      color: var(--bs-primary) !important;
+      color: var(--bs-primary);
     }
   }
 
   @include media-breakpoint-up(lg) {
     .nav-link {
-      padding-top: 22px;
-      padding-bottom: 23px;
+      padding-top: 1.375rem;
+      padding-bottom: 1.4375rem;
     }
   }
 }
diff --git a/assets/stylesheets/openqa_theme.scss b/assets/stylesheets/openqa_theme.scss
index fa08d89d4b9..76173d9684f 100644
--- a/assets/stylesheets/openqa_theme.scss
+++ b/assets/stylesheets/openqa_theme.scss
@@ -21,6 +21,7 @@ $font-size-base: 0.85rem;
 
 // Colors
 $primary: #446e9b;
+$primary-dark: #7fbbf7 !default;
 $secondary: #6c757d;
 $success: #28a745;
 $info: #17a2b8;
@@ -41,6 +42,7 @@ $link-hover-color: darken($link-color, 15%) !default;
 $table-border-color: #dee2e6;
 
 // Headings and font sizes
+$headings-font-weight: 400 !default;
 $h2-font-size: 1.65rem;
 $h3-font-size: 1.25rem;
 $h4-font-size: 1.15rem;
@@ -90,7 +92,7 @@ $color-step-actions: #666666;
 // Dark mode legacy
 $default-font-color-dark: #ccc;
 $default-bg-color-dark: #000;
-$link-color-dark: #7fbbf7;
+$link-color-dark: $primary-dark;
 $color-result-dark: #c3c3c3;
 $table-border-color-dark: darken($color-result-dark, 50%);
 
diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index 99a9708164c..d991851ae93 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -49,12 +49,12 @@ a:hover {
 }
 
 // buttons
-.btn i[class*="fa-"] + span {
-  padding-left: 8px;
+.btn i[class*='fa-'] + span {
+  padding-left: 0.5rem;
 }
 .btn-group-sm .btn.help_popover,
 .btn-sm.help_popover {
-  padding-top: 6px;
+  padding-top: 0.375rem;
 }
 
 // footer
@@ -122,7 +122,7 @@ h6,
 .h5,
 .h6 {
   font-family: inherit;
-  font-weight: 500;
+  font-weight: $headings-font-weight;
   line-height: 1.2;
   color: #444;
 }
@@ -252,10 +252,10 @@ h6,
 }
 
 [data-bs-theme='dark'] {
-  --bs-primary: #7fbbf7;
-  --bs-primary-rgb: 127, 187, 247;
-  --bs-link-color: #7fbbf7;
-  --bs-link-hover-color: #a5d0f9;
+  --bs-primary: #{$primary-dark};
+  --bs-primary-rgb: #{red($primary-dark)}, #{green($primary-dark)}, #{blue($primary-dark)};
+  --bs-link-color: #{$primary-dark};
+  --bs-link-hover-color: #{lighten($primary-dark, 10%)};
 
   --bs-navbar-color: var(--bs-body-color);
   --bs-navbar-hover-color: var(--bs-primary);

From 560676d1a7f29f85ad596f7ba5d0bf1b55bed0fc Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Tue, 3 Mar 2026 22:39:02 +0100
Subject: [PATCH 08/10] feat: reduce jumbotron size for a more compact welcome
 area

Refine the main dashboard welcome area by reducing redundant nested padding
(from ~96px to ~30px). This restores the balance of the original design
while maintaining the modern Bootstrap 5 aesthetic.
---
 assets/stylesheets/overall.scss     | 2 +-
 templates/webapi/main/index.html.ep | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index d991851ae93..39e001be848 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -173,7 +173,7 @@ h6,
 
 // big welcome box ("jumbtron")
 .jumbotron {
-  padding: 3rem 1rem;
+  padding: 1.5rem 1rem;
   margin-bottom: 2rem;
   background-color: var(--bs-tertiary-bg);
   border-radius: 0.5rem;
diff --git a/templates/webapi/main/index.html.ep b/templates/webapi/main/index.html.ep
index 961fd437bcd..ef599f0cefd 100644
--- a/templates/webapi/main/index.html.ep
+++ b/templates/webapi/main/index.html.ep
@@ -7,8 +7,8 @@
     setupIndexPage();
 % end
 
-<div class="jumbotron p-5 mb-4 bg-body-tertiary rounded-3">
-  <div class="container-fluid py-5">
+<div class="jumbotron p-4 mb-4 bg-body-tertiary rounded-3">
+  <div class="container-fluid">
     <div class="row">
       <div class="col-md-9">
         %= include_branding 'docbox'

From fd10b37c97df0f3f215641c927cc9b50d3a2967d Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Wed, 4 Mar 2026 17:34:17 +0100
Subject: [PATCH 09/10] style: address PR review feedback on overall.scss

- Prevent prettier from formatting multi-selector heading rules across
  multiple lines to maintain compactness as requested in PR review.
- Revert tooltip styling changes as they are unneeded and not shown in
  screenshots.
---
 assets/stylesheets/overall.scss | 46 ++++++++++-----------------------
 1 file changed, 14 insertions(+), 32 deletions(-)

diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index 39e001be848..0b1f762bd0a 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -101,44 +101,22 @@ p {
 }
 
 // headings
-h1,
-.h1,
-h2,
-.h2 {
+// prettier-ignore
+h1, .h1, h2, .h2 {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
+// prettier-ignore
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: inherit;
   font-weight: $headings-font-weight;
   line-height: 1.2;
   color: #444;
 }
 [data-bs-theme='dark'] {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
+  // prettier-ignore
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     color: #bbb;
   }
 }
@@ -231,13 +209,17 @@ h6,
 
 // tooltips
 .tooltip .tooltip-inner {
-  max-width: 25rem;
-  text-align: left;
+  max-width: 400px;
   p {
-    margin-bottom: 0.125rem;
+    margin-bottom: 2px;
+  }
+  ul {
+    padding-left: 1.2rem;
   }
+  p,
   ul {
-    padding-left: 1.25rem;
+    text-align: left;
+    word-break: break-word;
   }
 }
 

From df7523023372f6fe026b82d137e7a9764ad04d56 Mon Sep 17 00:00:00 2001
From: Oliver Kurz <okurz@suse.de>
Date: Wed, 4 Mar 2026 17:42:42 +0100
Subject: [PATCH 10/10] style: auto-format all .scss files with Prettier

- Remove single-line heading exclusions from overall.scss.
- Update npm scripts to include Prettier auto-formatting and linting for
  .scss files during 'make tidy-js'.
- Apply Prettier formatting across all .scss files in assets/stylesheets
  to enforce a consistent codebase style.
---
 assets/stylesheets/ace.css                |  4 +-
 assets/stylesheets/admin-pages.scss       | 37 ++++++++++-----
 assets/stylesheets/back_to_top.css        | 20 ++++----
 assets/stylesheets/comments.scss          | 17 +++++--
 assets/stylesheets/dashboard.scss         | 10 ++--
 assets/stylesheets/dependency_graph.scss  | 13 ++++--
 assets/stylesheets/disable_animations.css |  6 +--
 assets/stylesheets/forms.scss             | 16 +++++--
 assets/stylesheets/navigation.scss        | 22 ++-------
 assets/stylesheets/openqa_theme.scss      | 19 ++++----
 assets/stylesheets/overall.scss           | 56 +++++++++++++---------
 assets/stylesheets/overview.scss          | 25 +++++++---
 assets/stylesheets/result_preview.scss    |  6 ++-
 assets/stylesheets/tables.scss            | 27 ++++++++---
 assets/stylesheets/test-details.scss      | 57 ++++++++++++++++-------
 assets/stylesheets/ws_console.scss        |  3 +-
 package.json                              |  4 +-
 17 files changed, 213 insertions(+), 129 deletions(-)

diff --git a/assets/stylesheets/ace.css b/assets/stylesheets/ace.css
index 18b53f1760d..42cd7846591 100644
--- a/assets/stylesheets/ace.css
+++ b/assets/stylesheets/ace.css
@@ -1,6 +1,6 @@
 .ace_editor {
-position: relative;
+  position: relative;
   height: 100%;
   box-sizing: border-box;
   margin-bottom: 10px;
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/admin-pages.scss b/assets/stylesheets/admin-pages.scss
index ff0259a2a91..094c561b3a9 100644
--- a/assets/stylesheets/admin-pages.scss
+++ b/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;
   }
 }
diff --git a/assets/stylesheets/back_to_top.css b/assets/stylesheets/back_to_top.css
index 6f462ac2239..9f54a52fd22 100644
--- a/assets/stylesheets/back_to_top.css
+++ b/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;
 }
diff --git a/assets/stylesheets/comments.scss b/assets/stylesheets/comments.scss
index 2e39b633de7..54ca2f8d35c 100644
--- a/assets/stylesheets/comments.scss
+++ b/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,7 +34,10 @@
       }
     }
   }
-  .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;
@@ -41,7 +45,8 @@
     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;
diff --git a/assets/stylesheets/dashboard.scss b/assets/stylesheets/dashboard.scss
index 5f25a392e62..9ac1546b847 100644
--- a/assets/stylesheets/dashboard.scss
+++ b/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;
diff --git a/assets/stylesheets/dependency_graph.scss b/assets/stylesheets/dependency_graph.scss
index 59201700496..fc6fc1fdcd4 100644
--- a/assets/stylesheets/dependency_graph.scss
+++ b/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;
       }
     }
diff --git a/assets/stylesheets/disable_animations.css b/assets/stylesheets/disable_animations.css
index 9bd465296eb..21f2f545745 100644
--- a/assets/stylesheets/disable_animations.css
+++ b/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;
 }
diff --git a/assets/stylesheets/forms.scss b/assets/stylesheets/forms.scss
index a7b172a50ee..3d157b7ce24 100644
--- a/assets/stylesheets/forms.scss
+++ b/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;
     }
   }
diff --git a/assets/stylesheets/navigation.scss b/assets/stylesheets/navigation.scss
index 71e14ef6325..6d9e8103f25 100644
--- a/assets/stylesheets/navigation.scss
+++ b/assets/stylesheets/navigation.scss
@@ -1,30 +1,25 @@
 // navbar and dropdown menus
 .navbar {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 7.5%);
   margin-bottom: 2rem;
   background-color: var(--bs-body-bg);
-
   &-brand {
     display: flex;
     align-items: center;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-
     & > img {
       height: 2.5rem;
       width: auto;
     }
   }
-
   .nav-search-item {
     margin: auto;
     margin-right: 0.5rem;
   }
 }
-
 [data-bs-theme='dark'] .navbar {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
-
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 50%);
   .navbar-nav {
     @include media-breakpoint-up(lg) {
       .nav-link:hover,
@@ -34,24 +29,20 @@
     }
   }
 }
-
 .navbar-nav {
   .nav-link {
     padding: 0.5rem 1rem;
     border-radius: 0.375rem;
     transition: background-color 0.15s ease-in-out;
-
     &:hover,
     &:focus {
       background-color: var(--bs-tertiary-bg);
     }
-
     &.active {
       font-weight: 500;
       color: var(--bs-primary);
     }
   }
-
   @include media-breakpoint-up(lg) {
     .nav-link {
       padding-top: 1.375rem;
@@ -59,23 +50,19 @@
     }
   }
 }
-
 .dropdown-menu {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 15%);
   border: 1px solid var(--bs-border-color-translucent);
   border-radius: 0.5rem;
   padding: 0.5rem;
-
   .dropdown-item {
     border-radius: 0.375rem;
     padding: 0.375rem 1rem;
-
     &:hover,
     &:focus {
       background-color: var(--bs-tertiary-bg);
     }
   }
-
   .dropdown-header {
     font-weight: 600;
     font-size: 0.75rem;
@@ -84,7 +71,6 @@
     padding: 0.5rem 1rem;
   }
 }
-
 [data-bs-theme='dark'] .dropdown-menu {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 50%);
 }
diff --git a/assets/stylesheets/openqa_theme.scss b/assets/stylesheets/openqa_theme.scss
index 76173d9684f..c215a776fcc 100644
--- a/assets/stylesheets/openqa_theme.scss
+++ b/assets/stylesheets/openqa_theme.scss
@@ -15,7 +15,7 @@ $font-family-sans-serif:
   -apple-system,
   'Segoe UI',
   'Helvetica Neue',
-  Arial,
+  arial,
   sans-serif;
 $font-size-base: 0.85rem;
 
@@ -29,7 +29,6 @@ $warning: #ffc107;
 $danger: #dc3545;
 $light: #f8f9fa;
 $dark: #343a40;
-
 $body-color: #444;
 $body-bg: #fff;
 
@@ -50,7 +49,7 @@ $progress-font-size: 0.78rem;
 
 // Buttons legacy
 $btn-border-radius-base: 0.25rem;
-$btn-default-color: #000000;
+$btn-default-color: #000;
 $btn-default-bg: #fefefe;
 $btn-primary-bg: #007bff;
 $btn-secondary-bg: #6c757d;
@@ -64,17 +63,17 @@ $btn-dark-bg: #343a40;
 // openQA specific colors
 $color-softfailed: #eeb560;
 $color-ok: #cdffb9;
-$color-warning: #ffff99;
+$color-warning: #ff9;
 $color-failed: #ff4e46;
 $color-result-failed: #ff9e9b;
 $color-incomplete: #af1e11;
 $color-result: #3c3c3c;
-$color-result-missing: #dddddd;
-$color-result-testing: #99ddff;
+$color-result-missing: #ddd;
+$color-result-testing: #9df;
 $color-module-softfailed: #ffd048;
 $color-module-passed: #59df24;
-$color-module-none: #aaaaaa;
-$color-module-skipped: #aaaaaa;
+$color-module-none: #aaa;
+$color-module-skipped: #aaa;
 $color-resborder-ok: $color-module-passed;
 $color-resborder-fail: $color-failed;
 $color-resborder-unk: $color-module-none;
@@ -87,7 +86,7 @@ $color-state-scheduled: #67a2b7;
 $color-state-blocked: #9167b7;
 $color-state-cancelled: $color-module-none;
 $color-state-running: #8bdfff;
-$color-step-actions: #666666;
+$color-step-actions: #666;
 
 // Dark mode legacy
 $default-font-color-dark: #ccc;
@@ -97,7 +96,7 @@ $color-result-dark: #c3c3c3;
 $table-border-color-dark: darken($color-result-dark, 50%);
 
 // Buttons dark legacy
-$btn-default-color-dark: #ffffff;
+$btn-default-color-dark: #fff;
 $btn-default-bg-dark: #010101;
 $btn-primary-bg-dark: #007bff;
 $btn-secondary-bg-dark: #6c757d;
diff --git a/assets/stylesheets/overall.scss b/assets/stylesheets/overall.scss
index 0b1f762bd0a..d4109531863 100644
--- a/assets/stylesheets/overall.scss
+++ b/assets/stylesheets/overall.scss
@@ -30,6 +30,7 @@ a:focus,
 a:hover {
   text-decoration: underline;
 }
+
 // don't underline links at all on certain places
 .nav-link,
 .dropdown-item,
@@ -40,7 +41,6 @@ a:hover {
     text-decoration: none;
   }
 }
-
 @include media-breakpoint-up(md) {
   #content {
     padding-left: 2.5rem;
@@ -72,11 +72,9 @@ a:hover {
   &.left {
     float: left;
   }
-
   &.right {
     float: right;
   }
-
   a {
     display: inline;
     margin-left: 15px;
@@ -101,22 +99,43 @@ p {
 }
 
 // headings
-// prettier-ignore
-h1, .h1, h2, .h2 {
+h1,
+.h1,
+h2,
+.h2 {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
 }
-
-// prettier-ignore
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   font-family: inherit;
   font-weight: $headings-font-weight;
   line-height: 1.2;
   color: #444;
 }
 [data-bs-theme='dark'] {
-  // prettier-ignore
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
     color: #bbb;
   }
 }
@@ -124,13 +143,14 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 // cards (former panels)
 .card {
   margin-bottom: 1rem;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 7.5%);
 }
 [data-bs-theme='dark'] .card {
   background-color: $default-bg-color-dark;
   border: $table-border-color-dark solid 0.5px;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 50%);
 }
+
 // colorful card headers
 .card.border-danger .card-header {
   color: var(--bs-danger-text-emphasis);
@@ -157,7 +177,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border-radius: 0.5rem;
 }
 [data-bs-theme='dark'] .jumbotron {
-  background-color: #111111;
+  background-color: #111;
 }
 
 // tabs
@@ -168,12 +188,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border: none;
   border-bottom: 2px solid transparent;
   color: $default-font-color;
-
   &:hover,
   &:focus {
     border-bottom-color: var(--bs-secondary-border-subtle);
   }
-
   &.active {
     border-bottom-color: $link-color;
     color: $link-color;
@@ -183,7 +201,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 [data-bs-theme='dark'] {
   .nav-tabs .nav-link {
     color: $default-font-color-dark;
-
     &.active {
       border-bottom-color: $link-color-dark;
       color: $link-color-dark;
@@ -232,18 +249,15 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .copy-jobid {
   margin-right: 0.3rem;
 }
-
 [data-bs-theme='dark'] {
   --bs-primary: #{$primary-dark};
   --bs-primary-rgb: #{red($primary-dark)}, #{green($primary-dark)}, #{blue($primary-dark)};
   --bs-link-color: #{$primary-dark};
   --bs-link-hover-color: #{lighten($primary-dark, 10%)};
-
   --bs-navbar-color: var(--bs-body-color);
   --bs-navbar-hover-color: var(--bs-primary);
   --bs-navbar-active-color: var(--bs-primary);
   --bs-navbar-brand-color: var(--bs-emphasis-color);
-
   .table {
     color: $default-font-color-dark;
     background-color: $default-bg-color-dark;
@@ -252,7 +266,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   .page-item.disabled .page-link {
     background-color: $default-bg-color-dark;
     color: $default-font-color-dark;
-    border: rgba(255, 255, 255, 0.3) solid 0.5px;
+    border: rgba(255, 255, 255, 30%) solid 0.5px;
   }
   .chosen-container .chosen-drop,
   .chosen-container .chosen-results li,
@@ -262,7 +276,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     color: $default-font-color-dark;
   }
   .table td {
-    border-top-color: rgba(255, 255, 255, 0.03);
+    border-top-color: rgba(255, 255, 255, 3%);
   }
   .modal-content {
     background-color: $default-bg-color-dark;
diff --git a/assets/stylesheets/overview.scss b/assets/stylesheets/overview.scss
index beb5587097e..2f4a137bc3a 100644
--- a/assets/stylesheets/overview.scss
+++ b/assets/stylesheets/overview.scss
@@ -6,7 +6,8 @@
       content: '•';
     }
   }
-  a[class*='fa-'], span > a {
+  a[class*='fa-'],
+  span > a {
     text-decoration: none;
   }
   .toggle-parallel-children {
@@ -14,7 +15,8 @@
     padding: 6px;
   }
 }
-.collapse-all-button, .expand-all-button {
+.collapse-all-button,
+.expand-all-button {
   float: right;
   text-decoration: none !important;
   border-radius: 5rem;
@@ -40,8 +42,12 @@
     font-size: 90%;
   }
 }
-#filter-panel, #developer-panel, #live-log-panel, #live-terminal-panel {
-  #developer-status span, .card-header-appendix span {
+#filter-panel,
+#developer-panel,
+#live-log-panel,
+#live-terminal-panel {
+  #developer-status span,
+  .card-header-appendix span {
     color: #555;
     float: right;
     font-weight: 500;
@@ -55,7 +61,8 @@
   .card-header {
     cursor: pointer;
   }
-  .card-body, .developer-mode-element {
+  .card-body,
+  .developer-mode-element {
     display: none;
   }
   #filter-form {
@@ -69,11 +76,15 @@
   }
 }
 [data-bs-theme='dark'] {
-  #filter-panel, #developer-panel, #live-log-panel, #live-terminal-panel {
+  #filter-panel,
+  #developer-panel,
+  #live-log-panel,
+  #live-terminal-panel {
     .card-header span {
       color: rgb(214, 214, 214);
     }
-    .card-body, .developer-mode-element {
+    .card-body,
+    .developer-mode-element {
       color: $default-font-color-dark;
       background-color: $default-bg-color-dark;
     }
diff --git a/assets/stylesheets/result_preview.scss b/assets/stylesheets/result_preview.scss
index dfd48b6437b..65eeb8d0fd2 100644
--- a/assets/stylesheets/result_preview.scss
+++ b/assets/stylesheets/result_preview.scss
@@ -150,7 +150,8 @@
           td {
             border: none !important;
             padding: 5pt;
-            &:nth-child(1), &:nth-child(3) {
+            &:nth-child(1),
+            &:nth-child(3) {
               text-align: right;
               white-space: nowrap;
             }
@@ -179,7 +180,8 @@
 }
 [data-bs-theme='dark'] {
   .candidates-selection {
-    #candidatesMenu, #candidatesMenu.dropdown-toggle {
+    #candidatesMenu,
+    #candidatesMenu.dropdown-toggle {
       box-shadow: 0 0 0 1px rgba(231, 229, 227, 15 / 100) inset;
       background-color: $default-bg-color-dark;
       color: $default-font-color-dark;
diff --git a/assets/stylesheets/tables.scss b/assets/stylesheets/tables.scss
index 4ef25ee3c5e..2ec529f691b 100644
--- a/assets/stylesheets/tables.scss
+++ b/assets/stylesheets/tables.scss
@@ -4,10 +4,16 @@
   border-spacing: 0;
   border-radius: 0.2rem;
   border: 1px solid $table-border-color;
-  thead, tbody, tfoot, tr, th, td {
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  th,
+  td {
     border-style: none;
   }
-  th, td {
+  th,
+  td {
     vertical-align: middle;
   }
   td {
@@ -20,7 +26,8 @@
   }
 }
 [data-bs-theme='dark'] {
-  .table, .table td {
+  .table,
+  .table td {
     border-color: $table-border-color-dark;
   }
   .table thead tr:first-child th {
@@ -32,7 +39,9 @@
   background-color: rgba(0, 0, 0, 3 / 100);
 }
 .table-hover {
-  > tbody > tr, > tbody > tr > th, > tbody > tr > td {
+  > tbody > tr,
+  > tbody > tr > th,
+  > tbody > tr > td {
     @include transition(all 0.2s);
   }
 }
@@ -49,7 +58,9 @@
 .infotbl img {
   padding-right: 3px;
 }
-.noborder, .noborder tr, .noborder td {
+.noborder,
+.noborder tr,
+.noborder td {
   border: none;
 }
 .table tbody tr {
@@ -88,7 +99,8 @@ table.admintable {
   .key-value-pair .key {
     font-weight: bold;
   }
-  input[type='text'], textarea {
+  input[type='text'],
+  textarea {
     width: 100%;
     box-sizing: border-box;
   }
@@ -140,7 +152,8 @@ table.fixedheader {
   }
 }
 [data-bs-theme='dark'] {
-  th, table.fixedheader th {
+  th,
+  table.fixedheader th {
     background: $default-bg-color-dark;
   }
 }
diff --git a/assets/stylesheets/test-details.scss b/assets/stylesheets/test-details.scss
index c8755af0125..03c37e93158 100644
--- a/assets/stylesheets/test-details.scss
+++ b/assets/stylesheets/test-details.scss
@@ -86,7 +86,8 @@
   min-width: 820px;
   width: calc(73% + (23% - 280px));
 }
-#liveterminal, #livelog {
+#liveterminal,
+#livelog {
   padding: 0;
   margin: 0;
   border: none;
@@ -139,10 +140,12 @@ div.flags {
 .state_blocked[class*='fa-'] {
   color: $color-state-blocked;
 }
-.state_obsolete[class*='fa-'], .state_cancelled[class*='fa-'] {
+.state_obsolete[class*='fa-'],
+.state_cancelled[class*='fa-'] {
   color: $color-state-cancelled;
 }
-.state_running[class*='fa-'], .state_uploading[class*='fa-'] {
+.state_running[class*='fa-'],
+.state_uploading[class*='fa-'] {
   color: $color-state-running;
 }
 [class*='fa-'].module_failed {
@@ -160,7 +163,8 @@ div.flags {
 [class*='fa-'].module_skipped {
   color: $color-module-skipped;
 }
-[class*='fa-'].result_failed, [class*='fa-'].result_fail {
+[class*='fa-'].result_failed,
+[class*='fa-'].result_fail {
   color: $color-failed;
 }
 [class*='fa-'].result_incomplete {
@@ -181,13 +185,15 @@ div.flags {
 [class*='fa-'].result_parallel_restarted {
   color: $color-module-none;
 }
-[class*='fa-'].result_passed, [class*='fa-'].result_ok {
+[class*='fa-'].result_passed,
+[class*='fa-'].result_ok {
   color: $color-module-passed !important;
 }
 [class*='fa-'].result_skipped {
   color: $color-module-none;
 }
-[class*='fa-'].result_softfailed, [class*='fa-'].result_softfail {
+[class*='fa-'].result_softfailed,
+[class*='fa-'].result_softfail {
   color: $color-softfailed;
 }
 [class*='fa-'].result_unknown {
@@ -199,7 +205,11 @@ div.flags {
 [class*='fa-'].result_user_restarted {
   color: $color-module-none;
 }
-[class*='fa-'].comment, [class*='fa-'].bookmark, [class*='fa-'].bug, [class*='fa-'].certificate, [class*='fa-'].tag {
+[class*='fa-'].comment,
+[class*='fa-'].bookmark,
+[class*='fa-'].bug,
+[class*='fa-'].certificate,
+[class*='fa-'].tag {
   color: $color-labels;
 }
 .label_bug[class*='fa-bolt'] {
@@ -240,7 +250,8 @@ div.flags {
   text-align: left;
 }
 html:not([data-bs-theme='dark']) {
-  #settings_box, #investigation_status_entry {
+  #settings_box,
+  #investigation_status_entry {
     padding-top: 9px;
   }
 }
@@ -258,7 +269,8 @@ span.thumbnail {
   display: inline-block;
   margin: 6px;
 }
-.ui-oo-content-wrapper .ui-oo-box-shadow > * > .thumbnail:first-child, .content-wrapper .box > * > .thumbnail:first-child {
+.ui-oo-content-wrapper .ui-oo-box-shadow > * > .thumbnail:first-child,
+.content-wrapper .box > * > .thumbnail:first-child {
   margin-top: 6px;
 }
 span.thumbnail.current {
@@ -274,10 +286,12 @@ span.thumbnail.current {
 .resborder_fail {
   border-color: $color-resborder-fail;
 }
-.resborder_unk, .resborder_missing {
+.resborder_unk,
+.resborder_missing {
   border-color: $color-resborder-unk;
 }
-.resborder_softfailed, .resborder_softfail {
+.resborder_softfailed,
+.resborder_softfail {
   border-color: $color-softfailed;
 }
 [data-bs-theme='dark'] {
@@ -287,10 +301,12 @@ span.thumbnail.current {
   .resborder_fail {
     border-color: darken($color-resborder-fail, 15%);
   }
-  .resborder_unk, .resborder_missing {
+  .resborder_unk,
+  .resborder_missing {
     border-color: darken($color-resborder-unk, 15%);
   }
-  .resborder_softfailed, .resborder_softfail {
+  .resborder_softfailed,
+  .resborder_softfail {
     border-color: darken($color-softfailed, 15%);
   }
 }
@@ -314,7 +330,8 @@ span.resborder {
     background-repeat: no-repeat;
     background-position: center center;
   }
-  [class*='fa-question'], .step_actions {
+  .fa-question,
+  .step_actions {
     padding: 5px;
   }
   .step_actions {
@@ -341,7 +358,8 @@ span.resborder_na {
     height: auto;
   }
 }
-.text-result, .serial-result-preview {
+.text-result,
+.serial-result-preview {
   .resborder {
     font-family: monospace;
     text-align: left;
@@ -360,7 +378,8 @@ span.resborder_na {
   }
 }
 [data-bs-theme='dark'] {
-  .text-result, .serial-result-preview {
+  .text-result,
+  .serial-result-preview {
     .resborder {
       background-color: $default-bg-color-dark;
       color: lighten($link-color-dark, 25%);
@@ -553,11 +572,13 @@ ul.modcategory {
   }
   .card#info_box {
     background-color: $default-bg-color-dark;
-    .btn-secondary, .btn-secondary:hover {
+    .btn-secondary,
+    .btn-secondary:hover {
       color: $default-font-color-dark;
       background-color: lighten($default-bg-color-dark, 25%);
     }
-    .btn-warning, .btn-warning:hover {
+    .btn-warning,
+    .btn-warning:hover {
       color: $default-bg-color-dark;
     }
   }
diff --git a/assets/stylesheets/ws_console.scss b/assets/stylesheets/ws_console.scss
index 09378bd8e0e..8d221f8d86a 100644
--- a/assets/stylesheets/ws_console.scss
+++ b/assets/stylesheets/ws_console.scss
@@ -1,4 +1,5 @@
-#msg, #log {
+#msg,
+#log {
   width: 100%;
   font-family: monospace;
 }
diff --git a/package.json b/package.json
index 7f7b03cfa30..bc0c0b92d2b 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "Testing Framework",
   "scripts": {
-    "lint": "eslint \"assets/javascripts/**/*.js\" && stylelint \"assets/stylesheets/**/*.{scss,css}\"",
-    "fix": "eslint --fix \"assets/javascripts/**/*.js\" && stylelint --fix \"assets/stylesheets/**/*.{scss,css}\""
+    "lint": "eslint \"assets/javascripts/**/*.js\" && stylelint \"assets/stylesheets/**/*.{scss,css}\" && prettier --check \"assets/stylesheets/**/*.scss\"",
+    "fix": "eslint --fix \"assets/javascripts/**/*.js\" && stylelint --fix \"assets/stylesheets/**/*.{scss,css}\" && prettier --write \"assets/stylesheets/**/*.{scss,css}\""
   },
   "license": "GPL-2.0",
   "bugs": {