Merge branch 'main' into bug/103-enrich-htmlfield-content-before-its-used-in-applications

This commit is contained in:
Joaquin Pereyra 2025-07-18 15:24:25 -03:00
commit f56c2482cb
551 changed files with 2831 additions and 14203 deletions

View file

@ -14,4 +14,4 @@
@import './less/ux/index.less';
@import '../node_modules/@yaireo/tagify/dist/tagify.css';
@import '../build/tagify.css';

View file

@ -1,20 +1,34 @@
@import '../../utils/colors.less';
.daggerheart.dialog.dh-style.views.damage-selection {
.damage-section-container {
display: flex;
flex-direction: column;
gap: 12px;
input[type='text'],
input[type='number'] {
color: light-dark(@dark, @beige);
outline: 2px solid transparent;
transition: all 0.3s ease;
&:hover {
outline: 2px solid light-dark(@dark, @beige);
}
}
}
}
@import '../../utils/colors.less';
.daggerheart.dialog.dh-style.views.damage-selection {
.damage-section-container {
display: flex;
flex-direction: column;
gap: 12px;
input[type='text'],
input[type='number'] {
color: light-dark(@dark, @beige);
outline: 2px solid transparent;
transition: all 0.3s ease;
&:hover {
outline: 2px solid light-dark(@dark, @beige);
}
}
.damage-section-controls {
display: flex;
align-items: center;
gap: 16px;
.roll-mode-select {
width: min-content;
}
button {
flex: 1;
}
}
}
}

View file

@ -1,6 +1,13 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.theme-light .application.daggerheart.dialog.dh-style.views.roll-selection {
.roll-dialog-container .dices-section .dice-option .dice-icon.normal {
filter: brightness(0) saturate(100%) invert(13%) sepia(1%) saturate(0%) hue-rotate(10deg) brightness(98%)
contrast(100%);
}
}
.application.daggerheart.dialog.dh-style.views.roll-selection {
.roll-dialog-container {
display: flex;
@ -24,6 +31,7 @@
height: 70px;
object-fit: contain;
}
.dice-select {
display: flex;
align-items: center;
@ -92,6 +100,10 @@
font-size: 14px;
line-height: 17px;
}
.advantage-chip-tooltip {
pointer-events: all;
}
}
.advantage-chip {
@ -114,5 +126,19 @@
}
}
}
.roll-dialog-controls {
display: flex;
align-items: center;
gap: 16px;
.roll-mode-select {
width: min-content;
}
button {
flex: 1;
}
}
}
}

View file

@ -1,81 +1,75 @@
@import '../../utils/spacing.less';
@import '../../utils/colors.less';
.daggerheart.views {
.theme-light .daggerheart.dh-style.views.downtime {
.downtime-container .activity-container .activity-selected-marker {
background-image: url(../assets/parchments/dh-parchment-light.png);
}
}
.daggerheart.dh-style.views.downtime {
font-family: @font-body;
.downtime-container {
.downtime-header {
margin: 0;
color: light-dark(@dark-blue, @golden);
text-align: center;
.activities-grouping {
width: 280px;
}
.activity-container {
display: flex;
align-items: center;
padding: 8px;
.activities-container {
width: 100%;
.activity-title {
flex: 1;
.activity-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
.activity-title-text {
font-size: 24px;
font-weight: bold;
}
.activity-image {
width: 80px;
position: relative;
.activity-inner-container {
display: flex;
justify-content: center;
margin-right: 8px;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
align-items: center;
gap: 4px;
.activity-select-label {
position: absolute;
top: -9px;
font-size: 14px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
color: light-dark(@beige, @dark);
background-image: url(../assets/parchments/dh-parchment-light.png);
padding: 0 8px;
line-height: 1;
font-weight: bold;
.activity-marker {
font-size: 8px;
flex: none;
color: light-dark(#18162e, #f3c267);
margin-right: 4px;
}
img {
border-radius: 50%;
}
.activity-select-section {
display: flex;
align-items: center;
gap: 4px;
&:hover,
&.selected {
filter: drop-shadow(0 0 6px gold);
.activity-icon {
min-width: 24px;
text-align: center;
}
}
}
.custom-name-input {
font-size: 24px;
.activity-selected-marker {
font-size: 14px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
color: light-dark(@dark, @beige);
background-image: url(../assets/parchments/dh-parchment-dark.png);
padding: 0 8px;
line-height: 1;
font-weight: bold;
padding: 0;
background: transparent;
color: rgb(239, 230, 216);
}
}
.activity-body {
flex: 1;
font-style: italic;
}
}
}
&.downtime {
.activity-text-area {
resize: none;
footer {
margin-top: 8px;
display: flex;
gap: 8px;
button {
flex: 1;
font-family: 'Montserrat', sans-serif;
}
}
}

View file

@ -38,7 +38,7 @@
input[type='checkbox'],
input[type='radio'] {
&:checked::after {
color: light-dark(@dark-40, @golden);
color: light-dark(@dark, @golden);
}
&:checked::before {
color: light-dark(@dark-40, @golden-40);
@ -112,22 +112,17 @@
margin: 5px;
height: inherit;
.tag {
box-shadow: 0 0 0 1.1em @beige inset;
vertical-align: top;
box-sizing: border-box;
max-width: 100%;
padding: 0.3em 0 0.3em 0.5em;
color: black;
padding: 0.3rem 0.5rem;
color: light-dark(@dark-blue, @golden);
background-color: light-dark(@dark-blue-10, @golden-40);
font-family: @font-body;
border-radius: 3px;
white-space: nowrap;
transition: 0.13s ease-out;
height: 22px;
font-size: 0.9rem;
gap: 0.5em;
gap: 0.5rem;
z-index: 1;
.remove {
font-size: 10px;
margin-inline: auto 4.6666666667px;
}
}
}
@ -434,6 +429,34 @@
border: 1px solid light-dark(@dark, @beige);
height: 34px;
// tagify rule styles
--tags-disabled-bg: none;
--tags-border-color: none;
--tags-hover-border-color: none;
--tags-focus-border-color: none;
--tag-border-radius: 3px;
--tag-bg: light-dark(@dark-blue, @golden);
--tag-remove-btn-color: light-dark(@dark-blue, @golden);
--tag-hover: light-dark(@dark-blue, @golden);
--tag-text-color: light-dark(@beige, @dark);
--tag-text-color--edit: light-dark(@beige, @dark);
--tag-pad: 0.3em 0.5em;
--tag-inset-shadow-size: 1.2em;
--tag-invalid-color: #d39494;
--tag-invalid-bg: rgba(211, 148, 148, 0.5);
--tag--min-width: 1ch;
--tag--max-width: 100%;
--tag-hide-transition: 0.3s;
--tag-remove-bg: light-dark(@dark-blue-40, @golden-40);
--tag-remove-btn-color: light-dark(@beige, @dark);
--tag-remove-btn-bg: none;
--tag-remove-btn-bg--hover: light-dark(@beige, @dark);
--input-color: inherit;
--placeholder-color: light-dark(@beige-15, @dark-15);
--placeholder-color-focus: light-dark(@beige-15, @dark-15);
--loader-size: 0.8em;
--readonly-striped: 1;
border-radius: 3px;
margin-right: 1px;
@ -459,30 +482,27 @@
.tagify__dropdown {
border: 1px solid light-dark(@dark, @beige) !important;
font-family: @font-body;
color: light-dark(@dark, @beige);
.tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-dark.png);
background-color: transparent;
border: 0;
color: light-dark(@dark, @beige);
.tagify__dropdown__item--active {
background-color: light-dark(@dark, @beige);
color: var(--color-dark-3);
color: light-dark(@beige, @dark);
}
}
}
&.theme-light {
.tagify__dropdown {
color: black;
.tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-light.png);
}
.tagify__dropdown__item--active {
color: @beige;
}
}
}
}

View file

@ -7,12 +7,22 @@
height: 40px;
width: 100%;
.feature-tab {
border: none;
.navigation-container {
display: flex;
align-items: center;
gap: 8px;
a {
color: light-dark(@dark-blue, @golden);
font-family: @font-body;
.navigation-inner-container {
flex: 1;
.feature-tab {
border: none;
a {
color: light-dark(@dark-blue, @golden);
font-family: @font-body;
}
}
}
}
}

View file

@ -215,7 +215,9 @@
justify-content: center;
.status-number {
justify-items: center;
display: flex;
align-items: center;
flex-direction: column;
.status-value {
position: relative;

View file

@ -193,5 +193,14 @@
}
}
}
.character-downtime-container {
display: flex;
gap: 2px;
button {
flex: 1;
}
}
}
}

View file

@ -174,8 +174,115 @@
gap: 5px;
justify-content: center;
.status-bar.armor-slots {
display: flex;
justify-content: center;
position: relative;
width: 95px;
height: 30px;
.status-label {
padding: 2px 10px;
position: relative;
top: 30px;
height: 22px;
width: 95px;
border-radius: 3px;
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
font-size: 12px;
}
}
.status-value {
position: absolute;
display: flex;
padding: 0 6px;
font-size: 1.2rem;
align-items: center;
width: 80px;
height: 30px;
justify-content: center;
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige);
border: 1px solid light-dark(@dark-blue, @golden);
border-bottom: none;
border-radius: 6px 6px 0 0;
input[type='number'] {
background: transparent;
font-size: 1.2rem;
width: 30px;
height: 20px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: light-dark(@dark-blue, @beige);
&.bar-input {
padding: 0;
color: light-dark(@dark-blue, @beige);
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 30px;
}
}
.progress-bar {
position: absolute;
appearance: none;
width: 80px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
z-index: 1;
background: light-dark(transparent, @dark-blue);
border-bottom: none;
border-radius: 6px 6px 0 0;
&::-webkit-progress-bar {
border: none;
background: light-dark(transparent, @dark-blue);
}
&::-webkit-progress-value {
background: @gradient-stress;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
}
&::-moz-progress-bar {
background: @gradient-stress;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
}
}
}
.status-number {
justify-items: center;
display: flex;
align-items: center;
flex-direction: column;
&.armor-slots {
width: 95px;
}
.status-value {
position: relative;
@ -192,9 +299,33 @@
background: light-dark(transparent, @dark-blue);
z-index: 2;
&.armor-slots {
width: 80px;
height: 30px;
input[type='number'] {
background: transparent;
font-size: 1.2rem;
width: 30px;
height: 20px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: light-dark(@dark-blue, @beige);
&.bar-input {
padding: 0;
color: light-dark(@dark-blue, @beige);
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 30px;
}
}

View file

@ -3,7 +3,8 @@
.application.sheet.daggerheart.actor.dh-style.companion {
.partner-section,
.attack-section {
.attack-section,
.experience-list {
display: flex;
flex-direction: column;
align-items: center;
@ -12,6 +13,7 @@
display: flex;
gap: 15px;
align-items: center;
width: 100%;
h3 {
font-size: 20px;

View file

@ -92,7 +92,6 @@
position: relative;
width: 100px;
height: 40px;
justify-items: center;
.status-label {
position: relative;

View file

@ -60,7 +60,9 @@
}
.status-number {
justify-items: center;
display: flex;
align-items: center;
flex-direction: column;
.status-value {
position: relative;

View file

@ -44,12 +44,14 @@
display: flex;
gap: 2px;
margin-bottom: 4px;
flex-wrap: wrap;
.duality-modifier {
padding: 2px;
border-radius: 6px;
border: 1px solid;
background: var(--color-dark-6);
font-size: 12px;
white-space: nowrap;
}
}
.dice-flavor {

View file

@ -2,7 +2,6 @@
.token-actions {
align-self: stretch;
display: flex;
align-items: top;
justify-content: center;
gap: 16px;
@ -26,6 +25,16 @@
opacity: 0.5;
background: transparent;
}
&.inactive {
background: var(--color-warm-2);
color: var(--color-light-1);
cursor: default;
&:hover {
filter: none;
}
}
}
}

View file

@ -0,0 +1,43 @@
.theme-light .autocomplete {
background-image: url('../assets/parchments/dh-parchment-light.png');
color: black;
}
.autocomplete {
padding: 2px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: light-dark(@dark, @beige);
border-radius: 6px;
background-image: url('../assets/parchments/dh-parchment-dark.png');
max-height: 400px !important;
width: fit-content !important;
overflow-y: auto;
font-family: @font-body;
display: flex;
flex-direction: column;
gap: 2px;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
.group {
font-weight: bold;
font-size: 14px;
padding-left: 8px;
}
li[role='option'] {
font-size: 14px;
padding-left: 10px;
cursor: pointer;
&:hover {
background-color: light-dark(@dark, @beige);
color: light-dark(@beige, var(--color-dark-3));
}
> div {
white-space: nowrap;
}
}
}

View file

@ -1 +1,2 @@
@import './tooltip/tooltip.less';
@import './autocomplete/autocomplete.less';

View file

@ -4,6 +4,20 @@
align-items: center;
gap: 4px;
.tooltip-title-container {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
.tooltip-image {
height: 40px;
width: 40px;
border-radius: 6px;
border: 1px solid @golden;
}
}
.tooltip-title {
margin: 0;
text-align: center;