uberwald/fvtt-hamalron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity
Files
3b2f742ef5699f215367638e118302c5ee3811a1
fvtt-hamalron/styles/roll.less
T
uberwald 6943a1f429 fix: 4 bugs post-review (JSON, rangMagie, GM guard, inline styles) 
- Trailing comma dans fr.json qui cassait le parsing JSON (critique)
- RANG_MAGICIEN utilisait val.name au lieu de val.label
- Bouton tirage MJ accessible aux non-GM (ajout guard game.user.isGM)
- style='flex:1' et style='display:none' externalisés dans roll.less
2026-07-10 23:13:05 +02:00

465 lines
10 KiB
Plaintext
Raw Blame History

.application.dialog.fvtt-hamalron {
color: var(--color-dark-1);
background-color: var(--color-light-1);
button {
background-image: none;
background-color: var(--color-dark-6);
color: #ffffff;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
input,
select {
text-align: left;
background-color: rgba(0, 0, 0, 0.1);
border-color: var(--color-dark-6);
color: var(--color-dark-2);
}
}
.fvtt-hamalron-roll-dialog {
fieldset {
padding: 6px;
background-color: var(--color-light-1);
}
.dialog-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0;
.actor-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 0.25rem;
.actor-portrait {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--color-dark-6);
object-fit: cover;
}
.actor-name {
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 0.9);
font-weight: bold;
color: var(--color-dark-1);
}
}
.competence-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.25rem 0.5rem;
h3 {
margin: 0;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1);
color: var(--title-color);
white-space: nowrap;
}
.competence-details {
display: flex;
gap: 0.5rem;
font-size: calc(var(--font-size-standard) * 0.85);
.competence-symbole,
.competence-niveau {
padding: 0.25rem 0.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
font-weight: 500;
}
}
}
}
.tarot-hand {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 0.5rem;
padding: 0.25rem;
min-height: 90px;
.tarot-card-select {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.25rem;
border: 2px solid transparent;
border-radius: 0.35rem;
background-color: rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
border-color: var(--color-dark-5);
transform: translateY(-2px) scale(1.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: 10;
}
&.selected {
background-color: rgba(100, 150, 255, 0.2);
border-color: var(--color-success);
box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
}
&.success-card {
border: 3px solid #ffd700;
background: linear-gradient(
135deg,
rgba(255, 215, 0, 0.1) 0%,
rgba(255, 223, 0, 0.2) 100%
);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
&:hover {
border-color: #ffed4e;
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}
&.selected {
border-color: #ffd700;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}
}
.success-indicator {
position: absolute;
top: 2px;
right: 2px;
color: #ffd700;
font-size: 1rem;
text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
animation: pulse-gold 2s ease-in-out infinite;
}
img {
width: 50px;
height: auto;
border-radius: 0.25rem;
border: 1px solid var(--color-dark-6);
}
.card-name {
font-size: calc(var(--font-size-standard) * 0.75);
text-align: center;
line-height: 1.1;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-values {
font-size: calc(var(--font-size-standard) * 0.7);
text-align: center;
color: var(--color-dark-3);
font-weight: bold;
margin-top: 0.1rem;
}
}
p {
grid-column: 1 / -1;
text-align: center;
color: var(--color-dark-5);
font-style: italic;
margin: 1rem 0;
}
}
.dialog-result {
.total-display {
display: flex;
justify-content: center;
align-items: center;
gap: 0.1rem;
padding: 0.1rem;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1.1);
font-weight: bold;
#competence-modifier {
color: var(--color-dark-1);
}
#card-value-display {
color: var(--color-success);
}
#total-value {
padding: 0.1rem 0.2rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.35rem;
color: var(--title-color);
min-width: 2.1rem;
text-align: center;
}
}
.difficulty-info {
text-align: center;
font-size: calc(var(--font-size-standard) * 0.9);
color: var(--color-dark-2);
margin-top: 0.1rem;
padding: 0.1rem 0;
#target-score {
font-weight: bold;
color: var(--color-dark-1);
}
}
}
.difficulty-row {
display: flex;
align-items: center;
gap: 4px;
.difficulty-select-input {
flex: 1;
}
.draw-difficulty-btn {
padding: 4px 10px;
background: #2a2a4a;
color: #e0e0e0;
border: 1px solid #555;
border-radius: 4px;
cursor: pointer;
&:hover { background: #3a3a6a; border-color: #e94560; }
}
}
.drawn-card-info {
margin-top: 4px;
font-size: 12px;
color: #e94560;
font-style: italic;
&#drawn-card-info { display: none; }
}
}
.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: 10rem;
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);
}
.item-to-chat {
h2 {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 4px;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1.4);
color: var(--title-color);
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
.tarot-spacing {
margin-top: 0.5rem;
}
li {
margin: 0 10px;
font-family: var(--font-primary);
font-size: calc(var(--font-size-standard) * 1);
p {
margin: 0;
}
}
}
.tarot-item-img {
margin-top: 0.5rem;
}
}
.flavor-text-damage {
font-family: var(--font-secondary);
font-size: calc(var(--font-size-standard) * 1.2);
color: var(--color-dark-2);
margin-top: 0px;
align-items: center;
.chat-damage-type {
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.5rem;
}
h2 {
text-align: center;
margin-top: 4px;
margin-left: 4px;
margin-bottom: 0px;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1.1);
color: var(--title-color);
}
}
&.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;
h2 {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 4px;
font-family: var(--font-title);
font-size: calc(var(--font-size-standard) * 1.4);
color: var(--title-color);
}
.intro-img {
padding: 4px;
max-width: 80px;
min-width: 80px;
align-self: top;
text-align: 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);
}
.chat-roll-label {
margin-right: 2rem;
}
.chat-results-spacing {
margin-bottom: 0.5rem;
}
.nudge-roll {
font-size: calc(var(--font-size-standard) * 1);
margin-left: 4rem;
display: none;
}
.result-unknown {
color: var(--color-dark-2);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
.result-success {
color: var(--color-success);
font-family: var(--font-title);
font-size: var(--font-size-result);
}
.result-satanic-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-fiendish-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);
}
}
@keyframes pulse-gold {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
Reference in New Issue View Git Blame Copy Permalink