feat: Switched to .less style sheets.

src/Chrono/ClientApp/package.json

@@ -30,6 +30,7 @@
     "eslint": "^8.48.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "less": "^4.2.0",
     "prettier": "3.0.3",
     "react-router-dom": "^6.14.2",
     "typescript": "^5.2.2",

src/Chrono/ClientApp/src/App.tsx

@@ -1,4 +1,3 @@
-import "./App.css";
 import AppRoutes from "./AppRoutes";
 import "semantic-ui-css/semantic.min.css";
 import {BrowserRouter, Route, Routes} from "react-router-dom";

src/Chrono/ClientApp/src/Features/HomePage/HomePage.less

@@ -0,0 +1,17 @@
+div.chrono-container {
+  margin-top: 7em;
+
+  > div.headline {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 0.5em;
+
+    span.version-number {
+      color: #222222;
+      font-size: 0.6em;
+      font-weight: bold;
+      z-index: 0;
+    }
+  }
+}

src/Chrono/ClientApp/src/Features/HomePage/HomePage.tsx

@@ -1,4 +1,4 @@
-import "./HomePage.css"
+import "./HomePage.less"
 import {Container, Image} from "semantic-ui-react";
 
 const HomePage = () => {

src/Chrono/ClientApp/src/Features/Notes/NotePage.less

@@ -0,0 +1,16 @@
+div.note-container {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1.5em;
+
+  > div.ui.cards {
+    justify-content: center;
+  }
+
+  &.mobile > div.note-menu > div.buttons {
+    position: fixed;
+    bottom: 7%;
+    right: 5%;
+    z-index: 2;
+  }
+}

src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx

@@ -1,4 +1,4 @@
-import "./NotePage.css";
+import "./NotePage.less";
 import {useEffect, useState} from "react";
 import {Button, Card, Container, Icon} from "semantic-ui-react";
 import {useMediaQuery} from "react-responsive";

src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.less

@@ -0,0 +1,105 @@
+div.tasklist {
+  > div.tasklist-menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.tasklist-items {
+    > div.tasklist-item {
+      /* Overwrite Semantic UI media queries */
+      width: 100% !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
+
+      > div.content {
+        width: 100% !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+
+        div {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+
+        > div.header {
+          width: 100% !important;
+          justify-content: space-between;
+          display: flex;
+          margin-left: 0 !important;
+
+          > div.headline {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+
+            > a.task-name {
+              margin-left: 0.15em;
+              vertical-align: middle;
+              overflow-wrap: anywhere;
+            }
+          }
+
+          > div.actions {
+            min-width: 115px;
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+          }
+        }
+
+        > div.description {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+
+          ul, li {
+            white-space: normal;
+            margin-bottom: 0.25em;
+          }
+
+          > * {
+            white-space: pre-line;
+            overflow-wrap: anywhere;
+          }
+        }
+
+        > div.extra {
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+
+  // Mobile view
+  &.mobile {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+    div.tasklist-menu {
+      flex-direction: column;
+      align-items: flex-end;
+
+      > div.filters {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        > div.dropdown {
+          width: 49.6%;
+          margin: 0 !important;
+        }
+      }
+
+      > div.buttons {
+        position: fixed;
+        bottom: 7%;
+        right: 5%;
+        z-index: 2;
+      }
+    }
+  }
+}

src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.tsx

@@ -1,4 +1,4 @@
-import "./TaskListEditControl.css";
+import "./TaskListEditControl.less";
 import TaskItemViewControl from "./TaskItemViewControl";
 import {useEffect, useState} from "react";
 import {useMediaQuery} from "react-responsive";
@@ -172,7 +172,8 @@ const TaskListEditControl = (props: { taskListId: number }) => {
           </Button>
         </div>
       </Container>
-      {taskListItems.length > 0 && <Container className="ui divided items list">{taskListItems}</Container>}
+      {taskListItems.length > 0 &&
+          <Container className="ui divided tasklist-items items list">{taskListItems}</Container>}
       {isLoaded && !taskList &&
           <NoItemsMessage
               text={"Create your first task list in the \"Master Data\" menu."}