mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
74df2c4e87
* style items and action chat messages * enhance death move chat message and fix border bottom from title actions * fix padding bottom * Added basic chat-message.hbs * . * style remaing chat messages * style action messages * remove console log * add colapsable descriptions in chat messages * inital style for message rolls * fix deal damage button style * add new partchments * Roll Chat message new design template * j * l * p * y * fix _getTags type error and add a alias label for non base messages * Fix damage & healing roll * Fix conflict * Deleting old templates * Good for now * fix labels in duality rolls messages and style experience and effects messages --------- Co-authored-by: WBHarry <williambjrklund@gmail.com> Co-authored-by: Dapoolp <elcatnet@gmail.com>
749 lines
18 KiB
Text
Executable file
749 lines
18 KiB
Text
Executable file
@import '../utils/colors.less';
|
|
@import '../utils/fonts.less';
|
|
|
|
.dh-style {
|
|
border: 1px solid light-dark(@dark-blue, @golden);
|
|
|
|
input[type='text'],
|
|
input[type='number'],
|
|
textarea {
|
|
background: light-dark(transparent, transparent);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 30px @soft-shadow;
|
|
backdrop-filter: blur(9.5px);
|
|
-webkit-backdrop-filter: blur(9.5px);
|
|
outline: 2px solid transparent;
|
|
color: light-dark(@dark-blue, @golden);
|
|
border: 1px solid light-dark(@dark, @beige);
|
|
transition: all 0.3s ease;
|
|
|
|
&::placeholder {
|
|
color: light-dark(@dark-40, @beige-50);
|
|
}
|
|
|
|
&:hover,
|
|
&:hover[type='text'],
|
|
&:hover[type='number'],
|
|
&:focus,
|
|
&:focus[type='text'],
|
|
&:focus[type='number'] {
|
|
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
|
|
box-shadow: none;
|
|
outline: 2px solid light-dark(@dark, @beige);
|
|
}
|
|
|
|
&:disabled[type='text'],
|
|
&:disabled[type='number'] {
|
|
outline: 2px solid transparent;
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type='checkbox'],
|
|
input[type='radio'] {
|
|
&:checked::after {
|
|
color: light-dark(@dark, @golden);
|
|
}
|
|
&:checked::before {
|
|
color: light-dark(@dark-40, @golden-40);
|
|
}
|
|
&::before {
|
|
color: light-dark(@dark-40, @golden-40);
|
|
}
|
|
}
|
|
|
|
input[type='range'] {
|
|
&::-webkit-slider-runnable-track {
|
|
background: light-dark(@dark-blue-40, @golden-40);
|
|
}
|
|
&::-moz-range-track {
|
|
background: light-dark(@dark-blue-40, @golden-40);
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
background: light-dark(@dark-blue, @golden);
|
|
border: none;
|
|
border-radius: 50%;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 8px light-dark(@dark-blue, @golden);
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
color: light-dark(@dark, @beige);
|
|
font-family: @font-body;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
|
}
|
|
|
|
button {
|
|
background: light-dark(transparent, @golden);
|
|
border: 1px solid light-dark(@dark-blue, @dark-blue);
|
|
color: light-dark(@dark-blue, @dark-blue);
|
|
outline: none;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
background: light-dark(@light-black, @dark-blue);
|
|
color: light-dark(@dark-blue, @golden);
|
|
}
|
|
|
|
&.glow {
|
|
animation: glow 0.75s infinite alternate;
|
|
}
|
|
|
|
&:disabled {
|
|
background: light-dark(transparent, @golden);
|
|
color: light-dark(@dark-blue, @dark-blue);
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
background: light-dark(transparent, @golden);
|
|
color: light-dark(@dark-blue, @dark-blue);
|
|
}
|
|
}
|
|
|
|
&.reverted {
|
|
background: light-dark(@dark-blue-10, @golden-10);
|
|
color: light-dark(@dark-blue, @golden);
|
|
border: 1px solid light-dark(@dark, transparent);
|
|
&:hover {
|
|
background: light-dark(transparent, @golden);
|
|
color: light-dark(@dark-blue, @dark-blue);
|
|
}
|
|
img {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
background: light-dark(transparent, transparent);
|
|
color: light-dark(@dark, @beige);
|
|
font-family: @font-body;
|
|
outline: 2px solid transparent;
|
|
border: 1px solid light-dark(@dark, @beige);
|
|
|
|
&:focus,
|
|
&:hover {
|
|
outline: 2px solid light-dark(@dark, @beige);
|
|
box-shadow: none;
|
|
}
|
|
|
|
& option,
|
|
& optgroup {
|
|
color: @beige;
|
|
background-color: @dark-blue;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
outline: 2px solid transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
multi-select {
|
|
position: relative;
|
|
height: 34px;
|
|
.tags {
|
|
justify-content: flex-start;
|
|
margin: 4px;
|
|
height: inherit;
|
|
.tag {
|
|
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;
|
|
transition: 0.13s ease-out;
|
|
gap: 0.5rem;
|
|
z-index: 1;
|
|
|
|
.remove {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
select {
|
|
position: absolute;
|
|
height: inherit;
|
|
outline: initial;
|
|
}
|
|
}
|
|
|
|
table {
|
|
font-family: @font-body;
|
|
border-radius: 3px;
|
|
|
|
thead {
|
|
background-color: light-dark(@dark-blue, @golden);
|
|
color: light-dark(@beige, @dark-blue);
|
|
}
|
|
|
|
tr:nth-child(odd) {
|
|
background-color: light-dark(@dark-blue-40, @golden-40);
|
|
border-color: light-dark(@golden, @dark-blue);
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: light-dark(@dark-blue-10, @golden-10);
|
|
border-color: light-dark(@golden, @dark-blue);
|
|
}
|
|
}
|
|
|
|
pre {
|
|
code {
|
|
border-radius: 6px;
|
|
background-color: @dark;
|
|
color: @beige;
|
|
border-color: @dark-blue;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
border-radius: 3px;
|
|
border-left: 3px solid light-dark(@dark-blue-40, @golden-40);
|
|
background-color: light-dark(@dark-blue-10, @golden-10);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
|
|
a:hover,
|
|
a.active {
|
|
font-weight: bold;
|
|
text-shadow: 0 0 8px light-dark(@dark-blue, @golden);
|
|
}
|
|
|
|
fieldset {
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
border-radius: 6px;
|
|
border-color: light-dark(@dark-blue, @golden);
|
|
|
|
&.glassy {
|
|
background-color: light-dark(@dark-blue-10, @golden-10);
|
|
border-color: transparent;
|
|
|
|
legend {
|
|
padding: 2px 12px;
|
|
border-radius: 3px;
|
|
background-color: light-dark(@dark-blue, @golden);
|
|
color: light-dark(@beige, @dark-blue);
|
|
}
|
|
}
|
|
|
|
&.inactive {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&.fit-height {
|
|
height: 95%;
|
|
}
|
|
|
|
&.flex {
|
|
display: flex;
|
|
gap: 20px;
|
|
&.wrap {
|
|
flex-wrap: wrap;
|
|
gap: 10px 20px;
|
|
}
|
|
.inline-child {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.list-w-img {
|
|
padding: 5px;
|
|
label {
|
|
flex: 1;
|
|
}
|
|
img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
|
|
&.one-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
gap: 10px;
|
|
min-height: 64px;
|
|
flex: 1;
|
|
> .one-column {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&.two-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 10px;
|
|
|
|
&.even {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.full-width {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
font-family: @font-body;
|
|
font-weight: bold;
|
|
color: light-dark(@dark-blue, @golden);
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='number'] {
|
|
color: light-dark(@dark, @beige);
|
|
font-family: @font-body;
|
|
transition: all 0.3s ease;
|
|
outline: 2px solid transparent;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
outline: 2px solid light-dark(@dark, @beige);
|
|
}
|
|
}
|
|
|
|
&[disabled],
|
|
&.child-disabled .form-group,
|
|
select[disabled],
|
|
input[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&.child-disabled .form-group {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nest-inputs {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 5px;
|
|
|
|
.btn {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.image {
|
|
height: 40px;
|
|
width: 40px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
border: none;
|
|
}
|
|
|
|
> .checkbox {
|
|
align-self: end;
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
width: 100%;
|
|
label {
|
|
font-family: @font-body;
|
|
font-weight: bold;
|
|
font-size: smaller;
|
|
}
|
|
|
|
&.checkbox {
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
.form-fields {
|
|
height: 32px;
|
|
align-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scalable-input {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
|
|
.form-group {
|
|
width: fit-content;
|
|
.nest-inputs {
|
|
width: fit-content;
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-family: @font-body;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
|
|
&.modifier-label {
|
|
width: 6ch;
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(.list-w-img) {
|
|
gap: 0;
|
|
}
|
|
|
|
&.no-style {
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.two-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 10px;
|
|
|
|
&.even {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
line-div {
|
|
display: block;
|
|
height: 1px;
|
|
width: 100%;
|
|
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
|
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
|
}
|
|
|
|
side-line-div {
|
|
display: block;
|
|
height: 1px;
|
|
width: 100%;
|
|
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
|
mask-image: linear-gradient(270deg, transparent 0%, black 100%);
|
|
|
|
&.invert {
|
|
mask-image: linear-gradient(270deg, black 0%, transparent 100%);
|
|
}
|
|
}
|
|
|
|
.item-description {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
|
|
grid-column: 1/-1; //For item descriptions in sheet elements
|
|
|
|
transition:
|
|
opacity 0.3s ease-out,
|
|
transform 0.3s ease-out;
|
|
}
|
|
|
|
.item-description.invisible {
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transform: translateY(-20px);
|
|
transform-origin: top;
|
|
}
|
|
|
|
.item-buttons {
|
|
grid-column: span 3;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 2px;
|
|
|
|
button {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.application.setting.dh-style {
|
|
fieldset {
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
margin: 8px 0 4px;
|
|
text-align: center;
|
|
}
|
|
.title-hint {
|
|
font-size: 12px;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
}
|
|
|
|
.field-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.split-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
.label-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
|
|
&.full-width {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
select {
|
|
grid-column: span 3;
|
|
}
|
|
}
|
|
|
|
label {
|
|
align-self: center;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
label {
|
|
font-size: 16px;
|
|
font-family: @font-body;
|
|
}
|
|
|
|
.form-fields {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.system-daggerheart {
|
|
.tagify {
|
|
background: light-dark(transparent, transparent);
|
|
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;
|
|
|
|
tag {
|
|
div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 22px;
|
|
|
|
span {
|
|
font-weight: 400;
|
|
}
|
|
|
|
img {
|
|
margin-left: 8px;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: light-dark(@beige, @dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.theme-light {
|
|
.tagify__dropdown {
|
|
.tagify__dropdown__wrapper {
|
|
background-image: url(../assets/parchments/dh-parchment-light.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-light .application {
|
|
&.sheet.dh-style {
|
|
button.glow {
|
|
animation: glow-dark 0.75s infinite alternate;
|
|
}
|
|
}
|
|
|
|
.component.dh-style.card-preview-container {
|
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
|
|
|
.preview-text-container {
|
|
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
|
}
|
|
|
|
.preview-selected-icon-container {
|
|
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
|
color: var(--color-light-5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.application .component.dh-style.card-preview-container {
|
|
position: relative;
|
|
border-radius: 6px;
|
|
border: 2px solid var(--color-tabs-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
aspect-ratio: 0.75;
|
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
|
|
|
&.selectable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.preview-image-outer-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.preview-image-container {
|
|
flex: 1;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.preview-text-container {
|
|
flex: 1;
|
|
border-radius: 0 0 4px 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: var(--color-text-selection-bg);
|
|
background-image: url(../assets/parchments/dh-parchment-light.png);
|
|
}
|
|
|
|
.preview-empty-container {
|
|
pointer-events: none;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
|
|
.preview-empty-inner-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.preview-add-icon {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.preview-empty-subtext {
|
|
position: absolute;
|
|
top: 10%;
|
|
font-size: 18px;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-selected-icon-container {
|
|
position: absolute;
|
|
height: 54px;
|
|
width: 54px;
|
|
border-radius: 50%;
|
|
border: 2px solid;
|
|
font-size: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url(../assets/parchments/dh-parchment-light.png);
|
|
color: var(--color-dark-5);
|
|
|
|
i {
|
|
position: relative;
|
|
right: 2px;
|
|
}
|
|
}
|
|
}
|