|
|
| (7 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| /* Shadowed Eclipse MediaWiki Custom Dark Theme */ | | /* Shadowed Eclipse public wiki chrome cleanup */ |
| /* Save this as: htdocs/alla/w/skins/Vector/resources/shadowedeclipse-custom.css */
| | #pt-createaccount, |
| | | #pt-login, |
| /* Import fonts */
| | .mw-list-item#pt-createaccount, |
| @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=Fjalla+One&display=swap');
| | .mw-list-item#pt-login, |
| | | .vector-user-links .mw-list-item#pt-createaccount, |
| /* Root color variables to match your main site */
| | .vector-user-links .mw-list-item#pt-login, |
| :root {
| | .mw-portlet-personal li#pt-createaccount, |
| --shadow-bg-primary: #111;
| | .mw-portlet-personal li#pt-login { |
| --shadow-bg-secondary: #1a1a1a;
| | display: none !important; |
| --shadow-accent: #66ccff;
| |
| --shadow-text: #e0e0e0;
| |
| --shadow-text-muted: #aaa;
| |
| --shadow-border: #444;
| |
| --shadow-border-light: #666;
| |
| }
| |
| | |
| /* Global background and text colors */
| |
| body {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| color: var(--shadow-text) !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| font-weight: 400 !important;
| |
| letter-spacing: 0.5px !important;
| |
| }
| |
| | |
| /* Header styling */
| |
| .mw-header,
| |
| .vector-header {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border-bottom: 2px solid var(--shadow-border) !important;
| |
| }
| |
| | |
| /* Main content area */
| |
| .mw-page-container,
| |
| .vector-page-container {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| }
| |
| | |
| .mw-content-container, | |
| .vector-content-container,
| |
| .mw-article-toolbar-container {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| margin: 10px !important;
| |
| }
| |
| | |
| /* Article content */
| |
| .mw-body,
| |
| .vector-body,
| |
| #content { | |
| background-color: var(--shadow-bg-secondary) !important;
| |
| color: var(--shadow-text) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| }
| |
| | |
| /* Sidebar styling */
| |
| .mw-sidebar,
| |
| .vector-sidebar, | |
| #mw-sidebar {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| border-right: 2px solid var(--shadow-border) !important;
| |
| }
| |
| | |
| .vector-menu-portal,
| |
| .portal {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| margin-bottom: 10px !important;
| |
| }
| |
| | |
| /* Menu headings */
| |
| .vector-menu-portal h3,
| |
| .portal h3,
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: 'Bebas Neue', Arial, sans-serif !important;
| |
| color: var(--shadow-accent) !important;
| |
| letter-spacing: 2px !important;
| |
| text-transform: uppercase !important;
| |
| border-bottom: 1px solid var(--shadow-accent) !important;
| |
| padding-bottom: 5px !important;
| |
| }
| |
| | |
| /* Article title */
| |
| .firstHeading,
| |
| #firstHeading { | |
| font-family: 'Bebas Neue', Arial, sans-serif !important;
| |
| color: var(--shadow-accent) !important;
| |
| letter-spacing: 3px !important;
| |
| text-transform: uppercase !important;
| |
| border-bottom: 2px solid var(--shadow-accent) !important;
| |
| padding-bottom: 10px !important;
| |
| margin-bottom: 20px !important;
| |
| }
| |
| | |
| /* Links */
| |
| a {
| |
| color: var(--shadow-accent) !important;
| |
| text-decoration: none !important;
| |
| font-weight: 500 !important;
| |
| }
| |
| | |
| a:hover {
| |
| color: #88ddff !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| | |
| a:visited {
| |
| color: #5599cc !important;
| |
| }
| |
| | |
| /* Navigation tabs */
| |
| .vector-menu-tabs, | |
| #p-views ul,
| |
| #p-cactions ul {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| }
| |
| | |
| .vector-menu-tabs li, | |
| #p-views li, | |
| #p-cactions li {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px 5px 0 0 !important;
| |
| margin-right: 2px !important;
| |
| }
| |
| | |
| .vector-menu-tabs li.selected, | |
| .vector-menu-tabs li:hover,
| |
| #p-views li.selected,
| |
| #p-views li:hover { | |
| background-color: var(--shadow-accent) !important;
| |
| }
| |
| | |
| .vector-menu-tabs li.selected a,
| |
| .vector-menu-tabs li:hover a, | |
| #p-views li.selected a,
| |
| #p-views li:hover a {
| |
| color: var(--shadow-bg-primary) !important;
| |
| font-weight: 600 !important;
| |
| }
| |
| | |
| /* Search box styling */
| |
| .vector-search-box,
| |
| #simpleSearch {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 2px solid var(--shadow-accent) !important;
| |
| border-radius: 4px !important;
| |
| }
| |
| | |
| .vector-search-box-input,
| |
| #searchInput { | |
| background-color: var(--shadow-bg-secondary) !important;
| |
| color: var(--shadow-text) !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| border: none !important;
| |
| padding: 8px 12px !important;
| |
| }
| |
| | |
| .vector-search-box-input:focus,
| |
| #searchInput:focus {
| |
| outline: none !important;
| |
| box-shadow: 0 0 5px rgba(102, 204, 255, 0.3) !important;
| |
| }
| |
| | |
| /* Search button */
| |
| .searchButton,
| |
| #searchButton {
| |
| background-color: var(--shadow-accent) !important;
| |
| color: var(--shadow-bg-primary) !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| font-weight: 600 !important;
| |
| border: none !important;
| |
| padding: 8px 15px !important;
| |
| border-radius: 0 4px 4px 0 !important;
| |
| }
| |
| | |
| /* Footer */
| |
| .mw-footer, | |
| .vector-footer,
| |
| #footer { | |
| background-color: var(--shadow-bg-primary) !important;
| |
| border-top: 2px solid var(--shadow-border) !important;
| |
| color: var(--shadow-text-muted) !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| }
| |
| | |
| /* Edit buttons and tools */
| |
| .vector-menu-dropdown,
| |
| .vector-menu-dropdown-content {
| |
| background-color: var(--shadow-bg-secondary) !important; | |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| }
| |
| | |
| /* Tables */
| |
| table {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| }
| |
| | |
| th {
| |
| background-color: var(--shadow-accent) !important;
| |
| color: var(--shadow-bg-primary) !important;
| |
| font-family: 'Fjalla One', Arial, sans-serif !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 1px !important;
| |
| }
| |
| | |
| td {
| |
| border-bottom: 1px solid var(--shadow-border) !important;
| |
| color: var(--shadow-text) !important;
| |
| }
| |
| | |
| /* Code blocks */
| |
| code, pre {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| color: var(--shadow-accent) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 3px !important;
| |
| font-family: 'Courier New', monospace !important;
| |
| }
| |
| | |
| /* Blockquotes */
| |
| blockquote {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| border-left: 4px solid var(--shadow-accent) !important;
| |
| color: var(--shadow-text-muted) !important;
| |
| padding: 10px 15px !important;
| |
| margin: 10px 0 !important;
| |
| font-style: italic !important;
| |
| }
| |
| | |
| /* Input fields */
| |
| input[type="text"],
| |
| input[type="password"],
| |
| input[type="email"],
| |
| textarea,
| |
| select {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| color: var(--shadow-text) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 3px !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| padding: 8px 10px !important;
| |
| }
| |
| | |
| input[type="text"]:focus,
| |
| input[type="password"]:focus,
| |
| input[type="email"]:focus,
| |
| textarea:focus,
| |
| select:focus {
| |
| border-color: var(--shadow-accent) !important;
| |
| outline: none !important;
| |
| box-shadow: 0 0 3px rgba(102, 204, 255, 0.3) !important;
| |
| }
| |
| | |
| /* Buttons */
| |
| .mw-ui-button,
| |
| button,
| |
| input[type="submit"],
| |
| input[type="button"] {
| |
| background-color: var(--shadow-accent) !important;
| |
| color: var(--shadow-bg-primary) !important;
| |
| font-family: 'Oswald', Arial, sans-serif !important;
| |
| font-weight: 600 !important;
| |
| border: none !important;
| |
| padding: 8px 15px !important;
| |
| border-radius: 4px !important;
| |
| letter-spacing: 0.5px !important;
| |
| text-transform: uppercase !important;
| |
| }
| |
| | |
| .mw-ui-button:hover,
| |
| button:hover,
| |
| input[type="submit"]:hover,
| |
| input[type="button"]:hover {
| |
| background-color: #88ddff !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| /* Special pages styling */
| |
| .mw-special-page {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| padding: 20px !important;
| |
| border-radius: 5px !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| }
| |
| | |
| /* Recent changes, watchlist, etc. */
| |
| .mw-changeslist-legend {
| |
| background-color: var(--shadow-bg-primary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| border-radius: 5px !important;
| |
| padding: 10px !important;
| |
| }
| |
| | |
| /* Warning and info boxes */
| |
| .mw-message-box {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-accent) !important;
| |
| border-radius: 5px !important;
| |
| color: var(--shadow-text) !important;
| |
| }
| |
| | |
| .mw-message-box-warning {
| |
| border-color: #ffaa00 !important;
| |
| }
| |
| | |
| .mw-message-box-error {
| |
| border-color: #ff6666 !important;
| |
| }
| |
| | |
| /* Hide/show elements improvements */
| |
| .vector-menu-dropdown-checkbox:checked ~ .vector-menu-dropdown-content {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| border: 1px solid var(--shadow-border) !important;
| |
| }
| |
| | |
| /* User menu */
| |
| .vector-user-menu {
| |
| background-color: var(--shadow-bg-secondary) !important;
| |
| } | | } |
|
| |
|
| /* Ensure proper contrast for all text */ | | /* Hide empty personal/user tool areas after login/create links are removed. */ |
| .mw-body-content p, | | .vector-user-links, |
| .mw-body-content li,
| | #p-personal { |
| .mw-body-content span,
| | display: none !important; |
| .vector-body p,
| |
| .vector-body li,
| |
| .vector-body span {
| |
| color: var(--shadow-text) !important; | |
| } | | } |
|
| |
|
| /* Logo area */ | | /* Hide Vector 2022 logged-out login overflow entry. */ |
| .mw-logo, | | #pt-login-2, |
| .vector-logo { | | .mw-list-item#pt-login-2, |
| filter: brightness(1.2) !important; | | #p-vector-user-menu-overflow, |
| | #vector-user-links-dropdown, |
| | .vector-user-menu-logged-out, |
| | .vector-user-links-wide[aria-label="Personal tools"] { |
| | display: none !important; |
| } | | } |
|
| |
|
| /* Content navigation */ | | /* Shadowed Eclipse: hide public login/user tools and discussion tab. */ |
| .vector-menu-content-list { | | #pt-login, |
| background-color: var(--shadow-bg-secondary) !important;
| | #pt-login-2, |
| | #pt-createaccount, |
| | #p-personal, |
| | #p-vector-user-menu-overflow, |
| | #vector-user-links-dropdown, |
| | .vector-user-links, |
| | .vector-user-links-wide, |
| | .vector-user-menu, |
| | .vector-user-menu-logged-out, |
| | .mw-portlet-personal, |
| | li#ca-talk, |
| | #ca-talk, |
| | .ca-talk { |
| | display: none !important; |
| } | | } |
|
| |
|
| /* Print styles override */ | | /* Keep the search box aligned after user tools are hidden. */ |
| @media print {
| | .vector-header-end { |
| body { | | margin-left: auto !important; |
| background-color: white !important;
| |
| color: black !important;
| |
| }
| |
| } | | } |
