mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 19:51:08 +01:00
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: 98px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|