Avancement messages défense & oeuvres

less/roll-chat.less

@@ -0,0 +1,87 @@
+.chat-message {
+  div.roll-chat {
+    font-family: CaslonAntique;
+    display: grid;
+    grid-template-areas:
+      "img     header  buttons"
+      "img     resume  buttons"
+      "details details details"
+      "actions actions actions";
+    grid-template-columns: 3rem 1fr 1.4rem;
+    grid-template-rows: max-content max-content max-content max-content;
+    gap: 0 0.5rem;
+
+    div.chat-img {
+      grid-area: img;
+      display: flex;
+      flex-direction: column;
+      img {
+        border: 0;
+        max-height: 3rem;
+        max-width: 3rem;
+        object-fit: contain;
+        height: 100%;
+      }
+    }
+    div.chat-header {
+      grid-area: header;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+    div.chat-resume {
+      grid-area: resume;
+      text-align: justify;
+    }
+    div.chat-details {
+      grid-area: details;
+      text-align: justify;
+      display: flex;
+      flex-direction: column;
+    }
+    div.chat-actions {
+      grid-area: actions;
+      display: flex;
+      flex-direction: column;
+      a {
+        display: flex;
+        flex-direction: row;
+        img {
+          margin-right: 0.5rem;
+        }
+      }
+    }
+    
+    div.chat-buttons {
+      grid-area: buttons;
+      display: flex;
+      flex-direction: column;
+
+      a {
+        border-radius: 0.2rem;
+        cursor: pointer;
+        padding: 0.2rem;
+        position: relative;
+        box-shadow: inset 1x 1px #a6827e;
+        color: var(--color-controls);
+        border: 1px ridge #846109;
+        display: inline-block;
+        align-items: center;
+        
+        img {
+          max-width: 1rem;
+          max-height: 1rem;
+        }
+      }
+      
+      a:hover {
+        background: var(--background-custom-button-hover);
+      }
+
+      a:active{
+        position:relative;
+        top:1px;
+      }
+
+    }
+  }
+}