Wikipedia

Benutzer:Schnark/js/CSS

< Benutzer:Schnark | js

Auf dieser Seite sammle ich einige nützliche CSS-Formatierungen, die du in deine common.css einfügen kannst. Teilweise kann es sein, dass die Beispiele hier veraltet sind, und sich in meiner vector.css eine neuere Version findet.

Bunte Signaturen normal darstellen

Bearbeiten

Wer sich von den Spielkindern, die meinen durch ihre Signatur mehr auffallen zu müssen als durch ihre Beiträge, genau so gestört fühlt wie ich, kann mit dem folgenden CSS ein wenig für Abhilfe sorgen. 

/* Da bei Links kein style-Attribut möglich ist, reicht es aus de-facto-
   vererbbare Eigenschaften anzugeben, die nicht ohnehin schon gesetzt sind,
   !important ist nicht notwendig. Für die Kindelemente der Links ist es
   dagegen notwendig, eine Vererbung des normalen Werts zu erzwingen. */

/* Farben, Schrift, etc. */
.mw-body-content a[href*="/wiki/Benutzer:"],
.mw-body-content a[href*="/wiki/Benutzer_Diskussion:"],
.mw-body-content a[href*="/wiki/Benutzerin:"],
.mw-body-content a[href*="/wiki/Benutzerin_Diskussion:"] {
    font: 100% sans-serif;
    text-shadow: none;
    /*background-color: white;*/
}
.mw-body-content a[href*="/wiki/Benutzer:"] *,
.mw-body-content a[href*="/wiki/Benutzer_Diskussion:"] *,
.mw-body-content a[href*="/wiki/Benutzerin:"] *,
.mw-body-content a[href*="/wiki/Benutzerin_Diskussion:"] * {
    font: inherit !important;
    color: inherit !important;
    text-decoration: inherit !important;
    text-shadow: inherit !important;
    border: none !important;
    background-color: inherit !important;
}
Bearbeiten

Wer schon einmal versehentlich auf einen Zurücksetzen-Link geklickt hat, will diese vielleicht entfernen. Wenn man einen Versionsunterschied betrachtet, ist der Link aber durchaus hilfreich. Der folgende CSS-Code blendet diese Links überall aus, nur bei Versionsunterschieden ist er rot unterlegt zu sehen: 

/* Zurücksetzen weg, zu gefährlich, nur bei Diffs, rot unterlegt */
.mw-rollback-link {
    display: none;
}
.diff-ntitle .mw-rollback-link {
    display: inline;
    background-color: #ffc0c0;
}

Eine Javascript-Alternative ist das Skript von Revolus.

Hinweis zum Urheberrecht beim Bearbeiten entfernen

Bearbeiten

Nachdem man den Hinweis unter dem Bearbeiten-Feld gelesen und verstanden hat, will man ihn höchstwahrscheinlich nicht mehr sehen, ausblenden kann man ihn mit: 

/* Hinweise beim Bearbeiten */
#editpage-copywarn,
.mw-tos-summary,
.cancelLink,
.editHelp,
.ve-ui-mwSaveDialog-license {
    display: none;
}

Neue-Nachrichten-Balken

Bearbeiten

Wer noch (über ein Skript wie Benutzer:Schnark/js/kackbalken) den alten Neue-Nachrichten-Balken verwendet, der wird wissen: Entweder ist der Balken zu unauffällig oder zu auffällig. Vielleicht gefällt dir ja meine Version, zentriert und rot unterstrichen: 

/* "Neue Nachricht" rot unterstreichen (falls per JS eingeblendet) */
.usermessage {
    background-color: #eaf3ff;
    border-style: none;
    border-bottom: 2px solid #d33;
    width: 100%;
    margin: -1em 0 1em 0;
    padding: .5em 0;
    text-align: center;
}

Und wer gefälschte Neue-Nachrichten-Balken sofort als solche erkennen will, färbt diese anders: 

/* falsche "Neue Nachrichten" */
#mw-content-text .usermessage {
    background-color: white;
    border: 2px solid #ac6600;
    margin: .5em;
    padding: .5em;
}

Benutzerleiste und Reiter fixieren

Bearbeiten

Wer im Vector-Skin die Zeile mit den Links auf die eigene Benutzerseite und die Reiter fixieren will, kann den folgenden CSS-Code verwenden: 

/* Benutzerleiste und Reiter fixieren */
#p-personal {
  position: fixed; z-index: 2;
  width: 100%; left: 0em; height: 5em; 
  background-color: white;
}
#p-personal ul {
  margin-right: 11em;
  float: right;
}
#left-navigation {
  position: fixed; z-index: 2;
  left: 10em;
}
#right-navigation {
  position: fixed; z-index: 2;
  right: 0em;
}

Linkfarben

Bearbeiten

Das folgende CSS (nur Vector-Skin) färbt alle internen und externen Links im gleichen Blauton (externe Links erkennt man am entsprechenden Symbol), externe Links ohne Symbol (also auf Wikipedia selbst und auf Labs) sowie Interwiki-Links im Textkörper grün, fehlende Seiten rot. Unbesuchte Links sind etwas heller, nur in der Navigation haben besuchte und unbesuchte Links den gleichen Farbton. 

/* In der Regel reicht eine Klasse zum Überschreiben aus, nur die Seitenleiste
   und einige Regeln für die Linksymbole verwenden Selektoren mit einer ID und
   viel sonstigem Zeug. Für die Seitenleiste sind daher zwei IDs im Selektor
   notwendig. */

/* externe und interne Links im Text im gleichen Blauton
   (bei externen reicht das Symbol zur Unterscheidung),
   Links zu fehlenden Seiten rot,
   besuchte jeweils etwas dunkler */
.mw-body-content a {
    color: #0645ad;
}
.mw-body-content a:visited {
    color: #0b0080;
}
.mw-body-content a.new {
    color: #ba0000;
}
.mw-body-content a.new:visited {
    color: #a55858;
}
/* Links auf andere Protokolle/Medien markieren */
.mw-body-content a.external[href^="mailto:"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAMFBMVEX///////+IioX29vbq6unJx8O9vbvl5ePZ2NX7+/iysrLp5+KjoZyop6Oxrqrx8O1Uz2ohAAAAAXRSTlMAQObYZgAAAENJREFUeNotxscBwCAMA0AsudAS9t82hnCvK2kAUQ6FCPSuzvy/x3wf0RFir6KAnbKqMSstMEnZZW/0cWqNVMs6Lv8AS44BeHjFSEUAAAAASUVORK5CYII=);
}
.mw-body-content a.external[href^="news:"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAe0lEQVR42o2QQQqAIBBFPbDXCKJTGBTRIqJN7qL2gp5BcOEppvowSWSU8HDxn38GRVkV9AeIH+cuSilvxBhJKfUQEWR4iHjNcNtBXly3Bbf3nnltZDHbiFHWOmCMuXDWIYM4TgNpPVMIIY1MIOv6lgQRiaat3z4ae5/ODo3dPZDhr8jNAAAAAElFTkSuQmCC);
}
.mw-body-content a.external[href^="ftp://"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAATElEQVR4XlXIQQrAIAwAwfzej/QtPqQUepBiqR68bWMghOzeRpCCf4DsDb26OfDk0quxo8KtN6AEGtEzNh5eRsbOx2RlHCw9YxSYR34KRKBV5WnY6QAAAABJRU5ErkJggg==);
}
.mw-body-content a.external[href^="irc://"],
.mw-body-content a.external[href^="ircs://"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdElEQVR42n3Q3QqAIAwGUF8+iF4rCrwpewzxH7y3tnSgrAafMHaQqdj2tczL9BmYPyUEND8FuIda6y7GGBbCAGOtxaSUWEjIOVe89zyshSCEwO+oLtWahrpXSylfCEeFhE51lBhjyTkjIjj+24gI1ltowOUGKEFJ6nMQqWQAAAAASUVORK5CYII=);
}
.mw-body-content a.external[href$=".ogg"],
.mw-body-content a.external[href$=".mid"],
.mw-body-content a.external[href$=".midi"],
.mw-body-content a.external[href$=".mp3"],
.mw-body-content a.external[href$=".wav"],
.mw-body-content a.external[href$=".wma"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAMFBMVEX///91fyrI0Xt5gzPCzGuyv0bw8eubomu3u5qQlWafo4HV25q3w1CLljOEjjKRlHTuBCtpAAAAAXRSTlMAQObYZgAAADdJREFUCFtjYGgUFBRnYBBSUlJkYDCCkIKCIFKAEUZmiohNdGRYs/XW6VgGkbhC1xcMjB8Y5BMA6nkLTrUjfj0AAAAASUVORK5CYII=);
}
.mw-body-content a.external[href$=".ogm"],
.mw-body-content a.external[href$=".avi"],
.mw-body-content a.external[href$=".mpeg"],
.mw-body-content a.external[href$=".mpg"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAAnRSTlMA/1uRIrUAAABbSURBVHjaLY2xCUAxCAVdXbAOWLrE663sAoJkhZA5UuQn8Ltr7o7O7iqifR/asJwzDZtGG8bh1QZpBizYUkkWvApYcpGtyh9quiOMU5+GBo+rvVjNlBv7F9H4A3inRvd0XEi0AAAAAElFTkSuQmCC);
}
.mw-body-content a.external[href$=".pdf"],
.mw-body-content a.external[href$=".PDF"],
.mw-body-content a.external[href*=".pdf#"],
.mw-body-content a.external[href*=".pdf?"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAATklEQVR4XmXKQQqAMAwF0X/7XsSz9CSKiyIIFRFcjMmihmiGbB5fqDCaQJ4j46pzYLUWe+cXZ6OVBhTS0srY2Njp/+XxXXZOLu6EUWAOPX1vnwTBe6qQAAAAAElFTkSuQmCC);
}
/* Externe Links auf interne Seiten, Interwikilinks etc. grün und ohne Symbol,
   besuchte etwas dunkler, http stattdessen unterstreichen */
.mw-body-content a.external[href^="//de.wikipedia.org"],
.mw-body-content a.external[href^="https://de.wikipedia.org"],
.mw-body-content a.external[href^="//www.wikidata.org"],
.mw-body-content a.external[href^="https://www.wikidata.org"],
.mw-body-content a.external[href^="//tools.wmflabs.org"],
.mw-body-content a.external[href^="http://tools.wmflabs.org"],
.mw-body-content a.external[href^="https://tools.wmflabs.org"],
.mw-body-content a.extiw {
    color: #059416;
    background: none;
    padding-right: 0;
}
.mw-body-content a.external[href^="//de.wikipedia.org"]:visited,
.mw-body-content a.external[href^="https://de.wikipedia.org"]:visited,
.mw-body-content a.external[href^="//www.wikidata.org"]:visited,
.mw-body-content a.external[href^="https://www.wikidata.org"]:visited,
.mw-body-content a.external[href^="//tools.wmflabs.org"]:visited,
.mw-body-content a.external[href^="http://tools.wmflabs.org"]:visited,
.mw-body-content a.external[href^="https://tools.wmflabs.org"]:visited,
.mw-body-content a.extiw:visited {
    color: #047b12;
}
.mw-body-content a.external[href^="http://de.wikipedia.org"],
.mw-body-content a.external[href^="http://www.wikidata.org"] {
    text-decoration: underline;
}
/* Links in Navigation immer blau bzw. rot, ohne Unterscheidung besuchter Links */
#mw-head a,
#mw-navigation #mw-panel .body a,
#footer a {
    color: #0645ad;
}
#mw-head li.new a {
    color: #ba0000;
}
/* unbunte Navigations-Links wieder zurück zum Standard */
#mw-head .selected a,
.search-types .current a {
    color: #222;
}
#mw-navigation #mw-panel .wbc-editpage a {
    color: #797979;
}
#mw-navigation #mw-panel .wbc-editpage a:hover {
    color: #0645ad;
}

/* aktive Links orange */
.mw-body-content a:active {
    color: #faa700 !important;
}

/* Selbstlinks immer in Standardfarbe */
.mw-body-content a.mw-selflink {
    color: inherit !important;
}
Bearbeiten

Mit .interwiki-en { font-weight: bold; } lassen sich die Interwikilinks auf die englische Wikipedia hervorheben, analog natürlich auch andere Sprachen.

Ungesehene Änderungen

Bearbeiten

Auf der Beobachtungsliste und in Versionsgeschichten beobachteter Seiten werden ungesehene Änderungen hervorgehoben, allerdings viel zu auffällig für meinen Geschmack. Ein kleiner Kringel reicht auch: 

/* ungelesene Änderungen mit Kringel markieren */
.updatedmarker {
    display: none;
}
.mw-history-line-updated input + a::before {
    content: "°";
}
.mw-special-Watchlist .mw-changeslist-line-watched .mw-title {
    font-weight: normal;
}
.mw-special-Watchlist .mw-changeslist-line-watched .mw-title::before {
    content: "°";
}

Breitenbeschränkung

Bearbeiten

Manche wollen es ja nicht glauben, aber Texte lesen sich wesentlich angenehmer, wenn sie in der Breite beschränkt werden: 

/* Breitenbeschränkung für Absätze */
.action-view #mw-content-text p,
.action-view #mw-content-text blockquote,
.action-view #mw-content-text ul,
.action-view #mw-content-text ol,
.action-view #mw-content-text dl {
    max-width: 50em;
}

/* nicht auf Spezialseiten, … */
.ns-special #mw-content-text p,
.ns-special #mw-content-text blockquote,
.ns-special #mw-content-text ul,
.ns-special #mw-content-text ol,
.ns-special #mw-content-text dl,
/* nicht in Navileisten etc. … */
.action-view #mw-content-text div p,
/* hier kein blockquote! */
.action-view #mw-content-text div ul,
.action-view #mw-content-text div ol,
.action-view #mw-content-text div dl,
/* und nicht in Tabellen */
.action-view #mw-content-text table p,
.action-view #mw-content-text table blockquote,
.action-view #mw-content-text table ul,
.action-view #mw-content-text table ol,
.action-view #mw-content-text table dl {
    max-width: none;
}

Für Spielkinder

Bearbeiten

Für Spielkinder (und solche, die es werden wollen) mit einem halbwegs modernen Browser (IE ab Version 10, alle anderen verbreiteten Browser, wer einen etwas älteren Browser verwendet, muss eventuell passende Präfixe ergänzen) 

#p-logo a {
 transition: all 400s 100000s linear;
}
#p-logo a:hover {
 transform: rotate(72000deg);
 transition-delay: 0s;
}

Siehe auch

Bearbeiten
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Benutzer:Schnark/js/CSS&oldid=198976406“