mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-17 23:49:02 +01:00
Merge branch 'main' into bug/103-enrich-htmlfield-content-before-its-used-in-applications
This commit is contained in:
commit
f56c2482cb
551 changed files with 2831 additions and 14203 deletions
|
|
@ -14,4 +14,4 @@
|
|||
|
||||
@import './less/ux/index.less';
|
||||
|
||||
@import '../node_modules/@yaireo/tagify/dist/tagify.css';
|
||||
@import '../build/tagify.css';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -215,7 +215,9 @@
|
|||
justify-content: center;
|
||||
|
||||
.status-number {
|
||||
justify-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -193,5 +193,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.character-downtime-container {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@
|
|||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-items: center;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -60,7 +60,9 @@
|
|||
}
|
||||
|
||||
.status-number {
|
||||
justify-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
43
styles/less/ux/autocomplete/autocomplete.less
Normal file
43
styles/less/ux/autocomplete/autocomplete.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
@import './tooltip/tooltip.less';
|
||||
@import './autocomplete/autocomplete.less';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue