|
|
| (73 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* DARK MODE ERZWINGEN */
| |
| html,
| |
| body,
| |
| #mw-page-base,
| |
| #mw-head-base,
| |
| #content,
| |
| #mw-panel {
| |
| background-color: hsl(222.2 84% 4.9%) !important;
| |
| color: hsl(210 40% 98%) !important;
| |
| }
| |
|
| |
| /* Alle Variablen auf Dark setzen */
| |
| :root {
| |
| --background: 222.2 84% 4.9%;
| |
| --foreground: 210 40% 98%;
| |
| --card: 222.2 84% 4.9%;
| |
| --card-foreground: 210 40% 98%;
| |
| --muted: 217.2 32.6% 17.5%;
| |
| --muted-foreground: 215 20.2% 65.1%;
| |
| --border: 217.2 32.6% 17.5%;
| |
| --input: 217.2 32.6% 17.5%;
| |
| --primary: 210 40% 98%;
| |
| --primary-foreground: 222.2 47.4% 11.2%;
| |
| --accent: 217.2 32.6% 17.5%;
| |
| --accent-foreground: 210 40% 98%;
| |
| }
| |
|
| |
| /* === COLOR SYSTEM === */
| |
| :root {
| |
| /* Neutral Palette */
| |
| --background: 0 0% 100%;
| |
| --foreground: 222.2 84% 4.9%;
| |
|
| |
| --card: 0 0% 100%;
| |
| --card-foreground: 222.2 84% 4.9%;
| |
|
| |
| --popover: 0 0% 100%;
| |
| --popover-foreground: 222.2 84% 4.9%;
| |
|
| |
| --primary: 222.2 47.4% 11.2%;
| |
| --primary-foreground: 210 40% 98%;
| |
|
| |
| --secondary: 210 40% 96.1%;
| |
| --secondary-foreground: 222.2 47.4% 11.2%;
| |
|
| |
| --muted: 210 40% 96.1%;
| |
| --muted-foreground: 215.4 16.3% 46.9%;
| |
|
| |
| --accent: 210 40% 96.1%;
| |
| --accent-foreground: 222.2 47.4% 11.2%;
| |
|
| |
| --border: 214.3 31.8% 91.4%;
| |
| --input: 214.3 31.8% 91.4%;
| |
| --ring: 222.2 84% 4.9%;
| |
|
| |
| --radius: 0.5rem;
| |
| }
| |
|
| |
| [data-theme="dark"] {
| |
| --background: 222.2 84% 4.9%;
| |
| --foreground: 210 40% 98%;
| |
|
| |
| --card: 222.2 84% 4.9%;
| |
| --card-foreground: 210 40% 98%;
| |
|
| |
| --popover: 222.2 84% 4.9%;
| |
| --popover-foreground: 210 40% 98%;
| |
|
| |
| --primary: 210 40% 98%;
| |
| --primary-foreground: 222.2 47.4% 11.2%;
| |
|
| |
| --secondary: 217.2 32.6% 17.5%;
| |
| --secondary-foreground: 210 40% 98%;
| |
|
| |
| --muted: 217.2 32.6% 17.5%;
| |
| --muted-foreground: 215 20.2% 65.1%;
| |
|
| |
| --accent: 217.2 32.6% 17.5%;
| |
| --accent-foreground: 210 40% 98%;
| |
|
| |
| --border: 217.2 32.6% 17.5%;
| |
| --input: 217.2 32.6% 17.5%;
| |
| --ring: 212.7 26.8% 83.9%;
| |
| }
| |
|
| |
| /* === BASE RESET === */
| |
| * {
| |
| border-color: hsl(var(--border));
| |
| }
| |
|
| |
| body {
| |
| background-color: hsl(var(--background));
| |
| color: hsl(var(--foreground));
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
| |
| font-size: 15px;
| |
| line-height: 1.6;
| |
| -webkit-font-smoothing: antialiased;
| |
| -moz-osx-font-smoothing: grayscale;
| |
| }
| |
|
| |
| /* === SCROLLBAR === */
| |
| ::-webkit-scrollbar {
| |
| width: 8px;
| |
| height: 8px;
| |
| }
| |
|
| |
| ::-webkit-scrollbar-track {
| |
| background: hsl(var(--muted));
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb {
| |
| background: hsl(var(--muted-foreground) / 0.3);
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb:hover {
| |
| background: hsl(var(--muted-foreground) / 0.5);
| |
| }
| |
|
| |
| /* === TYPOGRAPHY === */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-weight: 600;
| |
| letter-spacing: -0.025em;
| |
| color: hsl(var(--foreground));
| |
| }
| |
|
| |
| h1 {
| |
| font-size: 2.25rem;
| |
| line-height: 2.5rem;
| |
| margin: 2rem 0 1rem 0;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| padding-bottom: 0.5rem;
| |
| }
| |
|
| |
| h2 {
| |
| font-size: 1.875rem;
| |
| line-height: 2.25rem;
| |
| margin: 1.75rem 0 0.875rem 0;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| padding-bottom: 0.375rem;
| |
| }
| |
|
| |
| h3 {
| |
| font-size: 1.5rem;
| |
| line-height: 2rem;
| |
| margin: 1.5rem 0 0.75rem 0;
| |
| }
| |
|
| |
| h4 {
| |
| font-size: 1.25rem;
| |
| line-height: 1.75rem;
| |
| margin: 1.25rem 0 0.625rem 0;
| |
| }
| |
|
| |
| p {
| |
| margin: 0.75rem 0;
| |
| }
| |
|
| |
| /* === LINKS === */
| |
| a {
| |
| color: hsl(var(--primary));
| |
| text-decoration: none;
| |
| transition: color 0.15s ease;
| |
| }
| |
|
| |
|
| a:hover {
| |
| color: hsl(var(--primary) / 0.8);
| |
| text-decoration: underline;
| |
| text-underline-offset: 2px;
| |
| }
| |
|
| |
|
| a.new {
| |
| color: hsl(0 84.2% 60.2%);
| |
| }
| |
|
| |
|
| /* === BUTTONS === */
| |
| .mw-ui-button,
| |
| button,
| |
| input[type="submit"] {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-radius: var(--radius);
| |
| font-size: 0.875rem;
| |
| font-weight: 500;
| |
| transition: all 0.15s ease;
| |
| border: 1px solid hsl(var(--input));
| |
| background-color: hsl(var(--background));
| |
| padding: 0.5rem 1rem;
| |
| cursor: pointer;
| |
| }
| |
|
| |
|
| .mw-ui-button:hover,
| |
| button:hover,
| |
| input[type="submit"]:hover {
| |
| background-color: hsl(var(--accent));
| |
| border-color: hsl(var(--accent-foreground) / 0.2);
| |
| }
| |
|
| |
|
| .mw-ui-progressive,
| |
| .mw-ui-primary {
| |
| background-color: hsl(var(--primary));
| |
| color: hsl(var(--primary-foreground));
| |
| border-color: hsl(var(--primary));
| |
| }
| |
|
| |
|
| .mw-ui-progressive:hover,
| |
| .mw-ui-primary:hover {
| |
| background-color: hsl(var(--primary) / 0.9);
| |
| }
| |
|
| |
|
| /* === TABLES === */
| |
| .wikitable {
| |
| border-collapse: collapse;
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| width: 100%;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
|
| .wikitable th {
| |
| background-color: hsl(var(--muted));
| |
| color: hsl(var(--muted-foreground));
| |
| font-weight: 600;
| |
| text-align: left;
| |
| padding: 0.75rem 1rem;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| }
| |
|
| |
| .wikitable td {
| |
| padding: 0.75rem 1rem;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| }
| |
|
| |
| .wikitable tr:last-child td {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .wikitable tr:hover {
| |
| background-color: hsl(var(--muted) / 0.5);
| |
| }
| |
|
| |
| /* === INFOBOXES === */
| |
| .infobox {
| |
| float: right;
| |
| clear: right;
| |
| width: 280px;
| |
| margin: 0 0 1rem 1rem;
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| background-color: hsl(var(--card));
| |
| overflow: hidden;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .infobox-title {
| |
| background-color: hsl(var(--muted));
| |
| color: hsl(var(--foreground));
| |
| font-weight: 600;
| |
| padding: 0.75rem 1rem;
| |
| text-align: center;
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| .infobox-image {
| |
| padding: 1rem;
| |
| text-align: center;
| |
| background-color: hsl(var(--background));
| |
| }
| |
|
| |
| .infobox-image img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| border-radius: calc(var(--radius) - 2px);
| |
| }
| |
|
| |
| .infobox table {
| |
| width: 100%;
| |
| border: none;
| |
| }
| |
|
| |
| .infobox th {
| |
| background-color: hsl(var(--muted) / 0.5);
| |
| font-weight: 500;
| |
| padding: 0.5rem 0.75rem;
| |
| text-align: left;
| |
| color: hsl(var(--muted-foreground));
| |
| width: 35%;
| |
| }
| |
|
| |
| .infobox td {
| |
| padding: 0.5rem 0.75rem;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| }
| |
|
| |
| .infobox tr:last-child td {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* === CODE BLOCKS === */
| |
| code {
| |
| background-color: hsl(var(--muted));
| |
| color: hsl(var(--foreground));
| |
| padding: 0.2rem 0.4rem;
| |
| border-radius: calc(var(--radius) - 2px);
| |
| font-size: 0.875em;
| |
| font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
| |
| }
| |
|
| |
| pre {
| |
| background-color: hsl(var(--muted));
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| padding: 1rem;
| |
| overflow-x: auto;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| pre code {
| |
| background: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* === INPUTS === */
| |
| input[type="text"],
| |
| input[type="search"],
| |
| textarea,
| |
| select {
| |
| background-color: hsl(var(--background));
| |
| border: 1px solid hsl(var(--input));
| |
| border-radius: var(--radius);
| |
| padding: 0.5rem 0.75rem;
| |
| font-size: 0.875rem;
| |
| transition: border-color 0.15s ease;
| |
| }
| |
|
| |
| input[type="text"]:focus,
| |
| input[type="search"]:focus,
| |
| textarea:focus,
| |
| select:focus {
| |
| outline: none;
| |
| border-color: hsl(var(--ring));
| |
| box-shadow: 0 0 0 1px hsl(var(--ring));
| |
| }
| |
|
| |
| /* === CATEGORIES === */
| |
| .catlinks {
| |
| background-color: hsl(var(--muted) / 0.3);
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| padding: 0.75rem 1rem;
| |
| margin-top: 2rem;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| /* === TOC === */
| |
| #toc,
| |
| .toc {
| |
| background-color: hsl(var(--muted) / 0.3);
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| padding: 1rem;
| |
| margin: 1rem 0;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| #toc h2,
| |
| .toc h2 {
| |
| font-size: 1rem;
| |
| font-weight: 600;
| |
| margin: 0 0 0.5rem 0;
| |
| border: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| #toc ul,
| |
| .toc ul {
| |
| margin: 0;
| |
| padding-left: 1.25rem;
| |
| }
| |
|
| |
| #toc li,
| |
| .toc li {
| |
| margin: 0.25rem 0;
| |
| }
| |
|
| |
| /* === FOOTER === */
| |
| #footer-poweredbyico,
| |
| #footer-copyrightico {
| |
| display: none;
| |
| }
| |
|
| |
| #footer {
| |
| border-top: 1px solid hsl(var(--border));
| |
| margin-top: 3rem;
| |
| padding-top: 2rem;
| |
| font-size: 0.875rem;
| |
| color: hsl(var(--muted-foreground));
| |
| }
| |
|
| |
|
| /* === NOTIFICATIONS === */ | | /*----------------------------------------- MediaWiki Base Change --------------------------------------*/ |
| .mw-notification { | | /* Aggressiveres Override für alle Container */ |
| background-color: hsl(var(--card));
| | .mw-parser-output, |
| border: 1px solid hsl(var(--border));
| | .mw-body, |
| border-radius: var(--radius);
| | .mw-body-content, |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
| | #bodyContent { |
| | background-color: #0a0a0a !important; |
| } | | } |
|
| |
|
| /* === EDIT TOOLBAR === */ | | /* Entferne alle weißen Hintergründe */ |
| .wikiEditor-ui-toolbar { | | .mainpage-container * { |
| background-color: hsl(var(--muted));
| | background-color: transparent; |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius) var(--radius) 0 0;
| |
| } | | } |
|
| |
|
| /* === MOBILE RESPONSIVE === */ | | /* Entferne alle Borders von Container-Elementen */ |
| @media (max-width: 768px) {
| | .mainpage-container, |
| .infobox {
| | .mainpage-content, |
| float: none;
| | .mainpage-sidebar, |
| width: 100%;
| | .content-section { |
| margin: 1rem 0;
| | border: none !important; |
| }
| |
|
| |
| h1 {
| |
| font-size: 1.875rem;
| |
| }
| |
|
| |
| h2 {
| |
| font-size: 1.5rem;
| |
| }
| |
| } | | } |
|
| |
|
| /* === SMOOTH TRANSITIONS === */
| | .sidebar-panel, |
| * {
| | .landing-container, |
| transition: background-color 0.15s ease, border-color 0.15s ease;
| | .npc-grid-container { |
| | background-color: #0a0a0a; |
| | border: none !important; /* Keine Borders mehr */ |
| | padding: 1em; |
| } | | } |
/*----------------------------------------- MediaWiki Base Change --------------------------------------*/
/* Aggressiveres Override für alle Container */
.mw-parser-output,
.mw-body,
.mw-body-content,
#bodyContent {
background-color: #0a0a0a !important;
}
/* Entferne alle weißen Hintergründe */
.mainpage-container * {
background-color: transparent;
}
/* Entferne alle Borders von Container-Elementen */
.mainpage-container,
.mainpage-content,
.mainpage-sidebar,
.content-section {
border: none !important;
}
.sidebar-panel,
.landing-container,
.npc-grid-container {
background-color: #0a0a0a;
border: none !important; /* Keine Borders mehr */
padding: 1em;
}