Главная
GitHub превращается… превращается GitHub… в элегантный Windows 95

GitHub превращается… превращается GitHub… в элегантный Windows 95 +198

05.07.2018 12:54

Athari 77 64200 Источник

В Твиттере какое-то время назад запостили шутку в честь приобретения Майкрософтом ГитХаба — страницу сайта, перестилизованную в стиле Windows 98. Я решил, что шутка слишком хороша, чтобы оставаться шуткой.

Цвета

"Классическая" тема Windows на самом деле имеет несколько итераций. Первые версии Windows (до 9x) отличались белыми окнами, слегка скругленными границами кнопок и очень сильным псевдо-объёмом. В 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".

Объём

Следующая проблема — рисование объёма. Границы border в 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);

Такое количество теней требуется, чтобы ни с одной стороны не возникло однопиксельных "скруглений" (если одна тень идёт налево вверх, а другая направо вниз, то справа сверху и снизу слева возникнет один незакрашенный пиксель).

Button

Схожим образом поступаем и с кнопками:

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

TabControl

Ушки у вкладок скругленные. К счастью, уж скругленные-то уголки браузеры рисовать умеют, причём можно задать скругленность для каждого угла.

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

GroupBox

Границы вокруг групп элементов рисуются вдавленными. Казалось бы, можно воспользоваться всякими 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. Вы не поверите: программа до сих пор жива, до сих пор честная фривара и до сих пор развивается. Так что берём дистрибутив Windows 95 и проходимся по всем бинарникам, выбирая красивые иконки...

Теперь, много часов спустя, пора положить иконки в CSS. Для этого извлекаем отдельные иконки из ICO в PNG (я воспользовался плагином Imagine для Total Commander, но вообще подойдёт любая программа, понимающая формат), оптимизируем до последнего бита (я воспользовался TinyPNG.com) и кодируем в виде Data URI в CSS (сервис 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==');

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

/* ==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== */

Теперь, если открыть такой файл в браузере, расширение предложит применить стиль и будет следить за обновлениями. И не нужно никаких сомнительных UserStyles.org.

Готово!

Ну, более-менее. Стиль скорее в стадии proof-of-concept / alpha, потому что многие страницы перестилизованы не полностью. Но начало положено!

Репозиторий на GitHub — исходники, инструкции и прочее

Если у вас стоят расширения для юзер-стилей, то вот прямые ссылки на установку:

P.S. Осторожно, Stylish недавно был удалён из списка расширений Firefox и Chrome за шпионаж. Советую перейти на современное опен-сорсное расширение Stylus, если вы этого ещё не сделали.

Комментарии (77)

Iqorek
05.07.2018 16:26
#18852069
Вау, прям глаз отдыхает.
Разве что вот тут косячок
1. Athari Автор
  05.07.2018 16:42
  #18852145
  +1
  Мелких косячков там достаточно много, потому что размеры и отступы кнопок слегка изменены, а гитхаб много где задаёт выравнивание пикселями. Одних табов там сортов десять, и каждый используется в разных случаях с разными размерами. Чтобы было идеально, нужно пройтись по всем диалогам и удостовериться в том, что ничего не поехало и не вылезло. Я недели две сам пользуюсь стилем — где-то что-то поехало по мелочи (дырки между ушками, кнопка поехала на пиксель, разделитель нестилизованный), но в целом ничего важного.
  
  Не очень понял, что выделяет крест на скриншоте. Вы про отсутствие общего паддинга? Да, можно поправить. Можно и синенький заголовок попапу сделать. Просто таких диалогов сотни, если не тысячи, и я не хотел захламлять стиль специфическими мелочами раньше времени.
  
  Iqorek
  05.07.2018 16:59
  #18852193
  Вы про отсутствие общего паддинга?
  
  Да, кнопки должны быть на одной линии с началом текста и отступ снизу. Остальные косячки не так бросаются в глаза.

Fails
05.07.2018 16:46
#18852155
А почему вы использовали border-style: solid вместо outset? (см. htmlbook.ru/css/border-style)
1. Athari Автор
  05.07.2018 16:51
  #18852171
  +2
  Groove, ridge, inset и outset в теории имитируют виндовый псевдо-объём, а на практике обладают кучей недостатков. Во-первых, невозможно точно задать "светлый" и "тёмный" цвета, браузер вычислит их самостоятельно по заданному "базовому" цвету. Во-вторых, в разных браузерах это вычисление происходит по-разному: один считает светлый базовым, другой считает базовый находящимся посередине между светлым и тёмным… Это очень устаревшие нестандартизированные стили границ, короче. Если нужна точность, то пользоваться ими невозможно.
  1. Fails
    05.07.2018 16:57
    #18852185
    А, понял, да, точно, благодарю за ответ!
  1. trdm
    07.07.2018 21:40
    #18858677
    А полуось сможете?
    ПС. А впрочем кому это надо…
    ПС2. DOS был бы хардкорнее.

flygrounder
05.07.2018 17:04
#18852213
+2
Шутки шутками, но главное, чтобы новые сервера на Windows 98 не работали
1. impwx
  05.07.2018 17:11
  #18852237
  С чего бы им?
  1. Athari Автор
    05.07.2018 17:18
    #18852251
    +2
    Правильно, Windows NT 4.0 гораздо лучше.
    
    nikitasius
    05.07.2018 18:19
    #18852471
    Я помню как на NT4 можно было задолбить форму логина и вызвать taskmanager, где запустить нужный софт без… входа в систему.
    
    Athari Автор
    05.07.2018 18:28
    #18852495
    
    FSA
    05.07.2018 21:38
    #18853209
    +1
    Это если через сеть аутентификация. На домашнем компе вообще можно просто было Cancel нажать и вы в системе.
    
    saboteur_kiev
    05.07.2018 19:32
    #18852733
    В НТ4 или в Win9x?
    
    Athari Автор
    05.07.2018 19:37
    #18852755
    +1
    Кстати да. Мне почему-то казалось, что в WinNT изначально были полноценные юзеры и разграничение прав, а в Win9x многопользовательский интерфейс был декорацией, которая держалась на честном слове.
    
    nikitasius
    05.07.2018 19:48
    #18852797
    Та NT4, что была в физтехе долгопрудного в 2001-2002 годах, пыталась разграничивать права, но таск менеджер все сводил на нет.
    
    saboteur_kiev
    06.07.2018 15:06
    #18855789
    Видимо в физтехе NT4 стояла на fat32 а не на NTFS
    
    sumanai
    05.07.2018 20:01
    #18852843
    В WinNT изначально заложено ограничение прав, но их адекватное значение по умолчанию пошло где-то с Win2000, а SRP появился только в XP.
    
    dimka11
    05.07.2018 22:21
    #18853321
    А смысл в разграничении прав, если права доступа к файловой системе появились только в ntfs.
    
    ptica_filin
    05.07.2018 23:54
    #18853559
    NTFS как раз и появилась вместе с NT. Даже не NT4, а NT 3.1.
    
    shikhalev
    06.07.2018 04:05
    #18853779
    NTFS появилась вместе с WinNT.
    
    rajven
    06.07.2018 04:05
    #18853781
    Вы путаете NT4 и Win95/98/Me. Это в семействе 9х можно было нажать отмену или вызвать диспетчер задач. В NT4 этого сделать было нельзя.

SerafimArts
05.07.2018 17:10
#18852235
+2
Решил попробовать поставить, благо дело интересное и прекрасное. Пошёл в магазин хрома и обнаружил, что Stylish'а больше не существует, магазин отдаёт 404. Погуглил…

Короче, не буду тянуть кота за хвост, вот такая новость нашлась, 4 часа как раз: xakep.ru/2018/07/05/stylish

Расширение удалили из всех магазинов, т.к. оно собирало историю и другие персональные данные людей. Думаю это будет интересно и полезно тем, кто пользуется им сейчас.
1. Athari Автор
  05.07.2018 17:21
  #18852257
  Да, я написал об этом инциденте в постскриптуме.
  
  Такой поворот событий — не новость для тех, кто следит за происходящим со Stylish. Надеюсь, удаление расширения из магазинов наконец сподвигнет народ поставить Stylus. Правда, подозреваю, текущий хозяин Stylish просто чуть сбавит уровень шпионажа, расширение вернут, и ничего не изменится.
1. pro_co_ru
  06.07.2018 09:50
  #18854279
  Вот ещё на ленте пишут про Stylish, который оказался опасным шпионом.

jhonyxakep
05.07.2018 17:27
#18852285
+1
Спасибо. Теперь буду шокировать коллег :)
1. Athari Автор
  05.07.2018 17:37
  #18852333
  Мва-ха-ха. Интересное применение.

lovespy
05.07.2018 17:58
#18852401
+1
На мой взгляд с появлением Win8 и затем UWP и их стандартами в дизайне приложений МС хорошо поработало над своим плоским плиточным форматом. Гугл со своим матириалом и уж совсем страхолюдным по началу цветовым палетом заметно проигрывал. Что щас? Карточки, акшн баттон внизу круглый в виде значка с акцентным колором, меню по ключевым задачам внизу, гамбургер совсем потерял свое первоначальное значение — выдвижная панель или жалюзи сверху, больнично белое все в том числе и аппбар. Но что позитивно — что наконецто — стали задумываться разработчики интерфейсов что цвета не берутся с потолка. Что пока не дотягивает — марджины и паддинги даже казалось бы у уважаемых фреймворков — полное непонимание про ритм и скейл. Метание от выбеленного текста к наоборот контрастному и прочее и прочее. Интересное время. Но то что МС имел звездный час со своим вин8 и плитками и цветовой палитрой и умершей горизонтальной прокруткой — это запомнилось.
1. Athari Автор
  05.07.2018 18:24
  #18852481
  +2
  Заголовки окон и панель задач выглядят нормально в первый раз со времён Windows 2000, главное меню сделали более-менее вменяемым. К сожалению, в каждом релизе "перекрашивают" очень малую часть диалогов (последний диалог Win 3.1 ушёл в Vista), в результате полный стилистический разнобой даже в системном софте, я уж молчу про сторонний софт, где у каждой программы свои контролы и свои стили. Времена единообразного и настраиваемого стиля безвозвратно ушли.
  
  Я бы, может, нормально относился к повсеместной плоскоте, если бы разрабочики интерфейсов позаботились о том, чтобы нажимаемое визуально отличалось он ненажимаемого, а чекбоксы не мутировали в маловменяемые переключатели, которые требуют текстовых пояснений, чтобы пользователи не запутались, чем левое состояние отличается от правого.
  
  Что с цветами плиток стали чуть более дерзкими, но при этом не скатились назад в ХРюшку — это, плюс, конечно, но монохромные векторные иконки, необходимость в которых продиктована скорее непоспеванием графических движков за требованиями к разрешению и частоте кадров, чем новыми стилистическими предпочтениями масс — эти иконки внушают грусть. Иконки мало того, что нельзя расшифровать (этим страдали и старые цветные иконки, надо сказать), так ещё и требуют гораздо большей площади для узнаваемости, и всё равно искать среди них сложно.
  
  Что касается "ритмов" и "скейлов", то на такие мелочи мне определённо покласть. Главное, чтобы кнопки не делали на полэкрана, и шрифт был не сверх-тонким светлосерым на белом фоне.
  1. lovespy
    05.07.2018 18:36
    #18852527
    Спасибо — я должен добавить что все что я откомментировал выше относится к вебаппам, гибридным аппам. Где важно — 1) понять в каком именно приложении ты сейчас находишься (цвета, панели навигации) 2) размеры кнопок — чтобы можно было с первого разу не промахнуться. Ну а ритмы и скейлы — ваше дело, конечно, но, например, я досканально изучил три фреймворка аля матираиал в том числе и сам гайд гугла для андроид разработчиков — никаких четких гайдом по междустрочным пробелам хотя бы так и не увидел. Тенденция. Тенденция ведь опять к унификации, но с некой свободой для разработчиков. Гамбургер ведет просто на на твою страницу профиля — ОК. Гамбургер выдвигает панель — Ок. По поводу винды 10 интерфейса и что было до нее (причем здесь Гитхаб?!) То действительно смесь виндового интерфейса с приложениями виндового стора — их дизайн совсем разный — это не нравится. Открыв Иллюстратор мне конечно же хотелось бы старых стандртов в оформлении — панель и кнопки — быстро удобно и десктопно. Приложение Погоды — пусть будет в UWP. Нормально. Мое мнение что все как бы движется к некой унификации которую произвести пока нереально — для работы с точными инструментами — лучше уж старый интерфейс без всяких вин7 аэро — для работы с приложением новостей — пожалуйста — хоть UWP хоть Матириал. А что касается Гитхаб. У них на праймере — если речь идет о CSS — чего то виндового/мс-ного я не заметил. Может чего-то пропустил, ну так я о своем.
  1. kinjalik
    05.07.2018 19:41
    #18852773
    Все это единообразие есть в MacOS
    
    Athari Автор
    05.07.2018 19:44
    #18852785
    Да, когда поковырялся с макосью на виртуалке, это первое, что я заметил. Впечатляет.

saag
05.07.2018 18:03
#18852417
+3
BSOD будет?:-)
1. Athari Автор
  05.07.2018 18:08
  #18852437
  Хм… Какие на ГитХабе бывают ошибки и как они выглядят? Нужны URLы для стилизации. Нашёл 404.
  1. eatmore
    05.07.2018 22:53
    #18853413
    Ещё есть 500, 502, 503...
    
    Athari Автор
    06.07.2018 04:08
    #18853783
    О. Однозначно добавляю BSOD.

AntonSazonov
05.07.2018 18:19
#18852469
Так 95-й или 98-й?
1. Athari Автор
  05.07.2018 18:26
  #18852489
  У меня стиль от 95-й винды, но его можно переделать в любой классический без особых затруднений: хоть в Windows 2000, хоть OS/2.
  1. Halt
    05.07.2018 19:08
    #18852629
    Иконки папок точно из 98й винды :)
    
    Athari Автор
    05.07.2018 19:35
    #18852745
    Хм. Ну да.
    
    Я уже когда наковырял иконки из Win98, обнаружил, что некоторые выглядят достаточно прогрессивно. Мне почему-то изначально казалось, что этот стиль иконок папок появился в Win2000, а в Win98 стиль иконок не менялся. Ну, 20 лет прошло, подзабыл нюансы.
    
    Halt
    05.07.2018 19:38
    #18852759
    +1
    Нет, как раз таки в 98 был рестайлинг графики и уход от 16 битной палитры. В 2К была очередная смена.
    
    heos_spb
    06.07.2018 04:32
    #18853803
    Извините, но красивые (и полноцветные) иконки были в Microsoft Plus! for Windows 95. Windows 98 просто включал это всё по умолчанию.
    
    Athari Автор
    06.07.2018 04:39
    #18853809
    Если говорить про полноцветность (TrueColor: 24-bit + 8-bit alpha), то поддержка таких иконок (и размера до 256x256) появилась в Windows XP, вроде.
  1. ALF_Zetas
    06.07.2018 04:40
    #18853811
    это не стиль 95-й виндьі — это стиль 95-й виндьі с установленньім ІЕ4, которьій делал интерфейс более угловатьім. А оригиналый стиль 95-й округлый и больше похож на Вин 3.х
    
    Athari Автор
    06.07.2018 04:43
    #18853813
    А есть скриншоты? Что-то они не хотят гуглиться.

AngReload
05.07.2018 19:02
#18852619
Этот комментарий будет не очень содержательным, хочу сказать лишь одно: это круто!

u007
05.07.2018 19:13
#18852645
Шутки шутками, но… блин, я бы так и оставил))
1. Athari Автор
  05.07.2018 19:38
  #18852761
  Ну, я так и оставил. Как-то уже привык даже.

sumanai
05.07.2018 19:28
#18852715
+3
Добиться от браузера рендеринга пиксельных шрифтов не удалось

На FireFox с этим проблем нет, если отключить в системе клеартайп. Вот пикселизованная версия для большей аутентичности
Заголовок спойлера
1. Athari Автор
  05.07.2018 19:43
  #18852779
  О, круто. Правда с полужирным начертанием что-то не так. Например, "w" в заголовке "CssGitHubWindows" выглядит очень странно.
  
  sumanai
  05.07.2018 20:10
  #18852865
  +1
  Tahoma больше подходит в качестве пикселизованного шрифта.

Alexmaru
05.07.2018 19:42
#18852777
+5
В этом стиле решена самая главная проблема: кнопка Fork теперь выглядит кнопкой, а не ссылкой. Многие жмут туда, чтобы увидеть список.
1. Athari Автор
  05.07.2018 19:46
  #18852789
  +3
  Меня больше бесит, когда на сайт кладут шилдик "Fork me on GitHub" и дают ссылку на создание форка, а не репозиторий. Кому в голову могло придти создать такой шилдик?
  1. sumanai
    05.07.2018 20:12
    #18852873
    +3
    Кому в голову могло придти создать такой шилдик?
    
    Ну так проект с кучей форков выглядит круче.
    
    springimport
    05.07.2018 21:20
    #18853143
    +2
    Может быть, хотя если у проекта 100 звезд и 2000 форков то почему-то сразу хочется посмотреть что там с кодом.
    
    baldr
    05.07.2018 22:06
    #18853279
    Вот именно. «Задолбался ждать когжда фичу приделают, лучше сам запилю по-быстрому»
1. mayorovp
  05.07.2018 19:55
  #18852827
  +1
  Как она могла выглядеть ссылкой когда у нее рамка вокруг есть и цвет фона другой?
  
  Я, конечно, тоже люблю на современные дизайны по-ругаться, но именно на гитхабе я таких проблем не замечал…
  1. Alexmaru
    06.07.2018 00:11
    #18853603
    +2
    Число входит в эту рамку, и это ломает смысл кнопки. Первый раз всё происходит так «о, я нажму на форк, и видимо увижу список! Число-то не синего цвета…». Потом происходит либо «окей, как это удалить?», либо «что я вообще сделал?». Потом уже доходит повозить там мышкой, и увидеть, что там a href-ы висят. Притом, это число — одна из самых важнейших ссылок на сайте со стороны пользователя, когда проект полу-труп, чтобы посмотреть, кто там куда ушёл, и пользуются-ли им вообще.
    
    В этом стиле, может быть случайно, но ссылка оказалась цвета ссылки, и вынесена за кнопку. При таком стиле сразу видно, что это действие, которое к чему-то приведёт, и что там ссылка, а не просто какой-то счётчик.

3lo1i
05.07.2018 20:05
#18852853
+11
Обидно, что когда писал комментарий на Хабре к новости о покупке Гитхаба Майкрософт, он так и не прошел модерацию, и про мой сделанный наспех юзерстиль узнали лишь немногие.
Оставлю хоть здесь для истории github.com/3lo1i/WinHub-98
1. EvilFox
  06.07.2018 01:35
  #18853723
  трудно быть первым.jpg
1. Athari Автор
  06.07.2018 04:26
  #18853795
  О, профессиональный подход! У меня всё на коленке в одном голом CSS.
  
  Хм, border-image… Я был не в курсе, что это мощная штука.
  
  P.S. Держите инвайт в качестве моральной компенсации.
1. khim
  06.07.2018 09:34
  #18854225
  Статью какую-нибудь запилите, а то карму выше +4 не сделать…

berezuev
05.07.2018 20:15
#18852885
+2
Немного оффтопик:
А есть ли в Сафари какой-то аналог Стайлиша?
1. Athari Автор
  06.07.2018 04:29
  #18853801
  Гуглится вот это поделие.
  
  В Edge я устанавливал UserCSS через UserJS.

caballero
05.07.2018 21:40
#18853215
+1
В первое мгновение проскочила мысль что это Майкрософт уже сменила дизайн свежекупленого гитхаба…

man_without_face
05.07.2018 23:22
#18853483
А есть аналоги Stylish для JS? Т.е. чтобы свои js исполнялись, когда ходишь по сайту? Что-то подобное extensions у браузеров
1. myrrec
  05.07.2018 23:28
  #18853491
  Посмотрите Greasemonkey.
  1. man_without_face
    05.07.2018 23:29
    #18853495
    Спасибо, гляну.

perfect_genius
06.07.2018 08:20
#18854003
+1
Не поверите, но на Win10 не перехожу именно потому, что нет такой темы для неё.
1. Athari Автор
  06.07.2018 08:42
  #18854065
  WindowBlinds не пробовали? Вроде, там есть классическая тема.
  1. perfect_genius
    06.07.2018 15:45
    #18855949
    Потрясающе! Спасибо, надо пробовать.
  1. dartraiden
    07.07.2018 00:10
    #18857255
    В качестве бесплатной альтернативы: Windows classic theme + патч системных файлов, чтобы применялись неподписанные темы.
    
    Athari Автор
    07.07.2018 04:05
    #18857503
    Это не классическая тема, это какое-то жалкое её подобие. :) Скорее Windows 10 в цветах Windows 95, чем настоящая классика.
    
    dartraiden
    07.07.2018 13:24
    #18858055
    Да, это явно дефолтная высококонтрастная тема с чуток изменёнными цветами.

i360u
06.07.2018 11:43
#18854785
BSOD на 404 натянули?

Semenych
06.07.2018 12:45
#18855055
Отлично выглядит. Обожаю такой UI/UX. Спасибо!!!

ttmt
07.07.2018 04:03
#18857501
До слез )

GitHub превращается… превращается GitHub… в элегантный Windows 95 +198

Цвета

Шрифты

Объём

ListBox, TextBox, TreeView...

Button

TabControl

GroupBox

Прочее

Иконки

Последние штрихи

Шапка

Готово!

Комментарии (77)

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор

Athari Автор