1.11.10

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.11.10
+
+- (Refinement) Improved dark-theme styling of the compendium browser.
+- (New) New UX setting to collapse the sidebar by default.
+
 # 1.11.9
 
 - (New) Added dark-theme support for Party Overview.

languages/en.json

@@ -137,6 +137,10 @@
           "name": "Enable Compact UI?",
           "hint": "Resizes controls, and hides inactive controls and navigation elements unless hovered"
         },
+        "start-sidebar-collapsed": {
+          "name": "Collapse sidebar by default?",
+          "hint": "Uses the collapsed state as the initial state"
+        },
         "no-logo": {
           "name": "Hide Foundry logo?",
           "hint": "Removes the Foundry logo in the top left"

modules/misc-hooks.js

@@ -161,3 +161,8 @@ for (const application of ["Application", ...baseThemePf2eSheets]) {
     openBtn.insertAfter(titleElement);
   });
 }
+
+Hooks.once("ready", (app, html, data) => {
+  if (!game.settings.get(`${MODULE_NAME}`, "ux.start-sidebar-collapsed")) return;
+  ui.sidebar.collapse();
+});

modules/settings/ux-settings.js

@@ -14,6 +14,7 @@ export class UXSettings extends SettingsMenuDorakoUI {
     "center-hotbar",
     "enable-player-tags",
     "rolltype-indication",
+    "start-sidebar-collapsed",
   ];
 
   rerenderChatMessages() {}
@@ -105,6 +106,15 @@ export class UXSettings extends SettingsMenuDorakoUI {
           }
         },
       },
+      "start-sidebar-collapsed": {
+        name: "pf2e-dorako-ui.settings.ux.start-sidebar-collapsed.name",
+        hint: "pf2e-dorako-ui.settings.ux.start-sidebar-collapsed.hint",
+        scope: "client",
+        config: true,
+        default: false,
+        type: Boolean,
+        requiresReload: false,
+      },
       "no-logo": {
         name: "pf2e-dorako-ui.settings.ux.no-logo.name",
         hint: "pf2e-dorako-ui.settings.ux.no-logo.hint",

sass/_colors.scss

@@ -133,3 +133,44 @@ $adjusted-lower: #cc3311 !default;
   --banner-top: url(../img/blue_sidebar_top.webp);
   --banner-bottom: url(../img/blue_sidebar_bottom.webp);
 }
+
+/* ----------------------------------------- */
+/* Overwrite Foundry colors                  */
+/* ----------------------------------------- */
+
+.dorako-ui {
+  --color-border-highlight: var(--tertiary);
+  --color-border-highlight-alt: var(--tertiary-dark);
+  --color-shadow-primary: var(--primary-light);
+  --color-shadow-highlight: var(--primary-light);
+  --sheet: var(--sheet-light);
+  --ornamentation: 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:gray;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%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");
+  --ornamentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1%7Bstroke:%23231f20;stroke-miterlimit:10%7D.st1,.st2%7Bfill:none%7D%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%3Cg%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zM3.6 3.6h3.1v3.1H3.6zM6.8 3.6h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zM3.6 6.8H.5V13M13 .5H6.8v3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4.5h3.1v3.1h-3.1zM26.3 3.6h3.1v3.1h-3.1zM26.3 6.8h3.1v3.1h-3.1zM23.1 3.6h3.1v3.1h-3.1zM26.3 3.6V.5H20'/%3E%3Cpath class='st1' d='M32.5 13V6.8h-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zM23.1 26.3h3.1v3.1h-3.1zM26.3 23.1h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zM3.6 26.3h3.1v3.1H3.6zM3.6 23.1h3.1v3.1H3.6zM6.8 26.3h3.1v3.1H6.8z'/%3E%3Cpath class='st1' d='M6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  --half-transparent: rgba(0, 0, 0, 0.5);
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--tertiary);
+    border: 1px solid var(--gold-brown);
+  }
+
+  a,
+  button {
+    @include quick-transition;
+  }
+}
+
+.dorako-ui.dark-theme {
+  --color-underline-active: var(--tertiary-dark);
+  --color-underline-header: var(--tertiary-dark);
+  --rarity-common: #e1d8cf;
+  --rarity-uncommon: #c45500;
+  --rarity-rare: #5362ff;
+  --rarity-unique: #e127e1;
+  --color-shadow-primary: var(--tertiary-dark);
+  --color-shadow-highlight: var(--tertiary);
+  --sheet: var(--sheet-dark);
+  --ornamentation: 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:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%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");
+  --body: var(--text-light);
+  --bg: var(--glass-bg-dark);
+  --half-transparent: rgba(255, 255, 255, 0.5);
+}

sass/_reset.scss

@@ -16,38 +16,3 @@ img {
 input:disabled {
   border-radius: 2px;
 }
-
-/* ----------------------------------------- */
-/* Overwrite Foundry colors                  */
-/* ----------------------------------------- */
-
-.dorako-ui {
-  --color-border-highlight: var(--tertiary);
-  --color-border-highlight-alt: var(--tertiary-dark);
-  --color-shadow-primary: var(--primary-light);
-  --color-shadow-highlight: var(--primary-light);
-  --sheet: var(--sheet-light);
-  --ornamentation: 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:gray;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%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");
-  --ornamentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1%7Bstroke:%23231f20;stroke-miterlimit:10%7D.st1,.st2%7Bfill:none%7D%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%3Cg%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zM3.6 3.6h3.1v3.1H3.6zM6.8 3.6h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zM3.6 6.8H.5V13M13 .5H6.8v3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4.5h3.1v3.1h-3.1zM26.3 3.6h3.1v3.1h-3.1zM26.3 6.8h3.1v3.1h-3.1zM23.1 3.6h3.1v3.1h-3.1zM26.3 3.6V.5H20'/%3E%3Cpath class='st1' d='M32.5 13V6.8h-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zM23.1 26.3h3.1v3.1h-3.1zM26.3 23.1h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zM3.6 26.3h3.1v3.1H3.6zM3.6 23.1h3.1v3.1H3.6zM6.8 26.3h3.1v3.1H6.8z'/%3E%3Cpath class='st1' d='M6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  --half-transparent: rgba(0, 0, 0, 0.5);
-
-  *::-webkit-scrollbar-thumb {
-    background: var(--tertiary);
-    border: 1px solid var(--gold-brown);
-  }
-
-  a,
-  button {
-    @include quick-transition;
-  }
-}
-
-.dorako-ui.dark-theme {
-  --color-shadow-primary: var(--tertiary-dark);
-  --color-shadow-highlight: var(--tertiary);
-  --sheet: var(--sheet-dark);
-  --ornamentation: 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:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%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");
-  --body: var(--text-light);
-  --bg: var(--glass-bg-dark);
-  --half-transparent: rgba(255, 255, 255, 0.5);
-}

sass/foundry/_application-dark.scss

@@ -59,11 +59,6 @@
   color: var(--color-text-light-heading);
 }
 
-.dorako-ui.dark-theme {
-  --color-underline-active: var(--tertiary-dark);
-  --color-underline-header: var(--tertiary-dark);
-}
-
 .dorako-ui.dark-theme.window-app {
   // ::placeholder {
   //     color: var(--color-text-light-heading);
@@ -74,7 +69,8 @@
   }
 
   .window-content {
-    @include sheet;
+    // Avoid margins from sheet
+    box-shadow: 0 0 0 1px var(--gold-brown) inset, 0 0 0 2px var(--tertiary) inset;
     background-image: var(--sheet-dark);
     color: var(--color-text-light-heading);
   }
@@ -175,6 +171,16 @@
   }
 
   input[type="checkbox"],
+  input[type="radio"] {
+    accent-color: var(--tertiary);
+    &:checked {
+      box-shadow: unset;
+      accent-color: var(--tertiary);
+      filter: none;
+    }
+  }
+
+  // input[type="checkbox"],
   // input[type="radio"],
   input[type="text"],
   input[type="number"],

sass/foundry/_compact-ui.scss

@@ -22,15 +22,6 @@ body.compact-ui {
     display: block;
   }
 
-  /* #controls ol .scene-control,
-#controls ol .control-tool {
-  width: 28px;
-  height: 28px;
-  font-size: 18px;
-  line-height: 28px;
-  margin-bottom: 4px;
-} */
-
   #controls ol.main-controls.app.control-tools {
     width: unset;
   }
@@ -53,9 +44,6 @@ body.compact-ui {
     transition: opacity 0.25s ease-in-out;
   }
 
-  /* #hotbar:hover,
-#custom-hotbar:hover */
-
   #players:hover {
     transition: opacity 0.25s ease-in-out;
     opacity: 1;

sass/foundry/_controls.scss

@@ -2,19 +2,20 @@
 /* Controls                                  */
 /* ----------------------------------------- */
 
-// Fix foundry's inconsistent gaps
-#controls ol.control-tools.sub-controls > li,
-#controls ol.control-tools.main-controls {
-  margin-right: 8px;
-}
-
 nav#controls.dorako-ui {
   padding-top: 12px;
 
+  // Fix foundry's inconsistent gaps
+  ol.control-tools.sub-controls > li,
+  ol.control-tools.main-controls {
+    margin-right: 8px;
+  }
+
   ol.control-tools {
     &.main-control {
       margin-right: 8px;
     }
+
     li.control-tool,
     > li {
       @include glass;

sass/foundry/_sidebar.scss

@@ -3,7 +3,7 @@
 /* ----------------------------------------- */
 
 #ui-right {
-  #sidebar {
+  #sidebar.dorako-ui {
     height: -webkit-fill-available;
     &.collapsed {
       height: auto;

sass/pf2e/_actor-sheet-dark.scss

@@ -1,24 +1,23 @@
 .dorako-ui.dark-theme {
   h4.rarity {
     &-common {
-      color: #e1d8cf !important;
+      color: var(--rarity-common);
+      border-color: var(--rarity-common);
     }
     &-uncommon {
-      color: #c45500 !important;
+      color: var(--rarity-uncommon);
+      border-color: var(--rarity-uncommon);
     }
     &-rare {
-      color: #5362ff !important;
+      color: var(--rarity-rare);
+      border-color: var(--rarity-rare);
     }
     &-unique {
-      color: #e127e1 !important;
+      color: var(--rarity-unique);
+      border-color: var(--rarity-unique);
     }
   }
 
-  --rarity-common: #e1d8cf;
-  --rarity-uncommon: #c45500;
-  --rarity-rare: #5362ff;
-  --rarity-unique: #e127e1;
-
   .tags .tag.tag_secondary,
   .tags .tag option.tag_secondary {
     background-color: var(--tertiary-dark);

sass/pf2e/_compendium-browser-dark.scss

@@ -0,0 +1,24 @@
+.dorako-ui.dark-theme {
+  // prettier-ignore
+  &#compendium-browser>section.window-content>.content-box .compendium-browser-settings form .setting-section,
+  &#license-viewer>section.window-content>.content-box .compendium-browser-settings form .setting-section,
+  &#compendium-browser > section.window-content > .content-box .spell-browser .filtercontainer,
+  &#compendium-browser > section.window-content > .content-box .spell-browser .sortcontainer,
+  &#license-viewer > section.window-content > .content-box .spell-browser .filtercontainer,
+  &#license-viewer > section.window-content > .content-box .spell-browser .sortcontainer {
+    @include gold-border-shadow;
+    padding: 5px;
+    background-color: rgba(0,0,0,0.3);
+ }
+
+  &#compendium-browser > section.window-content > .content-box .spell-browser .control-area,
+  &#license-viewer > section.window-content > .content-box .spell-browser .control-area {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    overflow-x: clip;
+    > div:first-child {
+      margin-top: 10px;
+    }
+  }
+}

sass/pf2e/_familiar-sheet.scss

@@ -1,3 +1,5 @@
+// Light theme
+
 .dorako-ui.familiar {
   .main-section {
     gap: 10px;
@@ -46,6 +48,8 @@
   }
 }
 
+// Dark theme
+
 .dorako-ui.dark-theme.familiar {
   .detail .detail-label {
     color: var(--tertiary);

sass/pf2e/_hazard-sheet.scss

@@ -1,3 +1,5 @@
+// Light theme
+
 .dorako-ui.hazard {
   --hazard: #1c3532;
 
@@ -34,6 +36,8 @@
   }
 }
 
+// Dark theme
+
 .dorako-ui.dark-theme.hazard {
   input {
     color: var(--color-text-light-primary);

sass/pf2e/_index.scss

@@ -8,3 +8,4 @@
 @import "globals-dark";
 @import "hazard-sheet";
 @import "npc-sheet";
+@import "compendium-browser-dark";