منذ بعض الوقت ، نشروا على تويتر نكتة تكريمًا لاستحواذ Microsoft على Github - صفحة من الموقع ، أعيد تصميمها بأسلوب 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; إلى العديد من العناصر font: inherit !important; . يمكن الآن إعادة تعريف لون تحديد النص باستخدام ::selection ، ولكن في Firefox لسبب ما ، لا يزال مدعومًا فقط بالبادئة.
::selection { color: var(--color-highlight-text) !important; background: var(--color-highlight) !important; }
وبما أن الخط الرئيسي كان قابلاً للقراءة ، فقد قررت ترك الخط القياسي للرمز وحده وعدم تغييره إلى "Courier New".
الحجم
المشكلة التالية هي رسم الحجم. لا يزال من الممكن أن تكون حدود 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);
هذا العدد من الظلال مطلوب بحيث لا يوجد على جانب واحد "شرائح" بكسل واحد (إذا انتقل أحد الظلين لأعلى والآخر لأسفل لأسفل ، فسيكون هناك بكسل واحد غير مطلي في أعلى اليمين وأسفل اليسار).
نفعل الشيء نفسه مع الأزرار:
.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; }
تابكونترول
يتم تقريب أذني التبويب. لحسن الحظ ، يمكن للمتصفحات رسم زوايا دائرية ، ويمكنك تحديد زاوية مستديرة لكل زاوية.
.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; }
جروب بوكس
يتم رسم الحدود حول مجموعات العناصر بمسافة بادئة. يبدو أنه يمكنك استخدام جميع أنواع 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 . لن تصدق ذلك: البرنامج لا يزال على قيد الحياة ، لا يزال صريحًا frivara ولا يزال يتطور. لذلك نأخذ توزيع Windows 95 ونذهب عبر جميع الثنائيات ، ونختار الرموز الجميلة ...
الآن ، بعد عدة ساعات ، حان الوقت لوضع الرموز في CSS. للقيام بذلك ، قم باستخراج الرموز الفردية من ICO إلى PNG (استخدمت المكون الإضافي Imagine لـ Total Commander ، ولكن أي برنامج يفهم التنسيق سيفعله) ، قم بالتحسين حتى آخر بت (استخدم TinyPNG.com ) وقم بالترميز في شكل URI للبيانات في CSS (خدمة Base64 -صورة.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=='); : صورة / بابوا نيو غينيا، 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; }
اللمسات الأخيرة
يحتوي الموقع على عدد ضخم من الأنماط ، لذلك عليك أن تذهب إلى كل مكان وأن تصمم كل شيء. لكل من "الأزرار" و "مربعات القوائم" فئات مختلفة تمامًا. هناك أيضًا الكثير من الأشياء الصغيرة ، مثل عدادات الدوائر ، والتي يمكن تحويلها منطقيًا إلى نص مكشوف ، كما كانت تفعل في نظام التشغيل Windows 95:
.Counter { background: inherit !important; font: inherit !important; color: inherit !important; padding: 0 !important; } .Counter::before { content: "("; } .Counter::after { content: ")"; }
قبعة
نظرًا لأننا أشخاص عصريون ، فإننا سنصدر رأسًا "قياسيًا" لـ UserCSS ، والذي يدعمه Stylus:
الآن ، إذا قمت بفتح مثل هذا الملف في متصفح ، فسيعرض التمديد تطبيق النمط وسيتبع التحديثات. وليس هناك حاجة إلى UserStyles.org مشكوك فيه.
انتهى!
حسنًا ، أكثر أو أقل. من المرجح أن يكون النمط في مرحلة إثبات المفهوم / مرحلة ألفا ، لأن العديد من الصفحات لم يتم إعادة تصميمها بالكامل. ولكن تم البدء!
إذا كانت لديك ملحقات لأنماط المستخدم ، فإليك روابط مباشرة للتثبيت:
PS Beware ، تم حذف Stylish مؤخرًا من قائمة ملحقات Firefox و Chrome للتجسس. أنصحك بالتبديل إلى ملحق Stylus الحديث المفتوح المصدر ، إذا لم تكن قد قمت بذلك بالفعل.