Files
fvtt-cthulhu-eternal/styles/roll.less
LeRatierBretonnien 2c25820152
All checks were successful
Release Creation / build (release) Successful in 58s
Combat/automation enhancements !
2025-11-13 13:59:02 +01:00

361 lines
7.8 KiB
Plaintext

.application.dialog.fvtt-cthulhu-eternal {
color: var(--color-dark-1);
background-color: var(--color-light-1);
button {
background-image: none;
background-color: var(--color-dark-6);
color: var(--color-light-1);
}
input,
select {
background-color: rgba(0, 0, 0, 0.1);
border-color: var(--color-dark-6);
color: var(--color-dark-2);
}
}
.fvtt-cthulhu-eternal-roll-dialog {
fieldset {
padding: 10px;
background-color: var(--color-light-1);
}
}
.dialog-modifier {
display: flex;
justify-content: center;
align-items: center;
select {
border: none;
background-color: rgba(0, 0, 0, 0.1);
color: var(--color-dark-2);
width: 4rem;
text-align: center;
}
}
.red-warning {
color: var(--color-failure);
}
.orange-warning {
color: var(--color-warning);
}
.dialog-damage {
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-secondary);
font-size: calc(var(--font-size-standard) * 2);
color: var(--color-dark-1);
}
.li-apply-wounds {
display: none;
}
&.dice-roll {
flex-direction: column;
.dice-total,
.dice-formula {
padding-top: 5px;
}
.dice-total {
margin-bottom: 5px;
}
.message-header {
font-family: var(--font-primary);
}
img {
border: 0px;
}
.intro-chat {
color: var(--color-dark-1);
border-radius: 20px;
display: flex;
flex-direction: row;
.intro-img {
padding: 5px;
width: 80px;
align-self: center;
}
.intro-right {
display: flex;
flex-direction: column;
ul {
list-style-type: none;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
li {
margin: 0 10px;
font-family: var(--font-primary);
font-size: calc(var(--font-size-standard) * 1);
}
.result-success {
color: var(--color-success);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
.result-critical-success {
color: var(--color-critical-success);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
.result-failure {
color: var(--color-failure);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
.result-critical-failure {
color: var(--color-critical-failure);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
}
.introText {
font-family: var(--font-secondary);
font-size: calc(var(--font-size-standard) * 1.2);
width: 210px;
margin-left: 20px;
}
}
}
.result {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: calc(var(--font-size-standard) * 1.2);
text-shadow: 0 0 10px var(--color-shadow-primary);
}
.chat-actions {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid var(--color-border-light-primary);
background: rgba(0, 0, 0, 0.05);
border-radius: 0 0 5px 5px;
justify-content: center;
.chat-action-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0 !important;
margin: 0 !important;
background: var(--color-dark-6);
color: var(--color-light-1);
border: 1px solid var(--color-border-light-primary);
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
line-height: 1;
&:hover {
background: var(--color-dark-5);
border-color: var(--color-border-dark);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
i {
font-size: 1rem !important;
line-height: 1;
display: block;
margin: 0;
}
}
.nudge-roll,
.damage-roll,
.healing-roll,
.opposed-roll {
display: none;
}
}
}
.opposed-roll-result {
padding: 0.5rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 5px;
font-family: var(--font-primary);
.opposed-header {
text-align: center;
margin-bottom: 0.3rem;
padding-bottom: 0.2rem;
border-bottom: 1px solid var(--color-border-light-primary);
h3 {
margin: 0;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1);
color: var(--color-dark-1);
}
}
.opposed-content {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.3rem;
}
.opposed-winner,
.opposed-loser {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0.4rem;
border-radius: 5px;
}
.opposed-winner {
background: rgba(34, 139, 34, 0.1);
border: 2px solid var(--color-success);
}
.opposed-loser {
background: rgba(220, 20, 60, 0.1);
border: 2px solid var(--color-failure);
}
.character-info {
display: flex;
align-items: center;
gap: 0.5rem;
img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-border-light-primary);
}
.character-name {
display: flex;
flex-direction: column;
gap: 0.15rem;
strong {
font-size: calc(var(--font-size-standard) * 0.75);
text-transform: uppercase;
color: var(--color-dark-2);
}
.winner-name {
font-size: calc(var(--font-size-standard) * 0.95);
font-weight: bold;
color: var(--color-success);
}
.loser-name {
font-size: calc(var(--font-size-standard) * 0.95);
font-weight: bold;
color: var(--color-failure);
}
}
}
.roll-result {
display: flex;
align-items: center;
gap: 0.3rem;
.roll-value {
font-size: calc(var(--font-size-standard) * 1.2);
font-weight: bold;
font-family: var(--font-title);
}
.critical-badge {
padding: 0.15rem 0.3rem;
border-radius: 3px;
font-size: calc(var(--font-size-standard) * 0.7);
font-weight: bold;
text-transform: uppercase;
background: var(--color-critical-success);
color: white;
}
}
.winner-result .roll-value {
color: var(--color-success);
}
.loser-result .roll-value {
color: var(--color-failure);
}
.versus-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0;
font-size: calc(var(--font-size-standard) * 0.85);
font-weight: bold;
color: var(--color-dark-2);
i {
font-size: calc(var(--font-size-standard) * 0.9);
}
}
.chat-actions {
display: flex;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem;
margin-top: 0.3rem;
border-top: 1px solid var(--color-border-light-primary);
background: rgba(0, 0, 0, 0.05);
border-radius: 0 0 5px 5px;
.chat-action-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0 !important;
margin: 0 !important;
background: var(--color-dark-6);
color: var(--color-light-1);
border: 1px solid var(--color-border-light-primary);
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
line-height: 1;
&:hover {
background: var(--color-dark-5);
border-color: var(--color-border-dark);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
i {
font-size: 1rem !important;
line-height: 1;
display: block;
margin: 0;
}
}
}
}