defuss-desktop 0.0.1

package/dist/index.scss

@@ -0,0 +1,4 @@
+// Import all SCSS files from the scss directory
+// This ensures all styles are available when the package is imported
+
+@forward 'scss';

package/dist/scss/_buttons.scss

@@ -0,0 +1,30 @@
+/*-------------------------------------------*\
+    Buttons
+\*-------------------------------------------*/
+
+button {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+    box-sizing: border-box;
+    border: none;
+    background: var(--surface);
+    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+    border-radius: 0;
+    min-width: 75px;
+    min-height: 21px;
+    padding: 0 12px;
+    &:not(:disabled) {
+        &:active,
+        &.active {
+            box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+        }
+    }
+    &:focus,
+    &.focused {
+        outline: 1px dotted #000000;
+        outline-offset: -4px;
+    }
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}

package/dist/scss/_crt.scss

@@ -0,0 +1,188 @@
+
+@keyframes flicker {
+  0% {
+    opacity: 0.27861;
+  }
+  5% {
+    opacity: 0.34769;
+  }
+  10% {
+    opacity: 0.23604;
+  }
+  15% {
+    opacity: 0.90626;
+  }
+  20% {
+    opacity: 0.18128;
+  }
+  25% {
+    opacity: 0.83891;
+  }
+  30% {
+    opacity: 0.65583;
+  }
+  35% {
+    opacity: 0.67807;
+  }
+  40% {
+    opacity: 0.26559;
+  }
+  45% {
+    opacity: 0.84693;
+  }
+  50% {
+    opacity: 0.96019;
+  }
+  55% {
+    opacity: 0.08594;
+  }
+  60% {
+    opacity: 0.20313;
+  }
+  65% {
+    opacity: 0.71988;
+  }
+  70% {
+    opacity: 0.53455;
+  }
+  75% {
+    opacity: 0.37288;
+  }
+  80% {
+    opacity: 0.71428;
+  }
+  85% {
+    opacity: 0.70419;
+  }
+  90% {
+    opacity: 0.7003;
+  }
+  95% {
+    opacity: 0.36108;
+  }
+  100% {
+    opacity: 0.24387;
+  }
+}
+
+@keyframes textShadow {
+  0% {
+    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
+      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  5% {
+    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
+      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  10% {
+    text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
+      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  15% {
+    text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
+      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  20% {
+    text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
+      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  25% {
+    text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
+      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  30% {
+    text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
+      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  35% {
+    text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
+      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  40% {
+    text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
+      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  45% {
+    text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
+      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  50% {
+    text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
+      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  55% {
+    text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
+      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  60% {
+    text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
+      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  65% {
+    text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
+      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  70% {
+    text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
+      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  75% {
+    text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
+      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  80% {
+    text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
+      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  85% {
+    text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
+      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  90% {
+    text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
+      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  95% {
+    text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
+      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+  100% {
+    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
+      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
+  }
+}
+
+.crt::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(18, 16, 16, 0.05);
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.crt::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.1;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+    linear-gradient(
+      90deg,
+      rgba(255, 0, 0, 0.06),
+      rgba(0, 255, 0, 0.02),
+      rgba(0, 0, 255, 0.06)
+    );
+  z-index: 2;
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}

package/dist/scss/_desktop.scss

@@ -0,0 +1,89 @@
+
+@use "sass:map";
+
+@use "variables" as *;
+
+
+.defuss-desktop-panel {
+  display: block;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  background-color: $primary-bg;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+
+  // Apply default font family
+  font-family: $default-font-family;
+  font-size: 11px; // Windows XP default font size
+  font-weight: normal;
+  
+
+  // Common interactive elements get appropriate cursors automatically
+  button, a, [role="button"], [tabindex]:not([tabindex="-1"]) {
+    cursor: url("#{$cursor-base-path}pointer.cur"), pointer;
+  }
+
+  input[type="text"], textarea, [contenteditable] {
+    cursor: url("#{$cursor-base-path}text.cur"), text;
+  }
+
+  [draggable="true"] {
+    cursor: url("#{$cursor-base-path}grab.cur"), grab;
+
+    &:active {
+      cursor: url("#{$cursor-base-path}grabbing.cur"), grabbing;
+    }
+  }
+
+}
+
+
+// Text rendering optimization for pixel-perfect fonts
+* {
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: none;
+  text-rendering: geometricPrecision;
+}
+
+// Font utility classes
+.font-tahoma {
+  font-family: map.get($font-families, 'tahoma');
+}
+
+.font-tahoma-bold {
+  font-family: map.get($font-families, 'tahoma');
+  font-weight: bold;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+// Windows XP typical font sizes
+.font-size-small {
+  font-size: 9px;
+}
+
+.font-size-normal {
+  font-size: 11px;
+}
+
+.font-size-large {
+  font-size: 13px;
+}
+
+.font-size-menu {
+  font-size: 11px; // Standard Windows XP menu font size
+}
+
+.font-size-caption {
+  font-size: 11px; // Window caption font size
+}
+
+.font-size-tooltip {
+  font-size: 11px; // Tooltip font size
+}

package/dist/scss/_fonts.scss

@@ -0,0 +1,43 @@
+/*-------------------------------------------*\
+    Fonts
+\*-------------------------------------------*/
+
+@use "variables" as *;
+
+@font-face {
+    font-family: "Pixelated MS Sans Serif";
+    src: url("#{$font-base-path}ms_sans_serif.woff") format("woff");
+    src: url("#{$font-base-path}ms_sans_serif.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Pixelated MS Sans Serif";
+    src: url("#{$font-base-path}ms_sans_serif_bold.woff") format("woff");
+    src: url("#{$font-base-path}ms_sans_serif_bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Perfect DOS VGA 437 Win";
+    src: url("#{$font-base-path}PerfectDOSVGA437Win.woff2") format("woff2"),
+        url("#{$font-base-path}PerfectDOSVGA437Win.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: "Tahoma";
+    src: url("#{$font-base-path}tahoma.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Tahoma";
+    src: url("#{$font-base-path}tahoma_bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+}

package/dist/scss/_forms.scss

@@ -0,0 +1,361 @@
+/*-------------------------------------------*\
+    Forms
+\*-------------------------------------------*/
+
+label {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+    display: inline-flex;
+    align-items: center;
+}
+input {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+}
+textarea {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+    padding: 3px 4px;
+    border: none;
+    background-color: var(--button-highlight);
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0;
+    &:focus {
+        outline: none;
+    }
+    &:disabled {
+        color: var(--button-shadow);
+        text-shadow: 1px 1px 0 var(--button-highlight);
+        background-color: var(--surface);
+    }
+}
+select {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+    padding: 3px 4px;
+    border: none;
+    background-color: var(--button-highlight);
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0;
+    height: 21px;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    position: relative;
+    padding-right: 32px;
+    background-image: svg-load("./icon/button-down.svg");
+    background-position: top 2px right 2px;
+    background-repeat: no-repeat;
+    border-radius: 0;
+    &:focus {
+        outline: none;
+        color: var(--button-highlight);
+        background-color: var(--dialog-blue);
+        option {
+            color: #000;
+            background-color: #fff;
+        }
+    }
+    &:active {
+        background-image: svg-load("./icon/button-down-active.svg");
+    }
+    &:disabled {
+        color: var(--button-shadow);
+        text-shadow: 1px 1px 0 var(--button-highlight);
+        background-color: var(--surface);
+    }
+}
+option {
+    font-family: var(--sans-serif);
+    font-size: 11px;
+}
+
+// General disabled state for inputs with labels
+input:disabled + label {
+    color: var(--button-shadow);
+    text-shadow: 1px 1px 0 var(--button-highlight);
+}
+
+.vertical-bar {
+    width: 4px;
+    height: 20px;
+    background: #c0c0c0;
+    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+input[type="radio"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+    background: 0;
+    position: fixed;
+    opacity: 0;
+    border: none;
+    + {
+        label {
+            line-height: 13px;
+            position: relative;
+            margin-left: var(--radio-total-width);
+            &::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: calc(-1 * (var(--radio-total-width-precalc)));
+                display: inline-block;
+                width: var(--radio-width);
+                height: var(--radio-width);
+                margin-right: var(--radio-label-spacing);
+                background: svg-load("./icon/radio-border.svg");
+            }
+        }
+    }
+    &:active {
+        + {
+            label {
+                &::before {
+                    background: svg-load("./icon/radio-border-disabled.svg");
+                }
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    content: "";
+                    display: block;
+                    width: var(--radio-dot-width);
+                    height: var(--radio-dot-width);
+                    top: var(--radio-dot-top);
+                    left: var(--radio-dot-left);
+                    position: absolute;
+                    background: svg-load("./icon/radio-dot.svg");
+                }
+            }
+        }
+    }
+    &:focus {
+        + {
+            label {
+                outline: 1px dotted #000000;
+            }
+        }
+    }
+}
+input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+    background: 0;
+    position: fixed;
+    opacity: 0;
+    border: none;
+    + {
+        label {
+            line-height: 13px;
+            position: relative;
+            margin-left: var(--checkbox-total-width);
+            &::before {
+                content: "";
+                position: absolute;
+                left: calc(-1 * (var(--checkbox-total-width-precalc)));
+                display: inline-block;
+                width: var(--checkbox-width);
+                height: var(--checkbox-width);
+                background: var(--button-highlight);
+                box-shadow: var(--border-field);
+                margin-right: var(--radio-label-spacing);
+            }
+        }
+    }
+    &:focus {
+        + {
+            label {
+                outline: 1px dotted #000000;
+            }
+        }
+    }
+    &:active {
+        + {
+            label {
+                &::before {
+                    background: var(--surface);
+                }
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    content: "";
+                    display: block;
+                    width: var(--checkmark-width);
+                    height: var(--checkmark-width);
+                    position: absolute;
+                    background: svg-load("./icon/checkmark.svg");
+                    top: 1px;
+                }
+            }
+        }
+    }
+}
+input[type="radio"][disabled] {
+    + {
+        label {
+            &::before {
+                background: svg-load("./icon/radio-border-disabled.svg");
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    background: svg-load("./icon/radio-dot-disabled.svg");
+                }
+            }
+        }
+    }
+}
+input[type="checkbox"][disabled] {
+    + {
+        label {
+            &::before {
+                background: var(--surface);
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    background: svg-load("./icon/checkmark-disabled.svg");
+                }
+            }
+        }
+    }
+}
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+    padding: 3px 4px;
+    border: solid #7f9db9 1px;
+    background-color: var(--button-highlight);
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0;
+    height: 21px;
+    line-height: 2;
+    &:focus {
+        outline: none;
+    }
+    &:disabled {
+        color: var(--button-shadow);
+        text-shadow: 1px 1px 0 var(--button-highlight);
+        background-color: var(--surface);
+    }
+}
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    background: transparent;
+    &:focus {
+        outline: none;
+    }
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 21px;
+        width: 11px;
+        background: svg-load("./icon/indicator-horizontal.svg");
+        transform: translateY(-8px);
+    }
+    &::-moz-range-thumb {
+        height: 21px;
+        width: 11px;
+        border: 0;
+        border-radius: 0;
+        background: svg-load("./icon/indicator-horizontal.svg");
+        transform: translateY(2px);
+    }
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 2px;
+        box-sizing: border-box;
+        background: black;
+        border-right: 1px solid grey;
+        border-bottom: 1px solid grey;
+        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
+            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+    }
+    &::-moz-range-track {
+        width: 100%;
+        height: 2px;
+        box-sizing: border-box;
+        background: black;
+        border-right: 1px solid grey;
+        border-bottom: 1px solid grey;
+        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
+            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+    }
+}
+input[type="range"].has-box-indicator {
+    &::-webkit-slider-thumb {
+        background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+        transform: translateY(-10px);
+    }
+    &::-moz-range-thumb {
+        background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+        transform: translateY(0px);
+    }
+}
+.is-vertical {
+    display: inline-block;
+    width: 4px;
+    height: 150px;
+    transform: translateY(50%);
+    > input[type="range"] {
+        width: 150px;
+        height: 4px;
+        margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
+        transform-origin: left;
+        transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
+        &::-webkit-slider-runnable-track {
+            border-left: 1px solid grey;
+            border-right: 0;
+            border-bottom: 1px solid grey;
+            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,
+                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+        }
+        &::-moz-range-track {
+            border-left: 1px solid grey;
+            border-right: 0;
+            border-bottom: 1px solid grey;
+            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,
+                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+        }
+        &::-webkit-slider-thumb {
+            transform: translateY(-8px) scaleX(-1);
+        }
+        &::-moz-range-thumb {
+            transform: translateY(2px) scaleX(-1);
+        }
+    }
+    > input[type="range"].has-box-indicator {
+        &::-webkit-slider-thumb {
+            transform: translateY(-10px) scaleX(-1);
+        }
+        &::-moz-range-thumb {
+            transform: translateY(0px) scaleX(-1);
+        }
+    }
+}