mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
new style for dialog roll and remove console.log debuggers (#272)
* new style for dialog roll and remove console.log debuggers * enhance advantage logic
This commit is contained in:
Murilo Brito
GitHub
parent
0add5f369e
commit
41181f19f1
50 changed files with 682 additions and 233 deletions
|
|
@ -233,81 +233,6 @@ div.daggerheart.views.multiclass {
|
|||
}
|
||||
|
||||
.roll-dialog-container {
|
||||
.disadvantage,
|
||||
.advantage {
|
||||
border: 2px solid @secondaryAccent;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&.selected {
|
||||
filter: drop-shadow(0px 0px 3px @mainShadow);
|
||||
}
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 0;
|
||||
border-radius: 50%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2px 0 2px 4px;
|
||||
padding: 12px;
|
||||
|
||||
i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roll-dialog-experience-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: @halfMargin;
|
||||
|
||||
.roll-dialog-chip {
|
||||
border: @thinBorder solid black;
|
||||
border-radius: 6px;
|
||||
min-width: calc(33% - 2px);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: @halfMargin;
|
||||
cursor: pointer;
|
||||
padding: @fullPadding;
|
||||
background: grey;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
|
||||
&.hover {
|
||||
filter: drop-shadow(0 0 3px @mainShadow);
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: green;
|
||||
|
||||
span {
|
||||
filter: drop-shadow(0 0 3px @secondaryShadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hope-container {
|
||||
display: flex;
|
||||
gap: @fullMargin;
|
||||
|
|
@ -371,28 +296,6 @@ div.daggerheart.views.multiclass {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roll-dialog-experience-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: @halfMargin;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
.experience-chip {
|
||||
opacity: 0.6;
|
||||
border-radius: 16px;
|
||||
width: calc(50% - 4px);
|
||||
white-space: nowrap;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--button-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@
|
|||
@import './less/items/domainCard.less';
|
||||
@import './less/items/class.less';
|
||||
|
||||
@import './less/dialog/dice-roll/roll-selection.less';
|
||||
|
||||
@import './less/utils/colors.less';
|
||||
@import './less/utils/fonts.less';
|
||||
|
||||
|
|
|
|||
128
styles/less/dialog/dice-roll/roll-selection.less
Normal file
128
styles/less/dialog/dice-roll/roll-selection.less
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
@import '../../utils/colors.less';
|
||||
@import '../../utils/fonts.less';
|
||||
|
||||
.application.daggerheart.dialog.dh-style.views.roll-selection {
|
||||
.roll-dialog-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.dices-section {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
justify-content: center;
|
||||
|
||||
.dice-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 120px;
|
||||
|
||||
.dice-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.dice-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 32px;
|
||||
|
||||
.label {
|
||||
font-family: @font-subtitle;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.experience-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.experience-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background: light-dark(@dark-blue-10, @golden-10);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
|
||||
.label {
|
||||
font-family: @font-body;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: light-dark(@dark-blue-40, @golden-40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modifier-container {
|
||||
.advantage-chip,
|
||||
.disadvantage-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.label {
|
||||
font-family: @font-body;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-chip {
|
||||
background: @green-10;
|
||||
color: @green;
|
||||
|
||||
&.selected {
|
||||
color: @beige;
|
||||
background: @gradient-green;
|
||||
}
|
||||
}
|
||||
|
||||
.disadvantage-chip {
|
||||
background: @red-10;
|
||||
color: @red;
|
||||
|
||||
&.selected {
|
||||
color: @beige;
|
||||
background: @gradient-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formula-label {
|
||||
font-family: @font-body;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,47 @@
|
|||
@primary-blue: #1488cc;
|
||||
@secondary-blue: #2b32b2;
|
||||
|
||||
@golden: #f3c267;
|
||||
@golden-40: #f3c26740;
|
||||
@dark-blue-40: #18162e40;
|
||||
@golden-10: #f3c26710;
|
||||
@dark-blue-10: #18162e10;
|
||||
@dark-blue-50: #18162e50;
|
||||
@golden-40: #f3c26740;
|
||||
|
||||
@red: #e54e4e;
|
||||
@red-10: #e54e4e10;
|
||||
@red-40: #e54e4e40;
|
||||
|
||||
@dark-red: #3c0000;
|
||||
@dark-red-10: #3c000010;
|
||||
@dark-red-40: #3c000040;
|
||||
|
||||
@green: #40a640;
|
||||
@green-10: #40a64010;
|
||||
@green-40: #40a64040;
|
||||
|
||||
@dark-green: #011b01;
|
||||
@dark-green-10: #011b0110;
|
||||
@dark-green-40: #011b0140;
|
||||
|
||||
@dark-blue: #18162e;
|
||||
@dark-blue-10: #18162e10;
|
||||
@dark-blue-40: #18162e40;
|
||||
@dark-blue-50: #18162e50;
|
||||
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
|
||||
@dark: #222;
|
||||
@dark-15: #22222215;
|
||||
|
||||
@deep-black: #0e0d15;
|
||||
|
||||
@beige: #efe6d8;
|
||||
@beige-15: #efe6d815;
|
||||
@beige-50: #efe6d850;
|
||||
@dark-blue: rgb(24, 22, 46);
|
||||
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
@dark: #222;
|
||||
@dark-15: #22222215;
|
||||
|
||||
@light-black: rgba(0, 0, 0, 0.3);
|
||||
@soft-shadow: rgba(0, 0, 0, 0.05);
|
||||
|
||||
@gradient-green: linear-gradient(151.21deg, @green 7.21%, @dark-green 92.79%);
|
||||
@gradient-red: linear-gradient(151.21deg, @red 7.21%, @dark-red 92.79%);
|
||||
|
||||
@gradient-hp: linear-gradient(15deg, rgb(70, 20, 10) 0%, rgb(190, 0, 0) 42%, rgb(252, 176, 69) 100%);
|
||||
@gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
*/
|
||||
.appTheme(@darkRules, @lightRules) {
|
||||
// Dark theme selectors
|
||||
.themed.theme-dark .application.sheet.dh-style,
|
||||
.themed.theme-dark.application.sheet.dh-style,
|
||||
body.theme-dark .application,
|
||||
body.theme-dark.application {
|
||||
.themed.theme-dark .application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-dark.application.daggerheart.sheet.dh-style,
|
||||
body.theme-dark .application.daggerheart,
|
||||
body.theme-dark.application.daggerheart {
|
||||
@darkRules();
|
||||
}
|
||||
|
||||
// Light theme selectors
|
||||
.themed.theme-light .application.sheet.dh-style,
|
||||
.themed.theme-light.application.sheet.dh-style,
|
||||
body.theme-light .application,
|
||||
body.theme-light.application {
|
||||
.themed.theme-light .application.daggerheart.sheet.dh-style,
|
||||
.themed.theme-light.application.daggerheart.sheet.dh-style,
|
||||
body.theme-light .application.daggerheart,
|
||||
body.theme-light.application.daggerheart {
|
||||
@lightRules();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue