defuss-desktop 0.0.1

package/dist/scss/_startmenu.scss

@@ -0,0 +1,160 @@
+@use "variables" as *;
+
+ul.start {
+  font-family: $default-font-family;
+  list-style: none;
+  height: 100%;
+  margin: 0;
+  padding-left: 0;
+  > li {
+    background-color: #518e3a;
+    background-image: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.2) 22%,
+      rgba(255, 255, 255, 0) 72%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+    display: inline-block;
+    width: 140px;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 14px;
+    align-items: center;
+    position: relative;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    > a {
+      color: #fff;
+      text-decoration: none;
+      pointer-events: none;
+      font-size: 26px;
+      font-style: italic;
+      font-weight: bold;
+
+      > img {
+        vertical-align: middle;
+        height: 28px;
+        width: 28px;
+        margin-right: 5px;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus,
+    &.open {
+      .slide-open {
+        display: block;
+        transform: translateY(-100%);
+      }
+    }
+  }
+}
+
+.slide-open {
+  position: absolute;
+  cursor: auto;
+  top: 0;
+  left: 0;
+  width: 366px;
+  transition: 0.4s ease-in;
+  transform: translateY(100%);
+  z-index: 1;
+  // display: none;
+  .top,
+  .bottom {
+    background-color: $barBlue;
+  }
+  .top {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    width: 100%;
+    color: #fff;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    // background: rgb(255, 255, 255);
+    background-image: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.43) 4%,
+      rgba(255, 255, 255, 0) 56%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+
+    h1 {
+      font-size: 20px;
+      padding-left: 20px;
+    }
+  }
+  .bottom {
+    height: 40px;
+    width: 100%;
+    background-image: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.2) 22%,
+      rgba(255, 255, 255, 0) 72%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+  }
+  .menu {
+    height: 355px;
+    background-color: #186ad5;
+    display: flex;
+    border-right: 2px solid #186ad5;
+
+    .programs,
+    .system {
+      padding-top: 8px;
+      flex-basis: 50%;
+      height: 100%;
+      border: 1px solid #b1c2e2;
+      border-top: 0;
+      border-bottom: 0;
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding-left: 8px;
+
+        $menuItemHeight: 35px;
+        li {
+          margin-bottom: 8px;
+          height: $menuItemHeight;
+          padding-left: 38px;
+          // padding-top: 8px;
+          display: flex;
+          align-items: center;
+          position: relative;
+        }
+        img {
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: $menuItemHeight;
+          width: $menuItemHeight;
+          vertical-align: middle;
+          margin-right: 6px;
+        }
+        a {
+          color: #000;
+          font-family: serif;
+          text-decoration: none;
+          font-size: 13px;
+        }
+      }
+    }
+    .programs {
+      background-color: #fff;
+    }
+    .system {
+      background-color: #d2e5fb;
+    }
+  }
+}

package/dist/scss/_tabs.scss

@@ -0,0 +1,60 @@
+/*-------------------------------------------*\
+    Tabs
+\*-------------------------------------------*/
+
+:root {
+    --tab-border: 1px solid #888;
+    --tab-bg: var(--surface);
+}
+
+[role="tabpanel"] {
+    position: relative;
+    z-index: 2;
+}
+
+menu[role="tablist"] {
+    position: relative;
+    margin: 0 0 -2px 0;
+    text-indent: 0;
+    list-style-type: none;
+    display: flex;
+    padding-left: 3px;
+    button {
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        z-index: 1;
+        display: block;
+        color: #222;
+        text-decoration: none;
+        min-width: unset;
+        &[aria-selected="true"] {
+            padding-bottom: 2px;
+            margin-top: -2px;
+            background-color: var(--surface);
+            position: relative;
+            z-index: 8;
+            margin-left: -3px;
+            margin-bottom: 1px;
+        }
+        &:focus {
+            outline: 1px dotted #222;
+            outline-offset: -4px;
+        }
+    }
+    &.justified {
+        button {
+            flex-grow: 1;
+            text-align: center;
+        }
+    }
+}
+
+[role="tabpanel"] {
+    padding: 14px;
+    clear: both;
+    background: var(--tab-bg);
+    border: var(--tab-border);
+    position: relative;
+    z-index: 2;
+    margin-bottom: 9px;
+}

package/dist/scss/_taskbar.scss

@@ -0,0 +1,162 @@
+@use "variables" as *;
+
+.bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 30px;
+  width: 100%;
+  background-color: $barBlue;
+  z-index: 2;
+  display: flex;
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(148, 187, 233, 0) 18%
+  );
+  box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.3);
+}
+
+$taskbarItemBlue: #1e94f0;
+$taskbarItemBorderDark: #0067ba;
+$taskbarItemBorderLight: #1c87d7;
+$clockBlue: #47b2ea;
+
+ul.taskbar {
+  margin: 0;
+  padding: 3px 0px 3px 10px;
+  list-style: none;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+
+  li {
+    height: 100%;
+    flex: 0 1 146px;
+    margin: 0px 1px 0px 0px;
+    background-color: $taskbarItemBlue;
+    border: 1px solid $taskbarItemBorderLight;
+    border-top-color: $taskbarItemBorderDark;
+    border-bottom-color: $taskbarItemBorderDark;
+    border-right-color: $taskbarItemBorderDark;
+    padding: 3px 10px;
+    border-radius: 4px;
+    // white glow in top left corner
+    background-image: linear-gradient(
+      157deg,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(148, 187, 233, 0) 18%
+    );
+    // Tiny inset box shadow on the bottom
+    box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
+
+    &.active {
+      background-color: #0063b6;
+      border-color: #004d9a;
+      background-image: none;
+      box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
+    }
+  }
+  .cell {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    img {
+      width: 18px;
+      max-height: 100%;
+      margin-right: 4px;
+    }
+    .cell-name {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #fff;
+      font-size: 13px;
+    }
+  }
+}
+
+.taskbar__clock {
+  background-color: $clockBlue;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 15px 0 22px;
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(148, 187, 233, 0) 18%
+  );
+  box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.3);
+
+  span {
+    width: 60px; // so the container width doesn't change when the time changes
+    font-size: 14px;
+  }
+}
+
+.tray-toggle {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 21px;
+  height: 21px;
+  margin-right: -11px;
+  margin-top: 4.5px;
+  border-radius: 50%;
+  background-image: radial-gradient(
+    ellipse 75% 70% at 15% 15%,
+      #c3e5f9 0%,
+      #0d98e8 90%
+  );
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    padding: 1.25px;
+    background: linear-gradient(to bottom right, #10225ecc 20%, #ced6e6cc 80%);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+  }
+
+  .arrow {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid white;
+    filter: drop-shadow(0 0 4px #077eed);
+    z-index: 1;
+    transform: rotate(90deg);
+    margin-right: 2px;
+  }
+
+  &:hover {
+    background-image: radial-gradient(
+      ellipse 75% 70% at 15% 15%,
+      #e1f1fa 0%,
+      #41b0f1 90%
+    );
+  }
+
+  &:active,
+  &.active {
+    background-image: radial-gradient(
+      ellipse 60% 60% at 10% 10%,
+      #90d7f9 0%,
+      #1a7bea 90%
+    );
+    .arrow {
+      border-top-color: #6dcaf8;
+    }
+  }
+}

package/dist/scss/_treeview.scss

@@ -0,0 +1,91 @@
+/*-------------------------------------------*\
+    Tree View
+\*-------------------------------------------*/
+
+ul.tree-view {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+    display: block;
+    background: var(--button-highlight);
+    padding: 6px;
+    margin: 0;
+    li {
+        list-style-type: none;
+        margin-top: 3px;
+    }
+    a {
+        text-decoration: none;
+        color: #000;
+        &:focus {
+            background-color: var(--dialog-blue);
+            color: var(--button-highlight);
+        }
+    }
+    ul {
+        margin-top: 3px;
+        margin-left: 16px;
+        padding-left: 16px;
+        border-left: 1px dotted #808080;
+        > li {
+            position: relative;
+            &::before {
+                content: "";
+                display: block;
+                position: absolute;
+                left: -16px;
+                top: 6px;
+                width: 12px;
+                border-bottom: 1px dotted #808080;
+            }
+            &:last-child {
+                &::after {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    left: -20px;
+                    top: 7px;
+                    bottom: 0px;
+                    width: 8px;
+                    background: var(--button-highlight);
+                }
+            }
+        }
+        details {
+            > summary {
+                &:before {
+                    margin-left: -22px;
+                    position: relative;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+    details {
+        margin-top: 0;
+        > summary {
+            &:before {
+                text-align: center;
+                display: block;
+                float: left;
+                content: "+";
+                border: 1px solid #808080;
+                width: 8px;
+                height: 9px;
+                line-height: 9px;
+                margin-right: 5px;
+                padding-left: 1px;
+                background-color: #fff;
+            }
+        }
+    }
+    details[open] {
+        summary {
+            margin-bottom: 0;
+        }
+        > summary {
+            &:before {
+                content: "-";
+            }
+        }
+    }
+}

package/dist/scss/_variables.scss

@@ -0,0 +1,85 @@
+/*-------------------------------------------*\
+    Variables
+\*-------------------------------------------*/
+
+// SCSS Variables (available at compile time)
+$icon-base-path: "/icons/";
+
+// Default font paths
+$font-base-path: "/fonts/";
+
+// SCSS Variables
+$primary-bg: #000;
+
+// Default cursor paths
+$cursor-base-path: "/cursors/";
+
+// Default font stack with custom fonts
+$default-font-family: 'Tahoma', Geneva, Verdana, sans-serif;
+$default-font-size: 16px;
+
+// Font utility variables
+$font-families: (
+  'default': $default-font-family,
+  'system': (system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif)
+);
+
+$menuHoverBlue: #1c79c3;
+$barBlue: #0075e1;
+
+:root {
+    --sans-serif: "Pixelated MS Sans Serif", Arial;
+    --tahoma: "Tahoma", sans-serif;
+    --font-size: 16px;
+
+    /* Color */
+    --surface: lightblue;
+    --button-highlight: #ffffff;
+    --button-face: #dfdfdf;
+    --button-shadow: #808080;
+    --window-frame: #0a0a0a;
+    --dialog-blue: #000080;
+    --dialog-blue-light: #1084d0;
+    --link-blue: #0000ff;
+
+    /* Spacing */
+    --element-spacing: 8px;
+    --grouped-button-spacing: 4px;
+    --grouped-element-spacing: 6px;
+    --radio-width: 12px;
+    --checkbox-width: 13px;
+    --radio-label-spacing: 6px;
+    --range-track-height: 4px;
+    --range-spacing: 10px;
+
+    /* Some detailed computations for radio buttons and checkboxes */
+    --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
+    --radio-total-width: calc(var(--radio-total-width-precalc));
+    --radio-left: calc(-1 * var(--radio-total-width-precalc));
+    --radio-dot-width: 4px;
+    --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
+    --radio-dot-left: calc(
+        -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2
+    );
+    --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
+    --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
+    --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+    --checkmark-width: 7px;
+    --checkmark-top: 3px;
+    --checkmark-left: 3px;
+
+    /* Borders */
+    --border-width: 1px;
+    --border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
+    --border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
+    --border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
+    --border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
+
+    /* Window borders flip button-face and button-highlight */
+    --border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
+    --border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
+    --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
+        inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
+
+    --border-status-bar-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
+}

package/dist/scss/_window.scss

@@ -0,0 +1,75 @@
+/*-------------------------------------------*\
+    Window
+\*-------------------------------------------*/
+
+:root {
+    --title-bar-bg: black;
+}
+.window {
+    position: absolute;
+    font-size: 11px;
+    box-shadow: var(--border-window-outer), var(--border-window-inner);
+    background: var(--surface);
+    padding: 3px;
+    fieldset {
+        margin-bottom: 9px;
+    }
+}
+.title-bar {
+    font-size: 11px;
+    font-family: var(--sans-serif);
+    background: var(--title-bar-bg);
+    padding: 3px 2px 3px 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title-bar-text {
+    font-weight: bold;
+    color: white;
+    letter-spacing: 0;
+    margin-right: 24px;
+}
+
+
+.title-bar-controls {
+    display: flex;
+    button {
+        padding: 0;
+        display: block;
+        min-width: 16px;
+        min-height: 14px;
+        &:focus {
+            outline: none;
+        }
+    }
+    button[aria-label="Minimize"] {
+    }
+    button[aria-label="Maximize"] {
+    }
+    button[aria-label="Help"] {
+    }
+    button[aria-label="Close"] {
+    }
+}
+.window-body {
+    font-size: var(--font-size);
+    margin: var(--element-spacing);
+    pre {
+        margin: -8px;
+    }
+}
+
+.status-bar {
+    margin: 0px 1px;
+    display: flex;
+    gap: 1px;
+}
+
+.status-bar-field {
+    box-shadow: var(--border-status-bar-field);
+    flex-grow: 1;
+    padding: 2px 3px;
+    margin: 0;
+}

package/dist/scss/index.scss

@@ -0,0 +1,22 @@
+/**
+ * GUI.css
+ * Copyright (c) 2025 Aron Homberg <info@aron-homberg.de>
+ * Copyright (c) 2020 Adam Hammad <adamham.dev>
+ * Based on 98.css by Jordan Scales <thatjdanisso.cool>
+ * https://github.com/botoxparty/XP.css/blob/main/LICENSE
+ */
+
+@forward "_variables.scss";
+@forward "_fonts.scss";
+@forward "_global.scss";
+@forward "_buttons.scss";
+@forward "_forms.scss";
+@forward "_window.scss";
+@forward "_treeview.scss";
+@forward "_groupbox.scss";
+@forward "_tabs.scss";
+@forward "_desktop.scss";
+@forward "_logon.scss";
+@forward "_taskbar.scss";
+@forward "_startmenu.scss";
+@forward "_crt.scss";