В Твиттере какое-то время назад запостили шутку в честь приобретения Майкрософтом ГитХаба — страницу сайта, перестилизованную в стиле 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, если вы этого ещё не сделали.
Iqorek
Вау, прям глаз отдыхает.
Athari Автор
Мелких косячков там достаточно много, потому что размеры и отступы кнопок слегка изменены, а гитхаб много где задаёт выравнивание пикселями. Одних табов там сортов десять, и каждый используется в разных случаях с разными размерами. Чтобы было идеально, нужно пройтись по всем диалогам и удостовериться в том, что ничего не поехало и не вылезло. Я недели две сам пользуюсь стилем — где-то что-то поехало по мелочи (дырки между ушками, кнопка поехала на пиксель, разделитель нестилизованный), но в целом ничего важного.
Не очень понял, что выделяет крест на скриншоте. Вы про отсутствие общего паддинга? Да, можно поправить. Можно и синенький заголовок попапу сделать. Просто таких диалогов сотни, если не тысячи, и я не хотел захламлять стиль специфическими мелочами раньше времени.
Iqorek
Да, кнопки должны быть на одной линии с началом текста и отступ снизу. Остальные косячки не так бросаются в глаза.
Fails
А почему вы использовали border-style: solid вместо outset? (см. htmlbook.ru/css/border-style)
Athari Автор
Groove, ridge, inset и outset в теории имитируют виндовый псевдо-объём, а на практике обладают кучей недостатков. Во-первых, невозможно точно задать "светлый" и "тёмный" цвета, браузер вычислит их самостоятельно по заданному "базовому" цвету. Во-вторых, в разных браузерах это вычисление происходит по-разному: один считает светлый базовым, другой считает базовый находящимся посередине между светлым и тёмным… Это очень устаревшие нестандартизированные стили границ, короче. Если нужна точность, то пользоваться ими невозможно.
Fails
А, понял, да, точно, благодарю за ответ!
trdm
А полуось сможете?
ПС. А впрочем кому это надо…
ПС2. DOS был бы хардкорнее.
flygrounder
Шутки шутками, но главное, чтобы новые сервера на Windows 98 не работали
impwx
С чего бы им?
Athari Автор
Правильно, Windows NT 4.0 гораздо лучше.
nikitasius
Я помню как на NT4 можно было задолбить форму логина и вызвать taskmanager, где запустить нужный софт без… входа в систему.
Athari Автор
FSA
Это если через сеть аутентификация. На домашнем компе вообще можно просто было Cancel нажать и вы в системе.
saboteur_kiev
В НТ4 или в Win9x?
Athari Автор
Кстати да. Мне почему-то казалось, что в WinNT изначально были полноценные юзеры и разграничение прав, а в Win9x многопользовательский интерфейс был декорацией, которая держалась на честном слове.
nikitasius
Та NT4, что была в физтехе долгопрудного в 2001-2002 годах, пыталась разграничивать права, но таск менеджер все сводил на нет.
saboteur_kiev
Видимо в физтехе NT4 стояла на fat32 а не на NTFS
sumanai
В WinNT изначально заложено ограничение прав, но их адекватное значение по умолчанию пошло где-то с Win2000, а SRP появился только в XP.
dimka11
А смысл в разграничении прав, если права доступа к файловой системе появились только в ntfs.
ptica_filin
NTFS как раз и появилась вместе с NT. Даже не NT4, а NT 3.1.
shikhalev
NTFS появилась вместе с WinNT.
rajven
Вы путаете NT4 и Win95/98/Me. Это в семействе 9х можно было нажать отмену или вызвать диспетчер задач. В NT4 этого сделать было нельзя.
SerafimArts
Решил попробовать поставить, благо дело интересное и прекрасное. Пошёл в магазин хрома и обнаружил, что Stylish'а больше не существует, магазин отдаёт 404. Погуглил…
Короче, не буду тянуть кота за хвост, вот такая новость нашлась, 4 часа как раз: xakep.ru/2018/07/05/stylish
Расширение удалили из всех магазинов, т.к. оно собирало историю и другие персональные данные людей. Думаю это будет интересно и полезно тем, кто пользуется им сейчас.
Athari Автор
Да, я написал об этом инциденте в постскриптуме.
Такой поворот событий — не новость для тех, кто следит за происходящим со Stylish. Надеюсь, удаление расширения из магазинов наконец сподвигнет народ поставить Stylus. Правда, подозреваю, текущий хозяин Stylish просто чуть сбавит уровень шпионажа, расширение вернут, и ничего не изменится.
pro_co_ru
Вот ещё на ленте пишут про Stylish, который оказался опасным шпионом.
jhonyxakep
Спасибо. Теперь буду шокировать коллег :)
Athari Автор
Мва-ха-ха. Интересное применение.
lovespy
На мой взгляд с появлением Win8 и затем UWP и их стандартами в дизайне приложений МС хорошо поработало над своим плоским плиточным форматом. Гугл со своим матириалом и уж совсем страхолюдным по началу цветовым палетом заметно проигрывал. Что щас? Карточки, акшн баттон внизу круглый в виде значка с акцентным колором, меню по ключевым задачам внизу, гамбургер совсем потерял свое первоначальное значение — выдвижная панель или жалюзи сверху, больнично белое все в том числе и аппбар. Но что позитивно — что наконецто — стали задумываться разработчики интерфейсов что цвета не берутся с потолка. Что пока не дотягивает — марджины и паддинги даже казалось бы у уважаемых фреймворков — полное непонимание про ритм и скейл. Метание от выбеленного текста к наоборот контрастному и прочее и прочее. Интересное время. Но то что МС имел звездный час со своим вин8 и плитками и цветовой палитрой и умершей горизонтальной прокруткой — это запомнилось.
Athari Автор
Заголовки окон и панель задач выглядят нормально в первый раз со времён Windows 2000, главное меню сделали более-менее вменяемым. К сожалению, в каждом релизе "перекрашивают" очень малую часть диалогов (последний диалог Win 3.1 ушёл в Vista), в результате полный стилистический разнобой даже в системном софте, я уж молчу про сторонний софт, где у каждой программы свои контролы и свои стили. Времена единообразного и настраиваемого стиля безвозвратно ушли.
Я бы, может, нормально относился к повсеместной плоскоте, если бы разрабочики интерфейсов позаботились о том, чтобы нажимаемое визуально отличалось он ненажимаемого, а чекбоксы не мутировали в маловменяемые переключатели, которые требуют текстовых пояснений, чтобы пользователи не запутались, чем левое состояние отличается от правого.
Что с цветами плиток стали чуть более дерзкими, но при этом не скатились назад в ХРюшку — это, плюс, конечно, но монохромные векторные иконки, необходимость в которых продиктована скорее непоспеванием графических движков за требованиями к разрешению и частоте кадров, чем новыми стилистическими предпочтениями масс — эти иконки внушают грусть. Иконки мало того, что нельзя расшифровать (этим страдали и старые цветные иконки, надо сказать), так ещё и требуют гораздо большей площади для узнаваемости, и всё равно искать среди них сложно.
Что касается "ритмов" и "скейлов", то на такие мелочи мне определённо покласть. Главное, чтобы кнопки не делали на полэкрана, и шрифт был не сверх-тонким светлосерым на белом фоне.
lovespy
Спасибо — я должен добавить что все что я откомментировал выше относится к вебаппам, гибридным аппам. Где важно — 1) понять в каком именно приложении ты сейчас находишься (цвета, панели навигации) 2) размеры кнопок — чтобы можно было с первого разу не промахнуться. Ну а ритмы и скейлы — ваше дело, конечно, но, например, я досканально изучил три фреймворка аля матираиал в том числе и сам гайд гугла для андроид разработчиков — никаких четких гайдом по междустрочным пробелам хотя бы так и не увидел. Тенденция. Тенденция ведь опять к унификации, но с некой свободой для разработчиков. Гамбургер ведет просто на на твою страницу профиля — ОК. Гамбургер выдвигает панель — Ок. По поводу винды 10 интерфейса и что было до нее (причем здесь Гитхаб?!) То действительно смесь виндового интерфейса с приложениями виндового стора — их дизайн совсем разный — это не нравится. Открыв Иллюстратор мне конечно же хотелось бы старых стандртов в оформлении — панель и кнопки — быстро удобно и десктопно. Приложение Погоды — пусть будет в UWP. Нормально. Мое мнение что все как бы движется к некой унификации которую произвести пока нереально — для работы с точными инструментами — лучше уж старый интерфейс без всяких вин7 аэро — для работы с приложением новостей — пожалуйста — хоть UWP хоть Матириал. А что касается Гитхаб. У них на праймере — если речь идет о CSS — чего то виндового/мс-ного я не заметил. Может чего-то пропустил, ну так я о своем.
kinjalik
Все это единообразие есть в MacOS
Athari Автор
Да, когда поковырялся с макосью на виртуалке, это первое, что я заметил. Впечатляет.
saag
BSOD будет?:-)
Athari Автор
Хм… Какие на ГитХабе бывают ошибки и как они выглядят? Нужны URLы для стилизации. Нашёл 404.
eatmore
Ещё есть 500, 502, 503...
Athari Автор
О. Однозначно добавляю BSOD.
AntonSazonov
Так 95-й или 98-й?
Athari Автор
У меня стиль от 95-й винды, но его можно переделать в любой классический без особых затруднений: хоть в Windows 2000, хоть OS/2.
Halt
Иконки папок точно из 98й винды :)
Athari Автор
Хм. Ну да.
Я уже когда наковырял иконки из Win98, обнаружил, что некоторые выглядят достаточно прогрессивно. Мне почему-то изначально казалось, что этот стиль иконок папок появился в Win2000, а в Win98 стиль иконок не менялся. Ну, 20 лет прошло, подзабыл нюансы.
Halt
Нет, как раз таки в 98 был рестайлинг графики и уход от 16 битной палитры. В 2К была очередная смена.
heos_spb
Извините, но красивые (и полноцветные) иконки были в Microsoft Plus! for Windows 95. Windows 98 просто включал это всё по умолчанию.
Athari Автор
Если говорить про полноцветность (TrueColor: 24-bit + 8-bit alpha), то поддержка таких иконок (и размера до 256x256) появилась в Windows XP, вроде.
ALF_Zetas
это не стиль 95-й виндьі — это стиль 95-й виндьі с установленньім ІЕ4, которьій делал интерфейс более угловатьім. А оригиналый стиль 95-й округлый и больше похож на Вин 3.х
Athari Автор
А есть скриншоты? Что-то они не хотят гуглиться.
AngReload
Этот комментарий будет не очень содержательным, хочу сказать лишь одно: это круто!
u007
Шутки шутками, но… блин, я бы так и оставил))
Athari Автор
Ну, я так и оставил. Как-то уже привык даже.
sumanai
На FireFox с этим проблем нет, если отключить в системе клеартайп. Вот пикселизованная версия для большей аутентичности
Athari Автор
О, круто. Правда с полужирным начертанием что-то не так. Например, "w" в заголовке "CssGitHubWindows" выглядит очень странно.
sumanai
Tahoma больше подходит в качестве пикселизованного шрифта.
Alexmaru
В этом стиле решена самая главная проблема: кнопка Fork теперь выглядит кнопкой, а не ссылкой. Многие жмут туда, чтобы увидеть список.
Athari Автор
Меня больше бесит, когда на сайт кладут шилдик "Fork me on GitHub" и дают ссылку на создание форка, а не репозиторий. Кому в голову могло придти создать такой шилдик?
sumanai
Ну так проект с кучей форков выглядит круче.
springimport
Может быть, хотя если у проекта 100 звезд и 2000 форков то почему-то сразу хочется посмотреть что там с кодом.
baldr
Вот именно. «Задолбался ждать когжда фичу приделают, лучше сам запилю по-быстрому»
mayorovp
Как она могла выглядеть ссылкой когда у нее рамка вокруг есть и цвет фона другой?
Я, конечно, тоже люблю на современные дизайны по-ругаться, но именно на гитхабе я таких проблем не замечал…
Alexmaru
Число входит в эту рамку, и это ломает смысл кнопки. Первый раз всё происходит так «о, я нажму на форк, и видимо увижу список! Число-то не синего цвета…». Потом происходит либо «окей, как это удалить?», либо «что я вообще сделал?». Потом уже доходит повозить там мышкой, и увидеть, что там a href-ы висят. Притом, это число — одна из самых важнейших ссылок на сайте со стороны пользователя, когда проект полу-труп, чтобы посмотреть, кто там куда ушёл, и пользуются-ли им вообще.
В этом стиле, может быть случайно, но ссылка оказалась цвета ссылки, и вынесена за кнопку. При таком стиле сразу видно, что это действие, которое к чему-то приведёт, и что там ссылка, а не просто какой-то счётчик.
3lo1i
Обидно, что когда писал комментарий на Хабре к новости о покупке Гитхаба Майкрософт, он так и не прошел модерацию, и про мой сделанный наспех юзерстиль узнали лишь немногие.
Оставлю хоть здесь для истории github.com/3lo1i/WinHub-98
EvilFox
Athari Автор
О, профессиональный подход! У меня всё на коленке в одном голом CSS.
Хм, border-image… Я был не в курсе, что это мощная штука.
P.S. Держите инвайт в качестве моральной компенсации.
khim
Статью какую-нибудь запилите, а то карму выше +4 не сделать…
berezuev
Немного оффтопик:
А есть ли в Сафари какой-то аналог Стайлиша?
Athari Автор
Гуглится вот это поделие.
В Edge я устанавливал UserCSS через UserJS.
caballero
В первое мгновение проскочила мысль что это Майкрософт уже сменила дизайн свежекупленого гитхаба…
man_without_face
А есть аналоги Stylish для JS? Т.е. чтобы свои js исполнялись, когда ходишь по сайту? Что-то подобное extensions у браузеров
myrrec
Посмотрите Greasemonkey.
man_without_face
Спасибо, гляну.
perfect_genius
Не поверите, но на Win10 не перехожу именно потому, что нет такой темы для неё.
Athari Автор
WindowBlinds не пробовали? Вроде, там есть классическая тема.
perfect_genius
Потрясающе! Спасибо, надо пробовать.
dartraiden
В качестве бесплатной альтернативы: Windows classic theme + патч системных файлов, чтобы применялись неподписанные темы.
Athari Автор
Это не классическая тема, это какое-то жалкое её подобие. :) Скорее Windows 10 в цветах Windows 95, чем настоящая классика.
dartraiden
Да, это явно дефолтная высококонтрастная тема с чуток изменёнными цветами.
i360u
BSOD на 404 натянули?
Semenych
Отлично выглядит. Обожаю такой UI/UX. Спасибо!!!
ttmt
До слез )