feat: Version 2

Closes #627, closes #1047

client/src/components/boards/Board/ListView.module.scss

@@ -0,0 +1,76 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .addCardButton {
+    background: rgba(0, 0, 0, 0.24);
+    border: none;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.72);
+    cursor: pointer;
+    display: block;
+    fill: rgba(255, 255, 255, 0.72);
+    font-weight: normal;
+    height: 42px;
+    margin-bottom: 12px;
+    padding: 11px;
+    text-align: left;
+    transition: background 85ms ease-in, opacity 40ms ease-in,
+      border-color 85ms ease-in;
+    width: 100%;
+
+    &:active {
+      outline: none;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.32);
+    }
+  }
+
+  .addCardButtonIcon {
+    height: 20px;
+    padding: 0.64px;
+    width: 20px;
+  }
+
+  .addCardButtonText {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 20px;
+    vertical-align: top;
+  }
+
+  .card {
+    margin-bottom: 6px;
+  }
+
+  .cards {
+    overflow: hidden;
+    padding-bottom: 0 !important; // TODO: hack?
+  }
+
+  .loaderWrapper {
+    margin: 24px 0;
+  }
+
+  .segment {
+    background: rgba(223, 227, 230, 0.8);
+    border-radius: 3px;
+    margin-bottom: 12px;
+    padding: 6px;
+  }
+
+  .wrapper {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0 20px;
+    width: 100%;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.08);
+    }
+  }
+}