mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-18 07:59:03 +01:00
Merged with main
This commit is contained in:
WBHarry
commit
480d04fee5
784 changed files with 13985 additions and 27621 deletions
|
|
@ -1,5 +0,0 @@
|
|||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.window-content {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.window-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.daggerheart.sheet.actor.environment {
|
||||
.potential-adversary-container {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.adversary-placeholder {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.adversaries-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.adversary-container {
|
||||
border: 1px solid var(--color-dark-5);
|
||||
border-radius: 6px;
|
||||
padding: 0 2px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
color: var(--color-light-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.theme-light .application.daggerheart.dh-style.views.beastform-selection {
|
||||
.beastforms-container .beastforms-tier .beastform-container .beastform-title {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
}
|
||||
|
||||
.application.daggerheart.dh-style.views.beastform-selection {
|
||||
.beastforms-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.beastforms-tier {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 4px;
|
||||
|
||||
.beastform-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.beastform-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 16px;
|
||||
margin: 0 4px;
|
||||
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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
styles/less/dialog/actions/action-list.less
Normal file
19
styles/less/dialog/actions/action-list.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style {
|
||||
.actions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.label {
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
218
styles/less/dialog/beastform/sheet.less
Normal file
218
styles/less/dialog/beastform/sheet.less
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/mixin.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.theme-light .application.daggerheart.dh-style.views.beastform-selection .beastforms-outer-container {
|
||||
.beastform-title {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
|
||||
.advanced-container {
|
||||
.advanced-forms-container {
|
||||
.advanced-form-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
|
||||
.hybrid-data-wrapper .hybrid-data-container .hybrid-data-inner-container .hybrid-data {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
}
|
||||
.form-features .form-feature {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application.daggerheart.dh-style.views.beastform-selection {
|
||||
.beastform-nav {
|
||||
nav {
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.beastform-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
padding: 0 2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin: 0 4px;
|
||||
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');
|
||||
}
|
||||
|
||||
.beastforms-tier {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 4px;
|
||||
|
||||
.beastform-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.draggable {
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 15px light-dark(@dark-blue, @golden));
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.advanced-forms-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.advanced-form-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(#18162e, #f3c267);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
||||
&.hybridized {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
padding-top: 4px;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.empty {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.beastform-title {
|
||||
position: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.beastform-title-wrapper {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.hybrid-data-wrapper {
|
||||
overflow: auto;
|
||||
|
||||
.hybrid-data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 0 4px;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hybrid-data-inner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
.hybrid-data {
|
||||
padding: 0 2px;
|
||||
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');
|
||||
opacity: 0.4;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
margin: 8px 0;
|
||||
|
||||
.form-feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
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');
|
||||
|
||||
h4 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
font-family: @font-body;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.daggerheart.dh-style.dialog.character-creation {
|
||||
.creation-action-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
484
styles/less/dialog/character-creation/selections-container.less
Normal file
484
styles/less/dialog/character-creation/selections-container.less
Normal file
|
|
@ -0,0 +1,484 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.appTheme({}, {
|
||||
&.daggerheart.dh-style.dialog.character-creation {
|
||||
.setup-tabs button {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
|
||||
nav a .descriptor {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
|
||||
.main-selections-container {
|
||||
.ancestry-mixed-controller label {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
|
||||
.selections-container
|
||||
.ancestry-preview-info-container
|
||||
.ancestry-preview-features
|
||||
.ancestry-preview-feature {
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
}
|
||||
|
||||
.traits-container {
|
||||
.suggested-traits-container .suggested-trait-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
|
||||
.traits-inner-container .trait-container {
|
||||
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
|
||||
|
||||
div {
|
||||
filter: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.daggerheart.dh-style.dialog.character-creation {
|
||||
.setup-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
border-radius: 6px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
color: light-dark(@beige, @dark);
|
||||
}
|
||||
}
|
||||
|
||||
.main-selections-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.ancestry-mixed-controller {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.active {
|
||||
label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ancestry-name {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
input {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.selections-container {
|
||||
width: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.card-preview-container {
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
.ancestry-preview-info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
.ancestry-preview-label {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ancestry-preview-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 0 2px 2px 2px;
|
||||
|
||||
.ancestry-preview-feature {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
white-space: wrap;
|
||||
padding: 0 2px;
|
||||
border: 1px solid light-dark(@golden, @dark-blue);
|
||||
border-radius: 6px;
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
color: light-dark(@dark, @beige);
|
||||
height: min-content;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selections-outer-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
border-radius: 8px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.section-inner-container {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
legend {
|
||||
font-size: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
height: 16px;
|
||||
width: 110px;
|
||||
min-height: unset;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
color: light-dark(@beige, @beige);
|
||||
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--color-warm-2), var(--color-warm-2));
|
||||
filter: drop-shadow(0 0 3px light-dark(var(--color-warm-2), var(--color-warm-2)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.traits-container {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.suggested-traits-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 176px;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.suggested-trait-container {
|
||||
width: 56px;
|
||||
white-space: nowrap;
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.traits-inner-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: 8px;
|
||||
|
||||
.trait-container {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: url(../assets/svg/trait-shield.svg) no-repeat;
|
||||
|
||||
div {
|
||||
filter: drop-shadow(0 0 3px black);
|
||||
text-shadow: 0 0 3px black;
|
||||
}
|
||||
|
||||
select {
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.experiences-inner-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.experience-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.experience-description {
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.experience-value {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 22px;
|
||||
border-left: 1px solid light-dark(@dark-blue, @golden);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creation-action-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
|
||||
.footer-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
|
||||
.nav-section-text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.finish-marker {
|
||||
position: absolute;
|
||||
align-self: center;
|
||||
top: -10px;
|
||||
padding: 4px;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-cool-4);
|
||||
content: '';
|
||||
|
||||
&.finished {
|
||||
background-color: var(--color-warm-2);
|
||||
}
|
||||
}
|
||||
|
||||
.descriptor {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-equipment-selection {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 16px;
|
||||
|
||||
&.triple {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 2px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 8px;
|
||||
|
||||
legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-subsection {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.equipment-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.simple-equipment-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
|
||||
.simple-equipment {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&.selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
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 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: min-content;
|
||||
border: 2px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 8px;
|
||||
|
||||
legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.suggestion-inner-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6px;
|
||||
cursor: grab;
|
||||
|
||||
&.taken {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
styles/less/dialog/character-creation/sheet.less
Normal file
27
styles/less/dialog/character-creation/sheet.less
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/mixin.less';
|
||||
|
||||
.appTheme({
|
||||
.character-creation {
|
||||
.tab-navigation nav a .descriptor {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
.main-selections-container {
|
||||
.traits-container .suggested-traits-container .suggested-trait-container,
|
||||
.creation-action-footer .footer-section nav a .descriptor,
|
||||
.equipment-selection .simple-equipment-container .simple-equipment label {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {});
|
||||
|
||||
.daggerheart.dh-style.dialog.character-creation {
|
||||
.window-content {
|
||||
gap: 16px;
|
||||
|
||||
.tab {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
styles/less/dialog/character-creation/tab-navigation.less
Normal file
62
styles/less/dialog/character-creation/tab-navigation.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.dh-style.dialog.character-creation {
|
||||
.tab-navigation {
|
||||
nav {
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.nav-section-text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.finish-marker {
|
||||
position: absolute;
|
||||
align-self: center;
|
||||
top: -8px;
|
||||
padding: 4px;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-cool-4);
|
||||
content: '';
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-warm-2);
|
||||
}
|
||||
}
|
||||
|
||||
.descriptor {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.views.damage-reduction {
|
||||
.damage-reduction-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.armor-title {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.resources-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.resource-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mark-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.mark-selection-inner {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mark-container {
|
||||
cursor: pointer;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 1px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.4;
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
cursor: initial;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.fa-shield {
|
||||
position: relative;
|
||||
right: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stress-reduction-container {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
.stress-reduction {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 4px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
opacity: 0.4;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
background: var(--color-warm-2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stress-reduction-cost {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markers-subtitle {
|
||||
margin: -4px 0 0 0;
|
||||
|
||||
&.bold {
|
||||
font-variant: all-small-caps;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
|
||||
.damage-value {
|
||||
font-weight: bold;
|
||||
|
||||
&.reduced-value {
|
||||
opacity: 0.4;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
styles/less/dialog/damage-reduction/sheets.less
Normal file
7
styles/less/dialog/damage-reduction/sheets.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.views.damage-reduction {
|
||||
.window-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
34
styles/less/dialog/damage-selection/sheet.less
Normal file
34
styles/less/dialog/damage-selection/sheet.less
Normal file
|
|
@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
|
||||
.damage-section-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.roll-mode-select {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
@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;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 550px;
|
||||
|
||||
.dices-section {
|
||||
display: flex;
|
||||
|
|
@ -24,6 +32,7 @@
|
|||
height: 70px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dice-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -92,6 +101,10 @@
|
|||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.advantage-chip-tooltip {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-chip {
|
||||
|
|
@ -115,14 +128,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.formula-label {
|
||||
font-family: @font-body;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
.roll-dialog-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 32px;
|
||||
|
||||
color: light-dark(@dark, @beige);
|
||||
.roll-mode-select {
|
||||
width: min-content;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
styles/less/dialog/downtime/downtime-container.less
Normal file
75
styles/less/dialog/downtime/downtime-container.less
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
@import '../../utils/spacing.less';
|
||||
@import '../../utils/colors.less';
|
||||
|
||||
.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 {
|
||||
.activities-grouping {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.activities-container {
|
||||
width: 100%;
|
||||
|
||||
.activity-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
|
||||
.activity-inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.activity-marker {
|
||||
font-size: 8px;
|
||||
flex: none;
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.activity-select-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.activity-icon {
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
styles/less/dialog/index.less
Normal file
24
styles/less/dialog/index.less
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@import './level-up/navigation-container.less';
|
||||
@import './level-up/selections-container.less';
|
||||
@import './level-up/sheet.less';
|
||||
@import './level-up/summary-container.less';
|
||||
@import './level-up/tiers-container.less';
|
||||
|
||||
@import './resource-dice/sheet.less';
|
||||
|
||||
@import './actions/action-list.less';
|
||||
|
||||
@import './damage-selection/sheet.less';
|
||||
|
||||
@import './downtime/downtime-container.less';
|
||||
|
||||
@import './beastform/sheet.less';
|
||||
|
||||
@import './character-creation/creation-action-footer.less';
|
||||
@import './character-creation/selections-container.less';
|
||||
@import './character-creation/sheet.less';
|
||||
@import './character-creation/tab-navigation.less';
|
||||
|
||||
@import './dice-roll/roll-selection.less';
|
||||
@import './damage-reduction/damage-reduction-container.less';
|
||||
@import './damage-reduction/sheets.less';
|
||||
30
styles/less/dialog/level-up/navigation-container.less
Normal file
30
styles/less/dialog/level-up/navigation-container.less
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.daggerheart.levelup {
|
||||
.levelup-navigation-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
height: 36px;
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
|
||||
.levelup-tab-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.levelup-navigation-actions {
|
||||
width: 306px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 16px;
|
||||
margin-right: 4px;
|
||||
|
||||
* {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
108
styles/less/dialog/level-up/selections-container.less
Normal file
108
styles/less/dialog/level-up/selections-container.less
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.daggerheart.levelup {
|
||||
.levelup-selections-container {
|
||||
.achievement-experience-cards {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.achievement-experience-card {
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
padding-right: 4px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.achievement-experience-marker {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.levelup-card-selection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
|
||||
.card-preview-container {
|
||||
width: calc(100% * (1 / 5));
|
||||
}
|
||||
|
||||
.levelup-domains-selection-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.levelup-domain-selection-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.levelup-domain-label {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 4px;
|
||||
background: grey;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 124px;
|
||||
}
|
||||
|
||||
.levelup-domain-selected {
|
||||
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);
|
||||
top: calc(50% - 29px);
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.levelup-selections-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.levelup-radio-choices {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
styles/less/dialog/level-up/sheet.less
Normal file
37
styles/less/dialog/level-up/sheet.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@import '../../utils/mixin.less';
|
||||
|
||||
.appTheme({}, {
|
||||
&.levelup {
|
||||
.tiers-container {
|
||||
.tier-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.daggerheart.levelup {
|
||||
.window-content {
|
||||
max-height: 960px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div[data-application-part='form'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
section {
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.levelup-footer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
37
styles/less/dialog/level-up/summary-container.less
Normal file
37
styles/less/dialog/level-up/summary-container.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.daggerheart.levelup {
|
||||
.levelup-summary-container {
|
||||
.level-achievements-container,
|
||||
.level-advancements-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.increase-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.summary-selection-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.summary-selection {
|
||||
border: 2px solid;
|
||||
border-radius: 6px;
|
||||
padding: 0 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
styles/less/dialog/level-up/tiers-container.less
Normal file
65
styles/less/dialog/level-up/tiers-container.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.daggerheart.levelup {
|
||||
.tiers-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.tier-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.checkbox-group-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 4px;
|
||||
|
||||
.checkboxes-container {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 4px;
|
||||
|
||||
.checkbox-grouping-coontainer {
|
||||
display: flex;
|
||||
height: min-content;
|
||||
|
||||
&.multi {
|
||||
border: 2px solid grey;
|
||||
padding: 2.4px 2.5px 0;
|
||||
border-radius: 4px;
|
||||
gap: 2px;
|
||||
|
||||
.selection-checkbox {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-group-label {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
58
styles/less/dialog/resource-dice/sheet.less
Normal file
58
styles/less/dialog/resource-dice/sheet.less
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.theme-light .daggerheart.dialog.dh-style.views.resource-dice {
|
||||
.resource-items .resource-item {
|
||||
input {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
|
||||
img {
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daggerheart.dialog.dh-style.views.resource-dice {
|
||||
.reroll-confirmation {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.resource-items {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.resource-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
color: light-dark(black, white);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
z-index: 2;
|
||||
line-height: 22px;
|
||||
height: unset;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
filter: brightness(0) saturate(100%) invert(97%) sepia(7%) saturate(580%) hue-rotate(332deg)
|
||||
brightness(96%) contrast(95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
@import '../utils/mixin.less';
|
||||
|
||||
.appTheme({
|
||||
&.dialog {
|
||||
|
|
@ -40,4 +41,30 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.formula-label {
|
||||
font-family: @font-body;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
|
||||
.damage-formula {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.damage-details {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
618
styles/less/global/elements.css
Normal file
618
styles/less/global/elements.css
Normal file
|
|
@ -0,0 +1,618 @@
|
|||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 1px #f3c267;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 2px 2px #f3c267;
|
||||
}
|
||||
}
|
||||
@keyframes glow-dark {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 1px #18162e;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 2px 2px #18162e;
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v25/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnTYo.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v25/8vIU7ww63mVu7gtR-kwKxNvkNOjw-jHgTYo.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cinzel Decorative';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzeldecorative/v18/daaHSScvJGqLYhG8nNt8KPPswUAPniZoaelD.ttf)
|
||||
format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h1 {
|
||||
font-family: 'Cinzel Decorative', serif;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h2,
|
||||
.application.sheet.daggerheart.dh-style h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h4 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
color: #f3c267;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h5 {
|
||||
font-size: 14px;
|
||||
color: #f3c267;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style p,
|
||||
.application.sheet.daggerheart.dh-style span {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style small {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.application.dh-style {
|
||||
border: 1px solid light-dark(#18162e, #f3c267);
|
||||
}
|
||||
.application.dh-style input[type='text'],
|
||||
.application.dh-style input[type='number'] {
|
||||
background: light-dark(transparent, transparent);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(9.5px);
|
||||
-webkit-backdrop-filter: blur(9.5px);
|
||||
outline: none;
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
}
|
||||
.application.dh-style input[type='text']:hover[type='text'],
|
||||
.application.dh-style input[type='number']:hover[type='text'],
|
||||
.application.dh-style input[type='text']:hover[type='number'],
|
||||
.application.dh-style input[type='number']:hover[type='number'],
|
||||
.application.dh-style input[type='text']:focus[type='text'],
|
||||
.application.dh-style input[type='number']:focus[type='text'],
|
||||
.application.dh-style input[type='text']:focus[type='number'],
|
||||
.application.dh-style input[type='number']:focus[type='number'] {
|
||||
background: light-dark(rgba(0, 0, 0, 0.05), rgba(24, 22, 46, 0.33));
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(#222, #efe6d8);
|
||||
}
|
||||
.application.dh-style input[type='text']:disabled[type='text'],
|
||||
.application.dh-style input[type='number']:disabled[type='text'],
|
||||
.application.dh-style input[type='text']:disabled[type='number'],
|
||||
.application.dh-style input[type='number']:disabled[type='number'] {
|
||||
outline: 2px solid transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.application.dh-style input[type='text']:disabled[type='text']:hover,
|
||||
.application.dh-style input[type='number']:disabled[type='text']:hover,
|
||||
.application.dh-style input[type='text']:disabled[type='number']:hover,
|
||||
.application.dh-style input[type='number']:disabled[type='number']:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.application.dh-style input[type='checkbox']:checked::after,
|
||||
.application.dh-style input[type='radio']:checked::after {
|
||||
color: light-dark(#222, #f3c267);
|
||||
}
|
||||
.application.dh-style input[type='checkbox']:checked::before,
|
||||
.application.dh-style input[type='radio']:checked::before {
|
||||
color: light-dark(#22222240, #f3c26740);
|
||||
}
|
||||
.application.dh-style input[type='checkbox']::before,
|
||||
.application.dh-style input[type='radio']::before {
|
||||
color: light-dark(#22222240, #f3c26740);
|
||||
}
|
||||
.application.dh-style button {
|
||||
background: light-dark(transparent, #f3c267);
|
||||
border: 1px solid light-dark(#18162e, #18162e);
|
||||
color: light-dark(#18162e, #18162e);
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.application.dh-style button:hover {
|
||||
background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
}
|
||||
.application.dh-style button.glow {
|
||||
animation: glow 0.75s infinite alternate;
|
||||
}
|
||||
.application.dh-style button:disabled {
|
||||
background: light-dark(transparent, #f3c267);
|
||||
color: light-dark(#18162e, #18162e);
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.application.dh-style button:disabled:hover {
|
||||
background: light-dark(transparent, #f3c267);
|
||||
color: light-dark(#18162e, #18162e);
|
||||
}
|
||||
.application.dh-style select {
|
||||
background: light-dark(transparent, transparent);
|
||||
color: light-dark(#222, #efe6d8);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
}
|
||||
.application.dh-style select:focus,
|
||||
.application.dh-style select:hover {
|
||||
outline: 2px solid light-dark(#222, #efe6d8);
|
||||
box-shadow: none;
|
||||
}
|
||||
.application.dh-style select option,
|
||||
.application.dh-style select optgroup {
|
||||
color: #efe6d8;
|
||||
background-color: #18162e;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.application.dh-style select:disabled {
|
||||
opacity: 0.6;
|
||||
outline: 2px solid transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.application.dh-style multi-select {
|
||||
position: relative;
|
||||
height: 34px;
|
||||
}
|
||||
.application.dh-style multi-select .tags {
|
||||
justify-content: flex-start;
|
||||
margin: 4px;
|
||||
height: inherit;
|
||||
}
|
||||
.application.dh-style multi-select .tags .tag {
|
||||
padding: 0.3rem 0.5rem;
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
background-color: light-dark(#18162e10, #f3c26740);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
border-radius: 3px;
|
||||
transition: 0.13s ease-out;
|
||||
gap: 0.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.application.dh-style multi-select .tags .tag .remove {
|
||||
font-size: 10px;
|
||||
}
|
||||
.application.dh-style multi-select select {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
outline: initial;
|
||||
}
|
||||
.application.dh-style p {
|
||||
margin: 0;
|
||||
}
|
||||
.application.dh-style ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.application.dh-style li {
|
||||
margin: 0;
|
||||
}
|
||||
.application.dh-style a:hover,
|
||||
.application.dh-style a.active {
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px light-dark(#18162e, #f3c267);
|
||||
}
|
||||
.application.dh-style fieldset {
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
border-color: light-dark(#18162e, #f3c267);
|
||||
}
|
||||
.application.dh-style fieldset.glassy {
|
||||
background-color: light-dark(#18162e10, #f3c26710);
|
||||
border-color: transparent;
|
||||
}
|
||||
.application.dh-style fieldset.glassy legend {
|
||||
padding: 2px 12px;
|
||||
border-radius: 3px;
|
||||
background-color: light-dark(#18162e, #f3c267);
|
||||
color: light-dark(#efe6d8, #18162e);
|
||||
}
|
||||
.application.dh-style fieldset.fit-height {
|
||||
height: 95%;
|
||||
}
|
||||
.application.dh-style fieldset.flex {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.application.dh-style fieldset.flex.wrap {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 20px;
|
||||
}
|
||||
.application.dh-style fieldset.flex .inline-child {
|
||||
flex: 1;
|
||||
}
|
||||
.application.dh-style fieldset .list-w-img {
|
||||
padding: 5px;
|
||||
}
|
||||
.application.dh-style fieldset .list-w-img label {
|
||||
flex: 1;
|
||||
}
|
||||
.application.dh-style fieldset .list-w-img img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.application.dh-style fieldset.one-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
min-height: 64px;
|
||||
flex: 1;
|
||||
}
|
||||
.application.dh-style fieldset.one-column > .one-column {
|
||||
width: 100%;
|
||||
}
|
||||
.application.dh-style fieldset.two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.application.dh-style fieldset.two-columns.even {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.application.dh-style fieldset.two-columns .full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.application.dh-style fieldset legend {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: bold;
|
||||
color: light-dark(#18162e, #f3c267);
|
||||
}
|
||||
.application.dh-style fieldset input[type='text'],
|
||||
.application.dh-style fieldset input[type='number'] {
|
||||
color: light-dark(#222, #efe6d8);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
}
|
||||
.application.dh-style fieldset input[type='text']:focus,
|
||||
.application.dh-style fieldset input[type='number']:focus,
|
||||
.application.dh-style fieldset input[type='text']:hover,
|
||||
.application.dh-style fieldset input[type='number']:hover {
|
||||
outline: 2px solid light-dark(#222, #efe6d8);
|
||||
}
|
||||
.application.dh-style fieldset[disabled],
|
||||
.application.dh-style fieldset.child-disabled .form-group,
|
||||
.application.dh-style fieldset select[disabled],
|
||||
.application.dh-style fieldset input[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.application.dh-style fieldset.child-disabled .form-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
.application.dh-style fieldset .nest-inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
}
|
||||
.application.dh-style fieldset .nest-inputs .btn {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.application.dh-style fieldset .nest-inputs .image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.application.dh-style fieldset .nest-inputs > .checkbox {
|
||||
align-self: end;
|
||||
}
|
||||
.application.dh-style fieldset .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
.application.dh-style fieldset .form-group label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: smaller;
|
||||
}
|
||||
.application.dh-style fieldset .form-group.checkbox {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.application.dh-style fieldset .form-group.checkbox .form-fields {
|
||||
height: 32px;
|
||||
align-content: center;
|
||||
}
|
||||
.application.dh-style fieldset:has(.list-w-img) {
|
||||
gap: 0;
|
||||
}
|
||||
.application.dh-style .two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.application.dh-style .two-columns.even {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.application.dh-style line-div {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid light-dark(#18162e, #f3c267);
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
}
|
||||
.application.dh-style side-line-div {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid light-dark(#18162e, #f3c267);
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 100%);
|
||||
}
|
||||
.application.dh-style side-line-div.invert {
|
||||
mask-image: linear-gradient(270deg, black 0%, transparent 100%);
|
||||
}
|
||||
.application.dh-style .item-description {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
grid-column: 1/-1;
|
||||
transition:
|
||||
opacity 0.3s ease-out,
|
||||
transform 0.3s ease-out;
|
||||
}
|
||||
.application.dh-style .item-description.invisible {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transform: translateY(-20px);
|
||||
transform-origin: top;
|
||||
}
|
||||
.application.dh-style .item-buttons {
|
||||
grid-column: span 3;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.application.dh-style .item-buttons button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.application.setting.dh-style fieldset h2,
|
||||
.application.setting.dh-style fieldset h3,
|
||||
.application.setting.dh-style fieldset h4 {
|
||||
margin: 8px 0 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.application.setting.dh-style fieldset .title-hint {
|
||||
font-size: 12px;
|
||||
font-variant: small-caps;
|
||||
text-align: center;
|
||||
}
|
||||
.application.setting.dh-style fieldset .field-section .split-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.application.setting.dh-style fieldset .label-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.application.setting.dh-style fieldset .label-container label {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
.application.setting.dh-style footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.application.setting.dh-style footer button {
|
||||
flex: 1;
|
||||
}
|
||||
.application.setting.dh-style .form-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.application.setting.dh-style .form-group label {
|
||||
font-size: 16px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
.application.setting.dh-style .form-group .form-fields {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.system-daggerheart .tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
height: 34px;
|
||||
--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(#18162e, #f3c267);
|
||||
--tag-remove-btn-color: light-dark(#18162e, #f3c267);
|
||||
--tag-hover: light-dark(#18162e, #f3c267);
|
||||
--tag-text-color: light-dark(#efe6d8, #222);
|
||||
--tag-text-color--edit: light-dark(#efe6d8, #222);
|
||||
--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(#18162e40, #f3c26740);
|
||||
--tag-remove-btn-color: light-dark(#efe6d8, #222);
|
||||
--tag-remove-btn-bg: none;
|
||||
--tag-remove-btn-bg--hover: light-dark(#efe6d8, #222);
|
||||
--input-color: inherit;
|
||||
--placeholder-color: light-dark(#efe6d815, #22222215);
|
||||
--placeholder-color-focus: light-dark(#efe6d815, #22222215);
|
||||
--loader-size: 0.8em;
|
||||
--readonly-striped: 1;
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.system-daggerheart .tagify tag div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.system-daggerheart .tagify tag div span {
|
||||
font-weight: 400;
|
||||
}
|
||||
.system-daggerheart .tagify tag div img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown {
|
||||
border: 1px solid light-dark(#222, #efe6d8) !important;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: light-dark(#222, #efe6d8);
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: light-dark(#222, #efe6d8);
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item--active {
|
||||
background-color: light-dark(#222, #efe6d8);
|
||||
color: light-dark(#efe6d8, #222);
|
||||
}
|
||||
.system-daggerheart.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;
|
||||
}
|
||||
.theme-light .application .component.dh-style.card-preview-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
.theme-light .application .component.dh-style.card-preview-container .preview-text-container {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
.theme-light .application .component.dh-style.card-preview-container .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');
|
||||
}
|
||||
.application .component.dh-style.card-preview-container.selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .preview-image-outer-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .preview-image-container {
|
||||
flex: 1;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .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);
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .preview-empty-container {
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .preview-empty-container .preview-empty-inner-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.application
|
||||
.component.dh-style.card-preview-container
|
||||
.preview-empty-container
|
||||
.preview-empty-inner-container
|
||||
.preview-add-icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
.application
|
||||
.component.dh-style.card-preview-container
|
||||
.preview-empty-container
|
||||
.preview-empty-inner-container
|
||||
.preview-empty-subtext {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
font-size: 18px;
|
||||
font-variant: small-caps;
|
||||
text-align: center;
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .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);
|
||||
}
|
||||
.application .component.dh-style.card-preview-container .preview-selected-icon-container i {
|
||||
position: relative;
|
||||
right: 2px;
|
||||
}
|
||||
|
|
@ -15,6 +15,10 @@
|
|||
color: light-dark(@dark-blue, @golden);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
|
||||
&::placeholder {
|
||||
color: light-dark(@dark-40, @beige-50);
|
||||
}
|
||||
|
||||
&:hover[type='text'],
|
||||
&:hover[type='number'],
|
||||
&:focus[type='text'],
|
||||
|
|
@ -35,15 +39,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
&:checked::after {
|
||||
color: light-dark(@dark, @golden);
|
||||
}
|
||||
&:checked::before {
|
||||
color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-40, @golden-40);
|
||||
}
|
||||
&::before {
|
||||
color: light-dark(@dark, @beige);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +126,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -266,6 +318,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -319,6 +396,17 @@
|
|||
transform: translateY(-20px);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.item-buttons {
|
||||
grid-column: span 3;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application.setting.dh-style {
|
||||
|
|
@ -372,6 +460,7 @@
|
|||
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-family: @font-body;
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
|
|
@ -388,6 +477,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;
|
||||
|
||||
|
|
@ -413,30 +530,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
16
styles/less/global/index.less
Normal file
16
styles/less/global/index.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@import './sheet.less';
|
||||
@import './dialog.less';
|
||||
@import './elements.less';
|
||||
@import './tab-navigation.less';
|
||||
@import './tab-form-footer.less';
|
||||
@import './tab-actions.less';
|
||||
@import './tab-features.less';
|
||||
@import './tab-effects.less';
|
||||
@import './tab-settings.less';
|
||||
@import './item-header.less';
|
||||
@import './feature-section.less';
|
||||
@import './inventory-item.less';
|
||||
@import './inventory-fieldset-items.less';
|
||||
@import './prose-mirror.less';
|
||||
@import './filter-menu.less';
|
||||
@import './tab-attachments.less';
|
||||
|
|
@ -1,78 +1,168 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.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-header .img-portait .roll-img {
|
||||
filter: invert(1);
|
||||
}
|
||||
});
|
||||
|
||||
.application.daggerheart.dh-style {
|
||||
.inventory-item {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 60px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
|
||||
.item-img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
|
||||
&.actor-img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-family: @font-body;
|
||||
align-self: center;
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-tags,
|
||||
.item-labels {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
.inventory-item-header .img-portait {
|
||||
.roll-img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
gap: 4px;
|
||||
.item-img {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
.inventory-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
.img-portait {
|
||||
flex: 0 0 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&.unequipped {
|
||||
opacity: 0.4;
|
||||
.item-img,
|
||||
.roll-img {
|
||||
position: absolute;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
|
||||
.roll-img {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
flex: 1;
|
||||
font-family: @font-body;
|
||||
align-self: center;
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-tags,
|
||||
.item-labels {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.tag,
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 3px 5px;
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-resource {
|
||||
flex: 0 0 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.controls {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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: 18px;
|
||||
}
|
||||
|
||||
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: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
|
|
@ -84,11 +174,27 @@
|
|||
&:hover {
|
||||
.card-label {
|
||||
padding-top: 15px;
|
||||
.controls {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -97,6 +203,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
|
|
@ -123,15 +230,89 @@
|
|||
color: @beige;
|
||||
}
|
||||
|
||||
.controls {
|
||||
.menu {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
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: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-resource {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 4px;
|
||||
|
||||
i {
|
||||
flex: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
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: 18px;
|
||||
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: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
// Theme handling
|
||||
.appTheme({
|
||||
background: @semi-transparent-dark-blue;
|
||||
backdrop-filter: blur(9px);
|
||||
background: @dark-blue-60;
|
||||
backdrop-filter: blur(10px);
|
||||
}, {
|
||||
background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
|
||||
});
|
||||
|
|
@ -44,6 +44,8 @@
|
|||
top: -36px;
|
||||
min-height: -webkit-fill-available;
|
||||
transition: opacity 0.3s ease;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -36px;
|
||||
|
||||
.tab {
|
||||
padding: 0 10px;
|
||||
|
|
|
|||
7
styles/less/global/tab-attachments.less
Normal file
7
styles/less/global/tab-attachments.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.daggerheart.dh-style {
|
||||
.tab.attachments {
|
||||
.attached-items {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
styles/less/global/tab-settings.less
Normal file
8
styles/less/global/tab-settings.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.sheet.daggerheart.dh-style {
|
||||
.tab.settings {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
1
styles/less/hud/index.less
Normal file
1
styles/less/hud/index.less
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import './token-hud/token-hud.less';
|
||||
10
styles/less/hud/token-hud/token-hud.less
Normal file
10
styles/less/hud/token-hud/token-hud.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.daggerheart.placeable-hud {
|
||||
.col.right {
|
||||
.palette {
|
||||
.palette-category-title {
|
||||
grid-column: span var(--effect-columns);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnTYo.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzel/v23/8vIU7ww63mVu7gtR-kwKxNvkNOjw-jHgTYo.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Cinzel Decorative';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/cinzeldecorative/v17/daaHSScvJGqLYhG8nNt8KPPswUAPniZoaelD.ttf)
|
||||
format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h1 {
|
||||
font-family: 'Cinzel Decorative', serif;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h2,
|
||||
.application.sheet.daggerheart.dh-style h3 {
|
||||
font-family: 'Cinzel', serif;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h4 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
color: #f3c267;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style h5 {
|
||||
font-size: 14px;
|
||||
color: #f3c267;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style p,
|
||||
.application.sheet.daggerheart.dh-style span {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style small {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
height: 34px;
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div span {
|
||||
font-weight: 400;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .fieldsets-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items .item-line {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items .item-line h4 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: lighter;
|
||||
color: light-dark(#222, #efe6d8);
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items .item-line .image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items .item-line .controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .list-items .item-line .controls a {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
|
@ -1,28 +1,29 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab.experiences {
|
||||
.add-experience-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.experience-item {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 30px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab.experiences {
|
||||
.add-experience-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.experience-item {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 30px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.add-feature-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab {
|
||||
&.details.active,
|
||||
&.attack.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.fieldsets-section {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab {
|
||||
&.details.active,
|
||||
&.attack.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.fieldsets-section {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +1,51 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab.adversaries {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.add-action-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
|
||||
.category-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adversaries-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adversaries-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px dashed light-dark(@dark-blue-50, @beige-50);
|
||||
border-radius: 3px;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab.adversaries {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.add-action-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
|
||||
.category-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adversaries-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adversaries-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px dashed light-dark(@dark-blue-50, @beige-50);
|
||||
border-radius: 3px;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.add-feature-btn {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.window-content {
|
||||
.dialog-header {
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
h1 {
|
||||
font-family: @font-subtitle;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.window-content {
|
||||
.dialog-header {
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
h1 {
|
||||
font-family: @font-subtitle;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
styles/less/sheets-settings/index.less
Normal file
7
styles/less/sheets-settings/index.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import './header.less';
|
||||
@import './adversary-settings/sheet.less';
|
||||
@import './adversary-settings/experiences.less';
|
||||
@import './adversary-settings/features.less';
|
||||
|
||||
@import './environment-settings/features.less';
|
||||
@import './environment-settings/adversaries.less';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.tab.features {
|
||||
|
|
@ -1,80 +1,80 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.adversary-header-sheet {
|
||||
padding: 0 15px;
|
||||
padding-top: 36px;
|
||||
width: 100%;
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 8px;
|
||||
flex: 1;
|
||||
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: start;
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.adversary-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
|
||||
.description,
|
||||
.motives-and-tatics {
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
|
||||
.adversary-navigation {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.adversary-header-sheet {
|
||||
padding: 0 15px;
|
||||
padding-top: 36px;
|
||||
width: 100%;
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 8px;
|
||||
flex: 1;
|
||||
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: start;
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.adversary-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
|
||||
.description,
|
||||
.motives-and-tatics {
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
|
||||
.adversary-navigation {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,29 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.window-content {
|
||||
display: grid;
|
||||
grid-template-columns: 275px 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 15px 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.adversary-sidebar-sheet {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.adversary-header-sheet {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.window-content {
|
||||
display: grid;
|
||||
grid-template-columns: 275px 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 15px 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
|
||||
.adversary-sidebar-sheet {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.adversary-header-sheet {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,341 +1,354 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.adversary-sidebar-sheet {
|
||||
width: 275px;
|
||||
min-width: 275px;
|
||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
||||
.theme-light & {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
position: relative;
|
||||
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: 235px;
|
||||
width: 275px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.death-roll-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.death-roll {
|
||||
filter: grayscale(1);
|
||||
|
||||
.death-roll-btn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
font-size: 6rem;
|
||||
color: @beige;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 0 8px @beige;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
height: 30px;
|
||||
margin-top: 16px;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
&.threshold-value {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-legend {
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
color: light-dark(@golden, @dark-blue);
|
||||
background-color: light-dark(@dark-blue, @golden);
|
||||
padding: 3px;
|
||||
justify-self: anchor-center;
|
||||
border-radius: 0 0 3px 3px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hope-value {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: -20px;
|
||||
gap: 16px;
|
||||
margin-bottom: -10px;
|
||||
|
||||
.resources-section {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.status-bar {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-items: center;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
height: 22px;
|
||||
width: 79px;
|
||||
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
.status-value {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
padding: 0 6px;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
color: @beige;
|
||||
|
||||
input[type='number'] {
|
||||
background: transparent;
|
||||
font-size: 1.5rem;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
color: @beige;
|
||||
|
||||
&.bar-input {
|
||||
padding: 0;
|
||||
color: @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: 40px;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border: none;
|
||||
background: @dark-blue;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background: @gradient-hp;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.stress-color::-webkit-progress-value {
|
||||
background: @gradient-stress;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: @gradient-hp;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.stress-color::-moz-progress-bar {
|
||||
background: @gradient-stress;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.status-number {
|
||||
justify-items: center;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
font-size: 1.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: light-dark(transparent, @dark-blue);
|
||||
z-index: 2;
|
||||
|
||||
&.armor-slots {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items-sidebar-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.inventory-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.attack-section {
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.items-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.experience-section {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
|
||||
.experience-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
width: 250px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.experience-name {
|
||||
width: 180px;
|
||||
text-align: start;
|
||||
font-size: 14px;
|
||||
font-family: @font-body;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
.experience-value {
|
||||
height: 25px;
|
||||
width: 35px;
|
||||
font-size: 14px;
|
||||
font-family: @font-body;
|
||||
color: light-dark(@dark, @beige);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
background: url(../assets/svg/experience-shield.svg) no-repeat;
|
||||
|
||||
.theme-light & {
|
||||
background: url('../assets/svg/experience-shield-light.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-section {
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.appTheme({
|
||||
&.adversary {
|
||||
.adversary-sidebar-sheet {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
&.adversary {
|
||||
.adversary-sidebar-sheet {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.adversary-sidebar-sheet {
|
||||
width: 275px;
|
||||
min-width: 275px;
|
||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||
|
||||
.portrait {
|
||||
position: relative;
|
||||
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: 235px;
|
||||
width: 275px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.death-roll-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.death-roll {
|
||||
filter: grayscale(1);
|
||||
|
||||
.death-roll-btn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
font-size: 6rem;
|
||||
color: @beige;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 0 8px @beige;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
height: 30px;
|
||||
margin-top: 16px;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
&.threshold-value {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-legend {
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
color: light-dark(@golden, @dark-blue);
|
||||
background-color: light-dark(@dark-blue, @golden);
|
||||
padding: 3px;
|
||||
justify-self: anchor-center;
|
||||
border-radius: 0 0 3px 3px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hope-value {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: -20px;
|
||||
gap: 16px;
|
||||
margin-bottom: -10px;
|
||||
|
||||
.resources-section {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
height: 22px;
|
||||
width: 79px;
|
||||
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
.status-value {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
padding: 0 6px;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
color: @beige;
|
||||
|
||||
input[type='number'] {
|
||||
background: transparent;
|
||||
font-size: 1.5rem;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
color: @beige;
|
||||
|
||||
&.bar-input {
|
||||
padding: 0;
|
||||
color: @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: 40px;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border: none;
|
||||
background: @dark-blue;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background: @gradient-hp;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.stress-color::-webkit-progress-value {
|
||||
background: @gradient-stress;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: @gradient-hp;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.stress-color::-moz-progress-bar {
|
||||
background: @gradient-stress;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.status-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
font-size: 1.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: light-dark(transparent, @dark-blue);
|
||||
z-index: 2;
|
||||
|
||||
&.armor-slots {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items-sidebar-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.inventory-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.attack-section {
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.items-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.experience-section {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
|
||||
.experience-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
width: 250px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.experience-name {
|
||||
width: 180px;
|
||||
text-align: start;
|
||||
font-size: 14px;
|
||||
font-family: @font-body;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
.experience-value {
|
||||
height: 25px;
|
||||
width: 35px;
|
||||
font-size: 14px;
|
||||
font-family: @font-body;
|
||||
color: light-dark(@dark, @beige);
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
background: url(../assets/svg/experience-shield.svg) no-repeat;
|
||||
|
||||
.theme-light & {
|
||||
background: url('../assets/svg/experience-shield-light.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reaction-section {
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.biography {
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.features {
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
padding-top: 10px;
|
||||
height: 95%;
|
||||
height: 84%;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
// Theme header backgrounds
|
||||
.appTheme({
|
||||
|
|
@ -192,5 +193,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.character-downtime-container {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.inventory {
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
height: 80%;
|
||||
height: 73%;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
|
@ -65,6 +65,11 @@
|
|||
.currency-section {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
input {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.loadout {
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
height: 90%;
|
||||
height: 84%;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.window-content {
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
gap: 15px 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
.character-sidebar-sheet {
|
||||
grid-row: 1 / span 2;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
// Theme sidebar backgrounds
|
||||
.appTheme({
|
||||
|
|
@ -69,10 +70,11 @@
|
|||
justify-content: space-evenly;
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-items: center;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
|
|
@ -172,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;
|
||||
|
|
@ -190,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.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;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.companion {
|
||||
.companion-header-sheet {
|
||||
|
|
@ -45,7 +45,9 @@
|
|||
justify-content: center;
|
||||
|
||||
.status-number {
|
||||
justify-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
|
|
@ -85,10 +87,11 @@
|
|||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
justify-items: center;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../../utils/mixin.less';
|
||||
|
||||
// Theme header backgrounds
|
||||
.appTheme({
|
||||
&.companion {
|
||||
|
|
@ -8,15 +10,3 @@
|
|||
background: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
});
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.companion {
|
||||
// .profile {
|
||||
// height: 80px;
|
||||
// width: 80px;
|
||||
// }
|
||||
|
||||
// .temp-container {
|
||||
// position: relative;
|
||||
// top: 32px;
|
||||
// }
|
||||
}
|
||||
|
|
@ -1,140 +1,142 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.environment {
|
||||
.environment-header-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
text-align: center;
|
||||
|
||||
.profile {
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: -30px;
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-number {
|
||||
justify-items: center;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
font-size: 1.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: light-dark(transparent, @dark-blue);
|
||||
z-index: 2;
|
||||
|
||||
&.armor-slots {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: start;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.environment-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.description,
|
||||
.impulses {
|
||||
text-align: start;
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
|
||||
.environment-navigation {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.environment {
|
||||
.environment-header-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
text-align: center;
|
||||
|
||||
.profile {
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: -30px;
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.status-value {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
font-size: 1.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: light-dark(transparent, @dark-blue);
|
||||
z-index: 2;
|
||||
|
||||
&.armor-slots {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: start;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.environment-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.description,
|
||||
.impulses {
|
||||
text-align: start;
|
||||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
|
||||
.environment-navigation {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.appTheme({
|
||||
&.environment {
|
||||
24
styles/less/sheets/index.less
Normal file
24
styles/less/sheets/index.less
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@import './actors/adversary/actions.less';
|
||||
@import './actors/adversary/header.less';
|
||||
@import './actors/adversary/sheet.less';
|
||||
@import './actors/adversary/sidebar.less';
|
||||
|
||||
@import './actors/character/biography.less';
|
||||
@import './actors/character/features.less';
|
||||
@import './actors/character/header.less';
|
||||
@import './actors/character/inventory.less';
|
||||
@import './actors/character/loadout.less';
|
||||
@import './actors/character/sheet.less';
|
||||
@import './actors/character/sidebar.less';
|
||||
|
||||
@import './actors/companion/details.less';
|
||||
@import './actors/companion/header.less';
|
||||
@import './actors/companion/sheet.less';
|
||||
|
||||
@import './actors/environment/header.less';
|
||||
@import './actors/environment/sheet.less';
|
||||
|
||||
@import './items/beastform.less';
|
||||
@import './items/class.less';
|
||||
@import './items/domain-card.less';
|
||||
@import './items/feature.less';
|
||||
9
styles/less/sheets/items/beastform.less
Normal file
9
styles/less/sheets/items/beastform.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.application.sheet.daggerheart.dh-style.beastform {
|
||||
.settings.tab {
|
||||
.advantage-on-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.dh-style.class {
|
||||
.tab.settings {
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.dh-style.domain-card {
|
||||
section.tab {
|
||||
4
styles/less/items/feature.less → styles/less/sheets/items/feature.less
Executable file → Normal file
4
styles/less/items/feature.less → styles/less/sheets/items/feature.less
Executable file → Normal file
|
|
@ -1,5 +1,5 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.dh-style.feature {
|
||||
.item-sheet-header {
|
||||
388
styles/less/ui/chat/chat.less
Normal file
388
styles/less/ui/chat/chat.less
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/spacing.less';
|
||||
|
||||
.daggerheart.chat {
|
||||
&.downtime {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.downtime-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.downtime-subtitle {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.downtime-image {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.action-use-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.resource-roll {
|
||||
.reroll-message {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.roll {
|
||||
.dice-flavor {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dice-tooltip {
|
||||
.dice-rolls {
|
||||
&.duality {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
// margin: 0;
|
||||
> .roll {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
.dice-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.dice-title {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
}
|
||||
|
||||
.dice-inner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&.hope,
|
||||
&.fear {
|
||||
.dice-wrapper {
|
||||
clip-path: polygon(
|
||||
50% 0%,
|
||||
80% 10%,
|
||||
100% 35%,
|
||||
100% 70%,
|
||||
80% 90%,
|
||||
50% 100%,
|
||||
20% 90%,
|
||||
0% 70%,
|
||||
0% 35%,
|
||||
20% 10%
|
||||
);
|
||||
}
|
||||
}
|
||||
.dice-wrapper {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dice {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
max-width: unset;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.dice-value {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.hope {
|
||||
.dice-wrapper {
|
||||
background: black;
|
||||
|
||||
.dice {
|
||||
filter: brightness(0) saturate(100%) invert(79%) sepia(79%) saturate(333%)
|
||||
hue-rotate(352deg) brightness(102%) contrast(103%);
|
||||
}
|
||||
}
|
||||
|
||||
.dice-value {
|
||||
color: var(--color-dark-1);
|
||||
text-shadow: 0 0 4px white;
|
||||
}
|
||||
}
|
||||
|
||||
&.fear {
|
||||
.dice-wrapper {
|
||||
background: white;
|
||||
|
||||
.dice {
|
||||
filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(4321%)
|
||||
hue-rotate(221deg) brightness(92%) contrast(110%);
|
||||
}
|
||||
}
|
||||
|
||||
.dice-value {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 4px black;
|
||||
}
|
||||
}
|
||||
|
||||
&.advantage {
|
||||
.dice-wrapper {
|
||||
.dice {
|
||||
filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(4133%)
|
||||
hue-rotate(96deg) brightness(104%) contrast(107%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disadvantage {
|
||||
.dice-wrapper {
|
||||
.dice {
|
||||
filter: brightness(0) saturate(100%) invert(9%) sepia(78%) saturate(6903%)
|
||||
hue-rotate(11deg) brightness(93%) contrast(117%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.damage-resource {
|
||||
font-weight: 600;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dice-total {
|
||||
&.duality {
|
||||
&.hope {
|
||||
border-color: @hope;
|
||||
border-width: 3px;
|
||||
background: rgba(@hope, 0.5);
|
||||
}
|
||||
&.fear {
|
||||
border-color: @fear;
|
||||
border-width: 3px;
|
||||
background: rgba(@fear, 0.5);
|
||||
}
|
||||
&.critical {
|
||||
border-color: @critical;
|
||||
border-width: 3px;
|
||||
background: rgba(@critical, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.dice-total-value {
|
||||
.hope {
|
||||
color: @hope;
|
||||
}
|
||||
.fear {
|
||||
color: @fear;
|
||||
}
|
||||
.critical {
|
||||
color: @critical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dice-total-label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
font-variant: all-small-caps;
|
||||
margin: -@fullMargin 0;
|
||||
}
|
||||
|
||||
.target-selection {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
input[type='radio'] {
|
||||
display: none;
|
||||
&:checked + label {
|
||||
text-shadow: 0px 0px 4px #ce5937;
|
||||
}
|
||||
&:not(:checked) + label {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
&.target-selected {
|
||||
text-shadow: 0px 0px 4px #ce5937;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target-section {
|
||||
margin-top: 5px;
|
||||
|
||||
.target-container {
|
||||
display: flex;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 3px @secondaryShadow);
|
||||
border-color: gold;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.hit {
|
||||
background: @hit;
|
||||
}
|
||||
|
||||
&.miss {
|
||||
background: @miss;
|
||||
}
|
||||
|
||||
img,
|
||||
.target-save-container {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
align-self: center;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
img {
|
||||
flex: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.target-save-container {
|
||||
margin-right: 8px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: unset;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.target-inner-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-16);
|
||||
}
|
||||
|
||||
&:not(:has(.target-save-container)) .target-inner-container {
|
||||
margin-right: @hugeMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dice-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dice-result {
|
||||
.roll-damage-button,
|
||||
.damage-button,
|
||||
.duality-action {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.expanded) .dice-tooltip {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
}
|
||||
|
||||
&.domain-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.domain-card-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ability-card-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: @fullMargin;
|
||||
flex-wrap: wrap;
|
||||
|
||||
button {
|
||||
border-radius: 6px;
|
||||
background: @positive;
|
||||
border-color: black;
|
||||
flex-basis: calc(50% - 2px);
|
||||
|
||||
&:nth-of-type(n + 3) {
|
||||
margin-top: @tinyMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.ability-card-action-cost {
|
||||
margin: auto;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.inner-button {
|
||||
--button-size: 1.25rem;
|
||||
--input-height: 1.25rem;
|
||||
padding: 0 0.25rem;
|
||||
margin: 5px 1px -4px auto;
|
||||
&.inner-button-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-use-perm='false'] {
|
||||
pointer-events: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
[data-view-perm='false'] {
|
||||
> * {
|
||||
display: none;
|
||||
}
|
||||
&::after {
|
||||
content: '??';
|
||||
}
|
||||
}
|
||||
}
|
||||
54
styles/less/ui/chat/sheet.less
Normal file
54
styles/less/ui/chat/sheet.less
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.chat-message {
|
||||
.duality-modifiers,
|
||||
.duality-result,
|
||||
.dice-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
.enriched-effect {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid black;
|
||||
width: fit-content;
|
||||
padding: 0 2px 0 0;
|
||||
border-radius: 6px;
|
||||
color: @dark;
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
|
||||
&:hover {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset.daggerheart.chat {
|
||||
padding: 0;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '\f0d8';
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
}
|
||||
}
|
||||
&.expanded {
|
||||
legend:before,
|
||||
legend:after {
|
||||
content: '\f0d7';
|
||||
}
|
||||
}
|
||||
.daggerheart.chat {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
195
styles/less/ui/chat/theme-colorful.less
Normal file
195
styles/less/ui/chat/theme-colorful.less
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/spacing.less';
|
||||
|
||||
.theme-colorful {
|
||||
.chat-message.duality {
|
||||
border-color: black;
|
||||
padding: 8px 0 0 0;
|
||||
fieldset.daggerheart.chat {
|
||||
border-top-width: 0;
|
||||
display: contents;
|
||||
legend {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.message-header {
|
||||
color: var(--color-light-3);
|
||||
padding: 0 8px;
|
||||
}
|
||||
&.hope {
|
||||
background: linear-gradient(0, rgba(165, 42, 42, 0.6) 40px, rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
&.fear {
|
||||
background: linear-gradient(0, @fearBackgroundEnd, @fearBackgroundStart);
|
||||
}
|
||||
&.critical {
|
||||
background: linear-gradient(0, @criticalBackgroundEnd, @criticalBackgroundStart);
|
||||
}
|
||||
.chat-message header {
|
||||
color: var(--color-light-3);
|
||||
}
|
||||
> * {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.message-content {
|
||||
.duality-modifiers,
|
||||
.duality-result,
|
||||
.dice-title {
|
||||
display: flex;
|
||||
}
|
||||
.duality-modifiers {
|
||||
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 {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
border-bottom: 1px solid;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
margin: 0 -8px 2px;
|
||||
font-weight: unset;
|
||||
}
|
||||
.dice-result {
|
||||
.duality-modifiers {
|
||||
display: flex; // Default => display: none;
|
||||
gap: 2px;
|
||||
margin-bottom: 4px;
|
||||
.duality-modifier {
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid;
|
||||
background: var(--color-dark-6);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.dice-formula,
|
||||
> .dice-total,
|
||||
.part-header {
|
||||
display: none;
|
||||
}
|
||||
.dice-tooltip {
|
||||
grid-template-rows: 1fr;
|
||||
.wrapper {
|
||||
.tooltip-part {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 0.25rem;
|
||||
.dice {
|
||||
.dice-rolls {
|
||||
margin-bottom: 0;
|
||||
&.duality {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: unset;
|
||||
line-height: unset;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.duality-modifier {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
font-size: var(--font-size-16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.target-selection {
|
||||
label {
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
}
|
||||
.target-section {
|
||||
margin: 4px 0;
|
||||
border: 2px solid;
|
||||
margin-top: 5px;
|
||||
.dice-total {
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
border-radius: unset;
|
||||
font-size: var(--font-size-18);
|
||||
}
|
||||
}
|
||||
.dice-actions {
|
||||
justify-content: space-between;
|
||||
&.duality-alone {
|
||||
justify-content: end;
|
||||
margin-top: -20px;
|
||||
}
|
||||
> * {
|
||||
display: flex;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
font-weight: bold;
|
||||
background: var(--color-dark-1);
|
||||
padding: 4px;
|
||||
border-color: black;
|
||||
min-height: unset;
|
||||
height: 26px;
|
||||
flex: unset;
|
||||
margin: 0;
|
||||
}
|
||||
.duality-action {
|
||||
border-radius: 0 6px 0 0;
|
||||
margin-left: -8px;
|
||||
&.duality-action-effect {
|
||||
border-top-left-radius: 6px;
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
.duality-result {
|
||||
border-radius: 6px 0 0 0;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
.duality-result {
|
||||
display: flex;
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
font-weight: bold;
|
||||
background: var(--color-dark-1);
|
||||
padding: 4px;
|
||||
border-color: black;
|
||||
min-height: unset;
|
||||
height: 26px;
|
||||
flex: unset;
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
&.inner-button {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 1px black;
|
||||
font-weight: bold;
|
||||
background: var(--color-dark-1);
|
||||
border-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
styles/less/ui/combat-sidebar/combat-sidebar.less
Normal file
6
styles/less/ui/combat-sidebar/combat-sidebar.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.combat-sidebar {
|
||||
h4 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
5
styles/less/ui/combat-sidebar/combatant-controls.less
Normal file
5
styles/less/ui/combat-sidebar/combatant-controls.less
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.combat-sidebar {
|
||||
.combatant-controls {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
48
styles/less/ui/combat-sidebar/encounter-controls.less
Normal file
48
styles/less/ui/combat-sidebar/encounter-controls.less
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
.combat-sidebar {
|
||||
.encounter-controls.combat {
|
||||
justify-content: space-between;
|
||||
|
||||
.encounter-fear-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.encounter-fear-dice-container {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
.encounter-control-fear-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
|
||||
.dice {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.encounter-control-fear {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.encounter-control-counter {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.encounter-countdowns {
|
||||
color: var(--content-link-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
width: min-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
styles/less/ui/combat-sidebar/spotlight-control.less
Normal file
19
styles/less/ui/combat-sidebar/spotlight-control.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.combat-sidebar {
|
||||
.spotlight-control {
|
||||
font-size: 26px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.discrete:hover {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
&.requesting {
|
||||
filter: drop-shadow(0 0 3px gold);
|
||||
color: var(--button-hover-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
57
styles/less/ui/combat-sidebar/token-actions.less
Normal file
57
styles/less/ui/combat-sidebar/token-actions.less
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.combat-sidebar {
|
||||
.token-actions {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
|
||||
.action-tokens {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.action-token {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
--button-size: 0;
|
||||
|
||||
&.used {
|
||||
opacity: 0.5;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
background: var(--color-warm-2);
|
||||
color: var(--color-light-1);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 22px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
&.main {
|
||||
background: var(--button-hover-background-color);
|
||||
color: var(--button-hover-text-color);
|
||||
border-color: var(--button-hover-border-color);
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 3px var(--button-hover-text-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
styles/less/ui/countdown/countdown.less
Normal file
61
styles/less/ui/countdown/countdown.less
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.daggerheart.dh-style.countdown {
|
||||
fieldset {
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
|
||||
legend {
|
||||
font-family: @font-body;
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
a {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-view {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.mini-countdown-container {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 2px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
padding: 0 4px 0 0;
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
color: light-dark(@beige, @dark);
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.mini-countdown-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mini-countdown-value {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
88
styles/less/ui/countdown/sheet.less
Normal file
88
styles/less/ui/countdown/sheet.less
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../utils/mixin.less';
|
||||
|
||||
.appTheme({}, {
|
||||
&.countdown {
|
||||
.minimized-view .mini-countdown-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.daggerheart.dh-style.countdown {
|
||||
overflow: hidden;
|
||||
|
||||
.window-content {
|
||||
> div {
|
||||
height: 100%;
|
||||
|
||||
.expanded-view {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.countdowns-menu {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.flex {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.countdowns-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
|
||||
.countdown-fieldset {
|
||||
width: 340px;
|
||||
height: min-content;
|
||||
position: relative;
|
||||
|
||||
.ownership-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.countdown-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-inner-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.countdown-value-container {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
input {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
styles/less/ui/index.less
Normal file
18
styles/less/ui/index.less
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import './chat/chat.less';
|
||||
@import './chat/sheet.less';
|
||||
@import './chat/theme-colorful.less';
|
||||
|
||||
@import './combat-sidebar/combat-sidebar.less';
|
||||
@import './combat-sidebar/combatant-controls.less';
|
||||
@import './combat-sidebar/encounter-controls.less';
|
||||
@import './combat-sidebar/spotlight-control.less';
|
||||
@import './combat-sidebar/token-actions.less';
|
||||
|
||||
@import './countdown/countdown.less';
|
||||
@import './countdown/sheet.less';
|
||||
|
||||
@import './ownership-selection/ownership-selection.less';
|
||||
|
||||
@import './resources/resources.less';
|
||||
|
||||
@import './settings/settings.less';
|
||||
28
styles/less/ui/ownership-selection/ownership-selection.less
Normal file
28
styles/less/ui/ownership-selection/ownership-selection.less
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.views.ownership-selection {
|
||||
.ownership-outer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.ownership-container {
|
||||
display: flex;
|
||||
border: 2px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
padding: 0 4px 0 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
119
styles/less/ui/resources/resources.less
Normal file
119
styles/less/ui/resources/resources.less
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
:root {
|
||||
--shadow-text-stroke: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
--fear-animation: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
#resources {
|
||||
min-height: calc(var(--header-height) + 4rem);
|
||||
min-width: 4rem;
|
||||
color: #d3d3d3;
|
||||
transition: var(--fear-animation);
|
||||
header,
|
||||
.controls,
|
||||
.window-resize-handle {
|
||||
transition: var(--fear-animation);
|
||||
}
|
||||
.window-content {
|
||||
padding: 0.5rem;
|
||||
#resource-fear {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
i {
|
||||
font-size: var(--font-size-18);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3rem;
|
||||
background-color: @primary-color-fear;
|
||||
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
|
||||
color: #d3d3d3;
|
||||
flex-grow: 0;
|
||||
&.inactive {
|
||||
filter: grayscale(1) !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.controls,
|
||||
.resource-bar {
|
||||
border: 2px solid rgb(153 122 79);
|
||||
background-color: rgb(24 22 46);
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: var(--font-size-20);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.resource-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: var(--font-size-20);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0.25rem 0.5rem;
|
||||
flex: 1;
|
||||
text-shadow: var(--shadow-text-stroke);
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--fear-percent);
|
||||
max-width: 100%;
|
||||
background: linear-gradient(90deg, rgba(2, 0, 38, 1) 0%, rgba(199, 1, 252, 1) 100%);
|
||||
z-index: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
span {
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
&.fear {
|
||||
}
|
||||
}
|
||||
&.isGM {
|
||||
i {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
font-size: var(--font-size-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button[data-action='close'] {
|
||||
display: none;
|
||||
}
|
||||
&:not(:hover):not(.minimized) {
|
||||
background: transparent;
|
||||
box-shadow: unset;
|
||||
border-color: transparent;
|
||||
header,
|
||||
.controls,
|
||||
.window-resize-handle {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:has(.fear-bar) {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
128
styles/less/ui/settings/settings.less
Normal file
128
styles/less/ui/settings/settings.less
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.dh-style.setting {
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
&.two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 10px;
|
||||
|
||||
&.even {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&.start-align {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-group-field {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settings-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.settings-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
padding: 0 8px 0 0;
|
||||
|
||||
.settings-sub-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.profile {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
object-fit: cover;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
|
||||
.item-name input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.trait-array-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.trait-array-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
font-size: 12px;
|
||||
font-variant: petite-caps;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,10 +25,12 @@
|
|||
@dark-blue-10: #18162e10;
|
||||
@dark-blue-40: #18162e40;
|
||||
@dark-blue-50: #18162e50;
|
||||
@dark-blue-60: #18162e60;
|
||||
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
|
||||
@dark: #222;
|
||||
@dark-15: #22222215;
|
||||
@dark-40: #22222240;
|
||||
|
||||
@deep-black: #0e0d15;
|
||||
|
||||
|
|
@ -45,6 +47,21 @@
|
|||
@gradient-hp: linear-gradient(15deg, rgb(70, 20, 10) 0%, rgb(190, 0, 0) 42%, rgb(252, 176, 69) 100%);
|
||||
@gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
|
||||
|
||||
// TODO: Remove this colors section once new chat layout is done
|
||||
@miss: rgb(255, 0, 0);
|
||||
@hit: rgb(0, 128, 0);
|
||||
@positive: #699969;
|
||||
@secondaryShadow: gold;
|
||||
@primaryAccent: #778899;
|
||||
@hope: #ffe760;
|
||||
@fear: #0032b1;
|
||||
@fearBackgroundStart: rgba(15, 15, 97, 0.6);
|
||||
@fearBackgroundEnd: rgba(0, 0, 255, 0.6);
|
||||
@critical: #430070;
|
||||
@criticalBackgroundStart: rgba(37, 8, 37, 0.6);
|
||||
@criticalBackgroundEnd: rgba(128, 0, 128, 0.6);
|
||||
@primary-color-fear: rgba(9, 71, 179, 0.75);
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 1px @golden;
|
||||
|
|
|
|||
26
styles/less/utils/spacing.less
Normal file
26
styles/less/utils/spacing.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* Base Value */
|
||||
@distance: 8;
|
||||
|
||||
/* Margins */
|
||||
@tinyMargin: (@distance / 4) * 1px;
|
||||
@halfMargin: (@distance / 2) * 1px;
|
||||
@fullMargin: @distance * 1px;
|
||||
@mediumMargin: @distance * 1.5px; // Specific, but might be good?
|
||||
@largeMargin: @distance * 2px;
|
||||
@threeQuarterMargin: @distance * 3px; // Too specific? If not used a lot, possibly remove and just use @distance * 3px
|
||||
@hugeMargin: @distance * 4px;
|
||||
@massiveMargin: @distance * 8px;
|
||||
|
||||
/* Borders */
|
||||
@thinBorder: 1px;
|
||||
@normalBorder: 2px;
|
||||
@thickBorder: 4px;
|
||||
@normalRadius: 6px;
|
||||
|
||||
/* Padding */
|
||||
@smallPadding: 2px;
|
||||
@fullPadding: 4px;
|
||||
@largePadding: 8px;
|
||||
|
||||
/* Inputs */
|
||||
@inputSingleMinWidth: 26px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
2
styles/less/ux/index.less
Normal file
2
styles/less/ux/index.less
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import './tooltip/tooltip.less';
|
||||
@import './autocomplete/autocomplete.less';
|
||||
136
styles/less/ux/tooltip/tooltip.less
Normal file
136
styles/less/ux/tooltip/tooltip.less
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
.daggerheart.dh-style.tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
|
||||
.tooltip-image {
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-sub-title {
|
||||
margin: 0;
|
||||
color: light-dark(@dark-blue, @beige);
|
||||
}
|
||||
|
||||
.tooltip-information-section {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
|
||||
&.triple {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
&.border {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.tooltip-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
&.full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label,
|
||||
div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-chips {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.tooltip-chip {
|
||||
font-size: 18px;
|
||||
padding: 2px 4px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-tags {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.tooltip-tag {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
|
||||
.tooltip-tag-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.tooltip-tag-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-tag-label {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip-tag-description {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue