Amélioration fiche d'item

styles/global/colors.less

@@ -0,0 +1,137 @@
+@c-white: #fff;
+@c-black: #000;
+//@c-bright: whitesmoke;
+@c-bright: #E2F1F1;
+@c-lightg: lightgray;
+@c-darkg: #23221d;
+@c-dark: #3c3c3c;
+@c-darkslate: darkslategray;
+@c-darkgreen: #003c1e;
+@c-lightgreen: mintcream;
+@c-darkblue: midnightblue;
+@c-blue: #009ee0;
+@c-green: #44a12b;
+@c-red: #cd071e;
+@c-purple: purple;
+@c-darkred: darkred;
+@c-border:#736953a6;
+//@c-darkbrown: rgba(70, 67, 49, 0.93);
+@c-darkbrown: #464331c4;
+@c-shadow:#00000052;
+@c-linkshadow : gray;
+
+@colorDark: #191813;
+@colorFaint: #c9c7b8;
+@colorBeige: #b5b3a4;
+@colorTan: #7a7971;
+@colorOlive: #4b4a44;
+@colorCrimson: #44191A;
+@lightGreen: #609b60;
+@borderGroove: 1px groove #eeede0;
+@borderGrooveGreen: 2px groove #003700;
+//@borderGrooveOriginal: 2px groove #eeede0;
+
+@colorSuccess : darkgreen;
+@colorCritical : green;
+@colorFailure : darkred;
+@colorFumble : red;
+@colorDamage : orangered;
+@colorRoll : darkslategrey;
+
+@colorGold : #caad27;
+
+/* ----------------------------------------- */
+/*  Premade colors                           */
+/* ----------------------------------------- */
+
+.light {
+  //color:whitesmoke;
+  //color:antiquewhite;
+  color: @c-lightg;
+}
+.bg-light {
+  background: @c-lightg;
+}
+
+.darkgray {
+  color: @c-darkg;
+}
+.bg-darkgray {
+  background: @c-darkg;
+  color: @c-white;
+}
+
+.darkbrown {
+  color: @c-darkbrown;
+}
+
+.bg-darkbrown {
+  background: @c-darkbrown;
+  color: @c-white;
+}
+
+.darkslate {
+  color: @c-darkslate;
+}
+.bg-darkslate {
+  background: @c-darkslate;
+  color: @c-white;
+}
+.darkgreen {
+  color: @c-darkgreen;
+}
+
+.bg-darkgreen {
+  background: @c-darkgreen;
+  color: @c-white;
+}
+
+.darkblue {
+  color: @c-darkblue;
+}
+
+.bg-darkblue {
+  background: @c-darkblue;
+  color: @c-white;
+}
+
+.blue {
+  color: @c-blue;
+}
+
+.bg-blue {
+  background: @c-blue;
+  color: @c-white;
+}
+
+.green {
+  color: @c-green;
+}
+.bg-green {
+  background: @c-green;
+  color: @c-white;
+}
+
+.black {
+  color: @c-black;
+}
+.bg-black {
+  background: @c-black;
+  color: @c-white;
+}
+
+.red {
+  color: @c-red;
+}
+.bg-red {
+  background: @c-red;
+  color: @c-white;
+}
+
+.purple {
+  color: @c-purple;
+}
+.bg-purple {
+  background: @c-purple;
+  color: @c-white;
+}

styles/global/forms.less

@@ -200,4 +200,8 @@
   input::placeholder {
     color: lightgray;
   }
+
+  .property {
+    margin-top: 2px;
+  }
 }

styles/global/item-list.less

@@ -6,7 +6,15 @@
   overflow-y: auto;
 
   .item-header {
-    font-family: @font-handwrite;
+    font-family: @font-primary;
+    font-size: 1em;
+    //font-weight: 500;
+    color: @colorOlive;
+    background-color: lightgray;
+    .item-name {
+      font-family: @font-tertiary;
+      font-size: 1.5em;
+    }
   }
 
   .item {
@@ -19,14 +27,40 @@
 
     .item-image {
       flex: 0 0 30px;
-      margin-right: 5px;
+      padding: 0;
+      margin: 0 5px 0 0;
+      height:30px;
+      width:30px;
+      min-height:30px;
+      min-width:30px;
       img {
+        padding: 0;
         margin: 0;
         border: none;
+        height:30px;
+        width:30px;
+        min-height:30px;
+        min-width:30px;
+      }
+      &.roll-weapon,
+      &.roll-career {
+        background-color: transparent;
+        background-image: url("../../../icons/svg/dice-target.svg") !important;
+        background-size: 30px 30px;
+        background-repeat: no-repeat;
+        background-position: center;
+        cursor: pointer;
+        &:hover {
+          background-color: gray;
+          img {
+            visibility: hidden;
+          }
+        }
       }
     }
 
-    .item-name {
+    .item-name,
+    .item-field {
       margin: 0;
     }
 
@@ -43,19 +77,5 @@
     .item-control {
       color: @colorOlive;
     }
-    //.item-buttons {
-    //  display: flex;
-    //  flex-wrap: wrap;
-    //  flex-direction: row;
-    //  align-items: center;
-    //  flex: 2;
-    //  justify-content: flex-start;
-    //}
-    //.item-button {
-    //  line-height: 1;
-    //  font-size: 11px;
-    //  flex: none;
-    //  width: auto;
-    //}
   }
 }

styles/global/typography.less

@@ -27,6 +27,7 @@
 
 @font-primary: 'Signika', sans-serif;
 @font-secondary: 'Contrail One', cursive;
-@font-tertiary: "Wolfsbane2Expanded", serif;
+@font-tertiary: "Wolfsbane2Expanded", cursive;
+@font-header: "Wolfsbane2", cursive;
 @font-charname: "Wolfsbane2Expanded", cursive;
 @font-handwrite: "CCMeanwhile", cursive;