mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-04-21 23:13:39 +02:00
[Feature] Redesign and merge party members and resources tabs (#1784)
This commit is contained in:
Carlos Fernandez
GitHub
parent
7fa03c58e0
commit
7ca420ae0e
8 changed files with 522 additions and 357 deletions
|
|
@ -1,28 +1,293 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.party {
|
||||
.tab.partyMembers {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
body.game:is(.performance-low, .noblur) {
|
||||
.application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
|
||||
.actors-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.actors-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px dashed light-dark(@dark-blue-50, @beige-50);
|
||||
border-radius: 3px;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
.actor-name {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers {
|
||||
overflow: auto;
|
||||
|
||||
.actors-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
.actor-resources {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"img header" min-content
|
||||
"img body" 1fr
|
||||
/ 7.5rem 1fr;
|
||||
gap: 6px;
|
||||
column-gap: 12px;
|
||||
padding: 6px;
|
||||
background-color: light-dark(@dark-blue-10, @golden-10);
|
||||
|
||||
.actor-img-frame {
|
||||
grid-area: img;
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
position: relative;
|
||||
|
||||
.actor-img {
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipped-weapons {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.evasion {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
background: url('../assets/svg/trait-shield.svg') no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.threshold-section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 4px 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 3px;
|
||||
align-items: baseline;
|
||||
width: fit-content;
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&.threshold-label {
|
||||
font-size: var(--font-size-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
&.threshold-value {
|
||||
font-size: var(--font-size-11);
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
grid-template:
|
||||
"name hope" min-content
|
||||
"subtitle subtitle" min-content
|
||||
/ 1fr min-content;
|
||||
|
||||
.actor-name {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@beige, @golden);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
grid-area: subtitle;
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
|
||||
.hope-section {
|
||||
display: flex;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 3px 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 3px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.hope-value {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-12);
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
grid-area: body;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.resources {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.slot-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.slot-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
padding: 0 4px;
|
||||
width: fit-content;
|
||||
font-weight: bold;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
font-size: var(--font-size-12);
|
||||
white-space: nowrap;
|
||||
|
||||
.label {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
.current {
|
||||
display: inline-block;
|
||||
text-align: end;
|
||||
width: 2ch;
|
||||
}
|
||||
.max {
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
width: 2ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slot-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 2px 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 0 6px 6px 0;
|
||||
width: fit-content;
|
||||
min-height: 22px;
|
||||
|
||||
.armor-slot {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: var(--font-size-12);
|
||||
|
||||
.fa-shield-halved {
|
||||
color: light-dark(@dark-blue-40, @golden-40);
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&.filled {
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.traits {
|
||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
font-size: var(--font-size-12);
|
||||
padding: 3px 4px;
|
||||
gap: 3px 7px;
|
||||
.trait {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 3px;
|
||||
.label {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
.value {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actors-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px dashed light-dark(@dark-blue-50, @beige-50);
|
||||
border-radius: 3px;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,196 +0,0 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
body.game:is(.performance-low, .noblur) {
|
||||
.application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
|
||||
.actor-name {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.party {
|
||||
.tab.resources {
|
||||
overflow: auto;
|
||||
|
||||
.actors-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.actor-resources {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: light-dark(@dark-blue-40, @dark-golden-40);
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
width: 230px;
|
||||
height: -webkit-fill-available;
|
||||
|
||||
.actor-name {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
background: light-dark(@dark-blue-90, @dark-golden-80);
|
||||
backdrop-filter: blur(6.5px);
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@beige, @golden);
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.actor-img {
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
mask-image: linear-gradient(180deg, black 88%, transparent 100%);
|
||||
}
|
||||
|
||||
.resources {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
|
||||
.slot-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.slot-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
width: 239px;
|
||||
|
||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
width: fit-content;
|
||||
|
||||
.armor-slot {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: var(--font-size-12);
|
||||
|
||||
.fa-shield-halved {
|
||||
color: light-dark(@dark-blue-40, @golden-40);
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&.filled {
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
.slot-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
padding: 0 5px;
|
||||
width: fit-content;
|
||||
font-weight: bold;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
|
||||
.label {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding-left: 6px;
|
||||
border-left: 1px solid light-dark(@beige, @dark-golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hope-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 3px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
.hope-value {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-section {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 3px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
&.threshold-value {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.actors-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px dashed light-dark(@dark-blue-50, @beige-50);
|
||||
border-radius: 3px;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
@import './actors/party/party-members.less';
|
||||
@import './actors/party/sheet.less';
|
||||
@import './actors/party/inventory.less';
|
||||
@import './actors/party/resources.less';
|
||||
|
||||
@import './items/beastform.less';
|
||||
@import './items/class.less';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue