« MediaWiki:Common.css » : différence entre les versions
aucun résumé des modifications
Aucun résumé des modifications |
Aucun résumé des modifications Balise : Révoqué |
||
| Ligne 4 550 : | Ligne 4 550 : | ||
max-width: 100% !important; | max-width: 100% !important; | ||
} | } | ||
} | |||
/* ============================================ | |||
CALCULATEUR DE RÉSOLUTION — Nephilim 5e | |||
À ajouter dans MediaWiki:Common.css | |||
============================================ */ | |||
.mw-parser-output .neph-calc { | |||
max-width: 520px; | |||
margin: 1.5em auto; | |||
background: #FFFFFF; | |||
border-radius: 2px; | |||
box-shadow: 0 1px 3px rgba(45,27,78,0.08), 0 8px 32px rgba(45,27,78,0.06); | |||
border: 1px solid rgba(87,75,107,0.12); | |||
overflow: hidden; | |||
font-family: 'EB Garamond', Georgia, serif; | |||
color: #2A2520; | |||
} | |||
/* Header */ | |||
.mw-parser-output .neph-calc-header { | |||
background: linear-gradient(135deg, #2D1B4E 0%, #574B6B 100%); | |||
padding: 1.5rem 2rem; | |||
text-align: center; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.mw-parser-output .neph-calc-header::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; left: 0; right: 0; bottom: 0; | |||
background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(196,154,42,0.04) 20px, rgba(196,154,42,0.04) 21px); | |||
} | |||
.mw-parser-output .neph-calc-title { | |||
font-family: 'Cinzel', serif; | |||
font-weight: 600; | |||
font-size: 1.3rem; | |||
color: #E8D48A; | |||
letter-spacing: 0.15em; | |||
text-transform: uppercase; | |||
position: relative; | |||
} | |||
.mw-parser-output .neph-calc-subtitle { | |||
font-family: 'EB Garamond', serif; | |||
font-style: italic; | |||
color: rgba(232,212,138,0.6); | |||
font-size: 0.95rem; | |||
margin-top: 0.3rem; | |||
position: relative; | |||
} | |||
/* Body */ | |||
.mw-parser-output .neph-calc-body { | |||
padding: 1.5rem 2rem 2rem; | |||
} | |||
/* Section titles */ | |||
.mw-parser-output .neph-calc-section-title { | |||
font-family: 'Cinzel', serif; | |||
font-size: 0.75rem; | |||
font-weight: 600; | |||
letter-spacing: 0.12em; | |||
text-transform: uppercase; | |||
color: #574B6B; | |||
margin-bottom: 0.8rem; | |||
padding-bottom: 0.4rem; | |||
border-bottom: 1px solid rgba(87,75,107,0.15); | |||
} | |||
/* Field rows */ | |||
.mw-parser-output .neph-calc-fields { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 0.6rem; | |||
margin-bottom: 1.2rem; | |||
} | |||
.mw-parser-output .neph-calc-row { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
gap: 1rem; | |||
} | |||
.mw-parser-output .neph-calc-label { | |||
font-size: 1.05rem; | |||
color: #2A2520; | |||
flex: 1; | |||
} | |||
.mw-parser-output .neph-calc-hint { | |||
font-size: 0.85rem; | |||
color: #5A5550; | |||
font-style: italic; | |||
} | |||
/* Select dropdowns */ | |||
.mw-parser-output .neph-calc-select-wrap { | |||
position: relative; | |||
width: 80px; | |||
flex-shrink: 0; | |||
display: inline-block; | |||
} | |||
.mw-parser-output .neph-calc-select { | |||
width: 100%; | |||
padding: 0.45rem 2rem 0.45rem 0.75rem; | |||
font-family: 'EB Garamond', serif; | |||
font-size: 1.05rem; | |||
color: #2A2520; | |||
background: #F5F0E4; | |||
border: 1px solid rgba(87,75,107,0.25); | |||
border-radius: 2px; | |||
-webkit-appearance: none; | |||
-moz-appearance: none; | |||
appearance: none; | |||
cursor: pointer; | |||
transition: border-color 0.2s; | |||
} | |||
.mw-parser-output .neph-calc-select:hover { | |||
border-color: #574B6B; | |||
} | |||
.mw-parser-output .neph-calc-select:focus { | |||
outline: none; | |||
border-color: #C49A2A; | |||
box-shadow: 0 0 0 2px rgba(196,154,42,0.15); | |||
} | |||
.mw-parser-output .neph-calc-select-wrap::after { | |||
content: '▾'; | |||
position: absolute; | |||
right: 0.6rem; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
color: #8B7BA0; | |||
pointer-events: none; | |||
font-size: 0.8rem; | |||
} | |||
/* Score bar */ | |||
.mw-parser-output .neph-calc-score-bar { | |||
background: linear-gradient(135deg, #2D1B4E, #574B6B); | |||
border-radius: 2px; | |||
padding: 1rem 1.5rem; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 1.2rem; | |||
} | |||
.mw-parser-output .neph-calc-score-item { | |||
text-align: center; | |||
} | |||
.mw-parser-output .neph-calc-score-label { | |||
font-family: 'Cinzel', serif; | |||
font-size: 0.65rem; | |||
letter-spacing: 0.1em; | |||
text-transform: uppercase; | |||
color: #8B7BA0; | |||
margin-bottom: 0.2rem; | |||
} | |||
.mw-parser-output .neph-calc-score-value { | |||
font-family: 'Cinzel', serif; | |||
font-size: 1.6rem; | |||
font-weight: 700; | |||
color: #E8D48A; | |||
} | |||
.mw-parser-output .neph-calc-score-divider { | |||
width: 1px; | |||
height: 2.5rem; | |||
background: rgba(196,154,42,0.2); | |||
} | |||
/* Dice input */ | |||
.mw-parser-output .neph-calc-dice-section { | |||
margin-bottom: 1.2rem; | |||
} | |||
.mw-parser-output .neph-calc-dice-wrap { | |||
display: inline-block; | |||
position: relative; | |||
width: 100px; | |||
flex-shrink: 0; | |||
} | |||
.mw-parser-output .neph-calc-dice-input { | |||
width: 100%; | |||
padding: 0.5rem 0.75rem; | |||
font-family: 'Cinzel', serif; | |||
font-size: 1.2rem; | |||
font-weight: 600; | |||
text-align: center; | |||
color: #2A2520; | |||
background: #F5F0E4; | |||
border: 1px solid rgba(87,75,107,0.25); | |||
border-radius: 2px; | |||
transition: border-color 0.2s; | |||
} | |||
.mw-parser-output .neph-calc-dice-input:hover { | |||
border-color: #574B6B; | |||
} | |||
.mw-parser-output .neph-calc-dice-input:focus { | |||
outline: none; | |||
border-color: #C49A2A; | |||
box-shadow: 0 0 0 2px rgba(196,154,42,0.15); | |||
} | |||
/* Resolve button */ | |||
.mw-parser-output .neph-calc-btn-resolve { | |||
width: 100%; | |||
padding: 0.75rem; | |||
font-family: 'Cinzel', serif; | |||
font-size: 0.85rem; | |||
font-weight: 600; | |||
letter-spacing: 0.12em; | |||
text-transform: uppercase; | |||
color: #2D1B4E; | |||
background: linear-gradient(135deg, #E8D48A, #C49A2A); | |||
border: none; | |||
border-radius: 2px; | |||
cursor: pointer; | |||
transition: all 0.2s; | |||
} | |||
.mw-parser-output .neph-calc-btn-resolve:hover { | |||
background: linear-gradient(135deg, #C49A2A, #9A7A1F); | |||
color: #FFFFFF; | |||
box-shadow: 0 2px 8px rgba(196,154,42,0.3); | |||
} | |||
.mw-parser-output .neph-calc-btn-resolve:active { | |||
transform: translateY(1px); | |||
} | |||
/* Result panel */ | |||
.mw-parser-output .neph-calc-result { | |||
margin-top: 1.2rem; | |||
border-radius: 2px; | |||
padding: 1.2rem 1.5rem; | |||
text-align: center; | |||
display: none; | |||
} | |||
.mw-parser-output .neph-calc-result.neph-visible { | |||
display: block; | |||
animation: nephCalcFadeIn 0.3s ease; | |||
} | |||
.mw-parser-output .neph-calc-result.neph-success { | |||
background: #D2EDDA; | |||
border: 1px solid rgba(74,154,106,0.3); | |||
} | |||
.mw-parser-output .neph-calc-result.neph-failure { | |||
background: #F2D5D3; | |||
border: 1px solid rgba(192,82,78,0.3); | |||
} | |||
.mw-parser-output .neph-calc-result.neph-maladresse { | |||
background: #2A1010; | |||
border: 1px solid #8B1A1A; | |||
} | |||
.mw-parser-output .neph-calc-result-verdict { | |||
font-family: 'Cinzel', serif; | |||
font-size: 1.4rem; | |||
font-weight: 700; | |||
letter-spacing: 0.05em; | |||
margin-bottom: 0.3rem; | |||
} | |||
.mw-parser-output .neph-success .neph-calc-result-verdict { color: #4A9A6A; } | |||
.mw-parser-output .neph-failure .neph-calc-result-verdict { color: #C0524E; } | |||
.mw-parser-output .neph-maladresse .neph-calc-result-verdict { color: #FF4444; } | |||
.mw-parser-output .neph-calc-result-detail { | |||
font-size: 1rem; | |||
line-height: 1.5; | |||
} | |||
.mw-parser-output .neph-success .neph-calc-result-detail { color: #2D6B42; } | |||
.mw-parser-output .neph-failure .neph-calc-result-detail { color: #8B3A38; } | |||
.mw-parser-output .neph-maladresse .neph-calc-result-detail { color: #FF8888; } | |||
.mw-parser-output .neph-calc-result-margin { | |||
margin-top: 0.6rem; | |||
font-family: 'Cinzel', serif; | |||
font-size: 0.75rem; | |||
letter-spacing: 0.08em; | |||
text-transform: uppercase; | |||
} | |||
.mw-parser-output .neph-success .neph-calc-result-margin { color: rgba(45,107,66,0.7); } | |||
.mw-parser-output .neph-calc-margin-bar { | |||
margin-top: 0.5rem; | |||
height: 6px; | |||
background: rgba(0,0,0,0.08); | |||
border-radius: 3px; | |||
overflow: hidden; | |||
display: none; | |||
} | |||
.mw-parser-output .neph-calc-margin-fill { | |||
height: 100%; | |||
width: 0; | |||
border-radius: 3px; | |||
background: linear-gradient(90deg, #9A7A1F, #C49A2A, #E8D48A); | |||
transition: width 0.5s ease; | |||
} | |||
/* Reset */ | |||
.mw-parser-output .neph-calc-reset-wrap { | |||
text-align: center; | |||
margin-top: 0.8rem; | |||
display: none; | |||
} | |||
.mw-parser-output .neph-calc-reset-wrap.neph-visible { | |||
display: block; | |||
} | |||
.mw-parser-output .neph-calc-reset-link { | |||
font-size: 0.9rem; | |||
color: #8B7BA0; | |||
cursor: pointer; | |||
text-decoration: underline; | |||
text-underline-offset: 2px; | |||
transition: color 0.2s; | |||
background: none; | |||
border: none; | |||
font-family: 'EB Garamond', serif; | |||
} | |||
.mw-parser-output .neph-calc-reset-link:hover { | |||
color: #574B6B; | |||
} | |||
@keyframes nephCalcFadeIn { | |||
from { opacity: 0; transform: translateY(6px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | |||
/* Responsive */ | |||
@media screen and (max-width: 768px) { | |||
.mw-parser-output .neph-calc { | |||
max-width: 100%; | |||
} | |||
.mw-parser-output .neph-calc-body { | |||
padding: 1.2rem 1.2rem 1.5rem; | |||
} | |||
.mw-parser-output .neph-calc-header { | |||
padding: 1.2rem; | |||
} | |||
.mw-parser-output .neph-calc-title { | |||
font-size: 1.1rem; | |||
} | |||
.mw-parser-output .neph-calc-score-bar { | |||
padding: 0.8rem 1rem; | |||
flex-wrap: wrap; | |||
gap: 0.5rem; | |||
} | |||
.mw-parser-output .neph-calc-score-value { | |||
font-size: 1.3rem; | |||
} | |||
} | } | ||