diff --git a/module.json b/module.json index 7b6cd34..394a27c 100644 --- a/module.json +++ b/module.json @@ -11,5 +11,6 @@ "scripts": [ "scripts/dorako-ui.js" ], - "dependencies": [ { "name": "lib-df-hotkeys" }, { "name": "colorsettings" } ] + "dependencies": [ { "name": "lib-df-hotkeys" }, { "name": "colorsettings" } ], + "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.0.zip" } \ No newline at end of file diff --git a/scripts/dorako-ui.js b/scripts/dorako-ui.js index 7cbbd69..b2a23ab 100644 --- a/scripts/dorako-ui.js +++ b/scripts/dorako-ui.js @@ -112,9 +112,21 @@ Hooks.on('init', () => { // } // }); - game.settings.register('pf2e-dorako-ui', 'skin-modules', { - name: "Skin popular modules?", - hint: "Applies consistent theming to various modules (Disabling can have unintended consequenses)", + 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: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-chat', { + name: "Apply skin to chat?", + hint: "Applies theming to chat cards and sidebar content.", scope: "world", type: Boolean, default: true, @@ -124,19 +136,141 @@ Hooks.on('init', () => { } }); + game.settings.register('pf2e-dorako-ui', 'skin-navigation', { + name: "Apply skin to scene navigation?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); - 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", + game.settings.register('pf2e-dorako-ui', 'skin-hotbar', { + name: "Apply skin to the hotbar (macro bar)?", + hint: "", + scope: "world", type: Boolean, - default: false, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-controls', { + name: "Apply skin to scene controls?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-token-hud', { + name: "Apply skin to the token HUD?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-effect-panel', { + name: "Apply skin to the effect panel?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-sidebar', { + name: "Apply skin to the sidebar?", + hint: "", + scope: "world", + type: Boolean, + default: true, config: true, onChange: () => { location.reload(); } }); + game.settings.register('pf2e-dorako-ui', 'skin-app-ui', { + name: "Apply skin to app UI?", + hint: "This includes the player box, window headers, and similar", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-combat-tracker', { + name: "Apply skin to the combat tracker?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-custom-hotbar', { + name: "Apply skin to Custom Hotbar module?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-token-action-hud', { + name: "Apply skin to Token Action HUD?", + hint: "Makes TAH more compact and fits in better with the rest of the UI.", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + game.settings.register('pf2e-dorako-ui', 'skin-window-controls', { + name: "Apply skin to Window Controls module?", + hint: "", + scope: "world", + type: Boolean, + default: true, + config: true, + onChange: () => { + location.reload(); + } + }); + + + + // game.settings.register('dorako-ui', 'highlightGmOwnerText', { // name: game.i18n.localize('RPGUI.SETTINGS.HIGHLIGHT_GM_OWNER_TEXT'), // hint: game.i18n.localize('RPGUI.SETTINGS.HIGHLIGHT_GM_OWNER_TEXT_HINT'), @@ -163,16 +297,44 @@ Hooks.on('init', () => { if (!game.settings.get('pf2e-dorako-ui', 'disable-all-styles')) { injectBaseCss() - skinChat() - skinNavigation() - skinControls() - skinTokenHud() - if (game.settings.get('pf2e-dorako-ui', 'skin-modules')) { - skinCustomHotbar() - skinTokenActionHud() + if (game.settings.get('pf2e-dorako-ui', 'skin-navigation')) { + skinNavigation() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-controls')) { + skinControls() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-token-hud')) { + skinTokenHud() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-chat')) { + skinChat() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-sidebar')) { + skinSidebar() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-combat-tracker')) { + skinCombatTracker() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-effect-panel')) { + skinEffectPanel() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-app-ui')) { + skinAppUi() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-hotbar')) { + skinHotbar() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-window-controls')) { skinWindowControls() } + if (game.settings.get('pf2e-dorako-ui', 'skin-token-action-hud')) { + skinTokenActionHud() + } + if (game.settings.get('pf2e-dorako-ui', 'skin-custom-hotbar')) { + skinCustomHotbar() + } + } }); @@ -235,6 +397,16 @@ function skinChat() { 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"); @@ -255,6 +427,16 @@ function skinNavigation() { 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"); @@ -265,6 +447,36 @@ function skinTokenHud() { 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 diff --git a/styles/app-ui.css b/styles/app-ui.css new file mode 100644 index 0000000..611dd37 --- /dev/null +++ b/styles/app-ui.css @@ -0,0 +1,92 @@ + /* App UI */ + +/* Glass - Remove prior styling */ + +#players, +.app, +.window-app .window-header, +.window-app.minimized .window-header +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +#players, +.window-app .window-header, +.window-app.minimized .window-header +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + +.window-app .window-header { + border-radius: var(--dorako-radius) var(--dorako-radius) 0px 0px; + box-shadow: var(--glassy); +} + +.window-app .window-content { + /* box-shadow: 0px 0px 10px black; */ + box-shadow: var(--glassy); + background: none; + background-color: var(--bg); + background-image: var(--pf2e-sheets-bg); + background-size: cover; +} + +#players, +.window-app .window-header a, +.window-app .window-header .window-title { + text-shadow: var(--dorako-text-shadow); +} + +.editable .crb-style { + text-rendering: geometricPrecision; +} + +#compendium-browser>section.window-content>.content-box>nav, #license-viewer>section.window-content>.content-box>nav { + box-shadow: none; +} + +#compendium-browser>section.window-content>.content-box>section.content, #license-viewer>section.window-content>.content-box>section.content { + height: 100%; + margin-top: 5px; +} + +.window-app .window-content { + padding: 5px 5px 0px 5px; +} + +.window-app .window-header { + margin-bottom: 0px; +} + +.app { + color: var(--color-text-light-1); +} + +.window-app .window-resizable-handle { + position: absolute; + bottom: -5px; + right: -5px; + background: none; + padding: 2px; + border: none; + text-shadow: var(--dorako-text-shadow); +} + +.app.sidebar-popout { + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); +} \ No newline at end of file diff --git a/styles/chat.css b/styles/chat.css index 4ef8545..37ad8c1 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -1,10 +1,64 @@ /* Chat */ -#sidebar-tabs { - --sidebar-tab-height: 24px; - --sidebar-tab-width: 24px; + + + +#chat-log .message .message-header { + display: grid; + grid: "sender info"minmax(min-content, max-content) "text text"minmax(min-content, max-content) /2fr 1fr; + } +#chat-log .message .message-header .message-sender, +#chat-log .message .message-header .message-metadata { + color: var(--header-color); + background-color: var(--paizo-red); + /*background-color: var(--header-bg); + background-image: var(--img-red);*/ + background-size: 50px; + + text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); + border-bottom: 1px solid black; +} + + +#chat-controls { + margin-top: 5px; +} + +#chat-log .message { + /*padding: 10px;*/ + margin: 5px 5px 10px 10px; +} + +#chat-log .message .message-content { + padding: var(--body-padding) +} + +#chat-log .message { + background-color: white; + background: var(--pf2e-sheets-bg); + background-size: cover; + border: 1px solid rgba(0, 0, 0, .5); + box-shadow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 3px rgba(255, 255, 255, .5); + color: var(--body); + margin: 6px; + padding: 0; +} + +#chat-log .whisper { + background-color: var(--whisper-bg); + background-blend-mode: luminosity; +} + +#chat-log .blind { + background-color: var(--blind-bg); + background-blend-mode: luminosity; +} + + + + #chat-form, #chat-controls, .dice-tray>*, @@ -27,6 +81,60 @@ padding: 2px; } +#chat-log .message .message-header { + grid: "sender info"minmax(min-content, max-content) "text text"minmax(min-content, max-content) /2fr 3fr !important; +} + +.tags { + margin-bottom: 0px; +} + +.dice-checks .window-content { + border-image: none; + border-style: none; + border-width: 0px; +} + +.whisper-to * { + background-color: var(--whisper-bg) !important; +} + +.chat-mode-indicator { + background-color: rgba(140, 40, 40, 1) !important; +} + + +.pf2e.chat-card .card-header { + align-items: center; + border: none; + display: flex; +} + +.pf2e.chat-card .card-header h3 { + line-height: normal; + font-family: var(--serif); + font-weight: 500; + font-size: x-large; + line-height: 19px; + font-variant: common-ligatures; + margin-top: 4px; + text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); +} + +.pf2e.chat-card .card-content { + border-image-repeat: repeat; + border-image-slice: 11; + border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:%23231f20;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='.25'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + border-image-width: 14px; + border-style: double; +} + +.pf2e.chat-card .card-content p { + padding: .5em; + text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); +} + + .pf2e.chat-card { text-rendering: geometricPrecision; } @@ -42,11 +150,11 @@ height: 36px; margin-right: 5px; width: 36px; - border-radius: 5px; - box-shadow: var(--gold-and-glow); + border-radius: 0px; + box-shadow: 0 0 0 1px var(--tertiary),0 0 0 2px #9f725b,inset 0 0 4px rgba(0,0,0,.5); border: none; - margin-left: 1px; - margin-top: 1px; + margin-left: 2px; + margin-top: 2px; } .pf2e.chat-card .tags { @@ -60,15 +168,15 @@ border: 0px none red; } +.pf2e.chat-card .card-buttons .hidden-to-others { + border: 1px dotted; +} + #chat-log { /* overflow-x:visible; */ padding-bottom:3px; } -#chat-form { - height: 50px; - flex: 0 0 25px; -} .message-content .chat-damage-buttons button .label { font-size: 0.5em; @@ -89,15 +197,7 @@ color:rgba(255, 255, 245, 0.8); } -#chat-form textarea { - min-height: 50px; - height: 50%; - background-image: none; - border: none; - background-color: rgba(200, 200, 200, 0.5); - box-shadow: var(--glassy); - overflow: visible; -} + #chat-log>.chat-message{ @@ -123,9 +223,7 @@ -.sidebar-tab { - gap: 5px; -} + #chat-log .message { @@ -146,58 +244,7 @@ button { } -/* Combat Tracker */ -#combat li.combatant .token-initiative { - display: flex; - align-items: center; - justify-content: center; -} - -#combat #combat-round { - border-bottom: none; -} - -.directory .directory-header, -#combat #combat-controls a, -#combat #combat-round { - text-shadow: var(--dorako-text-shadow); -} - -#combat #combat-round .encounters h4, -#combat #combat-round .encounters a { - color: unset; -} - -#combat #combat-controls { - border: none; -} - -#combat li.combatant { - border: none; -} - -#combat li.combatant.active { - background: var(--paizo-red-glass); - box-shadow: var(--gold-and-glow); - /*background-image: var(--img-red);*/ - background-size: 50px; - border: none; -} - -#combat li.combatant .token-image { - margin: 5px; -} - -.small-chat::after { - content: ''; - height: 0px; - position: absolute; - margin: none; - border: none; - cursor: row-resize; - box-shadow: var(--gold-and-glow); -} @@ -280,44 +327,3 @@ button { .directory { overflow: auto; } - -/* Polyglot */ - -#polyglot { - height: 20px; - line-height: unset; -} - -#polyglot label { - /* display: flex; - margin: auto; - display: flex; - align-items: center; - justify-content: left; - text-shadow: var(--dorako-text-shadow); */ - display: none; -} - -/* Dice Tray */ - -.dice-tray button { - padding: 0px; -} - -.dice-tray, -.dice-tray .flexrow { - gap: 5px; -} - -.dice-tray { - display: flex; - flex-direction: column; -} - -#chat-controls .roll-type-select { - height: unset; -} - -.pf2e.chat-card .card-buttons .hidden-to-others { - border: 1px dotted; -} \ No newline at end of file diff --git a/styles/combat-tracker.css b/styles/combat-tracker.css new file mode 100644 index 0000000..9ccba36 --- /dev/null +++ b/styles/combat-tracker.css @@ -0,0 +1,52 @@ +/* Combat Tracker */ + +#combat li.combatant .token-initiative { + display: flex; + align-items: center; + justify-content: center; +} + +#combat #combat-round { + border-bottom: none; +} + +.directory .directory-header, +#combat #combat-controls a, +#combat #combat-round { + text-shadow: var(--dorako-text-shadow); +} + +#combat #combat-round .encounters h4, +#combat #combat-round .encounters a { + color: unset; +} + +#combat #combat-controls { + border: none; +} + +#combat li.combatant { + border: none; +} + +#combat li.combatant.active { + background: var(--paizo-red-glass); + box-shadow: var(--gold-and-glow); + /*background-image: var(--img-red);*/ + background-size: 50px; + border: none; +} + +#combat li.combatant .token-image { + margin: 5px; +} + +.small-chat::after { + content: ''; + height: 0px; + position: absolute; + margin: none; + border: none; + cursor: row-resize; + box-shadow: var(--gold-and-glow); +} \ No newline at end of file diff --git a/styles/controls.css b/styles/controls.css index cced1cc..83259db 100644 --- a/styles/controls.css +++ b/styles/controls.css @@ -1,10 +1,67 @@ /* Controls (top left)*/ + +/* Glass - Remove prior styling */ + +#controls ol .scene-control, +#controls ol .control-tool, +#controls ol .control-tool.toggle, #controls ol .control-tool.toggle.active, +#controls ol .control-tool.active, +#controls ol .scene-control.active, +#controls ol .control-tool.toggle:hover, +#controls ol .control-tool:hover, +#controls ol .scene-control:hover, +#darkness-adjuster .window-content +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +#controls .app li, +#controls ol li, +#controls ol.sub-controls .control-tool, +#controls ol.sub-controls .control-tool:hover, +#controls ol .scene-control, +#controls ol .scene-control:hover, +#controls ol .scene-control.active, +#controls ol .control-tool.toggle, +#controls ol .control-tool.toggle:hover, +#controls ol .control-tool.toggle.active, +#controls ol .control-tool.toggle.active:hover, +#darkness-adjuster .window-content +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + #controls { padding-top: 0px; margin-top: 10px; } +#controls ol.main-controls { + overflow: visible; + width: 44px; + padding: 0px; + margin: 0px 0px 0px 10px; +} + +/* #controls ol .control-tool.toggle, +#controls ol .control-tool.toggle:hover, +#controls ol .control-tool.toggle.active { + background-image: var(--pf2e-nav-inactive); + background-size: contain; +} */ + #controls ol .scene-control, #controls ol .control-tool { transition: backdrop-filter 0.15s ease-out; diff --git a/styles/custom-hotbar.css b/styles/custom-hotbar.css index 3be0568..39ada00 100644 --- a/styles/custom-hotbar.css +++ b/styles/custom-hotbar.css @@ -1,5 +1,40 @@ /* Custom hotbar */ + +/* Glass - Remove prior styling */ + +#custom-bar-toggle, +#custom-hotbar-page-controls, +#custom-hotbar .bar-controls, +#custom-hotbar #custom-macro-list, +#ui-bottom nav #custom-hotbar, +#custom-hotbar-page-controls.bar-controls.flexcol, +#custom-hotbar-directory-controls.bar-controls.flexcol +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +#custom-bar-toggle, +#custom-hotbar-page-controls, +#custom-hotbar-page-controls.bar-controls.flexcol, +#custom-hotbar #custom-macro-list.flexrow +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + #custom-hotbar { display: flex; align-items: center; @@ -81,5 +116,5 @@ } #custom-hotbar .macro:hover { - box-shadow: 0 0 10px var(--color-shadow-highlight) inset; + /* box-shadow: 0 0 10px var(--color-shadow-highlight) inset; */ } \ No newline at end of file diff --git a/styles/dorako-ui.css b/styles/dorako-ui.css index 5fa311f..5d5b0cd 100644 --- a/styles/dorako-ui.css +++ b/styles/dorako-ui.css @@ -11,13 +11,13 @@ --dorako-bg-glass: rgba(120, 120, 120, 0.20); --dorako-bg-dark: rgba(20, 20, 20, 0.60); --dorako-orange: rgba(255, 100, 0, 0.5); - --dorako-bg-current: var(--dorako-bg-glass); + --dorako-bg-current: var(--dorako-bg-dark); --blind-bg: #A57aA5; --whisper-bg: #E3E3FF; /* --dorako-vibrancy: brightness(2.0) contrast(1.2) blur(5px); */ - --dorako-vibrancy: brightness(2.0) contrast(1.2) blur(5px); + --dorako-vibrancy: none; /*--dorako-vibrancy-active: brightness(1.5) contrast(1.0) blur(15px); --dorako-vibrancy-inactive: brightness(0.5) contrast(1.0) blur(15px);*/ @@ -49,15 +49,7 @@ } -.tags { - margin-bottom: 0px; -} -.dice-checks .window-content { - border-image: none; - border-style: none; - border-width: 0px; -} /* .crb-hover .tooltipster-box { background-color: none; @@ -74,9 +66,6 @@ text-shadow: var(--dorako-text-shadow); } */ -.editable .crb-style { - text-rendering: geometricPrecision; -} /*input:not(:disabled), input:not([type="radio"])*/ @@ -86,10 +75,21 @@ form button { background: rgba(255, 255, 245, 0.8); border: 1px solid var(--color-border-light-tertiary); box-shadow: none; + margin: 0px; +} + +.sheet header.sheet-header { + gap:10px +} + +.sheet header.sheet-header h1 input { + margin:0px; + width:100%; } footer.sheet-footer.flexrow { - gap: 10px; + gap: 5px; + margin-bottom: 5px; } #settings div { @@ -110,79 +110,22 @@ footer.sheet-footer.flexrow { text-shadow: var(--dorako-text-shadow); } -.window-app .window-header { - margin-bottom: 0px; -} -.effect-panel { - right: 0px; - top: 0px; - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 10px; - margin-right: 10px; - text-shadow: var(--dorako-text-shadow); -} -.effect-panel hr { - width: 42px; - box-shadow: 0px 0px 5px var(--color-border-light-highlight); -} -.effect-panel .effect-item { - align-items: center; - gap: 10px -} - -.effect-panel .effect-item .icon { - border-radius: 42px; - box-shadow: var(--gold-and-glow); -} -.effect-panel .effect-item .effect-info { - background-color: var(--dorako-bg-glass); - margin-right: 0px; - padding: 3px; - box-shadow: var(--glassy); - border-radius: 3px; - align-items: center; - justify-content: right; - flex-direction: column; +#hotbar .bar-controls a.page-control { + font-size: var(--font-size-14); } -.effect-panel .effect-item .icon .linked, -.effect-panel .effect-item .icon .value { - display: contents; - background: inherit; - text-shadow: - 0px 0px 15px black, - 0px 0px 14px black, - 0px 0px 13px black, - 0px 0px 12px black, - 0px 0px 11px black, - 0px 0px 10px black, - -1px -1px 3px black, - -1px 0px 3px black, - -1px 1px 3px black, - 0px -1px 3px black, - 0px 0px 3px black, - 0px 1px 3px black, - 1px -1px 3px black, - 1px 0px 3px black, - 1px 1px 3px black; - font-size: var(--font-size-24); - /* mix-blend-mode: overlay; */ - color: white; -} - -.effect-panel .effect-item .icon .linked { - font-size: var(--font-size-18); +form .form-group label { + line-height: var(--form-field-height); + flex: 3; } -#hotbar .bar-controls a.page-control { - font-size: var(--font-size-14); -} +/* form .form-group > * { + flex: 1; +} */ @@ -191,30 +134,12 @@ footer.sheet-footer.flexrow { } -.app { - color: var(--color-text-light-1); -} .message-content .chat-damage-buttons button>i.fas { left: 0px; top: 0px; } -.window-app .window-resizable-handle { - position: absolute; - bottom: -5px; - right: -5px; - background: none; - padding: 2px; - border: none; - text-shadow: var(--dorako-text-shadow); -} - -.app.sidebar-popout { - border: none; - border-radius: var(--dorako-radius); - background-color: var(--dorako-bg-current); -} #ui-top.offset { margin-left: -100px; @@ -243,38 +168,6 @@ footer.sheet-footer.flexrow { text-shadow: var(--dorako-text-shadow); } -#hotbar { - width: auto; - gap: 10px; -} - -#hotbar-page-controls .bar-controls{ - display: flex; - align-items: center; - justify-content: center; -} - -#hotbar .bar-controls span.page-number { - font-size: unset; - line-height: unset; -} - -#hotbar .fas { - text-shadow: var(--dorako-text-shadow); -} - -#hotbar .bar-controls { - flex: 0 0 22px; - height: auto; - margin: 0px; -} - -#hotbar #action-bar { - flex: 1; - height: 100%; - pointer-events: all; - gap: 10px -} #ui-bottom { margin-left: 9px; @@ -301,18 +194,7 @@ footer.sheet-footer.flexrow { bottom: calc(100% + 2px); } -#chat-log .message .message-header { - grid: "sender info"minmax(min-content, max-content) "text text"minmax(min-content, max-content) /2fr 3fr !important; - ; -} -.whisper-to * { - background-color: var(--whisper-bg) !important; -} - -.chat-mode-indicator { - background-color: rgba(140, 40, 40, 1) !important; -} #logo { @@ -329,13 +211,6 @@ button > i { /* display: inline-block; */ } -#controls ol.main-controls { - overflow: visible; - width: 44px; - padding: 0px; - margin: 0px 0px 0px 10px; -} - /* #controls .control-tool.active, #controls .scene-control.active { @@ -351,49 +226,16 @@ button > i { } */ -#navigation #scene-list .scene.context, -#navigation #scene-list .scene.view { - padding: 0; -} -.scene-name{ - padding: 8px; -} -/* #navigation #scene-list { - display: flex !important; - flex-wrap: wrap; -} */ -#chat-log .message .message-header { - display: grid; - grid: "sender info"minmax(min-content, max-content) "text text"minmax(min-content, max-content) /2fr 1fr; -} - -#chat-log .message .message-header .message-sender, -#chat-log .message .message-header .message-metadata { - color: var(--header-color); - background-color: var(--paizo-red); - /*background-color: var(--header-bg); - background-image: var(--img-red);*/ - background-size: 50px; - - text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); - border-bottom: 1px solid black; -} -#controls ol .control-tool.toggle, -#controls ol .control-tool.toggle:hover, -#controls ol .control-tool.toggle.active { - background-image: var(--pf2e-nav-inactive); - background-size: contain; -} @@ -413,88 +255,7 @@ button > i { } */ -#chat-log .message { - /*padding: 10px;*/ - margin: 5px 5px 10px 10px; -} - -#chat-log .message .message-content { - padding: var(--body-padding) -} - -#chat-log .message { - background-color: white; - background: var(--pf2e-sheets-bg); - background-size: cover; - border: 1px solid rgba(0, 0, 0, .5); - box-shadow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 3px rgba(255, 255, 255, .5); - color: var(--body); - margin: 6px; - padding: 0; -} - -#chat-log .whisper { - background-color: var(--whisper-bg); - background-blend-mode: luminosity; -} - -#chat-log .blind { - background-color: var(--blind-bg); - background-blend-mode: luminosity; -} - -#sidebar-tabs { - color: var(--color-text-light-highlight); - border: 1px solid var(--color-border-highlight-alt); - box-shadow: none; - border: none; - padding: none; - margin: none; -} - -#sidebar-tabs>.item.active { - box-shadow: none; - border: none; - box-shadow: none; - text-shadow: var(--dorako-text-shadow); - border-bottom: none; -} - -#sidebar-tabs>.item:hover { - color: var(--dorako-orange); -} - -#sidebar.collapsed #sidebar-tabs>.item, -#sidebar.collapsed #sidebar-tabs>.item.active { - border: none; - text-shadow: none; -} - -#sidebar.app { - background-image: none; - /* max-height: 98%; */ -} - -#sidebar-tabs.tabs { - margin: 0px; - padding: 0px; -} - -#hotbar #macro-list { - background-color: var(--dorako-bg-current); - border: 1px solid #493c31; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px hsla(0, 0%, 100%, .2), inset 0 0 0 3px hsla(0, 0%, 100%, .1); - padding: 5px; - gap: 5px; - margin: 0px; - backdrop-filter: var(--dorako-vibrancy); - flex: 1; -} - -#hotbar .macrolist { - gap: 10px; -} #hotbar .macro .macro-key, #custom-hotbar .macro .custom-macro-key { @@ -505,76 +266,14 @@ button > i { font-size: large; } -#chat-controls { - margin-top: 5px; -} -.pf2e.chat-card .card-header { - align-items: center; - border: none; - display: flex; -} - -.pf2e.chat-card .card-header h3 { - line-height: normal; - font-family: var(--serif); - font-weight: 500; - font-size: x-large; - line-height: 19px; - font-variant: common-ligatures; - margin-top: 4px; - text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); -} - -.pf2e.chat-card .card-content { - border-image-repeat: repeat; - border-image-slice: 11; - border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:%23231f20;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='.25'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - border-image-width: 14px; - border-style: double; -} - -.pf2e.chat-card .card-content p { - padding: .5em; - text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); -} - - -#navigation #scene-list .scene li.scene-player { - text-shadow: none; -} /* Glass - Remove prior styling */ -#controls ol .scene-control, -#controls ol .control-tool, -#hotbar #macro-list, -#controls ol .control-tool.toggle, #controls ol .control-tool.toggle.active, -#controls ol .control-tool.active, -#controls ol .scene-control.active, -#hotbar .bar-controls, -#players, -#navigation .nav-item, -#controls ol .control-tool.toggle:hover, -#controls ol .control-tool:hover, -#controls ol .scene-control:hover, -#sidebar, -#sidebar-tabs, .placeable-hud, #token-hud .attribute, -.placeable-hud input[type="text"], -.app, -#custom-bar-toggle, -#custom-hotbar-page-controls, -#custom-hotbar .bar-controls, -#custom-hotbar #custom-macro-list, -#ui-bottom nav #custom-hotbar, -#custom-hotbar-page-controls.bar-controls.flexcol, -#custom-hotbar-directory-controls.bar-controls.flexcol, -.window-app .window-header, -#darkness-adjuster .window-content, -.window-app.minimized .window-header +.placeable-hud input[type="text"] { border: none; border-radius: 0px; @@ -582,105 +281,57 @@ button > i { backdrop-filter: none; background: none; background-image: none; - } /* Glass - Add new styling */ -#hotbar #hotbar-directory-controls, -#hotbar #hotbar-page-controls, -#navigation #nav-toggle, -#controls .app li, -#controls ol li, -#hotbar #macro-list, -#controls ol.sub-controls .control-tool, -#controls ol.sub-controls .control-tool:hover, -#controls ol .scene-control, -#controls ol .scene-control:hover, -#controls ol .scene-control.active, -#controls ol .control-tool.toggle, -#controls ol .control-tool.toggle:hover, -#controls ol .control-tool.toggle.active, -#controls ol .control-tool.toggle.active:hover, -#sidebar.app, -#players, -#navigation #scene-list .scene.view, -#navigation #nav-toggle:hover, -#navigation #scene-list .scene, -#navigation #scene-list .scene.gm, .placeable-hud .control-icon, #token-hud .attribute:not(.bar1), -.sidebar-popout.app, #dfcp-rt-buttons button, .dice-tray button, -#custom-bar-toggle, -#custom-hotbar-page-controls, -#custom-hotbar-page-controls.bar-controls.flexcol, -#custom-hotbar #custom-macro-list.flexrow, -.window-app .window-header, -#darkness-adjuster .window-content, -.window-app.minimized .window-header +.placeable-hud input[type="text"] { - border: none !important; + border: none; border-radius: var(--dorako-radius); background-color: var(--dorako-bg-current); backdrop-filter: var(--dorako-vibrancy); - /*backdrop-filter: none;*/ /*will-change: backdrop-filter;*/ - transform: translate3d(0px, 0px, 0px) !important; - /*White inset shadow, soft dark dropshadow*/ - box-shadow: var(--glassy) !important; -} - -.window-app .window-header { - border-radius: var(--dorako-radius) var(--dorako-radius) 0px 0px; + transform: translate3d(0px, 0px, 0px); box-shadow: var(--glassy); } -.window-app .window-content { - box-shadow: 0px 0px 10px black; - background: none; - background-color: var(--bg); - background-image: var(--pf2e-sheets-bg); - background-size: cover; -} -/* Scrollbar */ -#chat-log::-webkit-scrollbar { - width: unset; - height: unset; - display: none; -} -#chat-log::-webkit-scrollbar-thumb { - outline: none; - border-radius: 3px; - background: var(--color-text-light-1); - border: none; - display: none; -} -#chat-log:-webkit-scrollbar-track { - box-shadow: 0 0 1px #999 inset; - border-radius: 3px; - padding:0px; - margin: 0px; - display: none; -} -#players, -.window-app .window-header a, -.window-app .window-header .window-title { - text-shadow: var(--dorako-text-shadow); -} -#navigation #scene-list .scene li.scene-player { - text-shadow: none; -} + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/effect-panel.css b/styles/effect-panel.css new file mode 100644 index 0000000..0fa0d31 --- /dev/null +++ b/styles/effect-panel.css @@ -0,0 +1,116 @@ + +#token-hud .status-effects, +.status-effects .status-effect-summary { + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + + +#token-hud .status-effects, +.status-effects .status-effect-summary { + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + +.effect-panel { + right: 0px; + top: 0px; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; + margin-right: 10px; + text-shadow: var(--dorako-text-shadow); +} + +.effect-panel hr { + width: 42px; + box-shadow: 0px 0px 5px var(--color-border-light-highlight); +} + +.effect-panel .effect-item { + align-items: center; + gap: 10px +} + +.effect-panel .effect-item .icon { + border-radius: 42px; + box-shadow: var(--gold-and-glow); +} + +.effect-panel .effect-item .effect-info { + background-color: var(--dorako-bg-current); + margin-right: 0px; + padding: 3px; + box-shadow: var(--glassy); + border-radius: 3px; + align-items: center; + justify-content: right; + flex-direction: column; +} + +.effect-panel .effect-item .icon i.fas.fa-comment-alt { + display: none; +} + +.effect-panel .effect-item .icon .expired { + bottom: unset; +} + + +.effect-panel .effect-item .icon .linked, +.effect-panel .effect-item .icon .value { + display: contents; + background: inherit; + text-shadow: + 0px 0px 15px black, + 0px 0px 14px black, + 0px 0px 13px black, + 0px 0px 12px black, + 0px 0px 11px black, + 0px 0px 10px black, + -1px -1px 3px black, + -1px 0px 3px black, + -1px 1px 3px black, + 0px -1px 3px black, + 0px 0px 3px black, + 0px 1px 3px black, + 1px -1px 3px black, + 1px 0px 3px black, + 1px 1px 3px black; + font-size: var(--font-size-18); + /* mix-blend-mode: overlay; */ + color: white; +} + +.effect-panel .effect-item .icon .linked { + font-size: var(--font-size-14); +} + +.status-effects { + /* gap: 10px; */ + padding:10px; +} + +.status-effects .status-effect-summary, +#token-hud .status-effects { + width:auto; + text-align: center; + align-items: center; + justify-content: center; +} + +#token-hud .status-effects .pf2e-effect-control, +#token-hud .status-effects .effect-control { + border-radius:5px; + box-shadow: 0px 0px 5px black inset; +} \ No newline at end of file diff --git a/styles/hotbar.css b/styles/hotbar.css new file mode 100644 index 0000000..49e4af4 --- /dev/null +++ b/styles/hotbar.css @@ -0,0 +1,125 @@ +/* Hotbar (Macro bar) */ + +/* Glass - Remove prior styling */ + +#hotbar #macro-list, +#hotbar .bar-controls, +#hotbar #macro-list, +#hotbar .macro.inactive +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +#hotbar #hotbar-directory-controls, +#hotbar #hotbar-page-controls, +#hotbar #macro-list, +#hotbar .macro.inactive, +#hotbar .macro +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + +#hotbar .macro.active:hover { + border: unset; +} + +#hotbar .macro:hover { + box-shadow: var(--glassy); +} + +#hotbar .macro .macro-icon { + height: unset; + width: unset; +} + + +#hotbar .macro.inactive { + transition: background 0.15s ease-out; + background: var(--dorako-bg-current); +} + +#hotbar .macro.inactive:hover { + transition: background 0.15s ease-out; + border: none; + box-shadow: var(--glassy); + background: var(--paizo-blue); +} + +#hotbar .macro.active { + transition: background 0.15s ease-out; + background-color: var(--paizo-blue-dark); +} + +#hotbar .macro.active:hover { + transition: background 0.15s ease-out; + background-color: var(--paizo-blue-bright); +} + + + +#hotbar { + width: auto; + gap: 10px; +} + +#hotbar-page-controls .bar-controls{ + display: flex; + align-items: center; + justify-content: center; +} + +#hotbar .bar-controls span.page-number { + font-size: unset; + line-height: unset; +} + +#hotbar .fas { + text-shadow: var(--dorako-text-shadow); +} + +#hotbar .bar-controls { + flex: 0 0 22px; + height: auto; + margin: 0px; +} + +#hotbar #action-bar { + flex: 1; + height: 100%; + pointer-events: all; + gap: 10px +} + +#hotbar #macro-list { + background-color: var(--dorako-bg-current); + padding: 5px; + gap: 5px; + margin: 0px; + backdrop-filter: var(--dorako-vibrancy); + flex: 1; +} + +#hotbar .macrolist { + gap: 10px; +} + +.sheet header.sheet-header img { + flex: 0 0 50px; + height: 50px; + margin-right: 0px; + box-shadow: var(--glassy); + background-color: var(--paizo-blue-dark); +} \ No newline at end of file diff --git a/styles/navigation.css b/styles/navigation.css index 3e51015..b6fd364 100644 --- a/styles/navigation.css +++ b/styles/navigation.css @@ -1,9 +1,58 @@ /* Navigation (Scene navigation, top)*/ + +/* Glass - Remove prior styling */ + +#navigation .nav-item +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +#navigation #nav-toggle, +#navigation #scene-list .scene.view, +#navigation #nav-toggle:hover, +#navigation #scene-list .scene, +#navigation #scene-list .scene.gm +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + #navigation { margin-top: 10px; } +#navigation #scene-list .scene li.scene-player { + text-shadow: none; +} + + +#navigation #scene-list .scene.context, +#navigation #scene-list .scene.view { + padding: 0; +} + +.scene-name{ + padding: 8px; +} + +/* #navigation #scene-list { + display: flex !important; + flex-wrap: wrap; +} */ + #navigation #scene-list .scene.gm { /*background-color: var(--paizo-blue);*/ } @@ -34,6 +83,10 @@ gap: 10px; } +#navigation #scene-list .scene li.scene-player { + text-shadow: none; +} + #navigation #nav-toggle, #navigation .nav-item { line-height: unset; diff --git a/styles/sidebar.css b/styles/sidebar.css new file mode 100644 index 0000000..2c29d4b --- /dev/null +++ b/styles/sidebar.css @@ -0,0 +1,150 @@ +/* Sidebar */ + +/* Glass - Remove prior styling */ + +#sidebar, +#sidebar-tabs +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +#sidebar.app, +.sidebar-popout.app +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + +#sidebar-tabs { + --sidebar-tab-height: 24px; + --sidebar-tab-width: 24px; + color: var(--color-text-light-highlight); + border: 1px solid var(--color-border-highlight-alt); + box-shadow: none; + border: none; + padding: none; + margin: none; +} + +#sidebar-tabs>.item.active { + box-shadow: none; + border: none; + box-shadow: none; + text-shadow: var(--dorako-text-shadow); + border-bottom: none; +} + +#sidebar-tabs>.item:hover { + color: var(--dorako-orange); +} + +#sidebar.collapsed #sidebar-tabs>.item, +#sidebar.collapsed #sidebar-tabs>.item.active { + border: none; + text-shadow: none; +} + +#sidebar.app { + background-image: none; + /* max-height: 98%; */ +} + +#sidebar-tabs.tabs { + margin: 0px; + padding: 0px; +} + +.sidebar-tab { + gap: 5px; +} + + +#chat-form { + height: 50px; + flex: 0 0 25px; +} + +#chat-form textarea { + min-height: 50px; + height: 50%; + background-image: none; + border: none; + background-color: rgba(200, 200, 200, 0.5); + box-shadow: var(--glassy); + overflow: visible; +} + +/* Scrollbar */ + +#chat-log::-webkit-scrollbar { + width: unset; + height: unset; + display: none; +} + +#chat-log::-webkit-scrollbar-thumb { + outline: none; + border-radius: 3px; + background: var(--color-text-light-1); + border: none; + display: none; +} + +#chat-log:-webkit-scrollbar-track { + box-shadow: 0 0 1px #999 inset; + border-radius: 3px; + padding:0px; + margin: 0px; + display: none; +} + + + +/* Polyglot */ + +#polyglot { + height: 20px; + line-height: unset; +} + +#polyglot label { + /* display: flex; + margin: auto; + display: flex; + align-items: center; + justify-content: left; + text-shadow: var(--dorako-text-shadow); */ + display: none; +} + +/* Dice Tray */ + +.dice-tray button { + padding: 0px; +} + +.dice-tray, +.dice-tray .flexrow { + gap: 5px; +} + +.dice-tray { + display: flex; + flex-direction: column; +} + +#chat-controls .roll-type-select { + height: unset; +} \ No newline at end of file diff --git a/styles/token-action-hud.css b/styles/token-action-hud.css index 9421382..c464b51 100644 --- a/styles/token-action-hud.css +++ b/styles/token-action-hud.css @@ -18,6 +18,8 @@ min-height: 22px; cursor: default; width: 1200px; + margin-top: 10px; + grid-template-columns: 200px auto; } .tah-actions { @@ -54,7 +56,7 @@ .tah-title-button { border: none; - background-color: unset; + background-color: var(--dorako-bg-current); box-shadow: var(--glassy); color: var(--color-text-light-highlight); backdrop-filter: var(--dorako-vibrancy); @@ -62,37 +64,107 @@ margin:0px; padding-left: 5px; padding-right: 5px; + } .tah-action button { border: none; background-color: var(--dorako-bg-current); backdrop-filter: var(--dorako-vibrancy); - box-shadow: var(--dorako-text-shadow); + box-shadow: var(--glassy); border-radius: var(--dorako-radius); color: var(--color-text-light-highlight); text-shadow: var(--dorako-text-shadow); line-height: unset; margin-left: unset; + padding-left: 5px; + padding-right: 5px; + min-width: 20px; + height:28px; +} + +.tah-action { padding: 0px; + margin: 0px; +} + +.tah-action button[value^="toggle"] { + background-color: var(--paizo-blue-dark); +} + +.tah-action .active, +.tah-action.active button[value^="toggle"] { + background-color: var(--paizo-blue-bright); } .tah-action button * { overflow: hidden; } + +/* .tah-title-button:hover { + border: unset; + box-shadow: unset; + background-color: unset; +} */ + .tah-title-button:hover, .tah-action button:hover { - background-color: var(--dorako-orange); + transition: backdrop-filter 0.15s ease-out; + transition: background-color 0.15s ease-out; + background-color: var(--paizo-red); + border: none; + box-shadow: var(--glassy); +} + +.tah-action button[value^="toggle"]:hover { + transition: backdrop-filter 0.15s ease-out; + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue); border: none; - box-shadow: var(--dorako-box-shadow); + box-shadow: var(--glassy); } +/* .tah-category.hover { + transition: backdrop-filter 0.15s ease-out; + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue-bright); + border: none; + box-shadow: var(--glassy); +} */ + .tah-action .tah-img { border: none; + /* box-shadow: 0 0 0 1px var(--tertiary),0 0 0 2px #9f725b,inset 0 0 4px rgba(0,0,0,.5); */ + box-shadow:none; + box-shadow: 0 0 0 1px var(--tertiary); } #tah-hudTitle { display: none } + +.tah-content { + gap: 5px; +} + +.tah-actions { + gap: 5px; +} + +.tah-actions .shrink { + margin: 0px; + min-width: 20px; +} + +/* .tah-action button[value^="spell|"] span { + display: block; + float: left; + width: 50px; + overflow: hidden; +} */ + +/* .tah-action button[value^="spell|"] .tah-name { + display: none; +} */ diff --git a/styles/token-hud.css b/styles/token-hud.css index 39be42f..98389e0 100644 --- a/styles/token-hud.css +++ b/styles/token-hud.css @@ -11,17 +11,38 @@ } #token-hud .attribute.elevation { + transition: background-color 0.15s ease-out; position: relative; width: 40px; margin: unset; box-shadow: none; } +.placeable-hud input[type="text"]:focus { + border: none; + transition: background-color 0.15s ease-out; + box-shadow: var(--glassy); +} + +#token-hud .attribute.elevation:hover { + transition: background-color 0.15s ease-out; + background-color: rgb(162, 226, 252); +} + #token-hud .attribute.bar1 { background-color: none; box-shadow: none; } #token-hud .attribute.bar1 input { + transition: background-color 0.15s ease-out; + border: none; + box-shadow: var(--glassy); + background-color: var(--dorako-bg-current); + /* backdrop-filter: brightness(250%); */ +} + +#token-hud .attribute.bar1 input:hover { + transition: background-color 0.15s ease-out; border: none; background-color: #7cd00077; box-shadow: var(--glassy); @@ -56,10 +77,7 @@ margin: 0px; } -.placeable-hud .control-icon:not(:nth-child(2)) { - margin: 0px; - background-color: var(--paizo-blue-dark); -} + #token-hud .col.right { left: 100px; @@ -71,11 +89,35 @@ text-shadow: var(--dorako-text-shadow); } +.placeable-hud .control-icon:not(:nth-child(2)) { + margin: 0px; + background-color: var(--paizo-blue-dark); + transition: background-color 0.15s ease-out; + +} + .placeable-hud .control-icon.active { border: unset; background-color: var(--paizo-blue-bright); + transition: background-color 0.15s ease-out; + +} + +.placeable-hud .control-icon:not(:nth-child(2)):hover { + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue); + /* backdrop-filter: var(--dorako-vibrancy-active); */ } -.placeable-hud .control-icon:hover { +.placeable-hud .control-icon:nth-child(2):hover { + transition: background-color 0.15s ease-out; + background-color: var(--paizo-red); /* backdrop-filter: var(--dorako-vibrancy-active); */ +} + +.placeable-hud .control-icon, +.placeable-hud .control-icon img { + opacity: 1; + color: rgb(240,240,240); + } \ No newline at end of file