|
|
| 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;
| |
| }
| |
| } | | } |