Hace algún tiempo, en Twitter, publicaron una broma en honor a que Microsoft adquiriera Github, una página del sitio, rediseñada al estilo de Windows 98 . Decidí que la broma era demasiado buena para seguir siendo una broma.
Colores
El tema de Windows "clásico" en realidad tiene varias iteraciones. Las primeras versiones de Windows (hasta 9x) se distinguían por ventanas blancas, bordes de botones ligeramente redondeados y un seudo volumen muy fuerte. En Windows 95, las ventanas se volvieron grises, todo se volvió más cuadrado y las líneas para crear pseudovolumen disminuyeron a un píxel. Se agregaron degradados en Windows 98, pero en general el estilo se ha mantenido más o menos igual. Windows 2000 tiene un tinte ligeramente amarillento.
Me decidí por Windows 95, y para que los colores puedan actualizarse posteriormente, los diseñé como variables CSS (bueno, o "propiedades personalizadas"):
--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);
Fuentes
No fue posible obtener la representación de las fuentes de píxeles desde el navegador, así que tuve que contentarme con "MS Sans Serif":
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
El tamaño de fuente era casi el mismo en todas partes en la interfaz de Windows, por lo que la font: inherit !important; debe agregarse en muchos elementos font: inherit !important; . El color de selección de texto ahora se puede redefinir usando ::selection , pero en Firefox por alguna razón todavía solo se admite con un prefijo.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
Y como la fuente principal era legible, decidí dejar solo la fuente estándar para el código y no cambiarla a "Courier New".
Volumen
El siguiente problema es dibujar el volumen. Los bordes CSS solo pueden estar en una capa, por lo box-shadow tuvo que usar para contornos dobles.
ListBox, TextBox, TreeView ...
Por ejemplo, pinte las “cajas de hojas” y otros elementos blancos inundados:
.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; }
donde
--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);
Se requiere tal cantidad de sombras para que en un lado no haya “filetes” de un solo píxel (si una sombra va hacia arriba y la otra hacia abajo, habrá un píxel sin pintar en la esquina superior derecha e inferior izquierda).
Hacemos lo mismo con los botones:
.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; }
donde
--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);
Es cierto que los botones tienen más elementos, cuando se presionan, el estilo del borde cambia y también hay un rectángulo de foco punteado. Dibujamos el foco con la ayuda del outline : la tercera propiedad CSS para los "bordes".
.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
Las orejas son redondeadas. Afortunadamente, los navegadores pueden dibujar esquinas redondeadas, y puede especificar una esquina redondeada para cada esquina.
.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; }
Quedan pequeñas cosas: texto gris para las pestañas deshabilitadas y sin borde para las actuales (la falta de borde se realiza bajando el ojal debajo del contenido de la pestaña usando sangrías negativas):
.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
Los bordes alrededor de grupos de elementos se dibujan con sangría. Parece que puede usar todo tipo de groove y ridge , pero no, es imposible establecer colores específicos para ellos, y el renderizado en diferentes navegadores es muy diferente. Volvemos al método probado:
.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; }
Sin embargo, un grupo de elementos sin título ya no parece un grupo. Agreguemos encabezados en al menos algunos lugares.
.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"; }
Otros
También hay ventanas, información sobre herramientas y más, pero no son notables.
Íconos
Extraeremos los íconos de la manera antigua y pasada de moda que probablemente recordarán todas las personas mayores, utilizando Resource Hacker . No lo creerás: el programa sigue vivo, sigue siendo honesto y se está desarrollando. Así que tomamos la distribución de Windows 95 y revisamos todos los binarios, eligiendo hermosos íconos ...
Ahora, muchas horas después, es hora de poner los íconos en CSS. Para hacer esto, extraiga íconos individuales de ICO a PNG (utilicé el complemento Imagine para Total Commander, pero cualquier programa que entienda el formato funcionará), lo optimizamos hasta el último bit (utilicé TinyPNG.com ) y lo codificamos en forma de URI de datos en CSS (servicio Base64 -Image.de resultó ser bastante conveniente). Resulta algo como esto:
--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; }
Toques finales
El sitio tiene una gran cantidad de estilos, por lo que debe ir a todas partes y diseñar todo. Tanto los "botones" como los "cuadros de lista" tienen clases bastante diferentes. También hay muchas cosas pequeñas, como contadores circulares, que se pueden convertir lógicamente a texto simple, como lo habrían hecho en Windows 95:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
Sombrero
Como somos personas modernas, emitiremos un encabezado "estandarizado" para UserCSS, que es compatible con Stylus:
Ahora, si abre dicho archivo en un navegador, la extensión ofrecerá aplicar el estilo y seguirá las actualizaciones. Y no se necesita ningún UserStyles.org dudoso.
Hecho
Bueno, mas o menos. El estilo es más probable en la etapa de prueba de concepto / alfa, porque muchas páginas no están completamente rediseñadas. ¡Pero se ha comenzado!
Si tiene extensiones para estilos de usuario, aquí hay enlaces directos a la instalación:
PS Beware, Stylish se ha eliminado recientemente de la lista de extensiones de Firefox y Chrome para espionaje. Le aconsejo que cambie a la moderna extensión de código abierto Stylus, si aún no lo ha hecho.