static: convert the login page to plain CSS

Since 2023 CSS Nesting is baseline supported. [1] Initially it required
one to write `.foo { & .bar { } }` but that restriction has been lifted
for class / id selectors since 2025. To keep maximum compatibility with
older browsers use the & everywhere. Note that for type and pseudo class
selectors an & is always required otherwise it would result into
`.parent-rule *:hover` instead of `.parent-rule:hover`. [2]

The main motivation to move the login page to plain CSS is an idea to
let Anaconda bring their own login.css and not requiring a SASS
compilation step makes that much easier. Secondly for theming it is
easier to reason with a plain CSS file.

[1] https://caniuse.com/css-nesting
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector

Author: jelly

pkg/static/login.scss pkg/static/login.csspkg/static/login.scss renamed to pkg/static/login.css

@@ -455,32 +455,32 @@ label.checkbox {
   background-color: var(--color-background);
   border-radius: var(--pf-t--global--border--radius--medium);
 
-  .pf-v6-c-alert__icon {
+  & .pf-v6-c-alert__icon {
     grid-column: icon;
   }
 
-  .pf-v6-c-alert__title,
-  .pf-v6-c-alert__description {
+  & .pf-v6-c-alert__title,
+  & .pf-v6-c-alert__description {
     grid-column: content;
   }
 
-  .pf-v6-c-alert__icon {
+  & .pf-v6-c-alert__icon {
     /* vertically align the icon's top edge with the text; https://blog.kizu.dev/cap-height-align/ */
     margin-block-start: calc((1cap - 1ex) / 2);
 
-    svg {
+    & svg {
       display: block;
       block-size: var(--pf-t--global--icon--size--lg);
       inline-size: var(--pf-t--global--icon--size--lg);
       color: var(--alert-border-color);
     }
   }
 
-  .pf-v6-c-alert__title {
+  & .pf-v6-c-alert__title {
     font-weight: 500;
   }
 
-  p {
+  & p {
     margin: 0;
   }
 
@@ -534,11 +534,11 @@ html body.login-pf {
   inline-size: 100%;
   border-radius: var(--pf-t--global--border--radius--large) var(--pf-t--global--border--radius--large);
 
-  .container-body {
+  & .container-body {
     padding: var(--pf-t--global--spacer--2xl);
   }
 
-  .container-footer {
+  & .container-footer {
     padding-block: var(--pf-t--global--spacer--xl);
     padding-inline: var(--pf-t--global--spacer--2xl);
   }
@@ -670,7 +670,7 @@ html:not(.pf-v6-theme-dark) #login-wait-validating .spinner {
     transform: rotate(90deg);
   }
 
-  path {
+  & path {
     fill: var(--color-text);
   }
 }
@@ -859,19 +859,19 @@ details > summary:hover {
 }
 
 .unsupported-browser {
-  #brand {
+  & #brand {
     display: none;
   }
 
-  ul {
+  & ul {
     display: inline-block;
     text-align: start;
     color: var(--color-text-lighter);
     margin-block: 0 1rem;
     margin-inline: 0;
   }
 
-  a {
+  & a {
     font-weight: 700;
   }
 }
@@ -954,15 +954,15 @@ body.login-pf {
     grid-template-columns: 1fr var(--content-width) auto 1fr;
     column-gap: var(--gap);
 
-    #brand img {
+    & #brand img {
       margin: 0;
       text-align: start;
     }
   }
 
   /* Mobile-specific */
   @media (width < 900px) {
-    #badge {
+    & #badge {
       background-position: center;
       margin: 2rem;
     }

pkg/static/login.js

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: LGPL-2.1-or-later
-import "./login.scss";
+import "./login.css";
 
 function debug(...args) {
     if (window.debugging === 'all' || window.debugging?.includes('login'))