不久前，他们在Twitter上开了一个玩笑，以纪念微软收购Github- 网站的页面，并按照Windows 98的风格进行了重新设计 。 我认为这个笑话太好了，不能成为一个笑话。
色彩
Windows的“经典”主题实际上具有多个迭代。 Windows的第一个版本（最高9倍）以白色窗口，略微圆形的按钮边框和非常强大的伪音量而著称。 在Windows 95中，窗口变为灰色，所有内容都变得更加方形，并且用于创建伪体积的线减少到一个像素。 在Windows 98中添加了渐变，但是总体上，样式几乎保持不变。 Windows 2000的颜色略带黄色。
我选择了Windows 95，以便随后可以更新颜色，我将它们设计为CSS变量（或者“自定义属性”）：
--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);
字型
无法从浏览器获取像素字体渲染，因此我必须对“ MS Sans Serif”感到满意：
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
Windows界面上的所有地方字体大小都几乎相同，因此必须在许多元素上添加font: inherit !important; 。 现在可以使用::selection重新定义文本选择颜色，但是在Firefox中，由于某种原因，它仍然仅支持前缀。
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
并且由于主要字体是可读的，因此我决定不使用代码的标准字体，而将其更改为“ Courier New”。
数量
下一个问题是图纸体积。 CSS边框仍然只能在一层中，因此必须将box-shadow用于双重轮廓。
ListBox，TextBox，TreeView ...
例如，绘制“叶盒”和其他白色的泛滥元素：
.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; }
在哪里
--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);
需要这样数量的阴影，以便在一侧上没有单个像素的“圆角”（如果一个阴影向左上方，另一个阴影向右下方，则在右上方和左下方将有一个未上漆的像素）。
我们对按钮做同样的事情：
.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; }
在哪里
--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);
没错，按钮上有更多元素，当按下它们时，边框样式会更改，并且还有一个虚线的焦点矩形。 我们在outline的帮助下吸引了人们的注意力-“边界”的第三个CSS属性。
.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; }
标签控件
tab耳为圆形。 幸运的是，浏览器可以绘制圆角，并且您可以为每个角指定一个圆角。
.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; }
剩下的几乎没有：禁用选项卡的灰色文本，而当前选项卡没有边框（通过使用负缩进将选项卡的内容降低到选项卡内容下方，可实现无边框）：
.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; }
群组框
元素组周围的边框以缩进方式绘制。 似乎可以使用各种groove和ridge ，但是不可以，无法为它们设置特定的颜色，并且在不同的浏览器中渲染是非常不同的。 我们返回经过验证的方法：
.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; }
但是，一组没有标题的元素看起来不再像一组。 让我们至少在某些地方添加标题。
.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"; }
其他
也有窗口，工具提示等，但它们并不明显。
图示
我们将使用Resource Hacker以所有老年人都可能会记住的旧的老式方式提取图标。 您不会相信：该程序仍然有效，仍然是诚实的frivara，并且仍在开发中。 因此，我们采用Windows 95发行版并浏览所有二进制文件，选择漂亮的图标...
现在，许多小时后，该将图标放入CSS了。 为此，请从ICO中提取单个图标到PNG（我将Imagine插件用于Total Commander，但是任何理解该格式的程序都可以使用），我们将其优化到最后一位（我使用TinyPNG.com ），并以CSS中的数据URI形式进行编码（ Base64服务） -Image.de证明非常方便）。 原来是这样的：
--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=='); ：图像/ 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; }
画龙点睛
该网站具有大量样式，因此您必须四处走动并为所有样式设置样式。 “按钮”和“列表框”都具有完全不同的类。 还有很多小事情，例如循环计数器，可以按照逻辑在Windows 95中转换为裸文本：
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
帽子
由于我们是现代人，因此我们将为UserCSS发行一个“标准化”标头，并由Stylus支持：
现在，如果您在浏览器中打开这样的文件，该扩展名将提供应用样式并将遵循更新的作用。 不需要任何可疑的UserStyles.org。
做完了！
好吧，或多或少。 由于许多页面没有完全重新设计，因此样式更可能在概念验证/ alpha阶段。 但是已经开始了！
如果您具有用户样式的扩展名，则以下是安装的直接链接：
PS谨防，时尚最近已从Firefox和Chrome扩展程序列表中删除，以进行间谍活动。 如果您尚未这样做，我建议您切换到现代的开源扩展Stylus。