From 80791d24a48c6adcd53aab44edf47577f2a4310e Mon Sep 17 00:00:00 2001 From: Dorako Date: Thu, 3 Feb 2022 19:04:54 +0100 Subject: [PATCH] Fixes to navbar and chat header --- module.json | 6 +- styles/app-ui.css | 24 ++++++ styles/chat.css | 37 ++++++--- styles/controls.css | 8 ++ styles/dorako-ui.css | 169 ------------------------------------------ styles/hotbar.css | 25 +++++++ styles/navigation.css | 28 +++++-- styles/sidebar.css | 16 ++++ 8 files changed, 126 insertions(+), 187 deletions(-) diff --git a/module.json b/module.json index 394a27c..3a83703 100644 --- a/module.json +++ b/module.json @@ -4,13 +4,13 @@ "description": "Overhauls the Foundry UI and several modules.", "url": "https://github.com/Dorako/pf2e-dorako-ui", "author": "Dorako", - "version": "1.0.0", + "version": "1.0.2", "minimumCoreVersion": "9", "compatibleCoreVersion": "9", "system": ["pf2e"], "scripts": [ "scripts/dorako-ui.js" ], - "dependencies": [ { "name": "lib-df-hotkeys" }, { "name": "colorsettings" } ], - "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.0.zip" + "dependencies": [ { "name": "colorsettings" } ], + "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.2.zip" } \ No newline at end of file diff --git a/styles/app-ui.css b/styles/app-ui.css index 611dd37..8dea2e4 100644 --- a/styles/app-ui.css +++ b/styles/app-ui.css @@ -15,6 +15,8 @@ background-image: none; } + + /* Glass - Add new styling */ #players, @@ -30,6 +32,28 @@ box-shadow: var(--glassy); } +#ui-top.offset { + margin-left: -100px; +} + + +#ui-top { + margin: 0 10px 0 10px; +} + +#ui-bottom { + margin-left: 9px; +} + + +#players { + margin: 0px 0px 10px 10px; +} + +#players h3 { + border: none; +} + .window-app .window-header { border-radius: var(--dorako-radius) var(--dorako-radius) 0px 0px; box-shadow: var(--glassy); diff --git a/styles/chat.css b/styles/chat.css index 37ad8c1..2d9e83d 100644 --- a/styles/chat.css +++ b/styles/chat.css @@ -9,18 +9,35 @@ } -#chat-log .message .message-header .message-sender, -#chat-log .message .message-header .message-metadata { +#chat-log .message .message-header.flexrow { + border-radius: 5px 5px 0px 0px; + margin-left: -5px; + margin-right: -5px; + margin-top:-5px; + padding-top: 5px; + padding-right: 5px; + padding-left: 5px; 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; } +.message-content .chat-damage-buttons button>i.fas { + left: 0px; + top: 0px; +} + +/* #chat-log .message .message-header .message-sender, +#chat-log .message .message-header .message-metadata { + + background-color: var(--header-bg); + background-image: var(--img-red); + background-size: 50px; + + +} */ + #chat-controls { margin-top: 5px; @@ -206,18 +223,18 @@ #chat-log .message .message-header .message-sender { - margin-left: -5px; + /* margin-left: -5px; margin-top: -5px; padding-left: 5px; - padding-top: 5px; + padding-top: 5px; */ border-radius: 5px 0px 0px 0px; } #chat-log .message .message-header .message-metadata { - margin-right: -5px; + /* margin-right: -5px; margin-top: -5px; padding-right: 5px; - padding-top: 5px; + padding-top: 5px; */ border-radius: 0px 5px 0px 0px; } diff --git a/styles/controls.css b/styles/controls.css index 83259db..e3161c9 100644 --- a/styles/controls.css +++ b/styles/controls.css @@ -146,4 +146,12 @@ #terrainlayer-tools .control-tools .li { padding: 5px; +} + +#controls ol.sub-controls .control-tool { + margin-right: 0px; +} + +#controls { + text-shadow: var(--dorako-text-shadow); } \ No newline at end of file diff --git a/styles/dorako-ui.css b/styles/dorako-ui.css index 5d5b0cd..4cd205f 100644 --- a/styles/dorako-ui.css +++ b/styles/dorako-ui.css @@ -114,89 +114,23 @@ footer.sheet-footer.flexrow { -#hotbar .bar-controls a.page-control { - font-size: var(--font-size-14); -} - form .form-group label { line-height: var(--form-field-height); flex: 3; } -/* form .form-group > * { - flex: 1; -} */ - - #client-settings section.content h2.module-header { margin: 5em 0 0 0; } - -.message-content .chat-damage-buttons button>i.fas { - left: 0px; - top: 0px; -} - - -#ui-top.offset { - margin-left: -100px; -} - -#controls ol.sub-controls .control-tool { - margin-right: 0px; -} - -#controls { - text-shadow: var(--dorako-text-shadow); -} - -#ui-top { - margin: 0 10px 0 10px; -} - - -#sidebar { - height: -webkit-fill-available; - margin: 10px 10px 10px 0px; -} - #chat-controls i.fas, #sidebar-tabs i.fas { text-shadow: var(--dorako-text-shadow); } -#ui-bottom { - margin-left: 9px; -} - -#players { - margin: 0px 0px 10px 10px; -} - -#players h3 { - border: none; -} - -#hotbar .bar-controls span.page-number { - text-shadow: var(--dorako-text-shadow); -} - - -#context-menu.expand-up { - bottom: calc(100% + 2px); -} - -#context-menu.expand-up .expand-down { - bottom: calc(100% + 2px); -} - - - - #logo { display: none; } @@ -205,70 +139,6 @@ button > i { margin-right: 0px; } -#sidebar { - --header-color: #fff; - --header-bg: var(--primary); - /* display: inline-block; */ -} - -/* -#controls .control-tool.active, -#controls .scene-control.active { - background-color: var(--paizo-red-gl); - border: none; - box-shadow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 4px rgba(0, 0, 0, .25), 0 0 8px var(--tertiary); - color: var(--tertiary); - text-shadow: 0 0 0 1px rgba(0, 0, 0, .5); - position: relative; - background-image: var(--paizo-red-glass); - background-size: contain; - -} -*/ - - - - - - - - - - - - - - -/*.tags { - background-color:var(--alt); - 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: 2px; - }*/ - -/* - .tags .tag{ - background-color:var(--dorako-bg-current); - border: 1px solid #493c31; - padding: 4px; - 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); - } - */ - - - -#hotbar .macro .macro-key, -#custom-hotbar .macro .custom-macro-key { - background: none; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: black; - text-shadow: var(--dorako-text-shadow); - font-size: large; -} - - - - /* Glass - Remove prior styling */ .placeable-hud, @@ -301,45 +171,6 @@ button > i { } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - input[type=range] { -webkit-appearance: unset; margin: 18px 0; diff --git a/styles/hotbar.css b/styles/hotbar.css index 49e4af4..64c6313 100644 --- a/styles/hotbar.css +++ b/styles/hotbar.css @@ -32,6 +32,31 @@ box-shadow: var(--glassy); } +#hotbar .bar-controls span.page-number { + text-shadow: var(--dorako-text-shadow); +} + +#hotbar .macro .macro-key, +#custom-hotbar .macro .custom-macro-key { + background: none; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; + text-shadow: var(--dorako-text-shadow); + font-size: large; +} + +#hotbar .bar-controls a.page-control { + font-size: var(--font-size-14); +} + +#context-menu.expand-up { + bottom: calc(100% + 2px); +} + +#context-menu.expand-up .expand-down { + bottom: calc(100% + 2px); +} + #hotbar .macro.active:hover { border: unset; } diff --git a/styles/navigation.css b/styles/navigation.css index b6fd364..7e4ba60 100644 --- a/styles/navigation.css +++ b/styles/navigation.css @@ -41,11 +41,10 @@ #navigation #scene-list .scene.context, #navigation #scene-list .scene.view { - padding: 0; } .scene-name{ - padding: 8px; + padding: 5px; } /* #navigation #scene-list { @@ -54,25 +53,43 @@ } */ #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-red); + 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 { - box-shadow: var(--gold-and-glow); + background-color: var(--paizo-red); + box-shadow: var(--glassy); + transition: background-color 0.15s ease-out; } #navigation { text-shadow: var(--dorako-text-shadow); + transition: background-color 0.15s ease-out; } #navigation { @@ -112,11 +129,12 @@ /* display: flex; */ align-items: center; justify-content: center; - padding: 10px; + padding: 5px; } #navigation #scene-list li { margin-right: 10px; + margin-bottom:10px } diff --git a/styles/sidebar.css b/styles/sidebar.css index 2c29d4b..cc1328f 100644 --- a/styles/sidebar.css +++ b/styles/sidebar.css @@ -147,4 +147,20 @@ #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