From 2bfb2e8bda081e5a2ee2944b0b7484bc5a7cc04a Mon Sep 17 00:00:00 2001 From: Dorako Date: Fri, 4 Feb 2022 18:23:00 +0100 Subject: [PATCH] Centered hotbar, v-padding decrease in cards, navbar color swap + tweaks, SmallTime patch --- CHANGELOG.md | 5 +- README.md | 2 +- module.json | 6 +- styles/app-ui.css | 7 +- styles/chat.css | 85 ++++++++++++++++----- styles/combat-tracker.css | 20 ++++- styles/controls.css | 21 ++++-- styles/custom-hotbar.css | 1 - styles/dice-tray.css | 33 ++++++++ styles/dorako-ui.css | 54 +++++--------- styles/effect-panel.css | 2 +- styles/hotbar.css | 51 ++++++++++++- styles/navigation.css | 145 +++++++++++++++++++++++++++--------- styles/sidebar.css | 41 +++------- styles/token-action-hud.css | 76 +++++++++++++++++-- styles/token-hud.css | 29 +++++++- styles/window-control.css | 3 +- 17 files changed, 427 insertions(+), 154 deletions(-) create mode 100644 styles/dice-tray.css diff --git a/CHANGELOG.md b/CHANGELOG.md index ac02e70..832125a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,7 @@ - +# 1.0.5 +Centered hotbar, v-padding decrease in cards, navbar color swap + tweaks, SmallTime patch +# 1.0.4 +Added support for Combat Enhancements module # 1.0.3 Fixes to navbar and chat header diff --git a/README.md b/README.md index ffedc79..aadd3fc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# pf2e Dorako UI +# PF2e Dorako UI This is a UI overhaul for the Pathfinder 2nd Edition System for Foundry VTT. An opinionated theme inspired by Paizo colors, compatible with several modules for increased consistensy. diff --git a/module.json b/module.json index 831b602..dc5c046 100644 --- a/module.json +++ b/module.json @@ -1,10 +1,10 @@ { "name": "pf2e-dorako-ui", - "title": "pf2e - Dorako UI", + "title": "PF2e - Dorako UI", "description": "Overhauls the Foundry UI and several modules.", "url": "https://github.com/Dorako/pf2e-dorako-ui", "author": "Dorako", - "version": "1.0.4", + "version": "1.0.5", "minimumCoreVersion": "9", "compatibleCoreVersion": "9", "system": ["pf2e"], @@ -12,5 +12,5 @@ "scripts/dorako-ui.js" ], "dependencies": [ { "name": "colorsettings" } ], - "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.4.zip" + "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.5.zip" } \ No newline at end of file diff --git a/styles/app-ui.css b/styles/app-ui.css index 8dea2e4..faf2727 100644 --- a/styles/app-ui.css +++ b/styles/app-ui.css @@ -38,16 +38,17 @@ #ui-top { - margin: 0 10px 0 10px; + margin: 0 var(--edge-margin) 0 var(--edge-margin); } #ui-bottom { - margin-left: 9px; + /* margin-left: 9px; */ + margin-left: calc(50% - 300px); } #players { - margin: 0px 0px 10px 10px; + margin: 0px 0px var(--edge-margin) var(--edge-margin); } #players h3 { diff --git a/styles/chat.css b/styles/chat.css index f6d27e6..5a1f100 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -29,6 +29,11 @@ top: 0px; } +#chat-log .message .message-header .whisper-to { + margin-bottom:0px; +} + + /* #chat-log .message .message-header .message-sender, #chat-log .message .message-header .message-metadata { @@ -94,23 +99,41 @@ } #chat { - margin: 5px; + /* margin: 5px; margin-top: 0px; - padding: 2px; + padding: 2px; */ + margin:2px; } -.message-portrait { - grid-area: chat portrait; - background-color: var(--paizo-red); - border-radius: 5px 0px 0px 0px; -} #chat-log .message .message-header { grid: - /* "chat portrait"minmax(min-content, max-content) */ - "sender info"minmax(min-content, max-content) - "text text"minmax(min-content, max-content) - //*1fr*/ 2fr 3fr; + "portrait sender . info"minmax(min-content, max-content) + "text text text text"minmax(min-content, max-content) + /42px 1.5fr 0fr 2.8fr; + background-color:var(--paizo-red); + border-bottom: 1px solid black; + border-radius: 5px 5px 0px 0px; + margin-top: -5px; + padding-top: 5px; + margin-right: -5px; + padding-right: 5px; + margin-left: -5px; + padding-left: 5px; +} + +.message-content h3.chat-portrait-text-size-name { + display: flex; + align-items: center; + justify-content: left; +} + +.message .message-header img.message-portrait { + margin: 0px; +} + +#chat-log .message .message-header .flavor-text > img.message-portrait { + display:none; } .tags { @@ -124,11 +147,11 @@ } .whisper-to * { - background-color: var(--whisper-bg) !important; + background-color: var(--whisper-bg); } .chat-mode-indicator { - background-color: rgba(140, 40, 40, 1) !important; + background-color: rgba(140, 40, 40, 1); } @@ -145,7 +168,7 @@ font-size: x-large; line-height: 19px; font-variant: common-ligatures; - margin-top: 4px; + /* margin-top: 4px; */ text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); } @@ -155,11 +178,13 @@ border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:%23231f20;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='.25'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); border-image-width: 14px; border-style: double; + padding: 5px; } .pf2e.chat-card .card-content p { - padding: .5em; + padding: .2em; text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); + margin: 0px; } @@ -189,6 +214,7 @@ margin: 0px; } + .flavor-text > hr { /* display: none; */ margin-top: 0px; @@ -203,6 +229,7 @@ #chat-log { /* overflow-x:visible; */ padding-bottom:3px; + gap:8px; } @@ -237,7 +264,7 @@ color: var(--header-color); background-color: var(--paizo-red); text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); - border-bottom: 1px solid black; + /* border-bottom: 1px solid black; */ margin-left: -5px; margin-top: -5px; padding-left: 5px; @@ -249,7 +276,7 @@ color: var(--header-color); background-color: var(--paizo-red); text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); - border-bottom: 1px solid black; + /* border-bottom: 1px solid black; */ margin-right: -5px; margin-top: -5px; padding-right: 5px; @@ -300,10 +327,14 @@ button { } */ -#chat-log>.chat-message:not(.dfce-cm-middle, .dfce-cm-bottom) { - margin-top: 10px; +#chat-log>.chat-message { + margin-top: 0px; } +/* #chat-log>.chat-message:not(.dfce-cm-middle, .dfce-cm-bottom) { + margin-top: 10px; +} */ + #chat-log>.message { border: 5px solid red; box-shadow: var(--gold-and-glow); @@ -322,16 +353,32 @@ button { left: 41%; } +.chat-mode-indicator { + grid-area: chatmode; +} + +#chat-log .message .message-header img.message-portrait { + grid-area: portrait; + margin-bottom:5px; + align-items: center; + display:flex; +} #chat-log .message .message-header .message-sender { /* font-size: small; font-weight: 400; */ grid-area: sender; + align-items: center; + display:flex + /* border-radius: 5px 0px 0px 0px; */ } #chat-log .message .message-header .message-metadata { grid-area: info; + align-items: center; + justify-content: flex-end; + display:flex; /* border-radius: 0px 5px 0px 0px; margin-left: 0px; */ } diff --git a/styles/combat-tracker.css b/styles/combat-tracker.css index 9ccba36..deb0463 100644 --- a/styles/combat-tracker.css +++ b/styles/combat-tracker.css @@ -37,10 +37,28 @@ border: none; } -#combat li.combatant .token-image { +#combat li.combatant > .token-image { margin: 5px; } +#combat li.combatant .token-name { + text-shadow: var(--dorako-text-shadow); + justify-content: center; +} + +/* Combat Enhancements */ + +.combatant .ce-image-wrapper { + margin: 5px; +} + +/* Combat Focus */ + +.small-chat::before { + height:1px; + cursor: row-resize; +} + .small-chat::after { content: ''; height: 0px; diff --git a/styles/controls.css b/styles/controls.css index e3161c9..5383688 100644 --- a/styles/controls.css +++ b/styles/controls.css @@ -11,7 +11,8 @@ #controls ol .control-tool.toggle:hover, #controls ol .control-tool:hover, #controls ol .scene-control:hover, -#darkness-adjuster .window-content +#darkness-adjuster .window-content, +#darkness-adjuster { border: none; border-radius: 0px; @@ -43,16 +44,20 @@ box-shadow: var(--glassy); } +#darkness-adjuster { + height: 36px !important; +} + #controls { padding-top: 0px; - margin-top: 10px; + margin-top: var(--edge-margin); } #controls ol.main-controls { overflow: visible; width: 44px; padding: 0px; - margin: 0px 0px 0px 10px; + margin: 0px 0px 0px var(--edge-margin); } /* #controls ol .control-tool.toggle, @@ -73,30 +78,30 @@ #controls ol .scene-control.active, #controls ol .scene-control:hover { background-color: var(--paizo-red); - backdrop-filter: var(--dorako-vibrancy-active) + /* backdrop-filter: var(--dorako-vibrancy-active) */ } #controls ol.sub-controls .control-tool:hover, #controls ol.sub-controls .control-tool.active:not(.toggle):hover, #controls ol.sub-controls .control-tool.active:not(.toggle) { background-color: var(--paizo-red); - backdrop-filter: var(--dorako-vibrancy-active); + /* backdrop-filter: var(--dorako-vibrancy-active); */ } #controls ol.sub-controls .control-tool.toggle { background-color: var(--paizo-blue-dark); - backdrop-filter: var(--dorako-vibrancy); + /* backdrop-filter: var(--dorako-vibrancy); */ } #controls ol.sub-controls .control-tool.toggle:hover, #controls ol.sub-controls .control-tool.toggle.active:hover { background-color: var(--paizo-blue); - backdrop-filter: var(--dorako-vibrancy-active) var(--dorako-vibrancy-active); + /* backdrop-filter: var(--dorako-vibrancy-active) var(--dorako-vibrancy-active); */ } #controls ol.sub-controls .control-tool.toggle.active { background-color: var(--paizo-blue-bright); - backdrop-filter: brightness(1.5), var(--dorako-vibrancy-active); + /* backdrop-filter: brightness(1.5), var(--dorako-vibrancy-active); */ } diff --git a/styles/custom-hotbar.css b/styles/custom-hotbar.css index 68a8cf1..da0ffb0 100644 --- a/styles/custom-hotbar.css +++ b/styles/custom-hotbar.css @@ -82,7 +82,6 @@ padding: 0px; margin-right: 9px; border: none; - background: red !important; } #custom-hotbar #custom-macro-list.flexrow { diff --git a/styles/dice-tray.css b/styles/dice-tray.css new file mode 100644 index 0000000..3aec2da --- /dev/null +++ b/styles/dice-tray.css @@ -0,0 +1,33 @@ +/* Dice Tray */ + +/* Glass - Add new styling */ + +#dfcp-rt-buttons button, +.dice-tray button +{ + border: none; + border-radius: var(--dorako-radius); + background-color: var(--dorako-bg-current); + backdrop-filter: var(--dorako-vibrancy); + /*will-change: backdrop-filter;*/ + transform: translate3d(0px, 0px, 0px); + box-shadow: var(--glassy); +} + +.dice-tray button { + padding: 0px; +} + +.dice-tray, +.dice-tray .flexrow { + gap: 5px; +} + +.dice-tray { + display: flex; + flex-direction: column; +} + +#chat-controls .roll-type-select { + height: unset; +} \ No newline at end of file diff --git a/styles/dorako-ui.css b/styles/dorako-ui.css index 4cd205f..7aded7e 100644 --- a/styles/dorako-ui.css +++ b/styles/dorako-ui.css @@ -1,13 +1,11 @@ - :root { --border-width: 1px; --hotbar-height: 62px; --header-color: #fff; --header-bg: var(--primary); --body-padding: 0.0em 0.0em 0em 0em; -} + --edge-margin: 5px; -:root { --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); @@ -18,21 +16,30 @@ /* --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);*/ + /* --dorako-vibrancy-active: brightness(1.5) contrast(1.0) blur(15px); + --dorako-vibrancy-inactive: brightness(0.5) contrast(1.0) blur(15px); */ --gold-and-glow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 3px rgba(255, 255, 255, .5); - --glassy: 0px 0px 2px rgba(255, 255, 255, 0.4) inset, 0px 0px 6px rgba(255, 255, 255, 0.2) inset, 0px 0px 1px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 5px rgba(0, 0, 0, 0.9); + --glassy: + 0px 0px 2px rgba(255, 255, 255, 0.4) inset, + 0px 0px 6px rgba(255, 255, 255, 0.2) inset, + 1px 1px 1px rgba(0, 0, 0, 1), + 1px -1px 1px rgba(0, 0, 0, 1), + -1px -1px 1px rgba(0, 0, 0, 1), + -1px 1px 1px rgba(0, 0, 0, 1), + 0px 0px 3px rgba(0, 0, 0, 1), + 0px 0px 4px rgba(0, 0, 0, 0.5); --paizo-red: rgb(94, 0, 0); --paizo-red-glass: rgba(94, 0, 0,1); --paizo-blue-dark: rgba(16, 21, 73); --paizo-blue-dark: hsl(234, 64%, 15%); - --paizo-blue: rgb(23, 31, 105); + --paizo-blue: rgb(23, 31, 105); --paizo-blue: hsl(234, 64%, 25%); --paizo-blue-bright: rgb(30, 41, 137); --paizo-blue-bright: hsl(234, 64%, 35%); --paizo-blue-glass-inactive:rgba(23, 31, 105,0.2); --paizo-blue-glass:rgba(23, 31, 105,0.5); + --color-shadow-highlight: var(--paizo-red); --color-shadow-primary: var(--paizo-blue); @@ -51,6 +58,7 @@ + /* .crb-hover .tooltipster-box { background-color: none; border-image-outset: 0; @@ -139,37 +147,9 @@ button > i { margin-right: 0px; } -/* Glass - Remove prior styling */ -.placeable-hud, -#token-hud .attribute, -.placeable-hud input[type="text"] -{ - border: none; - border-radius: 0px; - box-shadow: none; - backdrop-filter: none; - background: none; - background-image: none; -} - -/* Glass - Add new styling */ - -.placeable-hud .control-icon, -#token-hud .attribute:not(.bar1), -#dfcp-rt-buttons button, -.dice-tray button, -.placeable-hud input[type="text"] -{ - 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); -} +/* input[type=range] { -webkit-appearance: unset; @@ -260,4 +240,4 @@ input[type=range] { input[type=range]:focus::-ms-fill-upper { background: #367ebd; box-shadow: none !important; - } \ No newline at end of file + } */ \ No newline at end of file diff --git a/styles/effect-panel.css b/styles/effect-panel.css index 0fa0d31..2353aff 100644 --- a/styles/effect-panel.css +++ b/styles/effect-panel.css @@ -44,7 +44,7 @@ .effect-panel .effect-item .icon { border-radius: 42px; - box-shadow: var(--gold-and-glow); + box-shadow: var(--gold-and-glow), var(--glassy); } .effect-panel .effect-item .effect-info { diff --git a/styles/hotbar.css b/styles/hotbar.css index 64c6313..d15e67d 100644 --- a/styles/hotbar.css +++ b/styles/hotbar.css @@ -5,7 +5,8 @@ #hotbar #macro-list, #hotbar .bar-controls, #hotbar #macro-list, -#hotbar .macro.inactive +#hotbar .macro.inactive, +#hotbar .macro { border: none; border-radius: 0px; @@ -21,7 +22,7 @@ #hotbar #hotbar-page-controls, #hotbar #macro-list, #hotbar .macro.inactive, -#hotbar .macro +#hotbar .macro:not(.active) { border: none; border-radius: var(--dorako-radius); @@ -90,6 +91,7 @@ #hotbar .macro.active:hover { transition: background 0.15s ease-out; + transition: box-shadow 0.15s ease-out; background-color: var(--paizo-blue-bright); } @@ -98,6 +100,8 @@ #hotbar { width: auto; gap: 10px; + bottom: 0px; + margin-bottom: var(--edge-margin); } #hotbar-page-controls .bar-controls{ @@ -147,4 +151,45 @@ margin-right: 0px; box-shadow: var(--glassy); background-color: var(--paizo-blue-dark); -} \ No newline at end of file +} + +#hotbar .macro.active::after { + transition: box-shadow 0.5s ease-in-out; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: var(--glassy); + border-radius: 2px; + overflow: hidden; +} + +#hotbar .macro.active:hover::after { + 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: 2px; + overflow: hidden; +} + + +#smalltime-app::after { + transition: box-shadow 0.5s ease-in-out; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: var(--glassy); + border-radius: 2px; + overflow: hidden; + z-index:1000; + } \ No newline at end of file diff --git a/styles/navigation.css b/styles/navigation.css index 7e4ba60..06e45d2 100644 --- a/styles/navigation.css +++ b/styles/navigation.css @@ -31,7 +31,18 @@ } #navigation { - margin-top: 10px; + margin-top: var(--edge-margin); +} +/* +#navigation #scene-list li { + margin-right: 10px; + margin-bottom:10px +} */ + + +#navigation #scene-list .scene { + margin-bottom: 6px; + margin-right: 6px; } #navigation #scene-list .scene li.scene-player { @@ -44,7 +55,12 @@ } .scene-name{ - padding: 5px; + padding-top: 5px; + padding-bottom: 5px; +} + +#navigation #scene-list .scene { + z-index: -1; } /* #navigation #scene-list { @@ -52,34 +68,6 @@ flex-wrap: wrap; } */ -#navigation #scene-list .scene.gm { - transition: background-color 0.15s ease-out; - /*background-color: var(--paizo-blue);*/ - /* Dark gray */ -} - -#navigation #scene-list .scene.gm:hover { - background-color: var(--paizo-red); - transition: background-color 0.15s ease-out; - /* Dark gray */ -} - -#navigation #scene-list .scene { - background-color: var(--paizo-blue-dark); - transition: background-color 0.15s ease-out; -} - -#navigation #scene-list .scene:hover { - background-color: var(--paizo-blue); - transition: background-color 0.15s ease-out; -} - -#navigation #scene-list .scene.active { - background-color: var(--paizo-blue-bright); - backdrop-filter: var(--dorako-vibrancy-active); - transition: background-color 0.15s ease-out; - /*box-shadow: var(--gold-and-glow);*/ -} #navigation #scene-list .scene.view { background-color: var(--paizo-red); @@ -116,6 +104,7 @@ align-items: center; justify-content: center; white-space: nowrap; + margin-bottom: 6px; } #navigation #scene-list .scene { @@ -132,13 +121,99 @@ padding: 5px; } -#navigation #scene-list li { - margin-right: 10px; - margin-bottom:10px -} /* #scene-list { display: flex; gap: 10px; -} */ \ No newline at end of file +} */ + + + + +/* Opposite of Core Foundry */ + +/* #navigation #scene-list .scene.gm { + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue); +} + +#navigation #scene-list .scene.gm:hover { + background-color: var(--paizo-red); + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene { + background-color: var(--paizo-blue-dark); + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene:hover { + background-color: var(--paizo-blue); + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene.active { + background-color: var(--paizo-blue-bright); + backdrop-filter: var(--dorako-vibrancy-active); + transition: background-color 0.15s ease-out; +} */ + +/* Core Foundry themed */ + + +#navigation #scene-list .scene.gm { + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue-dark); +} + +#navigation #scene-list .scene.gm:hover { + background-color: var(--paizo-blue); + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene { + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene:hover { + background-color: var(--paizo-red); + transition: background-color 0.15s ease-out; +} + +#navigation #scene-list .scene.active { + transition: background-color 0.15s ease-out; + box-shadow: var(--gold-and-glow), var(--glassy); +} + +#navigation #scene-list .scene.view.gm { + transition: background-color 0.15s ease-out; + background-color: var(--paizo-blue-bright); +} + + + + + +#navigation #scene-list .scene ul.scene-players { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 5px; + margin-left: 5px; + top: 22px; + position:absolute; + /* position:unset; + top: 0px; */ +} + +#navigation #scene-list .scene li.scene-player { + height: 10px; + width: 10px; + margin: 0px; + color: transparent; + border: 0px; + box-shadow: var(--gold-and-glow); + border-radius: 50%; +} \ No newline at end of file diff --git a/styles/sidebar.css b/styles/sidebar.css index cc1328f..3ccf3ab 100644 --- a/styles/sidebar.css +++ b/styles/sidebar.css @@ -13,6 +13,14 @@ background-image: none; } +#sidebar { + height: -webkit-fill-available; + margin: var(--edge-margin) var(--edge-margin) var(--edge-margin) 0px; + --header-color: #fff; + --header-bg: var(--primary); + /* display: inline-block; */ +} + /* Glass - Add new styling */ #sidebar.app, @@ -47,7 +55,7 @@ } #sidebar-tabs>.item:hover { - color: var(--dorako-orange); + color: white; } #sidebar.collapsed #sidebar-tabs>.item, @@ -129,38 +137,7 @@ 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; -} .directory .action-buttons button { margin: 0px; } - - - -#sidebar { - height: -webkit-fill-available; - margin: 10px 10px 10px 0px; -} -#sidebar { - --header-color: #fff; - --header-bg: var(--primary); - /* display: inline-block; */ -} \ No newline at end of file diff --git a/styles/token-action-hud.css b/styles/token-action-hud.css index 97d4cf0..e05e2aa 100644 --- a/styles/token-action-hud.css +++ b/styles/token-action-hud.css @@ -13,13 +13,12 @@ .tah-subcategory { display: grid; - grid-template-columns: 150px auto; grid-auto-rows: unset; min-height: 22px; cursor: default; - width: 1200px; + width: 1400px; margin-top: 10px; - grid-template-columns: 200px auto; + grid-template-columns: 200px 1200px; } .tah-actions { @@ -28,7 +27,7 @@ flex-flow: row wrap; align-items: center; /* gap: 5px; */ - width: 600px; + width: 1000px; row-gap: 2px; column-gap: 8px; margin-bottom: 0px; @@ -80,7 +79,7 @@ padding-left: 5px; padding-right: 5px; min-width: 20px; - height:28px; + height:20px; } .tah-action { @@ -138,7 +137,7 @@ /* 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); - margin-left: -5px; + /* margin-left: -5px; */ } @@ -179,6 +178,69 @@ display: inline; } -button[value^="spell|"] .tah-name { +.tah-action.stickLeft button { + width: auto; + min-width: 20px; + height: 20px; + padding: 0px; + margin: 0px; + font-size: small; + font-weight: bold; + text-align: center; + line-height: 0px; + /* margin-left:-11px; */ +} + + + +.tah-action:not(.stickLeft) button[value^="spell|"] { + padding-left: 0px; + padding-right: 0px; +} + +.tah-action:not(.stickLeft) button[value^="spell|"]:hover { + padding-left: 0px; + padding-right: 5px; +} + +.tah-action:not(.stickLeft) button[value^="spell|"] .tah-icon, +.tah-action:not(.stickLeft) button[value^="spell|"] .tah-name, +.tah-action:not(.stickLeft) button[value^="spell|"] .tah-info1 +{ display:none; +} + +.tah-action:not(.stickLeft) button[value^="spell|"]:hover .tah-icon, +.tah-action:not(.stickLeft) button[value^="spell|"]:hover .tah-name, +.tah-action:not(.stickLeft) button[value^="spell|"]:hover .tah-info1 { + display: inline; +} + +.tah-actions .shrink { + width: auto; + min-width: 20px; + height: 20px; + padding: 0px; + margin: 0px; + font-size: small; + font-weight: bold; + text-align: center; + line-height: 0px; +} + +tah-actions { + gap: 0px; +} + +.tah-actions { + grid-column: 2; + display: flex; + flex-flow: row wrap; + align-items: center; + /* gap: 8px; */ + width: 600px; + row-gap: 8px; + column-gap: 4px; + margin-bottom: 0px; + font-size: medium; } \ No newline at end of file diff --git a/styles/token-hud.css b/styles/token-hud.css index 98389e0..a8adc53 100644 --- a/styles/token-hud.css +++ b/styles/token-hud.css @@ -1,5 +1,32 @@ /* Token HUD (right click token) */ +/* Glass - Remove prior styling */ +.placeable-hud, +#token-hud .attribute, +.placeable-hud input[type="text"] +{ + border: none; + border-radius: 0px; + box-shadow: none; + backdrop-filter: none; + background: none; + background-image: none; +} + +/* Glass - Add new styling */ + +.placeable-hud .control-icon, +#token-hud .attribute:not(.bar1), +.placeable-hud input[type="text"] +{ + 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); +} #token-hud .attribute i.fas { @@ -80,7 +107,7 @@ #token-hud .col.right { - left: 100px; + /* left: 100px; */ gap: 10px; } diff --git a/styles/window-control.css b/styles/window-control.css index 6897daf..5f7a742 100644 --- a/styles/window-control.css +++ b/styles/window-control.css @@ -5,7 +5,8 @@ } .window-app.minimized .window-header { - border: 1px solid transparent; + /* border: 1px solid transparent; */ + border: none; border-radius: var(--dorako-radius); background-color: var(--dorako-bg-current); backdrop-filter: var(--dorako-vibrancy);