mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-05 20:34:15 +02:00
Merged with main
This commit is contained in:
WBHarry
commit
d78927d0c2
275 changed files with 5076 additions and 4132 deletions
|
|
@ -43,7 +43,7 @@
|
|||
text-align: center;
|
||||
font-size: var(--font-size-16);
|
||||
margin: 0 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
.hybrid-data {
|
||||
padding: 0 2px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
gap: 4px;
|
||||
|
||||
.trait-card {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
opacity: 0.4;
|
||||
|
|
@ -114,9 +114,6 @@
|
|||
|
||||
.card-preview-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-preview-container {
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +203,7 @@
|
|||
height: 16px;
|
||||
width: 110px;
|
||||
min-height: unset;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
color: light-dark(@beige, @beige);
|
||||
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
|
||||
|
||||
|
|
@ -233,7 +230,7 @@
|
|||
.suggested-trait-container {
|
||||
width: 56px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
|
@ -348,7 +345,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
|
||||
.nav-section-text {
|
||||
|
|
@ -386,7 +383,7 @@
|
|||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
|
|
@ -450,7 +447,7 @@
|
|||
height: 100%;
|
||||
|
||||
.simple-equipment {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -469,7 +466,7 @@
|
|||
top: -8px;
|
||||
font-size: var(--font-size-12);
|
||||
white-space: nowrap;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: @dark;
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
border-top: 0;
|
||||
|
||||
a {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@
|
|||
|
||||
i {
|
||||
font-size: 18px;
|
||||
// color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
.mark-container {
|
||||
cursor: pointer;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 1px;
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
width: 100%;
|
||||
|
||||
.chip-inner-container {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 4px;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.label {
|
||||
font-style: normal;
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.label {
|
||||
font-style: normal;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
.activity-marker {
|
||||
font-size: 0.5rem;
|
||||
flex: none;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
.activity-selected-marker {
|
||||
font-size: var(--font-size-14);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
}
|
||||
|
||||
.refreshable-container {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
|
|||
44
styles/less/dialog/group-roll-dialog/_common.less
Normal file
44
styles/less/dialog/group-roll-dialog/_common.less
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
h1 {
|
||||
color: @color-text-emphatic;
|
||||
font: 700 var(--font-size-24) var(--dh-font-subtitle);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
--bar-color: light-dark(@dark-blue, @golden);
|
||||
color: light-dark(@dark, @beige);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: var(--spacer-8);
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bar-color) 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--bar-color) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
img.portrait {
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
8
styles/less/dialog/group-roll-dialog/index.less
Normal file
8
styles/less/dialog/group-roll-dialog/index.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.window-content {
|
||||
@import "./_common.less";
|
||||
}
|
||||
}
|
||||
|
||||
@import "./initialization.less";
|
||||
@import "./main.less";
|
||||
|
|
@ -1,62 +1,59 @@
|
|||
.theme-light .daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.initialization-container .members-container .member-container {
|
||||
.member-name {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.initialization-container {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
|
||||
.member-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
position: absolute;
|
||||
padding: 0 2px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
margin-top: 4px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
.initialization-container.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.main-roll {
|
||||
margin-top: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--color-form-hint);
|
||||
line-height: 1;
|
||||
padding: var(--spacer-8) 0;
|
||||
font-family: var(--dh-font-body);
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
|
||||
.member-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
height: unset;
|
||||
padding: 4px 8px;
|
||||
gap: var(--spacer-8);
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:not(.inactive) {
|
||||
background: @golden-bg;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
color: light-dark(@dark, @beige);
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
.daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.main-character-outer-container {
|
||||
&.inactive {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-character-container {
|
||||
.character-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
.character-data {
|
||||
padding-left: 0.75rem;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
font-size: var(--font-size-18);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
273
styles/less/dialog/group-roll-dialog/main.less
Normal file
273
styles/less/dialog/group-roll-dialog/main.less
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
.daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.group-roll.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
a.roll-button {
|
||||
&:hover {
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0 0 3px @golden-90);
|
||||
}
|
||||
}
|
||||
|
||||
.aiding-members {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
gap: 6px;
|
||||
.tag.failure,
|
||||
.tag.success {
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
min-width: 3ch;
|
||||
}
|
||||
|
||||
.tag.success {
|
||||
border-color: @green;
|
||||
background: @green-10;
|
||||
color: @green;
|
||||
}
|
||||
|
||||
.tag.failure {
|
||||
border-color: @red;
|
||||
background: @red-10;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.with-result {
|
||||
border-radius: 5px;
|
||||
background: var(--duality-bg);
|
||||
color: var(--color-light-2);
|
||||
|
||||
&.hope {
|
||||
--duality-text-color: @golden;
|
||||
--duality-bg: url(../assets/parchments/dh-parchment-hope.png);
|
||||
}
|
||||
|
||||
&.fear {
|
||||
--duality-text-color: @chat-blue;
|
||||
--duality-bg: url(../assets/parchments/dh-parchment-fear.png);
|
||||
}
|
||||
|
||||
&.critical {
|
||||
--duality-text-color: @chat-purple;
|
||||
--duality-bg: url(../assets/parchments/dh-parchment-critical.png);
|
||||
}
|
||||
|
||||
.duality-label {
|
||||
font-family: var(--dh-font-subtitle);
|
||||
color: var(--duality-text-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.member-roll-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-height: 3.375rem;
|
||||
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.name-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
}
|
||||
.trait {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
select {
|
||||
--input-height: 2em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.item-tags {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
button {
|
||||
--button-text-color: @color-text-primary;
|
||||
--button-size: 1.5em;
|
||||
padding: 0 var(--spacer-4);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.roll-button.initial-roll {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
margin-right: 2px; /** makes hover look a bit nicer */
|
||||
}
|
||||
|
||||
.with-result {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.roll-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
min-height: 3rem;
|
||||
|
||||
.duality-label {
|
||||
font-size: var(--font-size-15);
|
||||
|
||||
.unused-damage {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.with {
|
||||
font-size: var(--font-size-10);
|
||||
}
|
||||
}
|
||||
|
||||
.roll-dice-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
|
||||
.roll-dice {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dice-label {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
paint-order: stroke fill;
|
||||
-webkit-text-stroke: 2px black;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-operator {
|
||||
font-size: var(--font-size-18);
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.roll-value {
|
||||
font-size: var(--font-size-16);
|
||||
padding: 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-direction: column;
|
||||
button {
|
||||
color: var(--medium-red);
|
||||
&[data-success=true] {
|
||||
color: var(--green);
|
||||
}
|
||||
&.active {
|
||||
text-shadow: 0 0 1px light-dark(@dark-80, @beige-80);
|
||||
}
|
||||
&.inactive {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-roll-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-12);
|
||||
padding: 6px 12px;
|
||||
margin-top: 8px;
|
||||
|
||||
&.empty {
|
||||
color: light-dark(@dark-blue-90, @beige-80);
|
||||
border-radius: 3px;
|
||||
justify-content: center;
|
||||
border: 1px dashed light-dark(@dark-blue-90, @beige-80);
|
||||
text-align: center;
|
||||
height: 3.25rem;
|
||||
font-family: @font-body;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-image: linear-gradient(90deg, transparent 0%, var(--duality-text-color) 50%, transparent 100%);
|
||||
margin-block: var(--spacer-4);
|
||||
}
|
||||
|
||||
.modifiers .item-tags {
|
||||
min-height: calc(2px + 1.1875rem);
|
||||
}
|
||||
|
||||
.total {
|
||||
.label {
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
.duality-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacer-4);
|
||||
.value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.finish-container {
|
||||
margin-top: 16px;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.finish-button {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
.daggerheart.dialog.dh-style.views.group-roll-dialog {
|
||||
.team-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.team-member-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
.member-data {
|
||||
padding-left: 0.75rem;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
font-size: var(--font-size-18);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roll-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.roll-title {
|
||||
font-size: var(--font-size-20);
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&.hope,
|
||||
&.fear,
|
||||
&.critical {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.hope {
|
||||
--text-color: @golden;
|
||||
}
|
||||
|
||||
&.fear {
|
||||
--text-color: @chat-blue;
|
||||
}
|
||||
|
||||
&.critical {
|
||||
--text-color: @chat-purple;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--text-color);
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, light-dark(@dark-blue, @golden) 100%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(90deg, light-dark(@dark-blue, @golden) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.roll-tools {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0 0 8px var(--golden));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roll-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.hope {
|
||||
--text-color: @golden;
|
||||
--bg-color: @golden-40;
|
||||
}
|
||||
|
||||
&.fear {
|
||||
--text-color: @chat-blue;
|
||||
--bg-color: @chat-blue-40;
|
||||
}
|
||||
|
||||
&.critical {
|
||||
--text-color: @chat-purple;
|
||||
--bg-color: @chat-purple-40;
|
||||
}
|
||||
|
||||
.duality-label {
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-20);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
.unused-damage {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-dice-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.roll-dice {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dice-label {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
paint-order: stroke fill;
|
||||
-webkit-text-stroke: 2px black;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-operator {
|
||||
font-size: var(--font-size-24);
|
||||
}
|
||||
|
||||
.roll-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-total {
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-success-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.roll-success-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-success-modifier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
gap: 2px;
|
||||
font-size: var(--font-size-20);
|
||||
padding: 0px 4px;
|
||||
|
||||
&.success {
|
||||
background: @green-10;
|
||||
color: @green;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
background: @red-10;
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-18);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-roll-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-20);
|
||||
|
||||
.group-roll-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.finish-container {
|
||||
margin-top: 16px;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.finish-button {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.application.daggerheart.group-roll {
|
||||
fieldset.one-column {
|
||||
min-width: 500px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.actor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.actor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.actor-check-info {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
max-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.tooltip-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
img {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
opacity: 0.4;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
@import './attribution/sheet.less';
|
||||
@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 './level-up/footer.less';
|
||||
@import './level-up/index.less';
|
||||
|
||||
@import './resource-dice/sheet.less';
|
||||
|
||||
|
|
@ -29,16 +24,10 @@
|
|||
|
||||
@import './multiclass-choice/sheet.less';
|
||||
|
||||
@import './reroll-dialog/sheet.less';
|
||||
|
||||
@import './group-roll/group-roll.less';
|
||||
|
||||
@import './tag-team-dialog/initialization.less';
|
||||
@import './tag-team-dialog/sheet.less';
|
||||
|
||||
@import './group-roll-dialog/initialization.less';
|
||||
@import './group-roll-dialog/leader.less';
|
||||
@import './group-roll-dialog/sheet.less';
|
||||
@import './group-roll-dialog/index.less';
|
||||
|
||||
@import './image-select/sheet.less';
|
||||
|
||||
|
|
|
|||
6
styles/less/dialog/level-up/index.less
Normal file
6
styles/less/dialog/level-up/index.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import './navigation-container.less';
|
||||
@import './selections-container.less';
|
||||
@import './summary-container.less';
|
||||
@import './tiers-container.less';
|
||||
@import './footer.less';
|
||||
@import './sheet.less';
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
a,
|
||||
span {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,7 @@
|
|||
|
||||
.daggerheart.levelup {
|
||||
.levelup-selections-container {
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
max-height: 500px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
|
||||
.achievement-experience-cards {
|
||||
display: flex;
|
||||
|
|
@ -45,20 +40,22 @@
|
|||
|
||||
.levelup-card-selection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
height: 190px;
|
||||
align-items: stretch;
|
||||
|
||||
.card-preview-container {
|
||||
height: 100%;
|
||||
height: 190px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.levelup-domains-selection-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
height: 100%;
|
||||
gap: 4px;
|
||||
|
||||
.levelup-domain-selection-container {
|
||||
display: flex;
|
||||
|
|
@ -66,6 +63,8 @@
|
|||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 93px;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -74,16 +73,20 @@
|
|||
|
||||
.levelup-domain-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
top: 4px;
|
||||
background: grey;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
padding: 2px 12px;
|
||||
z-index: 2;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 124px;
|
||||
object-fit: cover;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
&.svg {
|
||||
filter: @beige-filter;
|
||||
|
|
@ -92,17 +95,18 @@
|
|||
|
||||
.levelup-domain-selected {
|
||||
position: absolute;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
font-size: var(--font-size-48);
|
||||
border: 2px solid @golden;
|
||||
font-size: var(--font-size-24);
|
||||
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);
|
||||
background: @dark-golden;
|
||||
color: @golden;
|
||||
top: 10px;
|
||||
z-index: 2;
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@
|
|||
});
|
||||
|
||||
.daggerheart.levelup {
|
||||
.window-content {
|
||||
max-height: 960px;
|
||||
.tab.active {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
|
||||
div[data-application-part='form'] {
|
||||
|
|
@ -22,15 +23,13 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
section {
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 20px 8px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 20px 8px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.levelup-footer {
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@
|
|||
.levelup-summary-container {
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
max-height: 700px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
.with-scroll-shadows();
|
||||
|
||||
.level-achievements-container,
|
||||
.level-advancements-container {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
width: 120px;
|
||||
height: 120px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.selected {
|
||||
background: light-dark(@dark-blue-40, @golden-40);
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-style: italic;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,125 +0,0 @@
|
|||
.daggerheart.dialog.dh-style.views.reroll-dialog {
|
||||
.window-content {
|
||||
max-width: 648px;
|
||||
}
|
||||
|
||||
.reroll-outer-container {
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dices-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dice-outer-container {
|
||||
width: 300px;
|
||||
|
||||
legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.dice-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
.result-container {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.375rem;
|
||||
opacity: 0.8;
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
filter: drop-shadow(0 0 3px @golden);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
mask: var(--svg-die) no-repeat center;
|
||||
mask-size: contain;
|
||||
background: linear-gradient(139.01deg, #efe6d8 3.51%, #372e1f 96.49%);
|
||||
}
|
||||
|
||||
&.d4:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d4.svg);
|
||||
}
|
||||
&.d6:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d6.svg);
|
||||
}
|
||||
&.d8:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d8.svg);
|
||||
}
|
||||
&.d10:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d10.svg);
|
||||
}
|
||||
&.d12:before {
|
||||
--svg-die: url('../assets/icons/dice/default/d12.svg');
|
||||
}
|
||||
&.d20:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d20.svg);
|
||||
}
|
||||
|
||||
.to-reroll-result {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
gap: 2px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
height: 12px;
|
||||
line-height: 0px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
line-height: 12px;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: var(--font-size-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../utils/mixin.less';
|
||||
|
||||
.theme-light .daggerheart.dialog.dh-style.views.tag-team-dialog {
|
||||
.initialization-container .members-container .member-container {
|
||||
.member-name {
|
||||
|
|
@ -7,39 +9,75 @@
|
|||
}
|
||||
|
||||
.daggerheart.dialog.dh-style.views.tag-team-dialog {
|
||||
.initialization-container {
|
||||
.initialization-container.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacer-4);
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
// Force 3 columns for 5 -> 6 players
|
||||
&:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
.member-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid @color-border;
|
||||
overflow: hidden;
|
||||
height: 11.5rem;
|
||||
width: 122px;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.4;
|
||||
border-color: light-dark(@dark-blue-40, @golden-40);
|
||||
img {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.member-name {
|
||||
--shadow-color: light-dark(white, black);
|
||||
position: absolute;
|
||||
padding: 0 2px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
margin-top: 4px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 4rem;
|
||||
padding: 5rem 4px var(--spacer-8) 4px;
|
||||
text-align: center;
|
||||
|
||||
color: @color-text-primary;
|
||||
text-shadow: 1px 1px 2px var(--shadow-color), 0 0 10px var(--shadow-color);
|
||||
.smooth-gradient-ease-in-out(background-image, to bottom, var(--shadow-color), 100%);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.leader-mark {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
text-shadow: var(--shadow-text-stroke), 0 0 20px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
.daggerheart.dialog.dh-style.views.tag-team-dialog {
|
||||
.daggerheart.dialog.dh-style.views.tag-team-dialog .window-content {
|
||||
h1 {
|
||||
color: @color-text-emphatic;
|
||||
font: 700 var(--font-size-24) var(--dh-font-subtitle);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
|
@ -36,7 +42,7 @@
|
|||
img {
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
|
|
@ -58,7 +64,7 @@
|
|||
.roll-title {
|
||||
font-size: var(--font-size-20);
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -66,7 +72,7 @@
|
|||
|
||||
&::before,
|
||||
&::after {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
|
|
@ -188,6 +194,7 @@
|
|||
|
||||
.roll-selection-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.select-roll-button {
|
||||
margin-top: 8px;
|
||||
|
|
@ -196,7 +203,7 @@
|
|||
justify-content: center;
|
||||
|
||||
i {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
font-size: 48px;
|
||||
|
||||
&.inactive {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@
|
|||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.label {
|
||||
font-style: normal;
|
||||
|
|
|
|||
|
|
@ -2,24 +2,22 @@
|
|||
@import '../utils/fonts.less';
|
||||
|
||||
.dh-style {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
textarea,
|
||||
file-picker,
|
||||
.input[contenteditable] {
|
||||
background: light-dark(transparent, transparent);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 30px @soft-shadow;
|
||||
backdrop-filter: blur(9.5px);
|
||||
-webkit-backdrop-filter: blur(9.5px);
|
||||
outline: 2px solid transparent;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
color: @input-color-text;
|
||||
border: 1px solid @input-color-border;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::placeholder {
|
||||
color: light-dark(@dark-40, @beige-50);
|
||||
color: @color-text-subtle;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -30,7 +28,7 @@
|
|||
&:focus[type='number'] {
|
||||
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(@dark, @beige);
|
||||
outline: 2px solid @input-color-border;
|
||||
}
|
||||
|
||||
&:disabled[type='text'],
|
||||
|
|
@ -47,7 +45,7 @@
|
|||
.input[contenteditable] {
|
||||
cursor: var(--cursor-text);
|
||||
&:empty:before {
|
||||
color: light-dark(@dark-40, @beige-50);
|
||||
color: @color-text-subtle;
|
||||
content: attr(placeholder);
|
||||
}
|
||||
}
|
||||
|
|
@ -96,11 +94,9 @@
|
|||
|
||||
textarea {
|
||||
color: light-dark(@dark, @beige);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
button:where(:not(.plain, color-picker *, file-picker *)) {
|
||||
background: light-dark(transparent, @golden);
|
||||
border: 1px solid light-dark(@dark-blue, @dark-blue);
|
||||
color: light-dark(@dark-blue, @dark-blue);
|
||||
|
|
@ -109,7 +105,7 @@
|
|||
|
||||
&:hover {
|
||||
background: light-dark(@light-black, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
&.glow {
|
||||
|
|
@ -130,7 +126,7 @@
|
|||
|
||||
&.reverted {
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
border: 1px solid light-dark(@dark, transparent);
|
||||
&:hover {
|
||||
background: light-dark(transparent, @golden);
|
||||
|
|
@ -177,7 +173,7 @@
|
|||
height: inherit;
|
||||
.tag {
|
||||
padding: 0.3rem 0.5rem;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
background-color: light-dark(@dark-blue-10, @golden-40);
|
||||
border-radius: 3px;
|
||||
transition: 0.13s ease-out;
|
||||
|
|
@ -251,15 +247,23 @@
|
|||
|
||||
a:hover,
|
||||
a.active {
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px light-dark(@dark-blue, @golden);
|
||||
text-shadow: 0 0 1px currentColor, 0 0 1px currentColor, 0 0 8px light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
file-picker, color-picker {
|
||||
> input[type=text] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
backdrop-filter: unset;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
border-color: @color-fieldset-border;
|
||||
|
||||
&.glassy {
|
||||
background-color: light-dark(@dark-blue-10, @golden-10);
|
||||
|
|
@ -268,8 +272,9 @@
|
|||
legend {
|
||||
padding: 2px 12px;
|
||||
border-radius: 3px;
|
||||
background-color: light-dark(@dark-blue, @golden);
|
||||
background-color: @color-fieldset-border;
|
||||
color: light-dark(@beige, @dark-blue);
|
||||
margin-bottom: var(--spacer-4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -278,7 +283,7 @@
|
|||
}
|
||||
|
||||
&.fit-height {
|
||||
height: 95%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.flex {
|
||||
|
|
@ -346,7 +351,7 @@
|
|||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.with-icon {
|
||||
display: flex;
|
||||
|
|
@ -358,18 +363,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
color: light-dark(@dark, @beige);
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.child-disabled .form-group,
|
||||
select[disabled],
|
||||
|
|
@ -507,7 +500,7 @@
|
|||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: 1px solid @color-border;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
}
|
||||
|
||||
|
|
@ -515,7 +508,7 @@
|
|||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-bottom: 1px solid @color-border;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 100%);
|
||||
|
||||
&.invert {
|
||||
|
|
@ -564,7 +557,7 @@
|
|||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
|
|
@ -599,59 +592,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.application.setting.dh-style {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 8px 0 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.setting-two-values {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.25rem 0.5rem;
|
||||
|
||||
.form-group {
|
||||
justify-content: end;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hint {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-daggerheart {
|
||||
.tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
|
|
@ -804,6 +744,7 @@
|
|||
|
||||
.preview-image-container {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex-grow: 1;
|
||||
object-fit: cover;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
.tab.features {
|
||||
padding: 0 10px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -19,28 +17,36 @@
|
|||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.feature-line {
|
||||
display: grid;
|
||||
}
|
||||
.feature-line {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
h4 {
|
||||
font-weight: lighter;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
.image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.image-icon {
|
||||
font-size: 26px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
h4 {
|
||||
font-weight: lighter;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
.image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
a {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
a {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
button {
|
||||
background: light-dark(@light-black, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: 1px solid light-dark(@dark-blue, @dark-blue);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@
|
|||
}
|
||||
|
||||
.daggerheart.dh-style {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
|
||||
.hint {
|
||||
flex: 0 0 100%;
|
||||
margin: 0;
|
||||
|
|
@ -33,7 +38,7 @@
|
|||
}
|
||||
|
||||
&:before {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-family: var(--font-awesome);
|
||||
content: '\f110';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@
|
|||
position: relative;
|
||||
height: 120px;
|
||||
width: 98px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
.editor-content {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
h1 {
|
||||
font-size: var(--font-size-32);
|
||||
}
|
||||
|
|
@ -42,6 +40,11 @@
|
|||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
}
|
||||
// Fixes centering and makes it not render over scrollbar
|
||||
&:hover button.toggle:enabled {
|
||||
display: flex;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,16 +50,16 @@
|
|||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
width: fit-content;
|
||||
|
||||
.slot {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
appearance: none;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
// Theme handling
|
||||
.appTheme({
|
||||
background: @dark-blue-90;
|
||||
backdrop-filter: blur(8px);
|
||||
background: @dark-blue-c0;
|
||||
backdrop-filter: blur(7px);
|
||||
}, {
|
||||
background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
|
||||
});
|
||||
|
|
@ -43,7 +43,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
|
||||
&:hover {
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
|
||||
.daggerheart.dh-style {
|
||||
.tab-navigation {
|
||||
margin: 5px 0;
|
||||
height: 40px;
|
||||
margin: 5px 0 10px 0;
|
||||
width: 100%;
|
||||
|
||||
.navigation-container {
|
||||
|
|
@ -20,7 +19,11 @@
|
|||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.empty:not(.active) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
.palette-category-title {
|
||||
grid-column: span var(--effect-columns);
|
||||
font-weight: bold;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -38,6 +38,9 @@
|
|||
}
|
||||
|
||||
.status-effects {
|
||||
// TODO: Remove when the issue https://github.com/foundryvtt/foundryvtt/issues/14410 is resolved and Foundry handles it cleanly themselves.
|
||||
grid-template-rows: min-content;
|
||||
|
||||
.effect-control-container {
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
.tab.features {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.add-feature-btn {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
&.attack.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fieldsets-section {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.theme-light .application.daggerheart.dh-style.dialog {
|
||||
.tab.details {
|
||||
.traits-inner-container .trait-container {
|
||||
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
|
||||
.appTheme({}, {
|
||||
&.dialog.character-settings {
|
||||
.tab.details {
|
||||
.traits-inner-container .trait-container {
|
||||
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
|
||||
|
||||
div {
|
||||
filter: drop-shadow(0 0 3px @beige);
|
||||
text-shadow: 0 0 3px @beige;
|
||||
div {
|
||||
filter: drop-shadow(0 0 3px @beige);
|
||||
text-shadow: 0 0 3px @beige;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.application.daggerheart.dh-style.dialog {
|
||||
.tab.details {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
.tab.adversaries {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.add-action-btn {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
.tab.features {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.add-feature-btn {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
font-size: var(--font-size-24);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,15 +34,27 @@
|
|||
.attribution-header-label {
|
||||
font-style: italic;
|
||||
font-family: @font-body;
|
||||
color: light-dark(@chat-blue-bg, @beige-50);
|
||||
color: @color-text-subtle;
|
||||
}
|
||||
|
||||
.tab.inventory {
|
||||
.search-section {
|
||||
display: flex;
|
||||
.gold-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
.input {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.search-bar {
|
||||
position: relative;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
|
|
@ -72,22 +84,11 @@
|
|||
height: 32px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-16);
|
||||
z-index: 1;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
}
|
||||
}
|
||||
|
||||
.gold-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
.input {
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.limited {
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
.title-name {
|
||||
text-align: start;
|
||||
font-size: var(--font-size-28);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -180,9 +181,9 @@
|
|||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -194,7 +195,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
.domain {
|
||||
|
|
@ -206,7 +207,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -230,7 +231,7 @@
|
|||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
min-width: 90px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
background-color: light-dark(@dark-blue-10, @golden-40);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.tab.effects {
|
||||
|
|
@ -7,11 +8,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.tab.features {
|
||||
|
|
@ -8,11 +9,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
|
|
@ -67,11 +67,5 @@
|
|||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.adversary-navigation {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
styles/less/sheets/actors/adversary/index.less
Normal file
7
styles/less/sheets/actors/adversary/index.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import './features.less';
|
||||
@import './header.less';
|
||||
@import './sheet.less';
|
||||
@import './sidebar.less';
|
||||
@import './effects.less';
|
||||
@import './notes.less';
|
||||
|
||||
3
styles/less/sheets/actors/adversary/notes.less
Normal file
3
styles/less/sheets/actors/adversary/notes.less
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
|
@ -65,9 +65,9 @@
|
|||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.threshold-value {
|
||||
color: light-dark(@dark, @beige);
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
appearance: none;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
|
|
@ -286,13 +286,11 @@
|
|||
overflow-y: hidden;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
.with-scroll-shadows();
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.biography {
|
||||
|
|
@ -9,12 +10,15 @@
|
|||
gap: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
|
||||
padding-bottom: 10px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 20px;
|
||||
height: 100%;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.characteristics-section {
|
||||
gap: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.biography-section {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.effects {
|
||||
|
|
@ -8,11 +9,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.features {
|
||||
|
|
@ -8,11 +9,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,20 +5,12 @@
|
|||
// Theme header backgrounds
|
||||
.appTheme({
|
||||
.character-header-sheet {
|
||||
.trait {
|
||||
background: url(../assets/svg/trait-shield.svg) no-repeat;
|
||||
}
|
||||
|
||||
.character-row .domains-section img {
|
||||
filter: @golden-filter;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
.character-header-sheet {
|
||||
.trait {
|
||||
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
|
||||
}
|
||||
|
||||
.character-row .domains-section img {
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
|
|
@ -33,13 +25,19 @@
|
|||
|
||||
.name-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
gap: 6px;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
flex: 1;
|
||||
|
||||
[contenteditable],
|
||||
input {
|
||||
border: 1px solid @soft-shadow;
|
||||
background-color: light-dark(@dark-15, @soft-white-shadow);
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -65,14 +63,16 @@
|
|||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.level-button {
|
||||
|
|
@ -101,9 +101,9 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
font-size: var(--font-size-12);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.missing-header-feature {
|
||||
opacity: 0.5;
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.resource-section {
|
||||
display: flex;
|
||||
|
|
@ -168,11 +168,11 @@
|
|||
.domains-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 4px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -182,7 +182,8 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.domain {
|
||||
|
|
@ -194,7 +195,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -217,37 +218,110 @@
|
|||
|
||||
.character-traits {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
justify-content: space-between;
|
||||
max-width: 38.5rem;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
.trait {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-width: 4.375rem;
|
||||
|
||||
.trait-name {
|
||||
position: relative;
|
||||
background-color: @trait-color-bg;
|
||||
border: 1px solid @trait-color-border;
|
||||
border-radius: 3px;
|
||||
color: @color-text-emphatic;
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: 600;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
padding: 0 0.1876px 0 0.375rem;
|
||||
margin-right: 0.125rem; /* makes it center SLIGHTLY */
|
||||
text-shadow: 1px 1px 3px @color-text-shadow-contrast;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
|
||||
i {
|
||||
line-height: 17px;
|
||||
font-size: var(--font-size-10);
|
||||
.tier-mark {
|
||||
position: absolute;
|
||||
background-color: @dark-blue;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
right: calc(100% - 0.4375rem);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.marked::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: @golden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trait-value {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size-20);
|
||||
text-align: center;
|
||||
.trait-value-area {
|
||||
--color-border: @trait-color-border;
|
||||
--background: light-dark(#e8e6e3, @dark-blue);
|
||||
display: flex;
|
||||
position: relative;
|
||||
.trait-value {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-20);
|
||||
text-align: center;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.spellcasting-mark {
|
||||
position: absolute;
|
||||
border: 1px solid @color-border;
|
||||
color: @golden;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -0.375rem;
|
||||
margin-inline: auto;
|
||||
border-radius: 50%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
background: radial-gradient(190.63% 190.63% at 50% -80.63%, #18152E 70%, #4D4494 80%, #A0837E 90%, var(--color-border) 100%);
|
||||
font-size: var(--font-size-9);
|
||||
text-shadow: 0 0 2px @light-black;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.trait-name {
|
||||
color: light-dark(@dark, @beige);
|
||||
text-shadow: 0 0 8px light-dark(@dark-80, @beige-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
styles/less/sheets/actors/character/index.less
Normal file
8
styles/less/sheets/actors/character/index.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import './biography.less';
|
||||
@import './effects.less';
|
||||
@import './features.less';
|
||||
@import './header.less';
|
||||
@import './inventory.less';
|
||||
@import './loadout.less';
|
||||
@import './sheet.less';
|
||||
@import './sidebar.less';
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.inventory {
|
||||
|
|
@ -8,11 +9,9 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,13 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.character {
|
||||
.tab.loadout {
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
width: 80%;
|
||||
padding-top: 5px;
|
||||
|
||||
input {
|
||||
border-radius: 50px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 20px;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-content: center;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
font-size: var(--font-size-16);
|
||||
z-index: 1;
|
||||
color: light-dark(@dark-blue-50, @beige-50);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle-view {
|
||||
background: light-dark(@dark-blue-10, @dark-blue);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 15px;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
|
|
@ -54,7 +16,7 @@
|
|||
span {
|
||||
margin: 1px;
|
||||
width: 26px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.list-icon {
|
||||
i {
|
||||
|
|
@ -90,11 +52,9 @@
|
|||
gap: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
.application.sheet.dh-style .character-sidebar-sheet {
|
||||
width: 275px;
|
||||
min-width: 275px;
|
||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-right: 1px solid @color-border;
|
||||
|
||||
.portrait {
|
||||
position: relative;
|
||||
|
|
@ -74,62 +74,6 @@
|
|||
.death-roll-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
top: 45px;
|
||||
right: 10px;
|
||||
|
||||
.spellcast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
text-align: center;
|
||||
padding-right: 8px;
|
||||
max-width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
background: light-dark(@dark-blue-60, @dark-golden-80);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 4px double light-dark(@beige, @golden);
|
||||
color: light-dark(@beige, @golden);
|
||||
border-radius: 999px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.spellcast-label {
|
||||
font-size: var(--font-size-14);
|
||||
opacity: 0;
|
||||
margin-right: 0.3rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
i {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
align-content: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&:not(.no-label):hover {
|
||||
max-width: 300px;
|
||||
padding: 0 10px;
|
||||
border-radius: 60px;
|
||||
|
||||
.spellcast-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
|
|
@ -224,7 +168,7 @@
|
|||
appearance: none;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
|
@ -338,11 +282,11 @@
|
|||
|
||||
&:hover {
|
||||
background: light-dark(@light-black, @dark-blue);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
|
||||
h4,
|
||||
i {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -365,12 +309,12 @@
|
|||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
justify-content: center;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.armor-slot {
|
||||
cursor: pointer;
|
||||
|
|
@ -399,12 +343,12 @@
|
|||
|
||||
&:hover {
|
||||
background: light-dark(@light-black, @dark-blue);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
|
||||
.label,
|
||||
.value,
|
||||
i {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -431,7 +375,7 @@
|
|||
text-align: center;
|
||||
z-index: 2;
|
||||
color: light-dark(@dark-blue, @beige);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
|
|
@ -467,7 +411,7 @@
|
|||
appearance: none;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: light-dark(transparent, @dark-blue);
|
||||
|
|
@ -506,7 +450,7 @@
|
|||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
|
|
@ -569,9 +513,9 @@
|
|||
align-self: center;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -581,7 +525,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.threshold-value {
|
||||
color: light-dark(@dark, @beige);
|
||||
|
|
@ -605,13 +549,11 @@
|
|||
overflow-y: hidden;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.with-scroll-shadows();
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.profile {
|
||||
height: 235px;
|
||||
cursor: pointer;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
.smooth-gradient-ease-in-out(mask-image, to top, black, 2.25rem);
|
||||
}
|
||||
|
||||
.actor-name {
|
||||
|
|
@ -24,15 +24,20 @@
|
|||
margin-bottom: -30px;
|
||||
|
||||
input[type='text'] {
|
||||
backdrop-filter: none;
|
||||
border: none;
|
||||
font-family: @font-title;
|
||||
font-size: var(--font-size-24);
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid transparent;
|
||||
box-shadow: unset;
|
||||
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
|
||||
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
outline: 2px solid @color-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +68,7 @@
|
|||
display: flex;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 6px;
|
||||
|
|
@ -95,104 +100,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.level-div {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
|
|
@ -241,10 +148,8 @@
|
|||
}
|
||||
|
||||
.companion-navigation {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
styles/less/sheets/actors/companion/index.less
Normal file
4
styles/less/sheets/actors/companion/index.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import './details.less';
|
||||
@import './header.less';
|
||||
@import './sheet.less';
|
||||
@import './effects.less';
|
||||
|
|
@ -10,3 +10,16 @@
|
|||
background: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
});
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.companion {
|
||||
.window-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.environment {
|
||||
.tab.features {
|
||||
|
|
@ -8,11 +9,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
padding-bottom: 4px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.environment {
|
||||
.environment-header-sheet {
|
||||
|
|
@ -10,60 +11,82 @@
|
|||
|
||||
.profile {
|
||||
height: 235px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
cursor: pointer;
|
||||
.smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr min-content;
|
||||
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
gap: 20px;
|
||||
top: -36px;
|
||||
gap: 0 var(--spacer-12);
|
||||
padding: 0 20px;
|
||||
margin-bottom: -30px;
|
||||
margin-bottom: -26px;
|
||||
|
||||
.item-info {
|
||||
.item-name input[type='text'] {
|
||||
backdrop-filter: none;
|
||||
border: none;
|
||||
font-family: @font-title;
|
||||
font-size: var(--font-size-32);
|
||||
text-align: start;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
box-shadow: none;
|
||||
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
|
||||
padding-left: 0;
|
||||
height: 2.625rem;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
box-shadow: none;
|
||||
outline: 2px solid @color-border;
|
||||
}
|
||||
}
|
||||
|
||||
.flexrow {
|
||||
align-items: baseline;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
padding-bottom: 0;
|
||||
flex: 0;
|
||||
|
||||
.tags {
|
||||
.tag {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 0;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
font: @font-body;
|
||||
white-space: nowrap;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
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: var(--font-size-12);
|
||||
}
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.attribution-header-label {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-bottom: -6px;
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
|
||||
.attribution-header-label {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -74,14 +97,14 @@
|
|||
display: flex;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
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);
|
||||
background: light-dark(#e8e6e3, @dark-blue);
|
||||
z-index: 2;
|
||||
|
||||
&.armor-slots {
|
||||
|
|
@ -93,7 +116,7 @@
|
|||
.status-label {
|
||||
padding: 2px 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
background: light-dark(@dark-blue, @golden);
|
||||
|
||||
h4 {
|
||||
|
|
@ -105,37 +128,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
input[type='text'] {
|
||||
font-size: var(--font-size-32);
|
||||
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;
|
||||
gap: var(--spacer-8);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.environment-navigation {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.tab-navigation {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
styles/less/sheets/actors/environment/index.less
Normal file
4
styles/less/sheets/actors/environment/index.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import './features.less';
|
||||
@import './header.less';
|
||||
@import './potentialAdversaries.less';
|
||||
@import './sheet.less';
|
||||
|
|
@ -7,11 +7,8 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
|
||||
padding-bottom: 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
padding-bottom: 4px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
.appTheme({
|
||||
&.environment {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
||||
.attribution-header-label {
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
&.environment {
|
||||
|
|
@ -20,8 +16,6 @@
|
|||
.tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
&.active {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
18
styles/less/sheets/actors/npc/features.less
Normal file
18
styles/less/sheets/actors/npc/features.less
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.application.sheet.daggerheart.actor.dh-style.npc {
|
||||
.tab.features {
|
||||
&.active {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 4px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
83
styles/less/sheets/actors/npc/header.less
Normal file
83
styles/less/sheets/actors/npc/header.less
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
.application.sheet.daggerheart.actor.dh-style.npc {
|
||||
.npc-header-sheet {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.portrait {
|
||||
cursor: pointer;
|
||||
max-width: 275px;
|
||||
|
||||
img {
|
||||
height: 275px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
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: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
padding-top: var(--header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 6px 0 0 0;
|
||||
font-size: var(--font-size-32);
|
||||
text-align: start;
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
word-break: break-word;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.npc-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
styles/less/sheets/actors/npc/index.less
Normal file
3
styles/less/sheets/actors/npc/index.less
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import './sheet.less';
|
||||
@import './header.less';
|
||||
@import './features.less';
|
||||
10
styles/less/sheets/actors/npc/sheet.less
Normal file
10
styles/less/sheets/actors/npc/sheet.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.application.sheet.daggerheart.actor.dh-style.npc {
|
||||
.window-content {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
|
||||
.npc-navigation {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.party-header-sheet {
|
||||
display: flex;
|
||||
|
|
@ -9,26 +10,31 @@
|
|||
|
||||
.profile {
|
||||
height: 235px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
cursor: pointer;
|
||||
.smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
|
||||
}
|
||||
|
||||
.item-container {
|
||||
.item-name {
|
||||
padding: 0 20px;
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
margin-top: -2rem;
|
||||
z-index: 1;
|
||||
input.item-name[type='text'] {
|
||||
backdrop-filter: none;
|
||||
border: none;
|
||||
color: @color-text-emphatic;
|
||||
font-family: @font-title;
|
||||
font-size: var(--font-size-32);
|
||||
outline: 2px solid transparent;
|
||||
box-shadow: unset;
|
||||
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
box-shadow: none;
|
||||
outline: 2px solid light-dark(@dark-blue, @golden);
|
||||
}
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
width: calc(100% - 40px);
|
||||
height: 2.625rem;
|
||||
|
||||
&:hover[type='text'],
|
||||
&:focus[type='text'] {
|
||||
outline: 2px solid @color-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
4
styles/less/sheets/actors/party/index.less
Normal file
4
styles/less/sheets/actors/party/index.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import './header.less';
|
||||
@import './party-members.less';
|
||||
@import './sheet.less';
|
||||
@import './inventory.less';
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../../utils/colors.less';
|
||||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.party {
|
||||
.tab.inventory {
|
||||
|
|
@ -8,11 +9,9 @@
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
|
||||
padding: 20px 0;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 4px;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,6 @@
|
|||
@import '../../../utils/fonts.less';
|
||||
@import '../../../utils/mixin.less';
|
||||
|
||||
body.game:is(.performance-low, .noblur) {
|
||||
.application.sheet.daggerheart.actor.dh-style.party .tab.resources .actors-list .actor-resources {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
|
||||
.actor-name {
|
||||
background: light-dark(@dark-blue, @dark-golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers {
|
||||
overflow: auto;
|
||||
|
||||
|
|
@ -58,7 +48,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
|
@ -89,9 +79,9 @@ body.game:is(.performance-low, .noblur) {
|
|||
display: flex;
|
||||
gap: 4px;
|
||||
background-color: light-dark(var(--color-light-1), @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 3px;
|
||||
align-items: baseline;
|
||||
width: fit-content;
|
||||
|
|
@ -103,7 +93,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
|
||||
&.threshold-label {
|
||||
font-size: var(--font-size-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
&.threshold-value {
|
||||
|
|
@ -126,7 +116,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
width: 100%;
|
||||
z-index: 1;
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -142,9 +132,9 @@ body.game:is(.performance-low, .noblur) {
|
|||
.hope-section {
|
||||
display: flex;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 3px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -154,7 +144,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
font-size: var(--font-size-12);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -222,9 +212,9 @@ body.game:is(.performance-low, .noblur) {
|
|||
gap: 4px;
|
||||
|
||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 0 6px 6px 0;
|
||||
width: fit-content;
|
||||
min-height: 22px;
|
||||
|
|
@ -242,7 +232,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
.slot {
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -258,7 +248,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
|
||||
.traits {
|
||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -270,7 +260,7 @@ body.game:is(.performance-low, .noblur) {
|
|||
justify-content: space-between;
|
||||
gap: 3px;
|
||||
.label {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
.value {
|
||||
font-weight: 600;
|
||||
|
|
@ -280,6 +270,17 @@ body.game:is(.performance-low, .noblur) {
|
|||
}
|
||||
}
|
||||
|
||||
.actors-list.limited {
|
||||
.actor-resources {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.actor-img-frame {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.actors-dragger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@
|
|||
.tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -2,35 +2,12 @@
|
|||
|
||||
@import './actors/actor-sheet-shared.less';
|
||||
|
||||
@import './actors/adversary/actions.less';
|
||||
@import './actors/adversary/header.less';
|
||||
@import './actors/adversary/sheet.less';
|
||||
@import './actors/adversary/sidebar.less';
|
||||
@import './actors/adversary/effects.less';
|
||||
|
||||
@import './actors/character/biography.less';
|
||||
@import './actors/character/effects.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/companion/effects.less';
|
||||
|
||||
@import './actors/environment/actions.less';
|
||||
@import './actors/environment/header.less';
|
||||
@import './actors/environment/potentialAdversaries.less';
|
||||
@import './actors/environment/sheet.less';
|
||||
|
||||
@import './actors/party/header.less';
|
||||
@import './actors/party/party-members.less';
|
||||
@import './actors/party/sheet.less';
|
||||
@import './actors/party/inventory.less';
|
||||
@import './actors/adversary/index.less';
|
||||
@import './actors/character/index.less';
|
||||
@import './actors/companion/index.less';
|
||||
@import './actors/environment/index.less';
|
||||
@import './actors/npc/index.less';
|
||||
@import './actors/party/index.less';
|
||||
|
||||
@import './items/beastform.less';
|
||||
@import './items/class.less';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,5 @@
|
|||
section.tab {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,5 @@
|
|||
section.tab {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,4 +10,8 @@
|
|||
font-family: @font-body;
|
||||
color: light-dark(@chat-blue-bg, @beige-50);
|
||||
}
|
||||
|
||||
button.plain.inline-control {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
i {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.main-value {
|
||||
font-size: var(--font-size-24);
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
&.finished {
|
||||
background-color: initial;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
|
||||
a[href] {
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
a[href]:hover,
|
||||
|
|
@ -195,7 +195,7 @@ fieldset.daggerheart.chat {
|
|||
&:before,
|
||||
&:after {
|
||||
content: '\f0d8';
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-family: var(--font-awesome);
|
||||
}
|
||||
}
|
||||
&.expanded {
|
||||
|
|
|
|||
|
|
@ -60,8 +60,6 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 500px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.countdown-edit-outer-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,47 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.theme-dark {
|
||||
#interface.theme-dark {
|
||||
.daggerheart.dh-style.countdowns {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
|
||||
.window-header {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
--background: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
}
|
||||
|
||||
.daggerheart.dh-style.countdowns {
|
||||
#interface.theme-light {
|
||||
.daggerheart.dh-style.countdowns {
|
||||
--background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
.daggerheart.dh-style.countdowns {
|
||||
position: relative;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
width: 300px;
|
||||
color: @color-text-primary;
|
||||
width: 18.75rem;
|
||||
pointer-events: all;
|
||||
align-self: flex-end;
|
||||
transition: 0.3s right ease-in-out;
|
||||
|
||||
.window-title {
|
||||
font-family: @font-body;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--background);
|
||||
border-radius: 4px;
|
||||
opacity: var(--ui-fade-opacity);
|
||||
transition: opacity var(--ui-fade-duration);
|
||||
}
|
||||
|
||||
&:not(.performance-low, .noblur) {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#ui-right:has(#effects-display .effect-container) & {
|
||||
|
|
@ -30,127 +49,139 @@
|
|||
}
|
||||
|
||||
&.icon-only {
|
||||
width: 180px;
|
||||
min-width: 180px;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.window-header {
|
||||
cursor: default;
|
||||
border-bottom: 0;
|
||||
.countdowns-header,
|
||||
.countdowns-container {
|
||||
position: relative; // allow rendering over the background
|
||||
}
|
||||
|
||||
.window-content {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 16px;
|
||||
.countdowns-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
flex: 0 0 36px;
|
||||
padding: 0 0.5rem;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-size-13);
|
||||
.window-title {
|
||||
font-family: @font-body;
|
||||
flex: 1;
|
||||
}
|
||||
.header-control + .header-control {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.countdowns-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 4px var(--spacer-16) var(--spacer-16) var(--spacer-16);
|
||||
overflow: auto;
|
||||
max-height: 312px;
|
||||
|
||||
.countdowns-container {
|
||||
.countdown-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.countdown-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
&.icon-only {
|
||||
gap: 8px;
|
||||
|
||||
&.icon-only {
|
||||
gap: 8px;
|
||||
.countdown-main-container {
|
||||
.countdown-content {
|
||||
justify-content: center;
|
||||
|
||||
.countdown-main-container {
|
||||
.countdown-content {
|
||||
justify-content: center;
|
||||
|
||||
.countdown-tools {
|
||||
gap: 8px;
|
||||
}
|
||||
.countdown-tools {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-main-container {
|
||||
width: 100%;
|
||||
.countdown-main-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
img {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.countdown-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.countdown-content {
|
||||
flex: 1;
|
||||
.countdown-tools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.countdown-tools {
|
||||
.countdown-tool-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacer-12);
|
||||
}
|
||||
|
||||
.countdown-tool-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.progress-tag {
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
background-color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
|
||||
.progress-tag {
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
.countdown-tool-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.looping-container {
|
||||
position: relative;
|
||||
border: 1px solid light-dark(@dark-blue, white);
|
||||
border-radius: 6px;
|
||||
padding: 2px 4px;
|
||||
background-color: light-dark(@beige, @dark-blue);
|
||||
}
|
||||
|
||||
.countdown-tool-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
&.should-loop {
|
||||
background: light-dark(@golden, @golden);
|
||||
|
||||
.looping-container {
|
||||
position: relative;
|
||||
border: 1px solid light-dark(@dark-blue, white);
|
||||
border-radius: 6px;
|
||||
padding: 2px 4px;
|
||||
|
||||
&.should-loop {
|
||||
background: light-dark(@golden, @golden);
|
||||
|
||||
.loop-marker {
|
||||
color: light-dark(@dark-blue, @dark-blue);
|
||||
}
|
||||
.loop-marker {
|
||||
color: light-dark(@dark-blue, @dark-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.direction-marker {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
filter: drop-shadow(0 0 3px black);
|
||||
top: -3px;
|
||||
}
|
||||
.direction-marker {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
filter: drop-shadow(0 0 3px black);
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Keep incase we want to reintroduce the player pips */
|
||||
// .countdown-access-container {
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr 1fr;
|
||||
// grid-auto-rows: min-content;
|
||||
// width: 38px;
|
||||
// gap: 4px;
|
||||
|
||||
// .countdown-access {
|
||||
// height: 10px;
|
||||
// width: 10px;
|
||||
// border-radius: 50%;
|
||||
// border: 1px solid light-dark(@dark-blue, @beige-80);
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
}
|
||||
/* Keep incase we want to reintroduce the player pips */
|
||||
// .countdown-access-container {
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr 1fr;
|
||||
// grid-auto-rows: min-content;
|
||||
// width: 38px;
|
||||
// gap: 4px;
|
||||
|
||||
// .countdown-access {
|
||||
// height: 10px;
|
||||
// width: 10px;
|
||||
// border-radius: 50%;
|
||||
// border: 1px solid light-dark(@dark-blue, @beige-80);
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
.effect-container {
|
||||
position: relative;
|
||||
pointer-events: all;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 3px;
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
@import '../../utils/mixin.less';
|
||||
|
||||
.application.daggerheart.dh-style.compendium-browser {
|
||||
border: initial;
|
||||
|
|
@ -125,6 +126,7 @@
|
|||
|
||||
.form-group {
|
||||
white-space: nowrap;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
|
|
@ -168,6 +170,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
|
|
@ -195,7 +201,7 @@
|
|||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
background-color: light-dark(@dark-blue-40, @golden-40);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
.subfolder-list {
|
||||
|
|
@ -213,7 +219,7 @@
|
|||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
background-color: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -237,12 +243,11 @@
|
|||
.compendium-sidebar > .folder-list {
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
.with-scroll-shadows();
|
||||
}
|
||||
|
||||
.item-list-header,
|
||||
.item-list [data-action='expandContent'] {
|
||||
.item-list .item-info[data-action] {
|
||||
display: flex;
|
||||
|
||||
> * {
|
||||
|
|
@ -262,8 +267,8 @@
|
|||
.item-list-header {
|
||||
align-items: center;
|
||||
background-color: light-dark(@dark-15, @dark-golden-80);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 3px;
|
||||
min-height: 30px;
|
||||
font-weight: bold;
|
||||
|
|
@ -274,7 +279,7 @@
|
|||
|
||||
div[data-sort-key] {
|
||||
&:after {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-family: var(--font-awesome);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,14 +55,12 @@
|
|||
gap: 8px;
|
||||
max-height: 184px;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(#18162e, #f3c267) transparent;
|
||||
|
||||
.domain-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
|
||||
&.selectable {
|
||||
|
|
@ -78,7 +76,7 @@
|
|||
.domain-label {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
padding: 0 2px;
|
||||
color: light-dark(@dark, @beige);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
.resource-icons-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
.resource-icon-container {
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,67 @@
|
|||
@import '../../utils/colors.less';
|
||||
|
||||
.daggerheart.dh-style.setting {
|
||||
--color-form-label: @color-text-primary;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 8px 0 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.standard-form {
|
||||
gap: var(--spacer-8);
|
||||
.form-group .form-fields {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: normal;
|
||||
line-height: var(--input-height);
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.setting-two-values {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.25rem 0.5rem;
|
||||
|
||||
.form-group {
|
||||
justify-content: end;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hint {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -19,7 +80,10 @@
|
|||
&.three-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
.form-group label {
|
||||
line-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.six-columns {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
|
||||
.label {
|
||||
font-style: normal;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
--golden: #f3c267;
|
||||
--golden-10: #f3c26710;
|
||||
--golden-40: #f3c26740;
|
||||
--golden-60: #f3c26760;
|
||||
--golden-90: #f3c26790;
|
||||
--golden-bg: #f3c2671a;
|
||||
--golden-secondary: #eaaf42;
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
--dark-blue-50: #18162e50;
|
||||
--dark-blue-60: #18162e60;
|
||||
--dark-blue-90: #18162e90;
|
||||
--dark-blue-c0: #18162ec0;
|
||||
--semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
|
||||
--dark: #222222;
|
||||
|
|
@ -69,6 +71,7 @@
|
|||
--beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%);
|
||||
--bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
|
||||
|
||||
--light-white: rgba(255, 255, 255, 0.3);
|
||||
--soft-white-shadow: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--light-black: rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -83,12 +86,54 @@
|
|||
--primary-color-fear: rgba(9, 71, 179, 0.75);
|
||||
}
|
||||
|
||||
/**
|
||||
* Override core foundry color variables in theme scopes, and add some new theme specific variants.
|
||||
* These are intended to be more representative of its use case, so avoid naming these after the color.
|
||||
* Some foundry variables are heavily scoped and we need to redefine them (https://github.com/foundryvtt/foundryvtt/issues/12893)
|
||||
* Convention for the redefined ones is --dh-{element}-color-{thing}
|
||||
*/
|
||||
@scope (.theme-light) to (.themed) {
|
||||
.dh-style :scope,
|
||||
:scope.dh-style,
|
||||
.dh-style,
|
||||
.duality {
|
||||
--color-border: @dark-blue;
|
||||
--color-fieldset-border: @dark-blue;
|
||||
--color-text-emphatic: @dark-blue;
|
||||
--color-text-subtle: #555;
|
||||
|
||||
--dh-color-text-shadow-contrast: #ffffffa0;
|
||||
--dh-input-color-border: @dark;
|
||||
--dh-input-color-text: @dark;
|
||||
--dh-trait-color-bg: #b1afb6;
|
||||
--dh-trait-color-border: #8e8d96;
|
||||
}
|
||||
}
|
||||
@scope (.theme-dark) to (.themed) {
|
||||
.dh-style :scope,
|
||||
:scope.dh-style,
|
||||
.dh-style,
|
||||
.duality {
|
||||
--color-border: @golden;
|
||||
--color-fieldset-border: @golden;
|
||||
--color-text-emphatic: @golden;
|
||||
--color-text-subtle: #a29086;
|
||||
|
||||
--dh-color-text-shadow-contrast: @dark-80;
|
||||
--dh-input-color-border: @beige;
|
||||
--dh-input-color-text: @beige;
|
||||
--dh-trait-color-bg: #50433F;
|
||||
--dh-trait-color-border: #927952;
|
||||
}
|
||||
}
|
||||
|
||||
@primary-blue: var(--primary-blue, #1488cc);
|
||||
@secondary-blue: var(--secondary-blue, #2b32b2);
|
||||
|
||||
@golden: var(--golden, #f3c267);
|
||||
@golden-10: var(--golden-10, #f3c26710);
|
||||
@golden-40: var(--golden-40, #f3c26740);
|
||||
@golden-60: var(--golden-60, #f3c26760);
|
||||
@golden-90: var(--golden-90, #f3c26790);
|
||||
@golden-bg: var(--golden-bg, #f3c2671a);
|
||||
@golden-secondary: var(--golden-secondary, #eaaf42);
|
||||
|
|
@ -134,6 +179,7 @@
|
|||
@dark-blue-50: var(--dark-blue-50, #18162e50);
|
||||
@dark-blue-60: var(--dark-blue-60, #18162e60);
|
||||
@dark-blue-90: var(--dark-blue-90, #18162e90);
|
||||
@dark-blue-c0: var(--dark-blue-c0, #18162ec0);
|
||||
@semi-transparent-dark-blue: var(--semi-transparent-dark-blue, rgba(24, 22, 46, 0.33));
|
||||
|
||||
@dark: var(--dark, #222222);
|
||||
|
|
@ -155,6 +201,7 @@
|
|||
|
||||
@soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05));
|
||||
|
||||
@light-white: var(--light-white, rgba(255, 255, 255, 0.3));
|
||||
@light-black: var(--light-black, rgba(0, 0, 0, 0.3));
|
||||
@soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05));
|
||||
|
||||
|
|
@ -186,3 +233,15 @@
|
|||
box-shadow: 0 0 2px 2px @dark-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// LESS variable versions of core foundry color variables
|
||||
@color-border: var(--color-border);
|
||||
@color-fieldset-border: var(--color-fieldset-border);
|
||||
@color-text-emphatic: var(--color-text-emphatic);
|
||||
@color-text-primary: var(--color-text-primary);
|
||||
@color-text-subtle: var(--color-text-subtle);
|
||||
@color-text-shadow-contrast: var(--dh-color-text-shadow-contrast);
|
||||
@input-color-border: var(--dh-input-color-border);
|
||||
@input-color-text: var(--dh-input-color-text);
|
||||
@trait-color-bg: var(--dh-trait-color-bg);
|
||||
@trait-color-border: var(--dh-trait-color-border);
|
||||
|
|
@ -5,6 +5,11 @@
|
|||
--dh-font-title: 'Cinzel Decorative';
|
||||
--dh-font-subtitle: 'Cinzel';
|
||||
--dh-font-body: 'Montserrat';
|
||||
|
||||
/* Include missing font sizes */
|
||||
--font-size-8: 0.5rem;
|
||||
--font-size-9: 0.5625rem;
|
||||
--font-size-22: 1.375rem;
|
||||
}
|
||||
|
||||
@font-title: ~"var(--dh-font-title, 'Cinzel Decorative'), serif";
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
*/
|
||||
.appTheme(@darkRules, @lightRules) {
|
||||
// Dark theme selectors
|
||||
.themed.theme-dark .application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-dark.application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-dark .application.daggerheart.dh-style,
|
||||
.themed.theme-dark.application.daggerheart.dh-style,
|
||||
body.theme-dark .application.daggerheart,
|
||||
body.theme-dark.application.daggerheart {
|
||||
@darkRules();
|
||||
}
|
||||
|
||||
// Light theme selectors
|
||||
.themed.theme-light .application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-light.application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-light .application.daggerheart.dh-style,
|
||||
.themed.theme-light.application.daggerheart.dh-style,
|
||||
body.theme-light .application.daggerheart,
|
||||
body.theme-light.application.daggerheart {
|
||||
@lightRules();
|
||||
|
|
@ -50,14 +50,15 @@
|
|||
*/
|
||||
.dh-typography() {
|
||||
h1 {
|
||||
--dh-input-color-text: @color-text-emphatic;
|
||||
font-family: @font-title;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 input[type='text'] {
|
||||
font-family: @font-title;
|
||||
input[type='text'],
|
||||
.input[contenteditable] {
|
||||
font-family: @font-title;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
|
|
@ -114,3 +115,92 @@
|
|||
font-family: @font-body;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// A simple ease-out mask
|
||||
.smooth-gradient-ease-out(@param, @to, @destination, @length) {
|
||||
@{param}+: linear-gradient(
|
||||
@to,
|
||||
transparent 0%,
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.008 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.029 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.064 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.166 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.304 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.554 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.644 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.735 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.825 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
|
||||
@destination @length
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A simple ease in and out mask.
|
||||
* @param - the parameter to add to
|
||||
* @param - direction, such as "to top"
|
||||
* @destination - the color at the destination. The origin is always transparent
|
||||
* @length - the value at the destination
|
||||
*/
|
||||
.smooth-gradient-ease-in-out(@param, @to, @destination, @length: 100%) {
|
||||
@{param}+: linear-gradient(
|
||||
@to,
|
||||
transparent 0%,
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.081 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.155 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.225 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.353 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.471 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.647 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.71 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.775 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.845 * @length),
|
||||
rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
|
||||
@destination @length
|
||||
);
|
||||
}
|
||||
|
||||
// Scroll shadows, but only if the browser supports. At the time of writing, this doesn't work on firefox
|
||||
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
|
||||
@property --fade-start {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
|
||||
@property --fade-end {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
|
||||
@keyframes scrollfade {
|
||||
0% {
|
||||
--fade-start: 0;
|
||||
}
|
||||
10%, 100% {
|
||||
--fade-start: 12px;
|
||||
}
|
||||
0%, 90% {
|
||||
--fade-end: 12px;
|
||||
}
|
||||
100% {
|
||||
--fade-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.with-scroll-shadows() {
|
||||
animation: scrollfade;
|
||||
animation-timeline: --scrollfade;
|
||||
animation-range: entry 0% exit 100%;
|
||||
scroll-timeline: --scrollfade y;
|
||||
mask-image: linear-gradient(
|
||||
0deg,
|
||||
transparent 0%,
|
||||
black var(--fade-end),
|
||||
black calc(100% - var(--fade-start)),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@
|
|||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.group {
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-14);
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
|
|
@ -118,13 +118,13 @@
|
|||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 5px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
background: @dark-blue;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
min-height: 30px;
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
|
|||
#tooltip.bordered-tooltip {
|
||||
.tooltip-title {
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -48,9 +48,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
|
|||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.tooltip-tag {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
|
|||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
background: light-dark(@dark-blue-60, @rustic-brown-80);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
color: @color-text-emphatic;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -238,7 +238,7 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
|
|||
.tooltip-chip {
|
||||
font-size: var(--font-size-18);
|
||||
padding: 2px 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue