326 lines
8.3 KiB
Plaintext
326 lines
8.3 KiB
Plaintext
// ============================================================
|
||
// Chat messages – Belle Époque theme
|
||
// ============================================================
|
||
|
||
@be-bordeaux: #5a0a14;
|
||
@be-gold: #8b6914;
|
||
@be-gold-light: #c8a84b;
|
||
@be-gold-border: rgba(139, 105, 20, 0.45);
|
||
@be-sepia: #3d2b1f;
|
||
@be-sepia-light: rgba(61, 43, 31, 0.06);
|
||
|
||
.malefices-chat-card {
|
||
font-size: 0.85rem;
|
||
color: @be-sepia;
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
background: rgb(218, 218, 208); // opaque pour masquer le fond parchemin du sidebar
|
||
|
||
// ── Header ──────────────────────────────────────────────
|
||
.chat-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.2rem 0.4rem;
|
||
background: linear-gradient(135deg, rgba(90,10,20,0.12), rgba(139,105,20,0.12));
|
||
border-bottom: 1px solid @be-gold-border;
|
||
|
||
.chat-actor-img {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 2px;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-actor-name {
|
||
font-family: @font-rivanna, serif;
|
||
font-size: 1.1rem;
|
||
font-weight: normal;
|
||
color: @be-bordeaux;
|
||
line-height: 1.1;
|
||
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||
flex: 1;
|
||
}
|
||
|
||
.chat-header-roll {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
padding-left: 0.4rem;
|
||
border-left: 1px solid @be-gold-border;
|
||
|
||
.chat-roll-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 2px;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-roll-name {
|
||
font-size: 0.75rem;
|
||
color: fade(@be-sepia, 80%);
|
||
font-style: italic;
|
||
max-width: 80px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Decorative separator ─────────────────────────────────
|
||
.chat-card-separator {
|
||
height: 14px;
|
||
margin: 0.15rem 0.4rem 0;
|
||
background: url("../images/ui/separator_01.webp") center/auto 100% no-repeat;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
// ── Roll detail rows ─────────────────────────────────────
|
||
.chat-roll-details {
|
||
margin: 0;
|
||
padding: 0 0.4rem 0.15rem;
|
||
|
||
.chat-detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
padding: 0.05rem 0;
|
||
border-bottom: 1px dotted rgba(139, 105, 20, 0.2);
|
||
|
||
&:last-child { border-bottom: none; }
|
||
|
||
dt {
|
||
color: fade(@be-sepia, 75%);
|
||
font-weight: normal;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
dd {
|
||
font-weight: 600;
|
||
color: @be-sepia;
|
||
font-size: 0.85rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
}
|
||
|
||
// Target and roll value stand out slightly
|
||
.chat-detail-target dd,
|
||
.chat-detail-roll dd {
|
||
font-size: 1rem;
|
||
color: @be-bordeaux;
|
||
}
|
||
}
|
||
|
||
// ── Result banner ────────────────────────────────────────
|
||
.chat-card-result {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.1rem;
|
||
margin: 0.2rem 0.4rem 0.25rem;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 2px;
|
||
font-family: @font-rivanna, serif;
|
||
font-size: 1.15rem;
|
||
text-align: center;
|
||
border: 1px solid transparent;
|
||
|
||
&.result-success {
|
||
background: linear-gradient(135deg, rgba(20, 80, 20, 0.12), rgba(40, 100, 40, 0.08));
|
||
border-color: rgba(30, 100, 30, 0.35);
|
||
color: #1a5c1a;
|
||
}
|
||
|
||
&.result-failure {
|
||
background: linear-gradient(135deg, rgba(90, 10, 20, 0.12), rgba(120, 20, 20, 0.08));
|
||
border-color: rgba(90, 10, 20, 0.35);
|
||
color: @be-bordeaux;
|
||
}
|
||
|
||
i { margin-right: 0.3rem; }
|
||
|
||
.chat-result-damage {
|
||
font-family: sans-serif;
|
||
font-size: 0.85rem;
|
||
opacity: 0.85;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// ── Action buttons (Relancer, etc.) ──────────────────────
|
||
.chat-card-actions {
|
||
padding: 0.15rem 0.4rem 0.25rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.chat-card-button {
|
||
padding: 0.3rem 1rem;
|
||
font-size: 0.82rem;
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 2px;
|
||
background: linear-gradient(to bottom, rgba(255,252,240,0.9), rgba(240,230,200,0.9));
|
||
color: @be-sepia;
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
|
||
&:hover {
|
||
background: linear-gradient(to bottom, rgba(240,220,170,0.95), rgba(220,195,140,0.95));
|
||
border-color: @be-gold;
|
||
color: @be-bordeaux;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Tarot card display ──────────────────────────────────
|
||
.tarot-card-display {
|
||
display: flex;
|
||
gap: 0.6rem;
|
||
align-items: flex-start;
|
||
padding: 0.3rem 0.5rem 0.4rem;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
z-index: 100;
|
||
|
||
.tarot-card-img {
|
||
transform: scale(2.5);
|
||
box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
|
||
}
|
||
}
|
||
|
||
.tarot-card-img {
|
||
width: 126px;
|
||
flex-shrink: 0;
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 2px;
|
||
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
transform-origin: left center;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.tarot-card-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
padding-top: 0.2rem;
|
||
|
||
.tarot-card-name {
|
||
font-family: @font-rivanna, serif;
|
||
font-size: 1rem;
|
||
color: @be-bordeaux;
|
||
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
|
||
}
|
||
|
||
.tarot-card-side {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
&.tarot-positif { color: #1a5c1a; }
|
||
&.tarot-negatif { color: @be-bordeaux; }
|
||
}
|
||
|
||
.tarot-card-value {
|
||
font-size: 0.82rem;
|
||
color: @be-sepia;
|
||
strong { color: @be-bordeaux; font-size: 1rem; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Item post message ────────────────────────────────────
|
||
.malefices-chat-card.malefices-chat-item {
|
||
|
||
.item-type-label {
|
||
font-family: "Cinzel Decorative", "Cinzel", serif;
|
||
font-size: 0.65rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: @be-bordeaux;
|
||
opacity: 0.8;
|
||
margin-left: auto;
|
||
align-self: center;
|
||
}
|
||
|
||
.item-damage {
|
||
font-weight: 700;
|
||
color: @be-bordeaux;
|
||
font-size: 1rem;
|
||
&.item-damage-crit {
|
||
color: #8b0000;
|
||
}
|
||
}
|
||
|
||
.chat-item-description {
|
||
margin: 0.4rem 0.5rem 0.3rem;
|
||
font-size: 0.82rem;
|
||
color: @be-sepia;
|
||
line-height: 1.5;
|
||
border-top: 1px solid fade(@be-gold-border, 50%);
|
||
padding-top: 0.4rem;
|
||
|
||
p { margin: 0 0 0.3rem; &:last-child { margin: 0; } }
|
||
em { color: @be-bordeaux; font-style: italic; }
|
||
strong { color: @be-sepia; }
|
||
}
|
||
}
|
||
|
||
// ── Welcome message ─────────────────────────────────────
|
||
.malefices-chat-card.malefices-welcome {
|
||
|
||
.welcome-body {
|
||
padding: 0.3rem 0.6rem 0.4rem;
|
||
font-size: 0.82rem;
|
||
color: @be-sepia;
|
||
line-height: 1.4;
|
||
|
||
p { margin: 0.2rem 0; }
|
||
|
||
.welcome-title {
|
||
font-family: @font-rivanna, serif;
|
||
font-size: 0.95rem;
|
||
color: @be-bordeaux;
|
||
font-weight: normal;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
a { color: @be-gold; &:hover { color: @be-bordeaux; } }
|
||
}
|
||
|
||
.welcome-commands {
|
||
margin-top: 0.4rem;
|
||
border-top: 1px solid @be-gold-border;
|
||
padding-top: 0.3rem;
|
||
|
||
.welcome-commands-title {
|
||
font-weight: 700;
|
||
font-size: 0.8rem;
|
||
color: @be-sepia;
|
||
margin-bottom: 0.2rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.welcome-command-row {
|
||
font-size: 0.8rem;
|
||
color: @be-sepia;
|
||
margin: 0.1rem 0;
|
||
code {
|
||
background: rgba(139,105,20,0.12);
|
||
border: 1px solid @be-gold-border;
|
||
border-radius: 2px;
|
||
padding: 0 3px;
|
||
font-size: 0.78rem;
|
||
color: @be-bordeaux;
|
||
}
|
||
}
|
||
}
|
||
}
|