MediaWiki:Vector.css

Aus TuxBoxWIKI
Version vom 23. Januar 2025, 20:02 Uhr von Dbt (Diskussion | Beiträge) (Test css)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
  • Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/* Das folgende CSS wird für Benutzer der Vector-Benutzeroberfläche geladen. */
/* ----------------------------------------------------------------------------
   Basic body styling
   ---------------------------------------------------------------------------- */
body {
  background-color: #F5F7FA; /* Matches your light background */
  color: #536482; /* Main text color */
  /* You can add font styles if needed */
}

/* Header title (page title) */
#firstHeading, /* Usually the main article title in Vector */
#content h1 {
  color: #FFFFFF; /* White like your h1 in the snippet */
  background-color: #12A3EB; /* Example background from your snippet */
  padding: 0.2em 0.5em; /* Optional spacing */
}

/* Headings in content area */
.mw-body h2,
.mw-body h2 .mw-headline,
.mw-body h3,
#content h2,
#content h2 .mw-headline,
#content h3 {
  color: #28313F; /* Darker heading color */
  border-bottom: 1px solid #CCCCCC; /* Optional bottom border, can match your snippet */
}

/* ----------------------------------------------------------------------------
   Links
   ---------------------------------------------------------------------------- */
a, #p-personal li a, .vector-menu-content li a {
  /* Links in Vector often appear in nav/personal areas as well */
  color: #105289; /* Link color from your snippet */
  text-decoration: none;
}

a:hover,
#p-personal li a:hover,
.vector-menu-content li a:hover {
  color: #D31141; /* Hover color from your snippet */
  text-decoration: underline; /* Or keep as none, up to you */
}

/* ----------------------------------------------------------------------------
   Vector-specific elements
   ---------------------------------------------------------------------------- */
/* Top bar (the #mw-head or #mw-head-base often used in Vector) */
#mw-head,
#mw-head-base {
  background-color: #12A3EB; /* Light blue from your snippet */
  background-image: linear-gradient(to bottom, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
  color: #FFFFFF;
}

/* Sidebar (left navigation) */
#mw-panel,
.vector-sidebar-container {
  background-color: #CADCEB; /* Matches your .navbar or .bg3 color scheme */
  border-right: 1px solid #0076B1; /* optional border color */
}

/* Sidebar links */
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-content li a {
  color: #28313F;
}

#mw-panel .vector-menu-content li a:hover {
  background-color: #E1EBF2; /* Subtle highlight */
  color: #105289;
}

/* ----------------------------------------------------------------------------
   Tables and other content
   ---------------------------------------------------------------------------- */
/* Basic table styling in content */
.mw-body table {
  border: 1px solid #BFC1CF; /* Table border color example */
  color: #536482;
}

.mw-body table th {
  background-color: #0076B1; 
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.mw-body table td {
  border: 1px solid #FAFAFA;
}

/* Hover effect on table rows */
.mw-body table tr:hover {
  background-color: #CFE1F6; 
  color: #000000;
}

/* ----------------------------------------------------------------------------
   Buttons and search box
   ---------------------------------------------------------------------------- */
/* Vector’s search and buttons often share classes */
.vector-search-box input,
input.mw-ui-button,
button.mw-ui-button {
  /* Basic button style from your snippet */
  background-color: #E9E9E9;
  border: 1px solid #C7C3BF;
  color: #D31141;
  cursor: pointer;
}

.vector-search-box input:hover,
input.mw-ui-button:hover,
button.mw-ui-button:hover {
  background-color: #FFFFFF;
  border-color: #0A8ED0;
}

/* ----------------------------------------------------------------------------
   Footer or other misc. elements
   ---------------------------------------------------------------------------- */
/* Footer area, if you use Vector’s built-in footer */
#footer,
#mw-footer,
#footer-places {
  background-color: #ECEDEE;
  color: #5C758C;
}