cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 04:44:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Feature] Redesign group roll dialog (#1824)

Browse source 
* Redesign group roll dialog

* Style and restore aid modifiers

* Move successful buttons to inner result

* Localize and finish dialog

* Remove empty line

* Fix error and remove old styles

* Make icon pop a tiny bit better

* Fix advantage/disadvantage
This commit is contained in:
Carlos Fernandez 2026-04-26 04:43:10 -04:00 • committed by GitHub
parent 6d09c5504d
commit cc822856e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 640 additions and 795 deletions
Download patch file Download diff file Expand all files Collapse all files

46
styles/less/dialog/group-roll-dialog/_common.less Normal file
View file

@ -0,0 +1,46 @@
h1 {
color: light-dark(@dark-blue, @golden);
font-family: var(--dh-font-subtitle);
font-size: var(--font-size-24);
text-align: center;
font-weight: 700;
}
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
View file

@ -0,0 +1,8 @@
.daggerheart.dialog.dh-style.views.group-roll-dialog {
.window-content {
@import "./_common.less";
}
}
@import "./initialization.less";
@import "./main.less";

95
styles/less/dialog/group-roll-dialog/initialization.less
View file

@ -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;

35
styles/less/dialog/group-roll-dialog/leader.less
View file

@ -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
View 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: var(--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;
}
}
}

265
styles/less/dialog/group-roll-dialog/sheet.less
View file

@ -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;
}
}

50
styles/less/dialog/group-roll/group-roll.less
View file

@ -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%;
}
}

6
styles/less/dialog/index.less
View file

@ -31,14 +31,10 @@
@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';