Beberapa waktu lalu, di Twitter, mereka memposting sebuah lelucon untuk menghormati Microsoft mengakuisisi Github - satu halaman situs, didesain ulang dengan gaya Windows 98 . Saya memutuskan bahwa lelucon itu terlalu bagus untuk tetap menjadi lelucon.
Warna
Tema Windows "klasik" sebenarnya memiliki beberapa iterasi. Versi Windows pertama (hingga 9x) dibedakan oleh jendela putih, batas tombol agak bulat dan volume semu yang sangat kuat. Di Windows 95, windows berubah abu-abu, semuanya menjadi lebih persegi, dan garis-garis untuk membuat volume semu berkurang menjadi satu piksel. Gradien ditambahkan pada Windows 98, tetapi secara umum gayanya kurang lebih sama. Windows 2000 memiliki warna agak kekuningan.
Saya memilih Windows 95, dan agar warnanya dapat diperbarui, saya mendesainnya sebagai variabel CSS (baik, atau "properti khusus"):
--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);
Font
Itu tidak mungkin untuk mendapatkan rendering font pixel dari browser, jadi saya harus puas dengan "MS Sans Serif":
body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; }
Ukuran font hampir sama di mana-mana pada antarmuka Windows, jadi font: inherit !important; harus ditambahkan pada banyak elemen font: inherit !important; . Warna pemilihan teks sekarang dapat didefinisikan ulang menggunakan ::selection , tetapi di Firefox untuk beberapa alasan masih hanya didukung dengan awalan.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
Dan karena font utama dapat dibaca, saya memutuskan untuk meninggalkan font standar untuk kode saja dan tidak mengubahnya menjadi "Courier New".
Volume
Masalah selanjutnya adalah menggambar volume. Batas CSS masih bisa hanya dalam satu lapisan, jadi box-shadow harus digunakan untuk garis ganda.
ListBox, TextBox, TreeView ...
Misalnya, cat "kotak daun" dan elemen banjir putih lainnya:
.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; }
dimana
--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);
Jumlah bayangan seperti itu diperlukan sehingga di satu sisi tidak ada "fillet" piksel tunggal (jika satu bayangan naik ke kiri dan yang lainnya ke bawah, maka akan ada satu piksel yang tidak dicat di kanan atas dan kiri bawah).
Kami melakukan hal yang sama dengan tombol:
.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; }
dimana
--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);
Benar, tombol memiliki lebih banyak elemen, ketika ditekan, gaya perbatasan berubah, dan ada juga persegi panjang titik-titik fokus. Kami menggambar fokus dengan bantuan outline - properti CSS ketiga untuk "batas".
.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; }
Kontrol tab
Telinga tab bulat. Untungnya, browser dapat menggambar sudut bulat, dan Anda dapat menentukan sudut bulat untuk setiap sudut.
.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; }
Ada hal-hal kecil yang tersisa: teks abu-abu untuk tab yang dinonaktifkan dan tidak ada batas untuk yang sekarang (ketiadaan batasan diwujudkan dengan menurunkan lubang di bawah isi tab menggunakan indentasi negatif):
.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
Perbatasan di sekitar kelompok elemen digambar dengan indentasi. Tampaknya Anda dapat menggunakan semua jenis groove dan ridge , tetapi tidak, tidak mungkin untuk menetapkan warna tertentu untuk mereka, dan rendering di browser yang berbeda sangat berbeda. Kami kembali ke metode yang sudah terbukti:
.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; }
Namun, sekelompok elemen tanpa judul tidak lagi terlihat seperti grup. Mari tambahkan header di setidaknya beberapa tempat.
.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"; }
Lainnya
Ada juga windows, tooltips, dan banyak lagi, tetapi mereka biasa-biasa saja.
Ikon
Kami akan mengekstrak ikon dengan cara lama dan kuno yang mungkin akan diingat semua orang tua - menggunakan Resource Hacker . Anda tidak akan percaya: program ini masih hidup, masih frivara jujur dan masih berkembang. Jadi kami mengambil distribusi Windows 95 dan memeriksa semua binari, memilih ikon yang indah ...
Sekarang, berjam-jam kemudian, saatnya untuk meletakkan ikon di CSS. Untuk melakukan ini, ekstrak masing-masing ikon dari ICO ke PNG (Saya menggunakan Imagine plug-in untuk Total Commander, tetapi setiap program yang memahami format akan melakukannya), mengoptimalkan ke bit terakhir (saya menggunakan TinyPNG.com ) dan menyandikan dalam bentuk URI Data di CSS (layanan Base64) -Image.de ternyata cukup nyaman). Ternyata sesuatu seperti ini:
--image-folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD//5nMzGYAAAD/zJmZmQD//8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg=='); --image-folder-documents: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEUAAACZmQD//5n/zJn///8zMwDn59aGhobMzGZVVVUAM5mAgADx8fH/+/Dq6upNTU2p3qmcAAAAAXRSTlMAQObYZgAAAGlJREFUCNdjAIECBghgfwmmGAVLrn0AMSTaXY68BDNKXNYem72BgUE8LSsrLXMDgyAYpH1gEHEBAguxTAYRJSUlZWWxAAZGJWUlI+NGIAMkoGwIZAAFjIyADAZhZYgIVD+QwRoKAgxwAADcLBkG7Oto1QAAAABJRU5ErkJggg=='); : image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD // 5nMzGYAAAD / zJmZmQD // 8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg =='); --image-folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD//5nMzGYAAAD/zJmZmQD//8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg=='); --image-folder-documents: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEUAAACZmQD//5n/zJn///8zMwDn59aGhobMzGZVVVUAM5mAgADx8fH/+/Dq6upNTU2p3qmcAAAAAXRSTlMAQObYZgAAAGlJREFUCNdjAIECBghgfwmmGAVLrn0AMSTaXY68BDNKXNYem72BgUE8LSsrLXMDgyAYpH1gEHEBAguxTAYRJSUlZWWxAAZGJWUlI+NGIAMkoGwIZAAFjIyADAZhZYgIVD+QwRoKAgxwAADcLBkG7Oto1QAAAABJRU5ErkJggg==');
.octicon-file-directory, .octicon-file { fill: transparent !important; width: 16px !important; height: 16px !important; } .octicon-file-directory { background: var(--image-folder) !important; } .octicon-file { background: var(--image-file-text) !important; }
Sentuhan akhir
Situs ini memiliki banyak gaya, jadi Anda harus pergi ke mana-mana dan menata segalanya. Baik "tombol" dan "kotak daftar" memiliki kelas yang sangat berbeda. Ada juga banyak hal kecil, seperti penghitung lingkaran, yang secara logis dapat dikonversi menjadi teks kosong, seperti yang akan mereka lakukan di Windows 95:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
Topi
Karena kami adalah orang modern, kami akan mengeluarkan tajuk "standar" untuk UserCSS, yang didukung oleh Stylus:
Sekarang, jika Anda membuka file seperti itu di browser, ekstensi akan menawarkan untuk menerapkan gaya dan akan mengikuti pembaruan. Dan tidak diperlukan UserStyles.org yang meragukan.
Selesai!
Ya kurang lebih. Gaya ini lebih cenderung pada tahap proof-of-concept / alpha, karena banyak halaman tidak sepenuhnya didesain ulang. Tapi awal telah dibuat!
Jika Anda memiliki ekstensi untuk gaya pengguna, berikut ini tautan langsung ke instalasi:
PS Hati-hati, Stylish baru-baru ini dihapus dari daftar ekstensi Firefox dan Chrome untuk spionase. Saya menyarankan Anda untuk beralih ke ekstensi open-source modern Stylus, jika Anda belum melakukannya.