Algum tempo atrás, no Twitter, eles publicaram uma piada em homenagem à Microsoft adquirir o Github - uma página do site, redesenhada no estilo do Windows 98 . Decidi que a piada era boa demais para continuar sendo uma piada.
Cores
O tema "clássico" do Windows realmente possui várias iterações. As primeiras versões do Windows (até 9x) foram distinguidas por janelas brancas, bordas levemente arredondadas dos botões e um pseudo-volume muito forte. No Windows 95, as janelas ficaram cinza, tudo ficou mais quadrado e as linhas para criar pseudo-volume diminuíram para um pixel. Gradientes foram adicionados no Windows 98, mas em geral o estilo permaneceu mais ou menos o mesmo. O Windows 2000 tem um tom levemente amarelado.
Eu decidi pelo Windows 95 e, para que as cores possam ser atualizadas posteriormente, eu as projetei como variáveis CSS (bem, ou "propriedades 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);
Fontes
Não foi possível obter a renderização de fontes de pixel no navegador, por isso tive que me contentar com "MS Sans Serif":
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
O tamanho da fonte era quase o mesmo em toda a interface do Windows, portanto, a font: inherit !important; precisa ser adicionada em muitos elementos font: inherit !important; . A cor da seleção de texto agora pode ser redefinida usando ::selection , mas no Firefox, por algum motivo, ainda é suportado apenas com um prefixo.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
E como a fonte principal era legível, decidi deixar a fonte padrão do código sozinha e não alterá-la para "Courier New".
Volume
O próximo problema é desenhar volume. As bordas CSS ainda podem estar apenas em uma camada, portanto box-shadow teve que ser usada para contornos duplos.
ListBox, TextBox, TreeView ...
Por exemplo, pinte as “caixas de folhas” e outros elementos brancos alagados:
.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; }
onde
--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);
É necessário um número tão grande de sombras para que, de um lado, não haja "filetes" de pixel único (se uma sombra for deixada para cima e a outra direita para baixo, haverá um pixel não pintado na parte superior direita e na parte inferior esquerda).
Fazemos o mesmo com os botões:
.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; }
onde
--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);
É verdade que os botões têm mais elementos; quando pressionados, o estilo da borda muda e também há um retângulo de foco pontilhado. Desenhamos o foco usando o outline - a terceira propriedade CSS para as "bordas".
.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
As orelhas da aba são arredondadas. Felizmente, os navegadores podem desenhar cantos arredondados e você pode especificar um canto arredondado para cada canto.
.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; }
Restam poucas coisas: texto em cinza para guias desativadas e nenhuma borda para as atuais (a falta de borda é percebida abaixando o ilhó sob o conteúdo da guia usando recuos negativos):
.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; }
Caixa de grupo
Bordas ao redor de grupos de elementos são desenhadas recuadas. Parece que você pode usar todos os tipos de groove e groove , mas não, é impossível definir cores específicas para eles, e a renderização em navegadores diferentes é muito diferente. Voltamos ao método comprovado:
.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; }
No entanto, um grupo de elementos sem título não se parece mais com um grupo. Vamos adicionar cabeçalhos em pelo menos alguns 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"; }
Outros
Também há janelas, dicas de ferramentas e muito mais, mas elas não são dignas de nota.
Ícones
Extrairemos os ícones da maneira antiga e antiquada que todos os idosos provavelmente se lembrarão - usando o Resource Hacker . Você não acredita: o programa ainda está vivo, ainda é frivara honesto e ainda está em desenvolvimento. Então, pegamos a distribuição do Windows 95 e examinamos todos os binários, escolhendo belos ícones ...
Agora, muitas horas depois, é hora de colocar os ícones no CSS. Para fazer isso, extraia ícones individuais da ICO para PNG (usei o plug-in Imagine para o Total Commander, mas qualquer programa que entenda o formato), otimizamos para o último bit (usei TinyPNG.com ) e codificamos na forma de um URI de dados em CSS (serviço Base64 -Image.de acabou por ser bastante conveniente). Acontece algo como isto:
--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 finais
O site tem um grande número de estilos, então você precisa ir a qualquer lugar e estilizar tudo. Os "botões" e as "caixas de listagem" têm classes bem diferentes. Também existem muitas pequenas coisas, como contadores de círculo, que podem ser logicamente convertidos em texto simples, como teriam feito no Windows 95:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
Chapéu
Como somos pessoas modernas, emitiremos um cabeçalho "padronizado" para o UserCSS, suportado pela Stylus:
Agora, se você abrir esse arquivo em um navegador, a extensão oferecerá a aplicação do estilo e seguirá as atualizações. E nenhum UserStyles.org duvidoso é necessário.
Feito!
Bem, mais ou menos. O estilo é mais provável no estágio de prova de conceito / alfa, porque muitas páginas não são completamente redesenhadas. Mas um começo foi feito!
Se você possui extensões para estilos de usuário, aqui estão os links diretos para a instalação:
PS Cuidado, o Stylish foi removido recentemente da lista de extensões do Firefox e Chrome por espionagem. Aconselho que você mude para a moderna extensão de código aberto Stylus, se ainda não o fez.