Hacker News new | ask | show | jobs
A CSS framework to recreate Windows 7 GUI (github.com)
216 points by khangnd 1753 days ago
21 comments

Ha! What a delightful little project. Thanks for sharing. I can think of all kinds of fun stuff you could do with this.

Reminds me of that fake windows update prank. We used to put it on people's screen and maximize it if they forgot to lock their pc.

https://fakeupdate.net/

Ha! Best part of these fake updates is when they go beyond 100%! Still remember my colleagues face at 105% asking me "ehhh, what do I do now?"
in about 2003 I messed with some folks at work with a similar trick, made a full screen fake IE that showed an error message - when they started to click anywhere on the chrome the whole thing started to fall apart - buttons falling off of the chrome etc.
Once I took screenshot of colleague's win desktop screen, replaced with current current wallpaper, and hid all the desktop icons and taskbar. He legit got confused why mouse left click isn't working expectedly.
Kids today have it easy. To pull this prank on a highschool teacher (who had me sort out some CAD software, in exchange for skipping boring classes) I had to modify autoexec.bat and recreate a virus message in there, based on something I had seen in the black book of computer viruses.

The poor guy nearly had a heart attack when he turned the pc on and got confronted with it.

I really enjoy the Aero glass effect from Windows 7 and feel unfortunate when Microsoft removed it in Windows 8. I tried to disassemble DWM to find out its implementation but it did not work, since I have no experience in reverse engineering and Win32 developing. This project seems to recreate a pretty good Aero effect and I'm happy with it, even though there are flaws.

Hopefully someone could analysis how Microsoft achieved this effect and port it to a X11 compositor.

These shaders are *.bin resources embedded in dwmcore.dll.

This tool can extract https://www.nirsoft.net/utils/resources_extract.html Then, cmd_decompiler.exe from there https://github.com/bo3b/3Dmigoto can either disassemble or decompile these binaries.

The pixel shaders there include both ps_4_0 code for new GPUs, and ps_2_0 for running on DirectX 9 GPUs. This makes the disassembler slightly more useful than the decompiler, the *.asm will contain both programs.

They first sample from 4 locations of the source texture. The sample locations are computed by vertex shaders somehow, and passed in TEXCOORD1 and TEXCOORD2 input registers. 2D sampler needs 2 floats for UV on input, texture coordinate vectors have up to 4 components on GPUs, so they’re packing 4 2D vectors into two 4D ones, and using xy and zw slices of these vectors. Because they probably using bilinear sampling (these are setup by CPU-running code, I have not looked), these 4 sample instructions are actually reading from 16 texels of the source texture.

Then, they compute the average of the 4 colors.

At this stage, they’re using pre-multiplied alpha.

For the next step of the pixel shader, they compare alpha with zero. If not zero, they convert the color to straight alpha, apply this formula https://entropymine.com/imageworsener/srgbformula/ to convert from sRGB to linear, then convert back to pre-multiplied alpha.

For the last step, they’re applying linear transformation to the color using input values passed in the constant buffer. This part varies a lot for different shaders. Some shaders only using a single scalar constant, and returning (alpha.wwww*result)^2 color. Other shaders are using 4x5 transformation matrix in the constant buffer to transform the final color.

P.S. There’re 282 compiled pixel shaders there, and I only looked at a few of them. It’s very possible some other ones are doing something completely different. I think Microsoft compiled them from just a few source *.hlsl files, with different preprocessor macros. At least that’s how I would do that if I were implementing these effects.

That's pretty helpful. Thank you very much.
I'm beginning to have the feeling Windows 7 is the last Microsoft OS I'll ever feel good about installing.
I've been feeling that way, but I can't tell if it's rational. Windows XP and 7 were the versions of the OS I used the most growing up. Nostalgia? Ever since Windows 8, the OS has felt a lot slower and the UI isn't consistent. I was running something the other day that needed privilege escalation and I had this realization that I would have no idea if a particular UI was cobbled-together-Microsoft-UI or if it was cobbled-together-malware-UI.
I held out on "upgrading" to 10 until support was dropped last year.

7 was a huge step forward, with better performance than Vista and all kinds of QOL improvements (Windows Search, DX11 being some big ones).

10 also has some amazing improvements (automatic driver installs via Windows Update being the first thing that springs to mind[1]), but they've unfortunately let ads and anti-features (Bing, Cortana, App "Suggestions", News & Weather Bar) infiltrate and drag everything down. I cringe every time there's a major feature update, because I know I'll have to either change settings or download a tool to remove all of the bullshit they've just added.

[1]Yes, I know about FTDIgate. That was the exception, not the rule.

I’ve been using Windows 10 Pro since release and honestly none of this stuff has ever been a real issue for me. It’s stolen like 30 mins from my life overall in the last 5 years disabling the stuff that I don’t care for.

On initial install there were some Windows Store apps I didn’t care for (like Candy Crush) I just normally uninstalled and they never came back and no new apps ever installed themselves.

I disabled Cortana and other widgets I didn’t care for using the standard UI once ever and they never tried coming back on their own.

On feature updates it sometimes has a two minute wizard asking questions.

Maybe it’s because I live in South Africa, but I’ve never seen these Windows 10 adverts people keep complaining about. Maybe that little bit of clickable text on the login screen is what people are referring to? But before clicking I wouldn’t say for sure they’re adverts, they seem like very mild click bait. If they are adverts then inexcusable yes, but doesn’t bother me enough to get upset about.

I don’t mind telemetry in principle but it does bother me that like once every 2-4 weeks when it scans or something it’s a huge resource hog when doing so.

Otherwise, I feel Windows 10 is more performant (although does need SSD, which I would have had regardless) than Windows 7 and definitely has a more useful task manager.

Windows 10 really “just works” for me and I find myself spending minuscule to no time configuring it which means that I’m always doing what I want to actually be doing, working or playing games.

I think that clickable text on the login screen is what people are talking about. I'm in NZ and for a brief time they were ads in the fullest sense.

I don't know if MS changed its mind, or if there is no market in NZ for those adds, but now they link through to MS web sites. So sort of ads for MS properties.

But it does fuck me right off. Get FUCKING ADS out of my OS.

I don't think either myself or GP was complaining about time lost due to getting rid of bullshit. It's just rude and ugly, like cookie banners or autoplaying videos.
I had a funny issue with Windows 10 a few years ago.

I tried to start cmd.exe and nothing happened. Tried a bunch of times more. Still nothing...

I was connected to a WiFi network that allowed ping to the entire Internet but not TCP connections. Then I switched to a WiFi network that allowed TCP connections to the Internet and 20+ cmd.exe instances started all at once.

I thought: "Wait, that can't be true", but it was reproducible.

This makes me wonder if launching programs takes longer on a slow internet connection.

I do not know if this still happens as I have only used Windows 10 on a handful of occasions since then.

I’ve had the same happen in macOS, which would slow down to a crawl when my network didn’t work correctly (quietly dropping packets).
(automatic driver installs via Windows Update being the first thing that springs to mind[1])

That's the worst part of W10 for me. I have a tablet that was unusable until I learned about WuMgr because every day it would reinstall a broken touchscreen driver.

Windows 7 had a very professional feel to me that subsequent versions lack. Probably has to do with attempting to create a unified tablet / phone / desktop experience.
I had been using Windows since 3.0:

Windows 2000 was that stable, professional sweet spot for me, even at times NT 4. Zero fluff, relatively consistent experience, and little visible intergenerational technology accretion. The 2000 scheduler felt reasonably predictable and crisp, like how BSD on a workstation did compared to Linux, for the longest time. Unpredictable interface latency is a dealbreaker for me.

I never noticed too much of a stability difference between 2000 and XP, but I really disliked the fluffy chrome overlaid on the XP user shell.

As long as we are talking nostalgia, yes, I do miss some extremely consistent UI paradigms from Windows 3.X days (being able to productively drive the shell with a keyboard only though the ALT key accessors). Interface elements were extremely differentiated visually. (Seeing my father trip up on a high-investment hallmark of a touchscreen phone app, because the native widgets were flat and lacking visual differentiation this week was beyond painful. I do not like the direction of modern interface design is heading.)

It's a sad state of things; current design trends frequently punish users and make people fearful to explore and learn on their own how programs and user interfaces work.

It hits me hardest too when I see older people frustrated by the ever changing design and functionality churn. It prevents them building confidence and feeling empowered. For me much of the current computing experience is the opposite of rewarding curiousity and it's deeply sad, IMHO

I don't want a unified tablet / phone / desktop experience. I want interfaces that are optimised for the device rather than optimised for encouraging vendor lock ins.

Also it wasn't Windows 7 that first attempted that. PDAs back in ~2000 ran Windows CE with a Windows 95 / NT4 era UI. That also wasn't well optimised for smaller screens touch screens, hence the requirement to use a stylus. Then what followed was Windows Mobile 6, which looked more like XP, and 6.5 that had a vista / 7 type home screen but with classical Windows widgets. It wasn't until Metro (Win 8 / Mobile 7) when Microsoft really united the look and feel of Windows across all their platforms again, Xbox included.

Personally for me, XP was the decline of Microsoft's professional shell design. Windows 2000 was when Microsoft peaked. It was free from fluff but still had some minor tweaks of visual flair. XP was ugly, Vista and 7's widgets were poorly optimised for screen estate. And there after everything has taken a massive step backwards in usability.

> That also wasn't well optimised for smaller screens touch screens, hence the requirement to use a stylus

The reason for the stylus wasn’t software. Capacitive touch screens didn’t really existed, at least not in consumer devices.

Apple did that. They haven’t invented that of course, acquired other company https://en.wikipedia.org/wiki/FingerWorks but it was them who brought the tech to mainstream in 2007.

What you've posted is a very common misunderstanding of what happened in the mid 00s but unfortunately not at all accurate on any point you've raised.

Pre-capacitive touch screen technology worked perfectly fine with fingers. People had been using their fingers on kiosks and PDAs with infra red and resistive touch screens (respectively) for years before capacitive touch screen technology hit the market. In fact I personally had several PDAs from ~2000 onwards and would often use my fingers for simple operations (ie when precision wasn't required).

Ironically capacitive screens actually have greater limitations over capacitive screens in terms of general usability, as quoted on Wikipedia:

> Unlike a resistive touchscreen, some capacitive touchscreens cannot be used to detect a finger through electrically insulating material, such as gloves. This disadvantage especially affects usability in consumer electronics, such as touch tablet PCs and capacitive smartphones in cold weather when people may be wearing gloves. It can be overcome with a special capacitive stylus, or a special-application glove with an embroidered patch of conductive thread allowing electrical contact with the user's fingertip.

Also capacitive throws a fit if the surface gets wet, which resistive screens didn't, and resistive screens offer greater precision when used with a stylus.

Capacitive screens look nicer though (greater contrast etc). Which is why they eventually won out.

As for the whole finger-orientated UI thing, well that happened around the same time as capacitive screens hit the market (resistive screens can also be made to support multi-touch by the way) and thus would have happened with or without the invention of capacitive screens.

So no, the reason for the stylus wasn't a limitation of resistive touch screens. It was the UI and that would have changed regardless of the introduction of capacitive screens.

Also can we drop the bullshit that Apple were the inventors of multi-touch UIs. There were 3 companies working on the same technology in parallel: Apple, LG and Google. LG even beat Apple to market and then accused Apple of stealing their idea, much like Apple like to claim others did with the iPhone: https://en.wikipedia.org/wiki/LG_Prada

Suffice to say, the industry was changing and would have changed with or without Apple's involvement. They certainly were a big catalyst but where absolutely were not the only players in the game.

That might be the original motivation, but post-7 Windows UI is anything but unified or consistent. New and legacy UI toolkits are mixed in the system shell itself. There are still parts of the good old Control Panel that haven’t been ported to the new “immersive settings” app. Already in a clean Win 10 installation, you can spot at least 3 different styles of context menu, depending on which part of the desktop you right-click.
Best example for me is in windows 10 professional, the blue screen shows you a sad smiley face.

Someone designed this and thought it was a good idea to have this in a 'professional' distribution of an OS.

I wouldn’t consider a smiley face unprofessional. What makes a smiley face worse, or less “professional”, than a big red X?
Compared with windows 95/NT BSODs the 10 one looks very unprofessional.
I think it’s rational. I started using Windows with… DOS 6. Of all my lifetime Windows installs, probably 70% are 98, 2k and XP. Yet I also agree that Windows 7 was peak Windows UX, probably because it was the final version designed to be used with a keyboard and mouse.
I doubt it's nostalgia. Ive used windows 10 more than I used XP. I'm 28.

XP just felt robust - almost like it was hardware itself.

I would say your problem is you haven’t used XP enough to hate it.
There wasn't much to hate about SP3 Windows XP.

It was a solid OS, limited mostly by lack of mainstream 64-bit version and hard capped at DirectX 9.0, meaning modern games no longer worked. Later on, lack of TRIM support for SSDs.

Basically between SP3 release in 2008 and XP's end of support in 2014, you could have used a very stable OS if you didn't need to play the latest games or run the absolute latest hardware.

SP3 was pretty late in XP's life. Many of us remember the struggle with earlier versions of XP and longing for the good old days of Windows 2000.
Same here. For me, Windows 7 is consistent in design, efficient (in both performance and user experience) and pure.

* Inconsistent design: Starting from Windows 8, Microsoft switched to the Metro design. In Windows 10 Microsoft changed to Fluent design. However, even the Windows components themselves are not fully switched. In Windows 10 today you can find so many legacy designs that had not been removed. Windows 7, however, is pretty consistent from shell to explorer and control panels.

* Inefficient in user experience: Starting from Windows 8, MS started focusing on these so called touch devices, with the trade off of having larger margins, bigger buttons and slower animations, making user feel inefficient getting things done.

* Inefficient in performance: Windows 10 is slow as well, in a 2c 8g VBox VM, Windows 10 boot time is longer than Windows 7 and I have to wait for several seconds to open a UWP program, which is unbearable. Personally that is somehow related to the so called "modern" developing. For that I mean all the UWP / Web stuff. For instance, The Windows 10 start menu uses EdgeHTML inside (just press F7 and Caret Browsing dialog will show up).

* Anti-features: With the Microsoft's focus on "cloud" experience, Windows 10 added so many anti-features that I hate. Even though some are optional, I do not want an OS to contain any "cloud" based features and advertisements. Examples: Microsoft account, Telemetry, Consumer Experience (I mean all the pre-installed bullshit). I run several domains in my home and the first group policy I would apply to client computers is to turn off Telemetry (level 0 security), disable web search, disable spotlight and turn off the consumer experience.

I am not saying that Windows 10 is bad. It is, from a technical point of view, more advanced. However, because of all these bad designs I still think Windows 7 is the last Windows version I would feel satisfied.

> For instance, The Windows 10 start menu uses EdgeHTML inside (just press F7 and Caret Browsing dialog will show up).

This also happens in Calculator, and if you look at its source code [0], you’ll see it uses XAML views. I think Caret Browsing is a UWP feature, not necessarily an EdgeHTML thing.

[0]: https://github.com/microsoft/calculator/tree/master/src/Calc...

I guess Caret Browsing is a EdgeHTML thing and in fact it should not show up in UWP applications. Correct me if I'm wrong.
I feel that if software like Windows could be as responsive as the fashion industry, we'd go through the same kind of cycles that fashion does.

Consumers would adopt a retro look and feel to their apps if they could. Unfortunately, it's all just too disconnected to coordinate your whole wardrobe of apps to fit any one style.

I recall distrusting XP when it was new.
Ditto here. Windows 2000 was fast, functional and stable. When XP was new, ie before SP2, it was literally just a reskinned version of 2000 but with a few patches (some for better game compatibility, some for fast font loading, etc). But for the most part XP was just bloated. It had twice the hardware specification of 2000.

XP did later evolve into something distinct in its own right but it took a few service packs to get there. However by that point I had already switched to Linux.

Personally I never got the appeal of Windows 7's theme either. I guess it's just what one grows up with. I grew up in an era where GUIs were maximized for low resolution displays and Windows 7's theme, much like XP's, wasted so much screen estate in comparison. This is less of an issue these days with high DPI screens. But old preferences die hard.

Because it was shit at launch. The nice stable OS we remember is the XP after its service packs.
>It is built on top of XP.css, which is an extension of 98.CSS.

Just like Windows itself. Even Windows 11, despite the new coat of paint, still has code from -at least- the Windows 3.1 days.

I wonder if that's really the case: is there really any windows 3.1 16-bit code running in Windows 11 ?
I believe Windows 11 will be 64bit only, so I guess that means no more NTVDM and no more win16 support. In that case, there won't be any windows 3.1 16-bit code left over. On the other hand, win32 was designed to be mostly source-code-compatible with win16, and I'm sure you'll find elements that have been given a minimal win32 porting effort, while a "git blame" equivalent would probably trace back to windows 3.1 still.

On the other hand, 32bit Windows 10 is still going strong and there are probably plenty of windows 3.1 (and windows 3.0) applications that would still run there.

In a way, yes... see this article : https://news.ycombinator.com/item?id=27556754
I’m sorry but this is not the 7 GUI. These all look like straight linear gradients with no breakpoints in how harsh they appear in this library.

To the creator I’d suggest using photoshop or Figma to relocate the design elements, then translate the breakpoints to CSS to make the components more realistic.

Great start though!

I think you're overly-critical. The CSS immediately gives the look & feel of using Windows 7. Maybe the gradients are not completely spot-on, but the other 95% of elements are great.
None of the elements are accurate replications of the originals even after accounting for DPI scaling. I love the spirit of the project, but it feels like any other poor replica you’d find anywhere else.

There are spaces between tab button elements, the title bar buttons have excess space and incorrect borders, window buttons are the wrong size and use incorrectly scaled raster icons, the backdrop filter property isn’t applied correctly, the shadows on text boxes are incorrect, the tooltip padding is the wrong value and the wrong box size, buttons have the wrong borders, checkboxes have checks incorrectly applied, the author used raster icons for window buttons but not checkboxes for some reason. I could go on.

It reminds me of those yesteryear rips of future Windows themes on deviantART when those kids replicated the desktops of yet-to-be released versions of Windows but didn’t bother comparing the size or even the right colors of elements.

I'm amazed how one can see it all, yet I do not think most people would care, since they (as well as I am) are all blind to these nuances.
Agree, it still looks stiff and far from the 7 GUI. Would you care to elaborate more on the breakpoints you talk about, or is there any good resource I could take to learn more? Thanks.
I assume that they are talking about easing gradients, which is interpolating the gradient’s color stops using a cubic bézier easing function [1]. It gets rid of the sharp edge you sometimes see in linear gradients. Think of CSS animations and their easing-functions.

There are various Sketch and Figma plugins which let you modify the easing function and generate the CSS for it.

[1] https://css-tricks.com/easing-linear-gradients/

The resulting UI widgets actually feel really accessible and easy to use.

Also I love that it's an extension of XP.css, which is an extension of 98.css.

Windows 2000 was the peak of practical and usable GUI design. It all went downhill from there.
I too see Windows 2000 as Microsoft's peak for usability, at least for the GUI controls it supported. We seem to be in the minority though. You hear far more people praise XP or 7 as the best.

I recently went back and installed 2000 to make sure I wasn't forgetting something bad for usability in the UI about 2000 that others remember. Nope. I then installed XP to be sure with today's eyes it wasn't really better than 2000 and I just didn't realize it. Nope.

I didn't continue the experiment after that. I very clearly remember 7, since I still have to use it occasionally.

I see 2000s UI as being from a time when (for the most part) they weren't trying to impress you with the gloss on the UI. They were just trying to make it clear and usable. More modern iterations of Windows has some advancements in interactions but not much in the GUI controls themselves.

> I too see Windows 2000 as Microsoft's peak for usability, at least for the GUI controls it supported. We seem to be in the minority though. You hear far more people praise XP or 7 as the best.

Me three! Windows 2000 is the best not just for usability, but still looks the best. No, all those fluff in XP and 7 don't make them look good, it make them look busy and dirty.

We may be in the minority, but only because relatively few people had a chance to use 2000 before it was replaced by XP one short year later. In contrast, people remember XP and 7 fondly because they kept using them for years and years since the subsequent releases, Vista and 8, were universally hated and panned.

It looks like Microsoft used to pay more attention to GUI design and usability back in Windows 2000 days, which is the peak GUI for me too. Windows 2000 design is very similar to Windows 95, but changes from 95 to 2000 I see as improvements.

Starting with XP more attention was paid to aesthetics and less to other qualities. E. g. XP controls consumed more screen space, which was a visible regression at times when 15-inch displays were still common.

Up until Windows 7 there was a classic desktop theme which was quite close to 2000 and I used it. Unfortunately Windows 10 has no such option. I use mostly FreeBSD and MacOS nowadays, but still have an old notebook with Windows 7 which I occasionally use. If I disliked Windows 10 less I would have upgraded it to Windows 10.

It's a shame the glass effect isn't able to properly blur the background like native Windows glass does, the legibility is very bad without the blur to eliminate high-frequency detail in the background.
The library uses the backdrop-filter property to blur the background – in firefox that’s currently under a feature flag.

https://bugzilla.mozilla.org/show_bug.cgi?id=1578503

There are some details from the Win7 UI that is still not in the CSS, for example the gloss which appears when the mouse pointer hovers over the window action buttons.

Next, the dropdown menu isn't like Win7, it follows your browser/operating system's theme. For example, on Firefox-based browsers running on GNU/Linux it follows your GTK theme, rather than the Win7 theme. On standard Chromium-based browsers, it shows it as dark blue rather than glassy light blue of Win7.

Next, the scrollbar doesn't show as the Win7 one on Firefox-based browsers, but does on Chromium ones for some reason.

Firefox has put some restrictions on scrollbar styling after websites began abusing it for their branding at the cost of accessibility. Other browsers did something similar. I'm not sure if you can even customise the dropdown menu if it's styled by your OS by default, either.

You're right about the missing highlights. Those feel like something not too difficult to implement with a CSS animation and some extra colored borders, so hopefully someone will write a PR for that eventually.

I love the way they implemented tabs and trees. No JS, just pure CSS which by now grew ridiculously powerful.
What I love about these old designs is how obvious everything is. You just can't miss the button or the tabs.

Now after all this skeuomorphic design revolution it's so hard to tell, is it a button, text, link etc. It probably looks better but it is at the cost of extra thinking for the user.

Anyone have an example of this running somewhere?
This project is extension of 98.css. In the thread where Obsidian released there mobile version they said Obsidian could be made to look like anything because it's Electron based. So I made windows 98 Theme (or may be it's windows 2000) for Obsidian. It's not perfect yet but it's close enough https://github.com/SMUsamaShah/Obsidian-Win98-Edition
Previous discussion:

8 months ago https://news.ycombinator.com/item?id=25601650

This is going to be used by some scammer to make a more convincing webpage to trick someone's grandmother into thinking her web browser has a virus or something.
That can be - and indeed has been - done with much, much less effort than using a complete stylesheet. A static image will be enough to fool most people.
My God, I am thoroughly impressed. This is almost 1:1.
Cheers OP. Just what I needed to create my popup advert for my fake registry cleaner software.

Just kidding, of course - nice work :)

It's amazing it does much better job matching actual native style than WPF and Swing ever did.
Should be called vista.css.
Why?
The design system used in Windows 7 first appeared in Windows Vista.
Interesting idea.