Centered hotbar, v-padding decrease in cards, navbar color swap + twe…

…aks, SmallTime patch
Dorako · Feb 4, 2022 · 2bfb2e8 · 2bfb2e8
1 parent 7640e91
commit 2bfb2e8
Show file tree

Hide file tree

Showing 17 changed files with 427 additions and 154 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,7 @@
-
+# 1.0.5
+Centered hotbar, v-padding decrease in cards, navbar color swap + tweaks, SmallTime patch
+# 1.0.4
+Added support for Combat Enhancements module
 # 1.0.3
 Fixes to navbar and chat header
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# pf2e Dorako UI
+# PF2e Dorako UI
 This is a UI overhaul for the Pathfinder 2nd Edition System for Foundry VTT.
 
 An opinionated theme inspired by Paizo colors, compatible with several modules for increased consistensy.

diff --git a/module.json b/module.json
@@ -1,16 +1,16 @@
 {
     "name": "pf2e-dorako-ui",
-    "title": "pf2e - Dorako UI",
+    "title": "PF2e - Dorako UI",
     "description": "Overhauls the Foundry UI and several modules.",
     "url": "https://github.com/Dorako/pf2e-dorako-ui",
     "author": "Dorako",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "minimumCoreVersion": "9",
     "compatibleCoreVersion": "9",
     "system": ["pf2e"],
     "scripts": [
         "scripts/dorako-ui.js"
       ],
       "dependencies": [ { "name": "colorsettings" }  ],
-      "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.4.zip"
+      "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.5.zip"
   }
diff --git a/styles/app-ui.css b/styles/app-ui.css
@@ -38,16 +38,17 @@
 
 
 #ui-top {
-    margin: 0 10px 0 10px;
+    margin: 0 var(--edge-margin) 0 var(--edge-margin);
 }
 
 #ui-bottom {
-    margin-left: 9px;
+    /* margin-left: 9px; */
+    margin-left: calc(50% - 300px);
 }
 
 
 #players {
-    margin: 0px 0px 10px 10px;
+    margin: 0px 0px var(--edge-margin) var(--edge-margin);
 }
 
 #players h3 {

diff --git a/styles/chat.css b/styles/chat.css
@@ -29,6 +29,11 @@
     top: 0px;
 }
 
+#chat-log .message .message-header .whisper-to {
+    margin-bottom:0px;
+}
+
+
 /* #chat-log .message .message-header .message-sender,
 #chat-log .message .message-header .message-metadata {
 
@@ -94,23 +99,41 @@
 }
 
 #chat {
-    margin: 5px;
+    /* margin: 5px;
     margin-top: 0px;
-    padding: 2px;
+    padding: 2px; */
+    margin:2px;
 }
 
-.message-portrait {
-    grid-area: chat portrait;
-    background-color: var(--paizo-red);
-    border-radius: 5px 0px 0px 0px;
-}
 
 #chat-log .message .message-header {
     grid: 
-    /* "chat portrait"minmax(min-content, max-content)  */
-    "sender info"minmax(min-content, max-content) 
-    "text text"minmax(min-content, max-content) 
-    //*1fr*/ 2fr 3fr;
+    "portrait sender . info"minmax(min-content, max-content) 
+    "text text text text"minmax(min-content, max-content) 
+    /42px 1.5fr 0fr 2.8fr;
+    background-color:var(--paizo-red);
+    border-bottom: 1px solid black;
+    border-radius: 5px 5px 0px 0px;
+    margin-top: -5px;
+    padding-top: 5px;
+    margin-right: -5px;
+    padding-right: 5px;
+    margin-left: -5px;
+    padding-left: 5px;
+}
+
+.message-content h3.chat-portrait-text-size-name {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}
+
+.message .message-header img.message-portrait {
+    margin: 0px;
+}
+
+#chat-log .message .message-header .flavor-text > img.message-portrait {
+    display:none;
 }
 
 .tags {
@@ -124,11 +147,11 @@
 }
 
 .whisper-to * {
-    background-color: var(--whisper-bg) !important;
+    background-color: var(--whisper-bg);
 }
 
 .chat-mode-indicator {
-    background-color: rgba(140, 40, 40, 1) !important;
+    background-color: rgba(140, 40, 40, 1);
 }
 
 
@@ -145,7 +168,7 @@
     font-size: x-large;
     line-height: 19px;
     font-variant: common-ligatures;
-    margin-top: 4px;
+    /* margin-top: 4px; */
     text-shadow: 0px 1px 0px rgb(255 255 255 / 50%);
 }
 
@@ -155,11 +178,13 @@
     border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:%23231f20;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='.25'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     border-image-width: 14px;
     border-style: double;
+    padding: 5px;
 }
 
 .pf2e.chat-card .card-content p {
-    padding: .5em;
+    padding: .2em;
     text-shadow: 0px 1px 0px rgb(255 255 255 / 50%);
+    margin: 0px;
 }
 
 
@@ -189,6 +214,7 @@
     margin: 0px;
 }
 
+
 .flavor-text > hr {
     /* display: none; */
     margin-top: 0px;
@@ -203,6 +229,7 @@
 #chat-log {
     /* overflow-x:visible; */
     padding-bottom:3px;
+    gap:8px;
 }
 
 
@@ -237,7 +264,7 @@
     color: var(--header-color);
     background-color: var(--paizo-red);
     text-shadow: 0px 1px 0px rgb(0 0 0 / 50%);
-    border-bottom: 1px solid black;
+    /* border-bottom: 1px solid black; */
     margin-left: -5px;
     margin-top: -5px;
     padding-left: 5px;
@@ -249,7 +276,7 @@
     color: var(--header-color);
     background-color: var(--paizo-red);
     text-shadow: 0px 1px 0px rgb(0 0 0 / 50%);
-    border-bottom: 1px solid black;
+    /* border-bottom: 1px solid black; */
     margin-right: -5px;
     margin-top: -5px;
     padding-right: 5px;
@@ -300,10 +327,14 @@ button {
 }
 */
 
-#chat-log>.chat-message:not(.dfce-cm-middle, .dfce-cm-bottom) {
-    margin-top: 10px;
+#chat-log>.chat-message {
+    margin-top: 0px;
 }
 
+/* #chat-log>.chat-message:not(.dfce-cm-middle, .dfce-cm-bottom) {
+    margin-top: 10px;
+} */
+
 #chat-log>.message {
     border: 5px solid red;
     box-shadow: var(--gold-and-glow);
@@ -322,16 +353,32 @@ button {
     left: 41%;
 }
 
+.chat-mode-indicator {
+    grid-area: chatmode;
+}
+
+#chat-log .message .message-header img.message-portrait {
+    grid-area: portrait;
+    margin-bottom:5px;
+    align-items: center;
+    display:flex;
+}
 
 #chat-log .message .message-header .message-sender {
     /* font-size: small;
     font-weight: 400; */
     grid-area: sender;
+    align-items: center;
+    display:flex
+
     /* border-radius: 5px 0px 0px 0px; */
 }
 
 #chat-log .message .message-header .message-metadata {
     grid-area: info;
+    align-items: center;
+    justify-content: flex-end;
+    display:flex;
     /* border-radius: 0px 5px 0px 0px;
     margin-left: 0px; */
 }

diff --git a/styles/combat-tracker.css b/styles/combat-tracker.css
@@ -37,10 +37,28 @@
     border: none;
 }
 
-#combat li.combatant .token-image {
+#combat li.combatant > .token-image {
     margin: 5px;
 }
 
+#combat li.combatant .token-name {
+    text-shadow: var(--dorako-text-shadow);
+    justify-content: center;
+}
+
+/* Combat Enhancements */
+
+.combatant .ce-image-wrapper {
+    margin: 5px;
+}
+
+/* Combat Focus */
+
+.small-chat::before {
+    height:1px;
+    cursor: row-resize;
+}
+
 .small-chat::after {
     content: '';
     height: 0px;

diff --git a/styles/controls.css b/styles/controls.css
@@ -11,7 +11,8 @@
 #controls ol .control-tool.toggle:hover,
 #controls ol .control-tool:hover,
 #controls ol .scene-control:hover,
-#darkness-adjuster .window-content
+#darkness-adjuster .window-content,
+#darkness-adjuster
 {
     border: none;
     border-radius: 0px;
@@ -43,16 +44,20 @@
     box-shadow: var(--glassy);
 }
 
+#darkness-adjuster {
+    height: 36px !important;
+}
+
 #controls {
     padding-top: 0px;
-    margin-top: 10px;
+    margin-top: var(--edge-margin);
 }
 
 #controls ol.main-controls {
     overflow: visible;
     width: 44px;
     padding: 0px;
-    margin: 0px 0px 0px 10px;
+    margin: 0px 0px 0px var(--edge-margin);
 }
 
 /* #controls ol .control-tool.toggle,
@@ -73,30 +78,30 @@
 #controls ol .scene-control.active,
 #controls ol .scene-control:hover {
     background-color: var(--paizo-red);
-    backdrop-filter: var(--dorako-vibrancy-active)
+    /* backdrop-filter: var(--dorako-vibrancy-active) */
 }
 
 #controls ol.sub-controls .control-tool:hover,
 #controls ol.sub-controls .control-tool.active:not(.toggle):hover,
 #controls ol.sub-controls .control-tool.active:not(.toggle) {
     background-color: var(--paizo-red);
-    backdrop-filter: var(--dorako-vibrancy-active);
+    /* backdrop-filter: var(--dorako-vibrancy-active); */
 }
 
 #controls ol.sub-controls .control-tool.toggle {
     background-color: var(--paizo-blue-dark);
-    backdrop-filter: var(--dorako-vibrancy);
+    /* backdrop-filter: var(--dorako-vibrancy); */
 }
 
 #controls ol.sub-controls .control-tool.toggle:hover,
 #controls ol.sub-controls .control-tool.toggle.active:hover {
     background-color: var(--paizo-blue);
-    backdrop-filter: var(--dorako-vibrancy-active) var(--dorako-vibrancy-active);
+    /* backdrop-filter: var(--dorako-vibrancy-active) var(--dorako-vibrancy-active); */
 }
 
 #controls ol.sub-controls .control-tool.toggle.active {
     background-color: var(--paizo-blue-bright);
-    backdrop-filter: brightness(1.5), var(--dorako-vibrancy-active);
+    /* backdrop-filter: brightness(1.5), var(--dorako-vibrancy-active); */
 }
 
 

diff --git a/styles/custom-hotbar.css b/styles/custom-hotbar.css
@@ -82,7 +82,6 @@
     padding: 0px;
     margin-right: 9px;
     border: none;
-    background: red !important;
 }
 
 #custom-hotbar #custom-macro-list.flexrow {

diff --git a/styles/dice-tray.css b/styles/dice-tray.css
@@ -0,0 +1,33 @@
+/* Dice Tray */
+
+/* Glass - Add new styling */
+
+#dfcp-rt-buttons button,
+.dice-tray button
+{
+    border: none;
+    border-radius: var(--dorako-radius);
+    background-color: var(--dorako-bg-current);
+    backdrop-filter: var(--dorako-vibrancy);
+    /*will-change: backdrop-filter;*/
+    transform: translate3d(0px, 0px, 0px);
+    box-shadow: var(--glassy);
+}
+
+.dice-tray button {
+    padding: 0px;
+}
+
+.dice-tray,
+.dice-tray .flexrow {
+    gap: 5px;
+}
+
+.dice-tray {
+    display: flex;
+    flex-direction: column;
+}
+
+#chat-controls .roll-type-select {
+    height: unset;
+}