athari / cssgithubwindows

(UserStyle) GitHub Windows Edition [MIT]

GitHub Windows Edition: User style transforming GitHub into Windows 9x

• GitHub repository

CssGitHubWindows is a user style which transforms GitHub's pages into a GUI resembling Windows 9x. All modern browsers should be supported.

NOTE: the style is in alpha development stage. Only some parts of the website have been fully transformed.

Screenshots

Features

• Almost pixel-perfect reproduction of buttons, tabs, separators, groups, edit boxes, list boxes, tooltips, windows.
• Focus rectangles, text selection styles and other elements adjusted where possible.
• Some icons changed into icons from Windows 9x.
• Some UI has been transformed, for example repository stats are displayed as a shell list box and various group boxes have been titled.

Install

If you're using Firefox or Chrome, you can use Stylus extension to apply the style. Stylus is free, open-source and the most feature-full extension.

Stylish is an older alternative which is no longer available, but it has been more popular. If you still have it installed, you can apply the user style using it, however you're strongly advised to migrate to Stylus as Stylish has been removed from browser extension stores for violating user privacy.

If you're using Edge, you can use TamperMonkey to install the user style as a user script.

If your browser is neither of the browsers mentioned above, please refer to online guides, it gets more complicated.

Click on the extension title to see detailed instructions.

A. Firefox or Chrome: Stylus

1. Add Stylus extension to your browser:

   • Stylus for Firefox
   • Stylus for Chrome

2. Add user style:

   • Open the .user.css file.
   • Click the "Install Style" button in the opened window.

B. Firefox or Chrome: Stylish

CAUTION: Migrating to Stylus is strongly advised.

1. Add Stylish extension to your browser:

   • Stylish for Firefox (no longer available)
   • Stylish for Chrome (no longer available)

2. Add user style:

   • Visit the style page on UserStyles.org.
   • Click the "Install with Stylish" button.

C. Edge: TamperMonkey

1. Add TamperMonkey extension to your browser:

   • TamperMonkey for Edge

2. Add user style:

   • Open the .user.js file from the style page on UserStyles.org.
   • Click the "Install" button.

Known issues

• Default margins of some controls like buttons has been changed. If GitHub uses pixel sizes for buttons, they may be cut off by a few pixels.
• Due to tooltips being children of controls, they change full control size, so focus borders may be displayed incorrectly.

License

Licensed under the MIT License.

Copyright (c) 2018 Alexander Prokhorov.

Links

• Tools:

  • Resource Hacker — tool for extracting icons from executable files, including Windows 95 system files
  • PNG optimizer — online tool for optimizing PNG files
  • Base64 encoder — online tool for embedding images in CSS as data URIs

• Browser extensions:

  • Stylus for Firefox — extension for applying user styles for Firefox
  • Stylus for Chrome — extension for applying user styles for Chrome
  • TamperMonkey for Edge — extension for applying user scripts for Edge, which can be used to apply user styles too
  • Stylish for Firefox — old extension for applying user styles for Firefox
  • Stylish for Chrome — old extension for applying user styles for Chrome

• Related:

  • Source of inspiration — post on Twitter
  • Alternative style — style is simpler, but has retro aesthetic to it
  • Another alternative style — closer to classic Windows theme than the previous one, but less complete

cssgithubwindows's Issues

Hovering over an issue / PR makes the text white

I can't see what I'm hovering over!

Awesome project! Definitely using this as a daily driver.

Remove Stylish Backlink

Hey there,

As you might probably have seen, Stylish has been removed from Chrome and Mozilla extensions market due to private data exploitation. It would be both logical and of good tone to suppress the backlinks to it you provide in the README file.

Thank you very much in advance !
And grat's on the job

Several overlappings in the profile.

Firefox on Windows 10:

• Profile -> "Edit bio": This button is smaller than the container.
  
  Fix: Remove "overflow:hidden" from .user-profile-bio.
• Profile -> contribution years: The list wrapper partially overlaps the rest of the elements.
  
  Suggestion for a fix: Make the background grey as well and only give the ul a white background?

I'll be home later, I can't really contribute PRs from here. Just in case you'll ask me. ;-)

White stripe

Hello, here is the white stripe before referencing another PR (RPCS3/rpcs3#4876).

Is it a bug?

White header in issues and PRs

Hidden / show in wrong place pop-up history version edit comment / post.

Button "deleted" should be show next to date / time - no on line separating editions.

Change private repos icon

This stylesheet is awesome! Thank you so much.

One small issue that I've noticed is that the private repo icon is not replaced:

Update to Windows 2000 theme

Let's be reasonable.

It has softer bevels and a horizontal gradient in title bars.

Border breaks

There are border breaks (https://github.com/RPCS3/rpcs3/pull/4973/files), they look allogenic.

Add Clippy

Why

To help users navigate Github's complex interface.

What

Clippy assistant

Inviting people does not display correctly

So, I used this theme and tried to invite someone to my organisation but it seems like it appears like this:

Obviously, none of the buttons work and I can't seem to be able to invite someone so I had to disable this style. Any ideas on why this is happening? Could you fix it?

PR/files changed issue

I made a snippet that repairs it. It's not pretty, but it gets the job done. You could use it as a reference:

  .pr-toolbar.js-sticky {
    background: var(--color-button-face) !important;
  }
  .pr-toolbar.js-sticky:not(.is-stuck) {
    margin: -20px 0 0;
    padding: 0;
  }
  .pr-toolbar.js-sticky .diffbar {
    background: var(--color-button-face) !important;
  }
  .pr-toolbar.is-stuck + .pr-toolbar-shadow {
    border-bottom: solid 1px transparent !important;
    border-bottom-color: var(--button-3d-border-color) !important;
    border-top-color: var(--color-button-shadow) !important;
    height: 0;
  }

Buggy header in pull request

Diff header covers tab titles in some pages of pull request info

pleeeeeeeease fix for new gh design

Tab in "Repositories"

Suggestion: Make file names black

As Windows 95 (before C) didn't have "IE integration" for its Explorer just yet, this CSS could probably make file links have black text instead of blue text.

Remove Stylish support

With the recent events where both Chrome and Firefox pulled Stylish from the respective appstores for good reason (https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/), perhaps it would be reasonable to not promote Stylish until such a time as they've proved to have better practices in place?

JS ecosystem soluton suggestion from chat

• Merge everything into one big CSS file while preserving header comments (.user.css header)
• Transform image files into data URIs inside CSS variables
• Include some files (or parts of files) inside specifically formatted .user.css comments which consist of instructions which can contain CSS parts inside JSON or something weirder - вообще не понял, что тут хотят), ну допустим sson
• Transform RegEdit .reg file with binary data into several sets of CSS variables containing RGB data
• Produce optimized image files for border-image properties from that RGB data and put them into Data URIs too - см. пп.2
• Having some way to deal with uploading to userstyles.org and updating its style settings would be nice. - любой http-client, у них ведь есть API?

Вам по хорошему не нужны комменты, достаточно конкатенации директив userscript в начало скрипта. Сохранять можно всё, что угодно, там есть шаблонная интерполяция: #{"/*.....*/"}

И я решительно не понимаю, о каких таких "билд системах" идёт речь. Зачем они вам нужны? скрипта build.js вам не хватит? Ну хотите, gulp прикрутите, или webpack.