Diferencia entre revisiones de «Plantilla:Navbar»

De Oroza RO Wiki
Ir a la navegación Ir a la búsqueda
← Edición anterior
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
<html>
<html>
<div class="oroza-navbar">
<div class="oroza-navbar">
     <div class="oroza-navbar-inner">
     <div class="oroza-navbar-inner">


         <div class="oroza-navbar-brand-wrap">
         <div class="oroza-navbar-brand-wrap">
             <a href="https://orozaro.com/wiki/index.php?title=Main_Page" class="oroza-navbar-brand">
             <a href="https://orozaro.com/wiki/index.php?title=P%C3%A1gina_principal" class="oroza-navbar-brand">
                 <span class="oroza-navbar-brand-top">OROZA RO</span>
                 <span class="oroza-navbar-brand-top">OROZA RO</span>
                 <span class="oroza-navbar-brand-bottom">WIKI</span>
                 <span class="oroza-navbar-brand-bottom">WIKI</span>
Línea 13: Línea 12:
         <div class="oroza-navbar-links">
         <div class="oroza-navbar-links">
             <a href="https://orozaro.com" class="oroza-navbar-link">Pagina Web</a>
             <a href="https://orozaro.com" class="oroza-navbar-link">Pagina Web</a>
             <a href="https://orozaro.com/?module=account&amp;action=create" class="oroza-navbar-link oroza-navbar-link-cta">Crea tu Cuenta</a>
             <a href="https://orozaro.com/?module=account&amp;action=create" class="oroza-navbar-link">Crea tu Cuenta</a>
             <a href="https://orozaro.com/?module=main&amp;action=download" class="oroza-navbar-link">Descargas</a>
             <a href="https://orozaro.com/?module=main&amp;action=download" class="oroza-navbar-link">Descargas</a>
             <a href="https://orozaro.com/?module=donate&amp;action=index" class="oroza-navbar-link">Donaciones</a>
             <a href="https://orozaro.com/?module=paypal&amp;action=como_donar" class="oroza-navbar-link">Donaciones</a>
             <a href="https://orozaro.com/?module=vote&amp;action=index" class="oroza-navbar-link">Vota por el Server</a>
             <a href="https://orozaro.com/vcp/login.php" class="oroza-navbar-link">Vota por el Server</a>
         </div>
         </div>


<div class="oroza-navbar-lang">
        <div class="oroza-navbar-lang">
    <a id="oroza-lang-es" href="https://orozaro.com/wiki/index.php?title=Main_Page" class="oroza-lang-pill">
            <a id="oroza-lang-es" href="https://orozaro.com/wiki/index.php?title=Main_Page" class="oroza-lang-pill">
        <span class="oroza-flag">🇪🇸</span>
                <span class="oroza-flag">🇪🇸</span>
        <span class="oroza-lang-text">ES</span>
                <span class="oroza-lang-text">ES</span>
    </a>
            </a>


    <a id="oroza-lang-en" href="https://en.orozaro.com/wiki/index.php?title=Main_Page" class="oroza-lang-pill">
            <a id="oroza-lang-en" href="https://en.orozaro.com/wiki/index.php?title=Main_Page" class="oroza-lang-pill">
        <span class="oroza-flag">🇺🇸</span>
                <span class="oroza-flag">🇺🇸</span>
        <span class="oroza-lang-text">EN</span>
                <span class="oroza-lang-text">EN</span>
    </a>
            </a>
</div>
        </div>


     </div>
     </div>
Línea 53: Línea 52:
     padding: 16px 20px;
     padding: 16px 20px;
     border-radius: 24px;
     border-radius: 24px;
     background: linear-gradient(180deg, #334a65 0%, #27384c 100%);
     background:
        radial-gradient(circle at top center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(180deg, #365072 0%, #2b3f59 52%, #243548 100%);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-bottom: 3px solid #d6a91d;
     border-bottom: 3px solid #d6a91d;
     box-shadow: 0 14px 34px rgba(14, 24, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
     box-shadow:
        0 14px 34px rgba(14, 24, 38, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
     box-sizing: border-box;
     box-sizing: border-box;
     overflow: hidden;
     overflow: hidden;
Línea 68: Línea 72:
     right: 24px;
     right: 24px;
     height: 1px;
     height: 1px;
     background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
     background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0) 100%
    );
}
}


.oroza-navbar-inner:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(214,169,29,0) 0%,
        rgba(214,169,29,0.45) 50%,
        rgba(214,169,29,0) 100%
    );
}
/* Marca */
.oroza-navbar-brand-wrap {
.oroza-navbar-brand-wrap {
     flex: 0 0 auto;
     flex: 0 0 auto;
     min-width: 120px;
     min-width: 126px;
    position: relative;
    padding-right: 8px;
}
 
.oroza-navbar-brand-wrap:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 1px;
    height: 34px;
    transform: translateY(-50%);
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0) 100%
    );
}
}


Línea 97: Línea 140:
     letter-spacing: 0.3px;
     letter-spacing: 0.3px;
     color: #f1c94d;
     color: #f1c94d;
     text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 10px rgba(214,169,29,0.15);
     text-shadow:
        0 1px 0 rgba(0,0,0,0.35),
        0 0 10px rgba(214,169,29,0.15);
}
}


.oroza-navbar-brand-bottom {
.oroza-navbar-brand-bottom {
     margin-top: 0;
     margin-top: 1px;
     font-size: 13px;
     font-size: 13px;
     font-weight: 800;
     font-weight: 800;
Línea 109: Línea 154:
}
}


/* Links */
.oroza-navbar-links {
.oroza-navbar-links {
     flex: 1 1 auto;
     flex: 1 1 auto;
Línea 117: Línea 163:
     gap: 8px;
     gap: 8px;
     min-width: 0;
     min-width: 0;
    position: relative;
    padding: 0 10px;
}
}


Línea 125: Línea 173:
     justify-content: center;
     justify-content: center;
     min-height: 40px;
     min-height: 40px;
     padding: 0 12px;
     padding: 0 14px;
     border-radius: 12px;
     border-radius: 12px;
     color: #f5f8fc !important;
     color: #f5f8fc !important;
Línea 133: Línea 181:
     letter-spacing: 0.1px;
     letter-spacing: 0.1px;
     white-space: nowrap;
     white-space: nowrap;
     transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
     transition:
        color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
}


Línea 145: Línea 197:
     content: "";
     content: "";
     position: absolute;
     position: absolute;
     left: 12px;
     left: 14px;
     right: 12px;
     right: 14px;
     bottom: 7px;
     bottom: 6px;
     height: 2px;
     height: 2px;
     border-radius: 20px;
     border-radius: 20px;
Línea 161: Línea 213:
}
}


/* CTA */
.oroza-navbar-link-cta {
.oroza-navbar-link-cta {
     color: #1d2a38 !important;
     color: #1d2a38 !important;
     padding: 0 18px;
     padding: 0 18px;
     background: linear-gradient(180deg, #ffe15c 0%, #f3c928 100%);
     background: linear-gradient(180deg, #ffe56e 0%, #f2c722 100%);
     box-shadow: 0 8px 18px rgba(214, 169, 29, 0.28), inset 0 1px 0 rgba(255,255,255,0.55);
     box-shadow:
        0 8px 18px rgba(214, 169, 29, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.58);
}
}


.oroza-navbar-link-cta:hover {
.oroza-navbar-link-cta:hover,
     color: #16202c !important;
.oroza-navbar-link-cta:focus,
     background: linear-gradient(180deg, #ffe76f 0%, #f7d13b 100%);
.oroza-navbar-link-cta:active {
     box-shadow: 0 10px 20px rgba(214, 169, 29, 0.34), inset 0 1px 0 rgba(255,255,255,0.62);
     color: #1d2a38 !important;
     background: linear-gradient(180deg, #ffea83 0%, #f7d13b 100%);
     box-shadow:
        0 10px 20px rgba(214, 169, 29, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.62);
}
}


Línea 178: Línea 237:
}
}


/* Idiomas */
.oroza-navbar-lang {
.oroza-navbar-lang {
     flex: 0 0 auto;
     flex: 0 0 auto;
Línea 183: Línea 243:
     align-items: center;
     align-items: center;
     gap: 8px;
     gap: 8px;
    position: relative;
    padding-left: 8px;
}
.oroza-navbar-lang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    width: 1px;
    height: 34px;
    transform: translateY(-50%);
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0) 100%
    );
}
}


Línea 190: Línea 268:
     justify-content: center;
     justify-content: center;
     gap: 6px;
     gap: 6px;
     min-width: 72px;
     min-width: 74px;
     height: 38px;
     height: 38px;
     padding: 0 12px;
     padding: 0 12px;
Línea 197: Línea 275:
     font-size: 13px;
     font-size: 13px;
     font-weight: 900;
     font-weight: 900;
     letter-spacing: 0.4px;
     letter-spacing: 0.35px;
     color: #f4f7fb !important;
     color: #f4f7fb !important;
     background: rgba(255, 255, 255, 0.05);
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255,255,255,0.12);
     border: 1px solid rgba(255,255,255,0.12);
     transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
     transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
     white-space: nowrap;
     white-space: nowrap;
}
}
Línea 212: Línea 295:
}
}


.oroza-lang-pill.is-active {
.oroza-lang-pill.is-active,
.oroza-lang-pill.is-active:hover,
.oroza-lang-pill.is-active:focus,
.oroza-lang-pill.is-active:active {
     color: #1d2a38 !important;
     color: #1d2a38 !important;
     background: linear-gradient(180deg, #ffe15c 0%, #f3c928 100%);
     background: linear-gradient(180deg, #ffe15c 0%, #f3c928 100%);
     border-color: rgba(214,169,29,0.95);
     border-color: rgba(214,169,29,0.95);
     box-shadow: 0 6px 14px rgba(214,169,29,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
     box-shadow:
        0 6px 14px rgba(214,169,29,0.22),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
}


Línea 228: Línea 316:
}
}


/* Reset */
.oroza-navbar a,
.oroza-navbar a,
.oroza-navbar a:visited,
.oroza-navbar a:visited,
Línea 236: Línea 325:
}
}


/* Responsive */
@media (max-width: 1180px) {
@media (max-width: 1180px) {
     .oroza-navbar-inner {
     .oroza-navbar-inner {
Línea 248: Línea 338:
         display: flex;
         display: flex;
         justify-content: center;
         justify-content: center;
    }
    .oroza-navbar-brand-wrap:after,
    .oroza-navbar-lang:before {
        display: none;
     }
     }


Línea 254: Línea 349:
         order: 3;
         order: 3;
         flex-wrap: wrap;
         flex-wrap: wrap;
        padding: 0;
     }
     }
}
}
Línea 280: Línea 376:
         max-width: 320px;
         max-width: 320px;
         min-height: 44px;
         min-height: 44px;
        justify-content: center;
     }
     }


Línea 287: Línea 384:
}
}
</style>
</style>


<script>
<script>
Línea 318: Línea 414:
})();
})();
</script>
</script>
</html>
</html>

Revisión actual - 10:04 4 abr 2026

OROZA RO WIKI
Pagina Web Crea tu Cuenta Descargas Donaciones Vota por el Server
🇪🇸 ES 🇺🇸 EN

Obtenido de «https://orozaro.com/wiki/index.php?title=Plantilla:Navbar&oldid=551»