|
|
| Línea 1: |
Línea 1: |
| /* ========================================================= | | /* === Tipografía y fondo general === */ |
| OROZA WIKI - EXTENSION DE ESTILOS PARA MEDIAWIKI
| | body { |
| Basado en: OROZA WIKI - PREMIUM FANTASY LIGHT
| | background-color: #f2f2f2; |
| Cubre: Infoboxes · Drops · Navegacion · Mapas · Skills
| | font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; |
| Quests · Clases · Tabs · Badges · Barras de stats
| | color: #333; |
| Compatible con: MediaWiki 1.39+
| |
| ========================================================= */
| |
| | |
| | |
| /* =========================================================
| |
| VARIABLES (hereda de style.css, extiende lo necesario)
| |
| ========================================================= */
| |
| :root {
| |
| /* Rareza de items */
| |
| --rarity-common: #6a7a6a;
| |
| --rarity-common-bg: #f0f4f0;
| |
| --rarity-uncommon: #2a6a2a;
| |
| --rarity-uncommon-bg: #eef6ee;
| |
| --rarity-rare: #1a4a9a;
| |
| --rarity-rare-bg: #eef2fb;
| |
| --rarity-epic: #7a2a9a;
| |
| --rarity-epic-bg: #f4eefb;
| |
| --rarity-legendary: #a07a10;
| |
| --rarity-legendary-bg:#fdf4dc;
| |
| --rarity-mvp: #9a1a1a;
| |
| --rarity-mvp-bg: #fbeeed;
| |
| | |
| /* Elementos */
| |
| --elem-neutral: #607060; --elem-neutral-bg: #f0f2f0;
| |
| --elem-water: #1a5a9a; --elem-water-bg: #eaf2fb;
| |
| --elem-earth: #5a7a2a; --elem-earth-bg: #eef5e8;
| |
| --elem-fire: #9a3a1a; --elem-fire-bg: #fbeee8;
| |
| --elem-wind: #2a7a6a; --elem-wind-bg: #eaf6f3;
| |
| --elem-poison: #5a3a7a; --elem-poison-bg: #f2eefb;
| |
| --elem-holy: #8a7a1a; --elem-holy-bg: #faf6dc;
| |
| --elem-dark: #2a2a4a; --elem-dark-bg: #eeeef5;
| |
| --elem-ghost: #4a4a5a; --elem-ghost-bg: #f0f0f5;
| |
| --elem-undead: #5a1a1a; --elem-undead-bg: #f5eeee;
| |
| | |
| /* Stats de personaje */
| |
| --stat-hp: #b83232;
| |
| --stat-sp: #2858a8;
| |
| --stat-str: #c05820;
| |
| --stat-agi: #208040;
| |
| --stat-vit: #804820;
| |
| --stat-int: #6030a0;
| |
| --stat-dex: #207878;
| |
| --stat-luk: #a07010;
| |
| | |
| /* Tipos de monstruo */
| |
| --race-demi: #3a5a7a;
| |
| --race-brute: #5a3a1a;
| |
| --race-plant: #2a5a2a;
| |
| --race-insect: #4a5a1a;
| |
| --race-fish: #1a4a6a;
| |
| --race-demon: #4a1a4a;
| |
| --race-angel: #7a6a1a;
| |
| --race-dragon: #6a1a1a;
| |
| --race-formless:#3a3a3a;
| |
| --race-undead: #2a1a1a;
| |
| } | | } |
|
| |
|
| | | /* === Contenido principal === */ |
| /* ========================================================= | | #content { |
| 1) INFOBOX UNIVERSAL
| | background-color: #fff; |
| Usada en: Monstruos, Items, NPCs, Skills, Mapas
| | padding: 30px; |
| ========================================================= */
| | margin: 20px auto; |
| .oroza-infobox {
| | border-radius: 12px; |
| float: right;
| | box-shadow: 0 0 10px rgba(0,0,0,0.1); |
| clear: right;
| | max-width: 1200px; |
| margin: 0 0 20px 24px;
| |
| width: 280px;
| |
| background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-md);
| |
| box-shadow: var(--oroza-shadow-sm);
| |
| overflow: hidden;
| |
| font-size: 13.5px;
| |
| } | | } |
|
| |
|
| .oroza-infobox-title { | | /* === Título de página === */ |
| padding: 12px 14px;
| | .firstHeading { |
| background: linear-gradient(180deg, #24384b 0%, #182634 100%);
| | font-size: 2.2rem; |
| color: #f6dda0;
| | font-weight: bold; |
| font-size: 15px;
| | color: #2b4a6d; |
| font-weight: 800;
| | margin-bottom: 20px; |
| text-align: center;
| |
| letter-spacing: .02em;
| |
| border-bottom: 2px solid var(--oroza-gold);
| |
| } | | } |
|
| |
|
| .oroza-infobox-subtitle {
| | /* === Tabla de contenido === */ |
| padding: 6px 14px 10px;
| | #toc { |
| background: linear-gradient(180deg, #24384b 0%, #182634 100%);
| | background-color: #eef4ff; |
| color: rgba(246,221,160,.65);
| | border: 1px solid #cddaf1; |
| font-size: 12px;
| | padding: 10px; |
| text-align: center;
| | border-radius: 8px; |
| margin-top: -4px;
| |
| border-bottom: 2px solid var(--oroza-gold);
| |
| } | | } |
|
| |
|
| .oroza-infobox-image {
| | /* === Enlaces === */ |
| display: flex;
| | a { |
| align-items: center;
| | color: #1e70bf; |
| justify-content: center;
| | text-decoration: none; |
| padding: 16px;
| |
| background: linear-gradient(180deg, #f8f3e8 0%, #f0e8d6 100%);
| |
| border-bottom: 1px solid var(--oroza-border-soft);
| |
| min-height: 120px;
| |
| position: relative;
| |
| } | | } |
| | | a:hover { |
| .oroza-infobox-image img {
| | text-decoration: underline; |
| max-width: 100%;
| |
| max-height: 160px;
| |
| object-fit: contain;
| |
| image-rendering: pixelated;
| |
| filter: drop-shadow(0 3px 8px rgba(24,38,52,.15));
| |
| } | | } |
|
| |
|
| .oroza-infobox table {
| | /* === Encabezados jerárquicos mejorados y sin subrayado === */ |
| width: 100%;
| | h1, h2, h3, h4, h5, h6 { |
| border-collapse: collapse;
| | font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; |
| margin: 0;
| | font-weight: 700; |
| | text-align: center; |
| | color: #2b4a6d; |
| | margin-top: 40px; |
| | margin-bottom: 30px; /* más espacio debajo */ |
| | line-height: 1.3; |
| | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08); |
| | border-bottom: none; /* elimina subrayado si existiera */ |
| | background: none !important; /* previene fondos heredados */ |
| } | | } |
|
| |
|
| .oroza-infobox table tr {
| | /* Tamaños progresivos de mayor a menor */ |
| border-bottom: 1px solid var(--oroza-border-soft);
| | h1 { |
| transition: background var(--oroza-fast);
| | font-size: 2.8rem; |
| } | | } |
| | | h2 { |
| .oroza-infobox table tr:last-child {
| | font-size: 2.5rem; |
| border-bottom: none;
| |
| } | | } |
| | | h3 { |
| .oroza-infobox table tr:hover {
| | font-size: 2.3rem; |
| background: rgba(200,161,74,.06);
| |
| } | | } |
| | | h4 { |
| .oroza-infobox table th {
| | font-size: 1.6rem; |
| padding: 8px 12px;
| |
| width: 42%;
| |
| background: rgba(248,239,217,.55);
| |
| color: var(--oroza-text);
| |
| font-size: 12.5px;
| |
| font-weight: 700;
| |
| text-align: left;
| |
| vertical-align: top;
| |
| border-right: 1px solid var(--oroza-border-soft);
| |
| } | | } |
| | | h5 { |
| .oroza-infobox table td {
| | font-size: 1.3rem; |
| padding: 8px 12px;
| |
| color: var(--oroza-text-body);
| |
| font-size: 13px;
| |
| vertical-align: middle;
| |
| } | | } |
| | | h6 { |
| .oroza-infobox-section {
| | font-size: 1.1rem; |
| padding: 8px 12px 4px;
| | color: #444; |
| background: linear-gradient(180deg, #f7eed8 0%, #ecd8a6 100%);
| |
| border-top: 1px solid var(--oroza-gold-border);
| |
| border-bottom: 1px solid var(--oroza-gold-border);
| |
| color: var(--oroza-primary);
| |
| font-size: 11.5px;
| |
| font-weight: 800;
| |
| text-transform: uppercase;
| |
| letter-spacing: .06em;
| |
| } | | } |
|
| |
|
| /* Infobox para monstruos */
| |
| .oroza-infobox.monster .oroza-infobox-image {
| |
| background:
| |
| radial-gradient(ellipse at center, rgba(200,161,74,.08) 0%, transparent 70%),
| |
| linear-gradient(180deg, #f8f3e8 0%, #f0e8d6 100%);
| |
| }
| |
|
| |
|
| /* Infobox para items */ | | /* === Botones con íconos === */ |
| .oroza-infobox.item .oroza-infobox-title { | | .button-icon { |
| background: linear-gradient(180deg, #2a3a52 0%, #1c2a3e 100%);
| | display: inline-flex; |
| | align-items: center; |
| | gap: 8px; |
| | background: #2b4a6d; |
| | color: white; |
| | padding: 8px 12px; |
| | border-radius: 8px; |
| | text-decoration: none; |
| | font-weight: 600; |
| | transition: background 0.2s ease; |
| } | | } |
| | | .button-icon:hover { |
| /* Infobox para NPCs */
| | background: #1e324f; |
| .oroza-infobox.npc .oroza-infobox-image { | |
| background: linear-gradient(180deg, #eef5fb 0%, #ddeaf4 100%);
| |
| } | | } |
| | | .button-icon::before { |
| /* Responsive infobox */
| | content: '🔹'; |
| @media screen and (max-width: 640px) {
| |
| .oroza-infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 20px 0;
| |
| }
| |
| } | | } |
|
| |
|
| | | /* === Cajas informativas === */ |
| /* ========================================================= | | .box-info { |
| 2) TABLA DE DROPS
| | background: #eef4ff; |
| ========================================================= */
| | border-left: 5px solid #1e70bf; |
| .oroza-drop-table { | | padding: 15px; |
| width: 100%;
| | border-radius: 8px; |
| border-collapse: separate;
| | margin: 20px 0; |
| border-spacing: 0;
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-sm);
| |
| overflow: hidden;
| |
| box-shadow: var(--oroza-shadow-xs);
| |
| font-size: 14px;
| |
| margin: 14px 0;
| |
| } | | } |
| | | .box-warning { |
| .oroza-drop-table thead tr { | | background: #fff4e5; |
| background: linear-gradient(180deg, #f7eed9 0%, #ecd7a0 100%);
| | border-left: 5px solid #ffa500; |
| | padding: 15px; |
| | border-radius: 8px; |
| | margin: 20px 0; |
| } | | } |
| | | .box-tip { |
| .oroza-drop-table thead th { | | background: #eaffea; |
| padding: 11px 14px;
| | border-left: 5px solid #28a745; |
| color: #53401a;
| | padding: 15px; |
| font-weight: 800;
| | border-radius: 8px; |
| font-size: 13px;
| | margin: 20px 0; |
| text-align: left;
| |
| border-bottom: 1px solid rgba(200,161,74,.30);
| |
| } | | } |
|
| |
|
| .oroza-drop-table tbody tr {
| | /* === Listas === */ |
| background: #fffdf9;
| | ul, ol { |
| border-bottom: 1px solid var(--oroza-border-soft);
| | padding-left: 40px; |
| transition: background var(--oroza-fast);
| | margin-bottom: 20px; |
| } | | } |
| | | .mw-body a { |
| .oroza-drop-table tbody tr:last-child { | | color: #1e70bf; |
| border-bottom: none;
| | font-weight: 500; |
| } | | } |
|
| |
|
| .oroza-drop-table tbody tr:hover { | | /* === Navbar horizontal === */ |
| background: #faf5ec;
| | .oroza-navbar { |
| | background: #2b3e50; |
| | padding: 15px 25px; |
| | display: flex; |
| | gap: 30px; |
| | justify-content: center; |
| | align-items: center; |
| | font-weight: bold; |
| | border-bottom: 3px solid #ffb400; |
| | border-radius: 12px; |
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| | margin: 20px auto; |
| | max-width: 1200px; |
| | position: relative; |
| } | | } |
|
| |
|
| .oroza-drop-table td { | | .oroza-navbar a { |
| padding: 10px 14px;
| | color: white !important; |
| color: var(--oroza-text-body);
| | text-decoration: none; |
| vertical-align: middle;
| | font-size: 16px; |
| } | | } |
| | | .oroza-navbar a:hover { |
| .oroza-drop-table .drop-icon { | | text-decoration: underline; |
| width: 36px;
| | color: #ffcc33 !important; |
| text-align: center;
| |
| padding: 6px 8px;
| |
| } | | } |
|
| |
|
| .oroza-drop-table .drop-icon img { | | .oroza-navbar-logo { |
| width: 28px;
| | position: absolute; |
| height: 28px;
| | left: 25px; |
| object-fit: contain;
| | display: flex; |
| image-rendering: pixelated;
| | align-items: center; |
| } | | } |
|
| |
|
| .oroza-drop-table .drop-name { | | .oroza-navbar-logo img { |
| font-weight: 700;
| | width: 80px; |
| color: var(--oroza-text);
| | height: auto; |
| | filter: drop-shadow(0 0 5px white); |
| } | | } |
|
| |
|
| .oroza-drop-table .drop-name a { | | /* === Sidebar lateral personalizada === */ |
| color: var(--oroza-text) !important;
| | .oroza-sidebar { |
| font-weight: 700;
| | background: #ffffff; |
| | border: 1px solid #ddd; |
| | padding: 15px 20px; |
| | border-radius: 10px; |
| | width: 240px; |
| | font-size: 14px; |
| | box-shadow: 0 0 8px rgba(0,0,0,0.05); |
| | margin-bottom: 20px; |
| } | | } |
|
| |
|
| .oroza-drop-table .drop-name a:hover { | | /* Menu title más grande y con más espaciado entre títulos */ |
| color: var(--oroza-gold-deep) !important;
| | .oroza-sidebar .menu-title { |
| | font-weight: bold; |
| | color: #2b4a6d; |
| | font-size: 17px; /* Aumentado */ |
| | margin: 20px 0 12px; /* Espacio arriba y abajo */ |
| | border-left: 4px solid #ffb400; |
| | padding-left: 10px; |
| } | | } |
|
| |
|
| .oroza-drop-table .drop-rate { | | /* Lista de items */ |
| text-align: right;
| | .oroza-sidebar ul { |
| font-size: 13px;
| | list-style: none; |
| font-weight: 700;
| | padding-left: 0; |
| white-space: nowrap;
| | margin: 0; |
| padding-right: 16px;
| |
| } | | } |
|
| |
|
| /* Colores de tasa de drop */
| | .oroza-sidebar li { |
| .drop-rate-mvp { color: var(--rarity-mvp); } | | margin: 6px 0; |
| .drop-rate-rare { color: var(--rarity-epic); }
| | display: flex; |
| .drop-rate-uncommon { color: var(--rarity-rare); }
| | align-items: center; |
| .drop-rate-low { color: var(--rarity-uncommon); }
| | gap: 8px; |
| .drop-rate-common { color: var(--rarity-common); }
| |
| | |
| .drop-rate-bar {
| |
| display: inline-block;
| |
| width: 60px;
| |
| height: 5px;
| |
| background: var(--oroza-border);
| |
| border-radius: 999px;
| |
| vertical-align: middle;
| |
| margin-right: 8px;
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .drop-rate-bar-fill { | | .oroza-sidebar li::before { |
| height: 100%;
| | display: inline-block; |
| border-radius: 999px;
| | margin-right: 3px; |
| background: var(--oroza-gold);
| |
| transition: width .6s ease;
| |
| } | | } |
|
| |
|
| | | /* === Tablas personalizadas (oroza-table) === */ |
| /* ========================================================= | | .oroza-table { |
| 3) BADGES DE RAREZA, ELEMENTO, RAZA Y CLASE
| | width: 100%; |
| ========================================================= */
| | border-collapse: collapse; |
| .oroza-badge-rarity, | | margin: 20px 0; |
| .oroza-badge-elem,
| | font-size: 14px; |
| .oroza-badge-race,
| | background-color: #fff; |
| .oroza-badge-class,
| | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); |
| .oroza-badge-size {
| | border-radius: 8px; |
| display: inline-flex;
| | overflow: hidden; |
| align-items: center;
| |
| gap: 5px;
| |
| padding: 3px 10px;
| |
| border-radius: var(--oroza-radius-pill);
| |
| font-size: 12px;
| |
| font-weight: 800;
| |
| border: 1px solid transparent;
| |
| white-space: nowrap;
| |
| } | | } |
| | | .oroza-table thead { |
| /* Rareza */
| | background-color: #2b4a6d; |
| .rarity-common { background: var(--rarity-common-bg); color: var(--rarity-common); border-color: rgba(106,122,106,.22); } | | color: #fff; |
| .rarity-uncommon { background: var(--rarity-uncommon-bg); color: var(--rarity-uncommon); border-color: rgba(42,106,42,.22); }
| | text-align: left; |
| .rarity-rare { background: var(--rarity-rare-bg); color: var(--rarity-rare); border-color: rgba(26,74,154,.22); }
| | font-weight: bold; |
| .rarity-epic { background: var(--rarity-epic-bg); color: var(--rarity-epic); border-color: rgba(122,42,154,.22); }
| |
| .rarity-legendary { background: var(--rarity-legendary-bg); color: var(--rarity-legendary); border-color: rgba(160,122,16,.22); }
| |
| .rarity-mvp { background: var(--rarity-mvp-bg); color: var(--rarity-mvp); border-color: rgba(154,26,26,.22); }
| |
| | |
| /* Elementos */
| |
| .elem-neutral { background: var(--elem-neutral-bg); color: var(--elem-neutral); border-color: rgba(96,112,96,.2); }
| |
| .elem-water { background: var(--elem-water-bg); color: var(--elem-water); border-color: rgba(26,90,154,.2); }
| |
| .elem-earth { background: var(--elem-earth-bg); color: var(--elem-earth); border-color: rgba(90,122,42,.2); }
| |
| .elem-fire { background: var(--elem-fire-bg); color: var(--elem-fire); border-color: rgba(154,58,26,.2); }
| |
| .elem-wind { background: var(--elem-wind-bg); color: var(--elem-wind); border-color: rgba(42,122,106,.2); }
| |
| .elem-poison { background: var(--elem-poison-bg); color: var(--elem-poison); border-color: rgba(90,58,122,.2); }
| |
| .elem-holy { background: var(--elem-holy-bg); color: var(--elem-holy); border-color: rgba(138,122,26,.2); }
| |
| .elem-dark { background: var(--elem-dark-bg); color: var(--elem-dark); border-color: rgba(42,42,74,.2); }
| |
| .elem-ghost { background: var(--elem-ghost-bg); color: var(--elem-ghost); border-color: rgba(74,74,90,.2); }
| |
| .elem-undead { background: var(--elem-undead-bg); color: var(--elem-undead); border-color: rgba(90,26,26,.2); }
| |
| | |
| /* Tamaño de monstruo */
| |
| .size-small { background: #f0f4f0; color: #4a6a4a; border-color: rgba(74,106,74,.2); }
| |
| .size-medium { background: #f4f0ec; color: #6a5a3a; border-color: rgba(106,90,58,.2); }
| |
| .size-large { background: #f4eef0; color: #6a3a4a; border-color: rgba(106,58,74,.2); }
| |
| | |
| | |
| /* =========================================================
| |
| 4) BARRAS DE STATS (HP, SP, ATRIBUTOS)
| |
| ========================================================= */
| |
| .oroza-stat-block {
| |
| margin: 14px 0;
| |
| } | | } |
| | | .oroza-table th, |
| .oroza-stat-row { | | .oroza-table td { |
| display: flex;
| | padding: 12px 15px; |
| align-items: center;
| | border-bottom: 1px solid #eee; |
| gap: 10px;
| |
| margin-bottom: 8px;
| |
| } | | } |
| | | .oroza-table tbody tr:nth-child(even) { |
| .oroza-stat-label { | | background-color: #f9f9f9; |
| width: 42px;
| |
| font-size: 11.5px;
| |
| font-weight: 800;
| |
| color: var(--oroza-text-soft);
| |
| text-transform: uppercase;
| |
| letter-spacing: .04em;
| |
| flex-shrink: 0;
| |
| } | | } |
| | | .oroza-table tbody tr:hover { |
| .oroza-stat-bar-bg { | | background-color: #eef4ff; |
| flex: 1;
| |
| height: 8px;
| |
| background: var(--oroza-border-soft);
| |
| border-radius: 999px;
| |
| overflow: hidden;
| |
| position: relative;
| |
| } | | } |
| | | .oroza-table .highlight { |
| .oroza-stat-bar-fill { | | color: #ffb400; |
| height: 100%;
| | font-weight: bold; |
| border-radius: 999px;
| |
| transition: width .8s cubic-bezier(.4,0,.2,1);
| |
| position: relative;
| |
| } | | } |
| | | .oroza-table .center-icon { |
| .oroza-stat-bar-fill::after { | | text-align: center; |
| content: '';
| | font-size: 18px; |
| position: absolute;
| |
| top: 0; left: 0; right: 0;
| |
| height: 40%;
| |
| background: rgba(255,255,255,.25);
| |
| border-radius: 999px;
| |
| } | | } |
| | | .oroza-table .zeny { |
| .stat-bar-hp { background: linear-gradient(90deg, #c04040, #e05050); } | | color: #28a745; |
| .stat-bar-sp { background: linear-gradient(90deg, #3060b0, #4080d0); } | | font-weight: bold; |
| .stat-bar-str { background: linear-gradient(90deg, #b04820, #d06030); }
| |
| .stat-bar-agi { background: linear-gradient(90deg, #208040, #30a050); }
| |
| .stat-bar-vit { background: linear-gradient(90deg, #784020, #986040); }
| |
| .stat-bar-int { background: linear-gradient(90deg, #5828a0, #7840c0); }
| |
| .stat-bar-dex { background: linear-gradient(90deg, #187070, #249090); }
| |
| .stat-bar-luk { background: linear-gradient(90deg, #906010, #b08020); }
| |
| | |
| .oroza-stat-val {
| |
| width: 52px;
| |
| text-align: right;
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| color: var(--oroza-text);
| |
| flex-shrink: 0;
| |
| font-variant-numeric: tabular-nums;
| |
| } | | } |
|
| |
|
| | /* === Responsive === */ |
| | @media screen and (max-width: 768px) { |
| | .oroza-flex-wrapper { |
| | flex-direction: column; |
| | gap: 20px; |
| | } |
|
| |
|
| /* =========================================================
| | .oroza-flex-wrapper > div { |
| 5) TABS / PESTAÑAS DE CONTENIDO
| | width: 100% !important; |
| ========================================================= */
| | } |
| .oroza-tabs { | |
| margin: 20px 0; | |
| } | |
|
| |
|
| .oroza-tab-nav { | | .oroza-sidebar { |
| display: flex; | | width: 100% !important; |
| gap: 0;
| | margin-bottom: 20px; |
| border-bottom: 2px solid var(--oroza-border); | | display: block !important; |
| flex-wrap: wrap; | | } |
| } | |
|
| |
|
| .oroza-tab-btn {
| | .oroza-navbar { |
| padding: 10px 18px;
| | flex-direction: column; |
| background: transparent;
| |
| border: none;
| |
| border-bottom: 2px solid transparent;
| |
| margin-bottom: -2px;
| |
| color: var(--oroza-text-soft);
| |
| font-size: 14px;
| |
| font-weight: 700;
| |
| cursor: pointer;
| |
| transition:
| |
| color var(--oroza-fast),
| |
| border-color var(--oroza-fast),
| |
| background var(--oroza-fast);
| |
| border-radius: var(--oroza-radius-xs) var(--oroza-radius-xs) 0 0;
| |
| }
| |
| | |
| .oroza-tab-btn:hover {
| |
| color: var(--oroza-primary);
| |
| background: rgba(200,161,74,.06);
| |
| }
| |
| | |
| .oroza-tab-btn.active {
| |
| color: var(--oroza-primary-deep);
| |
| border-bottom-color: var(--oroza-gold);
| |
| background: rgba(200,161,74,.06);
| |
| }
| |
| | |
| .oroza-tab-panel {
| |
| display: none;
| |
| padding: 20px 0;
| |
| animation: tabFadeIn .2s ease;
| |
| }
| |
| | |
| .oroza-tab-panel.active {
| |
| display: block;
| |
| }
| |
| | |
| @keyframes tabFadeIn {
| |
| from { opacity: 0; transform: translateY(4px); }
| |
| to { opacity: 1; transform: translateY(0); }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 6) TABLA DE HABILIDADES / SKILLS
| |
| ========================================================= */
| |
| .oroza-skill-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
| |
| gap: 14px;
| |
| margin: 16px 0;
| |
| }
| |
| | |
| .oroza-skill-card {
| |
| background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
| |
| border: 1px solid var(--oroza-border-soft);
| |
| border-radius: var(--oroza-radius-sm);
| |
| padding: 14px;
| |
| display: flex;
| |
| gap: 12px;
| |
| align-items: flex-start;
| |
| transition:
| |
| transform var(--oroza-fast),
| |
| box-shadow var(--oroza-fast),
| |
| border-color var(--oroza-fast);
| |
| cursor: default;
| |
| }
| |
| | |
| .oroza-skill-card:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: var(--oroza-shadow-sm);
| |
| border-color: var(--oroza-gold-border);
| |
| }
| |
| | |
| .oroza-skill-icon { | |
| width: 44px; | |
| height: 44px;
| |
| border-radius: 10px;
| |
| border: 1px solid var(--oroza-border);
| |
| background: var(--oroza-surface-soft);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| flex-shrink: 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .oroza-skill-icon img {
| |
| width: 36px;
| |
| height: 36px;
| |
| object-fit: contain;
| |
| image-rendering: pixelated;
| |
| }
| |
| | |
| .oroza-skill-info .skill-name {
| |
| font-size: 13.5px;
| |
| font-weight: 800;
| |
| color: var(--oroza-primary);
| |
| margin-bottom: 3px;
| |
| }
| |
| | |
| .oroza-skill-info .skill-type {
| |
| font-size: 11.5px;
| |
| color: var(--oroza-text-muted);
| |
| margin-bottom: 5px;
| |
| display: flex;
| |
| gap: 6px;
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| .oroza-skill-info .skill-desc {
| |
| font-size: 12.5px;
| |
| color: var(--oroza-text-body);
| |
| line-height: 1.6;
| |
| }
| |
| | |
| /* Skill tipo badge */
| |
| .skill-passive { background: #eef5e8; color: #2a6a2a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(42,106,42,.2); }
| |
| .skill-active { background: #eef2fb; color: #1a4a9a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(26,74,154,.2); }
| |
| .skill-toggle { background: #f4eefb; color: #7a2a9a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(122,42,154,.2); }
| |
| .skill-support { background: #fdf4dc; color: #8a6810; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(138,104,16,.2); }
| |
| | |
| | |
| /* =========================================================
| |
| 7) TABLA DE QUESTS / MISIONES
| |
| ========================================================= */
| |
| .oroza-quest-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 16px 0;
| |
| }
| |
| | |
| .oroza-quest-item {
| |
| display: flex;
| |
| align-items: flex-start;
| |
| gap: 14px;
| |
| padding: 14px 16px;
| |
| background: linear-gradient(180deg, #fffdf9 0%, #faf5ec 100%);
| |
| border: 1px solid var(--oroza-border-soft);
| |
| border-radius: var(--oroza-radius-sm);
| |
| margin-bottom: 10px;
| |
| transition:
| |
| transform var(--oroza-fast),
| |
| box-shadow var(--oroza-fast);
| |
| }
| |
| | |
| .oroza-quest-item:hover {
| |
| transform: translateX(3px);
| |
| box-shadow: var(--oroza-shadow-xs);
| |
| }
| |
| | |
| .oroza-quest-num {
| |
| width: 32px;
| |
| height: 32px;
| |
| border-radius: 50%;
| |
| background: linear-gradient(180deg, var(--oroza-primary-2) 0%, var(--oroza-primary-deep) 100%);
| |
| color: #f6dda0;
| |
| font-size: 13px;
| |
| font-weight: 800;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| flex-shrink: 0;
| |
| border: 1px solid rgba(246,221,160,.2);
| |
| }
| |
| | |
| .oroza-quest-content .quest-title {
| |
| font-size: 14.5px;
| |
| font-weight: 800;
| |
| color: var(--oroza-primary);
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .oroza-quest-content .quest-desc {
| |
| font-size: 13.5px;
| |
| color: var(--oroza-text-body);
| |
| line-height: 1.65;
| |
| }
| |
| | |
| .oroza-quest-content .quest-reward {
| |
| margin-top: 6px;
| |
| font-size: 12.5px;
| |
| color: var(--oroza-text-soft);
| |
| }
| |
| | |
| .oroza-quest-content .quest-reward strong {
| |
| color: var(--oroza-gold-deep);
| |
| }
| |
| | |
| /* Estado de quest */
| |
| .quest-badge {
| |
| display: inline-flex;
| |
| align-items: center; | | align-items: center; |
| padding: 2px 9px;
| | } |
| border-radius: 999px;
| |
| font-size: 11.5px;
| |
| font-weight: 800;
| |
| margin-left: 8px;
| |
| }
| |
| | |
| .quest-daily { background: #eef2fb; color: #1a4a9a; border: 1px solid rgba(26,74,154,.2); }
| |
| .quest-main { background: #fdf4dc; color: #8a6810; border: 1px solid rgba(138,104,16,.2); }
| |
| .quest-repeatable { background: #eef6ee; color: #2a6a2a; border: 1px solid rgba(42,106,42,.2); }
| |
| .quest-event { background: #fbeeed; color: #9a1a1a; border: 1px solid rgba(154,26,26,.2); }
| |
| | |
| | |
| /* =========================================================
| |
| 8) TABLA DE EXPERIENCIA / NIVEL
| |
| ========================================================= */
| |
| .oroza-level-table {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-sm);
| |
| overflow: hidden;
| |
| font-size: 14px;
| |
| margin: 14px 0;
| |
| }
| |
| | |
| .oroza-level-table thead th {
| |
| padding: 11px 14px;
| |
| background: linear-gradient(180deg, #24384b 0%, #182634 100%);
| |
| color: #f6dda0;
| |
| font-size: 12.5px;
| |
| font-weight: 800;
| |
| text-align: center;
| |
| border-bottom: 2px solid var(--oroza-gold);
| |
| }
| |
| | |
| .oroza-level-table tbody tr {
| |
| background: #fffdf9;
| |
| border-bottom: 1px solid var(--oroza-border-soft);
| |
| transition: background var(--oroza-fast);
| |
| }
| |
| | |
| .oroza-level-table tbody tr:hover {
| |
| background: #faf5ec;
| |
| }
| |
| | |
| .oroza-level-table tbody tr:nth-child(10n) {
| |
| background: linear-gradient(90deg, #fdf8ef, #fffdf9);
| |
| font-weight: 700;
| |
| border-bottom: 1px solid rgba(200,161,74,.25);
| |
| }
| |
| | |
| .oroza-level-table td {
| |
| padding: 8px 14px;
| |
| text-align: center;
| |
| color: var(--oroza-text-body);
| |
| }
| |
| | |
| .oroza-level-table td:first-child {
| |
| font-weight: 700;
| |
| color: var(--oroza-primary);
| |
| background: rgba(248,239,217,.45);
| |
| border-right: 1px solid var(--oroza-border-soft);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 9) CARD DE CLASE / JOB
| |
| ========================================================= */
| |
| .oroza-class-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
| |
| gap: 16px;
| |
| margin: 16px 0;
| |
| }
| |
| | |
| .oroza-class-card {
| |
| background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
| |
| border: 1px solid var(--oroza-border-soft);
| |
| border-radius: var(--oroza-radius-md);
| |
| overflow: hidden;
| |
| text-align: center;
| |
| transition:
| |
| transform var(--oroza-mid),
| |
| box-shadow var(--oroza-mid),
| |
| border-color var(--oroza-mid);
| |
| cursor: pointer;
| |
| }
| |
| | |
| .oroza-class-card:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: var(--oroza-shadow-md);
| |
| border-color: var(--oroza-gold-border);
| |
| }
| |
| | |
| .oroza-class-card:hover .class-header {
| |
| border-bottom-color: var(--oroza-gold);
| |
| }
| |
| | |
| .class-header {
| |
| padding: 14px 12px;
| |
| background: linear-gradient(180deg, #24384b 0%, #182634 100%);
| |
| border-bottom: 2px solid transparent;
| |
| transition: border-color var(--oroza-mid);
| |
| }
| |
| | |
| .class-header img {
| |
| width: 64px;
| |
| height: 64px;
| |
| object-fit: contain;
| |
| image-rendering: pixelated;
| |
| filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
| |
| }
| |
| | |
| .class-body {
| |
| padding: 12px;
| |
| }
| |
| | |
| .class-name {
| |
| font-size: 14px;
| |
| font-weight: 800;
| |
| color: var(--oroza-primary-deep);
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .class-desc {
| |
| font-size: 12px;
| |
| color: var(--oroza-text-soft);
| |
| line-height: 1.55;
| |
| }
| |
| | |
| .class-tier {
| |
| display: inline-block;
| |
| margin-top: 8px;
| |
| padding: 2px 10px;
| |
| border-radius: 999px;
| |
| font-size: 11px;
| |
| font-weight: 800;
| |
| background: var(--oroza-gold-soft);
| |
| color: var(--oroza-gold-deep);
| |
| border: 1px solid var(--oroza-gold-border);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 10) MAPA / MINIMAP
| |
| ========================================================= */
| |
| .oroza-map-frame {
| |
| position: relative;
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-md);
| |
| overflow: hidden;
| |
| box-shadow: var(--oroza-shadow-sm);
| |
| background: #d4c9b0;
| |
| margin: 16px 0;
| |
| } | |
|
| |
|
| .oroza-map-frame img { | | .oroza-navbar a { |
| display: block; | | display: block; |
| width: 100%;
| |
| height: auto;
| |
| image-rendering: pixelated;
| |
| }
| |
|
| |
| .oroza-map-legend {
| |
| padding: 10px 14px;
| |
| background: linear-gradient(180deg, #fffaf1 0%, #f5ead0 100%);
| |
| border-top: 1px solid var(--oroza-gold-border);
| |
| display: flex;
| |
| gap: 16px;
| |
| flex-wrap: wrap;
| |
| font-size: 12.5px;
| |
| }
| |
|
| |
| .oroza-map-legend-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| color: var(--oroza-text-body);
| |
| }
| |
|
| |
| .map-dot {
| |
| width: 12px;
| |
| height: 12px;
| |
| border-radius: 50%;
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| .map-dot-spawn { background: #c04040; border: 2px solid #8a2020; }
| |
| .map-dot-npc { background: #3060b0; border: 2px solid #1a3a80; }
| |
| .map-dot-warp { background: #208040; border: 2px solid #105020; }
| |
| .map-dot-shop { background: #a07010; border: 2px solid #705008; }
| |
| .map-dot-quest { background: #8030a0; border: 2px solid #501870; }
| |
|
| |
|
| |
| /* =========================================================
| |
| 11) BREADCRUMB / MIGAS DE PAN
| |
| ========================================================= */
| |
| .oroza-breadcrumb {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| flex-wrap: wrap;
| |
| padding: 10px 0; | | padding: 10px 0; |
| margin-bottom: 16px;
| | } |
| font-size: 13.5px;
| |
| } | |
|
| |
|
| .oroza-breadcrumb a { | | .toggle-label { |
| color: var(--oroza-text-soft) !important; | | display: none !important; |
| font-weight: 600;
| | } |
| } | | } |
|
| |
|
| .oroza-breadcrumb a:hover {
| | /* === Eliminar menú original de MediaWiki === */ |
| color: var(--oroza-gold-deep) !important;
| | #p-logo, |
| | #footer, |
| | #mw-panel { |
| | display: none !important; |
| } | | } |
|
| |
|
| .oroza-breadcrumb .sep { | | /* === Quitar funcionalidad del menú colapsable móvil === */ |
| color: var(--oroza-border-strong);
| | .toggle-checkbox { |
| font-size: 11px;
| | display: none; |
| user-select: none;
| |
| } | | } |
| | | .toggle-label { |
| .oroza-breadcrumb .current { | | display: none !important; |
| color: var(--oroza-primary-deep);
| |
| font-weight: 700;
| |
| } | | } |
|
| |
|
|
| |
|
| /* =========================================================
| | .oroza-table.auto-width { |
| 12) CAJA DE NAVEGACION (NavBox)
| | width: auto !important; |
| ========================================================= */
| | max-width: 100%; |
| .oroza-navbox { | | table-layout: auto !important; |
| margin: 28px 0 20px;
| | margin: 20px auto; |
| background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
| | display: table; |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-md);
| |
| overflow: hidden;
| |
| box-shadow: var(--oroza-shadow-xs);
| |
| font-size: 13.5px;
| |
| } | | } |
|
| |
|
| .oroza-navbox-title { | | .zoom-img { |
| padding: 12px 16px; | | transition: transform 0.25s ease; |
| background: linear-gradient(180deg, #24384b 0%, #182634 100%);
| | cursor: zoom-in; |
| color: #f6dda0;
| | } |
| font-size: 13px; | |
| font-weight: 800;
| |
| border-bottom: 2px solid var(--oroza-gold);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| gap: 10px;
| |
| } | |
|
| |
|
| .oroza-navbox-body { | | .zoom-img:hover { |
| padding: 14px 16px; | | transform: scale(2); |
| display: flex;
| | z-index: 10; |
| flex-wrap: wrap; | | } |
| gap: 18px;
| |
| } | |
|
| |
|
| .oroza-navbox-group {
| |
| min-width: 140px;
| |
| flex: 1;
| |
| }
| |
|
| |
|
| .navbox-group-title {
| |
| font-size: 12px;
| |
| font-weight: 800;
| |
| color: var(--oroza-text-soft);
| |
| text-transform: uppercase;
| |
| letter-spacing: .05em;
| |
| margin-bottom: 6px;
| |
| padding-bottom: 4px;
| |
| border-bottom: 1px solid var(--oroza-border-soft);
| |
| }
| |
|
| |
|
| .oroza-navbox-body a { | | img.round-fade { |
| display: inline-block;
| | width: 55%; |
| margin: 2px 4px 2px 0;
| | border-radius: 20px; |
| padding: 3px 9px;
| | margin: 10px auto; |
| background: var(--oroza-surface-soft);
| | display: block; |
| border: 1px solid var(--oroza-border-soft);
| | box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 0 15px rgba(0,0,0,0.08); |
| border-radius: var(--oroza-radius-pill);
| | transition: transform 0.3s ease; |
| color: var(--oroza-text-body) !important;
| | object-fit: cover; |
| font-size: 13px;
| | opacity: 0.97; |
| font-weight: 600;
| |
| transition:
| |
| background var(--oroza-fast),
| |
| border-color var(--oroza-fast),
| |
| color var(--oroza-fast);
| |
| } | | } |
| | | img.round-fade:hover { |
| .oroza-navbox-body a:hover { | | transform: scale(1.3); |
| background: var(--oroza-gold-soft);
| | opacity: 1; |
| border-color: var(--oroza-gold-border);
| |
| color: var(--oroza-gold-deep) !important;
| |
| } | | } |
|
| |
|
| |
| /* =========================================================
| |
| 13) PAGINA DE CATEGORIA
| |
| ========================================================= */
| |
| .oroza-category-header {
| |
| margin-bottom: 20px;
| |
| padding: 20px 24px;
| |
| background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-md);
| |
| border-left: 4px solid var(--oroza-gold);
| |
| box-shadow: var(--oroza-shadow-xs);
| |
| }
| |
|
| |
| .oroza-category-title {
| |
| font-size: 22px;
| |
| font-weight: 800;
| |
| color: var(--oroza-primary-deep);
| |
| margin-bottom: 6px;
| |
| }
| |
|
| |
| .oroza-category-desc {
| |
| font-size: 14.5px;
| |
| color: var(--oroza-text-body);
| |
| line-height: 1.75;
| |
| }
| |
|
| |
| .oroza-category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
| |
| gap: 12px;
| |
| margin: 16px 0;
| |
| }
| |
|
| |
| .oroza-category-link {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| padding: 11px 14px;
| |
| background: linear-gradient(180deg, #fffdf9 0%, #faf5ec 100%);
| |
| border: 1px solid var(--oroza-border-soft);
| |
| border-radius: var(--oroza-radius-sm);
| |
| color: var(--oroza-text) !important;
| |
| font-weight: 700;
| |
| font-size: 14px;
| |
| text-decoration: none !important;
| |
| transition:
| |
| transform var(--oroza-fast),
| |
| box-shadow var(--oroza-fast),
| |
| border-color var(--oroza-fast),
| |
| background var(--oroza-fast);
| |
| }
| |
|
| |
| .oroza-category-link:hover {
| |
| transform: translateX(3px);
| |
| box-shadow: var(--oroza-shadow-xs);
| |
| border-color: var(--oroza-gold-border);
| |
| background: linear-gradient(180deg, #fffdfa 0%, #fdf5e6 100%);
| |
| color: var(--oroza-primary-deep) !important;
| |
| }
| |
|
| |
| .oroza-category-link img {
| |
| width: 30px;
| |
| height: 30px;
| |
| object-fit: contain;
| |
| image-rendering: pixelated;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 14) SEARCH HIGHLIGHT
| |
| ========================================================= */
| |
| .searchresult .searchmatch,
| |
| .oroza-highlight {
| |
| background: rgba(200,161,74,.22);
| |
| color: var(--oroza-primary-deep);
| |
| padding: 0 3px;
| |
| border-radius: 3px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 15) TABLA DE COMPARACION DE ITEMS
| |
| ========================================================= */
| |
| .oroza-compare-table {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-sm);
| |
| overflow: hidden;
| |
| font-size: 14px;
| |
| margin: 14px 0;
| |
| }
| |
|
| |
| .oroza-compare-table thead th {
| |
| padding: 13px 14px;
| |
| background: linear-gradient(180deg, #f7eed9 0%, #ecd7a0 100%);
| |
| color: #53401a;
| |
| font-weight: 800;
| |
| font-size: 13.5px;
| |
| text-align: center;
| |
| border-bottom: 1px solid rgba(200,161,74,.30);
| |
| border-right: 1px solid var(--oroza-border-soft);
| |
| }
| |
|
| |
| .oroza-compare-table thead th:first-child {
| |
| text-align: left;
| |
| background: linear-gradient(180deg, #f0e8d6 0%, #e4d4b4 100%);
| |
| }
| |
|
| |
| .oroza-compare-table tbody tr {
| |
| border-bottom: 1px solid var(--oroza-border-soft);
| |
| transition: background var(--oroza-fast);
| |
| }
| |
|
| |
| .oroza-compare-table tbody tr:hover {
| |
| background: rgba(200,161,74,.04);
| |
| }
| |
|
| |
| .oroza-compare-table td {
| |
| padding: 10px 14px;
| |
| text-align: center;
| |
| color: var(--oroza-text-body);
| |
| border-right: 1px solid var(--oroza-border-soft);
| |
| }
| |
|
| |
| .oroza-compare-table td:first-child {
| |
| text-align: left;
| |
| font-weight: 700;
| |
| color: var(--oroza-text);
| |
| background: rgba(248,239,217,.4);
| |
| }
| |
|
| |
| .compare-better { color: #208040; font-weight: 800; }
| |
| .compare-worse { color: #9a2020; }
| |
| .compare-equal { color: var(--oroza-text-muted); }
| |
|
| |
|
| |
| /* =========================================================
| |
| 16) SPOILER / COLLAPSE
| |
| ========================================================= */
| |
| .oroza-spoiler {
| |
| margin: 14px 0;
| |
| border: 1px solid var(--oroza-border);
| |
| border-radius: var(--oroza-radius-sm);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .oroza-spoiler-toggle {
| |
| width: 100%;
| |
| padding: 12px 16px;
| |
| background: linear-gradient(180deg, #f8f0dd 0%, #efdfb0 100%);
| |
| border: none;
| |
| border-left: 4px solid var(--oroza-gold);
| |
| color: var(--oroza-primary);
| |
| font-size: 14px;
| |
| font-weight: 800;
| |
| text-align: left;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| transition: background var(--oroza-fast);
| |
| }
| |
|
| |
| .oroza-spoiler-toggle:hover {
| |
| background: linear-gradient(180deg, #fbf3e4 0%, #f3e4c0 100%);
| |
| }
| |
|
| |
| .oroza-spoiler-toggle::after {
| |
| content: "▼";
| |
| font-size: 10px;
| |
| transition: transform var(--oroza-fast);
| |
| }
| |
|
| |
| .oroza-spoiler-toggle.open::after {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .oroza-spoiler-body {
| |
| display: none;
| |
| padding: 16px;
| |
| background: var(--oroza-surface);
| |
| color: var(--oroza-text-body);
| |
| font-size: 14.5px;
| |
| line-height: 1.8;
| |
| border-top: 1px solid var(--oroza-border-soft);
| |
| animation: tabFadeIn .2s ease;
| |
| }
| |
|
| |
| .oroza-spoiler-body.open {
| |
| display: block;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 17) FOOTER DE PAGINA
| |
| ========================================================= */
| |
| .oroza-page-footer {
| |
| margin-top: 40px;
| |
| padding-top: 20px;
| |
| border-top: 1px solid var(--oroza-border-soft);
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| font-size: 13px;
| |
| color: var(--oroza-text-muted);
| |
| }
| |
|
| |
| .oroza-page-footer a {
| |
| color: var(--oroza-text-soft) !important;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .oroza-page-footer a:hover {
| |
| color: var(--oroza-gold-deep) !important;
| |
| }
| |
|
| |
| .oroza-last-edited {
| |
| font-size: 12.5px;
| |
| color: var(--oroza-text-muted);
| |
| font-style: italic;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 18) JS — SCRIPTS DE APOYO
| |
| Pegar en common.js o al final del skin
| |
| ========================================================= */
| |
| /*
| |
| // Tabs
| |
| document.querySelectorAll('.oroza-tab-btn').forEach(btn => {
| |
| btn.addEventListener('click', () => {
| |
| const tabs = btn.closest('.oroza-tabs');
| |
| tabs.querySelectorAll('.oroza-tab-btn').forEach(b => b.classList.remove('active'));
| |
| tabs.querySelectorAll('.oroza-tab-panel').forEach(p => p.classList.remove('active'));
| |
| btn.classList.add('active');
| |
| tabs.querySelector('#' + btn.dataset.tab).classList.add('active');
| |
| });
| |
| });
| |
|
| |
| // Spoilers
| |
| document.querySelectorAll('.oroza-spoiler-toggle').forEach(toggle => {
| |
| toggle.addEventListener('click', () => {
| |
| toggle.classList.toggle('open');
| |
| toggle.nextElementSibling.classList.toggle('open');
| |
| });
| |
| });
| |
|
| |
| // Animate stat bars on load
| |
| const observer = new IntersectionObserver(entries => {
| |
| entries.forEach(e => {
| |
| if (e.isIntersecting) {
| |
| e.target.querySelectorAll('.oroza-stat-bar-fill').forEach(bar => {
| |
| bar.style.width = bar.dataset.value + '%';
| |
| });
| |
| }
| |
| });
| |
| }, { threshold: 0.2 });
| |
| document.querySelectorAll('.oroza-stat-block').forEach(b => observer.observe(b));
| |
| */
| |