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

  • Tutorial


В Твиттере какое-то время назад запостили шутку в честь приобретения Майкрософтом ГитХаба — страницу сайта, перестилизованную в стиле 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, потому что многие страницы перестилизованы не полностью. Но начало положено!



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



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

Поделиться публикацией
Похожие публикации
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 79
    0
    Вау, прям глаз отдыхает.
    Разве что вот тут косячок
    image
      +4

      Мелких косячков там достаточно много, потому что размеры и отступы кнопок слегка изменены, а гитхаб много где задаёт выравнивание пикселями. Одних табов там сортов десять, и каждый используется в разных случаях с разными размерами. Чтобы было идеально, нужно пройтись по всем диалогам и удостовериться в том, что ничего не поехало и не вылезло. Я недели две сам пользуюсь стилем — где-то что-то поехало по мелочи (дырки между ушками, кнопка поехала на пиксель, разделитель нестилизованный), но в целом ничего важного.


      Не очень понял, что выделяет крест на скриншоте. Вы про отсутствие общего паддинга? Да, можно поправить. Можно и синенький заголовок попапу сделать. Просто таких диалогов сотни, если не тысячи, и я не хотел захламлять стиль специфическими мелочами раньше времени.

        0
        Вы про отсутствие общего паддинга?

        Да, кнопки должны быть на одной линии с началом текста и отступ снизу. Остальные косячки не так бросаются в глаза.
      0
      А почему вы использовали border-style: solid вместо outset? (см. htmlbook.ru/css/border-style)
        +14

        Groove, ridge, inset и outset в теории имитируют виндовый псевдо-объём, а на практике обладают кучей недостатков. Во-первых, невозможно точно задать "светлый" и "тёмный" цвета, браузер вычислит их самостоятельно по заданному "базовому" цвету. Во-вторых, в разных браузерах это вычисление происходит по-разному: один считает светлый базовым, другой считает базовый находящимся посередине между светлым и тёмным… Это очень устаревшие нестандартизированные стили границ, короче. Если нужна точность, то пользоваться ими невозможно.

          0
          А, понял, да, точно, благодарю за ответ!
            0

            А полуось сможете?
            ПС. А впрочем кому это надо…
            ПС2. DOS был бы хардкорнее.

          +4
          Шутки шутками, но главное, чтобы новые сервера на Windows 98 не работали
            0
            С чего бы им?
              +17

              Правильно, Windows NT 4.0 гораздо лучше.

                0

                Я помню как на NT4 можно было задолбить форму логина и вызвать taskmanager, где запустить нужный софт без… входа в систему.

                  +2
                    +6
                    Это если через сеть аутентификация. На домашнем компе вообще можно просто было Cancel нажать и вы в системе.
                    0
                    В НТ4 или в Win9x?
                      +1

                      Кстати да. Мне почему-то казалось, что в WinNT изначально были полноценные юзеры и разграничение прав, а в Win9x многопользовательский интерфейс был декорацией, которая держалась на честном слове.

                        0

                        Та NT4, что была в физтехе долгопрудного в 2001-2002 годах, пыталась разграничивать права, но таск менеджер все сводил на нет.

                          0
                          Видимо в физтехе NT4 стояла на fat32 а не на NTFS
                          0
                          В WinNT изначально заложено ограничение прав, но их адекватное значение по умолчанию пошло где-то с Win2000, а SRP появился только в XP.
                            –2

                            А смысл в разграничении прав, если права доступа к файловой системе появились только в ntfs.

                              +3
                              NTFS как раз и появилась вместе с NT. Даже не NT4, а NT 3.1.
                                +1
                                NTFS появилась вместе с WinNT.
                          0
                          Вы путаете NT4 и Win95/98/Me. Это в семействе 9х можно было нажать отмену или вызвать диспетчер задач. В NT4 этого сделать было нельзя.
                    +9
                    Решил попробовать поставить, благо дело интересное и прекрасное. Пошёл в магазин хрома и обнаружил, что Stylish'а больше не существует, магазин отдаёт 404. Погуглил…

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

                    Расширение удалили из всех магазинов, т.к. оно собирало историю и другие персональные данные людей. Думаю это будет интересно и полезно тем, кто пользуется им сейчас.
                      +3

                      Да, я написал об этом инциденте в постскриптуме.


                      Такой поворот событий — не новость для тех, кто следит за происходящим со Stylish. Надеюсь, удаление расширения из магазинов наконец сподвигнет народ поставить Stylus. Правда, подозреваю, текущий хозяин Stylish просто чуть сбавит уровень шпионажа, расширение вернут, и ничего не изменится.

                        0
                        Вот ещё на ленте пишут про Stylish, который оказался опасным шпионом.
                        +3
                        Спасибо. Теперь буду шокировать коллег :)
                          +1

                          Мва-ха-ха. Интересное применение.

                          0
                          На мой взгляд с появлением Win8 и затем UWP и их стандартами в дизайне приложений МС хорошо поработало над своим плоским плиточным форматом. Гугл со своим матириалом и уж совсем страхолюдным по началу цветовым палетом заметно проигрывал. Что щас? Карточки, акшн баттон внизу круглый в виде значка с акцентным колором, меню по ключевым задачам внизу, гамбургер совсем потерял свое первоначальное значение — выдвижная панель или жалюзи сверху, больнично белое все в том числе и аппбар. Но что позитивно — что наконецто — стали задумываться разработчики интерфейсов что цвета не берутся с потолка. Что пока не дотягивает — марджины и паддинги даже казалось бы у уважаемых фреймворков — полное непонимание про ритм и скейл. Метание от выбеленного текста к наоборот контрастному и прочее и прочее. Интересное время. Но то что МС имел звездный час со своим вин8 и плитками и цветовой палитрой и умершей горизонтальной прокруткой — это запомнилось.
                            +5

                            Заголовки окон и панель задач выглядят нормально в первый раз со времён Windows 2000, главное меню сделали более-менее вменяемым. К сожалению, в каждом релизе "перекрашивают" очень малую часть диалогов (последний диалог Win 3.1 ушёл в Vista), в результате полный стилистический разнобой даже в системном софте, я уж молчу про сторонний софт, где у каждой программы свои контролы и свои стили. Времена единообразного и настраиваемого стиля безвозвратно ушли.


                            Я бы, может, нормально относился к повсеместной плоскоте, если бы разрабочики интерфейсов позаботились о том, чтобы нажимаемое визуально отличалось он ненажимаемого, а чекбоксы не мутировали в маловменяемые переключатели, которые требуют текстовых пояснений, чтобы пользователи не запутались, чем левое состояние отличается от правого.


                            Что с цветами плиток стали чуть более дерзкими, но при этом не скатились назад в ХРюшку — это, плюс, конечно, но монохромные векторные иконки, необходимость в которых продиктована скорее непоспеванием графических движков за требованиями к разрешению и частоте кадров, чем новыми стилистическими предпочтениями масс — эти иконки внушают грусть. Иконки мало того, что нельзя расшифровать (этим страдали и старые цветные иконки, надо сказать), так ещё и требуют гораздо большей площади для узнаваемости, и всё равно искать среди них сложно.


                            Что касается "ритмов" и "скейлов", то на такие мелочи мне определённо покласть. Главное, чтобы кнопки не делали на полэкрана, и шрифт был не сверх-тонким светлосерым на белом фоне.

                              +1
                              Спасибо — я должен добавить что все что я откомментировал выше относится к вебаппам, гибридным аппам. Где важно — 1) понять в каком именно приложении ты сейчас находишься (цвета, панели навигации) 2) размеры кнопок — чтобы можно было с первого разу не промахнуться. Ну а ритмы и скейлы — ваше дело, конечно, но, например, я досканально изучил три фреймворка аля матираиал в том числе и сам гайд гугла для андроид разработчиков — никаких четких гайдом по междустрочным пробелам хотя бы так и не увидел. Тенденция. Тенденция ведь опять к унификации, но с некой свободой для разработчиков. Гамбургер ведет просто на на твою страницу профиля — ОК. Гамбургер выдвигает панель — Ок. По поводу винды 10 интерфейса и что было до нее (причем здесь Гитхаб?!) То действительно смесь виндового интерфейса с приложениями виндового стора — их дизайн совсем разный — это не нравится. Открыв Иллюстратор мне конечно же хотелось бы старых стандртов в оформлении — панель и кнопки — быстро удобно и десктопно. Приложение Погоды — пусть будет в UWP. Нормально. Мое мнение что все как бы движется к некой унификации которую произвести пока нереально — для работы с точными инструментами — лучше уж старый интерфейс без всяких вин7 аэро — для работы с приложением новостей — пожалуйста — хоть UWP хоть Матириал. А что касается Гитхаб. У них на праймере — если речь идет о CSS — чего то виндового/мс-ного я не заметил. Может чего-то пропустил, ну так я о своем.
                                +3
                                Все это единообразие есть в MacOS
                                  0

                                  Да, когда поковырялся с макосью на виртуалке, это первое, что я заметил. Впечатляет.

                              +4
                              BSOD будет?:-)
                                +3

                                Хм… Какие на ГитХабе бывают ошибки и как они выглядят? Нужны URLы для стилизации. Нашёл 404.

                                  0

                                  Ещё есть 500, 502, 503...

                                    +5

                                    О. Однозначно добавляю BSOD.

                                0

                                Так 95-й или 98-й?

                                  0

                                  У меня стиль от 95-й винды, но его можно переделать в любой классический без особых затруднений: хоть в Windows 2000, хоть OS/2.

                                    0
                                    Иконки папок точно из 98й винды :)
                                      0

                                      Хм. Ну да.


                                      Я уже когда наковырял иконки из Win98, обнаружил, что некоторые выглядят достаточно прогрессивно. Мне почему-то изначально казалось, что этот стиль иконок папок появился в Win2000, а в Win98 стиль иконок не менялся. Ну, 20 лет прошло, подзабыл нюансы.

                                        +1
                                        Нет, как раз таки в 98 был рестайлинг графики и уход от 16 битной палитры. В 2К была очередная смена.
                                          0
                                          Извините, но красивые (и полноцветные) иконки были в Microsoft Plus! for Windows 95. Windows 98 просто включал это всё по умолчанию.
                                            +1

                                            Если говорить про полноцветность (TrueColor: 24-bit + 8-bit alpha), то поддержка таких иконок (и размера до 256x256) появилась в Windows XP, вроде.

                                      +1
                                      это не стиль 95-й виндьі — это стиль 95-й виндьі с установленньім ІЕ4, которьій делал интерфейс более угловатьім. А оригиналый стиль 95-й округлый и больше похож на Вин 3.х
                                        0

                                        А есть скриншоты? Что-то они не хотят гуглиться.

                                    +3

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

                                      +4
                                      Шутки шутками, но… блин, я бы так и оставил))
                                        +1

                                        Ну, я так и оставил. Как-то уже привык даже.

                                        +3
                                        Добиться от браузера рендеринга пиксельных шрифтов не удалось

                                        На FireFox с этим проблем нет, если отключить в системе клеартайп. Вот пикселизованная версия для большей аутентичности
                                        Заголовок спойлера
                                        GitHub с темой Windows 95 и пикселизованными шрифтами
                                        +7

                                        В этом стиле решена самая главная проблема: кнопка Fork теперь выглядит кнопкой, а не ссылкой. Многие жмут туда, чтобы увидеть список.

                                          +7

                                          Меня больше бесит, когда на сайт кладут шилдик "Fork me on GitHub" и дают ссылку на создание форка, а не репозиторий. Кому в голову могло придти создать такой шилдик?

                                            +6
                                            Кому в голову могло придти создать такой шилдик?

                                            Ну так проект с кучей форков выглядит круче.
                                              +2
                                              Может быть, хотя если у проекта 100 звезд и 2000 форков то почему-то сразу хочется посмотреть что там с кодом.
                                                +3
                                                Вот именно. «Задолбался ждать когжда фичу приделают, лучше сам запилю по-быстрому»
                                            +2

                                            Как она могла выглядеть ссылкой когда у нее рамка вокруг есть и цвет фона другой?


                                            Я, конечно, тоже люблю на современные дизайны по-ругаться, но именно на гитхабе я таких проблем не замечал…

                                              +4
                                              Число входит в эту рамку, и это ломает смысл кнопки. Первый раз всё происходит так «о, я нажму на форк, и видимо увижу список! Число-то не синего цвета…». Потом происходит либо «окей, как это удалить?», либо «что я вообще сделал?». Потом уже доходит повозить там мышкой, и увидеть, что там a href-ы висят. Притом, это число — одна из самых важнейших ссылок на сайте со стороны пользователя, когда проект полу-труп, чтобы посмотреть, кто там куда ушёл, и пользуются-ли им вообще.

                                              В этом стиле, может быть случайно, но ссылка оказалась цвета ссылки, и вынесена за кнопку. При таком стиле сразу видно, что это действие, которое к чему-то приведёт, и что там ссылка, а не просто какой-то счётчик.
                                            +27
                                            Обидно, что когда писал комментарий на Хабре к новости о покупке Гитхаба Майкрософт, он так и не прошел модерацию, и про мой сделанный наспех юзерстиль узнали лишь немногие.
                                            Оставлю хоть здесь для истории github.com/3lo1i/WinHub-98
                                              +2
                                              трудно быть первым.jpg
                                              image
                                                +6

                                                О, профессиональный подход! У меня всё на коленке в одном голом CSS.


                                                Хм, border-image… Я был не в курсе, что это мощная штука.


                                                P.S. Держите инвайт в качестве моральной компенсации.

                                                  +4
                                                  Статью какую-нибудь запилите, а то карму выше +4 не сделать…
                                                    +1
                                                    Вот да. Хотя бы подробный разбор, создания этой штуки…
                                                    +1
                                                    Карма пользователя без публикации не может быть больше +4
                                                    р-рррр
                                                    +2
                                                    Немного оффтопик:
                                                    А есть ли в Сафари какой-то аналог Стайлиша?
                                                    +1
                                                    В первое мгновение проскочила мысль что это Майкрософт уже сменила дизайн свежекупленого гитхаба…
                                                      +2
                                                      А есть аналоги Stylish для JS? Т.е. чтобы свои js исполнялись, когда ходишь по сайту? Что-то подобное extensions у браузеров
                                                        +3

                                                        Посмотрите Greasemonkey.

                                                      +1
                                                      Не поверите, но на Win10 не перехожу именно потому, что нет такой темы для неё.
                                                        0

                                                        WindowBlinds не пробовали? Вроде, там есть классическая тема.

                                                          0
                                                          Потрясающе! Спасибо, надо пробовать.
                                                            0
                                                            В качестве бесплатной альтернативы: Windows classic theme + патч системных файлов, чтобы применялись неподписанные темы.
                                                              0

                                                              Это не классическая тема, это какое-то жалкое её подобие. :) Скорее Windows 10 в цветах Windows 95, чем настоящая классика.

                                                                0
                                                                Да, это явно дефолтная высококонтрастная тема с чуток изменёнными цветами.
                                                          0

                                                          BSOD на 404 натянули?

                                                            0
                                                            Отлично выглядит. Обожаю такой UI/UX. Спасибо!!!
                                                              0
                                                              До слез )

                                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                              Самое читаемое