feat(css/scss style): setting the style of the updates window and all…

… system items
SouOWendel · Oct 23, 2023 · d84618f · d84618f
1 parent 40aba86
commit d84618f
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 167 deletions.
diff --git a/css/ordemparanormal_fvtt.css b/css/ordemparanormal_fvtt.css
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
 	"description": "Ordem Paranormal é um sistema e universo de investigação paranormal criado por Cellbit. Com base nisso, este é um sistema não-oficial para o FoundryVTT.",
 	"main": "index.js",
 	"scripts": {
-		"commit": "git-cz"
+		"commit": "git-cz",
+		"sass": "sass --watch scss/ordemparanormal_fvtt.scss css/ordemparanormal_fvtt.css"
 	},
 	"repository": {
 		"type": "git",

diff --git a/scss/components/_dialog.scss b/scss/components/_dialog.scss
@@ -0,0 +1,80 @@
+.teste {
+    background-color: black;
+}
+
+.no-scroll {
+    overflow: hidden !important;
+}
+
+.scroll {
+    overflow: auto !important;
+}
+
+.no-orange-hyperlink {
+    color: initial;
+    text-decoration: none;
+}
+
+.content-dialog {
+    height: 500px;
+    padding: 0 2px;
+    line-height: 1.3;
+
+    li {
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    a {
+        &:hover,
+        &:focus {
+            color: #000;
+            text-shadow: 0 0 10px rgb(255, 255, 255);
+            cursor: pointer;
+        }
+
+        h1, h2, h3, h4 {
+            border: 0;
+            text-decoration: none;
+            font-weight: 700;
+        }
+
+        .discord {
+            color: white;
+            font-family: 'PT Sans', 'Roboto', 'sans-serif';
+
+            p {
+                font-size: medium;
+                font-weight: 700;
+            }
+        }
+    }
+}
+
+.content-dialog::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.13);
+    border: 0;
+}
+
+.adverts {
+    position: relative;
+    width: 100%;
+    height: 156px;
+    margin: 10px 0;
+    border-radius: 5px;
+    display: flex;
+
+    background: {
+        position: center !important;
+        size: 100% 100% !important;
+        repeat: no-repeat !important;
+    }
+
+    p {
+        width: 100%;
+    }
+}
+
+.content-dialog a:first-child .adverts {
+    margin: 0;
+}
diff --git a/scss/components/_forms.scss b/scss/components/_forms.scss
@@ -2,6 +2,28 @@
   font-family: $font-primary;
 }
 
+.header-identify {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h1, h2, h3, h4 {
+    border: 0;
+  }
+
+  h1.charname {
+    height: 50px;
+    padding: 0px;
+    margin: 5px 0;
+    border-bottom: 0;
+    input {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
+}
+
 .sheet-header {
   flex: 0 auto;
   overflow: hidden;
@@ -20,29 +42,17 @@
   .header-fields {
     flex: 1;
   }
-
-  h1.charname {
-    height: 50px;
-    padding: 0px;
-    margin: 5px 0;
-    border-bottom: 0;
-    input {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-  }
 }
 
 .sheet-tabs {
   flex: 0;
 }
 
-.sheet-body,
-.sheet-body .tab,
-.sheet-body .tab .editor {
-  height: 100%;
-}
+// .sheet-body,
+// .sheet-body .tab,
+// .sheet-body .tab .editor {
+//   height: 100%;
+// }
 
 .tox {
   .tox-editor-container {

diff --git a/scss/components/_items.scss b/scss/components/_items.scss
@@ -76,11 +76,13 @@
     .item-name {
       color: $c-dark;
       .item-image {
+        display: flex;
+        align-items: center;
         flex: 0 0 30px;
         height: 30px;
         background-size: 30px;
         border: none;
-        margin-right: 5px;
+        margin-right: 1px;
       }
     }
   }
@@ -114,7 +116,13 @@
 }
 
 /* Example style for Ordem (can be removed if not needed) */
-.item-formula {
-  flex: 0 0 200px;
+.item-space {
+  flex: 1 10px;
   padding: 0 8px;
+}
+
+.item-sheet {
+  display: flex;
+  flex: 1;
+  background-color: aqua;
 }
diff --git a/scss/global/_flex.scss b/scss/global/_flex.scss
@@ -43,4 +43,9 @@
 .align-center {
   justify-content: center;
   text-align: center;
+}
+
+.align-items-center {
+  justify-content: center;
+  align-items: center;
 }
diff --git a/scss/ordemparanormal_fvtt.scss b/scss/ordemparanormal_fvtt.scss
@@ -1,5 +1,5 @@
 // Add custom fonts by visiting and search https://fonts.google.com
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&Roboto:wght@400;700&display=swap');
 
 // Import utilities.
 @import 'utils/typography';
@@ -18,4 +18,5 @@
   @import 'components/resource';
   @import 'components/items';
   @import 'components/effects';
+  @import 'components/dialog';
 }
diff --git a/templates/actor/parts/actor-inventory.html b/templates/actor/parts/actor-inventory.html
@@ -2,7 +2,7 @@
     <ol class="items-list">
       <li class="item flexrow items-header">
         <div class="item-name">{{localize "ordemparanormal.generalEquipment.plural"}}</div>
-        <div class="item-category">Categoria</div>
+        <div class="item-space">Categoria</div>
         <div class="item-controls">
           <a class="item-control item-create" title="Create item" data-type="generalEquipment">
             <i class="fas fa-plus"></i> 
@@ -17,7 +17,7 @@
             </div>
             <h4>{{item.name}}</h4>
           </div>
-          <div class="item-category item-prop">{{item.data.category}}</div>
+          <div class="item-space item-prop">{{item.data.category}}</div>
           <div class="item-controls">
             <a class="item-control send-chat" title="Enviar para o chat"><i class="fas fa-message"></i></a>
             <a class="item-control mark-item" title="Marcar e desmarcar com item utilizado"><i class="{{ item.system.using.class }} fa-star"></i></a>
@@ -30,11 +30,10 @@ <h4>{{item.name}}</h4>
   <ol class="items-list">
     <li class="item flexrow items-header">
       <div class="item-name">{{localize "ordemparanormal.armament.plural"}}</div>
-      <div class="item-name">Formula</div>
-      <div class="item-name">Quantidade</div>
-      <div class="item-name">Proficiência</div>
-      <div class="item-name">Crítico</div>
-      <div class="item-name">Alcance</div>
+      <div class="item-space">Qtd</div>
+      <div class="item-space">Proficiência</div>
+      <div class="item-space">Crítico</div>
+      <div class="item-space">Alcance</div>
       <div class="item-controls">
         <a class="item-control item-create" title="Create item" data-type="armament">
           <i class="fas fa-plus"></i> 
@@ -49,16 +48,15 @@ <h4>{{item.name}}</h4>
           </div>
           <h4>{{item.name}}</h4>
         </div>
-        <div class="item-name item-prop">{{item.data.formula}}</div>
-        <div class="item-name item-prop">{{item.data.quantity}}</div>
-        <div class="item-name item-prop">
+        <div class="item-space item-prop">{{item.data.quantity}}</div>
+        <div class="item-space item-prop">
           {{#if item.data.proficiency}}
             {{localize (concat "ordemparanormal.proficiencyChoices." item.data.proficiency)}}
           {{else}} —
           {{/if}}
         </div>
-        <div class="item-name item-prop">{{item.data.critical}}</div>
-        <div class="item-name item-prop">{{item.data.range}}</div>
+        <div class="item-space item-prop">{{item.data.critical}}</div>
+        <div class="item-space item-prop">{{item.data.range}}</div>
         <div class="item-controls">
           <a class="item-control send-chat" title="Enviar para o chat"><i class="fas fa-message"></i></a>
           <a class="item-control mark-item" title="Marcar e desmarcar com item utilizado"><i class="{{ item.system.using.class }} fa-star"></i></a>
@@ -71,8 +69,8 @@ <h4>{{item.name}}</h4>
 <ol class="items-list">
   <li class="item flexrow items-header">
     <div class="item-name">{{localize "ordemparanormal.protection.plural"}}</div>
-    <div class="item-formula">Defesa</div>
-    <div class="item-peso">Peso</div>
+    <div class="item-space">Defesa</div>
+    <div class="item-space">Peso</div>
     <div class="item-controls">
       <a class="item-control item-create" title="Create item" data-type="protection">
         <i class="fas fa-plus"></i> 
@@ -87,8 +85,8 @@ <h4>{{item.name}}</h4>
         </div>
         <h4>{{item.name}}</h4>
       </div>
-      <div class="item-formula item-prop">{{item.data.defense}}</div>
-      <div class="item-peso item-prop">{{item.data.weight}}</div>
+      <div class="item-space item-prop">{{item.data.defense}}</div>
+      <div class="item-space item-prop">{{item.data.weight}}</div>
       <div class="item-controls">
         <a class="item-control send-chat" title="Enviar para o chat"><i class="fas fa-message"></i></a>
         <a class="item-control mark-item" title="Marcar e desmarcar com item utilizado">

diff --git a/templates/actor/parts/actor-rituals.html b/templates/actor/parts/actor-rituals.html
@@ -2,10 +2,10 @@
   {{#each rituals as |rituals circle|}}
     <li class="item flexrow items-header">
       <div class="item-name">{{circle}}º Circulo</div>
-      <div class="item-name">Alcance</div>
-      <div class="item-name">Área</div>
-      <div class="item-name">Duração</div>
-      <div class="item-name">Resistência</div>
+      <div class="item-space">Alcance</div>
+      <div class="item-space">Área</div>
+      <div class="item-space">Duração</div>
+      <div class="item-space">Resistência</div>
       <div class="item-controls">
         <a class="item-control item-create" title="Criar ritual de {{circle}}º círculo" data-type="ritual" data-circle="{{circle}}">
           <i class="fas fa-plus"></i>
@@ -20,10 +20,10 @@
           </div>
           <h4>{{item.name}}</h4>
         </div>
-        <div class="item-name item-prop">{{item.data.range}}</div>
-        <div class="item-name item-prop">{{item.data.areaEffect}}</div>
-        <div class="item-name item-prop">{{item.data.duration}}</div>
-        <div class="item-name item-prop">{{item.data.resistance}}</div>
+        <div class="item-space item-prop">{{item.data.range}}</div>
+        <div class="item-space item-prop">{{item.data.areaEffect}}</div>
+        <div class="item-space item-prop">{{item.data.duration}}</div>
+        <div class="item-space item-prop">{{item.data.resistance}}</div>
         <div class="item-controls">
           <a class="item-control send-chat" title="Enviar para o chat"><i class="fas fa-message"></i></a>
           <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>