Il y a quelque temps, sur Twitter, ils ont publié une blague en l'honneur de Microsoft acquérant Github - une page du site, repensée dans le style de Windows 98 . J'ai décidé que la blague était trop bonne pour rester une blague.
Les couleurs
Le thème Windows "classique" comporte en fait plusieurs itérations. Les premières versions de Windows (jusqu'à 9x) se distinguaient par des fenêtres blanches, des bordures de boutons légèrement arrondies et un pseudo-volume très puissant. Dans Windows 95, les fenêtres sont devenues grises, tout est devenu plus carré et les lignes de création de pseudo-volume ont diminué à un pixel. Des dégradés ont été ajoutés dans Windows 98, mais en général le style est resté plus ou moins le même. Windows 2000 a une teinte légèrement jaunâtre.
Je me suis installé sur Windows 95, et pour que les couleurs puissent être mises à jour par la suite, je les ai conçues comme des variables CSS (enfin, ou «propriétés personnalisées»):
--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);
Les polices
Il n'était pas possible d'obtenir le rendu des polices pixel à partir du navigateur, j'ai donc dû me contenter de "MS Sans Serif":
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
La taille de la police était presque la même partout sur l'interface Windows, donc la font: inherit !important; doit être ajoutée sur de nombreux éléments font: inherit !important; . La couleur de sélection du texte peut maintenant être redéfinie en utilisant ::selection , mais dans Firefox pour une raison quelconque, elle n'est toujours prise en charge qu'avec un préfixe.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
Et comme la police principale était lisible, j'ai décidé de laisser la police standard pour le code seul et de ne pas la changer en "Courier New".
Le volume
Le problème suivant est le dessin du volume. Les bordures CSS ne peuvent toujours être que sur une seule couche, donc box-shadow devait être utilisé pour les doubles contours.
ListBox, TextBox, TreeView ...
Par exemple, peignez les «boîtes à feuilles» et autres éléments inondés de blanc:
.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; }
où
--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);
Un tel nombre d'ombres est nécessaire pour qu'il n'y ait pas de «filets» à un seul pixel d'un côté (si une ombre va vers le haut et l'autre vers le bas, alors il y aura un pixel non peint en haut à droite et en bas à gauche).
On fait de même avec les boutons:
.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; }
où
--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);
Certes, les boutons ont plus d'éléments, lorsqu'ils sont enfoncés, le style de bordure change et il y a aussi un rectangle de focus en pointillé. Nous attirons l'attention à l'aide de outline - la troisième propriété CSS pour les «bordures».
.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
Les pattes sont arrondies. Heureusement, les navigateurs peuvent dessiner des coins arrondis et vous pouvez spécifier un coin arrondi pour chaque coin.
.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; }
Il reste peu de choses: texte gris pour les onglets désactivés et pas de bordure pour les onglets actuels (le manque de bordure est réalisé en abaissant l'œillet sous le contenu de l'onglet en utilisant des retraits négatifs):
.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; }
Groupbox
Les bordures autour des groupes d'éléments sont dessinées en retrait. Il semblerait que vous puissiez utiliser toutes sortes de groove et de ridge , mais non, il est impossible de leur définir des couleurs spécifiques, et le rendu dans différents navigateurs est très différent. Nous revenons à la méthode éprouvée:
.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; }
Cependant, un groupe d'éléments sans titre ne ressemble plus à un groupe. Ajoutons des en-têtes à au moins certains endroits.
.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"; }
Autre
Il existe également des fenêtres, des info-bulles et plus encore, mais elles ne sont pas banales.
Icônes
Nous allons extraire les icônes à l'ancienne et à l'ancienne dont toutes les personnes âgées se souviendront probablement - en utilisant le pirate de ressources . Vous ne le croirez pas: le programme est toujours vivant, il est encore honnête frivara et est toujours en développement. Nous prenons donc la distribution Windows 95 et parcourons tous les binaires, en choisissant de belles icônes ...
Maintenant, plusieurs heures plus tard, il est temps de mettre les icônes en CSS. Pour ce faire, extrayez des icônes individuelles d'ICO en PNG (j'ai utilisé le plugin Imagine pour Total Commander, mais tout programme qui comprend le format le fera), nous l'optimisons jusqu'au dernier bit (j'ai utilisé TinyPNG.com ) et nous le codons sous la forme d'un URI de données en CSS (service Base64 -Image.de s'est avéré assez pratique). Il s'avère quelque chose comme ceci:
--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; }
Touche finale
Le site a un grand nombre de styles, vous devez donc aller partout et tout styliser. Les «boutons» et les «listbox» ont des classes assez différentes. Il y a aussi beaucoup de petites choses, comme les compteurs de cercles, qui peuvent être logiquement convertis en texte nu, comme ils l'auraient fait sous Windows 95:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
Chapeau
Puisque nous sommes des gens modernes, nous publierons un en-tête «standardisé» pour UserCSS, qui est pris en charge par Stylus:
Maintenant, si vous ouvrez un tel fichier dans un navigateur, l'extension proposera d'appliquer le style et suivra les mises à jour. Et aucun UserStyles.org douteux n'est nécessaire.
C'est fait!
Enfin, plus ou moins. Le style est plus probable à l'étape de la validation de principe / alpha, car de nombreuses pages ne sont pas complètement repensées. Mais un début a été fait!
Si vous avez des extensions pour les styles utilisateur, voici des liens directs vers l'installation:
PS Attention, Stylish a récemment été supprimé de la liste des extensions Firefox et Chrome pour l'espionnage. Je vous conseille de passer à l'extension moderne open-source Stylus, si vous ne l'avez pas déjà fait.