Actor sheet, step 1

2025-05-23 00:26:00 +02:00
parent 06ef26f03c
commit ef9c011186
33 changed files with 1052 additions and 1106 deletions
--- a/styles/character.less
+++ b/styles/character.less
@@ -57,17 +57,6 @@
          flex: none;
        }
      }
-      /*.character-dmax-edit {
-        input {
-          display: flex;
-          width: 60px;
-          font-size: calc(var(--font-size-standard) * 1.4);
-          align-items: center;
-          justify-content: center;
-          padding: 0 5px 0 5px;
-          text-align: center;
-        }
-      }*/
    }

    .character-right {
@@ -75,17 +64,19 @@
      flex-direction: column;
      gap: 5px;

-      .character-spec {
-        label {
-          max-width: 6rem;
+      .character-definition {
+        .form-group {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
        }
-        .hero-armor {
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-          gap: 4px;
-          input {
-            max-width: 3rem;
-          } 
+        label {
+          max-width: 4rem;
+        }
+        input {
+          min-width: 16rem;
+          max-width: 16rem;
+          margin-bottom: auto;
        }
      }
      .character-name {
@@ -110,17 +101,17 @@
    min-width: 500px;
  }

-  .character-skills {
+  .character-stats {
    background-color: var(--color-light-1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;

-    .character-skill {
+    .character-stat {
      display: flex;
      align-items: center;
-      .icon-skill {
+      .icon-stat {
        width: 24px;
        height: 24px;
        margin-right: 4px;
@@ -131,98 +122,26 @@
        cursor: pointer;
      }
      .rollable {
-        min-width: 4.5rem;
-        max-width: 4.5rem;
+        min-width: 3.5rem;
+        max-width: 3.5rem;
      }
-      .char-text {
-        margin-left: 0.5rem;
-      }
-      .d100 {
-        flex: 0;
-        max-width: 0.6rem;
-      }
-      .form-group {
-        flex: 0;
-        padding-left: 5px;
-        .form-fields {
-          font-size: 1.1rem;
-          flex: none;
-          width: 40px;
-        }
+      input {
+        min-width: 2.5rem;
+        max-width: 2.5rem;
      }
    }
  }

-  .character-skill-play {
-    min-width: 225px;
+  .character-stats-play {
+    min-width:120px;
  }

-  .character-skill-edit {
-    min-width: 225px;
+  .character-stats-edit {
+    min-width: 120px;
  }
 }

-.character-biography {
-  background-color: var(--color-light-1);
-  prose-mirror.inactive {
-    min-height: 40px;
-  }
-  prose-mirror.active {
-    min-height: 150px;
-  }
-  .field-label {
-    margin-left: 8px;
-  }
-
-  .rank {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 8px;
-    label {
-      min-width: 6rem;
-    }
-    input {
-      max-width: 4rem;
-    }
-  }
-
-  .biodata {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-    label {
-      min-width: 12rem;
-    }
-  }
-
-  .resources {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    label {
-      min-width: 8rem;
-    }
-  }
-
-  .features,
-  .biodata {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-    label {
-      min-width: 3rem;
-    }
-    .feature {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 18rem;
-      max-width: 18rem;
-    }
-  }
-}
-
-.tab.character-skills {
+.tab.character-status .main-div {
  background-color: var(--color-light-1);
  display: grid;
  grid-template-columns: 1fr;
@@ -232,11 +151,44 @@
      padding-left: 5px;
    }
  }
-  .skills {
+  .counters {
+    display: flex;
+    direction: column;
+    align-items: center;
+    gap: 4px;
+    margin-left: 4px;
+    input {
+      min-width: 2.5rem;
+      max-width: 2.5rem;
+    }
+  }
+  .ailments {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 4px;
+    .ailment {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 4px;
+      min-width: 8rem;
+      max-width: 8rem;
+      label {
+        min-width: 5rem;
+        max-width: 5rem;
+      }
+      .item-img {
+        width: 24px;
+        height: 24px;
+        margin: 4px 0 0 0;
+      }
+    }
+  }
+  .perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
-    .skill {
+    .perk {
      display: flex;
      align-items: center;
      gap: 4px;
@@ -270,7 +222,7 @@
  }
 }

-.tab.character-status {
+.tab.character-maleficas .main-div {
  background-color: var(--color-light-1);
  display: grid;
  grid-template-columns: 1fr;
@@ -281,11 +233,11 @@
    }
  }

-  .bonds {
+  .maleficas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
-    .bond {
+    .malefica {
      display: flex;
      align-items: center;
      gap: 4px;
@@ -316,11 +268,11 @@
    }
  }

-  .motivations {
+  .rituals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
-    .motivation {
+    .ritual {
      display: flex;
      align-items: center;
      gap: 4px;
@@ -343,66 +295,10 @@
    }
  }

-  .mentaldisorders {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .mentaldisorder {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 18rem;
-      max-width: 18rem;
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .name {
-        min-width: 14rem;
-        max-width: 14rem;
-      }
-      .cured {
-        min-width: 5rem;
-        max-width: 5rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-
-  .injuries {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .injury {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 16rem;
-      max-width: 16rem;
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .name {
-        min-width: 14rem;
-        max-width: 14rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
 }

-.tab.character-talents {
+
+.tab.character-equipment .main-div {
  background-color: var(--color-light-1);
  display: grid;
  grid-template-columns: 1fr;
@@ -413,176 +309,6 @@
    }
  }

-  .talents {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .talent {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 13rem;
-      max-width: 13rem;
-      .rollable:hover,
-      .rollable:focus {
-        text-shadow: 0 0 8px var(--color-shadow-primary);
-        cursor: pointer;
-      }
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .damage {
-        min-width: 6rem;
-        max-width: 6rem;
-      }
-      .name {
-        min-width: 10rem;
-        max-width: 10rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-
-  .languages {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .language {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 13rem;
-      max-width: 13rem;
-      .rollable:hover,
-      .rollable:focus {
-        text-shadow: 0 0 8px var(--color-shadow-primary);
-        cursor: pointer;
-      }
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .damage {
-        min-width: 6rem;
-        max-width: 6rem;
-      }
-      .name {
-        min-width: 10rem;
-        max-width: 10rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-
-  .psionics {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .psionic {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 13rem;
-      max-width: 13rem;
-      .rollable:hover,
-      .rollable:focus {
-        text-shadow: 0 0 8px var(--color-shadow-primary);
-        cursor: pointer;
-      }
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .damage {
-        min-width: 6rem;
-        max-width: 6rem;
-      }
-      .name {
-        min-width: 10rem;
-        max-width: 10rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-
-}
-
-.tab.character-equipment {
-  background-color: var(--color-light-1);
-  display: grid;
-  grid-template-columns: 1fr;
-  legend {
-    a {
-      font-size: calc(var(--font-size-standard) * 1.4);
-      padding-left: 5px;
-    }
-  }
-  .encumbrance {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 4px;
-    input {
-      max-width: 4rem;
-    }
-    .encumbered {
-      color: red;
-      font-weight: bold;
-    }
-  }
-
-  .implants {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 4px;
-    .implant {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      min-width: 13rem;
-      max-width: 13rem;
-      .rollable:hover,
-      .rollable:focus {
-        text-shadow: 0 0 8px var(--color-shadow-primary);
-        cursor: pointer;
-      }
-      .controls {
-        font-size: 0.7rem;
-        min-width: 1.8rem;
-        max-width: 1.8rem;
-      }
-      .damage {
-        min-width: 6rem;
-        max-width: 6rem;
-      }
-      .name {
-        min-width: 10rem;
-        max-width: 10rem;
-      }
-      .item-img {
-        width: 24px;
-        height: 24px;
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-
-  
  .weapons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
@@ -618,7 +344,7 @@
      }
    }
  }
-  
+
  .armors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
@@ -689,3 +415,22 @@
    min-height: 150px;
  }
 }
+
+.tab.character-biography .main-div {
+  background-color: var(--color-light-1);
+  display: grid;
+  grid-template-columns: 1fr;
+  legend {
+    a {
+      font-size: calc(var(--font-size-standard) * 1.4);
+      padding-left: 5px;
+    }
+  }
+
+  prose-mirror.inactive {
+    min-height: 40px;
+  }
+  prose-mirror.active {
+    min-height: 150px;
+  }
+}
--- a/styles/deal.less
+++ b/styles/deal.less
@@ -0,0 +1,39 @@
+.deal-content {
+  .sheet-common();
+  .item-sheet-common();
+
+  fieldset {
+    margin-top: 8px;
+    background-color: var(--color-light-1);
+    .form-group {
+      display: flex;
+      align-items: center;
+    }
+    .form-group.long-input input {
+      min-width: 24rem;
+      max-width: 24rem;
+      text-align: left;
+    }
+    .form-group input {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
+    .form-group select {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
+  }
+
+  .header {
+    background-color: var(--color-light-1);
+    display: flex;
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  label {
+    flex: 10%;
+  }
+}
--- a/styles/fvtt-hellborn.less
+++ b/styles/fvtt-hellborn.less
@@ -9,6 +9,8 @@
  @import "weapon.less";
  @import "equipment.less";
  @import "armor.less";
+  @import "deal.less";
+  @import "tarot.less";
  @import "ritual.less";
  @import "perk.less";
  @import "malefica.less";
--- a/styles/global.less
+++ b/styles/global.less
@@ -2,7 +2,7 @@
  --font-size-standard: 0.9rem;
  --font-size-result: 1.4rem;
  --background-image-base: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
-                url("../assets/ui/ftl_nomad_background_01.webp");
+                url("../assets/ui/sheet_background_01.webp");
  --font-primary: "MinionProRegular";
  --font-secondary: "MinionProRegular";
  --font-title: "SupernaturalKnight";
@@ -16,16 +16,6 @@
  --color-critical-failure: rgb(141, 32, 231);
 }

-.d100 {
-  width: 18px;
-  height: 18px;
-  color: black;
-  border-width: 0px;
-}
-
-.item .thumbnail,
-.item-img {
-}

 #logo {
  content: var(--logo-standard);
@@ -34,15 +24,19 @@
  margin-left: 15px;
 }

+nav.tabs [data-tab] {
+  color: var(--title-color);
+}
+
 #pause > img {
  content: var(--logo-standard);
-  height: 192px;
+  height: 256px;
  width: 256px;
  top: -45px;
  left: calc(50% - 96px);
 }

-i.fvtt-ftl-nomad {
+i.fvtt-hellborn {
  width: 36px;
  height: 36px;
  background-image: var(--logo-standard);
@@ -55,7 +49,7 @@ i.fvtt-ftl-nomad {
  transition: 0.3s;
 }

-.application.dialog.fvtt-ftl-nomad {
+.application.dialog.fvtt-hellborn {
  font-family: var(--font-primary);
  font-size: calc(var(--font-size-standard) * 1.0);
  background-image: var(--background-image-base);
--- a/styles/ritual.less
+++ b/styles/ritual.less
@@ -9,8 +9,6 @@
      display: flex;
      align-items: center;
    }
-    .form-group label {
-    }
    .form-group.long-input input {
      min-width: 24rem;
      max-width: 24rem;
--- a/styles/species-trait.less
+++ b/styles/species-trait.less
@@ -5,6 +5,23 @@
  fieldset {
    margin-top: 8px;
    background-color: var(--color-light-1);
+    .form-group {
+      display: flex;
+      align-items: center;
+    }
+    .form-group.long-input input {
+      min-width: 24rem;
+      max-width: 24rem;
+      text-align: left;
+    }
+    .form-group input {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
+    .form-group select {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
  }

  .header {
--- a/styles/tarot.less
+++ b/styles/tarot.less
@@ -0,0 +1,39 @@
+.tarot-content {
+  .sheet-common();
+  .item-sheet-common();
+
+  fieldset {
+    margin-top: 8px;
+    background-color: var(--color-light-1);
+    .form-group {
+      display: flex;
+      align-items: center;
+    }
+    .form-group.long-input input {
+      min-width: 24rem;
+      max-width: 24rem;
+      text-align: left;
+    }
+    .form-group input {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
+    .form-group select {
+      min-width: 12rem;
+      max-width: 12rem;
+    }
+  }
+
+  .header {
+    background-color: var(--color-light-1);
+    display: flex;
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  label {
+    flex: 10%;
+  }
+}