Convert SCSS where possible to CSS

PatternFly 6 fully removed CSS from their code base and since CSS these
days is modern enough to support everything we need from SASS.

src/dialogs/create-file.tsx

@@ -34,7 +34,7 @@ import type { Dialogs, DialogResult } from 'dialogs';
 import { useInit } from 'hooks';
 import { superuser } from 'superuser';
 
-import "./editor.scss";
+import "./editor.css";
 import { checkFilename, useFilesContext } from '../common.ts';
 import { get_owner_candidates } from '../ownership.tsx';
 

src/dialogs/editor.scss → src/dialogs/editor.css

@@ -2,7 +2,7 @@
   block-size: 100%;
 
   &.is-modified {
-    // Add a background highlight on the modal itself
+    /* Add a background highlight on the modal itself */
     &::after {
       background: linear-gradient(to bottom, var(--pf-v5-global--warning-color--100), transparent 0.33em);
       content: '';
@@ -11,7 +11,7 @@
       position: absolute;
     }
 
-    // Add a circle to indicate that there are changes
+    /* Add a circle to indicate that there are changes */
     .pf-v5-c-modal-box__title-text::after {
       aspect-ratio: 1;
       background: var(--pf-v5-global--warning-color--100);
@@ -23,7 +23,7 @@
     }
   }
 
-  // Create mode shows textarea as full size
+  /* Create mode shows textarea as full size */
   .pf-v5-c-form.pf-m-horizontal {
     block-size: 100%;
     grid-template-rows: auto 1fr auto;

src/dialogs/editor.tsx

@@ -33,7 +33,7 @@ import { basename } from "cockpit-path";
 import type { Dialogs, DialogResult } from 'dialogs';
 import { fmt_to_fragments } from 'utils';
 
-import "./editor.scss";
+import "./editor.css";
 
 const _ = cockpit.gettext;
 

src/files-card-body.scss → src/files-card-body.css

@@ -22,38 +22,39 @@
         --focus-width: 1px;
         --focus-solidity: solid;
 
-        // We're handling focus state with focus-within below the focus ring at the tr
+        /* We're handling focus state with focus-within below the focus ring at the tr */
         a:focus {
             outline: none;
         }
 
-        // Turn focus ring back on at the tr level for selected and focused items
+        /* Turn focus ring back on at the tr level for selected and focused items */
         &.row-selected,
         &.row-selected:hover,
         &:focus-within {
             outline: var(--focus-width) var(--focus-solidity) var(--pf-v5-global--active-color--300);
         }
 
-        // Hovered items, for both views
+        /* Hovered items, for both views */
         &:hover {
-            // Propogate the hovering via variables to the link and cursor
+            /* Propogate the hovering via variables to the link and cursor */
             --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
             --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-            // Show an interactive cursor
+            /* Show an interactive cursor */
             cursor: pointer;
-            // Standard PF hover color
+            /* Standard PF hover color */
             background-color: var(--pf-v5-global--BackgroundColor--200);
         }
 
-        // When focused, show thicker ring and darker colors for icons
+        /* When focused, show thicker ring and darker colors for icons */
         &:focus-within {
             --focus-width: 2px;
             --color-folder: var(--pf-v5-global--primary-color--200);
             --color-icon: var(--pf-v5-global--Color--300);
         }
 
-        // Selected icons should have light blue selected color
-        // (to distinguish from hovered items)
+        /* Selected icons should have light blue selected color
+         * (to distinguish from hovered items)
+         */
         &.row-selected,
         &.row-selected:hover {
             --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
@@ -66,7 +67,7 @@
     }
 
     .item-name {
-        // Bump up the font size to standard for the filenames
+        /* Bump up the font size to standard for the filenames */
         a {
             font-size: var(--pf-v5-global--FontSize--md);
         }
@@ -91,7 +92,7 @@
 
             &::after {
                 aspect-ratio: 1;
-                // Reuse default icon color
+                /* Reuse default icon color */
                 background-color: var(--color-icon);
                 block-size: var(--symlink-size);
                 content: '';
@@ -167,7 +168,7 @@
     &.view-details .item-name a::before {
         display: inline-block;
         margin-inline-end: var(--pf-v5-global--spacer--sm);
-        // FIXME: Figure out why there's an offset
+        /* FIXME: Figure out why there's an offset */
         transform: translateY(3px);
     }
 
@@ -204,7 +205,7 @@
             text-align: end;
         }
 
-        // Remove the extra padding on the end of the column and button, as the icon has padding already
+        /* Remove the extra padding on the end of the column and button, as the icon has padding already */
         .col-size, .col-date,
         .col-perms, .col-owner {
             &, .pf-v5-c-table__button {
@@ -237,7 +238,7 @@
         tbody {
             align-items: start;
             display: grid;
-            // As we're using justify-content: space-between, this is the minimum gap horizontally;
+            /* As we're using justify-content: space-between, this is the minimum gap horizontally; */
             gap: var(--pf-v5-global--spacer--sm);
             grid-template-columns: repeat(auto-fill, minmax(8rem,1fr));
             justify-content: space-between;
@@ -250,14 +251,14 @@
 
         tr {
             display: block;
-            // Override default PF padding
+            /* Override default PF padding */
             padding: 0;
 
             td {
                 display: block;
                 text-align: center;
                 word-break: break-all;
-                // Override default PF padding
+                /* Override default PF padding */
                 padding: 0;
 
                 a {
@@ -310,8 +311,9 @@
     text-align: start;
 }
 
-// use all available space when there is not enough files to fill the whole view
-// so drag&drop works in empty space
+/* use all available space when there is not enough files to fill the whole view
+ * so drag&drop works in empty space
+ */
 .fileview-wrapper {
     block-size: 100%;
 }

src/files-card-body.tsx

@@ -42,7 +42,7 @@ import { show_create_directory_dialog } from "./dialogs/mkdir.tsx";
 import { show_rename_dialog } from "./dialogs/rename.tsx";
 import { Sort, filterColumnMapping, filterColumns } from "./header.tsx";
 import { get_menu_items, pasteFromClipboard } from "./menu.tsx";
-import "./files-card-body.scss";
+import "./files-card-body.css";
 
 const _ = cockpit.gettext;
 

src/upload-button.scss → src/upload-button.css

@@ -3,7 +3,7 @@ button.progress-wrapper {
   aspect-ratio: 1;
   padding: 0;
 
-  // Make the button look clickable on hover
+  /* Make the button look clickable on hover */
   &:hover {
     outline: 2px solid var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
   }
@@ -18,7 +18,7 @@ button.progress-wrapper {
   aspect-ratio: 1;
   border-radius: 100%;
   block-size: auto;
-  // Set "padding" to xs size (1/2 of sm)
+  /* Set "padding" to xs size (1/2 of sm) */
   inline-size: calc(100% - var(--pf-v5-global--spacer--sm));
   line-height: var(--pf-v5-c-button--LineHeight);
   display: inline-block;
@@ -53,7 +53,7 @@ button.progress-wrapper {
 
 .upload-progress-flex {
   .pf-v5-c-progress {
-    // Align % with label and trashcan
+    /* Align % with label and trashcan */
     align-items: start;
   }
 }
@@ -70,11 +70,11 @@ button.cancel-button {
 }
 
 .upload-popover {
-  // Set the max width to 32rem, but have it work on smaller screen sizes too
+  /* Set the max width to 32rem, but have it work on smaller screen sizes too */
   max-inline-size: min(32rem, 100vw - 8rem);
 
   .pf-v5-c-popover__body {
-    // Set the minimum width to 14rem, but also allow it to work on smaller screen sizes
+    /* Set the minimum width to 14rem, but also allow it to work on smaller screen sizes */
     min-inline-size: min(14rem, 33vw);
   }
 }

src/upload-button.tsx

@@ -43,7 +43,7 @@ import { edit_permissions } from "./dialogs/permissions.tsx";
 import { UploadContext } from "./files-folder-view.tsx";
 import { get_owner_candidates } from "./ownership.tsx";
 
-import "./upload-button.scss";
+import "./upload-button.css";
 
 const _ = cockpit.gettext;