From 93d49797dd389812be2ee23f15ce97ab4abdf08f Mon Sep 17 00:00:00 2001 From: Dorako Date: Thu, 10 Feb 2022 17:26:48 +0100 Subject: [PATCH] 1.2.2 --- CHANGELOG.md | 3 + README.md | 32 +- module.json | 7 +- scripts/dorako-ui.js | 449 +++++++++++++++++--------- styles/app-ui.css | 31 +- styles/chat-blind-whisper.css | 9 + styles/chat-dark.css | 14 +- styles/chat-portrait-border.css | 6 + styles/chat-rainbow.css | 37 ++- styles/chat.css | 347 +++++++++++++------- styles/compact-controls.css | 44 +++ styles/controls.css | 2 + styles/custom-hotbar.css | 16 +- styles/dorako-ui.css | 32 +- styles/header-blue.css | 9 + styles/{header.css => header-red.css} | 0 styles/hotbar.css | 39 +++ styles/navigation.css | 3 + styles/sidebar.css | 16 +- templates/base-chat-message.html | 12 +- templates/damage-card-flavor.html | 31 ++ 21 files changed, 827 insertions(+), 312 deletions(-) create mode 100644 styles/chat-blind-whisper.css create mode 100644 styles/chat-portrait-border.css create mode 100644 styles/compact-controls.css create mode 100644 styles/header-blue.css rename styles/{header.css => header-red.css} (100%) create mode 100644 templates/damage-card-flavor.html diff --git a/CHANGELOG.md b/CHANGELOG.md index af70691..cd9b337 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +# 1.2.2 +Fixed some errors, added support for Monk's hotbar module, partial support for Minimal UI, changed damage card button colors. +# 1.2.1 # 1.2.0 Huge release, :pacman:'d chat portraits and rolltype indicators, and added settings allowing users to customize the chat card theme. # 1.1.1 diff --git a/README.md b/README.md index ca9215c..2cae2d6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,34 @@ # 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. -An opinionated theme inspired by Paizo colors, compatible with several modules for increased consistensy. \ No newline at end of file +Includes: +- Chat portraits +- Rolltype indicators +- Multiple chat themes +- Compact controls + navbar mode + +Works great with: +- Token Action HUD +- DFCE (message merge in particular) +- Monk's Hotbar Expansion +- Monk's Little Details +- Dice Tray +- Polyglot + +Works well with: +- Sidebar, Chat and Windows Resizer +- Module Management+ +- Combat Focus +- Combat Enhancement +- Bar Brawl +- SmallTime +- Window Controls +- Enhanced Terrain Layer + +Partial support for: +- Custom hotbar +- Minimal UI + +Not recommended: +- Illandril's Chat Enhancements (Breaks creature mystification) \ No newline at end of file diff --git a/module.json b/module.json index a3f0185..fd05eff 100644 --- a/module.json +++ b/module.json @@ -4,7 +4,7 @@ "description": "Overhauls the Foundry UI and several modules.", "url": "https://github.com/Dorako/pf2e-dorako-ui", "author": "Dorako", - "version": "1.2.1", + "version": "1.2.2", "minimumCoreVersion": "9", "compatibleCoreVersion": "9", "system": ["pf2e"], @@ -14,7 +14,6 @@ "templates": [ "templates/*" ], - "dependencies": [ { "name": "colorsettings" } ], - "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.2.1.zip", - "manifest": "https://github.com/Dorako/pf2e-dorako-ui/-/raw/main/module.json" + "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.2.2.zip", + "manifest": "https://github.com/Dorako/pf2e-dorako-ui/raw/main/module.json" } \ No newline at end of file diff --git a/scripts/dorako-ui.js b/scripts/dorako-ui.js index 6877c6c..ccece6b 100644 --- a/scripts/dorako-ui.js +++ b/scripts/dorako-ui.js @@ -7,41 +7,62 @@ Hooks.on("renderChatMessage", (chatMessage, html, messageData) => { injectWhisperParticipants(html, messageData); }); -function injectMessageTag(html, messageData) { - const messageMetadata = html.find(".message-metadata"); - - const rolltype = $(""); - rolltype.addClass("rolltype"); - - const whisperTargets = messageData.message.whisper; - - const isBlind = messageData.message.blind || false; - const isWhisper = whisperTargets?.length > 0 || false; - const isSelf = isWhisper && whisperTargets.length === 1 && whisperTargets[0] === messageData.message.user; - const isRoll = messageData.message.roll !== undefined; +Hooks.on('renderChatMessage', (message, html, speakerInfo) => { + if (game.settings.get('pf2e-dorako-ui', 'enable-player-tags')) { + const messageSenderElem = html.find('.sender-wrapper'); + // const messageSenderElem = html.find('.message-sender'); + const playerName = speakerInfo.author.name; + const playerNameElem = document.createElement('span'); + playerNameElem.appendChild(document.createTextNode(playerName)); + playerNameElem.classList.add("player-name"); + playerNameElem.classList.add("header-meta"); + messageSenderElem.append(playerNameElem); + } + }); - // Inject tag to the left of the timestamp - if (isBlind) { - rolltype.text(game.i18n.localize("CHAT.RollBlind")); - messageMetadata.prepend(rolltype); - } else if (isSelf && whisperTargets[0]) { - rolltype.text(game.i18n.localize("CHAT.RollSelf")); - messageMetadata.prepend(rolltype); - } else if (isRoll && isWhisper) { - rolltype.text(game.i18n.localize("CHAT.RollPrivate")); - messageMetadata.prepend(rolltype); - } else if (isWhisper) { - rolltype.text(game.i18n.localize("chat-indicators.Whisper")); - messageMetadata.prepend(rolltype); - } +function injectMessageTag(html, messageData) { + setting = game.settings.get('pf2e-dorako-ui', 'rolltype-indication'); + if (setting == "none") { + return; + } else if (setting == "tags" || setting == "both") { + const messageMetadata = html.find(".message-metadata"); + + const rolltype = $(""); + rolltype.addClass("rolltype"); + rolltype.addClass("header-meta"); + + const whisperTargets = messageData.message.whisper; + + const isBlind = messageData.message.blind || false; + const isWhisper = whisperTargets?.length > 0 || false; + const isSelf = isWhisper && whisperTargets.length === 1 && whisperTargets[0] === messageData.message.user; + const isRoll = messageData.message.roll !== undefined; + + // Inject tag to the left of the timestamp + if (isBlind) { + rolltype.text(game.i18n.localize("CHAT.RollBlind")); + messageMetadata.prepend(rolltype); + } else if (isSelf && whisperTargets[0]) { + rolltype.text(game.i18n.localize("CHAT.RollSelf")); + messageMetadata.prepend(rolltype); + } else if (isRoll && isWhisper) { + rolltype.text(game.i18n.localize("CHAT.RollPrivate")); + messageMetadata.prepend(rolltype); + } else if (isWhisper) { + rolltype.text("Whisper"); + messageMetadata.prepend(rolltype); + } + } } function injectWhisperParticipants(html, messageData) { const alias = messageData.alias; + const whisperTargets = messageData.message.whisper; const whisperTargetString = messageData.whisperTo; const whisperTargetIds = messageData.message.whisper; const isWhisper = whisperTargetIds?.length > 0 || false; const isRoll = messageData.message.roll !== undefined; + const isSelf = isWhisper && whisperTargets.length === 1 && whisperTargets[0] === messageData.message.user; const authorId = messageData.message.user; const userId = game.user.data._id; @@ -53,10 +74,7 @@ function injectWhisperParticipants(html, messageData) { html.find(".whisper-to").detach(); // if this is a roll - if (isRoll) return; - - // add new content - // const messageHeader = html.find(".message-header"); + if (isRoll || isSelf) return; const messageHeader = html.find(".message-header"); @@ -65,9 +83,11 @@ function injectWhisperParticipants(html, messageData) { const whisperFrom = $(""); whisperFrom.text(`From: ${alias}`); + whisperFrom.addClass("header-meta"); const whisperTo = $(""); whisperTo.text(`${game.i18n.localize("CHAT.To")}: ${whisperTargetString}`); + whisperTo.addClass("header-meta"); whisperParticipants.append(whisperFrom); whisperParticipants.append(whisperTo); @@ -78,26 +98,9 @@ function injectWhisperParticipants(html, messageData) { Hooks.once('init', async function () { CONFIG.ChatMessage.template = "modules/pf2e-dorako-ui/templates/base-chat-message.html"; - game.settings.register("pf2e-dorako-ui", "displaySetting", { - name: "Display setting", - hint: "Configure which cards should receive custom styling, and which ones should be left as default. Changing this may require you to refresh your window.", - scope: "client", - config: true, - default: "allCards", - type: String, - choices: { - "allCards": "Affect every message.", - "selfAndGM": "Affect own messages and GM messages.", - "self": "Only affect own messages.", - "gm": "Only affect GM messages.", - "player": "Only affect player messages.", - "none": "Don't affect any messages." - } - }); - game.settings.register("pf2e-dorako-ui", "theme", { name: "Theme", - hint: "Select between light and dark theme", + hint: "Theme affects chat messages.", scope: "client", config: true, default: "Light", @@ -111,58 +114,124 @@ Hooks.once('init', async function () { game.settings.register("pf2e-dorako-ui", "headerStyle", { name: "Header style", - hint: "Select between three header styles", + hint: "Pick between available presets.", scope: "client", config: true, - default: "header", + default: "none", type: String, choices: { "red": "Red", - "tint": "Player tint", + "blue": "Blue", + "tint": "Player Tint", "none": "None" } }); - game.settings.register("pf2e-dorako-ui", "borderOverride", { - name: "Override border", - hint: "Enables border colour override. This will colour the border of the chat card with the player's colour.", + //todo Token, Body, None + game.settings.register("pf2e-dorako-ui", "insertSpeakerImage", { + name: "Add chat portrait?", + hint: "Adds the image of the speaker to the chat card.", scope: "client", config: true, default: true, type: Boolean }); - game.settings.register("pf2e-dorako-ui", "insertSpeakerImage", { - name: "Insert Speaker Image", - hint: "Adds the image of the speaker to the chat card.", + game.settings.register("pf2e-dorako-ui", "chat-portrait-size", { + name: "Chat portrait size", + hint: "Suggested size of 40px.", + scope: "client", + type: Number, + default: 40, + range: { + min: 10, + max: 60, + step: 1 + }, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register("pf2e-dorako-ui", "chat-portrait-border", { + name: "... and add a border?", + hint: "Disable if your token art is fancy.", scope: "client", config: true, default: true, type: Boolean }); + + game.settings.register("pf2e-dorako-ui", "enable-player-tags", { + name: "Add player tags?", + hint: "Adds a tag containing the name of the player next to the speaker.", + scope: "client", + config: true, + default: true, + type: Boolean + }); + + game.settings.register('pf2e-dorako-ui', 'rolltype-indication', { + name: "Indicate rolltype by...", + hint: "Secret rolls (Blind GM) are tinted pink and whispers are tinted blue.", + scope: "world", + type: String, + default: "both", + config: true, + choices: { + "tags": "Tags", + "bg-color": "Background color", + "both": "Tags and background color", + "none": "Nothing" + } + }); + + game.settings.register('pf2e-dorako-ui', 'compact-ui', { + name: "Use compact UI?", + hint: "Resizes controls, and hides inactive controls and navigation elements unless hoveded.", + scope: "world", + config: true, + default: false, + type: Boolean + }); + + game.settings.register('pf2e-dorako-ui', 'backdrop-filter', { + name: "Frosted glass?", + hint: "WARNING: This setting only renders correctly on some browsers, and has a significant performance hit.", + scope: "client", + type: Boolean, + default: false, + config: true, + onChange: () => { + location.reload(); + } + }); + + // game.settings.register("pf2e-dorako-ui", "primary-color", { + // name: "Primary color overwrite", + // hint: "Default is Red", + // scope: "client", + // config: true, + // type: String, + // default: "#FF0000", + // onChange: () => refresh() + // }); + + // const colorInput = window.document.createElement("input"); + // colorInput.setAttribute("type", "color"); + // colorInput.setAttribute("value", html.find(`input[name="primary-color"]`).val()); + // colorInput.setAttribute("data-edit", `${prefix}.monoVisionColor`); + + // html.find(`input[name="${prefix}.monoVisionColor"]`).after(colorInput); + }); + Hooks.on('init', () => { function shouldOverrideMessage(message) { - const setting = game.settings.get("pf2e-dorako-ui", "displaySetting"); - if (setting !== "none") { - const user = game.users.get(message.user); - if (user) { - const isSelf = user.data._id === game.user.data._id; - const isGM = user.isGM; - - if ((setting === "allCards") - || (setting === "self" && isSelf) - || (setting === "selfAndGM" && (isSelf || isGM)) - || (setting === "gm" && isGM) - || (setting === "player" && !isGM) - ) { - return true; - } - } - } - return false; + return true; } @@ -197,27 +266,39 @@ Hooks.once("setup", function () { const speaker = message.speaker; if (!speaker) { return false; - } else { - let bHasImage = false; - if (speaker.token) { - const token = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token); - if (token) { - bHasImage = bHasImage || token.data.img != null; + } + + let bHasImage = false; + if (speaker.token) { + const token = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token); + if (token) { + if (bHasImage || token.data.img != null) { + return shouldOverrideMessage(message); } } + } - if (speaker.actor) { - const actor = Actors.instance.get(speaker.actor); - if (actor) { - bHasImage = bHasImage || actor.data.img != null; + if (speaker.actor) { + const actor = Actors.instance.get(speaker.actor); + //const actor = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token); + // const tokens = actor.getActiveTokens(true, false); + // const token = tokens.first(); + const token = actor.data.token.img; + // if (actor) { + // bHasImage = bHasImage || actor.data.img != null; + // } + if (token) { + if (bHasImage) { + return shouldOverrideMessage(message); } } + } - if (!bHasImage) { - return false; - } + if (!bHasImage) { + return true; } + return shouldOverrideMessage(message); }); @@ -248,12 +329,7 @@ Hooks.once("setup", function () { }); Handlebars.registerHelper("getBorderStyle", function (message, foundryBorder) { - const borderOverride = game.settings.get("pf2e-dorako-ui", "borderOverride"); - if (borderOverride && shouldOverrideMessage(message)) { - const user = game.users.get(message.user); - return `border-color: ${user.data.color}`; - } - + return "border: none"; if (foundryBorder) { return `border-color: ${foundryBorder}`; } @@ -271,8 +347,18 @@ Hooks.once("setup", function () { var g = parseInt(hexColor.substr(2,2),16); var b = parseInt(hexColor.substr(4,2),16); var yiq = ((r*299)+(g*587)+(b*114))/1000; - const textColor = (yiq >= 128) ? '#333' : '#E7E7E7'; + const root = document.querySelector(':root').style; + let textColor; + if (yiq >= 128) { + root.setProperty("--pf2e-header-text-color", '#333'); + root.setProperty("--header-text-shadow", "var(--pf2e-shadow-is-dark)"); + } else { + root.setProperty("--pf2e-header-text-color", '#E7E7E7'); + root.setProperty("--header-text-shadow", "var(--pf2e-shadow-is-light)"); + } + + return `background-color:${user.data.color}`; return `background-color:${user.data.color}; color: ${textColor};`; } } @@ -335,8 +421,8 @@ Hooks.once("setup", function () { }); game.settings.register("pf2e-dorako-ui", "edge-offset", { - name: "Offset from the edge of screen in pixels", - hint: "", + name: "Edge-offset", + hint: "Offset from the edge of screen in pixels.", scope: "client", type: Number, default: 10, @@ -353,9 +439,9 @@ Hooks.once("setup", function () { game.settings.register('pf2e-dorako-ui', 'skin-chat', { - name: "Apply skin to chat?", + name: "Theme chat?", hint: "Applies theming to chat cards and sidebar content.", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -365,9 +451,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-navigation', { - name: "Apply skin to scene navigation?", + name: "Theme scene navigation?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -377,9 +463,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-hotbar', { - name: "Apply skin to the hotbar (macro bar)?", + name: "Theme the hotbar (macro bar)?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -389,9 +475,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-controls', { - name: "Apply skin to scene controls?", + name: "Theme scene controls?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -401,9 +487,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-token-hud', { - name: "Apply skin to the token HUD?", + name: "Theme the token HUD?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -413,9 +499,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-effect-panel', { - name: "Apply skin to the effect panel?", + name: "Theme the effect panel?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -425,9 +511,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-sidebar', { - name: "Apply skin to the sidebar?", + name: "Theme the sidebar?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -437,9 +523,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-app-ui', { - name: "Apply skin to app UI?", + name: "Theme app UI?", hint: "This includes the player box, window headers, and similar", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -449,9 +535,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-combat-tracker', { - name: "Apply skin to the combat tracker?", + name: "Theme the combat tracker?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -461,9 +547,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-custom-hotbar', { - name: "Apply skin to Custom Hotbar module?", + name: "Theme Custom Hotbar module?", hint: "Suggested offsets of (845px horizontally and 10px vertically) for vertical extension, or (0px horizontally and 75px vertically) for stacked bars.", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -473,9 +559,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-token-action-hud', { - name: "Apply skin to Token Action HUD?", + name: "Theme Token Action HUD?", hint: "Makes TAH more compact and fits in better with the rest of the UI.", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -485,9 +571,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-window-controls', { - name: "Apply skin to Window Controls module?", + name: "Theme Window Controls module?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -497,9 +583,9 @@ Hooks.once("setup", function () { }); game.settings.register('pf2e-dorako-ui', 'skin-dice-tray', { - name: "Apply skin to Dice Tray module?", + name: "Theme Dice Tray module?", hint: "", - scope: "world", + scope: "client", type: Boolean, default: true, config: true, @@ -508,17 +594,8 @@ Hooks.once("setup", function () { } }); - game.settings.register('pf2e-dorako-ui', 'skin-message-header', { - name: "Apply skin to message header?", - hint: "", - scope: "world", - type: Boolean, - default: true, - config: true, - onChange: () => { - location.reload(); - } - }); + + if (!game.settings.get('pf2e-dorako-ui', 'disable-all-styles')) { injectBaseCss() @@ -530,7 +607,13 @@ Hooks.once("setup", function () { root.setProperty("--hotbar-margin-left", '10px'); } + if (game.settings.get('pf2e-dorako-ui', 'backdrop-filter')) { + root.setProperty("--dorako-vibrancy", 'brightness(1.5) contrast(1.2) saturate(1.5) blur(5px)') + root.setProperty("--dorako-bg-current", 'var(--dorako-bg-glass)') + } + root.setProperty("--edge-margin", game.settings.get('pf2e-dorako-ui', 'edge-offset').toString()+'px'); + root.setProperty("--chat-portrait-size", game.settings.get('pf2e-dorako-ui', 'chat-portrait-size').toString()+'px'); if (game.settings.get('pf2e-dorako-ui', 'skin-navigation')) { skinNavigation() @@ -573,10 +656,12 @@ Hooks.once("setup", function () { } let headerStyle = game.settings.get('pf2e-dorako-ui', 'headerStyle'); if (headerStyle == "tint" || headerStyle == "red") { - skinMessageHeader() - } else if (headerStyle == "none") { + enableRedHeader() + } else if(headerStyle == "blue") { + enableBlueHeader() + } else if (headerStyle == "none") { // padding-bottom: 0px; - } + } let theme = game.settings.get('pf2e-dorako-ui', 'theme'); if (theme == "light") { // do nothing @@ -585,6 +670,16 @@ Hooks.once("setup", function () { } else if (theme == "rainbow") { enableRainbowTheme(); } + let setting = game.settings.get('pf2e-dorako-ui', 'rolltype-indication'); + if (setting == "both" || setting == "bg-color") { + enableBlindWhisperColors(); + } + if (game.settings.get('pf2e-dorako-ui', 'chat-portrait-border')) { + enableChatPortraitBorder(); + } + if (game.settings.get('pf2e-dorako-ui', 'compact-ui')) { + enableCompactUI(); + } } @@ -592,24 +687,24 @@ Hooks.once("setup", function () { function shouldOverrideMessage(message) { - const setting = game.settings.get("pf2e-dorako-ui", "displaySetting"); - if (setting !== "none") { - const user = game.users.get(message.user); - if (user) { - const isSelf = user.data._id === game.user.data._id; - const isGM = user.isGM; - - if ((setting === "allCards") - || (setting === "self" && isSelf) - || (setting === "selfAndGM" && (isSelf || isGM)) - || (setting === "gm" && isGM) - || (setting === "player" && !isGM) - ) { - return true; - } - } - } - return false; + // const setting = game.settings.get("pf2e-dorako-ui", "displaySetting"); + // if (setting !== "none") { + // const user = game.users.get(message.user); + // if (user) { + // const isSelf = user.data._id === game.user.data._id; + // const isGM = user.isGM; + + // if ((setting === "allCards") + // || (setting === "self" && isSelf) + // || (setting === "selfAndGM" && (isSelf || isGM)) + // || (setting === "gm" && isGM) + // || (setting === "player" && !isGM) + // ) { + // return true; + // } + // } + // } + return true; } @@ -631,12 +726,22 @@ function injectBaseCss() { } // Chat cards -function skinMessageHeader() { +function enableRedHeader() { + const head = document.getElementsByTagName("head")[0]; + const newCss = document.createElement("link"); + newCss.setAttribute("rel", "stylesheet") + newCss.setAttribute("type", "text/css") + newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/header-red.css") + newCss.setAttribute("media", "all") + head.insertBefore(newCss, head.lastChild); +} + +function enableBlueHeader() { const head = document.getElementsByTagName("head")[0]; const newCss = document.createElement("link"); newCss.setAttribute("rel", "stylesheet") newCss.setAttribute("type", "text/css") - newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/header.css") + newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/header-blue.css") newCss.setAttribute("media", "all") head.insertBefore(newCss, head.lastChild); } @@ -661,6 +766,36 @@ function enableRainbowTheme() { head.insertBefore(newCss, head.lastChild); } +function enableBlindWhisperColors() { + const head = document.getElementsByTagName("head")[0]; + const newCss = document.createElement("link"); + newCss.setAttribute("rel", "stylesheet") + newCss.setAttribute("type", "text/css") + newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/chat-blind-whisper.css") + newCss.setAttribute("media", "all") + head.insertBefore(newCss, head.lastChild); +} + +function enableCompactUI() { + const head = document.getElementsByTagName("head")[0]; + const newCss = document.createElement("link"); + newCss.setAttribute("rel", "stylesheet") + newCss.setAttribute("type", "text/css") + newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/compact-controls.css") + newCss.setAttribute("media", "all") + head.insertBefore(newCss, head.lastChild); +} + +function enableChatPortraitBorder() { + const head = document.getElementsByTagName("head")[0]; + const newCss = document.createElement("link"); + newCss.setAttribute("rel", "stylesheet") + newCss.setAttribute("type", "text/css") + newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/chat-portrait-border.css") + newCss.setAttribute("media", "all") + head.insertBefore(newCss, head.lastChild); +} + // Core UI function skinChat() { diff --git a/styles/app-ui.css b/styles/app-ui.css index 50302e7..ef2d277 100644 --- a/styles/app-ui.css +++ b/styles/app-ui.css @@ -34,6 +34,9 @@ #ui-top.offset { margin-left: -100px; + margin-left: unset; + left: -90px; + position: relative; } @@ -136,6 +139,8 @@ background: var(--pf2e-color-mono-dark); box-shadow: var(--glassy); border-radius: 3px; + position: static; + z-index: -1; } #context-menu li.context-item { @@ -167,7 +172,7 @@ } #fps { - width: 85px; + /* width: 85px; */ margin: 0px; align-self: space-evenly; display: none; @@ -186,7 +191,16 @@ padding-left: 5px; padding-right: 5px; text-shadow: var(--dorako-text-shadow); - font-weight: 500; + font-weight: 900; + position:absolute; + right:0px; + backdrop-filter: var(--dorako-vibrancy); + width: 55px; + justify-content: center; +} + +#fps label { + display: none; } @@ -205,9 +219,22 @@ .app.sidebar-popout .window-content{ background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + overflow: hidden; } .sidebar-popout { overflow: auto; resize: both; +} + +#players { + bottom: unset; + left: unset; + font-size: var(--playerfsize); + visibility: var(--playervis); + opacity: var(--opacity); + box-shadow: var(--glassy); + position: unset; + border: none; } \ No newline at end of file diff --git a/styles/chat-blind-whisper.css b/styles/chat-blind-whisper.css new file mode 100644 index 0000000..f47e67f --- /dev/null +++ b/styles/chat-blind-whisper.css @@ -0,0 +1,9 @@ +#chat-log .whisper { + background-color: var(--whisper-bg); + background-blend-mode: luminosity; +} + +#chat-log .blind { + background-color: var(--blind-bg); + background-blend-mode: luminosity; +} \ No newline at end of file diff --git a/styles/chat-dark.css b/styles/chat-dark.css index f470229..6570c6d 100644 --- a/styles/chat-dark.css +++ b/styles/chat-dark.css @@ -18,11 +18,15 @@ .dice-total:not(.statuseffect-message), .message-content .chat-damage-buttons button { box-shadow: var(--glassy); - background-color: hsla(0, 0%, 0%,0.0); border: none; color: white; } +.dice-roll .dice-formula:hover, +.dice-roll .dice-total:hover { + background-color: var(--pf2e-color-mono-dark); +} + .pf2e.chat-card .card-content { 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: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"); } @@ -34,4 +38,12 @@ .chat-message .table-draw .table-results .table-result img.result-image { filter: var(--filter-dark); +} + +.token-link, +.dmgBtn-container button { + box-shadow: var(--glassy); + border: none; + color: white; + background-color: var(--pf2e-color-mono-dark); } \ No newline at end of file diff --git a/styles/chat-portrait-border.css b/styles/chat-portrait-border.css new file mode 100644 index 0000000..737caa1 --- /dev/null +++ b/styles/chat-portrait-border.css @@ -0,0 +1,6 @@ +.portrait { + background-color: var(--pf2e-color-mono-dark); + border-radius: 50%; + box-shadow: var(--gold-and-glow); + margin: 1px; +} \ No newline at end of file diff --git a/styles/chat-rainbow.css b/styles/chat-rainbow.css index 626bb4f..13a9fbb 100644 --- a/styles/chat-rainbow.css +++ b/styles/chat-rainbow.css @@ -3,15 +3,36 @@ } #chat-log .message { - background-color: white; - background: var(--bg-current); - background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5), rgba(136, 30, 71, 0.74)), var(--bg-current); - background-image: linear-gradient(135deg, orange 60%, cyan), var(--bg-current); + background: var(--bg-light); + /* background-image: linear-gradient(to bottom, var(--paizo-red), var(--paizo-blue)), var(--bg-current); */ + /* background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5), rgba(136, 30, 71, 0.74)), var(--bg-current); */ + /* background-image: linear-gradient(135deg, orange 60%, cyan), var(--bg-current); */ background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%), var(--bg-current); - background-size: cover; - border: none; - box-shadow: var(--gold-and-glow); - color: var(--pf2e-body-primary); +} + +.pf2e.chat-card .card-content, +.pf2e.chat-card .card-header h3, +.pf2e.chat-card .card-header h4, +.pf2e.chat-card .card-content p { + mix-blend-mode: soft-light; + mix-blend-mode: color-burn; +} + + +.pf2e.chat-card .card-footer { + mix-blend-mode: overlay; +} + +#chat-log [data-pf2-check], +#chat-log a.entity-link, +#chat-log a.content-link, +#chat-log a.inline-roll { + mix-blend-mode: luminosity; +} + +.flavor-text > strong, +.flavor-text > b { + mix-blend-mode: overlay; } \ No newline at end of file diff --git a/styles/chat.css b/styles/chat.css index 9415a2a..f957286 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -8,6 +8,7 @@ #chat-log .message .message-header { /* display: grid; grid: "sender info"minmax(min-content, max-content) "text text"minmax(min-content, max-content) /2fr 1fr; */ + text-shadow: var(--header-text-shadow); } #chat-log .message .message-header .message-metadata { @@ -16,6 +17,7 @@ #chat-log .tag { border: 1px solid rgba(255,255,255,0.5); + text-shadow: none; } /* #chat-log .message .message-header.flexrow { @@ -100,6 +102,7 @@ .message-sender { white-space: pre-wrap; + place-self: center; } @@ -138,9 +141,6 @@ padding-left: 5px; } */ -.whisper-to * { - background-color: var(--whisper-bg); -} .message-content .dice-roll .dice-result .dice-total.statuseffect-message, .message-content .dice-roll .dice-result .dice-total.statuseffect-message:hover { @@ -184,14 +184,6 @@ margin-left: 5px } */ -.rolltype { - background: var(--pf2e-translucent-middle); - border-radius: 3px; - border: 1px solid; - line-height: normal; - padding: 2px; - text-shadow: var(--pf2e-shadow-is-dark); -} .pf2e.chat-card .card-header { @@ -328,19 +320,9 @@ padding: 5px; } */ -#chat-log .message .message-header .message-metadata, -#chat-log .message .message-header .message-sender { - color: var(--pf2e-header-text-color); - background-color: var(--paizo-red); +#chat-log .message .message-header { text-shadow: var(--pf2e-text-shadow-is-dark); - /* margin-top: 7px; - margin-bottom: 10px; */ - /* border-bottom: 1px solid black; */ - /* margin-left: -5px; - margin-top: -5px; - padding-left: 5px; - padding-top: 5px; - border-radius: 5px 0px 0px 0px; */ + color: var(--pf2e-header-text-color); } /* #chat-log .message .message-header .message-metadata { @@ -449,7 +431,6 @@ button { } #chat-log .message .message-header .message-metadata { - grid-area: info; align-items: center; justify-content: flex-end; display:flex; @@ -458,12 +439,6 @@ button { } -#chat-log .message .message-header .flavor-text, -#chat-log .message .message-header .whisper-to { - grid-area: text; - /* padding: var(--body-padding); */ -} - .message.dfce-cm-top { border-bottom-style: none !important; } @@ -543,6 +518,7 @@ button { --pf2e-translucent-very: var(--pf2e-translucent-very-for-light); --filter-img: var(--filter-light); + --header-text-shadow: var(--pf2e-shadow-is-dark); --pf2e-header-text-color: var(--pf2e-body-primary); --bg-current: var(--bg-light); @@ -557,15 +533,15 @@ button { --pf2e-translucent-very: var(--pf2e-translucent-very-for-dark); --filter-img: var(--filter-dark); */ - + --chat-portrait-size: 50px; --filter-dark: invert(100%) drop-shadow(0px 1px 1px black); --filter-light: drop-shadow(0px 1px 0px white); --color-text-dark-secondary: rgb(214, 214, 214); --pf2e-half-transparent-light: hsla(0, 0%, 100%,0.5); - --pf2e-half-transparent-dark-: hsla(0, 0%, 0%,0.5); - --pf2e-shadow-is-dark: 0px 1px var(--pf2e-dark-half-transparent); - --pf2e-shadow-is-light: 0px 1px var(--pf2e-light-half-transparent); + --pf2e-half-transparent-dark: hsla(0, 0%, 0%,0.5); + --pf2e-shadow-is-dark: 0px 1px var(--pf2e-half-transparent-dark); + --pf2e-shadow-is-light: 0px 1px var(--pf2e-half-transparent-light); --pf2e-text-shadow: 0px 1px var(--pf2e-shadow-dynamic); --pf2e-translucent-middle-for-light: hsla(0, 0%, 80%,0.5); --pf2e-translucent-middle-for-dark: hsla(0, 0%, 80%,0.5); @@ -597,6 +573,11 @@ button { padding-right: 5px; */ } +.message-content .chat-damage-buttons button { + padding-left: 1px; + padding-right: 1px; +} + .message-content .chat-damage-buttons button, .dice-tooltip .dice-rolls .roll, .pf2e.chat-card .card-content p, @@ -684,28 +665,18 @@ message-content .chat-damage-buttons button { } .portrait { - background-color: var(--pf2e-color-mono-dark); - border-radius: 50%; - box-shadow: var(--gold-and-glow); - margin: 1px; - height:36px; - width:auto; + height: var(--chat-portrait-size); + width: auto; transition: transform 0.15s ease-in-out; + z-index: 1; } + .portrait:hover { transition: transform 0.15s ease-in-out; transform: scale(2.5) translate(13px,13px); } -.whisper .flavor-text, -.blind .flavor-text, -.flavor-text, -.whisper-to { - /* background-color: unset; */ - background-image: none; -} - /* Adds border around flavor text */ /* .flavor-text { border-image-repeat: repeat; @@ -721,15 +692,6 @@ message-content .chat-damage-buttons button { 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: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"); } */ -#chat-log .whisper { - background-color: var(--whisper-bg); - background-blend-mode: luminosity; -} - -#chat-log .blind { - background-color: var(--blind-bg); - background-blend-mode: luminosity; -} .message-content .chat-damage-buttons button>.transparent-half { background: rgba(0,0,0,0.5); @@ -743,10 +705,7 @@ message-content .chat-damage-buttons button { left: unset; } -.message-content .chat-damage-buttons button .plus { - color: var(--pf2e-body-inverse); - text-shadow: none; -} + @@ -781,16 +740,6 @@ message-content .chat-damage-buttons button { padding: 5px; } -.whisper-to * { - background: var(--pf2e-translucent-middle); - border-radius: 3px; - border: 1px solid; - line-height: normal; - padding: 2px; - text-shadow: var(--pf2e-shadow-is-dark); -} - - #chat-log [data-pf2-check], @@ -802,21 +751,28 @@ message-content .chat-damage-buttons button { border-radius: 3px; } +#chat-log button { + transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; +} #chat-log .pf2e.chat-card .card-buttons button { margin: 0px; - background: var(--paizo-red); + background-color: var(--paizo-red); color: white; text-shadow: var(--pf2e-shadow-is-dark); line-height: 20px; } +#chat-log .pf2e.chat-card .card-buttons button:hover { + background-color: var(--paizo-red-bright); +} + #chat-log .pf2e.chat-card [data-visibility=owner] button { - background: var(--pf2e-color-mono-dark); + background-color: var(--pf2e-color-mono-dark); } #chat-log .pf2e.chat-card [data-visibility=owner] button:hover { - background: var(--paizo-red); + background-color: var(--paizo-red); color: white; text-shadow: var(--pf2e-shadow-is-dark); } @@ -830,12 +786,12 @@ message-content .chat-damage-buttons button { #chat-log .pf2e.chat-card .card-buttons .hidden-to-others { border: none; - background: var(--paizo-blue); + background-color: var(--paizo-blue); } #chat-log .pf2e.chat-card .card-buttons .hidden-to-others:hover { border: none; - background: var(--paizo-blue-bright); + background-color: var(--paizo-blue-bright); } @@ -843,8 +799,7 @@ message-content .chat-damage-buttons button { .dice-total:hover, .dice-roll .dice-formula:hover, -#chat-log button:hover, -#chat-log button:focus { +#chat-log button:hover { transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; color: white; /* box-shadow: 0px 0px 10px rgba(245,222,179,0.2) inset, var(--glassy); */ @@ -852,6 +807,7 @@ message-content .chat-damage-buttons button { cursor: pointer; } + .dice-total:hover, .dice-roll .dice-formula:hover { transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; @@ -880,29 +836,88 @@ message-content .chat-damage-buttons button { gap: 5px; } +button.half-damage .fa-heart-broken::after { + content:"\f7a9"; + font-family: "Font Awesome 5 Free"; + color:hsla(0, 0%, 50%, 0.5); + display: block; + z-index: 1; + position: absolute; + top: -1px; + left: 0; + width: 50%; + overflow: hidden; +} + +#chat-log .message-content .chat-damage-buttons button:hover { + text-shadow: var(--pf2e-shadow-is-dark); +} + #chat-log .message-content .chat-damage-buttons button.shield-block { - background-color: var(--paizo-blue-dark); + /* background-color: var(--paizo-blue-dark); + color: white; + text-shadow: var(--pf2e-shadow-is-dark); */ +} + +/* #chat-log .message-content .chat-damage-buttons button.half-damage:hover { + background-color: var(--paizo-red-dark); +} + +#chat-log .message-content .chat-damage-buttons button.double-damage:hover { + background-color: var(--paizo-red-bright); +} + +#chat-log .message-content .chat-damage-buttons button.triple-damage:hover { + background-color: var(--paizo-red-bright); +} */ + + +#chat-log .message-content .chat-damage-buttons button.shield-block .fa-shield-alt { + color: #868686; +} + +#chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated .fa-shield-alt, +#chat-log .message-content .chat-damage-buttons button.shield-block:hover .fa-shield-alt { color: white; - text-shadow: var(--pf2e-shadow-is-dark); } #chat-log .message-content .chat-damage-buttons button.shield-block:hover { + color: white; background-color: var(--paizo-blue); } #chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated { + color: white; background-color: var(--paizo-blue-bright); } -#chat-log .message-content .chat-damage-buttons button.shield-blockshield-activated, -#chat-log .message-content .chat-damage-buttons button.shield-block:hover { +#chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated:hover { color: white; - text-shadow: var(--pf2e-shadow-is-dark); + background-color: var(--paizo-blue); } -#chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated:hover { - background-color: var(--paizo-blue); + +#chat-log .message-content .chat-damage-buttons button.heal-damage .plus { + color: var(--pf2e-body-inverse); + text-shadow: none; +} + +#chat-log .message-content .chat-damage-buttons button.heal-damage:hover { + color: white; + background-color: darkgreen; } +#chat-log .message-content .chat-damage-buttons button.heal-damage:hover .plus{ + color: darkgreen; +} + +/* .message-content .chat-damage-buttons button.heal-damage .label, +.message-content .chat-damage-buttons button>i.fa-heart { + color: var(--pf2e-body-primary); +} */ + + + + .pf2e.chat-card .card-buttons { display: flex; @@ -942,30 +957,30 @@ message-content .chat-damage-buttons button { } [data-visibility=gm]:is(div,em,h4,p,span,strong) { - background: var(--pf2e-translucent-middle); - color: var(--pf2e-body-primary); - text-shadow: var(--pf2e-text-shadow); border: 1px dotted; border-radius: 5px; cursor: help; } +.message-content [data-visibility=gm]:is(div,em,h4,p,span,strong) { + background: hsla(0,0%,50%,0.5); + color: var(--pf2e-body-primary); + text-shadow: var(--pf2e-text-shadow); +} + [data-visibility=gm]:is(div,em,h4,p,span,strong) { width: 100%; margin-bottom:0px; } #chat-log .message .message-header .message-sender[data-visibility=gm]:is(div,em,h4,p,span,strong){ - background: var(--pf2e-translucent-middle); + background: hsla(0,0%,50%,0.5); } .flavor-text [data-visibility=gm] { margin-top:0px; } -.flavor-text > strong { - text-shadow: var(--pf2e-text-shadow); - color: var(--pf2e-body-secondary); -} + .flavor-text br { display: none; @@ -973,17 +988,9 @@ message-content .chat-damage-buttons button { .whisper-to { display: flex; - justify-content: space-around; + justify-content: space-between; } -/* .whisper-to, -.flavor-text { - border-top: 1px solid var(--pf2e-color-ornament); - padding-bottom: 3px; - padding-top: 3px; - border-bottom: 1px solid var(--pf2e-color-ornament); - background-color: rgba(245,222,179,0.2); -} */ /* Cautious Gamemaster heal message */ #chat-log .message.emote .message-content { @@ -1052,7 +1059,7 @@ message-content .chat-damage-buttons button { font-size: xx-small; display:flex; gap:5px; - flex:none; + /* flex:none; */ } /* Red footer */ @@ -1089,17 +1096,9 @@ message-content .chat-damage-buttons button { box-shadow: var(--gold-and-glow); color: var(--pf2e-body-primary); padding: 0; + text-shadow: var(--pf2e-shadow-dynamic); } -#chat-log .whisper { - background-color: var(--whisper-bg); - background-blend-mode: luminosity; -} - -#chat-log .blind { - background-color: var(--blind-bg); - background-blend-mode: luminosity; -} /* HEADER */ @@ -1107,13 +1106,20 @@ message-content .chat-damage-buttons button { /* Todo */ #navigation #scene-list .scene.context { - color: unset; - border: unset; - background: unset; - border-bottom: unset; + /* color: unset; */ + border: none; + /* background: unset; + border-bottom: unset; */ box-shadow: var(--glassy); } +#navigation #scene-list .scene.context { + background-color: var(--paizo-red); +} +#navigation #scene-list .scene.gm.context { + background-color: var(--paizo-blue-bright); +} + .tooltip { background-color: var(--pf2e-color-mono-dark); box-shadow: var(--glassy); @@ -1148,6 +1154,7 @@ table.pf2-table td, table.pf2-table th { #chat-log .message.dfce-cm-middle, #chat-log .message.dfce-cm-bottom { margin-top:-6px; + background-position: left 0px top -100px; } #chat-log .message.dfce-cm-middle .message-header, @@ -1191,4 +1198,112 @@ div#scrollToBottom:hover { display:flex; flex-direction: column; align-items: center; + gap: 2px; +} + +.message-content .chat-damage-buttons button>.transparent-half { + display: none; +} + + +.flavor-text > strong, +.flavor-text > b { + text-shadow: var(--pf2e-text-shadow); + color: var(--pf2e-body-primary); +} + +.pf2e.chat-card .card-buttons[data-visibility=owner], +.pf2e.chat-card .card-buttons .spell-attack-buttons { + flex-direction: row; +} + +.pf2e.chat-card .card-buttons-two-column { + display: flex; + gap: 3px; + flex-direction: row; + width: 100%; +} + +.chat-message .message-header { + line-height: normal; +} + +.header-meta { + background: hsla(0,0%,50%,25%); + border-radius: 3px; + border: 1px solid hsla(0,0%,50%,50%); + padding: 2px; + /* text-shadow: var(--pf2e-text-shadow); */ + font-size: xx-small; + align-self: center; + text-align: center; + /* line-height: normal; */ + } + +.portrait-wrapper { + width: var(--chat-portrait-size); + display: flex; + flex: none; + justify-content: center; + align-items: center; +} + +#chat-log .message .message-header .message-sender { + flex: 0 1 auto; +} + + + +.sender-wrapper { + display: flex; + gap: 3px; + /* align-content: center; + flex-wrap: wrap; */ + flex-direction: column; + justify-content: left; + align-self: center; +} + +.sender-wrapper .message-sender, +.sender-wrapper .player-name { + align-self: flex-start; +} + +/* Persistent Damage */ + +.pf2e-pd-card .card-content, .pf2e-pd-card .persistent-header { + font-weight: 500; +} + +.pf2e-pd-card .flat-check-failure { + text-rendering: optimizeLegibility; + background-color: #ff4500; border-radius: 2px; + box-shadow: inset 0 0 0 1px rgb(0 0 0 / 50%); + color: white; + font-family: var(--sans-serif); + font-size: 10px; + font-weight: 500; + letter-spacing: .05em; + line-height: 1; + padding: 3px 4px; + text-transform: uppercase; +} + +.pf2e-pd-card .flat-check-success { + text-rendering: optimizeLegibility; + background-color: blue; + border-radius: 2px; + box-shadow: inset 0 0 0 1px rgb(0 0 0 / 50%); + color: white; + font-family: var(--sans-serif); + font-size: 10px; + font-weight: 500; + letter-spacing: .05em; + line-height: 1; + padding: 3px 4px; + text-transform: uppercase; +} + +.flavor-text div.degree-of-success .success:not([data-visibility=gm]) { + color: #8080FF; } \ No newline at end of file diff --git a/styles/compact-controls.css b/styles/compact-controls.css new file mode 100644 index 0000000..ca17314 --- /dev/null +++ b/styles/compact-controls.css @@ -0,0 +1,44 @@ + +#controls .main-controls .scene-control:not(.active), +#controls .sub-controls .control-tool:not(.active, .toggle){ + display: none; + +} + +#controls { + pointer-events: all; + gap: 5px; +} + +#controls:hover .main-controls .scene-control, +#controls:hover .sub-controls .control-tool { + 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; +} + + + +#navigation #scene-list .scene:not(.active), +#navigation #nav-toggle { + display: none; +} + +#navigation { + pointer-events: all; +} + +#navigation:hover #scene-list .scene { + display: flex; +} diff --git a/styles/controls.css b/styles/controls.css index 5beb5a7..7a062c0 100644 --- a/styles/controls.css +++ b/styles/controls.css @@ -51,6 +51,8 @@ #controls { padding-top: 0px; margin-top: var(--edge-margin); + margin-left: unset; + transition: unset; } #controls ol.main-controls { diff --git a/styles/custom-hotbar.css b/styles/custom-hotbar.css index b99b118..3c3eedb 100644 --- a/styles/custom-hotbar.css +++ b/styles/custom-hotbar.css @@ -35,6 +35,11 @@ box-shadow: var(--glassy); } +#custom-hotbar #custom-macro-list.flexrow { + background-color: unset; + box-shadow: none; +} + #custom-hotbar { display: flex; align-items: center; @@ -51,7 +56,7 @@ #custom-hotbar .bar-controls, #custom-hotbar #custom-macro-list { - gap: 5px; + gap: 3px; height: unset; margin: 0px; } @@ -89,7 +94,14 @@ /*background-color: yellow !important;*/ padding: 5px; flex-wrap: nowrap; - flex: 0 0 555px; + flex: 0 0 545px; +} + + + +#custom-hotbar .macro.inactive { + box-shadow: var(--glassy); + border: none; } #custom-hotbar-page-controls.bar-controls.flexcol { diff --git a/styles/dorako-ui.css b/styles/dorako-ui.css index 696c779..12875d5 100644 --- a/styles/dorako-ui.css +++ b/styles/dorako-ui.css @@ -7,6 +7,7 @@ --edge-margin: 5px; --dorako-bg-glass: rgba(120, 120, 120, 0.20); + --dorako-bg-glass: rgba(120, 120, 120, 0.50); --dorako-bg-dark: rgba(20, 20, 20, 0.60); --dorako-orange: rgba(255, 100, 0, 0.5); /* --dorako-bg-current: var(--dorako-bg-glass); */ @@ -16,8 +17,8 @@ --blind-bg: #A57aA5; --whisper-bg: #E3E3FF; - /* --dorako-vibrancy: brightness(2.0) contrast(1.2) blur(5px); */ --dorako-vibrancy: none; + /* --dorako-vibrancy: brightness(2.0) contrast(1.2) blur(5px); */ /* --dorako-vibrancy-active: brightness(1.5) contrast(1.0) blur(15px); --dorako-vibrancy-inactive: brightness(0.5) contrast(1.0) blur(15px); */ @@ -31,16 +32,23 @@ -1px 1px 1px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 0.5); - --paizo-red: rgb(94, 0, 0); - --paizo-red-glass: rgba(94, 0, 0,1); - --paizo-blue-dark: rgba(16, 21, 73); - --paizo-blue-dark: hsl(234, 64%, 15%); - --paizo-blue: rgb(23, 31, 105); - --paizo-blue: hsl(234, 64%, 25%); - --paizo-blue-bright: rgb(30, 41, 137); - --paizo-blue-bright: hsl(234, 64%, 35%); - --paizo-blue-glass-inactive:rgba(23, 31, 105,0.2); - --paizo-blue-glass:rgba(23, 31, 105,0.5); + + + --primary-hue: 0; + --primary-sat: 100%; + --primary-lvl: 18%; + + --secondary-hue: 234; + --secondary-sat: 64%; + --secondary-lvl: 25%; + + --paizo-red-dark: hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-lvl) - 10%)); + --paizo-red: hsl(var(--primary-hue), var(--primary-sat), var(--primary-lvl)); + --paizo-red-bright: hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-lvl) + 10%)); + + --paizo-blue-dark: hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lvl) - 10%)); + --paizo-blue: hsl(var(--secondary-hue), var(--secondary-sat), var(--secondary-lvl)); + --paizo-blue-bright: hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lvl) + 10%)); --color-shadow-highlight: var(--paizo-red); --color-shadow-primary: var(--paizo-blue); @@ -322,4 +330,4 @@ button { button:hover { animation-play-state: paused; -} */ \ No newline at end of file +} */ diff --git a/styles/header-blue.css b/styles/header-blue.css new file mode 100644 index 0000000..677f261 --- /dev/null +++ b/styles/header-blue.css @@ -0,0 +1,9 @@ +#chat-log .message .message-header { + --pf2e-header-text-color: white; + background-color:var(--paizo-blue); + background-image: var(--bg-light); + background-size: cover; + background-blend-mode: multiply; + box-shadow: var(--gold-and-glow); + margin-bottom: 2px; +} \ No newline at end of file diff --git a/styles/header.css b/styles/header-red.css similarity index 100% rename from styles/header.css rename to styles/header-red.css diff --git a/styles/hotbar.css b/styles/hotbar.css index 550009b..bc327e7 100644 --- a/styles/hotbar.css +++ b/styles/hotbar.css @@ -190,4 +190,43 @@ gap: 2px; margin: 0px; flex: 1; +} + +/* Monk's hotbar */ +.hotbar-page { + position: absolute; + bottom: 53px; + width: 592px; + left: -22px; + transition: unset; + gap: 2px; + max-height: 270px; + overflow: visible; +} + +.hotbar-page .macro-list { + flex: 0 0 518px; + height: 100%; + list-style: none; + margin:0px; + padding: 0px; + border: none; + border-radius: 3px; + gap: 2px; +} + +.hotbar-page.opening { + overflow: visible; +} + +/* Minimal UI */ +#hotbar:hover { + bottom: 0px; + margin-bottom: var(--edge-margin); +} + +#hotbar #macro-list:hover { + border-top: none; + box-shadow: none; + transition: unset; } \ No newline at end of file diff --git a/styles/navigation.css b/styles/navigation.css index eef2936..b99dbd7 100644 --- a/styles/navigation.css +++ b/styles/navigation.css @@ -32,6 +32,7 @@ #navigation { margin-top: var(--edge-margin); + left: 10px; } /* #navigation #scene-list li { @@ -174,6 +175,8 @@ #navigation #scene-list .scene { transition: background-color 0.15s ease-out; + position: static; + z-index: 1; } #navigation #scene-list .scene:hover { diff --git a/styles/sidebar.css b/styles/sidebar.css index 54c113e..32cd8f9 100644 --- a/styles/sidebar.css +++ b/styles/sidebar.css @@ -88,21 +88,22 @@ #chat-form { - height: 50px; - flex: 0 0 25px; + flex: 0 0 70px; } #chat-form textarea { min-height: 50px; - height: 50%; + height: 100%; background-image: none; border: none; - background-color: rgba(200, 200, 200, 0.5); + background-color: rgba(200, 200, 200, 0.8); box-shadow: var(--glassy); overflow: visible; margin-left: 2px; margin-right: 2px; width: -webkit-fill-available; + font-size: 16px; + font-family: var(--font-primary); } /* Scrollbar */ @@ -153,6 +154,11 @@ margin: 0px; } -#sidebar.app { +/* #sidebar.app { resize:horizontal; +} */ + +/* CGP */ +#cgmp-typing-notify.hidden { + display: none; } \ No newline at end of file diff --git a/templates/base-chat-message.html b/templates/base-chat-message.html index befd417..8ea751c 100644 --- a/templates/base-chat-message.html +++ b/templates/base-chat-message.html @@ -5,13 +5,17 @@
{{#if (showSpeakerImage message)}}
+
{{#if (useVideoForSpeakerImage message)}} -
{{/if}} -

{{alias}}

+
+

{{alias}}

+
@@ -22,7 +26,7 @@

{{alias}}

{{#if isWhisper}} - {{localize 'CHAT.To'}}: {{whisperTo}} +
{{localize 'CHAT.To'}}: {{whisperTo}}
{{/if}}
diff --git a/templates/damage-card-flavor.html b/templates/damage-card-flavor.html new file mode 100644 index 0000000..d28e188 --- /dev/null +++ b/templates/damage-card-flavor.html @@ -0,0 +1,31 @@ +
+ {{#if flavor}} + {{{flavor}}} + {{/if}} +
+{{#if formula}} +
+ {{formula}} +{{/if}} +{{#if traits}} +
+
+ {{#each traits as |trait|}} + {{localize (lookup @root.dataset.traits.weapon trait)}} + {{/each}} +
+{{/if}} +{{#if breakdown}} +
+
+ {{#each breakdown as |part|}} + {{part.label}} + {{/each}} +
+{{/if}} +{{#if notes}} +
+ {{#each notes as |note|}} + {{{enrichHTML note}}}
+ {{/each}} +{{/if}}