From 5b5411d6c4bda0c3403a009f8a5eaf1d0c3cf3f7 Mon Sep 17 00:00:00 2001 From: Dorako Date: Sun, 6 Feb 2022 00:55:03 +0100 Subject: [PATCH] 1.1.1 --- CHANGELOG.md | 3 + styles/app-ui.css | 6 +- styles/chat.css | 395 +++++++++++++++++++++++++++++------- styles/combat-tracker.css | 10 + styles/dorako-ui.css | 23 ++- styles/token-action-hud.css | 6 +- styles/token-hud.css | 23 ++- 7 files changed, 379 insertions(+), 87 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84ed8fa..33a0004 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +# 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". # 1.1.0 Lots of changes to the card styling, the default styling is now a 'dark mode', options for 'light mode' coming later. diff --git a/styles/app-ui.css b/styles/app-ui.css index cae6407..608d49c 100644 --- a/styles/app-ui.css +++ b/styles/app-ui.css @@ -90,7 +90,7 @@ } .window-app .window-content { - padding: 5px 5px 0px 5px; + padding: 5px; border-radius: 0px 0px 5px 5px; } @@ -116,4 +116,8 @@ border: none; border-radius: var(--dorako-radius); background-color: var(--dorako-bg-current); +} + +.window-content * { + text-shadow: 0px 1px rgb(255 255 255 / 50%); } \ No newline at end of file diff --git a/styles/chat.css b/styles/chat.css index f96f406..2524904 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -1,7 +1,9 @@ /* Chat */ - +#chat-log .message.emote p { + text-align: center; +} #chat-log .message .message-header { display: grid; @@ -59,11 +61,11 @@ #chat-log .message { background-color: white; - background: var(--pf2e-sheets-bg); + background: var(--bg-current); 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); + color: var(--pf2e-body-primary); margin: 6px; padding: 0; } @@ -110,12 +112,15 @@ margin:2px; } +.message-sender { + white-space: pre-wrap; +} #chat-log .message .message-header { grid: - "portrait sender . info"minmax(min-content, max-content) - "text text text text"minmax(min-content, max-content) - /42px 1.5fr 0fr 2.8fr; + "portrait sender info"minmax(min-content, max-content) + "text text text"minmax(min-content, max-content) + /42px 1fr 1.2fr; background-color:var(--paizo-red); /* border-bottom: 1px solid black; */ border-radius: 5px 5px 0px 0px; @@ -127,39 +132,39 @@ padding-left: 5px; } -.flavor-text { +/* .flavor-text { background-size: cover; - background-image: var(--pf2e-sheets-bg); + background-image: var(--bg-current); background-blend-mode: luminosity; - /* background:#E5E1DA; */ + /* background:#E5E1DA; padding-left:5px; margin-left:-5px; padding-right:5px; margin-right:-5px; -} +} */ -.whisper .flavor-text { +/* .whisper .flavor-text { background-color: #EDEDFF; background-color: var(--whisper-bg); } .blind .flavor-text { - /* background: #FDE4FF; */ + background: #FDE4FF; background-color: var(--blind-bg); -} +} */ -.whisper-to { +/* .whisper-to { 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; padding-left: 5px; -} +} */ .whisper-to * { background-color: var(--whisper-bg); @@ -226,16 +231,18 @@ font-family: var(--serif); font-weight: 500; font-size: x-large; - line-height: 19px; + line-height: 17px; font-variant: common-ligatures; /* margin-top: 4px; */ - text-shadow: 0px 1px 0px rgb(255 255 255 / 50%); + text-shadow: var(--pf2e-text-shadow); } .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-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + 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:gray;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); border-image-width: 14px; border-style: double; padding: 5px; @@ -322,30 +329,32 @@ padding: 5px; } - +#chat-log .message .message-header .message-metadata, #chat-log .message .message-header .message-sender { - color: var(--header-color); + color: var(--pf2e-header-text-color); background-color: var(--paizo-red); - text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); + text-shadow: var(--pf2e-text-shadow-is-dark); + margin-top: 7px; + margin-bottom: 10px; /* border-bottom: 1px solid black; */ - margin-left: -5px; + /* margin-left: -5px; margin-top: -5px; padding-left: 5px; padding-top: 5px; - border-radius: 5px 0px 0px 0px; + border-radius: 5px 0px 0px 0px; */ } -#chat-log .message .message-header .message-metadata { - color: var(--header-color); +/* #chat-log .message .message-header .message-metadata { + color: var(--pf2e-body-primary); background-color: var(--paizo-red); - text-shadow: 0px 1px 0px rgb(0 0 0 / 50%); + 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; +} */ @@ -436,7 +445,7 @@ button { font-weight: 400; */ grid-area: sender; align-items: center; - display:flex + display:flex; /* border-radius: 5px 0px 0px 0px; */ } @@ -488,38 +497,136 @@ button { } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* DARK MODE */ :root { + --pf2e-header-text-color: wheat; + + + --bg-current: var(--bg-light); + --pf2e-body-primary: hsl(0, 0%, 10%); + --pf2e-body-secondary: hsl(0, 0%, 40%); + --pf2e-body-inverse: hsl(0, 0%, 100%); + + --pf2e-shadow-dynamic: var(--pf2e-half-transparent-light); + --pf2e-color-ornament: var(--pf2e-color-ornament-for-light); + --pf2e-translucent-middle: var(--pf2e-translucent-middle-for-light); + --pf2e-translucent-very: var(--pf2e-translucent-very-for-light); + --filter-img: var(--filter-light); + + /*--bg-current: var(--bg-dark); + --pf2e-body-primary: hsl(0, 0%, 100%); + --pf2e-body-secondary: hsl(0, 0%, 60%); + --pf2e-body-inverse: hsl(0, 0%, 00%); + + --pf2e-shadow-dynamic: var(--pf2e-half-transparent-dark); + --pf2e-color-ornament: var(--pf2e-color-ornament-for-dark); + --pf2e-translucent-middle: var(--pf2e-translucent-middle-for-dark); + --pf2e-translucent-very: var(--pf2e-translucent-very-for-dark); + --filter-img: var(--filter-dark);*/ + + + + --filter-dark: invert(100%) drop-shadow(0px 1px 1px black); + --filter-light: drop-shadow(0px 1px 0px white); --color-text-dark-secondary: rgb(214, 214, 214); - --body-light-on-dark: hsl(0, 0%, 100%); + --pf2e-half-transparent-light: hsla(0, 0%, 100%,0.5); + --pf2e-half-transparent-dark-: hsla(0, 0%, 0%,0.5); + --pf2e-shadow-is-dark: 0px 1px var(--pf2e-dark-half-transparent); + --pf2e-shadow-is-light: 0px 1px var(--pf2e-light-half-transparent); + --pf2e-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-color-ornament-for-dark: wheat; + --pf2e-color-ornament-for-light: black; + + + + +} + +.chat-message .message-header { + color: var(--pf2e-body-secondary); } .pf2e.chat-card .card-footer { border-top: none; - color: var(--color-text-dark-secondary); + color: var(--pf2e-body-secondary); } -#chat-log .chat-message, .message-content .chat-damage-buttons button, .dice-tooltip .dice-rolls .roll, .pf2e.chat-card .card-content p, .pf2e.chat-card .card-header h3, .pf2e.chat-card .card-header h4 { - color: var(--body-light-on-dark); - text-shadow: 0px 1px 0px rgb(0 0 0); + color: var(--pf2e-body-primary); + text-shadow: var(--pf2e-text-shadow); } -#chat-log select, +.pf2e.chat-card .card-header h3 { + color: var(--pf2e-color-ornament); +} + +/* DARK LIGHT BUTTON TOGGLE */ + +/* #chat-log select, #chat-log button, #chat-log form button, -.dice-roll .dice-formula, .dice-roll .dice-total, +.dice-roll .dice-formula, +.dice-total:not(.statuseffect-message), .message-content .chat-damage-buttons button { box-shadow: var(--glassy); + background-color: hsla(0, 0%, 0%,0.0); /* The box shadow makes it dark border: none; +} */ + +#chat-log select, +#chat-log form button, +.dice-roll .dice-formula, +.dice-total:not(.statuseffect-message), +message-content .chat-damage-buttons button { + box-shadow: none; + border: 1px solid var(--alt); + background:hsla(0, 0%, 20%,0.1); } -.dice-roll .dice-formula:hover::after, .dice-roll .dice-total:hover::after, +/* .dice-roll .dice-formula:hover::after, .dice-roll .dice-total:hover::after, .message-content .chat-damage-buttons button:hover::after { transition: box-shadow 0.5s ease-in-out; content: ''; @@ -532,13 +639,20 @@ button { border-radius: 2px; overflow: hidden; cursor: pointer; -} +} */ + + #chat-log .chat-message { - background: var(--bg-dark); + background-image: var(--bg-current); + /* background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5)), var(--bg-current); */ background-size: cover; + background: linear-gradient(to bottom, rgba(110,0,0,1) 0 49px, #EEE9E6 49px 50px, transparent 40px 100%),var(--bg-current); + background-repeat: no-repeat; + background-position: center bottom; + background-blend-mode: multiply; } @@ -556,7 +670,7 @@ button { .blind .flavor-text, .flavor-text, .whisper-to { - background-color: unset; + /* background-color: unset; */ background-image: none; } @@ -595,79 +709,115 @@ button { } .message-content .chat-damage-buttons button .plus { - color: rgba(0,0,0,0.5); + color: var(--pf2e-body-inverse); text-shadow: none; } + + .message-content .chat-damage-buttons button>img { - filter: invert(100%) drop-shadow(0px 1px 1px black); + filter: var(--filter-img); height: 18px; top: 1px; } .damage-tag-base { - background: rgba(200,200,200,.45); + background: var(--pf2e-translucent-middle); + color: var(--pf2e-body-primary); } .damage-tag-modifier { - background: rgba(200,200,200,.15); + background: var(--pf2e-translucent-very); } .message-content .chat-damage-buttons button { - box-shadow: var(--glassy); - border:none; - transition: box-shadow 0.5s ease-in-out; + /* box-shadow: var(--glassy); */ + /* border:none; */ + /* transition: box-shadow 0.5s ease-in-out; */ } [data-visibility=owner]:is(div,em,p,span,strong) { - background: #818181; - border: 2px dotted white; + /* background: #818181; */ + background: none; + background: var(--pf2e-translucent-middle); + border: 2px dotted var(--pf2e-body-primary); border-radius: 3px; box-sizing: border-box; - margin-bottom: 4px; + margin-bottom: 0px; padding: 0 3px; } .whisper-to * { - background: rgba(200,200,200,.45); - color: #fff; + background: var(--pf2e-translucent-middle); + color: var(--pf2e-body-primary); border: 1px solid #999; } -.pf2e.chat-card .card-content { - border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -} + +#chat-log [data-pf2-check], #chat-log a.entity-link, #chat-log a.content-link, #chat-log a.inline-roll { - text-shadow: 0px 1px white; + text-shadow: var(--pf2e-text-shadow); color: black; + border-radius: 3px; } -.pf2e.chat-card .card-buttons button { +#chat-log .pf2e.chat-card .card-buttons button { margin: 2px 0; background: var(--paizo-red); - color: var(--body-light-on-dark); - text-shadow: 0px 1px black; + color: white; + text-shadow: var(--pf2e-shadow-is-dark); line-height: 20px; } -.pf2e.chat-card .card-buttons .hidden-to-others { +#chat-log .pf2e.chat-card [data-visibility=owner] button { + background: var(--pf2e-color-mono-dark); +} + +#chat-log .pf2e.chat-card [data-visibility=owner] button:hover { + background: var(--paizo-red); + color: white; + text-shadow: var(--pf2e-shadow-is-dark); +} + +#chat-log [data-pf2-check]:not([data-pf2-show-dc=gm]) { + background-color: var(--pf2e-color-mono-dark); + color: white; + text-shadow: var(--pf2e-text-shadow-is-dark); + box-shadow: var(--pf2e-text-shadow-is-dark); +} + +#chat-log .pf2e.chat-card .card-buttons .hidden-to-others { border: none; background: var(--paizo-blue); } -.pf2e.chat-card [data-visibility=owner] button { - background: hsl(0,0%,20%); +#chat-log .pf2e.chat-card .card-buttons .hidden-to-others:hover { + border: none; + background: var(--paizo-blue-bright); } -button:hover, button:focus { - box-shadow: 0px 0px 10px rgba(220,200,100,0.5) inset, var(--glassy); + + + +.dice-total:hover, +.dice-roll .dice-formula:hover, +#chat-log button:hover, +#chat-log button:focus { + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; + color: white; + /* box-shadow: 0px 0px 10px rgba(245,222,179,0.2) inset, var(--glassy); */ + background-color: var(--paizo-red); cursor: pointer; } +#chat-log button:hover img { + filter: var(--filter-dark); +} + .pf2e.chat-card .card-footer span { border-right: 1px groove #fff; } @@ -677,19 +827,27 @@ button:hover, button:focus { gap: 5px; } -.message-content .chat-damage-buttons button.shield-block { +#chat-log .message-content .chat-damage-buttons button.shield-block { background-color: var(--paizo-blue-dark); + color: white; + text-shadow: var(--pf2e-shadow-is-dark); } -.message-content .chat-damage-buttons button.shield-block:hover { +#chat-log .message-content .chat-damage-buttons button.shield-block:hover { background-color: var(--paizo-blue); } -.message-content .chat-damage-buttons button.shield-block.shield-activated { +#chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated { background-color: var(--paizo-blue-bright); } -.message-content .chat-damage-buttons button.shield-block.shield-activated:hover { +#chat-log .message-content .chat-damage-buttons button.shield-blockshield-activated, +#chat-log .message-content .chat-damage-buttons button.shield-block:hover { + color: white; + text-shadow: var(--pf2e-shadow-is-dark); +} + +#chat-log .message-content .chat-damage-buttons button.shield-block.shield-activated:hover { background-color: var(--paizo-blue); } @@ -704,7 +862,7 @@ button:hover, button:focus { margin-top: 2px; border: none; border-top: none; - border-bottom: 1px solid wheat; + border-bottom: 1px solid var(--pf2e-color-ornament); margin-left: -10px; margin-right: -10px; margin-bottom: 1px; @@ -714,7 +872,7 @@ button:hover, button:focus { margin-top: 2px; border: none; border-top: none; - border-bottom: 1px solid wheat; + border-bottom: 1px solid var(--pf2e-color-ornament); margin-left: -10px; margin-right: -10px; margin-bottom: 1px; @@ -722,6 +880,101 @@ button:hover, button:focus { .message-portrait { + border-radius: 50%; + box-shadow: var(--gold-and-glow), var(--glassy); + background-color: var(--pf2e-color-mono-dark); +} + +[data-visibility=gm]:is(div,em,h4,p,span,strong) { + background: var(--pf2e-translucent-middle); + color: var(--pf2e-body-primary); + text-shadow: var(--pf2e-text-shadow); + border: 2px dotted; + border-radius: 5px; + cursor: help; +} + +#chat-log .message .message-header .message-sender[data-visibility=gm]:is(div,em,h4,p,span,strong){ + background: var(--pf2e-translucent-middle); +} + +.flavor-text [data-visibility=gm] { + margin-top:5px; +} + +.flavor-text br { + display: none; +} + +.whisper-to { + display: flex; + justify-content: space-around; + margin-top: 5px; +} + +/* .whisper-to, +.flavor-text { + border-top: 1px solid var(--pf2e-color-ornament); + padding-bottom: 3px; + padding-top: 3px; + border-bottom: 1px solid var(--pf2e-color-ornament); + background-color: rgba(245,222,179,0.2); +} */ + +/* Cautious Gamemaster heal message */ +#chat-log .message.emote .message-content { + color: unset; +} + +.message-content .dice-roll .statuseffect-message li img { border-radius: 50%; box-shadow: var(--gold-and-glow); +} + +.message-content .dice-roll .statuseffect-rules { + background: none; + background-color: var(--pf2e-color-mono-dark); + color: white; + text-shadow: var(--pf2e-text-shadow-dark); + box-shadow: var(--glassy); + border: none; + border-radius: 3px; + bottom: 110%; + font-size: 14px; + font-weight: 400; + left: -30px; + padding: 12px; + transition: opacity 0.25s ease-in-out; + width: 286px; + z-index: 1; +} + +/* Weird hacks to make hover-popup consistent */ +.message-content .dice-roll .statuseffect-li-text { + color: var(--pf2e-body-primary); + text-shadow: var(--pf2e-text-shadow); + display: inline-block; + width: 285px; + font-size: medium; + margin-left: -30px; + padding-left: 35px; + cursor: help; +} + +#chat-log .message.round-marker .message-header .flavor-text { + width: 100px; +} + + +#chat-message .message-header::after { + background-color:red; + content: "TEEEST"; +} + +#chat-log .chat-message .message::before { + content: "before"; +} + +#chat-log .chat-message .message::after { + content: "after"; } \ No newline at end of file diff --git a/styles/combat-tracker.css b/styles/combat-tracker.css index deb0463..8c60dce 100644 --- a/styles/combat-tracker.css +++ b/styles/combat-tracker.css @@ -67,4 +67,14 @@ border: none; cursor: row-resize; box-shadow: var(--gold-and-glow); +} + +/* Monk's little details */ + +.encounter-cr-row { + --control-width: 28px; + display: flex; + gap: 5px; + padding-left: 5px; + padding-right: 5px; } \ No newline at end of file diff --git a/styles/dorako-ui.css b/styles/dorako-ui.css index c86b8a0..732399f 100644 --- a/styles/dorako-ui.css +++ b/styles/dorako-ui.css @@ -11,6 +11,7 @@ --dorako-orange: rgba(255, 100, 0, 0.5); /* --dorako-bg-current: var(--dorako-bg-glass); */ --dorako-bg-current: var(--dorako-bg-dark); + /* --dorako-bg-current: hsl(0,0%, 10%); */ --blind-bg: #A57aA5; --whisper-bg: #E3E3FF; @@ -48,6 +49,7 @@ --img-red: url(/systems/pf2e/assets/sheet/nav-item.webp); --pf2e-nav-inactive: url(/systems/pf2e/assets/sheet/nav-item-inactive.webp); --pf2e-sheets-bg: url(/systems/pf2e/assets/sheet/background.webp); + --bg-light: url(/systems/pf2e/assets/sheet/background.webp); --bg-dark: url(/modules/pf2e-dorako-ui/img/background-dark.webp); --dorako-text-shadow: 0px 0px 3px black; @@ -58,6 +60,10 @@ } +button:hover, button:focus { + box-shadow: 0px 0px 10px rgba(245,222,179,0.2) inset; +} + body { text-rendering: geometricPrecision; } @@ -103,7 +109,6 @@ form button { footer.sheet-footer.flexrow { gap: 5px; - margin-bottom: 5px; } #settings div { @@ -131,8 +136,11 @@ form .notes, form .hint, text-shadow: 0px 1px white; } -form .notes, form .hint { - flex: 0 0 100%; +form .notes, +form .hint, +form .form-group span.units, +form .form-group.slim .form-fields > label { + /* flex: 0 0 100%; */ font-size: var(--font-size-12); line-height: var(--line-height-16); color: #646464; @@ -140,7 +148,14 @@ form .notes, form .hint { } - +input:disabled { + color: gray; + text-shadow: 0px 1px white; +} +input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: darkgray; + text-shadow: 0px 1px white; +} form .form-group label { line-height: var(--form-field-height); diff --git a/styles/token-action-hud.css b/styles/token-action-hud.css index e05e2aa..759dd2d 100644 --- a/styles/token-action-hud.css +++ b/styles/token-action-hud.css @@ -195,7 +195,7 @@ .tah-action:not(.stickLeft) button[value^="spell|"] { padding-left: 0px; - padding-right: 0px; + padding-right: 5px; } .tah-action:not(.stickLeft) button[value^="spell|"]:hover { @@ -203,7 +203,7 @@ padding-right: 5px; } -.tah-action:not(.stickLeft) button[value^="spell|"] .tah-icon, +/* .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 { @@ -214,7 +214,7 @@ .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; diff --git a/styles/token-hud.css b/styles/token-hud.css index a8adc53..4b86a32 100644 --- a/styles/token-hud.css +++ b/styles/token-hud.css @@ -16,7 +16,7 @@ /* Glass - Add new styling */ .placeable-hud .control-icon, -#token-hud .attribute:not(.bar1), +/* #token-hud .attribute:not(.bar1), */ .placeable-hud input[type="text"] { border: none; @@ -28,6 +28,12 @@ box-shadow: var(--glassy); } +.middle .attribute { + display: flex; + gap: 10px; + align-content: space-evenly; + justify-content: space-evenly; +} #token-hud .attribute i.fas { z-index: 1; @@ -56,11 +62,12 @@ background-color: rgb(162, 226, 252); } -#token-hud .attribute.bar1 { +/* #token-hud .attribute.bar1 { background-color: none; box-shadow: none; -} -#token-hud .attribute.bar1 input { +} */ + +#token-hud .attribute input { transition: background-color 0.15s ease-out; border: none; box-shadow: var(--glassy); @@ -68,13 +75,12 @@ /* backdrop-filter: brightness(250%); */ } -#token-hud .attribute.bar1 input:hover { +/* #token-hud .attribute.bar1:hover { transition: background-color 0.15s ease-out; border: none; background-color: #7cd00077; box-shadow: var(--glassy); - /* backdrop-filter: brightness(250%); */ -} +} */ .placeable-hud input[type="text"] { border-radius: 3px; @@ -86,7 +92,8 @@ } .placeable-hud input[type="text"] { - width: 100%; + /* width: 100%; */ + min-width: 40px; border: unset; color: var(--color-text-light-2); text-shadow: var(--dorako-text-shadow);