Initial

resources/app/public/less2/themes/fantasy.less

@@ -0,0 +1,51 @@
+body.theme-fantasy {
+
+  /* ---------------------------------------- */
+  /*  Colors                                  */
+  /* ---------------------------------------- */
+
+  --color-warm-1: #ee9b3a;
+  --color-warm-2: #603032;
+  --color-warm-3: #372021;
+
+  --color-cool-3: #251a1c;
+  --color-cool-4: #0c0609;
+  --color-cool-5: #0b090a;
+
+  --color-cool-5-25: rgb(11 9 10 / 25%);
+  --color-cool-5-50: rgb(11 9 10 / 50%);
+  --color-cool-5-75: rgb(11 9 10 / 75%);
+  --color-cool-5-90: rgb(11 9 10 / 90%);
+
+  //--color-light-1 TODO undefined
+  --color-light-2: #ede9de;
+  //--color-light-3 TODO undefined
+  --color-light-4: #c9b793;
+  //--color-light-5 TODO undefined
+  //--color-light-6 TODO undefined
+
+  --color-scrollbar: var(--color-warm-2);
+  --color-scrollbar-border: var(--color-warm-2);
+
+  /* ---------------------------------------- */
+  /*  Forms and Form Elements                 */
+  /* ---------------------------------------- */
+
+  input,
+  select {
+    --input-background-color: var(--color-warm-3);
+  }
+
+  input[type=checkbox] {
+    --checkbox-background-color: var(--color-warm-3);
+  }
+
+  /* ---------------------------------------- */
+  /*  Packages                                */
+  /* ---------------------------------------- */
+
+  #setup-packages header.controls .filter input {
+    --input-background-color: var(--color-cool-3);
+  }
+}
+

resources/app/public/less2/themes/light.less

@@ -0,0 +1,107 @@
+.theme-light {
+  --color-text-selection: var(--color-light-1);
+  --color-text-selection-bg: var(--color-dark-6);
+
+  .application {
+    --background: url("../ui/parchment.jpg") repeat;
+    --color-text-primary: var(--color-dark-1);
+    --color-header-background: var(--color-dark-3);
+    --color-fieldset-border: var(--color-light-2);
+    --color-form-label: var(--color-dark-2);
+    --color-form-label-hover: var(--color-dark-1);
+    --color-form-hint: var(--color-dark-4);
+    --color-form-hint-hover: var(--color-dark-2);
+    --color-select-option-bg: var(--color-light-1);
+  }
+
+  /* ---------------------------------------- */
+  /*  Forms and Form Elements                 */
+  /* ---------------------------------------- */
+
+  input,
+  select {
+    --input-background-color: rgb(0 0 0 / 10%);
+    --input-border-color: var(--color-dark-6);
+    --input-text-color: var(--color-dark-2);
+    --input-placeholder-color: var(--color-dark-3);
+    --input-focus-outline-color: var(--color-warm-2);
+
+    // Focused
+    &:focus {
+      --input-text-color: var(--color-dark-1);
+    }
+
+    // Disabled
+    &:disabled {
+      --input-background-color: rgb(0 0 0 / 20%);
+      --input-border-color: transparent;
+      --input-text-color: var(--color-dark-3);
+    }
+  }
+
+  // Checkboxes
+  input[type=checkbox] {
+    --checkbox-font-weight: unset;
+    --checkbox-background-color: var(--color-dark-6);
+    --checkbox-checked-color: var(--color-warm-1);
+    --checkbox-checkmark-color: var(--color-dark-1);
+
+    &:disabled, &[readonly] {
+      --checkbox-font-weight: bold;
+      --checkbox-disabled-color: var(--color-dark-6);
+      --checkbox-checked-color: var(--color-dark-6);
+      &:checked { --checkbox-disabled-color: transparent; }
+    }
+  }
+
+  label.icon {
+    --input-background-color: rgb(0 0 0 / 10%);
+    --input-border-color: var(--color-dark-6);
+    --input-text-color: var(--color-dark-2);
+    --input-focus-outline-color: var(--color-warm-2);
+
+    &:focus-within {
+      --input-text-color: var(--color-dark-1);
+    }
+
+    &:has(> input:disabled) {
+      --input-background-color: rgb(0 0 0 / 20%);
+      --input-border-color: transparent;
+      --input-text-color: var(--color-dark-3);
+    }
+  }
+
+  // Readonly Text Input
+  input[readonly] {
+    --input-background-color: rgb(0 0 0 / 20%);
+    --input-border-color: transparent;
+    --input-text-color: var(--color-dark-3);
+  }
+
+  // Buttons
+  a.button,
+  button {
+    --button-background-color: rgba(0 0 0 / 10%);
+    --button-border-color: var(--color-dark-5);
+    --button-text-color: var(--color-dark-1);
+    --button-focus-outline-color: var(--color-warm-2);
+    --button-hover-background-color: var(--color-warm-2);
+    --button-hover-text-color: var(--color-light-1);
+
+    // Disabled
+    &:disabled {
+      --button-background-color: rgba(0 0 0 / 20%);
+      --button-border-color: transparent;
+      --button-text-color: var(--color-dark-3);
+    }
+  }
+}
+
+/* ---------------------------------------- */
+/*  Tables                                  */
+/* ---------------------------------------- */
+
+table {
+  --table-background-color: none;
+  thead, tfoot { background: var(--color-cool-5); }
+}

resources/app/public/less2/themes/scifi.less

@@ -0,0 +1,91 @@
+body.theme-scifi {
+
+  /* ---------------------------------------- */
+  /*  Backgrounds                              */
+  /* ---------------------------------------- */
+
+  --background-url: url("../ui/backgrounds/setup-scifi.webp");
+  --main-logo: url("../icons/logo-scifi-blank.png");
+
+  /* ---------------------------------------- */
+  /*  Colors                                  */
+  /* ---------------------------------------- */
+
+  --color-warm-1: #3a9bee;
+  --color-warm-2: #303260;
+  --color-warm-3: #202137;
+
+  --color-cool-3: #202137;
+  --color-cool-4: #15151e;
+  --color-cool-5: #0b090a;
+
+  --color-cool-5-25: rgb(11 9 10 / 25%);
+  --color-cool-5-50: rgb(11 9 10 / 50%);
+  --color-cool-5-75: rgb(11 9 10 / 75%);
+  --color-cool-5-90: rgb(11 9 10 / 90%);
+
+  --color-light-1: #f3f7f7;
+  --color-light-2: #dee9ed;
+  --color-light-3: #c2daea;
+  --color-light-4: #899fad;
+  --color-light-5: #79849b;
+  --color-light-6: #6c7288;
+
+  --color-scrollbar: #303260;
+  --color-scrollbar-border: #3a9bee;
+
+  /* ---------------------------------------- */
+  /*  Typography                              */
+  /* ---------------------------------------- */
+
+  --font-h1: "Bruno Ace SC", serif;
+  --font-h2: "Bruno Ace", serif;
+  --font-h3: "Bruno Ace", serif;
+  --font-h4: "Bruno Ace", serif;
+  --font-h5: "Bruno Ace", serif;
+  --font-h6: "Bruno Ace", serif;
+  --font-h1-size: var(--font-size-64);
+  --font-h3-size: var(--font-size-20);
+  --font-h4-size: var(--font-size-20);
+  --font-h6-size: var(--font-size-18);
+
+  /* ---------------------------------------- */
+  /*  Applications                            */
+  /* ---------------------------------------- */
+
+  .app,
+  .application {
+    --color-border: #303260;
+  }
+
+  /* ---------------------------------------- */
+  /*  Forms and Form Elements                 */
+  /* ---------------------------------------- */
+
+  input, select {
+    --input-background-color: #202137;
+    --input-focus-outline-color: #3a9bee;
+  }
+
+  // Checkboxes Specifically
+  input[type="checkbox"] {
+    --checkbox-checked-color: #3a9bee;
+    --checkbox-background-color: #202137;
+  }
+
+  button.bright {
+    --button-hover-background-color: #42a5fc;
+  }
+}
+
+/* ---------------------------------------- */
+/*  Setup Specifically                      */
+/* ---------------------------------------- */
+
+body.auth.theme-scifi {
+  --header-font-size: var(--font-size-64);
+  .app,
+  .application {
+    --color-border: #3a9bee;
+  }
+}