MediaWiki:Common.css: mudanças entre as edições

De Grimopedia
Ir para navegação Ir para pesquisar
← Edição anteriorEdição posterior →
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
/* ===== Path of Isgard — Layout Global ===== */
/* ===== Tema Path of Isgard aplicado via Common.css (escopo Vector 2022) ===== */
.asgardpage-root{--asgardpage-primary:#6ba3b8;--asgardpage-primary-light:#a8d0e6;--asgardpage-blue-dark:#1a2a3a;--asgardpage-blue-light:#2d4a5a;--asgardpage-secondary:#0f1a2a;--asgardpage-background:#fff;--asgardpage-modal-bg:#2d4a5a;--asgardpage-text:#fff;--asgardpage-text-secondary:#a8d0e6;--asgardpage-border:rgba(107,163,184,.4);--asgardpage-hover:rgba(107,163,184,.15);--asgardpage-shadow:rgba(26,42,58,.6);--asgardpage-card-bg:#fff}
.skin-vector-2022 {
.asgardpage-hero{background:linear-gradient(135deg,var(--asgardpage-blue-light) 0%,var(--asgardpage-primary) 50%,var(--asgardpage-blue-dark) 100%);border-radius:20px;padding:50px 30px;margin:30px 0;text-align:center;border:1px solid var(--asgardpage-border);position:relative;overflow:hidden}
  --ice-primary:#6ba3b8; --ice-primary-light:#a8d0e6;
.asgardpage-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--asgardpage-primary) 0%,var(--asgardpage-primary-light) 50%,var(--asgardpage-primary) 100%);animation:iceGlow 2.5s linear infinite}
  --ice-blue-900:#0f1a2a; --ice-blue-800:#15232e; --ice-blue-700:#1b3040;
.asgardpage-hero h1{color:#fff!important;font-size:3.5em;font-weight:800;margin:0 0 10px;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.3)}
  --ice-blue-600:#243543; --ice-blue-500:#2a4252; --ice-blue-400:#35566a;
.asgardpage-hero .asgardpage-subtitle{color:#fff!important;font-size:1.4em;margin-bottom:30px;font-weight:300;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.4)}
  --ice-white:#e8f1f6;
.asgardpage-hero p{color:#fff!important;font-size:1.1em;margin:20px auto;max-width:600px;line-height:1.6;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.5)}
  background: radial-gradient(1200px 800px at 10% -10%, #203243 0%, #132838 40%, #0e1a27 100%) fixed;
.asgardpage-action-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:40px 0 20px}
  color:#e8f1f6;
.asgardpage-action-link{display:inline-block;background:linear-gradient(135deg,var(--asgardpage-text) 0%,rgba(255,255,255,.9) 100%);color:var(--asgardpage-blue-dark)!important;text-decoration:none!important;padding:15px 30px;border-radius:50px;font-weight:600;font-size:1.1em;transition:.3s;box-shadow:0 4px 15px rgba(0,0,0,.2),0 0 20px rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.3);position:relative;overflow:hidden}
}
.asgardpage-action-link::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.skin-vector-2022 .vector-header-container{background:var(--ice-blue-800);border-bottom:1px solid var(--ice-blue-400);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.asgardpage-action-link:hover::before{left:100%}
.skin-vector-2022 .vector-search-box .vector-search-box-input{background:var(--ice-blue-700);border:1px solid var(--ice-blue-400);border-radius:999px;color:var(--ice-white);padding:8px 14px}
.asgardpage-action-link:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.3),0 0 30px rgba(255,255,255,.5);background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,var(--asgardpage-text) 100%)}
.skin-vector-2022 .vector-search-box .vector-search-box-input::placeholder{color:var(--ice-primary-light);opacity:.8}
.asgardpage-menu-container,.asgardpage-server-info{background:var(--asgardpage-card-bg);border-radius:20px;margin:30px 0;overflow:hidden;box-shadow:0 8px 25px var(--asgardpage-shadow);border:1px solid #e9ecef}
.skin-vector-2022 .vector-search-box .cdx-button,
.asgardpage-menu-header{background:linear-gradient(90deg,var(--asgardpage-blue-dark) 0%,var(--asgardpage-blue-light) 50%,var(--asgardpage-blue-dark) 100%);padding:25px;text-align:center;position:relative;border-radius:20px 20px 0 0;overflow:hidden;backdrop-filter:blur(5px)}
.skin-vector-2022 .vector-search-box .cdx-text-input__end-button{background:var(--ice-blue-600);border-color:var(--ice-blue-400);border-radius:999px}
.asgardpage-menu-header h2{color:var(--asgardpage-text)!important;font-size:1.8em;font-weight:700;margin:0;letter-spacing:1px;position:relative;z-index:2;text-shadow:0 2px 8px rgba(26,42,58,.6)}
.skin-vector-2022 .vector-menu-tabs .vector-tab-link{background:var(--ice-blue-600);border:1px solid var(--ice-blue-400);border-bottom-color:var(--ice-blue-600);color:var(--ice-white);border-radius:12px 12px 0 0;padding:6px 12px;margin-right:6px;text-decoration:none!important}
.asgardpage-menu-header::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--asgardpage-primary-light),var(--asgardpage-primary),var(--asgardpage-primary-light));background-size:200% 100%;animation:iceBarMove 2.5s linear infinite;z-index:1}
.skin-vector-2022 .vector-menu-tabs .selected .vector-tab-link{background:#3b5a6f;border-color:var(--ice-primary);color:#fff;box-shadow:inset 0 -2px 0 var(--ice-primary),0 2px 8px rgba(107,163,184,.25)}
@keyframes iceBarMove{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.skin-vector-2022 .mw-body,.skin-vector-2022 .vector-body,.skin-vector-2022 .mw-content-container{background:transparent;border:0;box-shadow:none;color:#e8f1f6}
@keyframes iceGlow{0%,100%{box-shadow:0 0 5px rgba(107,163,184,.3)}50%{box-shadow:0 0 15px rgba(107,163,184,.6),0 0 25px rgba(168,208,230,.3)}}
.skin-vector-2022 .vector-sidebar{padding:8px}
.asgardpage-menu-content,.asgardpage-server-info-content{display:flex;flex-wrap:wrap;padding:30px;gap:25px}
.skin-vector-2022 .vector-menu-portal{background:var(--ice-blue-600);border:1px solid var(--ice-blue-400);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03);margin:10px 0;padding:10px 12px}
.asgardpage-menu-column,.asgardpage-server-info-column{flex:1;min-width:280px;background:var(--asgardpage-card-bg);border-radius:15px;padding:25px;border:1px solid var(--asgardpage-border);transition:.3s;backdrop-filter:blur(5px)}
.skin-vector-2022 .vector-menu-portal .vector-menu-heading{color:var(--ice-primary-light);text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-bottom:1px solid rgba(168,208,230,.25);padding-bottom:6px;margin-bottom:8px}
.asgardpage-menu-column:hover{box-shadow:0 5px 15px var(--asgardpage-shadow),0 0 20px rgba(107,163,184,.2);border-color:var(--asgardpage-primary);transform:translateY(-2px)}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li{margin:6px 0}
.asgardpage-menu-column h3,.asgardpage-server-info-column h4{color:var(--asgardpage-primary);font-weight:700;margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid var(--asgardpage-border);position:relative}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a{display:block;background:var(--ice-blue-500);border:1px solid var(--ice-blue-400);border-radius:10px;padding:8px 10px;color:#eaf4f8!important;text-decoration:none!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.asgardpage-menu-column h3::after,.asgardpage-server-info-column h4::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:50px;height:2px;background:var(--asgardpage-primary)}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a:hover{transform:translateX(3px);border-color:var(--ice-primary);box-shadow:0 4px 12px rgba(107,163,184,.2);color:#fff!important}
.asgardpage-menu-list,.asgardpage-server-info-list{list-style:none;margin:0;padding:0}
.skin-vector-2022 a{color:#b9e3f6}.skin-vector-2022 a:visited{color:#a8d0e6}.skin-vector-2022 a:hover{color:#fff}
.asgardpage-menu-list li,.asgardpage-server-info-list li{margin-bottom:8px}
/* Home: esconder título/barrinha para o hero colar no topo */
.asgardpage-menu-list a,.asgardpage-server-info-list a{display:flex;align-items:center;color:var(--asgardpage-blue-dark)!important;text-decoration:none!important;padding:12px 16px;border-radius:10px;transition:.3s;background:var(--asgardpage-card-bg);border:1px solid var(--asgardpage-border);font-weight:500}
.page-Página_principal .mw-first-heading,
.asgardpage-server-info-list a{padding:10px 14px;border-radius:8px}
.page-Página_principal .vector-page-titlebar{display:none}
.asgardpage-menu-list a:hover,.asgardpage-server-info-list a:hover{background:var(--asgardpage-hover);color:var(--asgardpage-primary)!important;transform:translateX(5px);border-color:var(--asgardpage-primary);text-decoration:none!important;box-shadow:0 4px 12px rgba(107,163,184,.15),0 0 10px rgba(168,208,230,.1)}
.page-Página_principal .mw-body,.page-Página_principal .vector-body{padding-top:8px}
@media (max-width:768px){.asgardpage-hero{padding:30px 20px;margin:20px 0}.asgardpage-hero h1{font-size:2.5em;color:#fff!important}.asgardpage-hero .asgardpage-subtitle{font-size:1.2em}.asgardpage-action-links{flex-direction:column;align-items:center;gap:15px}.asgardpage-action-link{width:100%;max-width:280px}.asgardpage-menu-content{flex-direction:column;padding:10px}.asgardpage-menu-column{width:100%;min-width:0;padding:10px;box-sizing:border-box}.asgardpage-server-info-content{flex-direction:column;padding:20px}.asgardpage-server-info-column{min-width:100%}}
/* Reforço nos botões do hero */
@media (max-width:480px){.asgardpage-hero{padding:25px 15px}.asgardpage-hero h1{font-size:2em}.asgardpage-menu-content{padding:5px}.asgardpage-server-info-content{padding:15px}.asgardpage-menu-column{padding:5px}}
.asgardpage-action-link{border:1px solid rgba(0,0,0,.15);box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.12) inset}

Edição das 16h37min de 15 de outubro de 2025

/* ===== Tema Path of Isgard aplicado via Common.css (escopo Vector 2022) ===== */
.skin-vector-2022 {
  --ice-primary:#6ba3b8; --ice-primary-light:#a8d0e6;
  --ice-blue-900:#0f1a2a; --ice-blue-800:#15232e; --ice-blue-700:#1b3040;
  --ice-blue-600:#243543; --ice-blue-500:#2a4252; --ice-blue-400:#35566a;
  --ice-white:#e8f1f6;
  background: radial-gradient(1200px 800px at 10% -10%, #203243 0%, #132838 40%, #0e1a27 100%) fixed;
  color:#e8f1f6;
}
.skin-vector-2022 .vector-header-container{background:var(--ice-blue-800);border-bottom:1px solid var(--ice-blue-400);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.skin-vector-2022 .vector-search-box .vector-search-box-input{background:var(--ice-blue-700);border:1px solid var(--ice-blue-400);border-radius:999px;color:var(--ice-white);padding:8px 14px}
.skin-vector-2022 .vector-search-box .vector-search-box-input::placeholder{color:var(--ice-primary-light);opacity:.8}
.skin-vector-2022 .vector-search-box .cdx-button,
.skin-vector-2022 .vector-search-box .cdx-text-input__end-button{background:var(--ice-blue-600);border-color:var(--ice-blue-400);border-radius:999px}
.skin-vector-2022 .vector-menu-tabs .vector-tab-link{background:var(--ice-blue-600);border:1px solid var(--ice-blue-400);border-bottom-color:var(--ice-blue-600);color:var(--ice-white);border-radius:12px 12px 0 0;padding:6px 12px;margin-right:6px;text-decoration:none!important}
.skin-vector-2022 .vector-menu-tabs .selected .vector-tab-link{background:#3b5a6f;border-color:var(--ice-primary);color:#fff;box-shadow:inset 0 -2px 0 var(--ice-primary),0 2px 8px rgba(107,163,184,.25)}
.skin-vector-2022 .mw-body,.skin-vector-2022 .vector-body,.skin-vector-2022 .mw-content-container{background:transparent;border:0;box-shadow:none;color:#e8f1f6}
.skin-vector-2022 .vector-sidebar{padding:8px}
.skin-vector-2022 .vector-menu-portal{background:var(--ice-blue-600);border:1px solid var(--ice-blue-400);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03);margin:10px 0;padding:10px 12px}
.skin-vector-2022 .vector-menu-portal .vector-menu-heading{color:var(--ice-primary-light);text-transform:uppercase;letter-spacing:.06em;font-weight:700;border-bottom:1px solid rgba(168,208,230,.25);padding-bottom:6px;margin-bottom:8px}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li{margin:6px 0}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a{display:block;background:var(--ice-blue-500);border:1px solid var(--ice-blue-400);border-radius:10px;padding:8px 10px;color:#eaf4f8!important;text-decoration:none!important;transition:transform .15s,box-shadow .15s,border-color .15s}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a:hover{transform:translateX(3px);border-color:var(--ice-primary);box-shadow:0 4px 12px rgba(107,163,184,.2);color:#fff!important}
.skin-vector-2022 a{color:#b9e3f6}.skin-vector-2022 a:visited{color:#a8d0e6}.skin-vector-2022 a:hover{color:#fff}
/* Home: esconder título/barrinha para o hero colar no topo */
.page-Página_principal .mw-first-heading,
.page-Página_principal .vector-page-titlebar{display:none}
.page-Página_principal .mw-body,.page-Página_principal .vector-body{padding-top:8px}
/* Reforço nos botões do hero */
.asgardpage-action-link{border:1px solid rgba(0,0,0,.15);box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.12) inset}
Disponível em “https://grimopedia.com.br/index.php?title=MediaWiki:Common.css&oldid=103”