MediaWiki:PartiesEXP.css: Difference between revisions

From CoraTO Wiki - Official Wiki
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
Line 1: Line 1:
.container{max-width:1100px;margin:0 auto;padding:20px}
body{background:#0f1625}
.hero{padding:24px 0}
html[data-theme="dark"] body{background:#0a0f1a}
.hero-title{font-size:32px;line-height:1.2;margin:0 0 8px}
 
.hero-subtitle{font-size:16px;color:#5a5a72;margin:0 0 12px}
/* Overview left column only (preserva Quick Access) */
.status-pill{display:inline-block;background:#f2f5ff;color:#3451b2;border:1px solid #dbe0ff;padding:6px 10px;border-radius:20px;font-weight:600}
#tab-overview .guide-content{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(260px,.75fr);gap:16px}
.nav-tabs{display:flex;gap:8px;border-bottom:1px solid #e6e6f0;margin:18px 0}
#tab-overview .guide-content > div{background:linear-gradient(135deg,rgba(91,140,255,.06),rgba(255,107,157,.06));border:1px solid #dbe0ff;border-radius:12px;padding:14px}
.nav-tab{background:#fff;border:1px solid #e6e6f0;border-bottom:none;padding:10px 14px;border-top-left-radius:8px;border-top-right-radius:8px;color:#333;cursor:pointer}
#tab-overview .feature-list{list-style:none;padding:0;margin:0}
.nav-tab.active{background:#ffedf3;color:#c93670;border-color:#ffc2d3}
#tab-overview .feature-list li{position:relative;padding-left:26px;margin:8px 0;color:#1e293b}
.tab-content{padding:16px;border:1px solid #e6e6f0;border-radius:0 8px 8px 8px;margin-bottom:18px}
#tab-overview .feature-list li::before{content:"";position:absolute;left:6px;top:7px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,#5b8cff,#ff6b9d)}
.section-header h2{font-size:22px;margin:0 0 12px}
#tab-overview .info-box,#tab-overview .tip-box{border-radius:12px;border:1px solid #dbe0ff;background:rgba(255,255,255,.55);color:#1e293b}
.guide-section{margin-top:8px}
html[data-theme="dark"] #tab-overview .info-box,html[data-theme="dark"] #tab-overview .tip-box{background:rgba(15,23,42,.45);color:#e5f0ff;border-color:rgba(159,208,255,.22)}
.guide-content.two-col{display:grid;grid-template-columns:1fr 320px;gap:18px}
 
.guide-content.full-width{display:block}
/* Join: timeline cards com números grandes */
.quick-access h3{margin:0 0 8px}
#tab-join .guide-content{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(280px,.8fr);gap:16px}
.quick-access ul{list-style:none;padding:0;margin:0}
#tab-join .feature-list{counter-reset:step;list-style:none;padding:0;margin:0}
.quick-access li{margin:6px 0}
#tab-join .feature-list li{position:relative;padding-left:56px;margin:14px 0;color:#1e293b}
.quick-access a{color:#2b4ae4;text-decoration:none}
#tab-join .feature-list li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#5b8cff,#ff6b9d);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 3px 8px rgba(91,140,255,.25)}
.quick-access a:hover{text-decoration:underline}
#tab-join .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}
.tip-box{background:#f5f8ff;border:1px solid #dbe0ff;color:#2b4ae4;padding:10px 12px;border-radius:8px}
#tab-join .file-figure img{display:block;width:100%;height:auto}
.warning-box{background:#fff8f0;border:1px solid #ffd9b3;color:#9a5800;padding:10px 12px;border-radius:8px}
 
.note-box{background:#f7f7fb;border:1px solid #e8e8f2;color:#4b4b5a;padding:10px 12px;border-radius:8px;margin-top:8px}
/* Types: chips roláveis e cartões de tipo */
#tab-types .guide-content{display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,.8fr);gap:14px}
#tab-types .point-list{list-style:none;padding:0;margin:0}
#tab-types .point-list li{position:relative;padding-left:24px;margin:8px 0}
#tab-types .point-list li::before{content:"";position:absolute;left:6px;top:8px;width:10px;height:10px;border-radius:2px;background:linear-gradient(135deg,#5b8cff,#ff6b9d)}
#tab-types .boost-row{margin-top:8px}
#tab-types .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}
 
/* Settings: preserva colapsáveis, estiliza cartões */
#tab-settings .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px;align-items:start}
#tab-settings .setting-card{border:1px solid #dbe0ff;border-radius:12px;background:rgba(255,255,255,.6);padding:12px;display:flex;flex-direction:column;height:100%}
html[data-theme="dark"] #tab-settings .setting-card{background:rgba(15,23,42,.55)}
 
/* Manage: mosaico de ações */
#tab-manage .action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
#tab-manage .action-card{border:1px solid #dbe0ff;border-radius:12px;background:linear-gradient(135deg,rgba(91,140,255,.06),rgba(255,107,157,.06));padding:12px}
 
html[data-theme="dark"] #tab-overview .feature-list li{color:#e5f0ff}
html[data-theme="dark"] #tab-join .feature-list li{color:#e5f0ff}
html[data-theme="dark"] #tab-types .nested-tab{color:#e5f0ff;border-color:rgba(159,208,255,.22)}
html[data-theme="dark"] #tab-overview .guide-content > div,html[data-theme="dark"] #tab-join .file-figure,html[data-theme="dark"] #tab-types .nested-content,html[data-theme="dark"] #tab-types .file-figure,html[data-theme="dark"] #tab-settings .setting-card,html[data-theme="dark"] #tab-manage .action-card,html[data-theme="dark"] #tab-manage .file-figure{border-color:rgba(159,208,255,.22)}
#tab-manage .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}
 
/* Elementos genéricos */
.info-inline{margin:10px 0}
.info-inline{margin:10px 0}
.file-figure{display:flex;align-items:center;justify-content:center;background:#fafafa;border:1px solid #eee;border-radius:10px;padding:10px}
.file-figure img{display:block;width:100%;height:auto}
.file-figure img{max-width:100%;height:auto}
 
.type-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
 
.party-type-card{border:1px solid #e6e6f0;border-radius:12px;padding:12px;background:#fff}
/* Badges (copiado de PartiesEXP.css) */
.party-type-card h3{margin:8px 0}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.party-type-card .card-media{display:flex;align-items:center;justify-content:center;background:#f9fbff;border:1px dashed #ccd5ff;border-radius:10px;padding:8px;margin-bottom:10px}
.badge-chip{background:linear-gradient(135deg,#f6f9ff,#eef4ff);border:1px solid #ccd8ff;color:#2048b0;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.data-table{width:100%;border-collapse:separate;border-spacing:0}
#type-normal .badge-chip{background:linear-gradient(135deg,#f7f7f7,#ededed);border-color:#eaeaea;color:#333}
.data-table caption{caption-side:top;text-align:left;margin-bottom:8px;color:#666}
#type-beginner .badge-chip{background:linear-gradient(135deg,#eaf6ff,#d6ecff);border-color:#cfe8ff;color:#1e5d8f}
.data-table thead th{position:sticky;top:0;background:#f3f6ff;color:#2d3d70;border-bottom:2px solid #d9e1ff;padding:10px;font-weight:700}
#type-type .badge-chip{background:linear-gradient(135deg,#f2ffe8,#dff6c7);border-color:#d9f1c7;color:#2e5a12}
.data-table tbody td{border-bottom:1px solid #eee;padding:10px}
#type-royal .badge-chip{background:linear-gradient(135deg,#fff0f7,#ffd3e3);border-color:#ffd3e3;color:#7a224a}
.data-table tbody tr:nth-child(odd){background:#fcfcff}
#type-special .badge-chip{background:linear-gradient(135deg,#f5f0ff,#e4d7ff);border-color:#dcd0ff;color:#4a2f8a}
.feature-list{padding-left:18px}
#type-fixed .badge-chip{background:linear-gradient(135deg,#ffe9e9,#ffd5d5);border-color:#f3caca;color:#7c1f1f}
.feature-list li{margin:8px 0}
#type-normal .badge-chip::before{content:"•";margin-right:6px}
@media (max-width:860px){.guide-content.two-col{grid-template-columns:1fr}}
#type-beginner .badge-chip::before{content:"🌱";margin-right:6px}
#type-type .badge-chip::before{content:"🧩";margin-right:6px}
#type-royal .badge-chip::before{content:"👑";margin-right:6px}
#type-special .badge-chip::before{content:"✨";margin-right:6px}
#type-fixed .badge-chip::before{content:"🔒";margin-right:6px}
html[data-theme="dark"] .badge-chip{background:linear-gradient(135deg,rgba(30,38,55,.85),rgba(30,38,55,.92));border-color:rgba(159,208,255,.18);color:#cfe6ff}
 
/* Multipliers (copiado de PartiesEXP.css) */
.mult-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:8px}
.mult-card{background:#fff;border:1px solid #e6e6f0;border-radius:12px;padding:12px}
.mult-card::before{content:"";display:block;height:4px;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#ff6b9d,#ffc3e0)}
.mult-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.member-count{font-weight:700;color:#333}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chip{background:#f7f9ff;border:1px solid #e1e8ff;color:#2d3d70;border-radius:14px;padding:8px 12px;font-weight:700;font-size:13px;display:flex;gap:8px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.chip span{font-weight:500;color:#445}
.chip.none{background:#fff3f3;border-color:#ffd3d3;color:#a33}
.chip-normal{background:linear-gradient(135deg,#f7f7f7,#ededed);border-color:#eaeaea;color:#444}
.chip-beginner{background:linear-gradient(135deg,#eaf6ff,#d6ecff);border-color:#cfe8ff;color:#1e5d8f}
.chip-type{background:linear-gradient(135deg,#f2ffe8,#dff6c7);border-color:#d9f1c7;color:#3f6b16}
.chip-royal{background:linear-gradient(135deg,#fff0f7,#ffd3e3);border-color:#ffd3e3;color:#9b2b5c}
.chip-special{background:linear-gradient(135deg,#f5f0ff,#e4d7ff);border-color:#e4d7ff;color:#5b3aa8}
.chip-fixed{background:linear-gradient(135deg,#ffe9e9,#ffd5d5);border-color:#f3caca;color:#a13838}
.chip-normal::before{content:"•";margin-right:6px}
.chip-beginner::before{content:"🌱";margin-right:6px}
.chip-type::before{content:"🧩";margin-right:6px}
.chip-royal::before{content:"👑";margin-right:6px}
.chip-special::before{content:"✨";margin-right:6px}
.chip-fixed::before{content:"🔒";margin-right:6px}
html[data-theme="dark"] .mult-card{background:#141c2a;border-color:rgba(159,208,255,.18)}
html[data-theme="dark"] .mult-card::before{background:linear-gradient(135deg,#274c77,#1b2b41)}
html[data-theme="dark"] .member-count{color:#cfe6ff}
html[data-theme="dark"] .chip{background:linear-gradient(135deg,rgba(61,97,146,.22),rgba(61,97,146,.28));border-color:rgba(159,208,255,.18);color:#cfe6ff}
html[data-theme="dark"] .chip span{color:#cfe6ff}
html[data-theme="dark"] .chip.none{background:rgba(140,31,31,.2);border-color:rgba(255,127,127,.35);color:#ffb0b0}
html[data-theme="dark"] .chip-normal{background:linear-gradient(135deg,#2a2f3a,#323a4a);border-color:rgba(180,190,210,.18);color:#e5eaff}
html[data-theme="dark"] .chip-beginner{background:linear-gradient(135deg,#143a5a,#1a4a72);border-color:rgba(64,140,200,.35);color:#d9efff}
html[data-theme="dark"] .chip-type{background:linear-gradient(135deg,#184a1b,#23622a);border-color:rgba(80,170,110,.35);color:#e6ffe9}
html[data-theme="dark"] .chip-royal{background:linear-gradient(135deg,#5a213f,#702b52);border-color:rgba(210,120,150,.35);color:#ffdbe6}
html[data-theme="dark"] .chip-special{background:linear-gradient(135deg,#2e255f,#3a2f7f);border-color:rgba(150,120,230,.35);color:#efe6ff}
html[data-theme="dark"] .chip-fixed{background:linear-gradient(135deg,#4a1f1f,#5a2b2b);border-color:rgba(255,127,127,.35);color:#ffb0b0}

Revision as of 05:25, 12 December 2025

body{background:#0f1625}
html[data-theme="dark"] body{background:#0a0f1a}

/* Overview left column only (preserva Quick Access) */
#tab-overview .guide-content{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(260px,.75fr);gap:16px}
#tab-overview .guide-content > div{background:linear-gradient(135deg,rgba(91,140,255,.06),rgba(255,107,157,.06));border:1px solid #dbe0ff;border-radius:12px;padding:14px}
#tab-overview .feature-list{list-style:none;padding:0;margin:0}
#tab-overview .feature-list li{position:relative;padding-left:26px;margin:8px 0;color:#1e293b}
#tab-overview .feature-list li::before{content:"";position:absolute;left:6px;top:7px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,#5b8cff,#ff6b9d)}
#tab-overview .info-box,#tab-overview .tip-box{border-radius:12px;border:1px solid #dbe0ff;background:rgba(255,255,255,.55);color:#1e293b}
html[data-theme="dark"] #tab-overview .info-box,html[data-theme="dark"] #tab-overview .tip-box{background:rgba(15,23,42,.45);color:#e5f0ff;border-color:rgba(159,208,255,.22)}

/* Join: timeline cards com números grandes */
#tab-join .guide-content{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(280px,.8fr);gap:16px}
#tab-join .feature-list{counter-reset:step;list-style:none;padding:0;margin:0}
#tab-join .feature-list li{position:relative;padding-left:56px;margin:14px 0;color:#1e293b}
#tab-join .feature-list li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#5b8cff,#ff6b9d);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 3px 8px rgba(91,140,255,.25)}
#tab-join .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}
#tab-join .file-figure img{display:block;width:100%;height:auto}

/* Types: chips roláveis e cartões de tipo */
#tab-types .guide-content{display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,.8fr);gap:14px}
#tab-types .point-list{list-style:none;padding:0;margin:0}
#tab-types .point-list li{position:relative;padding-left:24px;margin:8px 0}
#tab-types .point-list li::before{content:"";position:absolute;left:6px;top:8px;width:10px;height:10px;border-radius:2px;background:linear-gradient(135deg,#5b8cff,#ff6b9d)}
#tab-types .boost-row{margin-top:8px}
#tab-types .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}

/* Settings: preserva colapsáveis, estiliza cartões */
#tab-settings .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px;align-items:start}
#tab-settings .setting-card{border:1px solid #dbe0ff;border-radius:12px;background:rgba(255,255,255,.6);padding:12px;display:flex;flex-direction:column;height:100%}
html[data-theme="dark"] #tab-settings .setting-card{background:rgba(15,23,42,.55)}

/* Manage: mosaico de ações */
#tab-manage .action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
#tab-manage .action-card{border:1px solid #dbe0ff;border-radius:12px;background:linear-gradient(135deg,rgba(91,140,255,.06),rgba(255,107,157,.06));padding:12px}

html[data-theme="dark"] #tab-overview .feature-list li{color:#e5f0ff}
html[data-theme="dark"] #tab-join .feature-list li{color:#e5f0ff}
html[data-theme="dark"] #tab-types .nested-tab{color:#e5f0ff;border-color:rgba(159,208,255,.22)}
html[data-theme="dark"] #tab-overview .guide-content > div,html[data-theme="dark"] #tab-join .file-figure,html[data-theme="dark"] #tab-types .nested-content,html[data-theme="dark"] #tab-types .file-figure,html[data-theme="dark"] #tab-settings .setting-card,html[data-theme="dark"] #tab-manage .action-card,html[data-theme="dark"] #tab-manage .file-figure{border-color:rgba(159,208,255,.22)}
#tab-manage .file-figure{border:1px solid #dbe0ff;border-radius:12px;overflow:hidden}

/* Elementos genéricos */
.info-inline{margin:10px 0}
.file-figure img{display:block;width:100%;height:auto}


/* Badges (copiado de PartiesEXP.css) */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge-chip{background:linear-gradient(135deg,#f6f9ff,#eef4ff);border:1px solid #ccd8ff;color:#2048b0;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.06)}
#type-normal .badge-chip{background:linear-gradient(135deg,#f7f7f7,#ededed);border-color:#eaeaea;color:#333}
#type-beginner .badge-chip{background:linear-gradient(135deg,#eaf6ff,#d6ecff);border-color:#cfe8ff;color:#1e5d8f}
#type-type .badge-chip{background:linear-gradient(135deg,#f2ffe8,#dff6c7);border-color:#d9f1c7;color:#2e5a12}
#type-royal .badge-chip{background:linear-gradient(135deg,#fff0f7,#ffd3e3);border-color:#ffd3e3;color:#7a224a}
#type-special .badge-chip{background:linear-gradient(135deg,#f5f0ff,#e4d7ff);border-color:#dcd0ff;color:#4a2f8a}
#type-fixed .badge-chip{background:linear-gradient(135deg,#ffe9e9,#ffd5d5);border-color:#f3caca;color:#7c1f1f}
#type-normal .badge-chip::before{content:"•";margin-right:6px}
#type-beginner .badge-chip::before{content:"🌱";margin-right:6px}
#type-type .badge-chip::before{content:"🧩";margin-right:6px}
#type-royal .badge-chip::before{content:"👑";margin-right:6px}
#type-special .badge-chip::before{content:"✨";margin-right:6px}
#type-fixed .badge-chip::before{content:"🔒";margin-right:6px}
html[data-theme="dark"] .badge-chip{background:linear-gradient(135deg,rgba(30,38,55,.85),rgba(30,38,55,.92));border-color:rgba(159,208,255,.18);color:#cfe6ff}

/* Multipliers (copiado de PartiesEXP.css) */
.mult-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:8px}
.mult-card{background:#fff;border:1px solid #e6e6f0;border-radius:12px;padding:12px}
.mult-card::before{content:"";display:block;height:4px;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#ff6b9d,#ffc3e0)}
.mult-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.member-count{font-weight:700;color:#333}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chip{background:#f7f9ff;border:1px solid #e1e8ff;color:#2d3d70;border-radius:14px;padding:8px 12px;font-weight:700;font-size:13px;display:flex;gap:8px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.chip span{font-weight:500;color:#445}
.chip.none{background:#fff3f3;border-color:#ffd3d3;color:#a33}
.chip-normal{background:linear-gradient(135deg,#f7f7f7,#ededed);border-color:#eaeaea;color:#444}
.chip-beginner{background:linear-gradient(135deg,#eaf6ff,#d6ecff);border-color:#cfe8ff;color:#1e5d8f}
.chip-type{background:linear-gradient(135deg,#f2ffe8,#dff6c7);border-color:#d9f1c7;color:#3f6b16}
.chip-royal{background:linear-gradient(135deg,#fff0f7,#ffd3e3);border-color:#ffd3e3;color:#9b2b5c}
.chip-special{background:linear-gradient(135deg,#f5f0ff,#e4d7ff);border-color:#e4d7ff;color:#5b3aa8}
.chip-fixed{background:linear-gradient(135deg,#ffe9e9,#ffd5d5);border-color:#f3caca;color:#a13838}
.chip-normal::before{content:"•";margin-right:6px}
.chip-beginner::before{content:"🌱";margin-right:6px}
.chip-type::before{content:"🧩";margin-right:6px}
.chip-royal::before{content:"👑";margin-right:6px}
.chip-special::before{content:"✨";margin-right:6px}
.chip-fixed::before{content:"🔒";margin-right:6px}
html[data-theme="dark"] .mult-card{background:#141c2a;border-color:rgba(159,208,255,.18)}
html[data-theme="dark"] .mult-card::before{background:linear-gradient(135deg,#274c77,#1b2b41)}
html[data-theme="dark"] .member-count{color:#cfe6ff}
html[data-theme="dark"] .chip{background:linear-gradient(135deg,rgba(61,97,146,.22),rgba(61,97,146,.28));border-color:rgba(159,208,255,.18);color:#cfe6ff}
html[data-theme="dark"] .chip span{color:#cfe6ff}
html[data-theme="dark"] .chip.none{background:rgba(140,31,31,.2);border-color:rgba(255,127,127,.35);color:#ffb0b0}
html[data-theme="dark"] .chip-normal{background:linear-gradient(135deg,#2a2f3a,#323a4a);border-color:rgba(180,190,210,.18);color:#e5eaff}
html[data-theme="dark"] .chip-beginner{background:linear-gradient(135deg,#143a5a,#1a4a72);border-color:rgba(64,140,200,.35);color:#d9efff}
html[data-theme="dark"] .chip-type{background:linear-gradient(135deg,#184a1b,#23622a);border-color:rgba(80,170,110,.35);color:#e6ffe9}
html[data-theme="dark"] .chip-royal{background:linear-gradient(135deg,#5a213f,#702b52);border-color:rgba(210,120,150,.35);color:#ffdbe6}
html[data-theme="dark"] .chip-special{background:linear-gradient(135deg,#2e255f,#3a2f7f);border-color:rgba(150,120,230,.35);color:#efe6ff}
html[data-theme="dark"] .chip-fixed{background:linear-gradient(135deg,#4a1f1f,#5a2b2b);border-color:rgba(255,127,127,.35);color:#ffb0b0}
Retrieved from "https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:PartiesEXP.css&oldid=6391"