7.css

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

7.css

Post by Peter »

7.css is a CSS framework for building interface components that look like Windows 7.
https://khang-nd.github.io/7.css/#intro

Image

Code: Select all

EnableExplicit

! $("head").append("<link rel='stylesheet' href='https://unpkg.com/7.css'>");

Define HTML.s = "<div class='window' style='max-width: 400px'>" + 
                "  <div class='title-bar'>" + 
                "    <div class='title-bar-text'>Another window with contents</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' aria-label='Sample Tabs'>" + 
                "    <button role='tab' aria-controls='tab-A' aria-selected='true'>Instruction</button>" + 
                "    <button role='tab' aria-controls='tab-B'>Example</button>" + 
                "    <button role='tab' aria-controls='tab-C'>More instruction</button>" + 
                "    <button role='tab' aria-controls='tab-D' disabled>Disabled Tab</button>" + 
                "  </menu>" + 
                "  <!-- the tab content -->" + 
                "  <article role='tabpanel' id='tab-A'>" + 
                "    <b>Creating tabs</b>" + 
                "    <p>" + 
                "      To create a tab, use a <code>menu</code> element with <code>role='tablist'</code>." + 
                "      Then for the tab titles, use a <code>button</code> with <code>role='tab'</code>, and set the <code>aria-controls</code> attribute to" + 
                "      the corresponding id of the element with <code>role='tabpanel'</code>." + 
                "    </p>" + 
                "    <p>" + 
                "      Read more at <a href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role' target='_blank'>MDN Web docs - ARIA: tab role</a>" + 
                "    </p>" + 
                "  </article>" + 
                "  <article role='tabpanel' id='tab-B' hidden>" + 
                "    <b>More...</b>" + 
                "    <p>This tab contains a GroupBox</p>" + 
                "    <fieldset>" + 
                "      <legend>Today's mood</legend>" + 
                "      <div class='field-row'>" + 
                "        <input id='radio17' type='radio' name='fieldset-example2'>" + 
                "        <label for='radio17'>Claire Saffitz</label>" + 
                "      </div>" + 
                "      <div class='field-row'>" + 
                "        <input id='radio18' type='radio' name='fieldset-example2'>" + 
                "        <label for='radio18'>Brad Leone</label>" + 
                "      </div>" + 
                "      <div class='field-row'>" + 
                "        <input id='radio19' type='radio' name='fieldset-example2'>" + 
                "        <label for='radio19'>Chris Morocco</label>" + 
                "      </div>" + 
                "      <div class='field-row'>" + 
                "        <input id='radio20' type='radio' name='fieldset-example2'>" + 
                "        <label for='radio20'>Carla Lalli Music</label>" + 
                "      </div>" + 
                "    </fieldset>" + 
                "  </article>" + 
                "  <article role='tabpanel' id='tab-C' hidden>" + 
                "    <b>Disabling tabs</b>" + 
                "    <p>Simply add a <code>disabled</code> attribute on the tab.</p>" + 
                "  </article>" + 
                "  <article role='tabpanel' id='tab-D' hidden>" + 
                "    <b>Disabled Tab</b>" + 
                "    <p>This tab is disabled, so you should not be able to read this.</p>" + 
                "  </article>"+
                "    <section class='field-row' style='justify-content: flex-end'>" + 
                "      <button>OK</button>" + 
                "      <button>Cancel</button>" + 
                "    </section>" + 
                "  </div>" + 
                "</div>"

! $("body").append(v_html);

! $(".window").draggable({ handle: ".title-bar" });

! // https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
! $('.window').css({top:'50%',left:'50%',margin:'-'+($('.window').height() / 2)+'px 0 0 -'+($('.window').width() / 2)+'px'});

! const tabButtons = document.querySelectorAll("[role=tab]");
! tabButtons.forEach((tabButton) => {
!   tabButton.addEventListener("click", (e) => {
!     e.preventDefault();
!     const tabContainer = e.target.parentElement.parentElement;
!     const targetId = e.target.getAttribute("aria-controls");
!     tabButtons.forEach((_tabButton) => _tabButton.setAttribute("aria-selected", false));
!     tabButton.setAttribute("aria-selected", true);
!     tabContainer.querySelectorAll("[role=tabpanel]").forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
!     tabContainer.querySelector(`[role=tabpanel]#${targetId}`).removeAttribute("hidden");
!   });
! });
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: 7.css

Post by firace »

Nice example! But is there a simple way to apply this (or any other) stylesheet to SB gadgets, and a window created with OpenWindow?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: 7.css

Post by Peter »

In principle, that's possible. You have to replace the corresponding SpiderBasic classes with the 7.css classes.

However, this is a bit time-consuming.

Code: Select all

OpenWindow(0, 0, 0, 500, 300, "Window", #PB_Window_ScreenCentered)
WID = WindowID(0)
! $(v_wid.element).removeClass("spiderwindow").addClass("window");
! $(v_wid.element).find(".spiderwindow-title").removeClass("spiderwindow-title").addClass("title-bar");
// Edit 19.06.2022: Fixed a bug in the code
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: 7.css

Post by firace »

Peter wrote: Sat Jun 18, 2022 3:47 pm In principle, that's possible. You have to replace the corresponding SpiderBasic classes with the 7.css classes.

However, this is a bit time-consuming.

Code: Select all

OpenWindow(0, 0, 0, 500, 300, "Window", #PB_Window_ScreenCentered)
WID = WindowID(0)
! $(v_wid.element).removeClass("spiderwindow").addClass("window");
! $(v_wid.element).find(".spiderwindow-title").removeClass(".spiderwindow-title").addClass("title-bar");
OK, thanks a lot!
Post Reply