botoxparty / xp.css Goto Github PK

I was thinking about a feature where you can add a img tag in a div with a class of title-bar and it being styled to look like a title bar icon, like there is in Windows XP. The way I was thinking this could be used was in a frameless Electron window. Please give some though to it.

After the window is maximized the restore button is usually shown (at least on windows xp).

The button looks like this:

Hi! It's good to see progress bars added in 0.2.6. However when I set a width for them, there is a possibility the last progress square does not show in full.

References:

• jdan/98.css#96 (comment)
• PlanMan1717/98.css#1

Hello,

best to show a pic (this is with 90% zoom on Vivaldi (Chrome derivate)):

Loot at :

It should be "XP.css" instead of "98.css" .

I think the font on window elements should be the same as on buttons

Seen on the docs page - don't know if it's specific to that or more of a global concern.

Observed behavior:

When the page is wide enough to scroll horizontally - for instance, opening the "Show Code" on the Tabs view - some XP UI elements draw over the TreeView located in the aside.

Expected behavior:

Either:

• Easiest: UI elements should draw underneath the TreeView in a fixed-position aside (aside z-indexes above the rest)
• Most proper: Aside should be free to scroll left and right, but remain fixed vertically.

This is also observed upstream, in 98.css - for example. A report has been made there as well.

Example below:

See attached screenshots

    <center>
      <div class="window" style="width: 600px">
        <div class="title-bar">
          <div class="title-bar-text">Explorer</div>
          <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
          </div>
        </div>
        <div class="window-body">
          <menu role="tablist">
            <button aria-selected="true" aria-controls="about">About</button>
            <button aria-controls="favorites">Favorites</button>
          </menu>
          <article role="tabpanel" id="about">
            <h2>Hi 👋</h2>
            <p>I'm AcaiBerii. I program mostly in c# but I do JavaScript and Java too.</p>
          </article>
          <article role="tabpanel" hidden id="favorites">
            <p><strong>Music genres</strong> EDM, Lo-fi</p>
            <p><strong>Languages</strong> C#, Java, JavaScript, Nemerle, Python</p>
            <p><strong>Editors</strong> Visual Studio, VSCode, Intellij Idea, PyCharm</p>
          </article>
        </div>
      </div>
    </center>

When viewing this, it won't switch tabs or tabpanels.
This also won't let you interact with the tabs at all.

It looks like this on Windows 98:

But I'm not sure if the "Up-down control" part could be implemented in pure CSS. Please at least make the "Text box" part look similar to input[type="text"].

Window title bars seem thicker than Windows XP's defaults, and the window controls are not sized larger to compensate.

I'm just making an explorer.exe liked thing, and need content of window-body to scroll (rather than overflow).
So I tried this CSS:

.window-body {
    overflow: auto;
    height: calc(100% - 44px);  /* (inherit-height 100%) - (title-bar 21px) - (title-bar-border 1px) - (title-bar-padding 2 x 3px) - (window-body-margin 2 x 8px) */
}

Then it works as expected :)

Just wanted to let you know. 🙃

The premise is rather simple - .msstyles files are Windows PE non-executable binary files (it's the same format as a .exe) containing embedded graphical resources. These can be browsed using a resource editor like Resource Hacker, and I believe there are dedicated theme editors for this on Windows.

The format can easily be understood - this JS provides a clean example of how to parse a PE file.

Windows XP type .msstyles present their graphical resources as RT_BITMAP type with basic, fixed metadata, whereas Windows Vista/7 Aero.msstyles contain PNGs as well, and extendible, embedded metadata.

Enabling this would allow users to easily swap the base XP theme with Olive/Silver, solving #4 - and, also, other MS themes such as Royale/Energy Blue, Royale Noir, Royale Embedded and Royale Zune.

There should be two options handled by the same js import library, "static" and "dynamic". Static is preferred to implement first.

• Static would run at build-time, to convert all .msstyles themes in the theme directory, extracting the bitmap resources to compatible .png files, and importing the theme/color data to a theme CSS for xp.css to use.
• Dynamic would be included at runtime, in the browser, and would load a given msstyles file and populate the active theme CSS and bitmap assets internally.

Visible on one of my websites here, if you click into the parent tabs, it closes all of the child tabs. (Click Artists, then back to CS:GO to see what I mean precisely). I want the last selected option to be visible as the new parent option is selected. Any assistance or ideas on how to do this would be much appreciated!

I guess the title explains itself. Basically adding the win xp start bar, being able to add internal divs or something to represent open windows, etc.

Also, i found this PDF containing some visual guidelines used to design WinXP components. Guess it might be helpful.

Include menu bar for both themes

The styling of the pre tag for CMD conflicts with other pre code blocks which make them hard to view.

As the XP.CSS applies its styling directly to im unable to use my own styling for my own button that im creating as a class.
Wondering if its possible to get a version that makes the XP themed button its own class as to not crash with my own custom button.