कुछ समय पहले, ट्विटर पर, उन्होंने माइक्रोसॉफ्ट के सम्मान में एक चुटकुला पोस्ट किया था , जिसमें साइट के एक पृष्ठ - जीथब को विंडोज 98 की शैली में पुनः डिज़ाइन किया गया था । मैंने तय किया कि मजाक बनने के लिए मजाक बहुत अच्छा था।

रंग

"क्लासिक" विंडोज विषय वास्तव में कई पुनरावृत्तियों है। विंडोज के पहले संस्करण (9x तक) सफेद खिड़कियों, थोड़े गोल बटन सीमाओं और एक बहुत ही मजबूत छद्म मात्रा द्वारा प्रतिष्ठित थे। विंडोज 95 में, खिड़कियां ग्रे हो गईं, सब कुछ अधिक चौकोर हो गया, और छद्म मात्रा बनाने की लाइनें एक पिक्सेल तक कम हो गईं। विंडोज 98 में ग्रेड जोड़े गए, लेकिन सामान्य तौर पर शैली कमोबेश वैसी ही बनी रही। विंडोज 2000 में थोड़ा पीला रंग है।

मैं विंडोज 95 पर बस गया, और ताकि रंगों को बाद में अपडेट किया जा सके, मैंने उन्हें सीएसएस चर (अच्छी तरह से, या "कस्टम गुण) के रूप में डिजाइन किया:

--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); 

फोंट

ब्राउज़र से पिक्सेल फोंट का प्रतिपादन करना संभव नहीं था, इसलिए मुझे "एमएस सेन्स सेरिफ़" से संतोष करना पड़ा।

  body { background: var(--color-button-face) !important; font: 12px/1.2 MS Sans Serif, MS Reference Sans Serif !important; } 

विंडोज इंटरफेस पर हर जगह फ़ॉन्ट का आकार लगभग समान था, इसलिए कई तत्वों पर font: inherit !important; जोड़ा जाना चाहिए font: inherit !important; । पाठ चयन रंग अब ::selection का उपयोग करके पुन ::selection परिभाषित किया जा सकता है, लेकिन फ़ायरफ़ॉक्स में किसी कारण से यह अभी भी केवल एक उपसर्ग के साथ समर्थित है।

  ::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; } 

और चूंकि मुख्य फ़ॉन्ट पठनीय था, इसलिए मैंने अकेले कोड के लिए मानक फ़ॉन्ट छोड़ने और इसे "कूरियर न्यू" में बदलने का फैसला किया।

आयतन

अगली समस्या आरेखण मात्रा है। सीएसएस बॉर्डर्स अभी भी केवल एक ही परत में हो सकते हैं, इसलिए box-shadow का उपयोग डबल आउटलाइन के लिए किया जाना था।

सूची बॉक्स, टेक्स्टबॉक्स, ट्री व्यू ...

उदाहरण के लिए, "पत्ती बक्से" और अन्य सफेद बाढ़ वाले तत्वों को पेंट करें:

  .file-wrap, .blob-wrapper, #readme, .overall-summary, .issues-listing > div[class^=border] { background: var(--color-window) !important; border: solid 1px black !important; border-color: var(--box-3d-border-color) !important; border-radius: 0 !important; box-shadow: var(--box-3d-box-shadow) !important; } 

जहाँ

  --group-3d-border-color: var(--color-button-highlight) var(--color-button-shadow) var(--color-button-shadow) var(--color-button-highlight); --box-3d-box-shadow: 0 -1px 0 0 var(--color-button-shadow), -1px 0 0 0 var(--color-button-shadow), -1px -1px 0 0 var(--color-button-shadow), -1px 1px 0 0 var(--color-button-highlight), 1px 0 0 0 var(--color-button-highlight), 1px 1px 0 0 var(--color-button-highlight); 

इतनी संख्या में छाया की आवश्यकता होती है ताकि एक तरफ एकल-पिक्सेल "फ़िलालेट्स" न हों (यदि एक छाया ऊपर जाती है और दूसरी दाईं ओर, तो ऊपर दाईं ओर और नीचे बाईं ओर एक अप्रकाशित पिक्सेल होगा)।

बटन

हम बटन के साथ भी ऐसा ही करते हैं:

  .btn-link, .btn, .btn:hover, .subnav-item, .pagination > :not(.gap), #user-links .dropdown, .js-menu-close { font: inherit !important; font-weight: normal !important; background: var(--color-button-face) !important; color: var(--color-button-text) !important; border: solid 1px transparent !important; border-color: var(--button-3d-border-color-exact) !important; border-radius: 0 !important; box-shadow: var(--button-3d-box-shadow-exact) !important; margin: 1px 2px !important; } 

जहाँ

  --button-3d-border-color-exact: var(--color-button-face) var(--color-button-shadow) var(--color-button-shadow) var(--color-button-face); --button-3d-box-shadow-exact: 0 -1px 0 0 var(--color-button-highlight), -1px 0 0 0 var(--color-button-highlight), -1px -1px 0 0 var(--color-button-highlight), -1px 1px 0 0 var(--color-button-shadow-dark), 1px 0 0 0 var(--color-button-shadow-dark), 1px 1px 0 0 var(--color-button-shadow-dark); सटीक:  --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); सटीक:  --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 की मदद से ध्यान आकर्षित करते हैं।

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

अन्य

खिड़कियां, टूलटिप्स और भी बहुत कुछ हैं, लेकिन वे अचूक हैं।

माउस

हम पुराने, पुराने तरीके से आइकन निकालेंगे जो सभी पुराने लोगों को शायद याद होंगे - रिसोर्स हैकर का उपयोग करना। आपने यह नहीं माना: यह कार्यक्रम अभी भी जीवित है, अभी भी ईमानदार फ़ेवर है और अभी भी विकसित हो रहा है। तो हम विंडोज 95 वितरण लेते हैं और सभी बायनेरिज़ के माध्यम से जाते हैं, सुंदर आइकन चुनते हैं ...

अब, कई घंटे बाद, सीएसएस में आइकन डालने का समय आ गया है। ऐसा करने के लिए, ICO से PNG तक व्यक्तिगत आइकनों को निकालें (मैंने टोटल कमांडर के लिए इमेजिन प्लगइन का उपयोग किया, लेकिन कोई भी प्रोग्राम जो प्रारूप को समझेगा), हम इसे अंतिम बिट (मैंने TinyPNG.com का उपयोग किया) को अनुकूलित करते हैं और इसे CSS ( बेस 64 सर्विस ) में डेटा यूआरआई के रूप में एनकोड करते हैं। -Image.de काफी सुविधाजनक निकला)। यह कुछ इस तरह से निकलता है:

  --image-folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAD//5nMzGYAAAD/zJmZmQD//8zx8fEIMK00AAAAAXRSTlMAQObYZgAAAE5JREFUCNdjQIDQ0GAwzVqWKGoAYgQpKSmFhoYyMISlgYCQAUOYIAg4QRgiIjARR4iICFzEESIiAgQghiMQuAAZQUpgYMDAbAwGBgwYAABoaBIom9Nm3gAAAABJRU5ErkJggg=='); --image-folder-documents: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEUAAACZmQD//5n/zJn///8zMwDn59aGhobMzGZVVVUAM5mAgADx8fH/+/Dq6upNTU2p3qmcAAAAAXRSTlMAQObYZgAAAGlJREFUCNdjAIECBghgfwmmGAVLrn0AMSTaXY68BDNKXNYem72BgUE8LSsrLXMDgyAYpH1gEHEBAguxTAYRJSUlZWWxAAZGJWUlI+NGIAMkoGwIZAAFjIyADAZhZYgIVD+QwRoKAgxwAADcLBkG7Oto1QAAAABJRU5ErkJggg=='); : छवि / PNG; बेस 64, 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; } 

छूना खत्म

साइट में शैलियों की एक बड़ी संख्या है, इसलिए आपको हर जगह जाना होगा और सब कुछ स्टाइल करना होगा। "बटन" और "लिस्टबॉक्स" दोनों में काफी भिन्न वर्ग हैं। सर्कल काउंटरों की तरह बहुत सी छोटी चीजें भी हैं, जिन्हें तार्किक रूप से नंगे पाठ में परिवर्तित किया जा सकता है, जैसा कि उन्होंने विंडोज 32 के साथ किया होगा:

  .Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; } 

टोपी

चूंकि हम आधुनिक लोग हैं, इसलिए हम UserCSS के लिए "मानकीकृत" शीर्षलेख जारी करेंगे, जो स्टाइलस द्वारा समर्थित है:

 /* ==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 की जरूरत नहीं है।

हो गया!

खैर, कम या ज्यादा। प्रूफ-ऑफ-कॉन्सेप्ट / अल्फा स्टेज में स्टाइल की संभावना अधिक होती है, क्योंकि कई पेज पूरी तरह से रीडिज़ाइन नहीं किए जाते हैं। लेकिन एक शुरुआत की गई है!

• GitHub रिपॉजिटरी - स्रोत, निर्देश और अधिक

यदि आपके पास उपयोगकर्ता शैलियों के लिए एक्सटेंशन हैं, तो स्थापना के लिए सीधे लिंक हैं:

• स्टाइलस के साथ स्थापित करें
• स्टाइलिश के साथ स्थापित करें

पीएस खबरदार, स्टाइलिश को हाल ही में जासूसी के लिए फ़ायरफ़ॉक्स और क्रोम एक्सटेंशन की सूची से हटा दिया गया है। मैं आपको आधुनिक ओपन-सोर्स एक्सटेंशन स्टाइलस पर स्विच करने की सलाह देता हूं, अगर आपने पहले से ऐसा नहीं किया है।