GitHub macht aus GitHub ... das elegante Windows 95

  • Tutorial


Auf Twitter haben wir vor einiger Zeit einen Witz über die Übernahme von GitHub durch Microsoft geäußert, eine Website-Seite, die im Stil von Windows 98 umgestaltet wurde . Ich entschied, dass der Witz zu gut war, um ein Witz zu sein.


Farben


Das "klassische" Thema von Windows hat tatsächlich mehrere Iterationen. Die ersten Versionen von Windows (bis zu 9x) verfügten über weiße Fenster, leicht abgerundete Knopfleisten und ein sehr starkes Pseudo-Volumen. In Windows 95 wurden die Fenster grau, alles wurde quadratischer und die Linien zum Erstellen eines Pseudo-Volumens wurden auf ein Pixel reduziert. Windows 98 wurden Farbverläufe hinzugefügt, aber im Allgemeinen ist der Stil mehr oder weniger gleich geblieben. In Windows 2000 bekamen die Fenster einen leicht gelblichen Farbton.


Ich habe bei Windows 95 angehalten, und damit die Farben anschließend aktualisiert werden können, wurden sie in Form von CSS-Variablen (gut 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


Es war nicht möglich, Rendering-Pixel-Schriftarten vom Browser aus zu erzielen, daher musste ich mit "MS Sans Serif" zufrieden sein:


body {
    background: var(--color-button-face) !important;
    font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important;
  }

In der Windows-Benutzeroberfläche war die Schriftgröße fast überall gleich, daher müssen viele Elemente hinzugefügt werden font: inherit !important;. Die Farbe der Textauswahl kann durch n überschrieben werden. ::selectionIn 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;
  }

Da sich herausstellte, dass die Hauptschrift lesbar war, entschied ich mich, die Standardschriftart für den Code allein zu lassen und sie nicht in "Courier New" zu ändern.


Volumen


Das nächste Problem ist das Zeichnen von Volumen. Die Ränder borderin CSS können immer noch nur in einer Ebene liegen, daher musste ich sie für Doppelkonturen verwenden box-shadow.


ListBox, TextBox, TreeView ...


Malen Sie beispielsweise Leafboxes und andere weiße eingebettete 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);

Diese Anzahl von Schatten ist erforderlich, damit auf beiden Seiten keine Einpixel- "Rundungen" angezeigt werden (wenn ein Schatten nach links und der andere nach unten geht, erscheint rechts oben ein leerer Pixel und links unten ein leerer Pixel).


Taste


Dasselbe machen wir mit 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: 1px2px!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);

Die Elemente der Schaltflächen sind jedoch größer, wenn Sie auf klicken, ändert sich der Randstil und es gibt auch ein gepunktetes Fokusrechteck. Focus Draw bereits mit outline- die dritte CSS-Eigenschaft für "Grenzen".


.btn-linksvg,
  .btnsvg,
  .btn:hoversvg,
  .subnav-itemsvg,
  #user-links.dropdownsvg,
  .js-menu-closesvg {
    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:
      0001pxvar(--color-button-shadow-dark)
      !important;
  }
  .btn-link:focus,
  .btn:focus,
  .subnav-item:focus {
    outline: dotted 1pxvar(--color-button-text) !important;
    outline-offset: -4px!important;
  }

TabControl


Registerkarten haben abgerundete Registerkarten. Glücklicherweise können Browser abgerundete Ecken zeichnen und Sie können für jede Ecke eine Rundung festlegen.


.tabnav-tabsa,
  .tabnav-tabsspan:not(.Counter),
  .reponav-item,
  .select-menu-taba {
    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: 2px2px00!important;
    box-shadow:
      1px00var(--color-button-shadow-dark),
      01px0var(--color-button-highlight)
      !important;
    margin: 01px -1px0!important;
    padding: 4px6px!important;
    min-height: 26px;
  }

Es bleiben nur noch kleine Dinge übrig: der graue Text der deaktivierten Registerkarten und das Fehlen eines Rahmens zu den aktuellen (das Fehlen eines Rahmens wird durch Absenken des Auges unter dem Registerkarteninhalt mit negativen Einrückungen erkannt):


.tabnav-tabsa.selected,
  .tabnav-tabsspan:not(.Counter).selected,
  .reponav-item.selected,
  .select-menu-taba.selected {
    box-shadow:
      1px00var(--color-button-shadow-dark),
      01px0var(--color-button-face)
      !important;
    margin: -2px1px1px0!important;
    min-height: 28px;
  }
  .tabnav-tabsspan:not(.Counter) {
    color: var(--color-gray-text) !important;
  }

Groupbox


Grenzen um Elementgruppen werden niedergedrückt gezeichnet. Es scheint , dass Sie alle Arten verwenden können , grooveund ridge, aber keine bestimmten Farben für sie können nicht eingestellt werden, und in allen Browsern Rendering 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: 12px8px4px8px;
    margin-top: 2px!important;
  }

Eine Gruppe von Elementen ohne Titel sieht jedoch nicht mehr wie eine Gruppe aus. Fügen wir an einigen Stellen Schlagzeilen 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: 03px;
  }
  .js-notice > .border::before {
    content: "Notice";
  }
  .commit-tease::before {
    content: "Last commit";
  }

Andere


Es gibt mehr Fenster, Tooltips und mehr, aber diese sind nicht auffällig.


Icons


Wir extrahieren die Icons auf alte, alte Art und Weise, an die sich alle alten Leute sicherlich erinnern werden - mit Hilfe von Resource Hacker . Sie werden nicht glauben: Das Programm ist noch am Leben, immer noch ehrliches Frivara und entwickelt sich weiter. Also nehmen wir die Windows 95-Distribution und gehen alle Binaries durch, wählen schöne Icons ...


Nun, viele Stunden später, ist es an der Zeit, die Icons in CSS einzufügen. Dazu extrahieren wir einzelne Icons von ICO nach PNG (ich habe das Imagine-Plugin für Total Commander verwendet, aber im Allgemeinen ist jedes Programm, das das Format versteht, geeignet ) , optimiert bis zum letzten Bit (ich habe TinyPNG.com verwendet ) und codiert es als Daten-URI in CSS ( Base64- Dienst) -Image.de war recht bequem). Es stellt sich so dar:


--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; }

Die letzten Schliffe


Die Website bietet eine Vielzahl von Stilen, sodass Sie überall hin gehen und alles stilisieren müssen. Sowohl die "Buttons" als auch die "Listboxen" haben unterschiedliche Klassen. Es gibt auch viele kleine Dinge wie runde Messgeräte, die logisch in nackten Text konvertiert werden könnten, wie Sie es in den Tagen von Windows 95 getan hätten:


.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:


/* ==UserStyle==
@name        GitHub Windows Edition [Ath]
@namespace   https://github.com/Athari
@version     0.5.0
@description Transforms GitHub's pages into GUI resembling Windows 9x.
@author      Athari
@homepageURL https://github.com/Athari/CssGitHubWindows
@license     MIT
==/UserStyle== */

Wenn Sie nun eine solche Datei im Browser öffnen, bietet die Erweiterung an, den Stil anzuwenden, und folgt den Aktualisierungen. Und du brauchst keine zweifelhaften UserStyles.org.


Fertig!


Nun, mehr oder weniger. Der Stil befindet sich eher im Stadium des Proof-of-Concept / Alpha, da viele Seiten nicht vollständig neu angeordnet werden. Aber es ist ein Anfang gemacht!



Wenn Sie Erweiterungen für Benutzerstile haben, sind hier die direkten Links zur Installation:



PS Vorsichtig wurde Stylish kürzlich aus der Liste der Firefox- und Chrome-Erweiterungen zum Spionieren entfernt. Ich empfehle Ihnen, auf die moderne, offen sortierte Erweiterung von Stylus umzusteigen, falls Sie dies noch nicht getan haben.


Jetzt auch beliebt: