|
|
| Zeile 1: |
Zeile 1: |
| /* DARK MODE ERZWINGEN */ | | /* === DARK MODE FORCED === */ |
| html, | | 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 { | | body { |
| background-color: hsl(var(--background)); | | background: #0a0a0a !important; |
| color: hsl(var(--foreground)); | | color: #ededed !important; |
| 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 === */
| | #mw-page-base, |
| ::-webkit-scrollbar {
| | #mw-head-base, |
| width: 8px;
| | #mw-wrapper, |
| height: 8px;
| | #mw-content-container, |
| }
| | .mw-body, |
| | | #content { |
| ::-webkit-scrollbar-track {
| | background: #0a0a0a !important; |
| background: hsl(var(--muted)); | | color: #ededed !important; |
| } | | } |
|
| |
|
| ::-webkit-scrollbar-thumb {
| | /* Sidebar */ |
| background: hsl(var(--muted-foreground) / 0.3); | | #mw-site-navigation, |
| border-radius: 4px;
| | #mw-related-navigation { |
| | background: #171717 !important; |
| } | | } |
|
| |
|
| ::-webkit-scrollbar-thumb:hover {
| | /* Content Container */ |
| background: hsl(var(--muted-foreground) / 0.5); | | #mw-content-text { |
| | background: #171717 !important; |
| | padding: 2rem !important; |
| | border-radius: 8px !important; |
| | border: 1px solid #262626 !important; |
| } | | } |
|
| |
|
| /* === TYPOGRAPHY === */ | | /* Links */ |
| 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 { | | a { |
| color: hsl(var(--primary)); | | color: #a1a1aa !important; |
| text-decoration: none;
| |
| transition: color 0.15s ease;
| |
| } | | } |
|
| |
|
| a:hover { | | a:hover { |
| color: hsl(var(--primary) / 0.8); | | color: #d4d4d8 !important; |
| text-decoration: underline;
| |
| text-underline-offset: 2px;
| |
| } | | } |
|
| |
|
| a.new {
| | /* Headings */ |
| color: hsl(0 84.2% 60.2%); | | h1, h2, h3, h4, h5, h6 { |
| | color: #fafafa !important; |
| | border-color: #262626 !important; |
| } | | } |
|
| |
|
| /* === BUTTONS === */ | | /* Tables */ |
| .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 { | | .wikitable { |
| border-collapse: collapse; | | background: #171717 !important; |
| border: 1px solid hsl(var(--border)); | | border: 1px solid #262626 !important; |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| width: 100%;
| |
| font-size: 0.875rem;
| |
| } | | } |
|
| |
|
| .wikitable th { | | .wikitable th { |
| background-color: hsl(var(--muted)); | | background: #262626 !important; |
| color: hsl(var(--muted-foreground)); | | color: #a1a1aa !important; |
| font-weight: 600;
| |
| text-align: left;
| |
| padding: 0.75rem 1rem;
| |
| border-bottom: 1px solid hsl(var(--border));
| |
| } | | } |
|
| |
|
| .wikitable td { | | .wikitable td { |
| padding: 0.75rem 1rem;
| | border-color: #262626 !important; |
| border-bottom: 1px solid hsl(var(--border)); | |
| } | | } |
|
| |
|
| .wikitable tr:last-child td { | | /* Buttons */ |
| border-bottom: none; | | button, |
| | .mw-ui-button { |
| | background: #262626 !important; |
| | color: #ededed !important; |
| | border: 1px solid #404040 !important; |
| } | | } |
|
| |
|
| .wikitable tr:hover {
| | button:hover, |
| background-color: hsl(var(--muted) / 0.5);
| | .mw-ui-button:hover { |
| }
| | background: #404040 !important; |
| | |
| /* === 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 === */ | | /* Inputs */ |
| code {
| | input, |
| 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, | | textarea, |
| select { | | select { |
| background-color: hsl(var(--background)); | | background: #171717 !important; |
| border: 1px solid hsl(var(--input)); | | color: #ededed !important; |
| border-radius: var(--radius); | | border: 1px solid #262626 !important; |
| padding: 0.5rem 0.75rem;
| |
| font-size: 0.875rem;
| |
| transition: border-color 0.15s ease;
| |
| } | | } |
|
| |
|
| input[type="text"]:focus,
| | /* Footer */ |
| 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-poweredbyico, |
| #footer-copyrightico { | | #footer-copyrightico { |
| display: none; | | display: none !important; |
| }
| |
| | |
| #footer {
| |
| border-top: 1px solid hsl(var(--border));
| |
| margin-top: 3rem;
| |
| padding-top: 2rem;
| |
| font-size: 0.875rem;
| |
| color: hsl(var(--muted-foreground));
| |
| }
| |
| | |
| /* === NOTIFICATIONS === */
| |
| .mw-notification {
| |
| background-color: hsl(var(--card));
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius);
| |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
| |
| }
| |
| | |
| /* === EDIT TOOLBAR === */
| |
| .wikiEditor-ui-toolbar {
| |
| background-color: hsl(var(--muted));
| |
| border: 1px solid hsl(var(--border));
| |
| border-radius: var(--radius) var(--radius) 0 0;
| |
| }
| |
| | |
| /* === MOBILE RESPONSIVE === */
| |
| @media (max-width: 768px) {
| |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 1rem 0;
| |
| }
| |
|
| |
| h1 {
| |
| font-size: 1.875rem;
| |
| }
| |
|
| |
| h2 {
| |
| font-size: 1.5rem;
| |
| }
| |
| }
| |
| | |
| /* === SMOOTH TRANSITIONS === */
| |
| * {
| |
| transition: background-color 0.15s ease, border-color 0.15s ease;
| |
| } | | } |
/* === DARK MODE FORCED === */
html,
body {
background: #0a0a0a !important;
color: #ededed !important;
}
#mw-page-base,
#mw-head-base,
#mw-wrapper,
#mw-content-container,
.mw-body,
#content {
background: #0a0a0a !important;
color: #ededed !important;
}
/* Sidebar */
#mw-site-navigation,
#mw-related-navigation {
background: #171717 !important;
}
/* Content Container */
#mw-content-text {
background: #171717 !important;
padding: 2rem !important;
border-radius: 8px !important;
border: 1px solid #262626 !important;
}
/* Links */
a {
color: #a1a1aa !important;
}
a:hover {
color: #d4d4d8 !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #fafafa !important;
border-color: #262626 !important;
}
/* Tables */
.wikitable {
background: #171717 !important;
border: 1px solid #262626 !important;
}
.wikitable th {
background: #262626 !important;
color: #a1a1aa !important;
}
.wikitable td {
border-color: #262626 !important;
}
/* Buttons */
button,
.mw-ui-button {
background: #262626 !important;
color: #ededed !important;
border: 1px solid #404040 !important;
}
button:hover,
.mw-ui-button:hover {
background: #404040 !important;
}
/* Inputs */
input,
textarea,
select {
background: #171717 !important;
color: #ededed !important;
border: 1px solid #262626 !important;
}
/* Footer */
#footer-poweredbyico,
#footer-copyrightico {
display: none !important;
}