mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-22 02:19:54 +02:00
rework fear tracker application, add static positions to hold the tracker, enhance token and bar display, create custom dragger and resize methods
This commit is contained in:
Murilo Brito
parent
79d6522614
commit
6f040532aa
9 changed files with 469 additions and 112 deletions
|
|
@ -32,7 +32,7 @@
|
|||
background: var(--background);
|
||||
border-radius: 4px;
|
||||
opacity: var(--ui-fade-opacity);
|
||||
transition: opacity var(--ui-fade-duration);
|
||||
transition: opacity var(--ui-fade-delay) var(--ui-fade-duration);
|
||||
}
|
||||
|
||||
&:not(.performance-low, .noblur) {
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
transition: opacity var(--ui-fade-duration);
|
||||
}
|
||||
|
||||
#ui-right:has(#effects-display .effect-container) & {
|
||||
|
|
|
|||
|
|
@ -1,119 +1,221 @@
|
|||
:root {
|
||||
--shadow-text-stroke: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
--fear-animation: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
|
||||
--hotbar-size: 60px;
|
||||
}
|
||||
|
||||
#interface.theme-dark,
|
||||
body.theme-dark {
|
||||
.daggerheart.dh-style.fear-tracker {
|
||||
--background: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
}
|
||||
|
||||
#interface.theme-light,
|
||||
body.theme-light {
|
||||
.daggerheart.dh-style.fear-tracker {
|
||||
--background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
#ui-middle:has(#hotbar.sm),
|
||||
#ui-middle:has(#hotbar.md.offset) {
|
||||
#resources {
|
||||
&.top-center,
|
||||
&.bottom-center {
|
||||
width: calc((var(--hotbar-size) * 5) + 32px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#resources {
|
||||
position: static;
|
||||
min-height: calc(var(--header-height) + 4rem);
|
||||
min-width: 4rem;
|
||||
color: #d3d3d3;
|
||||
transition: var(--fear-animation);
|
||||
header,
|
||||
.controls,
|
||||
.window-resize-handle {
|
||||
transition: var(--fear-animation);
|
||||
pointer-events: all;
|
||||
padding: var(--spacer-8);
|
||||
max-width: 540px;
|
||||
min-width: 100px;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--background);
|
||||
border-radius: 8px;
|
||||
opacity: var(--ui-fade-opacity);
|
||||
transition: opacity var(--ui-fade-delay) var(--ui-fade-duration);
|
||||
|
||||
}
|
||||
.window-content {
|
||||
padding: 0.5rem;
|
||||
#resource-fear {
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
transition: opacity var(--ui-fade-duration);
|
||||
}
|
||||
|
||||
&.free {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.top-center,
|
||||
&.bottom-center {
|
||||
margin: 1rem 0;
|
||||
width: 100% !important;
|
||||
transform: translateX(var(--offset));
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
&.right-top {
|
||||
width: 300px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
&.left-bottom {
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:not(.performance-low, .noblur) {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
#ui-right:has(#effects-display .effect-container) & {
|
||||
right: 62px;
|
||||
}
|
||||
|
||||
#resource-fear {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.fear-header {
|
||||
opacity: 1;
|
||||
height: 18.75px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fear-header {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
pointer-events: all;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.fear-title {
|
||||
font-size: var(--font-size-13);
|
||||
}
|
||||
}
|
||||
|
||||
.fear-tokens {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
i {
|
||||
font-size: var(--font-size-18);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
justify-content: center;
|
||||
gap: 0.5rem 0.25rem;
|
||||
|
||||
.fear-token {
|
||||
font-size: var(--font-size-16);
|
||||
border: 1.5px double light-dark(@dark-15, @dark-golden-80);
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3rem;
|
||||
width: 2.5rem;
|
||||
background-color: @primary-color-fear;
|
||||
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
|
||||
color: #d3d3d3;
|
||||
color: @beige;
|
||||
flex-grow: 0;
|
||||
text-shadow: none;
|
||||
|
||||
&.inactive {
|
||||
filter: grayscale(1) !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.controls,
|
||||
.resource-bar {
|
||||
border: 2px solid rgb(153 122 79);
|
||||
background-color: rgb(24 22 46);
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: var(--font-size-20);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.resource-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: var(--font-size-20);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0.25rem 0.5rem;
|
||||
flex: 1;
|
||||
text-shadow: var(--shadow-text-stroke);
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--fear-percent);
|
||||
max-width: 100%;
|
||||
background: linear-gradient(90deg, rgba(2, 0, 38, 1) 0%, rgba(199, 1, 252, 1) 100%);
|
||||
z-index: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
span {
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
&.fear {
|
||||
}
|
||||
}
|
||||
&.isGM {
|
||||
i {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
font-size: var(--font-size-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button[data-action='close'] {
|
||||
display: none;
|
||||
}
|
||||
&:not(:hover):not(.minimized) {
|
||||
background: transparent;
|
||||
box-shadow: unset;
|
||||
border-color: transparent;
|
||||
header,
|
||||
#resource-fear .controls,
|
||||
.window-resize-handle {
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
right: -9px;
|
||||
cursor: nwse-resize;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.resource-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid light-dark(@dark-15, @dark-golden-80);
|
||||
border-radius: 999px;
|
||||
z-index: 0;
|
||||
background: @dark-blue;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border: none;
|
||||
background: @dark-blue;
|
||||
border-radius: 999px;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background: linear-gradient(90deg, rgba(2, 0, 38, 1) 0%, rgba(199, 1, 252, 1) 100%);
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: auto 0;
|
||||
z-index: 2;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-18);
|
||||
color: @beige;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
color: light-dark(@dark, @beige);
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.isGM {
|
||||
.fear-token {
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px @primary-color-fear ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(.fear-bar) {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue