Vor einiger Zeit veröffentlichten sie auf Twitter einen Witz zu Ehren der Übernahme von Github durch Microsoft - eine Seite der Website, die im Stil von Windows 98 neu gestaltet wurde . Ich entschied, dass der Witz zu gut war, um ein Witz zu bleiben.
Farben
Das "klassische" Windows-Thema hat tatsächlich mehrere Iterationen. Die ersten Versionen von Windows (bis zu 9x) zeichneten sich durch weiße Fenster, leicht abgerundete Tastenränder und ein sehr starkes Pseudovolumen aus. In Windows 95 wurden die Fenster grau, alles wurde quadratischer und die Linien zum Erstellen des Pseudovolumens wurden auf ein Pixel verringert. In Windows 98 wurden Farbverläufe hinzugefügt, aber im Allgemeinen ist der Stil mehr oder weniger gleich geblieben. Windows 2000 hat einen leicht gelblichen Farbton.
Ich habe mich für Windows 95 entschieden und damit die Farben anschließend aktualisiert werden können, habe ich sie als CSS-Variablen (naja, oder „benutzerdefinierte Eigenschaften“) entworfen:
--color-button-text: rgb(0, 0, 0); --color-button-face: rgb(192, 192, 192); --color-button-highlight: rgb(255, 255, 255); --color-button-shadow: rgb(128, 128, 128); --color-button-shadow-dark: rgb(0, 0, 0); --color-button-checked: rgb(223, 223, 223); --color-window-text: rgb(0, 0, 0); --color-window: rgb(255, 255, 255); --color-active-caption-text: rgb(255, 255, 255); --color-active-caption: rgb(0, 0, 128); --color-info-background: rgb(255, 255, 192); --color-highlight-text: rgb(255, 255, 255); --color-highlight: rgb(0, 0, 128); --color-gray-text: rgb(128, 128, 128); --color-link: rgb(0, 0, 255); --color-hover: rgb(223, 223, 255);
Schriftarten
Das Rendern von Pixel-Schriftarten war nicht über den Browser möglich, daher musste ich mich mit "MS Sans Serif" zufrieden geben:
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
Die Schriftgröße war auf der Windows-Oberfläche fast überall gleich, daher muss die font: inherit !important; für viele Elemente hinzugefügt werden font: inherit !important; . Die Textauswahlfarbe kann jetzt mithilfe von ::selection neu definiert werden. In Firefox wird sie jedoch aus irgendeinem Grund nur mit einem Präfix unterstützt.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
Und da die Hauptschrift lesbar war, habe ich beschlossen, die Standardschrift für den Code in Ruhe zu lassen und nicht in "Courier New" zu ändern.
Lautstärke
Das nächste Problem ist das Zeichnen von Volumen. CSS-Rahmen können immer noch nur in einer Ebene liegen, daher musste für doppelte Umrisse ein box-shadow verwendet werden.
ListBox, TextBox, TreeView ...
Malen Sie zum Beispiel die „Blattkästen“ und andere weiß überflutete Elemente:
.file-wrap, .blob-wrapper, #readme, .overall-summary, .issues-listing > div[class^=border] { background: var(--color-window) !important; border: solid 1px black !important; border-color: var(--box-3d-border-color) !important; border-radius: 0 !important; box-shadow: var(--box-3d-box-shadow) !important; }
wo
--group-3d-border-color: var(--color-button-highlight) var(--color-button-shadow) var(--color-button-shadow) var(--color-button-highlight); --box-3d-box-shadow: 0 -1px 0 0 var(--color-button-shadow), -1px 0 0 0 var(--color-button-shadow), -1px -1px 0 0 var(--color-button-shadow), -1px 1px 0 0 var(--color-button-highlight), 1px 0 0 0 var(--color-button-highlight), 1px 1px 0 0 var(--color-button-highlight);
Eine solche Anzahl von Schatten ist erforderlich, damit auf einer Seite keine Einzelpixel-Verrundungen vorhanden sind (wenn ein Schatten nach links oben und der andere nach rechts unten geht, befindet sich oben rechts und unten links ein unbemaltes Pixel).
Wir machen dasselbe mit den Knöpfen:
.btn-link, .btn, .btn:hover, .subnav-item, .pagination > :not(.gap), #user-links .dropdown, .js-menu-close { font: inherit !important; font-weight: normal !important; background: var(--color-button-face) !important; color: var(--color-button-text) !important; border: solid 1px transparent !important; border-color: var(--button-3d-border-color-exact) !important; border-radius: 0 !important; box-shadow: var(--button-3d-box-shadow-exact) !important; margin: 1px 2px !important; }
wo
--button-3d-border-color-exact: var(--color-button-face) var(--color-button-shadow) var(--color-button-shadow) var(--color-button-face); --button-3d-box-shadow-exact: 0 -1px 0 0 var(--color-button-highlight), -1px 0 0 0 var(--color-button-highlight), -1px -1px 0 0 var(--color-button-highlight), -1px 1px 0 0 var(--color-button-shadow-dark), 1px 0 0 0 var(--color-button-shadow-dark), 1px 1px 0 0 var(--color-button-shadow-dark);
Zwar haben die Schaltflächen mehr Elemente, wenn sie gedrückt werden, ändert sich der Rahmenstil und es gibt auch ein gepunktetes Fokusrechteck. Wir zeichnen den Fokus mit Hilfe von outline - der dritten CSS-Eigenschaft für die "Grenzen".
.btn-link svg, .btn svg, .btn:hover svg, .subnav-item svg, #user-links .dropdown svg, .js-menu-close svg { fill: var(--color-window-text) !important; } .btn-link .dropdown-caret, .btn .dropdown-caret, .btn:hover .dropdown-caret, .subnav-item .dropdown-caret, #user-links .dropdown .dropdown-caret { color: var(--color-window-text) !important; border-top-color: var(--color-window-text) !important; } .btn-link:active, .btn:active, .btn.selected, [open] > .btn, .subnav-item:active, .pagination > :active, #user-links .dropdown:active, .js-menu-close:active { border-color: var(--color-button-shadow) !important; box-shadow: 0 0 0 1px var(--color-button-shadow-dark) !important; } .btn-link:focus, .btn:focus, .subnav-item:focus { outline: dotted 1px var(--color-button-text) !important; outline-offset: -4px !important; }
Tabcontrol
Die Laschenohren sind abgerundet. Glücklicherweise können Browser abgerundete Ecken zeichnen, und Sie können für jede Ecke eine abgerundete Ecke angeben.
.tabnav-tabs a, .tabnav-tabs span:not(.Counter), .reponav-item, .select-menu-tab a { font-size: 12px; font-weight: normal !important; color: var(--color-button-text) !important; background: var(--color-button-face) !important; border: solid 1px transparent !important; border-color: var(--button-3d-border-color) !important; border-bottom: none !important; border-radius: 2px 2px 0 0 !important; box-shadow: 1px 0 0 var(--color-button-shadow-dark), 0 1px 0 var(--color-button-highlight) !important; margin: 0 1px -1px 0 !important; padding: 4px 6px !important; min-height: 26px; }
Es sind noch kleine Dinge übrig: grauer Text für deaktivierte Registerkarten und kein Rand für aktuelle (fehlender Rand wird durch Absenken der Öse unter den Inhalt der Registerkarte mit negativen Einrückungen erkannt):
.tabnav-tabs a.selected, .tabnav-tabs span:not(.Counter).selected, .reponav-item.selected, .select-menu-tab a.selected { box-shadow: 1px 0 0 var(--color-button-shadow-dark), 0 1px 0 var(--color-button-face) !important; margin: -2px 1px 1px 0 !important; min-height: 28px; } .tabnav-tabs span:not(.Counter) { color: var(--color-gray-text) !important; }
Gruppenbox
Rahmen um Gruppen von Elementen werden eingerückt gezeichnet. Es scheint, dass Sie alle Arten von groove und ridge , aber nein, es ist unmöglich, bestimmte Farben für sie festzulegen, und das Rendern in verschiedenen Browsern ist sehr unterschiedlich. Wir kehren zur bewährten Methode zurück:
.Box:not(.position-absolute):not(.Popover-message), .blankslate, .border, .timeline-comment, .commit-tease { font: inherit !important; color: inherit !important; line-height: 20px !important; background: var(--color-button-face) !important; border: solid 1px black !important; border-color: var(--group-3d-border-color) !important; border-radius: 0 !important; box-shadow: var(--group-3d-box-shadow) !important; position: relative !important; padding: 12px 8px 4px 8px; margin-top: 2px !important; }
Eine Gruppe von Elementen ohne Titel sieht jedoch nicht mehr wie eine Gruppe aus. Fügen wir zumindest an einigen Stellen Überschriften hinzu.
.js-notice > .border::before, .commit-tease::before { color: var(--color-button-text) !important; background: var(--color-button-face) !important; position: absolute; left: 6px; top: -11px; padding: 0 3px; } .js-notice > .border::before { content: "Notice"; } .commit-tease::before { content: "Last commit"; }
Andere
Es gibt auch Fenster, QuickInfos und mehr, aber sie sind unauffällig.
Symbole
Wir werden die Symbole auf die altmodische Art und Weise extrahieren, an die sich wahrscheinlich alle alten Leute erinnern werden - mit dem Resource Hacker . Sie werden es nicht glauben: Das Programm ist noch am Leben, ist immer noch ehrlich und entwickelt sich weiter. Also nehmen wir die Windows 95-Distribution und gehen alle Binärdateien durch und wählen schöne Symbole aus ...
Jetzt, viele Stunden später, ist es Zeit, die Symbole in CSS einzufügen. Extrahieren Sie dazu einzelne Symbole aus ICO in PNG (ich habe das Imagine-Plugin für Total Commander verwendet, aber jedes Programm, das das Format versteht, kann dies tun). Wir optimieren es bis zum letzten Bit (ich habe TinyPNG.com verwendet ) und codieren es in Form eines Daten-URI in CSS ( Base64- Dienst) -Image.de erwies sich als recht praktisch). Es stellt sich so etwas heraus:
--image-folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD//5nMzGYAAAD/zJmZmQD//8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg=='); --image-folder-documents: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEUAAACZmQD//5n/zJn///8zMwDn59aGhobMzGZVVVUAM5mAgADx8fH/+/Dq6upNTU2p3qmcAAAAAXRSTlMAQObYZgAAAGlJREFUCNdjAIECBghgfwmmGAVLrn0AMSTaXY68BDNKXNYem72BgUE8LSsrLXMDgyAYpH1gEHEBAguxTAYRJSUlZWWxAAZGJWUlI+NGIAMkoGwIZAAFjIyADAZhZYgIVD+QwRoKAgxwAADcLBkG7Oto1QAAAABJRU5ErkJggg=='); : image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD // 5nMzGYAAAD / zJmZmQD // 8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg =='); --image-folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD//5nMzGYAAAD/zJmZmQD//8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg=='); --image-folder-documents: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEUAAACZmQD//5n/zJn///8zMwDn59aGhobMzGZVVVUAM5mAgADx8fH/+/Dq6upNTU2p3qmcAAAAAXRSTlMAQObYZgAAAGlJREFUCNdjAIECBghgfwmmGAVLrn0AMSTaXY68BDNKXNYem72BgUE8LSsrLXMDgyAYpH1gEHEBAguxTAYRJSUlZWWxAAZGJWUlI+NGIAMkoGwIZAAFjIyADAZhZYgIVD+QwRoKAgxwAADcLBkG7Oto1QAAAABJRU5ErkJggg==');
.octicon-file-directory, .octicon-file { fill: transparent !important; width: 16px !important; height: 16px !important; } .octicon-file-directory { background: var(--image-folder) !important; } .octicon-file { background: var(--image-file-text) !important; }
Feinschliff
Die Seite hat eine große Anzahl von Stilen, so dass Sie überall hingehen und alles stylen müssen. Sowohl die "Schaltflächen" als auch die "Listenfelder" haben ganz unterschiedliche Klassen. Es gibt auch viele kleine Dinge, wie Kreiszähler, die logisch in Bare-Text konvertiert werden können, wie dies unter Windows 95 der Fall gewesen wäre:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
Hut
Da wir moderne Menschen sind, werden wir einen "standardisierten" Header für UserCSS herausgeben, der von Stylus unterstützt wird:
Wenn Sie nun eine solche Datei in einem Browser öffnen, bietet die Erweiterung die Möglichkeit, den Stil anzuwenden, und folgt den Aktualisierungen. Und es wird kein zweifelhafter UserStyles.org benötigt.
Fertig!
Na ja, mehr oder weniger. Der Stil ist wahrscheinlicher in der Proof-of-Concept- / Alpha-Phase, da viele Seiten nicht vollständig neu gestaltet wurden. Aber ein Anfang wurde gemacht!
Wenn Sie Erweiterungen für Benutzerstile haben, finden Sie hier direkte Links zur Installation:
PS Vorsicht, Stylish wurde kürzlich aus der Liste der Firefox- und Chrome-Erweiterungen für Spionage entfernt. Ich rate Ihnen, auf die moderne Open-Source-Erweiterung Stylus umzusteigen, falls Sie dies noch nicht getan haben.