mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
261a3a68b0
* start development * finish party members tab * start resources tab * finish resources tab * finish inventory tab and add inital template to projects tab * add resource buttons actions methods * add group roll dialog * Main implementation * Fixed costs * Minor fixes and tweaks for the party sheet (#1239) * Minor fixes and tweaks for the party sheet * Fix scroll restoration for party sheet tabs * Finished GroupRoll * Removed/commented-out not yet implemented things * Commented out Difficulty since it's not used yet * Re-render party when members update (#1242) * Fixed so style applies in preview chat message * Added the clown car * Fixed so items can be dropped into the Party sheet * Added delete icon to inventory * Fixed TokenHUD token property useage. Fixed skipping roll message * Added visible modifier to GroupRoll leader result * Leader roll displays the large result display right away after rolling * Corrected tokenHUD for non-player-tokens * Fixed clowncar tokenData * Fixed TagTeam roll message and sound * Removed final TagTeamRoll roll sound * [PR] [Party Sheets] Sidebar character sheet changes (#1249) * Something experimenting * I am silly (wearning Dunce hat) * Stressful task * Armor functional to be hit * CSS Changes to accomadate pip boy * last minute change to resource section for better visual feeling * restoring old css for toggle * Added setting to toggle pip/number display * toggle functionality added * Fixed light-mode in characterSheet * Fixed multi-row resource pips display for character * Fixed separators * Added pip-display to Adversary and Companion. Some fixing on armor display --------- Co-authored-by: WBHarry <williambjrklund@gmail.com> * Fixed party height and resource armor update * Fixed deletebutton padding * Only showing expand-me icon on InventoryItem if there is a description to show * . * Fixed menu icon to be beige instead of white in dark mode --------- Co-authored-by: moliloo <dev.murilobrito@gmail.com> Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com> Co-authored-by: Nikhil Nagarajan <potter.nikhil@gmail.com>
444 lines
12 KiB
Text
444 lines
12 KiB
Text
@import '../utils/colors.less';
|
|
@import '../utils/fonts.less';
|
|
@import '../utils/mixin.less';
|
|
|
|
.theme-light .application.daggerheart.dh-style {
|
|
.inventory-item,
|
|
.card-item {
|
|
.item-resource .item-dice-resource {
|
|
img {
|
|
filter: brightness(0) saturate(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.appTheme({}, {
|
|
.inventory-item .img-portait .roll-img {
|
|
filter: invert(1);
|
|
}
|
|
});
|
|
|
|
.application.daggerheart.dh-style {
|
|
.inventory-item {
|
|
width: 100%;
|
|
list-style-type: none;
|
|
|
|
&:not(.single-img) {
|
|
.img-portait:has(.roll-img):hover {
|
|
.roll-img {
|
|
opacity: 1;
|
|
}
|
|
.item-img {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.inventory-item-header .item-label .item-name .expanded-icon {
|
|
margin-left: 10px;
|
|
display: inline-block;
|
|
}
|
|
&:has(.inventory-item-content.extensible) {
|
|
.inventory-item-header,
|
|
.inventory-item-content {
|
|
background: light-dark(@dark-blue-40, @golden-40);
|
|
}
|
|
}
|
|
&:has(.inventory-item-content.extended) {
|
|
.inventory-item-header .item-label .item-name .expanded-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(.inventory-item-content.extensible) {
|
|
.inventory-item-header {
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
.inventory-item-content {
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
}
|
|
|
|
&:not(:has(.inventory-item-content.extensible)) .inventory-item-header {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.inventory-item-header,
|
|
&.inventory-item-compact {
|
|
.img-portait {
|
|
flex: 0 0 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
&:has(.roll-img) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-img,
|
|
.roll-img {
|
|
position: absolute;
|
|
transition: opacity 300ms ease-in;
|
|
height: 40px;
|
|
width: 40px;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
|
|
&.actor-img {
|
|
border-radius: 50%;
|
|
object-position: top center;
|
|
}
|
|
}
|
|
|
|
.roll-img {
|
|
object-fit: contain;
|
|
opacity: 0;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 8px;
|
|
|
|
a {
|
|
width: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.unequipped {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-item-header {
|
|
align-items: center;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
&.padded {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.item-label {
|
|
flex: 1;
|
|
align-self: center;
|
|
|
|
.item-name {
|
|
font-size: var(--font-size-14);
|
|
|
|
.expanded-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.item-tags {
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
.tag {
|
|
align-items: center;
|
|
background: light-dark(@dark-15, @beige-15);
|
|
border-radius: 3px;
|
|
border: 1px solid light-dark(@dark, @beige);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-size-12);
|
|
justify-content: start;
|
|
padding: 3px 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-resource {
|
|
flex: 0 0 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
.inventory-item-content {
|
|
> *:not(:last-child) {
|
|
margin-bottom: 5px;
|
|
}
|
|
&.extensible {
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.3s ease-in-out;
|
|
&.extended {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
.invetory-description {
|
|
overflow: hidden;
|
|
|
|
h1 {
|
|
font-size: var(--font-size-32);
|
|
}
|
|
h2 {
|
|
font-size: var(--font-size-28);
|
|
font-weight: 600;
|
|
}
|
|
h3 {
|
|
font-size: var(--font-size-20);
|
|
font-weight: 600;
|
|
}
|
|
h4 {
|
|
font-size: var(--font-size-16);
|
|
color: @beige;
|
|
font-weight: 600;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin: 1rem 0;
|
|
padding: 0 0 0 1.25rem;
|
|
|
|
li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
}
|
|
}
|
|
.item-resources {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
.item-dice-resource {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
|
|
label,
|
|
i {
|
|
position: absolute;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label {
|
|
color: light-dark(white, black);
|
|
filter: drop-shadow(0 0 1px light-dark(@dark-blue, @golden));
|
|
font-size: var(--font-size-18);
|
|
}
|
|
|
|
img {
|
|
filter: brightness(0) saturate(100%) invert(97%) sepia(7%) saturate(580%) hue-rotate(332deg)
|
|
brightness(96%) contrast(95%);
|
|
}
|
|
|
|
i {
|
|
text-shadow: 0 0 3px white;
|
|
filter: drop-shadow(0 1px white);
|
|
color: black;
|
|
font-size: 1.625rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.inventory-item-compact {
|
|
display: grid;
|
|
grid-template:
|
|
'img name controls' auto
|
|
'img labels labels' 1fr
|
|
/ 40px 1fr min-content;
|
|
column-gap: 8px;
|
|
|
|
> .img-portait {
|
|
grid-area: img;
|
|
}
|
|
> .item-name {
|
|
align-self: end;
|
|
line-height: 1;
|
|
padding-bottom: 1px;
|
|
}
|
|
> .controls {
|
|
grid-area: controls;
|
|
align-self: start;
|
|
padding-top: 0.3125rem;
|
|
gap: 4px;
|
|
margin-bottom: -1px;
|
|
}
|
|
> .item-labels {
|
|
align-self: start;
|
|
color: light-dark(@dark-80, @beige-80);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-size-12);
|
|
gap: 4px;
|
|
grid-area: labels;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-item {
|
|
position: relative;
|
|
height: 120px;
|
|
width: 100px;
|
|
border: 1px solid light-dark(@dark-blue, @golden);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
.card-label {
|
|
padding-top: 15px;
|
|
.menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: all 0.3s ease;
|
|
max-height: 16px;
|
|
|
|
&.resource-menu {
|
|
max-height: 55px;
|
|
|
|
&.dice-menu {
|
|
max-height: 118px;
|
|
|
|
.item-resources {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item-resource {
|
|
width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
width: 100%;
|
|
position: absolute;
|
|
background-color: @dark-blue;
|
|
bottom: 0;
|
|
mask-image: linear-gradient(180deg, transparent 0%, black 20%);
|
|
border-radius: 0 0 6px 6px;
|
|
|
|
.card-name {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: var(--font-size-12);
|
|
line-height: 15px;
|
|
text-align: center;
|
|
|
|
color: @beige;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-height: 0px;
|
|
opacity: 0;
|
|
visibility: collapse;
|
|
transition: all 0.3s ease;
|
|
color: @beige;
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 2px;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-resources {
|
|
width: 92px;
|
|
}
|
|
|
|
.item-resource {
|
|
width: 92px;
|
|
}
|
|
}
|
|
|
|
.inventory-item,
|
|
.card-item {
|
|
.item-resources {
|
|
display: flex;
|
|
gap: 4px;
|
|
|
|
.resource-edit {
|
|
font-size: var(--font-size-14);
|
|
}
|
|
}
|
|
|
|
.item-resource {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 4px;
|
|
|
|
i {
|
|
flex: none;
|
|
font-size: var(--font-size-14);
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-dice-resource {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
|
|
label {
|
|
position: absolute;
|
|
color: light-dark(white, black);
|
|
filter: drop-shadow(0 0 1px light-dark(@dark-blue, @golden));
|
|
z-index: 2;
|
|
font-size: var(--font-size-18);
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
filter: brightness(0) saturate(100%) invert(97%) sepia(7%) saturate(580%) hue-rotate(332deg)
|
|
brightness(96%) contrast(95%);
|
|
}
|
|
|
|
i {
|
|
position: absolute;
|
|
text-shadow: 0 0 3px white;
|
|
filter: drop-shadow(0 1px white);
|
|
color: black;
|
|
font-size: 1.625rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|