|
|
| Line 7: |
Line 7: |
| --highlight: #0ea5e9; /* cyan */ | | --highlight: #0ea5e9; /* cyan */ |
| --text: #1f2937; | | --text: #1f2937; |
| }
| |
|
| |
| /* Global */
| |
| body {
| |
| margin: 0;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| background: radial-gradient(circle at top, #e0e7ff, var(--bg));
| |
| color: var(--text);
| |
| }
| |
|
| |
| /* Main Container */
| |
| .wiki-container {
| |
| max-width: 1100px;
| |
| margin: 30px auto;
| |
| padding: 25px;
| |
| background: var(--card-bg);
| |
| border-radius: 14px;
| |
| box-shadow: 0 8px 25px rgba(0,0,0,0.1);
| |
| border: 2px solid rgba(99,102,241,0.2);
| |
| }
| |
|
| |
| /* Headings (gaming glow effect) */
| |
| h1, h2, h3 {
| |
| color: var(--primary);
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| text-shadow: 0 0 6px rgba(99,102,241,0.4);
| |
| }
| |
|
| |
| /* Links */
| |
| a {
| |
| color: var(--highlight);
| |
| font-weight: bold;
| |
| position: relative;
| |
| }
| |
|
| |
| a:hover {
| |
| color: var(--accent);
| |
| }
| |
|
| |
| /* Neon underline animation */
| |
| a::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: -3px;
| |
| width: 100%;
| |
| height: 2px;
| |
| background: linear-gradient(90deg, var(--secondary), var(--accent));
| |
| transform: scaleX(0);
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| a:hover::after {
| |
| transform: scaleX(1);
| |
| }
| |
|
| |
| /* Sidebar */
| |
| .sidebar {
| |
| background: linear-gradient(180deg, #6366f1, #0ea5e9);
| |
| color: white;
| |
| padding: 20px;
| |
| border-radius: 12px;
| |
| box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
| |
| }
| |
|
| |
| /* Cards (game panels) */
| |
| .card {
| |
| background: var(--card-bg);
| |
| border-left: 6px solid var(--secondary);
| |
| padding: 15px;
| |
| margin-bottom: 20px;
| |
| border-radius: 10px;
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* subtle animated shine */
| |
| .card::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: -75%;
| |
| width: 50%;
| |
| height: 100%;
| |
| background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
| |
| transform: skewX(-20deg);
| |
| transition: 0.6s;
| |
| }
| |
|
| |
| .card:hover::before {
| |
| left: 130%;
| |
| }
| |
|
| |
| /* Tables */
| |
| table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| border-radius: 10px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| th {
| |
| background: linear-gradient(90deg, var(--primary), var(--highlight));
| |
| color: white;
| |
| padding: 10px;
| |
| }
| |
|
| |
| td {
| |
| padding: 10px;
| |
| border-bottom: 1px solid #ddd;
| |
| }
| |
|
| |
| tr:hover {
| |
| background: rgba(99,102,241,0.08);
| |
| }
| |
|
| |
| /* Buttons (gaming style) */
| |
| button {
| |
| background: linear-gradient(135deg, var(--secondary), var(--highlight));
| |
| border: none;
| |
| color: white;
| |
| padding: 10px 20px;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-weight: bold;
| |
| letter-spacing: 1px;
| |
| box-shadow: 0 0 10px rgba(34,197,94,0.4);
| |
| transition: 0.2s;
| |
| }
| |
|
| |
| button:hover {
| |
| transform: translateY(-2px) scale(1.05);
| |
| box-shadow: 0 0 15px rgba(14,165,233,0.6);
| |
| }
| |
|
| |
| /* Scrollbar (gaming UI touch) */
| |
| ::-webkit-scrollbar {
| |
| width: 10px;
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb {
| |
| background: linear-gradient(var(--primary), var(--accent));
| |
| border-radius: 10px;
| |
| }
| |
|
| |
| /* Animation */
| |
| @keyframes glowPulse {
| |
| 0% { box-shadow: 0 0 5px var(--primary); }
| |
| 50% { box-shadow: 0 0 15px var(--accent); }
| |
| 100% { box-shadow: 0 0 5px var(--primary); }
| |
| }
| |
|
| |
| .glow {
| |
| animation: glowPulse 2s infinite;
| |
| } | | } |