|
|
| (8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* STEP 1: Hamburger Button zurück nach oben bringen */
| |
| #mw-sidebar-button {
| |
| position: fixed !important;
| |
| top: 8px !important;
| |
| left: 8px !important;
| |
| z-index: 9999 !important;
| |
| background-color: transparent !important;
| |
| border: 2px solid #ffffff !important;
| |
| width: 40px !important;
| |
| height: 40px !important;
| |
| padding: 5px !important;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| #mw-sidebar-button:before {
| |
| background-color: #ffffff !important;
| |
| box-shadow: 0 0.35em 0 0 #ffffff, 0 0.7em 0 0 #ffffff !important;
| |
| }
| |
|
| |
| /* STEP 2: Gesamte Sidebar aus dem Flow nehmen */
| |
| .mw-sidebar,
| |
| #mw-panel {
| |
| position: fixed !important;
| |
| top: 0 !important;
| |
| left: -100% !important;
| |
| height: 100vh !important;
| |
| width: 80% !important;
| |
| max-width: 300px !important;
| |
| background: #161616 !important;
| |
| z-index: 9998 !important;
| |
| overflow-y: auto !important;
| |
| overflow-x: hidden !important;
| |
| transition: left 0.3s ease !important;
| |
| padding-top: 60px !important;
| |
| }
| |
|
| |
| /* Wenn Sidebar geöffnet */
| |
| #mw-sidebar-checkbox:checked ~ .mw-sidebar,
| |
| #mw-sidebar-checkbox:checked ~ #mw-panel {
| |
| left: 0 !important;
| |
| }
| |
|
| |
| /* STEP 3: Navigation & Tools Container */
| |
| #mw-site-navigation,
| |
| #mw-related-navigation {
| |
| position: relative !important;
| |
| width: 100% !important;
| |
| padding: 0 !important;
| |
| float: none !important;
| |
| margin: 0 !important;
| |
| }
| |
|
| |
| /* STEP 4: Sidebar Chunks */
| |
| #mw-site-navigation .sidebar-chunk,
| |
| #mw-related-navigation .sidebar-chunk,
| |
| #site-navigation,
| |
| #site-tools,
| |
| #user-tools {
| |
| position: relative !important;
| |
| float: none !important;
| |
| width: 100% !important;
| |
| margin: 0.5em 0.5em !important;
| |
| padding: 1em !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
|
| |
| /* STEP 5: Personal/User Tools Fix */
| |
| #personal,
| |
| #personal-extra {
| |
| position: fixed !important;
| |
| top: 8px !important;
| |
| right: 8px !important;
| |
| z-index: 9999 !important;
| |
| }
| |
|
| |
| #personal-extra:before {
| |
| color: #ffffff !important;
| |
| filter: brightness(0) invert(1) !important;
| |
| }
| |
|
| |
| /* STEP 6: Header Container anpassen */
| |
| #mw-header-container {
| |
| position: relative !important;
| |
| z-index: 100 !important;
| |
| padding-left: 50px !important;
| |
| }
| |
|
| |
| /* STEP 7: Content nicht überlappen */
| |
| #mw-content-container {
| |
| position: relative !important;
| |
| z-index: 1 !important;
| |
| margin-top: 0 !important;
| |
| }
| |
|
| |
| #mw-content {
| |
| position: relative !important;
| |
| }
| |
|
| |
| /* STEP 8: Overlay für offene Sidebar */
| |
| #mw-sidebar-checkbox:checked ~ .mw-overlay {
| |
| display: block !important;
| |
| position: fixed !important;
| |
| top: 0 !important;
| |
| left: 0 !important;
| |
| width: 100vw !important;
| |
| height: 100vh !important;
| |
| background: rgba(0, 0, 0, 0.7) !important;
| |
| z-index: 9997 !important;
| |
| }
| |
|
| |
| /* Falls Overlay nicht existiert, erstelle Pseudo-Element */
| |
| body:after {
| |
| content: '';
| |
| display: none;
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100vw;
| |
| height: 100vh;
| |
| background: rgba(0, 0, 0, 0.7);
| |
| z-index: 9997;
| |
| opacity: 0;
| |
| transition: opacity 0.3s;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| #mw-sidebar-checkbox:checked ~ body:after {
| |
| display: block !important;
| |
| opacity: 1 !important;
| |
| pointer-events: auto !important;
| |
| }
| |
|
| |
| /* STEP 9: Footer bleibt unten */
| |
| .mw-footer-container {
| |
| position: relative !important;
| |
| z-index: 1 !important;
| |
| clear: both !important;
| |
| }
| |
|
| |
| /* STEP 10: Sidebar Portlets richtig darstellen */
| |
| .mw-portlet,
| |
| .mw-portlet-body {
| |
| position: relative !important;
| |
| float: none !important;
| |
| }
| |
|
| |
| .mw-portlet h3 {
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| /* STEP 11: Toggle Icons */
| |
| .toggle-icon {
| |
| display: inline-block !important;
| |
| margin-left: 8px !important;
| |
| transition: transform 0.2s !important;
| |
| vertical-align: middle !important;
| |
| }
| |
|
| |
| h3.closed .toggle-icon,
| |
| .closed .toggle-icon {
| |
| transform: rotate(-90deg) !important;
| |
| }
| |
|
| |
| /* STEP 12: Verstecke Default-Elemente die Probleme machen */
| |
| #mw-sidebar-checkbox {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* STEP 13: Logo Anpassung */
| |
| #p-banner {
| |
| padding-left: 50px !important;
| |
| }
| |
|
| |
| #p-banner img {
| |
| width: 120px !important;
| |
| height: auto !important;
| |
| }
| |
|
| |
| /* STEP 14: Search anpassen */
| |
| #searchform {
| |
| padding-left: 0 !important;
| |
| }
| |
|
| |
| /*----------------------------------------- Card Design START --------------------------------------*/
| |
|
| |
| /* ===============================
| |
| Dark / Elegant Card Style
| |
| =============================== */
| |
| .wiki-card {
| |
| background-color: #1f1f1f; /* dunkles Grau-Schwarz */
| |
| border-radius: 12px;
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* tiefer Schatten */
| |
| padding: 1.2em 1em;
| |
| margin: 1em 0;
| |
| border: 1px solid #333; /* dezente Umrandung */
| |
| font-family: "Inter", "Segoe UI", sans-serif;
| |
| color: #eee; /* heller Text */
| |
| }
| |
|
| |
| /* Titel */
| |
| .wiki-card h3 {
| |
| margin-top: 0;
| |
| font-size: 1.25em;
| |
| font-weight: 600;
| |
| color: #ffd966; /* dezenter goldener Akzent für Titel */
| |
| }
| |
|
| |
| /* Beschreibung */
| |
| .wiki-card p {
| |
| margin: 0.5em 0 1em 0;
| |
| color: #ccc;
| |
| font-size: 0.95em;
| |
| }
| |
|
| |
| /* Content (Liste etc.) */
| |
| .wiki-card div {
| |
| color: #ddd;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* Optional: Links in Card */
| |
| .wiki-card a {
| |
| color: #ffd966;
| |
| text-decoration: none;
| |
| transition: color 0.2s;
| |
| }
| |
|
| |
| .wiki-card a:hover {
| |
| color: #ffcc00;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /*----------------------------------------- Container ENDE --------------------------------------*/
| |
|
| |
| /*----------------------------------------- Item Weapon Template START --------------------------------------*/
| |
|
| |
| .wikitable tr th, .mw_metadata tr th, .mw-datatable tr th, .dataTable tr th, .cargoTable tr th, .statstable tr th {
| |
| background: #000000;
| |
| border: none;
| |
| border-width: 0 0 1px;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| /* Upgrade table styling (shadcn-dark) */
| |
| .wikitable.upgrade {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| background-color: #0a0a0a;
| |
| color: #eee;
| |
| }
| |
|
| |
| .wikitable.upgrade th {
| |
| background-color: #000 !important; /* zwingend schwarz */
| |
| color: #ffd966 !important; /* goldener Text */
| |
| font-weight: bold;
| |
| padding: 6px 8px;
| |
| border: 1px solid #222 !important;
| |
| }
| |
|
| |
| .wikitable.upgrade td {
| |
| background-color: #1a1a1a !important;
| |
| color: #eee;
| |
| padding: 6px 8px;
| |
| text-align: center;
| |
| border: 1px solid #333 !important;
| |
| }
| |
|
| |
| .wikitable.upgrade tr:hover td {
| |
| background-color: #2a2a2a !important;
| |
| }
| |
|
| |
| .wikitable img,
| |
| .wikitable.upgrade img,
| |
| img[src*="Icon.png"],
| |
| img[src*=".png"],
| |
| .thumbimage {
| |
| image-rendering: pixelated !important;
| |
| image-rendering: -moz-crisp-edges !important;
| |
| image-rendering: crisp-edges !important;
| |
| -ms-interpolation-mode: nearest-neighbor !important;
| |
| }
| |
|
| |
| /*----------------------------------------- Item Weapon Template ENDE --------------------------------------*/
| |
| /*----------------------------------------- Grid Container START --------------------------------------*/
| |
| .gridbox pre {
| |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| margin: 0 auto 0.5em auto !important;
| |
| overflow: visible; /* kein Scroll */
| |
| }
| |
|
| |
| .grid-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 1.2em;
| |
| justify-content: center;
| |
| margin: 1em 0;
| |
| }
| |
|
| |
| /* Einzelne Box */
| |
| .gridbox {
| |
| width: 220px;
| |
| background-color: #1e1e1e; /* Box-Hintergrund */
| |
| border: 1px solid #444; /* Box-Rand */
| |
| border-radius: 10px;
| |
| padding: 1em;
| |
| text-align: center;
| |
| color: #eee;
| |
| }
| |
|
| |
|
| /* Alle MediaWiki-Thumbnails innerhalb von GridBox „clean“ */
| |
| .gridbox .thumb {
| |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| box-shadow: none !important;
| |
| width: auto !important; /* damit die Box nicht den Hintergrund zieht */
| |
| }
| |
|
| |
|
| .gridbox .thumbinner {
| |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
|
| /* Bilder in GridBox scharf für Pixel-Art */
| |
| .gridbox img {
| |
| width: 120px; /* gewünschte Box-Größe */
| |
| height: 120px;
| |
| image-rendering: pixelated; /* Pixel-Art wird scharf skaliert */
| |
| image-rendering: crisp-edges; /* alternative für manche Browser */
| |
| display: block;
| |
| margin: 0 auto 0.5em auto; /* zentrieren */
| |
| border: none;
| |
| background: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
|
| /* Titel */
| |
| .gridbox-title {
| |
| font-size: 1.1em;
| |
| font-weight: bold;
| |
| margin-top: 0.6em;
| |
| }
| |
|
| |
|
| /* Beschreibung */
| |
| .gridbox-desc {
| |
| font-size: 0.9em;
| |
| color: #bbb;
| |
| margin-top: 0.4em;
| |
| }
| |
|
| |
|
| /*----------------------------------------- Grid Container END --------------------------------------*/
| |
|
| |
|
|
| |
|
| Zeile 386: |
Zeile 36: |
| border: none !important; /* Keine Borders mehr */ | | border: none !important; /* Keine Borders mehr */ |
| padding: 1em; | | padding: 1em; |
| }
| |
|
| |
|
| |
|
| |
| /*-------------------------------- NPC Grid Template --------------------------------*/
| |
| /* ==========================================
| |
| TEIL 1: CSS - MediaWiki:Common.css
| |
| ========================================== */
| |
|
| |
| .npc-grid-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| background-color: #0a0a0a;
| |
| padding: 1em;
| |
| border: none;
| |
| }
| |
|
| |
| .npc-category {
| |
| font-size: 1.3em;
| |
| font-weight: bold;
| |
| margin: 1.5em 0 1em 0;
| |
| color: #ffd966;
| |
| background-color: #000000;
| |
| border: 1px solid #222;
| |
| padding: 0.5em;
| |
| text-align: center;
| |
| }
| |
|
| |
| .npc-category:first-child {
| |
| margin-top: 0;
| |
| }
| |
|
| |
| .npc-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
| |
| gap: 1em;
| |
| margin-bottom: 1em;
| |
| }
| |
|
| |
| .npc-box {
| |
| display: block;
| |
| text-align: center;
| |
| }
| |
|
| |
| .npc-image {
| |
| width: 64px;
| |
| height: 64px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| margin: 0 auto 0.4em auto;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .npc-image img {
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| image-rendering: pixelated;
| |
| image-rendering: -moz-crisp-edges;
| |
| image-rendering: crisp-edges;
| |
| border: none !important;
| |
| }
| |
|
| |
| .npc-image .mw-file-description {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| .npc-image:hover {
| |
| opacity: 0.7;
| |
| }
| |
|
| |
| .npc-name {
| |
| font-size: 0.85em;
| |
| text-align: center;
| |
| line-height: 1.3;
| |
| color: #eee;
| |
| min-height: 2.6em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .npc-name a {
| |
| color: #eee;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .npc-name a:hover {
| |
| color: #ffd966;
| |
| }
| |
|
| |
| /*-------------------------------- NPC Grid Template --------------------------------*/
| |
|
| |
|
| |
| /*-------------------------------- LandingFeatures --------------------------------*/
| |
| /* Container */
| |
| .landing-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| background-color: #0a0a0a;
| |
| border: 1px solid #222;
| |
| padding: 1em;
| |
| font-family: sans-serif;
| |
| }
| |
|
| |
| /* Tabs */
| |
| .landing-tabs {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 0.5em;
| |
| margin-bottom: 1em;
| |
| }
| |
|
| |
| .tab-button {
| |
| padding: 0.5em 1em;
| |
| background-color: #000;
| |
| color: #eee;
| |
| border: 1px solid #222;
| |
| cursor: pointer;
| |
| font-weight: bold;
| |
| transition: 0.2s;
| |
| }
| |
|
| |
| .tab-button:hover {
| |
| background-color: #111;
| |
| }
| |
|
| |
| .tab-button.active {
| |
| background-color: #222;
| |
| color: #ffd966;
| |
| }
| |
|
| |
| /* Grid */
| |
| .landing-grid-container {
| |
| display: block;
| |
| }
| |
|
| |
| .landing-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
| |
| gap: 1em;
| |
| display: none;
| |
| }
| |
|
| |
| .landing-grid.active {
| |
| display: grid;
| |
| }
| |
|
| |
| /* Boxes */
| |
| .landing-box {
| |
| text-align: center;
| |
| background-color: #111;
| |
| border: 1px solid #222;
| |
| padding: 0.5em;
| |
| border-radius: 8px;
| |
| transition: 0.2s;
| |
| }
| |
|
| |
| .landing-box:hover {
| |
| background-color: #1a1a1a;
| |
| }
| |
|
| |
| .landing-image {
| |
| width: 64px;
| |
| height: 64px;
| |
| margin: 0 auto 0.5em auto;
| |
| background-color: #222;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .landing-image img {
| |
| image-rendering: pixelated;
| |
| image-rendering: -moz-crisp-edges;
| |
| image-rendering: crisp-edges;
| |
| border: none !important;
| |
| }
| |
|
| |
| .landing-name {
| |
| font-size: 0.85em;
| |
| color: #eee;
| |
| }
| |
|
| |
| .landing-name a {
| |
| color: #eee;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .landing-name a:hover {
| |
| color: #ffd966;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /*-------------------------------- Info Panel Rechts --------------------------------*/
| |
|
| |
|
| |
| @media (max-width: 968px) {
| |
| .mainpage-container {
| |
| flex-direction: column-reverse; /* Sidebar kommt oben */
| |
| }
| |
|
| |
| .mainpage-sidebar {
| |
| max-width: 100%;
| |
| margin-top: 0; /* Abstand oben nicht nötig */
| |
| }
| |
| }
| |
|
| |
| /* Main Page Layout */
| |
| .mainpage-container {
| |
| display: flex;
| |
| gap: 0px;
| |
| max-width: 1400px;
| |
| margin: 0 auto;
| |
| padding: 0px;
| |
| }
| |
|
| |
| .mainpage-content {
| |
| flex: 2;
| |
| min-width: 0;
| |
| }
| |
|
| |
| .content-section {
| |
| margin-bottom: 0px;
| |
| }
| |
|
| |
| .content-section:last-child {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .mainpage-sidebar {
| |
| flex: 1;
| |
| min-width: 280px;
| |
| max-width: 350px;
| |
| }
| |
|
| |
| .sidebar-panel {
| |
| background-color: #0a0a0a;
| |
| border: 1px solid #222;
| |
| padding: 1em;
| |
| }
| |
|
| |
| .sidebar-title {
| |
| font-size: 1.5em;
| |
| font-weight: bold;
| |
| color: #ffd966;
| |
| text-align: center;
| |
| margin-bottom: 1em;
| |
| padding-bottom: 0.5em;
| |
| border-bottom: 2px solid #222;
| |
| }
| |
|
| |
| .sidebar-section {
| |
| margin-bottom: 1em;
| |
| }
| |
|
| |
| .sidebar-image {
| |
| text-align: center;
| |
| margin: 1em 0;
| |
| line-height: 0; /* Entfernt Leerraum zwischen inline Elementen */
| |
| }
| |
|
| |
| .sidebar-image pre {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| border: none !important;
| |
| line-height: 0;
| |
| }
| |
|
| |
| .sidebar-image img {
| |
| width: 100% !important;
| |
| height: auto;
| |
| display: block;
| |
| border: none !important;
| |
| image-rendering: pixelated; /* Sharp pixelated rendering */
| |
| image-rendering: -moz-crisp-edges;
| |
| image-rendering: crisp-edges;
| |
| }
| |
|
| |
| .sidebar-image span,
| |
| .sidebar-image .mw-file-description {
| |
| display: block;
| |
| line-height: 0;
| |
| }
| |
|
| |
| .sidebar-label {
| |
| font-size: 1.1em;
| |
| font-weight: bold;
| |
| color: #ffd966;
| |
| background-color: #111;
| |
| padding: 0.5em;
| |
| border: 1px solid #222;
| |
| text-align: center;
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| .sidebar-item {
| |
| display: flex;
| |
| flex-direction: column;
| |
| padding: 0.5em;
| |
| background-color: #111;
| |
| border: 1px solid #222;
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| .sidebar-item pre {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| border: none !important;
| |
| font-family: inherit !important;
| |
| line-height: inherit !important;
| |
| }
| |
|
| |
| .item-label {
| |
| font-size: 0.85em;
| |
| color: #999;
| |
| margin-bottom: 0.2em;
| |
| display: block;
| |
| }
| |
|
| |
| .item-value {
| |
| color: #eee;
| |
| font-size: 0.95em;
| |
| display: block;
| |
| }
| |
|
| |
| .item-value a {
| |
| color: #eee;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .item-value a:hover {
| |
| color: #ffd966;
| |
| }
| |
|
| |
| .release-dates {
| |
| background-color: #111;
| |
| border: 1px solid #222;
| |
| padding: 0.5em;
| |
| font-size: 0.9em;
| |
| color: #eee;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| .release-dates div {
| |
| padding: 0.2em 0;
| |
| }
| |
|
| |
| @media (max-width: 968px) {
| |
| .mainpage-container {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .mainpage-sidebar {
| |
| max-width: 100%;
| |
| margin-top: 1em;
| |
| }
| |
| } | | } |
