From 90e3491c5e0efb0f2b2a5babac522a615c74dbf6 Mon Sep 17 00:00:00 2001 From: Dorako Date: Wed, 9 Mar 2022 17:09:36 +0100 Subject: [PATCH] 1.3.9 --- CHANGELOG.md | 53 +- module.json | 32 +- scripts/dorako-ui.js | 1666 ++++++++++++++++++---------------------- styles/chat.css | 255 +++--- styles/core-trim.css | 1157 +++++++++++++++++++++++----- styles/dorako-trim.css | 85 +- 6 files changed, 1978 insertions(+), 1270 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4089cb1..87fdf52 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,23 +1,43 @@ +# 1.3.9 + +Fixed issue that caused degree-of-success colors to disappear. Added support for Damage Log's revert functionality. Removed sheet stylings, as the system changes them too frequently. + # 1.3.8 + Added support for the new damage buttons on attack cards. Fixed issue causing multiple elements in chat messages to create newlines. + # 1.3.7 + Fixed styling of worn-related buttons and crafting screen on dark mode pc sheets. Added minor support for Navigation Presets module. + # 1.3.6 + Fixed top left controls that broke in recent core foundry patch. + # 1.3.5 + Fixed dark player sheets that broke in recent system patch. Made macro bare never fade in compact mode, as it doesn't re-appear when hovering while dragging a macro. + # 1.3.4 + Changed compact mode to client setting. Fixed issue in dark sheets. Themed foundry notifications. Fixed styling that broke due to data visibility changes in the newest foundry release # 1.3.3 + Fixed navbar context menu issue. Fixed Confetti overlap with Dice Tray. Added 'Plain' theme for PC sheets. Fixed secret text in NPC sheets. + # 1.3.2 + Fixed an issue that caused the module to be incompatible with hosting via the Forge. + # 1.3.1 + Added support for Damage Log. Fixed display for non-self-roll damage updates. + # 1.3.0 + Made players box and macro bar fade out in compact mode, fix'd a variable overwriting issue affecting messages. Renamed 'Player tint' header to 'Player color'. Made header text color change dynamically depending on player color, when header background is based on that. Made it so that bright colors affect the header more. Fixed placeholder text shadow. Added highlight to active sidebar tab. Fixed styling of 'popped out' individual messages. Renamed 'Blind GM Rolls' to 'Secret' on the chat rolltype indicator. @@ -25,33 +45,62 @@ Fixed a bug where some settings didn't apply after reload, because Foundry reloa Added support for Koboldworks Turn Announcer (Remember to change its module settings appropriately). Added support for Confetti. Added support for Monarch. + # 1.2.7 + Added UI to Monk's hotbar module, tuned the 're-appearance' zone of the compact UI. + # 1.2.6 + Removed an unneccesary log statement, unbroke compact ui, unbroke dark sheet mode, made setting-changes force-refresh. + # 1.2.5 + Unbroke the new hand buttons + # 1.2.4 + # 1.2.3 + Fixed a mystery man, added toggles for minimal-ui inspired compact controls, and an experimental toggle for dark sheets. + # 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 + Fixes for Token HUD resources, TAH spell buttons, Monk's Little Details round counter. -Did *a lot* of groundwork for dark/light toggle, and managed to re-introduce the red header to light theme. This version ships with light theme "on". +Did _a lot_ of groundwork for dark/light toggle, and managed to re-introduce the red header to light theme. This version ships with light theme "on". + # 1.1.0 + Lots of changes to the card styling, the default styling is now a 'dark mode', options for 'light mode' coming later. + # 1.0.6 + # 1.0.5 + Centered hotbar setting, edge-margin setting, v-padding decrease in cards, navbar color swap + tweaks, SmallTime patch, Chat Portrait support, fix for 'flavor-text' + # 1.0.4 + Added support for Combat Enhancements module + # 1.0.3 + Fixes to navbar and chat header + # 1.0.2 + # 1.0.1 + # 1.0.0 -Release - broken \ No newline at end of file + +Release - broken diff --git a/module.json b/module.json index aab01a7..ca812e1 100644 --- a/module.json +++ b/module.json @@ -1,19 +1,15 @@ { - "name": "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.3.8", - "minimumCoreVersion": "9", - "compatibleCoreVersion": "9", - "system": ["pf2e"], - "scripts": [ - "scripts/dorako-ui.js" - ], - "templates": [ - "templates/*" - ], - "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.3.8.zip", - "manifest": "https://github.com/Dorako/pf2e-dorako-ui/raw/main/module.json" - } \ No newline at end of file + "name": "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.3.9", + "minimumCoreVersion": "9", + "compatibleCoreVersion": "9", + "system": ["pf2e"], + "scripts": ["scripts/dorako-ui.js"], + "templates": ["templates/*"], + "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.3.9.zip", + "manifest": "https://github.com/Dorako/pf2e-dorako-ui/raw/main/module.json" +} diff --git a/scripts/dorako-ui.js b/scripts/dorako-ui.js index 188414b..1ed63d5 100644 --- a/scripts/dorako-ui.js +++ b/scripts/dorako-ui.js @@ -1,4 +1,3 @@ - // function cleanHTML() { // document.getElementsByTagName("html")[0].style = null; // $("head").children('link[href="css/style.css"]')[0].disabled = true; @@ -10,18 +9,19 @@ // setTimeout(cleanHTML, 10000); Hooks.on("ready", async function () { - jQuery.fx.off = true; + jQuery.fx.off = true; }); -const debouncedReload = foundry.utils.debounce(() => window.location.reload(), 500); +const debouncedReload = foundry.utils.debounce( + () => window.location.reload(), + 500 +); // document.addEventListener("DOMContentLoaded", function() { // $("head").children('link[href="css/style.css"]')[0].disabled = true; // injectCSS("core-trim"); // }); - - // document.addEventListener("DOMContentLoaded", function() { // function myInject() { // // ID add @@ -49,947 +49,811 @@ const debouncedReload = foundry.utils.debounce(() => window.location.reload(), 5 // a.find("#settings-game").append(toInsert) // }); - Hooks.on("renderChatMessage", (chatMessage, html, messageData) => { - injectMessageTag(html, messageData); - injectWhisperParticipants(html, messageData); - injectPlayerName(html, messageData); + injectMessageTag(html, messageData); + injectWhisperParticipants(html, messageData); + injectPlayerName(html, messageData); }); function injectPlayerName(html, messageData) { - if (messageData.author === undefined) return; - if (game.settings.get('pf2e-dorako-ui', 'enable-player-tags')) { - const messageSenderElem = html.find('.sender-wrapper'); - const playerName = messageData.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); - } + if (messageData.author === undefined) return; + if (game.settings.get("pf2e-dorako-ui", "enable-player-tags")) { + const messageSenderElem = html.find(".sender-wrapper"); + const playerName = messageData.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); + } } 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("Secret"); - 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); - } - } + 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("Secret"); + 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 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; + const authorId = messageData.message.user; + const userId = game.user.data._id; - if (!isWhisper) return; - if (userId !== authorId && !whisperTargetIds.includes(userId) ) return; + if (!isWhisper) return; + if (userId !== authorId && !whisperTargetIds.includes(userId)) return; - // remove the old whisper to content, if it exists - html.find(".whisper-to").detach(); + // remove the old whisper to content, if it exists + html.find(".whisper-to").detach(); - // if this is a roll - if (isRoll || isSelf) return; + // if this is a roll + if (isRoll || isSelf) return; - const messageHeader = html.find(".message-header"); + const messageHeader = html.find(".message-header"); - const whisperParticipants = $(""); - whisperParticipants.addClass("whisper-to"); + const whisperParticipants = $(""); + whisperParticipants.addClass("whisper-to"); - const whisperFrom = $(""); - whisperFrom.text(`From: ${alias}`); - whisperFrom.addClass("header-meta"); + const whisperFrom = $(""); + whisperFrom.text(`From: ${alias}`); + whisperFrom.addClass("header-meta"); - const whisperTo = $(""); - whisperTo.text(`$to: ${whisperTargetString}`); - whisperTo.addClass("header-meta"); + const whisperTo = $(""); + whisperTo.text(`$to: ${whisperTargetString}`); + whisperTo.addClass("header-meta"); - whisperParticipants.append(whisperFrom); - whisperParticipants.append(whisperTo); - messageHeader.append(whisperParticipants); + whisperParticipants.append(whisperFrom); + whisperParticipants.append(whisperTo); + messageHeader.append(whisperParticipants); } -Hooks.once('init', async function () { - CONFIG.ChatMessage.template = "modules/pf2e-dorako-ui/templates/base-chat-message.html"; - - Handlebars.registerHelper("getSpeakerImage", function (message) { - const speaker = message.speaker; - if (speaker) { - if (speaker.token) { - const token = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token); - if (token) { - return token.data.img; - } - } - - if (speaker.actor) { - const actor = Actors.instance.get(speaker.actor); - if (actor) { - return actor.data.img; - } - } - } - - return "icons/svg/mystery-man.svg"; - }); - - Handlebars.registerHelper("showSpeakerImage", function (message) { - const insertSpeakerImage = game.settings.get("pf2e-dorako-ui", "insertSpeakerImage"); - if (!insertSpeakerImage) { - return false; - } - - const speaker = message.speaker; - if (!speaker) { - return false; - } - - 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 true; - } - } - } - - 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 true; - } - } - } - - if (!bHasImage) { - return false; - } - - - return true; - }); - - Handlebars.registerHelper("useVideoForSpeakerImage", function (message) { - const speaker = message.speaker; - if (!speaker) { - return false; - } else { - let imageName = ""; - if (speaker.token) { - const token = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token); - if (token) { - imageName = token.data.img; - } - } - - if (!imageName && speaker.actor) { - const actor = Actors.instance.get(speaker.actor); - if (actor) { - imageName = actor.data.img; - } - } - - return imageName?.endsWith("webm") || imageName?.endsWith("mp4") || imageName?.endsWith("ogg") || false; - } - - return false; - }); - - Handlebars.registerHelper("getHeaderStyle", function (message) { - const user = game.users.get(message.user); - - const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); - if (headerStyle === "tint") { - return `background-color:${user.data.color}`; - } - return ""; - }); - - Handlebars.registerHelper("playerId", function (message) { - const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); - if (headerStyle === "tint") { - const user = game.users.get(message.user); - const hexColor = user.data.color.replace("#", ""); - var r = parseInt(hexColor.substr(0,2),16); - 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 root = document.querySelector(':root').style; - let textColor; - if (yiq >= 128) { - return "dark-header-text"; - } else { - return "light-header-text"; - } - } else if (headerStyle === "blue" || headerStyle === "red") { - return "light-header-text"; - } else if (headerStyle === "none") { - const theme = game.settings.get("pf2e-dorako-ui", "theme"); - if (theme === "light") { - return "dark-header-text"; - } else if (theme === "dark" || theme === "rainbow") { - return "light-header-text"; - } else { - return ""; - } - } - return ""; - }); - - Handlebars.registerHelper("baseTheme", function (message) { - const theme = game.settings.get("pf2e-dorako-ui", "theme"); - if (theme === "light") { - return "light-theme"; - } else if (theme === "dark" || theme === "rainbow") { - return "dark-theme"; - } else { - return ""; - } - }); - - Handlebars.registerHelper("getTitleStyle", function (message) { - const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); - if (headerStyle === "tint") { - return true; - } - return false; - }); - - Handlebars.registerHelper("getUserColor", function (message) { - const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); - if (headerStyle === "none") { - return "transparent"; - } - const user = game.users.get(message.user); - return user.data.color; - }); - - Handlebars.registerHelper("getHeaderStyle", function () { - const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); - return headerStyle; - }); - - game.settings.register("pf2e-dorako-ui", "theme", { - name: "Theme", - hint: "Theme affects chat messages.", - scope: "client", - config: true, - default: "Light", - type: String, - choices: { - "light": "Light", - "dark": "Dark", - "rainbow": "???" - }, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register("pf2e-dorako-ui", "headerStyle", { - name: "Header style", - hint: "Pick between available presets.", - scope: "client", - config: true, - default: "none", - type: String, - choices: { - "red": "Red", - "blue": "Blue", - "tint": "Player Color", - "none": "None" - }, - onChange: () => { - debouncedReload(); - } - }); - - 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, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register("pf2e-dorako-ui", "chat-portrait-size", { - name: "Chat portrait size", - hint: "Suggested size of 36px.", - scope: "client", - type: Number, - default: 40, - range: { - min: 10, - max: 60, - step: 1 - }, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - 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, - onChange: () => { - debouncedReload(); - } - }); - - 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, - onChange: () => { - debouncedReload(); - } - }); - - 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: "client", - type: String, - default: "both", - config: true, - choices: { - "tags": "Tags", - "bg-color": "Background color", - "both": "Tags and background color", - "none": "Nothing" - }, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'compact-ui', { - name: "Use compact UI?", - hint: "Resizes controls, and hides inactive controls and navigation elements unless hovered.", - scope: "client", - config: true, - default: false, - type: Boolean, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'no-logo', { - name: "Disable logo?", - hint: "Removes the Foundry logo in the top left.", - scope: "client", - config: true, - default: true, - type: Boolean, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'sheet', { - name: "Theme used for PC sheets", - hint: "", - scope: "world", - config: true, - default: "red", - type: String, - choices: { - "red": "Red (default)", - "dark": "Dark", - "plain": "Plain" - }, - onChange: () => { - debouncedReload(); - } - }); - - 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: () => { - debouncedReload(); - } - }); - - // 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); - - - game.settings.register('pf2e-dorako-ui', 'disable-all-styles', { - name: "Disable all styles?", - hint: "Ignore all the toggles and removes any effect of the module, without having to disable it.", - scope: "client", - type: Boolean, - default: false, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'center-hotbar', { - name: "Center hotbar (macrobar)?", - hint: "", - scope: "client", - type: Boolean, - default: false, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register("pf2e-dorako-ui", "edge-offset", { - name: "Edge-offset", - hint: "Offset from the edge of screen in pixels.", - scope: "client", - type: Number, - default: 10, - range: { - min: 5, - max: 30, - step: 1 - }, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-chat', { - name: "Theme chat?", - hint: "Applies theming to chat cards and sidebar content.", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-navigation', { - name: "Theme scene navigation?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-hotbar', { - name: "Theme the hotbar (macro bar)?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-controls', { - name: "Theme scene controls?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-token-hud', { - name: "Theme the token HUD?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-effect-panel', { - name: "Theme the effect panel?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-sidebar', { - name: "Theme the sidebar?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-app-ui', { - name: "Theme app UI?", - hint: "This includes the player box, window headers, and similar", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debounceReload() - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-combat-tracker', { - name: "Theme the combat tracker?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-custom-hotbar', { - name: "Theme Custom Hotbar module?", - hint: "Set the 'core hotbar' to 1px 1px offset in Custom Hotbar settings.", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-token-action-hud', { - name: "Theme Token Action HUD?", - hint: "Makes TAH more compact and fits in better with the rest of the UI.", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-window-controls', { - name: "Theme Window Controls module?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - game.settings.register('pf2e-dorako-ui', 'skin-dice-tray', { - name: "Theme Dice Tray module?", - hint: "", - scope: "client", - type: Boolean, - default: true, - config: true, - onChange: () => { - debouncedReload(); - } - }); - - if (!game.settings.get('pf2e-dorako-ui', 'disable-all-styles')) { - injectCSS("dorako-ui"); - - const root = document.querySelector(':root').style; - if (game.settings.get('pf2e-dorako-ui', 'center-hotbar')) { - root.setProperty("--hotbar-margin-left", 'calc(50% - 300px)'); - } else { - 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'); - // var sheet = document.styleSheets[0]; - // sheet.insertRule(":root{--chat-portrait-size: "+game.settings.get('pf2e-dorako-ui', 'chat-portrait-size').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')) injectCSS("navigation"); - if (game.settings.get('pf2e-dorako-ui', 'skin-controls')) injectCSS("controls"); - if (game.settings.get('pf2e-dorako-ui', 'skin-token-hud')) injectCSS("token-hud"); - if (game.settings.get('pf2e-dorako-ui', 'skin-chat')) injectCSS("chat"); - if (game.settings.get('pf2e-dorako-ui', 'skin-sidebar')) injectCSS("sidebar"); - if (game.settings.get('pf2e-dorako-ui', 'skin-combat-tracker')) injectCSS("combat-tracker"); - if (game.settings.get('pf2e-dorako-ui', 'skin-effect-panel')) injectCSS("effect-panel"); - if (game.settings.get('pf2e-dorako-ui', 'skin-app-ui')) injectCSS("app-ui"); - if (game.settings.get('pf2e-dorako-ui', 'skin-hotbar')) injectCSS("hotbar"); - if (game.settings.get('pf2e-dorako-ui', 'skin-window-controls')) injectCSS("window-control"); - if (game.settings.get('pf2e-dorako-ui', 'skin-token-action-hud')) injectCSS("token-action-hud"); - if (game.settings.get('pf2e-dorako-ui', 'skin-custom-hotbar')) injectCSS("custom-hotbar"); - if (game.settings.get('pf2e-dorako-ui', 'skin-dice-tray')) injectCSS("dice-tray"); - let headerStyle = game.settings.get('pf2e-dorako-ui', 'headerStyle'); - if (headerStyle == "tint" || headerStyle == "red") { - enableRedHeader() - } else if(headerStyle == "blue") { - enableBlueHeader() - } else if (headerStyle == "none") { - // padding-bottom: 0px; +Hooks.once("init", async function () { + CONFIG.ChatMessage.template = + "modules/pf2e-dorako-ui/templates/base-chat-message.html"; + + Handlebars.registerHelper("getSpeakerImage", function (message) { + const speaker = message.speaker; + if (speaker) { + if (speaker.token) { + const token = game.scenes + .get(speaker.scene) + ?.tokens?.get(speaker.token); + if (token) { + return token.data.img; } - let theme = game.settings.get('pf2e-dorako-ui', 'theme'); - if (theme == "light") { - // do nothing - } else if (theme == "dark") { - enableDarkTheme() - } else if (theme == "rainbow") { - enableRainbowTheme(); - } - setting = game.settings.get('pf2e-dorako-ui', 'rolltype-indication'); - if (setting == "both" || setting == "bg-color") injectCSS("chat-blind-whisper") - if (game.settings.get('pf2e-dorako-ui', 'chat-portrait-border')) injectCSS("chat-portrait-border"); - if (game.settings.get('pf2e-dorako-ui', 'compact-ui')) injectCSS("compact-ui"); - if (game.settings.get('pf2e-dorako-ui', 'no-logo')) injectCSS("no-logo"); - setting = game.settings.get('pf2e-dorako-ui', 'sheet'); - if (setting == "dark") injectCSS("sheet-dark"); - if (setting == "plain") injectCSS("sheet-plain"); - - } + } -}); + if (speaker.actor) { + const actor = Actors.instance.get(speaker.actor); + if (actor) { + return actor.data.img; + } + } + } + + return "icons/svg/mystery-man.svg"; + }); + + Handlebars.registerHelper("showSpeakerImage", function (message) { + const insertSpeakerImage = game.settings.get( + "pf2e-dorako-ui", + "insertSpeakerImage" + ); + if (!insertSpeakerImage) { + return false; + } + + const speaker = message.speaker; + if (!speaker) { + return false; + } + + 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 true; + } + } + } + + 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 true; + } + } + } + + if (!bHasImage) { + return false; + } + + return true; + }); + + Handlebars.registerHelper("useVideoForSpeakerImage", function (message) { + const speaker = message.speaker; + if (!speaker) { + return false; + } else { + let imageName = ""; + if (speaker.token) { + const token = game.scenes + .get(speaker.scene) + ?.tokens?.get(speaker.token); + if (token) { + imageName = token.data.img; + } + } + if (!imageName && speaker.actor) { + const actor = Actors.instance.get(speaker.actor); + if (actor) { + imageName = actor.data.img; + } + } + + return ( + imageName?.endsWith("webm") || + imageName?.endsWith("mp4") || + imageName?.endsWith("ogg") || + false + ); + } + + return false; + }); + + Handlebars.registerHelper("getHeaderStyle", function (message) { + const user = game.users.get(message.user); + + const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + if (headerStyle === "tint") { + return `background-color:${user.data.color}`; + } + return ""; + }); + + Handlebars.registerHelper("playerId", function (message) { + const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + if (headerStyle === "tint") { + const user = game.users.get(message.user); + const hexColor = user.data.color.replace("#", ""); + var r = parseInt(hexColor.substr(0, 2), 16); + 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 root = document.querySelector(":root").style; + let textColor; + if (yiq >= 128) { + return "dark-header-text"; + } else { + return "light-header-text"; + } + } else if (headerStyle === "blue" || headerStyle === "red") { + return "light-header-text"; + } else if (headerStyle === "none") { + const theme = game.settings.get("pf2e-dorako-ui", "theme"); + if (theme === "light") { + return "dark-header-text"; + } else if (theme === "dark" || theme === "rainbow") { + return "light-header-text"; + } else { + return ""; + } + } + return ""; + }); + + Handlebars.registerHelper("baseTheme", function (message) { + const theme = game.settings.get("pf2e-dorako-ui", "theme"); + if (theme === "light") { + return "light-theme"; + } else if (theme === "dark" || theme === "rainbow") { + return "dark-theme"; + } else { + return ""; + } + }); + + Handlebars.registerHelper("getTitleStyle", function (message) { + const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + if (headerStyle === "tint") { + return true; + } + return false; + }); + + Handlebars.registerHelper("getUserColor", function (message) { + const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + if (headerStyle === "none") { + return "transparent"; + } + const user = game.users.get(message.user); + return user.data.color; + }); + + Handlebars.registerHelper("getHeaderStyle", function () { + const headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + return headerStyle; + }); + + game.settings.register("pf2e-dorako-ui", "theme", { + name: "Theme", + hint: "Theme affects chat messages.", + scope: "client", + config: true, + default: "Light", + type: String, + choices: { + light: "Light", + dark: "Dark", + rainbow: "???", + }, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "headerStyle", { + name: "Header style", + hint: "Pick between available presets.", + scope: "client", + config: true, + default: "none", + type: String, + choices: { + red: "Red", + blue: "Blue", + tint: "Player Color", + none: "None", + }, + onChange: () => { + debouncedReload(); + }, + }); + + 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, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "chat-portrait-size", { + name: "Chat portrait size", + hint: "Suggested size of 36px.", + scope: "client", + type: Number, + default: 40, + range: { + min: 10, + max: 60, + step: 1, + }, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + 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, + onChange: () => { + debouncedReload(); + }, + }); + + 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, + onChange: () => { + debouncedReload(); + }, + }); + + 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: "client", + type: String, + default: "both", + config: true, + choices: { + tags: "Tags", + "bg-color": "Background color", + both: "Tags and background color", + none: "Nothing", + }, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "compact-ui", { + name: "Use compact UI?", + hint: "Resizes controls, and hides inactive controls and navigation elements unless hovered.", + scope: "client", + config: true, + default: false, + type: Boolean, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "no-logo", { + name: "Disable logo?", + hint: "Removes the Foundry logo in the top left.", + scope: "client", + config: true, + default: true, + type: Boolean, + onChange: () => { + debouncedReload(); + }, + }); + + // game.settings.register('pf2e-dorako-ui', 'sheet', { + // name: "Theme used for PC sheets", + // hint: "", + // scope: "world", + // config: true, + // default: "red", + // type: String, + // choices: { + // "red": "Red (default)", + // "dark": "Dark", + // "plain": "Plain" + // }, + // onChange: () => { + // debouncedReload(); + // } + // }); + + 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: () => { + debouncedReload(); + }, + }); + + // 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); + + game.settings.register("pf2e-dorako-ui", "disable-all-styles", { + name: "Disable all styles?", + hint: "Ignore all the toggles and removes any effect of the module, without having to disable it.", + scope: "client", + type: Boolean, + default: false, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "center-hotbar", { + name: "Center hotbar (macrobar)?", + hint: "", + scope: "client", + type: Boolean, + default: false, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "edge-offset", { + name: "Edge-offset", + hint: "Offset from the edge of screen in pixels.", + scope: "client", + type: Number, + default: 10, + range: { + min: 5, + max: 30, + step: 1, + }, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-chat", { + name: "Theme chat?", + hint: "Applies theming to chat cards and sidebar content.", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-navigation", { + name: "Theme scene navigation?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-hotbar", { + name: "Theme the hotbar (macro bar)?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-controls", { + name: "Theme scene controls?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-token-hud", { + name: "Theme the token HUD?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-effect-panel", { + name: "Theme the effect panel?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-sidebar", { + name: "Theme the sidebar?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-app-ui", { + name: "Theme app UI?", + hint: "This includes the player box, window headers, and similar", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debounceReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-combat-tracker", { + name: "Theme the combat tracker?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-custom-hotbar", { + name: "Theme Custom Hotbar module?", + hint: "Set the 'core hotbar' to 1px 1px offset in Custom Hotbar settings.", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-token-action-hud", { + name: "Theme Token Action HUD?", + hint: "Makes TAH more compact and fits in better with the rest of the UI.", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-window-controls", { + name: "Theme Window Controls module?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + game.settings.register("pf2e-dorako-ui", "skin-dice-tray", { + name: "Theme Dice Tray module?", + hint: "", + scope: "client", + type: Boolean, + default: true, + config: true, + onChange: () => { + debouncedReload(); + }, + }); + + if (!game.settings.get("pf2e-dorako-ui", "disable-all-styles")) { + injectCSS("dorako-ui"); + + const root = document.querySelector(":root").style; + if (game.settings.get("pf2e-dorako-ui", "center-hotbar")) { + root.setProperty("--hotbar-margin-left", "calc(50% - 300px)"); + } else { + 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" + ); + // var sheet = document.styleSheets[0]; + // sheet.insertRule(":root{--chat-portrait-size: "+game.settings.get('pf2e-dorako-ui', 'chat-portrait-size').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")) + injectCSS("navigation"); + if (game.settings.get("pf2e-dorako-ui", "skin-controls")) + injectCSS("controls"); + if (game.settings.get("pf2e-dorako-ui", "skin-token-hud")) + injectCSS("token-hud"); + if (game.settings.get("pf2e-dorako-ui", "skin-chat")) injectCSS("chat"); + if (game.settings.get("pf2e-dorako-ui", "skin-sidebar")) + injectCSS("sidebar"); + if (game.settings.get("pf2e-dorako-ui", "skin-combat-tracker")) + injectCSS("combat-tracker"); + if (game.settings.get("pf2e-dorako-ui", "skin-effect-panel")) + injectCSS("effect-panel"); + if (game.settings.get("pf2e-dorako-ui", "skin-app-ui")) injectCSS("app-ui"); + if (game.settings.get("pf2e-dorako-ui", "skin-hotbar")) injectCSS("hotbar"); + if (game.settings.get("pf2e-dorako-ui", "skin-window-controls")) + injectCSS("window-control"); + if (game.settings.get("pf2e-dorako-ui", "skin-token-action-hud")) + injectCSS("token-action-hud"); + if (game.settings.get("pf2e-dorako-ui", "skin-custom-hotbar")) + injectCSS("custom-hotbar"); + if (game.settings.get("pf2e-dorako-ui", "skin-dice-tray")) + injectCSS("dice-tray"); + let headerStyle = game.settings.get("pf2e-dorako-ui", "headerStyle"); + if (headerStyle == "tint" || headerStyle == "red") { + 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 + } else if (theme == "dark") { + enableDarkTheme(); + } else if (theme == "rainbow") { + enableRainbowTheme(); + } + setting = game.settings.get("pf2e-dorako-ui", "rolltype-indication"); + if (setting == "both" || setting == "bg-color") + injectCSS("chat-blind-whisper"); + if (game.settings.get("pf2e-dorako-ui", "chat-portrait-border")) + injectCSS("chat-portrait-border"); + if (game.settings.get("pf2e-dorako-ui", "compact-ui")) + injectCSS("compact-ui"); + if (game.settings.get("pf2e-dorako-ui", "no-logo")) injectCSS("no-logo"); + // setting = game.settings.get("pf2e-dorako-ui", "sheet"); + // if (setting == "dark") injectCSS("sheet-dark"); + // if (setting == "plain") injectCSS("sheet-plain"); + } +}); function addClassByQuerySelector(className, selector) { - let navigation = document.querySelector(selector); - navigation.classList.add(className) + let navigation = document.querySelector(selector); + navigation.classList.add(className); } // Base function injectCSS(filename) { - const head = document.getElementsByTagName("head")[0]; - const mainCss = document.createElement("link"); - mainCss.setAttribute("rel", "stylesheet") - mainCss.setAttribute("type", "text/css") - mainCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/"+filename+".css") - mainCss.setAttribute("media", "all") - head.insertBefore(mainCss, head.lastChild); + const head = document.getElementsByTagName("head")[0]; + const mainCss = document.createElement("link"); + mainCss.setAttribute("rel", "stylesheet"); + mainCss.setAttribute("type", "text/css"); + mainCss.setAttribute( + "href", + "modules/pf2e-dorako-ui/styles/" + filename + ".css" + ); + mainCss.setAttribute("media", "all"); + head.insertBefore(mainCss, head.lastChild); } function injectBaseCss() { - const head = document.getElementsByTagName("head")[0]; - const mainCss = document.createElement("link"); - mainCss.setAttribute("rel", "stylesheet") - mainCss.setAttribute("type", "text/css") - mainCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/dorako-ui.css") - mainCss.setAttribute("media", "all") - head.insertBefore(mainCss, head.lastChild); + const head = document.getElementsByTagName("head")[0]; + const mainCss = document.createElement("link"); + mainCss.setAttribute("rel", "stylesheet"); + mainCss.setAttribute("type", "text/css"); + mainCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/dorako-ui.css"); + mainCss.setAttribute("media", "all"); + head.insertBefore(mainCss, head.lastChild); } // Chat cards 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); + 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-blue.css") - newCss.setAttribute("media", "all") - head.insertBefore(newCss, head.lastChild); + 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-blue.css"); + newCss.setAttribute("media", "all"); + head.insertBefore(newCss, head.lastChild); } function enableDarkTheme() { - 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-dark.css") - newCss.setAttribute("media", "all") - head.insertBefore(newCss, head.lastChild); + 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-dark.css"); + newCss.setAttribute("media", "all"); + head.insertBefore(newCss, head.lastChild); } function enableRainbowTheme() { - 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-rainbow.css") - newCss.setAttribute("media", "all") - head.insertBefore(newCss, head.lastChild); + 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-rainbow.css"); + newCss.setAttribute("media", "all"); + 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); -// } - -// function enableDarkSheets() { -// 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/sheet-dark.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// Core UI - -// function skinChat() { -// 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.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinHotbar() { -// 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/hotbar.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinControls() { -// 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/controls.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinNavigation() { -// 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/navigation.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinAppUi() { -// 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/app-ui.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinTokenHud() { -// 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/token-hud.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinEffectPanel() { -// 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/effect-panel.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinSidebar() { -// 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/sidebar.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinCombatTracker() { -// 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/combat-tracker.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - - -// Modules - -// function skinCustomHotbar() { -// 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/custom-hotbar.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinTokenActionHud() { -// 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/token-action-hud.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinWindowControls() { -// 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/window-control.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } - -// function skinDiceTray() { -// 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/dice-tray.css") -// newCss.setAttribute("media", "all") -// head.insertBefore(newCss, head.lastChild); -// } \ No newline at end of file diff --git a/styles/chat.css b/styles/chat.css index d52f950..359d344 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -11,7 +11,7 @@ } .message .tag { - border: 1px solid rgba(255,255,255,0.5); + border: 1px solid rgba(255, 255, 255, 0.5); text-shadow: none; } @@ -20,7 +20,7 @@ margin-left: -5px; padding-left: 5px; margin-right: -5px; - padding-right: 5px; + padding-right: 5px; margin-top:-5px; padding-top: 5px; } */ @@ -32,7 +32,7 @@ } .message .message-header .whisper-to { - margin-bottom:0px; + margin-bottom: 0px; } @@ -90,8 +90,8 @@ /* margin: 5px; margin-top: 0px; padding: 2px; */ - margin:2px; - padding-bottom:2px; + margin: 2px; + padding-bottom: 2px; } .message-sender { @@ -119,7 +119,7 @@ } .blind .flavor-text { - background: #FDE4FF; + background: #FDE4FF; background-color: var(--blind-bg); } */ @@ -128,7 +128,7 @@ background-size: cover; background-image: var(--pf2e-sheets-bg); background-blend-mode: luminosity; - /* background-color: var(--whisper-bg); + /* background-color: var(--whisper-bg); margin-right: -5px; padding-right: 5px; margin-left: -5px; @@ -160,8 +160,8 @@ margin: 0px; } -#chat-log .message .message-header .flavor-text > img.message-portrait { - display:none; +#chat-log .message .message-header .flavor-text>img.message-portrait { + display: none; } .tags { @@ -236,7 +236,7 @@ margin-bottom: 5px; */ /* padding-left:5px; padding-right:5px; */ - padding-top:5px; + padding-top: 5px; gap: 5px; } @@ -260,7 +260,7 @@ } -#chat-log .flavor-text > hr { +#chat-log .flavor-text>hr { /* display: none; */ margin-top: 0px; margin-bottom: 3px; @@ -273,8 +273,8 @@ #chat-log { /* overflow-x:visible; */ - padding-bottom:3px; - gap:8px; + padding-bottom: 3px; + gap: 8px; } .message-content .flavor-text { @@ -284,6 +284,7 @@ display: flex; flex-direction: column; } + .message-content .flavor-text hr { display: none; } @@ -307,12 +308,12 @@ } #chat-controls .control-buttons { - color:rgba(255, 255, 245, 0.8); + color: rgba(255, 255, 245, 0.8); } -/* +/* #chat-log>.chat-message{ padding: 5px; } */ @@ -328,11 +329,11 @@ background-color: var(--paizo-red); text-shadow: var(--pf2e-text-shadow); /* border-bottom: 1px solid black; */ - /* margin-right: -5px; +/* margin-right: -5px; margin-top: -5px; padding-right: 5px; padding-top: 5px; - border-radius: 0px 5px 0px 0px; + border-radius: 0px 5px 0px 0px; } */ @@ -361,7 +362,7 @@ button { gap: 3px; /* padding-left:5px; padding-right:5px; */ - margin-top:0px; + margin-top: 0px; } @@ -397,8 +398,8 @@ button { border: 5px solid red; box-shadow: var(--gold-and-glow); border: none; - margin-left:3px; - margin-right:3px; + margin-left: 3px; + margin-right: 3px; } .message-content .chat-damage-buttons button>.transparent-half { @@ -413,7 +414,7 @@ button { .message .message-header img.message-portrait { /* margin-bottom:5px; */ - display:flex; + display: flex; } .message .message-header .message-sender { @@ -421,7 +422,7 @@ button { font-weight: 400; */ grid-: sender; /* align-items: center; */ - display:flex; + display: flex; /* border-radius: 5px 0px 0px 0px; */ } @@ -429,7 +430,7 @@ button { .message .message-header .message-metadata { align-items: center; justify-content: flex-end; - display:flex; + display: flex; /* border-radius: 0px 5px 0px 0px; margin-left: 0px; */ } @@ -533,16 +534,16 @@ button { --filter-dark: invert(100%) drop-shadow(0px 1px 1px black); --filter-light: drop-shadow(0px 1px 0px white); - --pf2e-half-transparent-light: hsla(0, 0%, 100%,0.5); - --pf2e-half-transparent-dark: hsla(0, 0%, 0%,0.5); + --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-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); - --pf2e-transcluent-very-for-light: hsla(0, 0%, 60%,0.2); - --pf2e-transcluent-very-for-dark: hsla(0, 0%, 80%,0.3); - --pf2e-color-mono-dark: hsl(0,0%,15%); + --pf2e-translucent-middle-for-light: hsla(0, 0%, 80%, 0.5); + --pf2e-translucent-middle-for-dark: hsla(0, 0%, 80%, 0.5); + --pf2e-transcluent-very-for-light: hsla(0, 0%, 60%, 0.2); + --pf2e-transcluent-very-for-dark: hsla(0, 0%, 80%, 0.3); + --pf2e-color-mono-dark: hsl(0, 0%, 15%); --pf2e-color-ornament-for-dark: wheat; --pf2e-color-ornament-for-light: black; @@ -610,7 +611,7 @@ button { message-content .chat-damage-buttons button { box-shadow: none; border: 1px solid var(--alt); - background:hsla(0, 0%, 20%,0.1); + background: hsla(0, 0%, 20%, 0.1); } /* .dice-roll .dice-formula:hover::after, .dice-roll .dice-total:hover::after, @@ -669,9 +670,9 @@ message-content .chat-damage-buttons button { border-radius: 50%; } -.portrait-wrapper:hover { +.portrait-wrapper:hover { transition: transform 0.35s ease-in-out, filter 0.35s ease-in-out; - transform: scale(4) translate(16px,16px); + transform: scale(4) translate(16px, 16px); filter: drop-shadow(0px 0px 10px black); z-index: 1; } @@ -699,7 +700,7 @@ message-content .chat-damage-buttons button { .message-content .chat-damage-buttons button>.transparent-half { - background: rgba(0,0,0,0.5); + background: rgba(0, 0, 0, 0.5); left: 50%; height: 18px; opacity: .6; @@ -728,6 +729,7 @@ message-content .chat-damage-buttons button { background: var(--pf2e-translucent-middle); color: var(--pf2e-body-primary); } + .damage-tag-modifier { background: var(--pf2e-translucent-very); } @@ -738,7 +740,7 @@ message-content .chat-damage-buttons button { /* transition: box-shadow 0.5s ease-in-out; */ } -[data-visibility=owner]:is(div,em,p,span,strong) { +[data-visibility=owner]:is(div, em, p, span, strong) { /* background: #818181; */ background: none; background: var(--pf2e-translucent-very); @@ -850,9 +852,9 @@ message-content .chat-damage-buttons button { } */ button.half-damage .fa-heart-broken::after { - content:"\f7a9"; + content: "\f7a9"; font-family: "Font Awesome 5 Free"; - color:hsla(0, 0%, 50%, 0.5); + color: hsla(0, 0%, 50%, 0.5); display: block; z-index: 1; position: absolute; @@ -919,7 +921,8 @@ button.half-damage .fa-heart-broken::after { color: white; background-color: darkgreen; } -.message .message-content .chat-damage-buttons button.heal-damage:hover .plus{ + +.message .message-content .chat-damage-buttons button.heal-damage:hover .plus { color: darkgreen; } @@ -936,7 +939,7 @@ button.half-damage .fa-heart-broken::after { display: flex; gap: 3px; flex-direction: column; - margin:0px; + margin: 0px; /* padding-left: 5px; padding-right: 5px; */ } @@ -969,55 +972,55 @@ button.half-damage .fa-heart-broken::after { background-color: var(--pf2e-color-mono-dark); } -[data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all]) { +[data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all]) { border-radius: 3px; } -[data-visibility=gm]:is(div,em,h4,p,span,strong) { +[data-visibility=gm]:is(div, em, h4, p, span, strong) { /* border: 1px dotted; */ border: none; cursor: help; } -[data-visibility=gm]:is(div,em,h4,p,span,strong) { - background: hsla(0,0%,50%,0.25); +[data-visibility=gm]:is(div, em, h4, p, span, strong) { + background: hsla(0, 0%, 50%, 0.25); /* color: var(--pf2e-body-primary); text-shadow: var(--pf2e-text-shadow); */ } -[data-visibility=gm]:is(div,em,h4,p,span,strong) { +[data-visibility=gm]:is(div, em, h4, p, span, strong) { /* width: 100%; */ - margin-bottom:0px; + margin-bottom: 0px; } -[data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all])[data-visibility=owner] { - background:none; +[data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all])[data-visibility=owner] { + background: none; background-color: #1f1fa830; outline: 1px dashed #a6a6ffd0; } -[data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all])[data-visibility=gm] { - background:none; - background-color: hsla(0,0%,50%,0.25); +[data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all])[data-visibility=gm] { + background: none; + background-color: hsla(0, 0%, 50%, 0.25); /* outline: 1px dotted black; */ } -[data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all])[data-visibility=owner] [data-visibility=owner] { +[data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all])[data-visibility=owner] [data-visibility=owner] { background: none; background-color: none; } -[data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all]) { +[data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all]) { outline: 1px dashed; } -.message-header [data-visibility]:is(div,em,h4,p,span,strong):not([data-visibility=all]) { +.message-header [data-visibility]:is(div, em, h4, p, span, strong):not([data-visibility=all]) { outline: 1px dashed var(--pf2e-body-primary); } -.message .message-header.dark-header-text [data-visibility=gm]:is(div,em,h4,p,span,strong){ - background: hsla(0,0%,50%,0.25); +.message .message-header.dark-header-text [data-visibility=gm]:is(div, em, h4, p, span, strong) { + background: hsla(0, 0%, 50%, 0.25); outline: 1px dashed black; color: black; /* mix-blend-mode: color-dodge; */ @@ -1028,22 +1031,25 @@ button.half-damage .fa-heart-broken::after { margin-top: 3px; } -.message .message-header.light-header-text .message-sender[data-visibility=gm]:is(div,em,h4,p,span,strong){ - background: hsla(0,0%,50%,0.25); +.message .message-header.light-header-text .message-sender[data-visibility=gm]:is(div, em, h4, p, span, strong) { + background: hsla(0, 0%, 50%, 0.25); color: white; /* mix-blend-mode: color-dodge; */ } .flavor-text [data-visibility=gm] { - margin-top:0px; + margin-top: 0px; } .flavor-text br { - display: block; /* makes it have a width */ - content: ""; /* clears default height */ - margin-top: 0; /* change this to whatever height you want it */ + display: block; + /* makes it have a width */ + content: ""; + /* clears default height */ + margin-top: 0; + /* change this to whatever height you want it */ } @@ -1084,17 +1090,27 @@ button.half-damage .fa-heart-broken::after { .chat-message.blind, .chat-message.whisper, .chat-message.emote, -.message.damage-log.damage { +.message.damage-log.damage, +.message.damage-log.healing, +.message.damage-log.reverted.damage, +.message.damage-log.reverted.healing { background: var(--bg-current); + background-image: var(--bg-current); background-size: cover; - border:none; + background-blend-mode: luminosity; + border: none; } .message.damage-log.healing { - background-image: var(--bg-current); - background-color: darkgreen; - background-blend-mode: luminosity; - background-size: cover; + background-color: green; +} + +.message.damage-log.reverted.healing { + background-color: #002000; +} + +.message.damage-log.reverted.damage { + background-color: #202020; } .message.emote { @@ -1124,7 +1140,7 @@ button.half-damage .fa-heart-broken::after { } .pf2e.chat-card .card-header h3 { - display:flex; + display: flex; margin-top: 2px; line-height: 17px; } @@ -1133,15 +1149,15 @@ button.half-damage .fa-heart-broken::after { .pf2e.action-card .card-buttons { /* padding-left: 5px; padding-right: 5px; */ - margin:0px; + margin: 0px; /* margin-left: 5px; margin-right: 5px; */ } .message .message-header .message-metadata { font-size: xx-small; - display:flex; - gap:5px; + display: flex; + gap: 5px; /* flex:none; */ } @@ -1171,14 +1187,14 @@ button.half-damage .fa-heart-broken::after { .message .message-header { grid: unset; - display:flex; + display: flex; border-radius: 5px 5px 0px 0px; } - /* background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), var(--paizo-red)), var(--bg-current); */ - /* box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); */ - /* border-bottom: 1px solid wheat; */ +/* background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), var(--paizo-red)), var(--bg-current); */ +/* box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); */ +/* border-bottom: 1px solid wheat; */ /* Card background */ .message { @@ -1209,6 +1225,7 @@ button.half-damage .fa-heart-broken::after { #navigation #scene-list .scene.context { background-color: var(--paizo-red); } + #navigation #scene-list .scene.gm.context { background-color: var(--paizo-blue-bright); } @@ -1236,7 +1253,7 @@ table.pf2-table td, table.pf2-table th { } #dfcp-rt-buttons { - gap:3px; + gap: 3px; } .chat-control-icon { @@ -1253,15 +1270,15 @@ table.pf2-table td, table.pf2-table th { clip-path: inset(1px -10px 1px -10px) } -#chat-log .message.dfce-cm-bottom { +#chat-log .message.dfce-cm-bottom { border-radius: 0px 0px 5px 5px; clip-path: inset(1px -10px -10px -10px) } #chat-log .message.dfce-cm-middle, -#chat-log .message.dfce-cm-bottom { - margin-top:-11px; +#chat-log .message.dfce-cm-bottom { + margin-top: -11px; background-position: left 0px top -100px; } @@ -1271,7 +1288,7 @@ table.pf2-table td, table.pf2-table th { } .chat-message .message-header .message-sender { - display:flex; + display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; @@ -1279,7 +1296,7 @@ table.pf2-table td, table.pf2-table th { } .message-metadata { - flex:none + flex: none } div#scrollToBottom { @@ -1303,7 +1320,7 @@ div#scrollToBottom:hover { } .chat-damage-buttons button { - display:flex; + display: flex; flex-direction: column; align-items: center; gap: 2px; @@ -1314,8 +1331,8 @@ div#scrollToBottom:hover { } -.flavor-text > strong, -.flavor-text > b { +.flavor-text>strong, +.flavor-text>b { text-shadow: var(--pf2e-text-shadow); color: var(--pf2e-body-primary); } @@ -1367,7 +1384,8 @@ div#scrollToBottom:hover { .pf2e-pd-card .flat-check-failure { text-rendering: optimizeLegibility; - background-color: #ff4500; border-radius: 2px; + 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); @@ -1394,17 +1412,49 @@ div#scrollToBottom:hover { text-transform: uppercase; } -.flavor-text div.degree-of-success .success:not([data-visibility=gm]) { + +.chat-message .degree-of-success .criticalFailure, +.chat-message .degree-of-success .failure { + color: red; +} + +.chat-message .degree-of-success .success { + color: blue; +} + +.chat-message .degree-of-success .criticalSuccess { + color: green; +} + + +.chat-message .degree-of-success .success:not([data-visibility=gm]) { color: #8080FF; } +.chat-message .target-dc-result .adjusted-dc.decreased { + color: red; +} + +.chat-message .target-dc-result .adjusted-dc.increased { + color: green; +} + +.chat-message .target-dc-result .preadjusted-dc { + text-decoration: line-through; +} + +.chat-message .result, +.chat-message .target-dc { + width: 100%; +} + /* Monk's little details */ #chat-log .message.round-marker .message-header { display: none; } #chat-log .message.round-marker .message-content { - display:flex; + display: flex; color: white; text-shadow: var(--dorako-text-shadow); border-bottom: 1px solid wheat; @@ -1431,12 +1481,12 @@ div#scrollToBottom:hover { text-shadow: none; /* mix-blend-mode: color-dodge; */ /* line-height: normal; */ - } +} .message .message-header.dark-text { background-blend-mode: luminosity; - } +} .message .message-header.dark-header-text { color: black; @@ -1454,31 +1504,32 @@ div#scrollToBottom:hover { text-shadow: var(--pf2e-shadow-is-light); color: black; } -.message .message-header.dark-header-text .message-sender[data-visibility=gm]:is(div,em,h4,p,span,strong) { + +.message .message-header.dark-header-text .message-sender[data-visibility=gm]:is(div, em, h4, p, span, strong) { text-shadow: var(--pf2e-shadow-is-light); - background-color: hsla(0,0%,50%,50%); + background-color: hsla(0, 0%, 50%, 50%); /* mix-blend-mode: lighten; */ } -.message .message-header.light-header-text .message-sender[data-visibility=gm]:is(div,em,h4,p,span,strong) { +.message .message-header.light-header-text .message-sender[data-visibility=gm]:is(div, em, h4, p, span, strong) { text-shadow: var(--pf2e-shadow-is-dark); - background-color: hsla(0,0%,50%,50%); + background-color: hsla(0, 0%, 50%, 50%); /* mix-blend-mode: lighten; */ color: white; } .message-header.light-header-text .header-meta { color: white; - background-color: hsla(0,0%,50%,40%); - border: 1px solid hsla(0,0%,100%,30%); + background-color: hsla(0, 0%, 50%, 40%); + border: 1px solid hsla(0, 0%, 100%, 30%); mix-blend-mode: screen; } .header-meta, .message-header.dark-header-text .header-meta { - color: hsla(0,0%,20%,100%); - background-color: hsla(0,0%,80%,40%); - border: 1px solid hsla(0,0%,30%,40%); + color: hsla(0, 0%, 20%, 100%); + background-color: hsla(0, 0%, 80%, 40%); + border: 1px solid hsla(0, 0%, 30%, 40%); } .message.dark-theme .dice-roll .dice-result .dice-tooltip .damage-type { @@ -1486,7 +1537,7 @@ div#scrollToBottom:hover { } #chat-log .message.koboldworks .message-header { - display:none; + display: none; } .chat-message.koboldworks.turn-announcer { @@ -1522,19 +1573,19 @@ div#scrollToBottom:hover { } .chat-message>.message-content .message-buttons { - gap: 3px; + gap: 3px; } .message button { line-height: 20px; border: 1px solid var(--alt); - background: hsla(0, 0%, 20%,0.1); + background: hsla(0, 0%, 20%, 0.1); } .dice-roll .dice-result { margin-top: 5px; } -h4 .action { +.chat-message h4 { margin: 0px; } \ No newline at end of file diff --git a/styles/core-trim.css b/styles/core-trim.css index 52223b2..52fe349 100644 --- a/styles/core-trim.css +++ b/styles/core-trim.css @@ -90,52 +90,54 @@ background-color: hsla(0, 0%, 00%, 50%); } */ .app:not(.sheet):hover { - color: white; + color: white; } .app.pc, .app.npc, -.app.hazard { - color: white; +.app.hazard { + color: white; } .app.pc { - background-color: var(--paizo-red); + background-color: var(--paizo-red); } + .app.npc { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } .app.hazard { - color: white; - background-color: #1D3B3B; + color: white; + background-color: #1D3B3B; } .hazard .bgcontainer { - display: none; + display: none; } .app.hazard .window-content { - background: none; - color: white; - text-shadow: 0px 0px 3px black; + background: none; + color: white; + text-shadow: 0px 0px 3px black; } .app.hazard .traits-bar { - display: flex; - gap: 10px; + display: flex; + gap: 10px; } + .app.hazard .traits-bar .trait { - background-color: var(--alt-dark); - color: #fff; - font-family: var(--sans-serif); - padding: .1em 1em; - display: flex; - border-radius: 5px; - box-shadow: var(--gold-and-glow); - text-transform: uppercase; - align-content: center; - justify-items: center; + background-color: var(--alt-dark); + color: #fff; + font-family: var(--sans-serif); + padding: .1em 1em; + display: flex; + border-radius: 5px; + box-shadow: var(--gold-and-glow); + text-transform: uppercase; + align-content: center; + justify-items: center; } .app.hazard [data-pf2-check], @@ -143,8 +145,8 @@ .app.hazard a.content-link, .app.hazard a.inline-roll, .app.hazard [data-pf2-effect-area] { - color: black; - text-shadow: none; + color: black; + text-shadow: none; } @@ -162,105 +164,106 @@ } */ .minimized .header-button { - display: none; + display: none; } .sheet .window-header .window-title { - font-size: large; + font-size: large; } .window-content, #chat { - text-shadow: initial; + text-shadow: initial; } .sidebar-popout .window-content { - text-shadow: 0px 0px 3px black; + text-shadow: 0px 0px 3px black; } -.window-content{ - border-radius: 0px 0px 5px 5px; +.window-content { + border-radius: 0px 0px 5px 5px; } .window-header { - border-bottom: 1px solid black; + border-bottom: 1px solid black; } -.minimized > .window-header { - border-bottom: none; + +.minimized>.window-header { + border-bottom: none; } .control { - text-shadow: 0px 0px 3px black; - mix-blend-mode: hard-light; + text-shadow: 0px 0px 3px black; + mix-blend-mode: hard-light; } -#controls ol.sub-controls { - display: flex !important; +#controls ol.sub-controls { + display: flex !important; } .control { - /* transition: background-color 0.15s ease-in-out; */ + /* transition: background-color 0.15s ease-in-out; */ } .control:hover { - background-color: var(--paizo-red); + background-color: var(--paizo-red); } .control.toggle { - background-color: var(--paizo-blue-dark); + background-color: var(--paizo-blue-dark); } .control.toggle:hover, .control.toggle.active { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } .control.toggle.active:hover { - background-color: var(--paizo-blue-bright); + background-color: var(--paizo-blue-bright); } #navigation .scene { - padding: 3px 5px; - height: 30px; - display: flex; - align-items: center; + padding: 3px 5px; + height: 30px; + display: flex; + align-items: center; } .scene { - /* transition: background-color 0.15s ease-in-out; */ - color: white; + /* transition: background-color 0.15s ease-in-out; */ + color: white; } .app.scene { - position: static; - z-index: 1; + position: static; + z-index: 1; } .app.scene:hover { - background-color: var(--paizo-red); + background-color: var(--paizo-red); } .app.scene.gm { - background-color: var(--paizo-blue-dark); + background-color: var(--paizo-blue-dark); } .app.scene.view.gm { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } #navigation .app.scene.gm:hover { - background-color: var(--paizo-blue-bright); + background-color: var(--paizo-blue-bright); } .app.scene.active { - box-shadow: var(--gold-and-glow), var(--glassy); + box-shadow: var(--gold-and-glow), var(--glassy); } @@ -287,13 +290,13 @@ .vtt { - padding: 10px; - gap: 10px; + padding: 10px; + gap: 10px; } .vtt #sidebar { - height: 100%; - } + height: 100%; +} /* #navigation #nav-toggle:hover { background-color: var(--paizo-red); @@ -303,14 +306,14 @@ .page-control:hover { - color: white; + color: white; } -.window-content form { - text-shadow: initial; +.window-content form { + text-shadow: initial; } @@ -343,24 +346,28 @@ font-weight: 400; font-style: normal; } + @font-face { font-family: 'Signika'; src: url('/fonts/signika/signika-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } + @font-face { font-family: 'Modesto Condensed'; font-style: normal; font-weight: 400; src: url('/fonts/modesto-condensed/modesto-condensed.woff2') format('woff2'); } + @font-face { font-family: 'Modesto Condensed'; font-style: normal; font-weight: 700; src: url('/fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2'); } + * { box-sizing: border-box; -webkit-user-select: none; @@ -368,6 +375,7 @@ -ms-user-select: none; user-select: none; } + body { /* width: 100vw; height: 100vh; */ @@ -376,15 +384,18 @@ body { font-family: var(--font-primary); font-size: var(--font-size-14); } + body.game { display: flex; justify-content: flex-start; } + body.background { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } + body:not(.background) { /* * Work around for Chrome bug when pressing PgUp/Down in a textarea/TinyMCE editor: @@ -396,46 +407,55 @@ body:not(.background) { right: 0; bottom: 0; left: 0; - gap:10px + gap: 10px } + #ui-left, #ui-middle, #ui-right { pointer-events: none; z-index: var(--z-index-app); } + #ui-left { display: flex; flex-direction: column; justify-content: space-between; } + #ui-middle { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } + #ui-right { flex: none; } + #ui-top { /* margin: 0 10px 0 18px; */ } + #ui-top.offset { /* margin-left: -90px; */ } #ui-bottom { - justify-content: space-evenly; + justify-content: space-evenly; } -#ui-bottom > div { + +#ui-bottom>div { display: flex; justify-content: space-between; - gap:10px; + gap: 10px; } -#ui-bottom > #camera-views { + +#ui-bottom>#camera-views { justify-content: flex-start; } + #sidebar { display: flex; flex-direction: column; @@ -447,6 +467,7 @@ body:not(.background) { /* margin: 5px; */ padding: 0; } + #sidebar { flex: 1; } @@ -460,6 +481,7 @@ canvas#board { top: 0; left: 0; } + .banner { position: fixed; width: 60%; @@ -473,6 +495,7 @@ canvas#board { border-radius: 5px; box-shadow: 0 0 10px var(--color-shadow-dark); } + #fps { width: 100px; /* margin: 0 10px 10px 0; */ @@ -486,9 +509,11 @@ canvas#board { border: 1px solid var(--color-border-light-tertiary); border-radius: 5px; } + #fps label { color: var(--color-text-dark-inactive); } + /* ---------------------------------------- */ /* Text */ /* ---------------------------------------- */ @@ -501,28 +526,35 @@ h4 { padding: 0; font-weight: normal; } + h1 { font-size: 2em; /* border-bottom: 2px solid var(--color-underline-header); */ } + h2 { font-size: 1.5em; /* border-bottom: 1px solid var(--color-underline-header); */ } + h3 { font-size: 1.125em; } + /* Links */ a { cursor: pointer; } + a[href] { /* color: var(--color-text-hyperlink); */ color: pink; } + a:hover { /* text-shadow: 0 0 8px var(--color-shadow-primary); */ } + a.entity-link, a.content-link, a.inline-roll { @@ -533,33 +565,40 @@ a.inline-roll { white-space: nowrap; word-break: break-all; } + a.entity-link i, a.content-link i, a.inline-roll i { color: var(--color-text-dark-inactive); } + a.entity-link.playing i:before, a.content-link.playing i:before, a.inline-roll.playing i:before { content: "\f0c8"; } + a.entity-link.broken, a.content-link.broken { background: rgba(255, 0, 0, 0.05); border: 1px dashed red; } + a.inline-roll.gmroll { background: #e8e8ef; border-color: #545469; } + a.inline-roll.blindroll { background: #f5eaf5; border-color: #6b476b; } + /* Paragraph */ p { margin: 0.5em 0; } + ::selection { background: #82817d; color: var(--color-text-light-0); @@ -568,20 +607,24 @@ p { dt { font-weight: bold; } + dd { padding-left: 5px; margin: 3px 0; } + /* HR separators */ hr { border: none; border-top: 1px solid var(--color-border-light-primary); border-bottom: 1px solid var(--color-border-light-highlight); } + /* Buttons */ button[hidden] { display: none; } + /* Blockquote */ blockquote { margin: 0.5em 0 0.5em 10px; @@ -589,9 +632,11 @@ blockquote { border-left: 3px solid var(--color-border-light-tertiary); font-style: italic; } + blockquote em { font-style: normal; } + /* Secret Sections */ section.secret { padding: 0 5px; @@ -599,6 +644,7 @@ section.secret { border-top: 1px solid var(--color-border-dark-5); border-bottom: 1px solid var(--color-border-dark-5); } + /* ---------------------------------------- */ /* Tables */ /* ---------------------------------------- */ @@ -610,22 +656,27 @@ table { border-bottom: 1px solid var(--color-border-light-tertiary); margin: 0.5em 0; } + table thead { background: rgba(0, 0, 0, 0.5); color: var(--color-text-light-highlight); text-shadow: 1px 1px var(--color-shadow-dark); border-bottom: 1px solid var(--color-border-dark); } + table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.2); } + table td:first-child { padding-left: 2px; } + table td, table th { padding: 0.25em 0; } + /* ----------------------------------------- */ /* Scrollbar /* ----------------------------------------- */ @@ -656,6 +707,7 @@ img { border-radius: 2px; */ max-width: 100%; } + /* img.noborder { border: none; box-shadow: none; @@ -664,10 +716,12 @@ img { figure { margin: 1em; } + figure img { display: block; margin: 0 auto; } + figure figcaption { margin-top: 0.5em; text-align: center; @@ -675,7 +729,7 @@ figure figcaption { } - /* Pop-Out Window Application*/ +/* Pop-Out Window Application*/ .window-app { display: flex; flex-direction: column; @@ -688,15 +742,15 @@ figure figcaption { /* Resizable movement handle */ } -.window-app > * { - flex: 1; - } +.window-app>* { + flex: 1; +} .window-header { - align-items: center; - flex: 0 0 30px; - gap: 10px; - padding: 0px 10px; + align-items: center; + flex: 0 0 30px; + gap: 10px; + padding: 0px 10px; } /* .window-app > .flex0 { @@ -725,6 +779,7 @@ figure figcaption { word-break: break-all; flex-grow: 1; } + /* .window-app .window-header a { flex: none; margin: 0 0 0 8px; @@ -746,25 +801,32 @@ figure figcaption { overflow-y: auto; overflow-x: hidden; } -.window-app .window-content > * { + +.window-app .window-content>* { flex: 1; } -.window-app .window-content > .flex0 { + +.window-app .window-content>.flex0 { display: block; flex: 0; } -.window-app .window-content > .flex1 { + +.window-app .window-content>.flex1 { flex: 1; } -.window-app .window-content > .flex2 { + +.window-app .window-content>.flex2 { flex: 2; } -.window-app .window-content > .flex3 { + +.window-app .window-content>.flex3 { flex: 3; } + .window-app.zhover { z-index: calc(var(--z-index-window) + 1); } + /* .window-app .window-resizable-handle { width: 40px; height: 40px; @@ -780,26 +842,29 @@ figure figcaption { .window-app .window-resizable-handle { - width: 38px; - height: 38px; - position: absolute; - bottom: 0px; - right: 0; - /* padding: 2px; */ - /* background: radial-gradient(circle at bottom right, var(--tertiary) 0%, wheat, 23%, transparent 23%); */ - background: linear-gradient(to bottom, transparent 30px, black 40px), linear-gradient(to right, transparent 30px, black 40px); - /* mix-blend-mode: color-burn; */ - border-radius: 5px 0px 5px 0px; - box-shadow: 0 0 0 2px var(--tertiary), 0 0 0 3px #9f725b, inset 0 0 0 2px var(--tertiary), inset 0 0 0 3px #9f725b; - clip-path: polygon(55% 50%,110% 50%,110% 110%,50% 110%,50% 75%,75% 75%); - cursor: se-resize; + width: 38px; + height: 38px; + position: absolute; + bottom: 0px; + right: 0; + /* padding: 2px; */ + /* background: radial-gradient(circle at bottom right, var(--tertiary) 0%, wheat, 23%, transparent 23%); */ + background: linear-gradient(to bottom, transparent 30px, black 40px), linear-gradient(to right, transparent 30px, black 40px); + /* mix-blend-mode: color-burn; */ + border-radius: 5px 0px 5px 0px; + box-shadow: 0 0 0 2px var(--tertiary), 0 0 0 3px #9f725b, inset 0 0 0 2px var(--tertiary), inset 0 0 0 3px #9f725b; + clip-path: polygon(55% 50%, 110% 50%, 110% 110%, 50% 110%, 50% 75%, 75% 75%); + cursor: se-resize; } + .window-app .window-resizable-handle i.fas { transform: rotate(45deg); } + .window-app.minimized .window-resizable-handle { display: none; } + /* ----------------------------------------- */ /* Context Dropdown Menu /* ----------------------------------------- */ @@ -816,31 +881,39 @@ figure figcaption { color: var(--color-text-light-1); z-index: calc(var(--z-index-app) + 1); } + #context-menu.expand-down { top: calc(100% + 2px); } + #context-menu.expand-up { bottom: calc(100% + 2px); } + #context-menu ol.context-items { list-style: none; margin: 0; padding: 0; } + #context-menu li.context-item { padding: 0 5px; line-height: 32px; } + #context-menu li.context-item:hover { color: var(--color-text-light-0); text-shadow: 0 0 4px var(--color-shadow-primary); } -#context-menu li.context-item > i { + +#context-menu li.context-item>i { margin-right: 5px; } + .window-app #context-menu { z-index: calc(var(--z-index-window) + 1); } + /* ----------------------------------------- */ /* Player Config UI /* ----------------------------------------- */ @@ -849,10 +922,12 @@ figure figcaption { font-weight: bold; color: var(--color-text-dark-primary); } + #player-config .avatar { flex: 0 0 64px; margin-bottom: 5px; } + #player-config .directory-list { max-height: 300px; overflow-y: auto; @@ -860,28 +935,34 @@ figure figcaption { margin: 5px 0; padding: 0; } + #player-config .directory-item { border-top: 1px solid transparent; border-bottom: 1px solid transparent; } + #player-config .directory-item.context { border-top: 1px solid var(--color-border-highlight-alt); border-bottom: 1px solid var(--color-border-highlight); box-shadow: 0 0 10px var(--color-shadow-highlight); } + #player-config .directory-item .document-name { font-size: var(--font-size-13); line-height: 32px; margin: 0 0 0 5px; } + #player-config .directory-item img.profile { flex: 0 0 32px; height: 32px; border: none; } + #player-config button[type="submit"] { margin-top: 0.5em; } + /* ----------------------------------------- */ /* Connected Players UI /* ----------------------------------------- */ @@ -895,44 +976,54 @@ figure figcaption { #players.hidden { display: none; } + #players h3 { margin: 3px; padding: 4px; border-bottom: 2px groove var(--color-border-dark-secondary); } + #players h3 i { margin: 0 6px; } + #players h3 .players-mode { font-size: var(--font-size-16); margin: 0 5px; color: var(--color-text-light-primary); } + #players ol { list-style: none; margin: 0 0 4px; padding: 0; } + #players ol li.player { line-height: 20px; padding: 1px 8px; } + #players ol .player-name { overflow: hidden; white-space: nowrap; word-break: break-all; } + #players ol .player.context { margin: -1px 0; border-top: 1px solid var(--color-border-highlight); border-bottom: 1px solid var(--color-border-highlight); } + #players ol .player.context .player-name { text-shadow: 0 0 5px var(--color-shadow-primary); } + #players ol .player-name.self { color: #c0eddb; } + #players ol .player-active { flex: 0 0 8px; height: 8px; @@ -940,9 +1031,11 @@ figure figcaption { border-radius: 50%; /* margin: 5px 8px 0 0; */ } + #players ol .player-active.active { /* box-shadow: 0 0 5px var(--color-shadow-dark); */ } + /* ---------------------------------------- */ /* Notifications */ /* ---------------------------------------- */ @@ -956,6 +1049,7 @@ figure figcaption { padding: 0; z-index: calc(var(--z-index-ui) + 100); } + .notification { background: rgba(0, 0, 0, 0.5); margin-bottom: 0.5em; @@ -966,117 +1060,147 @@ figure figcaption { box-shadow: 0 0 10px var(--color-shadow-dark); color: var(--color-text-light-highlight); } + .notification .close { float: right; line-height: 20px; margin-left: 8px; } + .notification::before { font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 8px; } + .notification.info { background: rgba(47, 80, 132, 0.6); border: 1px solid #5c87b9; } + .notification.info::before { content: "\f05a"; } + .notification.warning { background: rgba(214, 150, 0, 0.6); border: 1px solid #d69e07; } + .notification.warning::before { content: "\f071"; } + .notification.error { background: rgba(105, 0, 8, 0.6); border: 1px solid #750003; } + .notification.error::before { content: "\f06a"; } + .notification.channel-hint { width: 100%; flex: none; } + .notification.stable { background: rgba(138, 211, 4, 0.4); } + .notification.stable::before { content: "\f6d9"; } + .notification.testing { background: rgba(211, 192, 4, 0.4); } + .notification.testing::before { content: "\f0ad"; } + .notification.development { background: rgba(211, 119, 4, 0.4); } + .notification.development::before { content: "\f6e3"; } + .notification.prototype { background: rgba(211, 20, 4, 0.4); } + .notification.prototype::before { content: "\f1e2"; } + /* ---------------------------------------- */ /* Controls Reference */ /* ---------------------------------------- */ #controls-reference .window-content { max-height: 75vh; } + #controls-reference h2 { padding: 2px 0; border-top: 1px solid var(--color-border-dark-tertiary); border-bottom: 1px solid var(--color-border-dark-tertiary); } + #controls-reference h3 { padding: 2px 0; border-top: 1px solid var(--color-border-light-primary); border-bottom: 1px solid var(--color-border-light-primary); font-weight: bold; } + #controls-reference ol.hotkey-list { list-style: none; padding: 0; } -#controls-reference ol.hotkey-list > li { + +#controls-reference ol.hotkey-list>li { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 5px 0; } -#controls-reference ol.hotkey-list > li > * { + +#controls-reference ol.hotkey-list>li>* { flex: 1; } -#controls-reference ol.hotkey-list > li > .flex0 { + +#controls-reference ol.hotkey-list>li>.flex0 { display: block; flex: 0; } -#controls-reference ol.hotkey-list > li > .flex1 { + +#controls-reference ol.hotkey-list>li>.flex1 { flex: 1; } -#controls-reference ol.hotkey-list > li > .flex2 { + +#controls-reference ol.hotkey-list>li>.flex2 { flex: 2; } -#controls-reference ol.hotkey-list > li > .flex3 { + +#controls-reference ol.hotkey-list>li>.flex3 { flex: 3; } + #controls-reference ol.hotkey-list h4 { margin: 0; flex: 2; line-height: 24px; } + #controls-reference ol.hotkey-list .keys { flex: 3; } + #controls-reference ol.hotkey-list .key { display: inline-block; margin: 0 1px; @@ -1088,9 +1212,11 @@ figure figcaption { text-align: center; min-width: 24px; } + #controls-reference ol.hotkey-list li.gm .key { background: #f5eaf5; } + /* ---------------------------------------- */ /* Support Details Report */ /* ---------------------------------------- */ @@ -1104,15 +1230,18 @@ figure figcaption { font-size: var(--font-size-12); overflow-x: auto; } + #support-report:focus { animation: selectSwap 100ms step-end forwards; } + @keyframes selectSwap { to { -webkit-user-select: text; user-select: text; } } + /* ---------------------------------------- */ /* Keybinding Management */ /* ---------------------------------------- */ @@ -1123,12 +1252,15 @@ figure figcaption { /** Single Action */ /** Single Keybinding */ } + #keybindings form { height: 100%; } + #keybindings .hidden { display: none; } + #keybindings .filters { flex: 0 0 220px; height: 100%; @@ -1138,92 +1270,115 @@ figure figcaption { border-right: 1px solid var(--color-border-light-primary); font-size: var(--font-size-12); } + #keybindings .filters h3 { margin: 0; line-height: 38px; border-bottom: 1px solid var(--color-border-light-primary); } + #keybindings .filters .category-filter { padding: 6px 0; border-bottom: 1px solid var(--color-border-light-primary); } + #keybindings .filters .category-filter.active { font-weight: bold; border-bottom: 1px solid var(--color-underline-active); } + #keybindings .filters span.count { float: right; } + #keybindings .categories { height: 100%; } + #keybindings .categories .action-filter { flex: 0 0 32px; } + #keybindings .categories .action-filter .reset-actions { flex: 0; } -#keybindings .categories .action-filter > label { + +#keybindings .categories .action-filter>label { flex: 2; text-align: end; padding-right: 10px; } + #keybindings .categories .category-list { list-style: none; border-top: 1px solid var(--color-border-light-2); padding: 0 4px 0 0; overflow-y: auto; } + #keybindings .category .category-header { padding: 4px 0; border-bottom: 1px solid var(--color-border-light-2); } + #keybindings .category .category-header .category-title { margin: 0; color: var(--color-text-dark-primary); font-weight: bold; } + #keybindings .category .category-header .category-collapse { flex: none; padding-right: 8px; font-size: 16px; } + #keybindings .category .category-header .category-collapse.hidden { display: none; } + #keybindings .category .action-list { padding: 0; } + #keybindings .category .action-list.hidden { display: none; } + #keybindings .action { line-height: 24px; padding: 5px; border-bottom: 1px dotted var(--color-border-light-2); } + #keybindings .action:last-child { border: none; } + #keybindings .action .action-title { margin: 0; font-weight: bold; } + #keybindings .action .action-bindings { list-style: none; margin: 0; padding: 0; } + #keybindings .binding { justify-content: space-between; margin-top: 5px; } + #keybindings .binding .binding-fields { display: flex; } + #keybindings .binding .binding-fields input { margin: 0 3px 0 0; } + #keybindings .binding .binding-fields .binding-input-icon { margin-left: -26px; margin-right: 3px; @@ -1232,6 +1387,7 @@ figure figcaption { flex-grow: 0; font-size: 130%; } + #keybindings .binding .key { flex: none; padding: 0 4px; @@ -1242,9 +1398,11 @@ figure figcaption { box-shadow: 1px 1px #444; text-align: center; } + #keybindings .binding .key.uneditable { background: #cac9c5; } + #keybindings .binding .binding-controls { flex: 0 0 80px; margin-left: 6px; @@ -1252,18 +1410,23 @@ figure figcaption { align-items: center; text-align: center; } + #keybindings .binding .binding-controls .control { flex: 0 0 20px; } + #keybindings .binding .binding-controls .control.conflicts { color: orange; } + #keybindings .binding .binding-controls .control.uneditable { color: gray; } + #keybindings .footer { flex: 0; } + /* ---------------------------------------- */ /* New User Experience */ /* ---------------------------------------- */ @@ -1272,20 +1435,24 @@ a.nue-action { color: var(--color-text-hyperlink); text-decoration: underline; } + h3.nue { padding: 8px 0; border-top: 2px groove var(--color-border-light-highlight); border-bottom: 2px groove var(--color-border-light-highlight); } + footer.nue { border-top: 2px groove var(--color-border-light-highlight); font-size: var(--font-size-11); color: var(--color-text-dark-inactive); padding-top: 6px; } + p.nue { font-size: var(--font-size-12); } + /* ---------------------------------------- */ /* Forms */ /* ---------------------------------------- */ @@ -1298,15 +1465,19 @@ form .form-group-stacked { margin: 3px 0; align-items: center; } -form .form-group > * { + +form .form-group>* { flex: 3; } -form .form-group > label { + +form .form-group>label { flex: 2; } + form .form-group label { line-height: var(--form-field-height); } + form .form-group .form-fields { display: flex; flex-direction: row; @@ -1314,55 +1485,68 @@ form .form-group .form-fields { justify-content: flex-end; align-items: center; } -form .form-group .form-fields > * { + +form .form-group .form-fields>* { flex: 1; margin: 0 3px 0 0; } -form .form-group .form-fields > *:last-child { + +form .form-group .form-fields>*:last-child { margin-right: 0; } -form .form-group .form-fields > label { + +form .form-group .form-fields>label { flex: 0; padding: 0 4px; text-align: center; } -form .form-group .form-fields > label.checkbox { + +form .form-group .form-fields>label.checkbox { flex: none; padding: 0; } -form .form-group .form-fields > input[type="checkbox"] { + +form .form-group .form-fields>input[type="checkbox"] { flex: 0 0 20px; } + form .form-group .form-fields button { flex: 0; line-height: calc(var(--form-field-height) - 4px); } + form .form-group .form-fields span.sep { flex: none; } + form .form-group span.units { flex: 0; line-height: 28px; font-size: var(--font-size-12); color: var(--color-text-dark-secondary); } -form .form-group-stacked > *, -form .form-group.stacked > * { + +form .form-group-stacked>*, +form .form-group.stacked>* { flex: 0 0 100%; } -form .form-group.slim .form-fields > label { + +form .form-group.slim .form-fields>label { flex: none; font-size: var(--font-size-12); color: var(--color-text-dark-secondary); text-align: right; } -form .form-group.slim .form-fields > input[type="number"], -form .form-group.slim .form-fields > input[type="text"] { + +form .form-group.slim .form-fields>input[type="number"], +form .form-group.slim .form-fields>input[type="text"] { flex: 0 0 64px; } + form .form-group.hidden { display: none; } + form h1.form-header, form h2.form-header, form h3.form-header { @@ -1372,6 +1556,7 @@ form h3.form-header { border-top: 1px solid var(--color-border-light-primary); border-bottom: 1px solid var(--color-border-light-primary); } + form .notes, form .hint { flex: 0 0 100%; @@ -1380,12 +1565,14 @@ form .hint { color: var(--color-text-dark-secondary); margin: 3px 0; } + /* ---------------------------------------- */ /* Form Inputs */ /* ---------------------------------------- */ input:focus { outline: none; } + /* Text Input */ input[type="text"], input[type="number"], @@ -1410,6 +1597,7 @@ input[type="time"] { -ms-user-select: text; user-select: text; } + input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, @@ -1417,31 +1605,38 @@ input[type="date"]:focus, input[type="time"]:focus { box-shadow: 0 0 5px var(--color-shadow-primary); } + input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } + input[type="number"] { -moz-appearance: textfield; } + input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 5px; } + input[type="checkbox"]:checked { -webkit-filter: grayscale(100%); } + input[type="radio"] { position: relative; top: 2px; margin: 0 0 0 5px; } + input[type="checkbox"]:checked, input[type="radio"]:checked { -webkit-filter: grayscale(100%); } + /* Checkbox Labels */ label.checkbox { flex: auto; @@ -1451,16 +1646,19 @@ label.checkbox { line-height: 22px; font-size: var(--font-size-11); } -label.checkbox > input[type="checkbox"] { + +label.checkbox>input[type="checkbox"] { width: 16px; height: 16px; margin: 0 3px; position: relative; top: 4px; } -label.checkbox.right > input[type="checkbox"] { + +label.checkbox.right>input[type="checkbox"] { margin: 0 0 0 2px; } + /* Select Boxes */ select { height: calc(var(--form-field-height) + 1px); @@ -1470,17 +1668,21 @@ select { padding: 0 3px; text-overflow: ellipsis; } + select:focus { box-shadow: 0 0 5px var(--color-shadow-primary); outline: none; } + select[multiple] { height: auto; padding: 3px; } + option { background: var(--color-bg-option); } + /* Text Areas */ textarea { width: 100%; @@ -1495,10 +1697,12 @@ textarea { -ms-user-select: text; user-select: text; } + textarea:focus { box-shadow: 0 0 6px var(--color-shadow-primary); outline: none; } + /* Buttons */ button { width: 100%; @@ -1510,51 +1714,63 @@ button { line-height: 28px; font-family: var(--font-primary); } + button:hover, button:focus { outline: none; box-shadow: 0 0 5px var(--color-shadow-primary); } + button:disabled { color: var(--color-text-dark-secondary); box-shadow: none; } + button.hidden { display: none; } -button > i { + +button>i { margin-right: 3px; } + form button { background: rgba(0, 0, 0, 0.1); border: 2px groove var(--color-border-light-highlight); } + input:disabled { border: none; color: var(--color-text-dark-secondary); } + input:disabled:hover { border: none; box-shadow: none; outline: none; } + input::placeholder { color: var(--color-text-dark-secondary); opacity: 1; } + /* Color Picker */ input[type="text"].color { flex: 1.45; } + input[type="color"][data-edit] { height: var(--form-field-height); background: transparent; border: 2px groove var(--color-border-light-highlight); } + input[type="color"][data-edit][data-edit] { margin-left: 5px; flex: 1.45; } + /* File Pickers */ button.file-picker { flex: 0 0 24px; @@ -1562,10 +1778,12 @@ button.file-picker { margin: -1px 0 -1px 4px; order: 99; } -button.file-picker + input[type="text"] { + +button.file-picker+input[type="text"] { height: 28px; margin-right: 5px !important; } + /* Range Input */ input[type=range] { background: transparent; @@ -1574,9 +1792,11 @@ input[type=range] { margin: 0; width: 100%; } + input[type=range]:focus { outline: none; } + input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; @@ -1586,6 +1806,7 @@ input[type=range]::-webkit-slider-runnable-track { border-radius: 3px; border: 1px solid #111; } + input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid var(--color-border-dark); @@ -1597,9 +1818,11 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -4px; } + input[type=range]:focus::-webkit-slider-runnable-track { background: #a6a6a6; } + input[type=range]::-moz-range-track { width: 100%; height: 6px; @@ -1609,6 +1832,7 @@ input[type=range]::-moz-range-track { border-radius: 3px; border: 1px solid var(--color-border-dark-1); } + input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid var(--color-border-dark); @@ -1618,6 +1842,7 @@ input[type=range]::-moz-range-thumb { background: #c85019; cursor: pointer; } + input[type=range]::-ms-track { width: 100%; height: 6px; @@ -1626,18 +1851,21 @@ input[type=range]::-ms-track { border-color: transparent; color: transparent; } + input[type=range]::-ms-fill-lower { background: #8c8c8c; border: 1px solid var(--color-border-dark-1); border-radius: 6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } + input[type=range]::-ms-fill-upper { background: #999999; border: 1px solid var(--color-border-dark-1); border-radius: 6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } + input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid var(--color-border-dark); @@ -1647,13 +1875,16 @@ input[type=range]::-ms-thumb { background: #c85019; cursor: pointer; } + input[type=range]:focus::-ms-fill-lower { background: #999999; } + input[type=range]:focus::-ms-fill-upper { background: #a6a6a6; } -input[type="range"] + .range-value { + +input[type="range"]+.range-value { display: block; flex: 0 1 48px; text-align: center; @@ -1661,6 +1892,7 @@ input[type="range"] + .range-value { padding: 2px; margin-left: 10px; } + /** * Dark mode inputs */ @@ -1668,10 +1900,12 @@ input[type="range"] + .range-value { background: rgba(255, 255, 240, 0.8); border: 2px solid var(--color-border-light-secondary); } + .dark input, .dark select { background: rgba(255, 255, 240, 0.8); } + /* ----------------------------------------- */ /* TinyMCE Editor /* ----------------------------------------- */ @@ -1681,12 +1915,14 @@ input[type="range"] + .range-value { max-width: 100%; overflow: auto; } + .editor-content * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } + .editor-edit { display: none; font-size: 1.25em; @@ -1699,26 +1935,33 @@ input[type="range"] + .range-value { padding: 1px 2px; box-shadow: 0 0 1px var(--color-shadow-dark); } + .editor:hover .editor-edit { display: block; } + /* Oxide Theme Overrides */ .tox.tox-tinymce { border: none; } + .tox.tox-tinymce .tox-toolbar { background: transparent; } + .tox.tox-tinymce .tox-tbtn { font-size: var(--font-size-12); padding: 0 2px; } + .tox.tox-tinymce .tox-tbtn[title="Formats"] { width: 90px; } + .tox.tox-tinymce .tox-edit-area__iframe { background: transparent; } + /* Flexbox */ .flexrow { display: flex; @@ -1726,12 +1969,14 @@ input[type="range"] + .range-value { flex-wrap: wrap; justify-content: flex-start; } + .flexcol { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; } + /* .flexrow > *, .flexcol > * { flex: 1; @@ -1762,22 +2007,28 @@ input[type="range"] + .range-value { flex-wrap: nowrap; justify-content: space-around; } + .tabs .item { text-align: center; } + .tabs .item.active { text-shadow: 0 0 10px var(--color-shadow-primary); } + .tab[data-tab] { display: none; } + .tab[data-tab].active { display: block; } + .tab[data-tab].active.flexrow, .tab[data-tab].active.flexcol { display: flex; } + /* ----------------------------------------- */ /* Filter Navigation /* ----------------------------------------- */ @@ -1788,44 +2039,55 @@ nav.list-filters { justify-content: flex-start; justify-content: flex-end; } -nav.list-filters > * { + +nav.list-filters>* { flex: 1; } -nav.list-filters > .flex0 { + +nav.list-filters>.flex0 { display: block; flex: 0; } -nav.list-filters > .flex1 { + +nav.list-filters>.flex1 { flex: 1; } -nav.list-filters > .flex2 { + +nav.list-filters>.flex2 { flex: 2; } -nav.list-filters > .flex3 { + +nav.list-filters>.flex3 { flex: 3; } + nav.list-filters label { font-weight: bold; } + nav.list-filters a.filter { flex: none; margin-left: 10px; border-bottom: 2px solid var(--color-underline-inactive); } + nav.list-filters a.filter.active { font-weight: bold; border-bottom: 2px solid var(--color-underline-active); } + /* Draggable Containers */ .draggable { cursor: grab; } + #drag-preview { position: absolute; left: -1000px; height: -1000px; z-index: -1; } + /* ----------------------------------------- */ /* Dialog Window /* ----------------------------------------- */ @@ -1836,34 +2098,43 @@ nav.list-filters a.filter.active { justify-content: flex-start; justify-content: space-around; } -.dialog .dialog-buttons > * { + +.dialog .dialog-buttons>* { flex: 1; } -.dialog .dialog-buttons > .flex0 { + +.dialog .dialog-buttons>.flex0 { display: block; flex: 0; } -.dialog .dialog-buttons > .flex1 { + +.dialog .dialog-buttons>.flex1 { flex: 1; } -.dialog .dialog-buttons > .flex2 { + +.dialog .dialog-buttons>.flex2 { flex: 2; } -.dialog .dialog-buttons > .flex3 { + +.dialog .dialog-buttons>.flex3 { flex: 3; } + .dialog .dialog-buttons button { background: rgba(0, 0, 0, 0.1); border: 2px groove var(--color-border-light-highlight); margin: 0 5px 0 0; } + .dialog .dialog-buttons button:last-child { margin-right: 0; } + .dialog .dialog-buttons button.default { background: rgba(0, 0, 0, 0.05); border: 2px groove var(--color-border-light-secondary); } + /* ----------------------------------------- */ /* File Picker /* ----------------------------------------- */ @@ -1871,6 +2142,7 @@ nav.list-filters a.filter.active { line-height: 24px; /* Private Directory */ } + .filepicker .current-dir button { flex: 0 0 32px; margin: 0 5px 0 0; @@ -1880,26 +2152,33 @@ nav.list-filters a.filter.active { border: 1px solid var(--color-border-dark-4); border-radius: 3px; } -.filepicker .current-dir button > i { + +.filepicker .current-dir button>i { margin: 0; } + .filepicker .current-dir button:last-child { margin-right: 0; } + .filepicker .current-dir input[name="target"] { height: 32px; margin: 0 5px 0 0; } + .filepicker .filter-dir label { flex: 1; line-height: 28px; } + .filepicker .filter-dir input { flex: 3; } + .filepicker .tile-size .form-fields { flex: 0 0 156px; } + .filepicker .directory { list-style: none; margin: 0.5em 0; @@ -1911,7 +2190,8 @@ nav.list-filters a.filter.active { overflow: hidden auto; scrollbar-width: thin; } -.filepicker .directory > li { + +.filepicker .directory>li { height: 30px; line-height: 30px; cursor: pointer; @@ -1920,37 +2200,47 @@ nav.list-filters a.filter.active { overflow: hidden; border-bottom: 1px solid var(--color-border-dark-4); } -.filepicker .directory > li > i { + +.filepicker .directory>li>i { margin-right: 5px; } -.filepicker .directory > li.picked { + +.filepicker .directory>li.picked { background: rgba(0, 0, 0, 0.1); font-weight: bold; } -.filepicker .directory > li:last-child { + +.filepicker .directory>li:last-child { border-bottom: none; } -.filepicker .directory > li:hover { + +.filepicker .directory>li:hover { text-shadow: 0 0 5px var(--color-shadow-primary); } -.filepicker .directory > li.dir { + +.filepicker .directory>li.dir { font-weight: bold; } + .filepicker .private button.privacy { background: rgba(115, 49, 255, 0.05); box-shadow: 0 0 4px #7331FF inset; } + .filepicker .private .directory, .filepicker .public .private.dir { background: rgba(115, 49, 255, 0.05); } + .filepicker .details-list img { display: none; } + .filepicker .thumbs-list li { height: 48px; line-height: 48px; } + .filepicker .thumbs-list img { flex: 0 0 48px; object-fit: cover; @@ -1958,11 +2248,13 @@ nav.list-filters a.filter.active { margin-right: 10px; border: none; } + .filepicker .tiles-list { display: grid; grid-template-columns: 100px 100px 100px 100px 100px; width: 508px; } + .filepicker .tiles-list li { width: 100px; height: 100px; @@ -1971,20 +2263,24 @@ nav.list-filters a.filter.active { border-right: 1px solid var(--color-border-dark-primary); border-bottom: 1px solid var(--color-border-dark-primary); } + .filepicker .tiles-list li img { border: none; margin: 0; object-fit: contain; } + .filepicker .tiles-list li.picked { box-shadow: 0 0 6px inset var(--color-shadow-highlight); } + .filepicker .images-list li { position: relative; height: 200px; padding: 0; border: 1px solid var(--color-border-dark-primary); } + .filepicker .images-list li img { width: 100%; height: 200px; @@ -1992,6 +2288,7 @@ nav.list-filters a.filter.active { object-position: 50% 50%; border: none; } + .filepicker .images-list li span.filename { position: absolute; top: 0; @@ -2006,25 +2303,30 @@ nav.list-filters a.filter.active { line-height: 20px; padding-top: 4px; } + .filepicker .upload-file label, .filepicker .selected-file label { flex: 1; } + .filepicker .display-modes { flex: 0 0 160px; text-align: center; } + .filepicker .display-modes a { margin: 0 3px; border: 1px solid var(--color-border-light-tertiary); background: var(--color-bg-btn-minor-inactive); border-radius: 3px; } + .filepicker .display-modes a.active { text-shadow: 0 0 6px var(--color-shadow-highlight); border: 1px solid var(--color-border-dark-primary); background: var(--color-bg-btn-minor-active); } + /* ----------------------------------------- */ /* TinyMCE Editor /* ----------------------------------------- */ @@ -2034,28 +2336,35 @@ nav.list-filters a.filter.active { box-shadow: none; outline: none; } + .app .mce-panel span { display: inherit; } + .app .mce-top-part { border-bottom: 2px groove var(--color-border-light-highlight); } + .app .mce-top-part::before { box-shadow: none; } + .app .mce-btn { background: transparent; border: none; color: var(--color-text-dark-1); } + .app .mce-btn:hover { background: transparent; border: none; color: inherit; } + .app .mce-btn .mce-ico { color: var(--color-text-dark-1); } + .dice-roll { display: flex; flex-direction: row; @@ -2063,36 +2372,46 @@ nav.list-filters a.filter.active { justify-content: flex-start; justify-content: space-around; } -.dice-roll > * { + +.dice-roll>* { flex: 1; } -.dice-roll > .flex0 { + +.dice-roll>.flex0 { display: block; flex: 0; } -.dice-roll > .flex1 { + +.dice-roll>.flex1 { flex: 1; } -.dice-roll > .flex2 { + +.dice-roll>.flex2 { flex: 2; } -.dice-roll > .flex3 { + +.dice-roll>.flex3 { flex: 3; } + .dice-roll .dice-result, .dice-roll .dice-tooltip { flex: 0 0 100%; } + .dice-roll .dice-tooltip { display: none; order: 1; } + .dice-roll .dice-tooltip.expanded { display: block; } + .dice-roll .dice-result { order: 2; } + .dice-roll .dice-formula, .dice-roll .dice-total { flex: 0 0 100%; @@ -2106,20 +2425,25 @@ nav.list-filters a.filter.active { box-shadow: 0 0 2px #FFF inset; word-break: break-all; } + .dice-roll .dice-formula { margin-bottom: 5px; } + .dice-roll .dice-total { flex: 0; font-size: var(--font-size-20); font-weight: bold; } + .dice-roll .dice-total.success { color: green; } + .dice-roll .dice-total.failure { color: red; } + /** Inline Roll Tooltip */ .inline-roll .dice-tooltip { width: 280px; @@ -2130,19 +2454,23 @@ nav.list-filters a.filter.active { padding: 5px 5px 0; box-shadow: 0 0 10px var(--color-shadow-dark); } + .inline-roll:hover .dice-tooltip { text-shadow: none; } + /** * Legacy Tooltip Code */ -.dice-roll .dice-part:hover > .dice-tooltip { +.dice-roll .dice-part:hover>.dice-tooltip { display: block; } + .dice-roll .dice-part.die { font-weight: 700; cursor: pointer; } + .dice-roll .dice-part .dice-tooltip { display: none; position: absolute; @@ -2156,23 +2484,29 @@ nav.list-filters a.filter.active { font-size: var(--font-size-14); color: var(--color-text-light-4); } + .dice-roll .dice-tooltip .reroll { color: var(--color-text-dark-6); text-decoration: line-through; } + .dice-roll .dice-tooltip .fail { color: red; } + .dice-roll .dice-tooltip .crit { color: lightgreen; } + .dice-roll .dice-flavor { text-align: right; font-size: var(--font-size-12); } + .message.ic .dice-roll { font-style: normal; } + /* ----------------------------------------- */ /* Dice Tooltip /* ----------------------------------------- */ @@ -2181,16 +2515,19 @@ nav.list-filters a.filter.active { line-height: 24px; border-bottom: 1px solid var(--color-text-light-6); } + .dice-tooltip .part-header .part-formula { font-weight: bold; flex: 1; } + .dice-tooltip .part-header .part-flavor { flex: none; margin-right: 5px; font-size: var(--font-size-12); color: var(--color-text-dark-secondary); } + .dice-tooltip .part-header .part-total { flex: none; font-size: var(--font-size-16); @@ -2201,12 +2538,14 @@ nav.list-filters a.filter.active { border-bottom: none; border-radius: 3px 3px 0 0; } + .dice-tooltip .dice-rolls { list-style: none; margin: 5px 0; padding: 0; overflow: hidden; } + .dice-tooltip .dice-rolls .roll { position: relative; width: 24px; @@ -2221,36 +2560,46 @@ nav.list-filters a.filter.active { font-weight: bold; text-align: center; } + .dice-tooltip .dice-rolls .roll.d4 { background-image: url("/icons/svg/d4-grey.svg"); } + .dice-tooltip .dice-rolls .roll.d6 { background-image: url("/icons/svg/d6-grey.svg"); } + .dice-tooltip .dice-rolls .roll.d8 { background-image: url("/icons/svg/d8-grey.svg"); } + .dice-tooltip .dice-rolls .roll.d10 { background-image: url("/icons/svg/d10-grey.svg"); } + .dice-tooltip .dice-rolls .roll.d12 { background-image: url("/icons/svg/d12-grey.svg"); } + .dice-tooltip .dice-rolls .roll.d20 { background-image: url("/icons/svg/d20-grey.svg"); } + .dice-tooltip .dice-rolls .roll.min { color: #aa0200; filter: sepia(0.5) hue-rotate(-60deg); } + .dice-tooltip .dice-rolls .roll.max { color: #18520b; filter: sepia(0.5) hue-rotate(60deg); } + .dice-tooltip .dice-rolls .roll.discarded, .dice-tooltip .dice-rolls .roll.rerolled { filter: sepia(0.5) contrast(0.75) opacity(0.4); } + .dice-tooltip .dice-rolls .roll.exploded:before { font-size: 0.5rem; font-family: "Font Awesome 5 Free"; @@ -2259,14 +2608,17 @@ nav.list-filters a.filter.active { top: -8px; right: 0px; } + .dice-tooltip .dice-rolls .roll.success { color: #18520b; filter: sepia(0.5) hue-rotate(60deg); } + .dice-tooltip .dice-rolls .roll.failure { color: #aa0200; filter: sepia(0.5) hue-rotate(-60deg); } + /* Applications */ #hud { position: absolute; @@ -2274,6 +2626,7 @@ nav.list-filters a.filter.active { pointer-events: none; z-index: calc(var(--z-index-canvas) + 1); } + /* ---------------------------------------- */ /* HUD Application /* ---------------------------------------- */ @@ -2283,6 +2636,7 @@ nav.list-filters a.filter.active { pointer-events: none; transform-origin: top left; } + .placeable-hud .col { display: flex; flex-direction: column; @@ -2292,36 +2646,45 @@ nav.list-filters a.filter.active { position: absolute; height: 100%; } -.placeable-hud .col > * { + +.placeable-hud .col>* { flex: 1; } -.placeable-hud .col > .flex0 { + +.placeable-hud .col>.flex0 { display: block; flex: 0; } -.placeable-hud .col > .flex1 { + +.placeable-hud .col>.flex1 { flex: 1; } -.placeable-hud .col > .flex2 { + +.placeable-hud .col>.flex2 { flex: 2; } -.placeable-hud .col > .flex3 { + +.placeable-hud .col>.flex3 { flex: 3; } + .placeable-hud .col.left { width: 70px; justify-content: flex-start; } + .placeable-hud .col.middle { width: calc(100% - (70px * 2)); left: 70px; justify-content: space-between; } + .placeable-hud .col.right { width: 70px; right: 0; justify-content: flex-start; } + .placeable-hud input[type="text"] { width: 100%; /* background: rgba(0, 0, 0, 0.6); @@ -2336,10 +2699,12 @@ nav.list-filters a.filter.active { font-weight: bold; pointer-events: all; } + .placeable-hud input[type="text"]:focus { /* box-shadow: 0 0 10px #c60; border: 1px solid var(--color-border-highlight-alt); */ } + .placeable-hud .control-icon { box-sizing: content-box; width: 40px; @@ -2355,19 +2720,24 @@ nav.list-filters a.filter.active { border-radius: 8px; pointer-events: all; } + .placeable-hud .control-icon:first-child { margin-top: 0; } + .placeable-hud .control-icon:hover { color: var(--color-text-light-1); } + .placeable-hud .control-icon.active { /* border: 1px solid var(--color-border-highlight); */ } -.placeable-hud .control-icon > i[class^=fa] { + +.placeable-hud .control-icon>i[class^=fa] { position: relative; top: 1px; } + .placeable-hud .control-icon img { display: block; margin: 2px; @@ -2375,9 +2745,11 @@ nav.list-filters a.filter.active { border: none; opacity: 0.7; } + .placeable-hud .control-icon img:hover { opacity: 1; } + /* ---------------------------------------- */ /* Token HUD /* ---------------------------------------- */ @@ -2386,43 +2758,54 @@ nav.list-filters a.filter.active { z-index: calc(var(--z-index-window) + 1); border: none; } + #token-hud .col { height: calc(100% + 100px); top: -50px; } + #token-hud .col.left { justify-content: center; left: -70px; } + #token-hud .col.right { justify-content: center; right: -70px; } + #token-hud .col.middle { width: 100%; left: 0; justify-content: space-between; } + #token-hud .attribute { flex: 0 0 40px; } + #token-hud .attribute.bar1 { bottom: 0; } + #token-hud .attribute.bar1 input { border: 1px solid #7cd000; } + #token-hud .attribute.bar2 { top: 0; } + #token-hud .attribute.bar2 input { border: 1px solid #659db5; } + #token-hud .attribute.elevation { position: relative; width: 56px; margin: 8px 0; } + #token-hud .attribute i.fas { position: absolute; top: -5px; @@ -2430,9 +2813,11 @@ nav.list-filters a.filter.active { font-size: var(--font-size-18); color: var(--color-text-light-5); } + #token-hud .control-icon.effects { position: relative; } + #token-hud .status-effects { visibility: hidden; position: absolute; @@ -2449,9 +2834,11 @@ nav.list-filters a.filter.active { border-radius: 4px; pointer-events: all; } + #token-hud .status-effects.active { visibility: visible; } + #token-hud .status-effects .effect-control { width: 24px; height: 24px; @@ -2460,16 +2847,20 @@ nav.list-filters a.filter.active { border: none; opacity: 0.5; } + #token-hud .status-effects .effect-control:hover { opacity: 0.75; } + #token-hud .status-effects .effect-control.active { opacity: 1; } + #token-hud .status-effects .effect-control.overlay { opacity: 1; border: 1px solid var(--color-border-highlight); } + /* ---------------------------------------- */ /* Chat Bubbles /* ---------------------------------------- */ @@ -2485,22 +2876,27 @@ nav.list-filters a.filter.active { box-shadow: 0 0 20px var(--color-shadow-dark); overflow: hidden; } + .chat-bubble .bubble-content { position: relative; top: 0; } + .chat-bubble.left { border-radius: 16px 8px 16px 4px; } + .chat-bubble.right { border-radius: 8px 16px 4px 16px; } + .chat-bubble.emote { background: #f3edde; border: 2px solid #887c5d; color: var(--color-text-dark-3); font-style: italic; } + #logo { z-index: var(--z-index-ui); border: none; @@ -2510,6 +2906,7 @@ nav.list-filters a.filter.active { margin: 12px 0 0 10px; display: none; } + #navigation { width: 100%; gap: 5px; @@ -2522,7 +2919,7 @@ nav.list-filters a.filter.active { } #scene-list { - gap: 5px; + gap: 5px; } #navigation .nav-item { @@ -2530,6 +2927,7 @@ nav.list-filters a.filter.active { text-align: center; pointer-events: all; } + #navigation #nav-toggle { flex: 0 0 20px; display: flex; @@ -2538,24 +2936,27 @@ nav.list-filters a.filter.active { } #navigation #nav-toggle i { - display: flex; - align-items: center; + display: flex; + align-items: center; } + #navigation .scene { - line-height: 12px; + line-height: 12px; } #navigation { - flex-wrap: unset; + flex-wrap: unset; } #scene-list { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } + #navigation #nav-toggle:hover { /* text-shadow: 0 0 10px var(--color-shadow-highlight); */ } + /* #navigation #scene-list { list-style: none; margin: 0; @@ -2572,6 +2973,7 @@ nav.list-filters a.filter.active { /* background: #130027; border: 1px solid #3a00ae; */ } + #navigation #scene-list .scene.view, #navigation #scene-list .scene.context { /* cursor: default; @@ -2581,6 +2983,7 @@ nav.list-filters a.filter.active { border-bottom: 1px solid var(--color-border-highlight); box-shadow: 0 0 10px var(--color-shadow-highlight); */ } + #navigation #scene-list .scene ul.scene-players { list-style: none; margin: 0; @@ -2589,6 +2992,7 @@ nav.list-filters a.filter.active { top: 24px; left: 0; } + #navigation #scene-list .scene li.scene-player { float: left; height: 14px; @@ -2603,15 +3007,19 @@ nav.list-filters a.filter.active { border: 1px solid var(--color-border-dark); */ border-radius: 8px; } + #navigation.collapsed { pointer-events: none; } + #navigation.collapsed #nav-toggle { pointer-events: all; } + #navigation.collapsed #scene-list { display: none; } + #loading { display: none; width: 100%; @@ -2622,6 +3030,7 @@ nav.list-filters a.filter.active { border-radius: 4px; z-index: calc(var(--z-index-canvas) + 1); } + #loading label { line-height: 16px; position: absolute; @@ -2632,6 +3041,7 @@ nav.list-filters a.filter.active { background: rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 6px var(--color-text-light-0); } + #loading #loading-bar { position: relative; margin: 1px; @@ -2640,14 +3050,17 @@ nav.list-filters a.filter.active { border: 1px solid #b2c3ff; border-radius: 2px; } + #loading #context { left: 5px; } + #loading #progress { top: -4px; right: 0; padding: 0 8px; } + /* ----------------------------------------- */ /* Main Menu /* ----------------------------------------- */ @@ -2662,11 +3075,13 @@ nav.list-filters a.filter.active { border-radius: 10px; box-shadow: 0 0 30px var(--color-shadow-dark); } + #menu #menu-items { list-style: none; margin: 5px; padding: 0; } + #menu #menu-items li { display: flex; flex-direction: row; @@ -2675,40 +3090,49 @@ nav.list-filters a.filter.active { text-align: center; cursor: pointer; } -#menu #menu-items li > * { + +#menu #menu-items li>* { flex: 1; } -#menu #menu-items li > .flex0 { + +#menu #menu-items li>.flex0 { display: block; flex: 0; } -#menu #menu-items li > .flex1 { + +#menu #menu-items li>.flex1 { flex: 1; } -#menu #menu-items li > .flex2 { + +#menu #menu-items li>.flex2 { flex: 2; } -#menu #menu-items li > .flex3 { + +#menu #menu-items li>.flex3 { flex: 3; } -#menu #menu-items li > i { + +#menu #menu-items li>i { flex: 0 0 36px; font-size: var(--font-size-24); line-height: 48px; } + #menu #menu-items li h4 { font-size: 2rem; line-height: 48px; margin: 0; } + #menu #menu-items li:hover { text-shadow: 0 0 10px var(--color-shadow-highlight); } + /* ----------------------------------------- */ /* Scene Controls /* ----------------------------------------- */ #controls { - /* + /* flex: 1; display: flex; height: 0; @@ -2725,22 +3149,26 @@ nav.list-filters a.filter.active { border: none; } */ -#controls ol > li { +#controls ol>li { pointer-events: all; } + #controls ol.disabled { opacity: 0.4; pointer-events: none; } + #controls ol.control-tools { list-style: none; margin: 0; padding: 0; pointer-events: none; } + #controls ol.control-tools .control-tool { pointer-events: all; } + #controls ol .scene-control, #controls ol .control-tool { /* width: 20px; @@ -2755,9 +3183,9 @@ nav.list-filters a.filter.active { /* border: 1px solid var(--color-border-dark); border-radius: 5px; */ cursor: pointer; - justify-content: center; - align-content: center; - display: flex; + justify-content: center; + align-content: center; + display: flex; } #controls ol .scene-control.active, @@ -2769,6 +3197,7 @@ nav.list-filters a.filter.active { border-bottom: 1px solid var(--color-border-highlight); box-shadow: 0 0 10px var(--color-shadow-highlight); */ } + #controls ol .scene-control i.fas, #controls ol .control-tool i.fas { margin: 0; @@ -2776,21 +3205,23 @@ nav.list-filters a.filter.active { #controls ol.sub-controls, #controls ol.main-controls { - /* width: 66px; */ - flex-direction: column; - display: flex; - gap: 5px; - /* overflow: hidden; */ - /* padding-left: 20px; */ + /* width: 66px; */ + flex-direction: column; + display: flex; + gap: 5px; + /* overflow: hidden; */ + /* padding-left: 20px; */ } #controls ol.sub-controls { display: none; /* flex-wrap: wrap; */ } + #controls ol.sub-controls.active { display: flex; } + /* #controls ol.sub-controls .control-tool { margin-right: 8px; } */ @@ -2817,9 +3248,11 @@ nav.list-filters a.filter.active { background: url("/ui/pausebg.png") no-repeat 50% 50%; display: none; } + #pause.paused { display: block; } + #pause img { position: absolute; top: -16px; @@ -2830,14 +3263,17 @@ nav.list-filters a.filter.active { border: none; -webkit-animation: rotation 5s infinite linear; } + @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(359deg); } } + #pause h3 { margin: 0; font-size: 2em; @@ -2849,6 +3285,7 @@ nav.list-filters a.filter.active { color: var(--color-text-light-1); text-shadow: 1px 1px 30px var(--color-shadow-dark); } + /* ---------------------------------------- */ /* Hotbar */ /* ---------------------------------------- */ @@ -2860,6 +3297,7 @@ nav.list-filters a.filter.active { flex-wrap: nowrap; /* margin-bottom: 10px; */ } + #hotbar .bar-controls { flex: 0 0 20px; height: 100%; @@ -2877,22 +3315,26 @@ nav.list-filters a.filter.active { } .hotbar-page-controls { - padding: 0px 3px; + padding: 0px 3px; } + #hotbar .bar-controls a { display: block; } + #hotbar .bar-controls a.page-control { /* font-size: 1.5em; line-height: 12px; */ font-size: medium; } + #hotbar .bar-controls span.page-number { /* display: block; font-size: var(--font-size-20); line-height: 8px; */ font-size: medium; } + #hotbar #action-bar { flex: 1; height: 100%; @@ -2901,16 +3343,18 @@ nav.list-filters a.filter.active { margin-left: 5px; gap: 5px; } + #hotbar #action-bar.collapsed { display: none; pointer-events: none; } + #hotbar #macro-list { flex-wrap: nowrap; height: 100%; display: flex; list-style: none; - gap:5px; + gap: 5px; /* margin: 0 2px; padding: 0; @@ -2919,6 +3363,7 @@ nav.list-filters a.filter.active { display: grid; grid-template-columns: repeat(10, var(--macro-size)); */ } + #hotbar .macro { position: relative; width: var(--macro-size); @@ -2929,15 +3374,19 @@ nav.list-filters a.filter.active { /* box-shadow: 0 0 5px var(--color-shadow-dark) inset; */ cursor: pointer; } + #hotbar .macro.inactive { /* box-shadow: 0 0 5px #444 inset; */ } + #hotbar .macro:hover { /* box-shadow: 0 0 10px var(--color-shadow-highlight) inset; */ } + #hotbar .macro.active:hover { /* border: 1px solid var(--color-border-highlight-alt); */ } + #hotbar .macro .macro-key { /* position: absolute; top: 2px; @@ -2948,6 +3397,7 @@ nav.list-filters a.filter.active { font-weight: bold; pointer-events: none; */ } + #hotbar .macro .macro-icon { /* object-fit: cover; object-position: 50% 0; @@ -2956,6 +3406,7 @@ nav.list-filters a.filter.active { width: calc(var(--macro-size) - 2px); */ width: 100%; } + #hotbar .macro .tooltip { display: block; min-width: 148px; @@ -2973,12 +3424,14 @@ nav.list-filters a.filter.active { white-space: nowrap; word-break: break-all; } + #hotbar #hotbar-directory-controls, #hotbar #hotbar-page-controls { pointer-events: all; justify-content: space-around; gap: 3px; } + #hotbar #hotbar-directory-controls a { /* line-height: 24px; */ } @@ -3020,6 +3473,7 @@ nav.list-filters a.filter.active { color: var(--color-text-light-5); text-shadow: 1px 1px 4px var(--color-shadow-dark); } + /* ---------------------------------------- */ /* PRIMARY SIDEBAR */ /* ---------------------------------------- */ @@ -3028,9 +3482,11 @@ nav.list-filters a.filter.active { pointer-events: all; /* border: 1px solid var(--color-border-dark); */ } + #sidebar.collapsed { height: auto; } + /* The Sidebar Tabs Container */ #sidebar-tabs { /* --sidebar-tab-height: 32px; @@ -3042,51 +3498,61 @@ nav.list-filters a.filter.active { box-shadow: 0 0 10px var(--color-shadow-primary); */ font-size: 14px; } -#sidebar-tabs > .item { + +#sidebar-tabs>.item { /* position: relative; flex: 0 0 var(--sidebar-tab-width); line-height: var(--sidebar-tab-height); border: 1px solid transparent; border-radius: 5px 5px 0 0; */ } -#sidebar-tabs > .item.active { + +#sidebar-tabs>.item.active { color: var(--color-text-light-highlight); /* border: 1px solid var(--color-border-highlight-alt); */ border-bottom: none; /* box-shadow: 0 0 6px inset var(--color-shadow-highlight); */ } -#sidebar-tabs > .item i[class^=fa] { + +#sidebar-tabs>.item i[class^=fa] { margin-right: 0; } -#sidebar-tabs > .collapse { + +#sidebar-tabs>.collapse { position: relative; flex: 0 0 var(--sidebar-tab-width); line-height: var(--sidebar-tab-height); color: var(--color-text-light-primary); text-align: center; } + /* A Directory Listing */ .directory { overflow: hidden; } + .directory .directory-header { flex: none; line-height: var(--sidebar-header-height); text-align: center; margin: 0 0 3px; } + .directory .directory-header .header-search { flex: 1; align-items: center; } -.directory .directory-header .header-search > * { + +.directory .directory-header .header-search>* { flex: 0 0 24px; } + .directory .directory-header .header-search input { flex: 1; margin: 0 3px; background: rgba(255, 255, 245, 0.8); } + .directory .directory-list { flex: 1; list-style: none; @@ -3095,19 +3561,23 @@ nav.list-filters a.filter.active { overflow-y: auto; scrollbar-width: thin; } + .directory .directory-list .directory-item { line-height: var(--sidebar-item-height); border-top: 1px solid transparent; border-bottom: 1px solid transparent; } + .directory .directory-list .directory-item h3, .directory .directory-list .directory-item h4 { white-space: nowrap; overflow: hidden; } + .directory .directory-list .directory-item .document-name { margin: 0 0 0 8px; } + .directory .directory-list .directory-item img { flex: 0 0 var(--sidebar-item-height); height: var(--sidebar-item-height); @@ -3116,27 +3586,34 @@ nav.list-filters a.filter.active { object-position: 50% 0; border: none; } + .directory .directory-list .directory-item img[data-src] { visibility: hidden; } + .directory .directory-list .directory-item.folder { border: none; } + .directory .directory-list .directory-item.folder .context { background-color: transparent !important; border-color: var(--color-border-highlight); } + .directory .directory-list .directory-item.document { border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark-3); } + .directory .directory-list .directory-item:last-child { border-bottom-color: transparent; } + .directory .directory-list .directory-item.context, .directory .directory-list .directory-item.active { border-color: var(--color-border-highlight); } + .directory .action-buttons button { height: 28px; line-height: 26px; @@ -3144,70 +3621,86 @@ nav.list-filters a.filter.active { min-width: max-content; white-space: nowrap; } + .directory .directory-footer { flex: none; } + #sidebar.collapsed #sidebar-tabs { flex-direction: column; border-bottom: none; box-shadow: none; } -#sidebar.collapsed #sidebar-tabs > .item.active { + +#sidebar.collapsed #sidebar-tabs>.item.active { border-bottom: 1px solid var(--color-border-highlight-alt); border-radius: 5px; } + #sidebar.collapsed .sidebar-tab { display: none; } + /* ----------------------------------------- */ /* Folders and Sub-folders /* ----------------------------------------- */ -li.folder > .folder-header { +li.folder>.folder-header { padding: 6px; line-height: 24px; background: rgba(255, 255, 255, 0.2); border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark); } -li.folder > .folder-header h3 { + +li.folder>.folder-header h3 { margin: 0; color: var(--color-text-light-highlight); line-height: 24px; } -li.folder > .folder-header h3 > i { + +li.folder>.folder-header h3>i { margin-right: 10px; } -li.folder > .folder-header .create-folder, -li.folder > .folder-header .create-document { + +li.folder>.folder-header .create-folder, +li.folder>.folder-header .create-document { flex: 0 0 20px; text-align: center; color: var(--color-text-light-3); font-size: var(--font-size-14); } + li.folder.collapsed .subdirectory { display: none; } -li.folder.collapsed > .folder-header { + +li.folder.collapsed>.folder-header { background: rgba(0, 0, 0, 0.5); } -li.folder.collapsed > .folder-header h3 { + +li.folder.collapsed>.folder-header h3 { text-shadow: none; color: inherit; } -li.folder.collapsed > .folder-header h3 > i:before { + +li.folder.collapsed>.folder-header h3>i:before { content: "\f07b"; } -li.folder.collapsed > .folder-header .create-folder { + +li.folder.collapsed>.folder-header .create-folder { display: none; } -li.folder.droptarget > header h3 { + +li.folder.droptarget>header h3 { text-shadow: 1px 1px 3px var(--color-shadow-dark); font-size: 1.2em; } -li.folder.droptarget > header h3 i { + +li.folder.droptarget>header h3 i { text-shadow: 0 0 4px var(--color-shadow-primary); transform: scale(1.2); } + /** * Subdirectory Styles */ @@ -3218,12 +3711,15 @@ li.folder.droptarget > header h3 i { border-left: 6px solid var(--color-border-dark-1); border-bottom: 2px solid var(--color-border-dark-1); } + .subdirectory:empty { border: none; } + .subdirectory .folder { border-left: 2px solid var(--color-border-dark-3); } + /* ----------------------------------------- */ /* 1.0 - Chat Panel /* ----------------------------------------- */ @@ -3234,39 +3730,48 @@ li.folder.droptarget > header h3 i { top: -1px; right: -2px; } + .notification-pip.update { position: relative; padding-right: 2px; } + #chat-notification { display: none; } + #chat-controls { flex: 0 0 28px; margin: 0 6px; align-content: center; } + #chat-controls .chat-control-icon { flex: 0; } + #chat-controls .roll-type-select { width: 200px; height: 24px; margin: 0 6px; background: rgba(255, 255, 245, 0.8); } + #chat-controls i.fas { font-size: var(--font-size-20); line-height: 28px; } + #chat-controls .control-buttons { flex: 0 0 48px; } + #chat-controls .control-buttons a { display: inline-block; width: 20px; text-align: center; } + /* Chat Log Container */ #chat-log { flex: 1; @@ -3277,6 +3782,7 @@ li.folder.droptarget > header h3 i { overflow-x: hidden; list-style: none; } + /* Single Chat Message */ .chat-message { margin: 3px; @@ -3287,66 +3793,80 @@ li.folder.droptarget > header h3 i { border: 2px solid #6f6c66; border-radius: 5px; } + .chat-message .message-header { line-height: 20px; color: var(--color-text-dark-secondary); } + .chat-message .message-header .message-sender { flex: 3; margin: 0; white-space: nowrap; } + .chat-message .message-header .message-metadata { flex: 2; text-align: right; font-size: var(--font-size-12); } + .chat-message .message-header .flavor-text, .chat-message .message-header .whisper-to { flex: 0 0 100%; font-size: var(--font-size-12); } + .chat-message .message-content { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } + .chat-message.emote { background: #f3edde; border: 2px solid #887c5d; } + .chat-message.whisper { background: #e8e8ef; border: 2px solid #545469; } + .chat-message.blind { background: #f5eaf5; border: 2px solid #6b476b; } + .chat-message .cards-notification { align-items: center; } -.chat-message .cards-notification > .icon { + +.chat-message .cards-notification>.icon { flex: 0 0 32px; height: 32px; margin-right: 8px; } -.chat-message .cards-notification > p { + +.chat-message .cards-notification>p { margin: 0; } + /* New Chat Message Form */ #chat-form { height: 100px; flex: 0 0 100px; margin: 0 6px 6px; } + #chat-form textarea { width: 100%; height: 100%; resize: none; background: url(/ui/parchment.jpg) repeat; } + /* Roll Table Results */ .chat-message .table-draw .table-description { border-top: 1px solid var(--color-border-light-primary); @@ -3354,17 +3874,20 @@ li.folder.droptarget > header h3 i { font-size: var(--font-size-12); padding: 5px 0; } + .chat-message .table-draw .table-results { list-style: none; margin: 5px 0 0; padding: 0; } + .chat-message .table-draw .table-results .table-result { display: flex; align-items: center; border-bottom: 1px solid var(--color-border-light-primary); padding: 3px 0; } + .chat-message .table-draw .table-results .table-result img.result-image { flex: 0 0 32px; width: 32px; @@ -3372,32 +3895,39 @@ li.folder.droptarget > header h3 i { margin-right: 8px; object-fit: cover; } + .chat-message .table-draw .table-results .table-result .result-text { margin: 0; padding: 0; line-height: 16px; } + .chat-message .table-draw .table-results .table-result:last-child { border-bottom: none; } + /** Card Draws */ .chat-message .card-draw { align-items: center; } + .chat-message .card-draw .card-face { height: 48px; flex: 0; margin-right: 8px; } + .chat-message .card-draw .card-name { line-height: 48px; margin: 0; font-weight: bold; } + /* Popped-out Message */ .chat-popout .window-content { padding: 1px; } + /* ----------------------------------------- */ /* 2.0 - Combat Tracker /* ----------------------------------------- */ @@ -3408,20 +3938,25 @@ li.folder.droptarget > header h3 i { text-align: center; border-bottom: 2px groove var(--color-border-dark-4); } + #combat #combat-round .encounters { --control-width: 28px; } + #combat #combat-round .encounters a { font-size: var(--font-size-14); flex: 0 0 var(--control-width); color: var(--color-text-light-6); } + #combat #combat-round .encounters a.combat-cycle { font-size: var(--font-size-24); } + #combat #combat-round .encounters a[disabled] { visibility: hidden; } + #combat #combat-round .encounters h4 { flex: 1; margin: 0; @@ -3429,68 +3964,83 @@ li.folder.droptarget > header h3 i { color: var(--color-text-light-5); text-align: center; } + #combat #combat-round .encounters h3 { flex: 1; margin: 0; font-size: var(--font-size-18); text-align: center; } + #combat #combat-round .encounters h3.encounter-title { margin-left: var(--control-width); } + #combat #combat-round .encounters:not(.combat) a[disabled] { display: none; } + #combat #combat-tracker { height: calc(100% - (var(--sidebar-header-height) * 3px - 2px)); padding: 1px 0; } + #combat #combat-controls { margin: 0; border-top: 2px groove var(--color-border-dark-4); padding-top: 4px; } + #combat #combat-controls a { flex: 1; font-size: var(--font-size-20); text-align: center; line-height: var(--sidebar-header-height); } + #combat #combat-controls a.center { flex: 3; } + #combat li.combatant .token-image { margin: 0; } + #combat li.combatant .token-name { flex: 1; overflow: hidden; margin: 0 5px; text-shadow: 1px 1px 4px var(--color-shadow-dark); } + #combat li.combatant .token-name h4 { flex: 0 0 24px; line-height: 28px; margin: 0 0 2px; } + #combat li.combatant .token-name .combatant-controls { flex: 0 0 20px; font-size: var(--font-size-14); line-height: 20px; } + #combat li.combatant .token-name .combatant-control { flex: 0 0 20px; height: 20px; float: left; color: var(--color-text-dark-5); } + #combat li.combatant .token-name .combatant-control.active { color: var(--color-text-light-1); } + #combat li.combatant .token-name .token-effects { height: 20px; overflow: hidden; } + #combat li.combatant .token-name img.token-effect { width: 16px; height: 16px; @@ -3498,20 +4048,24 @@ li.folder.droptarget > header h3 i { border: none; border-radius: 0; } + #combat li.combatant .token-resource { flex: 0 0 32px; color: var(--color-text-light-4); text-align: center; border-right: 1px solid var(--color-border-dark-2); } + #combat li.combatant .token-initiative { flex: 0 0 48px; text-align: center; } + #combat li.combatant .token-initiative .initiative { font-size: var(--font-size-14); text-shadow: 1px 1px 4px var(--color-shadow-dark); } + #combat li.combatant .roll { display: block; width: 40px; @@ -3520,38 +4074,48 @@ li.folder.droptarget > header h3 i { background-size: 32px; margin: 0 0.5em; } + #combat li.combatant .roll:hover { background-image: url(/icons/svg/d20-highlight.svg); } + #combat li.combatant.hover, #combat li.combatant:hover { background: rgba(255, 255, 255, 0.08); } + #combat li.combatant.active { background: rgba(255, 255, 255, 0.1); } + #combat li.combatant.active .initiative { font-weight: bold; } + #combat li.combatant.hidden { color: var(--color-text-light-7); } + #combat li.combatant.hidden img { opacity: 0.3; } + #combat li.combatant.defeated { color: #b32019; } + #combat li.combatant.defeated img { opacity: 0.3; transform: scale(0.75); } + /* ----------------------------------------- */ /* 3.0 - Scenes Directory /* ----------------------------------------- */ #scenes { --sidebar-scene-height: 100px; } + #scenes .scene { position: relative; height: var(--sidebar-scene-height); @@ -3561,12 +4125,14 @@ li.folder.droptarget > header h3 i { /* border: 2px solid var(--color-border-dark-1); box-shadow: 0 0 20px var(--color-shadow-dark) inset; */ } + #scenes .scene.context, #scenes .scene.active { margin-top: 0; border: 2px solid var(--color-border-dark); /* box-shadow: 0 0 10px var(--color-shadow-highlight); */ } + #scenes .scene h3 { margin: 0; line-height: calc(var(--sidebar-scene-height) - 10px); @@ -3575,16 +4141,19 @@ li.folder.droptarget > header h3 i { font-weight: normal; text-shadow: 1px 1px 3px var(--color-shadow-dark); } + #scenes .subdirectory { border-left: 10px solid var(--color-border-dark); border-bottom: none; } + /* ----------------------------------------- */ /* 6.0 - Journal /* ----------------------------------------- */ #journal .document { line-height: 32px; } + /* ----------------------------------------- */ /* 7.0 - Playlists /* ----------------------------------------- */ @@ -3594,6 +4163,7 @@ li.folder.droptarget > header h3 i { /** Single Sound Controls */ /** Global Audio Controls */ } + #playlists h4 { height: 20px; overflow: hidden; @@ -3602,83 +4172,103 @@ li.folder.droptarget > header h3 i { white-space: normal; word-break: break-all; } + #playlists .playlist { padding: 8px; line-height: 20px; } + #playlists .playlist .playlist-header { flex: 0 0 100%; justify-content: space-between; text-decoration: underline; } + #playlists .playlist .playlist-header .playlist-name { cursor: pointer; } + #playlists .playlist .playlist-header .playlist-name i.fa { color: var(--color-text-light-6); margin-left: 5px; } + #playlists .playlist-sounds { flex: 0 0 100%; list-style: none; margin: 0; padding: 0; } + #playlists .collapsed .playlist-sounds { display: none; } + #playlists li.sound { margin: 2px 0; padding: 0; align-items: center; } + #playlists li.sound .sound-playback { flex: 0 0 100%; } + #playlists li.sound .sound-playback .sound-timer { flex: 0 auto; margin-right: 5px; color: var(--color-text-light-primary); font-size: var(--font-size-11); } + #playlists .sound-controls { flex: 0 0 32px; margin-left: 5px; justify-content: flex-end; align-items: center; } + #playlists .playlist-header .sound-controls { flex: 0 0 64px; } + #playlists .sound-control { flex: 0 0 16px; text-align: center; color: var(--color-text-light-3); font-size: var(--font-size-11); } + #playlists .sound-control.inactive { color: var(--color-text-dark-6); } + #playlists .sound-control.inactive:hover { text-shadow: none; } + #playlists .sound-control.disabled { color: var(--color-text-dark-4); } + #playlists .sound-control.disabled:hover { text-shadow: none; } + #playlists .sound-control[data-action="sound-stop"] { color: var(--color-text-hyperlink); } + #playlists .sound-control[data-action="playlist-stop"] { color: var(--color-text-hyperlink); } + #playlists .global-control { flex: 0; line-height: 20px; text-align: left; } + #playlists .global-control .playlist-header { padding: 6px; background: rgba(0, 0, 0, 0.5); @@ -3686,38 +4276,48 @@ li.folder.droptarget > header h3 i { border-bottom: 1px solid var(--color-border-dark); justify-content: space-between; } + #playlists .global-control .playlist-header h4 { text-decoration: underline; } + #playlists .global-control .playlist-header h4 i.fa { color: var(--color-text-light-6); margin-left: 5px; } + #playlists .global-control .playlist-sounds { padding: 6px; } + #playlists .global-control .playlist-sounds input[type="range"] { flex: 2; margin: 0 3px; } + #playlists .global-control .pin { flex: none; margin-right: 4px; } + #playlists #global-volume .playlist-header h4 { cursor: pointer; } + #playlists #global-volume li.sound { margin: 0; } + #playlists #currently-playing { margin-top: 1px; } + #playlists i.volume-icon { flex: 0; line-height: 20px; color: var(--color-text-light-primary); } + /* ----------------------------------------- */ /* 8.0 - Compendium Packs /* ----------------------------------------- */ @@ -3727,23 +4327,28 @@ li.folder.droptarget > header h3 i { border: 1px solid var(--color-border-dark-4); background: rgba(255, 255, 255, 0.1); } + #compendium ol.compendium-list { list-style: none; margin: 0; padding: 0; } + #compendium li.compendium-pack { position: relative; padding: 4px 6px; line-height: 24px; } + #compendium li.compendium-pack .pack-title i { margin-right: 5px; } + #compendium li.compendium-pack .compendium-footer { font-size: var(--font-size-13); color: var(--color-text-light-primary); } + #compendium li.compendium-pack .status-icons { position: absolute; font-weight: normal; @@ -3751,35 +4356,42 @@ li.folder.droptarget > header h3 i { text-align: right; right: 0; } + /** * Single Compendium Pack */ .compendium.directory .directory-header { border-bottom: none; } + .compendium.directory .directory-list .directory-item { line-height: 48px; border-top: 1px solid transparent; border-bottom: 1px solid var(--color-border-light-1); /* box-shadow: none; */ } + /* ----------------------------------------- */ /* Settings */ /* ----------------------------------------- */ #settings { overflow-y: auto; } + #settings #game-details { list-style: none; padding: 3px 8px; margin: 0; } + #settings #game-details span { float: right; } + #settings div { margin: 0 8px; } + #settings h2 { margin: 6px 0; padding: 3px 8px; @@ -3788,38 +4400,48 @@ li.folder.droptarget > header h3 i { background: rgba(255, 255, 255, 0.1); font-size: var(--font-size-16); } + #settings button { margin: 6px 0; } + #client-settings { /* Tab Section */ } + #client-settings nav.tabs { font-size: var(--font-size-16); border-bottom: 1px solid var(--color-border-dark); padding: 7px 0; } + #client-settings nav.tabs .item i { margin-right: 2px; } + #client-settings section.content { border-top: 1px solid var(--color-border-light-primary); } + #client-settings section.content .settings-list { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 0.5em; } -#client-settings section.content .submenu > button { + +#client-settings section.content .submenu>button { height: 30px; font-size: var(--font-size-12); } -#client-settings section.content .submenu > label { + +#client-settings section.content .submenu>label { line-height: 30px; } + #client-settings section.content h2.module-header { margin: 0.25em 0; } + /** * Role Permission Configuration Form */ @@ -3832,6 +4454,7 @@ li.folder.droptarget > header h3 i { font-weight: bold; text-shadow: 1px 1px var(--color-shadow-dark); } + #permissions-config ul.permissions-list { list-style: none; margin: 0; @@ -3840,27 +4463,33 @@ li.folder.droptarget > header h3 i { overflow: hidden auto; scrollbar-width: thin; } + #permissions-config li.permission { padding: 5px; border-bottom: 1px solid var(--color-border-light-tertiary); } + #permissions-config li.permission .form-fields { justify-content: space-around; } + #permissions-config li.permission input[type="checkbox"] { margin: 0; } + #permissions-config .index { flex: 0 0 200px; text-align: left; font-weight: bold; } + #permissions-config .hint { flex: 0 0 100%; color: var(--color-text-dark-secondary); font-size: var(--font-size-13); margin: 5px 0 0; } + /* ----------------------------------------- */ /* Sidebar Pop-out */ /* ----------------------------------------- */ @@ -3869,11 +4498,13 @@ li.folder.droptarget > header h3 i { max-height: 90vh; /* border: 1px solid var(--color-border-dark-1); */ } + .app.sidebar-popout .window-content { background: none; color: var(--color-border-light-1); padding: 0; } + /* ----------------------------------------- */ /* Module Management */ /* ----------------------------------------- */ @@ -3883,21 +4514,26 @@ li.folder.droptarget > header h3 i { padding: 0 5px 0 0; overflow: hidden auto; } + .package-list .package { padding: 4px 0; border-top: none; border-bottom: 1px solid var(--color-border-light-primary); } + .package-list .package:last-child { border-bottom: none; } + .package-list .package.hidden { display: none; } + .package-list .package .package-overview { flex: 0 0 100%; justify-content: flex-end; } + .package-list .package .package-overview .package-title { flex: 1; text-decoration: underline; @@ -3908,36 +4544,44 @@ li.folder.droptarget > header h3 i { text-overflow: ellipsis; white-space: nowrap; } + .package-list .package .package-description { flex: 0 0 100%; margin: 3px 0; color: var(--color-text-light-primary); font-size: var(--font-size-12); } -.package-list .package .package-description > * { + +.package-list .package .package-description>* { margin: 0; } + .package-list .package .package-description.hidden { display: none; } + .package-list .package .package-metadata, .package-list .package .package-controls { margin: 0; flex: 0 0 50%; } + .package-list .package .package-metadata ul, .package-list .package .package-controls ul { margin: 0; } + .package-list .package .package-metadata { font-size: var(--font-size-12); padding: 0; color: var(--color-text-light-primary); } + .package-list .package .package-controls { padding: 5px 0; text-align: right; } + .package-list .package .package-controls button { width: 110px; height: 25px; @@ -3945,17 +4589,21 @@ li.folder.droptarget > header h3 i { line-height: 24px; border: 1px solid var(--color-text-dark-1); } + .package-list .package .package-controls buttonnot[hidden] { display: inline; } + .package-list .package .package-url { margin: 0.25em 0 0; color: var(--color-text-light-3); } + .package-list .package .package-footer { height: 32px; padding: 5px 0 0; } + .package-list .package .tag { flex: none; min-width: 22px; @@ -3971,69 +4619,87 @@ li.folder.droptarget > header h3 i { background: #333; color: var(--color-text-light-highlight); } + .package-list .package .tag.javascript { background: #803c62; } + .package-list .package .tag.css { background: #1e5c6f; } + .package-list .package .tag.compendium { background: #3b3a80; } + .package-list .package .tag.unavailable { background: #750000; } + .package-list .package .tag.unknown { background: #b07900; min-width: 50px; } + .package-list .package .tag.languages { background: #224224; } + .package-list .package .tag.version { min-width: 50px; } + #module-management .expand { flex: 0 0 32px; height: 30px; margin: -6px 0 0 6px; padding: 0; } + #module-management .package-list { margin-top: 5px; border-top: 1px solid var(--color-border-light-tertiary); height: 600px; } + #module-management .package-list .package-metadata { flex: 0 0 100%; } + #module-management .package-list .package-title { overflow: hidden; font-weight: bold; } + #module-management .package-list .package-title, #module-management .package-list .package-metadata, #module-management .package-list .package-description { color: var(--color-text-dark-primary); } + /* ---------------------------------------- */ /* Invitation Links */ /* ---------------------------------------- */ #invitation-links .connection.open { color: green; } + #invitation-links .connection.unknown { color: rgba(214, 150, 0, 0.6); } + #invitation-links .connection.closed { color: rgba(105, 0, 8, 0.6); } + #invitation-links .sync { padding-left: 5px; } + #invitation-links .invite-link[name=remote] { flex: 2.65; } + #invitation-links .show-hide { padding-left: 5px; font-size: 130%; @@ -4042,6 +4708,7 @@ li.folder.droptarget > header h3 i { justify-content: end; width: 27px; } + /* ----------------------------------------- */ /* General Sheet Styling /* ----------------------------------------- */ @@ -4051,6 +4718,7 @@ li.folder.droptarget > header h3 i { flex-wrap: nowrap; justify-content: flex-start; } + /* .sheet > * { flex: 1; } @@ -4074,6 +4742,7 @@ li.folder.droptarget > header h3 i { justify-content: flex-start; align-items: center; } + /* .sheet header.sheet-header > * { flex: 1; } @@ -4095,26 +4764,31 @@ li.folder.droptarget > header h3 i { height: 64px; margin-right: 6px; } + .sheet header.sheet-header h1 { flex: 1; margin: 0; border-bottom: none; } + .sheet header.sheet-header h1 input { height: 48px; line-height: 48px; margin: 8px 2%; width: 96%; } + .sheet nav.sheet-tabs { margin: 4px 0; border-top: 1px solid var(--color-border-light-primary); border-bottom: 1px solid var(--color-border-light-primary); padding: 7px 0; } + .sheet nav.sheet-tabs .item i { margin-right: 2px; } + .sheet footer.sheet-footer { display: flex; flex-direction: row; @@ -4123,27 +4797,34 @@ li.folder.droptarget > header h3 i { flex: 0 0 32px; line-height: 32px; } -.sheet footer.sheet-footer > * { + +.sheet footer.sheet-footer>* { flex: 1; } -.sheet footer.sheet-footer > .flex0 { + +.sheet footer.sheet-footer>.flex0 { display: block; flex: 0; } -.sheet footer.sheet-footer > .flex1 { + +.sheet footer.sheet-footer>.flex1 { flex: 1; } -.sheet footer.sheet-footer > .flex2 { + +.sheet footer.sheet-footer>.flex2 { flex: 2; } -.sheet footer.sheet-footer > .flex3 { + +.sheet footer.sheet-footer>.flex3 { flex: 3; } + .sheet .editor-content { height: 100%; overflow-y: auto; word-break: break-word; } + /* ----------------------------------------- */ /* Token Sheet /* ----------------------------------------- */ @@ -4151,29 +4832,35 @@ li.folder.droptarget > header h3 i { margin-top: -4px; border-top: none; } + .token-sheet .bar-data .sep { flex: 0 0 16px; text-align: center; font-size: 1.5em; line-height: 24px; } + /* ----------------------------------------- */ /* Scene Notes /* ----------------------------------------- */ .window-app.scene-notes .window-content { padding: 0 8px; } + .window-app.scene-notes form { height: 100%; overflow: hidden; } + .window-app.scene-notes .editor { height: 100%; } + .window-app.scene-notes .editor-content { height: 100%; overflow-y: auto; } + /* ---------------------------------------- */ /* Roll Table Sheet */ /* ---------------------------------------- */ @@ -4182,10 +4869,12 @@ li.folder.droptarget > header h3 i { height: 48px; margin: 8px 0; } + .roll-table-config textarea { resize: none; min-height: 44px; } + .roll-table-config ol.table-results { list-style: none; margin: 0; @@ -4193,19 +4882,23 @@ li.folder.droptarget > header h3 i { max-height: 600px; overflow-y: auto; } + .roll-table-config ol.table-results .table-result { padding: 2px 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } + .roll-table-config ol.table-results .table-result input[type="text"] { width: 100%; height: 28px; } -.roll-table-config ol.table-results .table-result > div { + +.roll-table-config ol.table-results .table-result>div { line-height: 36px; margin-right: 5px; } + .roll-table-config ol.table-results .table-result .result-image { flex: 0 0 36px; width: 36px; @@ -4213,72 +4906,90 @@ li.folder.droptarget > header h3 i { text-align: center; margin: 0; } + .roll-table-config ol.table-results .table-result .result-image img { border: none; object-fit: cover; object-position: 50% 0; } + .roll-table-config ol.table-results .table-result .result-type { flex: 0 0 110px; } + .roll-table-config ol.table-results .table-result .result-details { flex: 1; } + .roll-table-config ol.table-results .table-result .result-details select { width: 40%; } + .roll-table-config ol.table-results .table-result .result-details .result-target { width: 58%; margin-left: 3px; } + .roll-table-config ol.table-results .table-result .result-weight { flex: 0 0 50px; text-align: center; } + .roll-table-config ol.table-results .table-result .result-range { flex: 0 0 92px; text-align: center; } + .roll-table-config ol.table-results .table-result .result-range input { width: 36px; } + .roll-table-config ol.table-results .table-result .result-controls { flex: 0 0 40px; margin: 0; text-align: center; } + .roll-table-config ol.table-results .table-result .result-controls a { width: 20px; } + .roll-table-config ol.table-results .table-result .result-controls .lock-result { color: var(--color-text-light-primary); } + .roll-table-config ol.table-results .table-result.roulette { background: rgba(0, 0, 0, 0.25); border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark); } + .roll-table-config ol.table-results .table-result.drawn { background: rgba(0, 0, 0, 0.15); } + .roll-table-config ol.table-results .table-result.drawn .lock-result { color: var(--color-text-dark-1); } + .roll-table-config ol.table-results .table-header { background: rgba(0, 0, 0, 0.05); border: 1px solid var(--color-border-light-tertiary); line-height: 24px; font-weight: bold; } + .scene-sheet .form-fields label.grid-label { flex: 1; text-align: right; font-size: var(--font-size-13); } -.scene-sheet .capture-position > i, -.scene-sheet .grid-config > i { + +.scene-sheet .capture-position>i, +.scene-sheet .grid-config>i { margin: 0; } + /* --------------------------------------- */ /* Macro Sheet */ /* --------------------------------------- */ @@ -4286,19 +4997,24 @@ li.folder.droptarget > header h3 i { min-width: 360px; min-height: 320px; } -.macro-sheet form > * { + +.macro-sheet form>* { flex: 0; } + .macro-sheet .form-group.command { flex: 1; } + .macro-sheet .form-group.command label { height: 24px; } + .macro-sheet .form-group.command textarea { height: calc(100% - 24px); resize: none; } + /* --------------------------------------- */ /* Active Effects */ /* --------------------------------------- */ @@ -4307,53 +5023,67 @@ li.folder.droptarget > header h3 i { margin: 0; padding: 0; } + .active-effect-sheet .effect-change { align-items: center; padding: 3px 1px; border-bottom: 1px solid var(--color-border-light-primary); } + .active-effect-sheet .effect-change:last-child { border-bottom: none; } + .active-effect-sheet .effect-change .key { flex: 2; } + .active-effect-sheet .effect-change .mode, .active-effect-sheet .effect-change .value { padding: 0 2px; } + .active-effect-sheet .effect-change .mode select { width: 100%; } + .active-effect-sheet .effects-header { height: 28px; background: rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border-light-tertiary); font-weight: bold; } + .active-effect-sheet .effects-header .key { padding-left: 4px; } + .active-effect-sheet .effect-controls { flex: 0 0 24px; text-align: center; } + .user-config label { font-weight: bold; } + .user-config img.avatar { flex: 0 0 64px; } + .user-config #characters { font-size: var(--font-size-12); max-height: 320px; } + .user-config #characters .directory-item.context { background: rgba(0, 0, 0, 0.1); } + .user-config #characters .directory-item.context h3 { font-weight: bold; } + /* ----------------------------------------- */ /* Cards Sheet */ /* ----------------------------------------- */ @@ -4361,9 +5091,11 @@ img.card-face { object-fit: cover; border: none; } + .cards-config { --card-height: 48px; } + .cards-config .cards-header { background: rgba(0, 0, 0, 0.1); border-top: 2px groove #444; @@ -4374,6 +5106,7 @@ img.card-face { text-align: left; font-weight: bold; } + .cards-config ol.cards { max-height: 600px; overflow-y: auto; @@ -4381,60 +5114,74 @@ img.card-face { margin: 0 0 8px; padding: 0; } + .cards-config ol.cards li.card { height: var(--card-height); align-items: center; } + .cards-config .card-face { flex: 0; height: var(--card-height); width: calc(var(--card-height) * 2 / 3); } + .cards-config .card-name { flex: 3; margin: 0 0 0 8px; font-weight: bold; } + .cards-config .card-suit, .cards-config .card-value, .cards-config .card-faces { text-align: center; } + .cards-config .card-faces { flex: 0 0 48px; } + .cards-config .card-drawn { flex: 0 0 64px; text-align: right; } + .cards-config .card-controls { flex: 0 0 24px; text-align: right; padding-right: 4px; } + .cards-config.deck .card-controls { flex: 0 0 48px; } + .cards-config a.card-control { margin: 0 2px; color: var(--color-text-dark-secondary); font-size: var(--font-size-12); text-align: center; } + .cards-config a.card-control[disabled] { pointer-events: none; color: var(--color-text-dark-inactive); } + .cards-config .sort-mode { flex: 0 0 32px; } + .card-config div.face { border-top: 1px solid var(--color-text-light-primary); } + .card-config .form-fields button { flex: 0 0 32px; text-align: center; } + #document-create .cards-presets.form-group { margin: 8px 0; padding-top: 8px; diff --git a/styles/dorako-trim.css b/styles/dorako-trim.css index 948cfa8..15c8a23 100644 --- a/styles/dorako-trim.css +++ b/styles/dorako-trim.css @@ -55,12 +55,13 @@ /* Standard Lists */ ul, ol { - margin: 0.5em 0; - padding: 0 0 0 1.5em; + margin: 0.5em 0; + padding: 0 0 0 1.5em; } + /* Definition Lists */ dl { - margin: 0.5em 0; + margin: 0.5em 0; } /* Nuke fake-list stylings */ @@ -68,18 +69,17 @@ dl { #macro-list, #controls, #navigation, -#navigation > ol { +#navigation>ol { display: flex; } -#controls > ol, -#controls > ol > li, +#controls>ol, +#controls>ol>li, #macro-list, -#macro-list > *, -#navigation > *, -#navigation > ol > li -#players ol, -#players ol > li { +#macro-list>*, +#navigation>*, +#navigation>ol>li #players ol, +#players ol>li { list-style: none; margin: 0; padding: 0; @@ -88,6 +88,7 @@ dl { #players { cursor: pointer; } + #players .player { align-items: center; display: flex; @@ -104,7 +105,7 @@ dl { .crb-style input[type="number"], .crb-style input[type="password"], .crb-style input[type="date"], -.crb-style input[type="time"]{ +.crb-style input[type="time"] { border: none; } @@ -121,21 +122,21 @@ dl { text-shadow: 0px 0px 3px black; z-index: var(--z-index-app); pointer-events: all; - } +} #controls ol { - width: 30px; + width: 30px; } #controls li { - flex: 0 0 30px; - box-shadow: var(--glassy); + flex: 0 0 30px; + box-shadow: var(--glassy); } #controls i { - align-items: center; - display: flex; - font-size: large; + align-items: center; + display: flex; + font-size: large; } #controls li:hover, #controls li.active, #controls li.toggle { @@ -144,62 +145,62 @@ dl { #controls li:hover, #controls li.active { - background-color: var(--paizo-red); + background-color: var(--paizo-red); } #controls li.toggle { - background-color: var(--paizo-blue-dark); + background-color: var(--paizo-blue-dark); } #controls li.toggle.active, #controls li.toggle:hover, #controls li.toggle.active:hover { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } #navigation li.active { - box-shadow: var(--gold-and-glow), var(--glassy); + box-shadow: var(--gold-and-glow), var(--glassy); } #navigation li.view, #navigation li:hover { - background-color: var(--paizo-red); + background-color: var(--paizo-red); } #navigation li.gm { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } #navigation li.gm.view, #navigation li.gm:hover { - background-color: var(--paizo-blue-bright); + background-color: var(--paizo-blue-bright); } #hotbar li:not(.inactive) { - background-color: var(--paizo-blue-dark); + background-color: var(--paizo-blue-dark); } #hotbar li:hover { - background-color: var(--paizo-blue); + background-color: var(--paizo-blue); } #hotbar img { - border-radius: 5px; + border-radius: 5px; } #hotbar li:hover::before { - transition: box-shadow 0.5s ease-in-out; - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: 0px 0px 10px rgba(220,200,100,0.5) inset, var(--glassy); - border-radius: 5px; - overflow: hidden; - pointer-events: none; + transition: box-shadow 0.5s ease-in-out; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: 0px 0px 10px rgba(220, 200, 100, 0.5) inset, var(--glassy); + border-radius: 5px; + overflow: hidden; + pointer-events: none; } #hotbar .macro .macro-key, @@ -219,5 +220,5 @@ dl { textarea, .pf2e.sheet form textarea:disabled:hover { - box-shadow: 0px 0px 3px black inset; -} + box-shadow: 0px 0px 3px black inset; +} \ No newline at end of file