defuss-desktop 0.0.1

package/dist/themes/xp/_buttons.scss

@@ -0,0 +1,95 @@
+@use "variables" as *;
+
+/*-------------------------------------------*\
+    Buttons
+\*-------------------------------------------*/
+
+button {
+    font-family: var(--tahoma);
+    -webkit-font-smoothing: none;
+    font-size: 16px;
+    box-sizing: border-box;
+    border: 1px solid #003c74;
+    background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(236, 235, 229, 1) 86%,
+        rgba(216, 208, 196, 1) 100%
+    );
+    box-shadow: none;
+    border-radius: 3px;
+    &:not(:disabled) {
+        &:active,
+        &.active {
+            box-shadow: none;
+            background: linear-gradient(
+                180deg,
+                rgba(205, 202, 195, 1) 0%,
+                rgba(227, 227, 219, 1) 8%,
+                rgba(229, 229, 222, 1) 94%,
+                rgba(242, 242, 241, 1) 100%
+            );
+        }
+        &:hover {
+            box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
+        }
+    }
+    &:focus,
+    &.focused {
+        box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4,
+            inset 2px -2px #89ade4;
+    }
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+.start-button {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    background-image: url("#{$icon-base-path}startbutton.webp");
+    background-repeat: no-repeat;
+    background-position: 0 -30px;
+    background-size: auto 90px;
+    height: 30px;
+    width: 85px;
+    align-items: center;
+    justify-content: center;
+
+    &:hover,
+    &.hover {
+    background-position: 0 0;
+    }
+
+    &:active,
+    &.active {
+        background-position: 0 -60px;
+    }
+
+    a {
+        cursor: inherit;
+        display: flex;
+        height: 24px;
+        font-family: Arial;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        font-style: italic;
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+        text-shadow: 0px 0px 4px #000;
+        user-select: none;
+        outline: none;
+        margin-right: 6px;
+    }
+}
+
+.start-button-icon {
+    display: block;
+    width: 18px;
+    height: 16px;
+    margin-top: -4px;
+    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
+    margin-right: 2px;
+}

package/dist/themes/xp/_forms.scss

@@ -0,0 +1,241 @@
+/*-------------------------------------------*\
+    Forms
+\*-------------------------------------------*/
+
+:root {
+    --checkmark-width: 11px;
+    --radio-dot-width: 5px;
+    --radio-dot-top: 5px;
+    --radio-width: 13px;
+    --radio-inner-shadow-hover: inset -2px -2px #f8b636, inset 2px 2px #fedf9c;
+    --radio-bg-active: linear-gradient(135deg, rgba(176, 176, 167, 1) 0%, rgba(227, 225, 210, 1) 100%);
+    --radio-bg: linear-gradient(135deg, rgba(220, 220, 215, 1) 0%, rgba(255, 255, 255, 1) 100%);
+    --radio-border: 1px solid #1d5281;
+    --radio-border-disabled: 1px solid #cac8bb;
+}
+
+label,
+select,
+input,
+textarea,
+option {
+    -webkit-font-smoothing: none;
+}
+
+select {
+    border: 1px solid #7f9db9;
+    background-image: svg-load("./icon/dropdown.svg");
+    background-size: 15px;
+    &:focus {
+        box-shadow: inset 2px 2px white, inset -2px -2px white;
+    }
+    &:hover {
+        background-image: svg-load("./icon/dropdown-hover.svg");
+    }
+    &:active {
+        background-image: svg-load("./icon/dropdown-active.svg");
+    }
+}
+
+input[type="radio"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+    background: 0;
+    position: fixed;
+    opacity: 0;
+    border: none;
+    + {
+        label {
+            line-height: 16px;
+            &::before {
+                background: var(--radio-bg);
+                border-radius: 50%;
+                border: var(--radio-border);
+            }
+        }
+    }
+    &:not([disabled]):not(:active) {
+        + label {
+            &:hover:before {
+                box-shadow: var(--radio-inner-shadow-hover);
+            }
+        }
+    }
+    &:active {
+        + {
+            label {
+                &::before {
+                    background: var(--radio-bg-active);
+                }
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    background: svg-load("./icon/radio-dot.svg");
+                }
+            }
+        }
+    }
+    &:focus {
+        + {
+            label {
+                outline: 1px dotted #000000;
+            }
+        }
+    }
+}
+input[type="radio"][disabled] {
+    + {
+        label {
+            &::before {
+                border: var(--radio-border-disabled);
+                background: white;
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    background: svg-load("./icon/radio-dot-disabled.svg");
+                }
+            }
+        }
+    }
+}
+input[type="checkbox"] {
+    + label {
+        &:before {
+            box-shadow: none;
+            border: var(--radio-border);
+            background: var(--radio-bg);
+        }
+    }
+    &:checked + label {
+        &:after {
+            background: svg-load("./icon/checkmark.svg");
+            left: -17px;
+        }
+    }
+    &:not([disabled]):not(:active) {
+        + label {
+            &:hover:before {
+                box-shadow: var(--radio-inner-shadow-hover);
+            }
+        }
+    }
+    &:active {
+        + {
+            label {
+                &::before {
+                    background: var(--radio-bg-active);
+                }
+            }
+        }
+    }
+}
+
+input[type="checkbox"][disabled] {
+    + {
+        label {
+            &::before {
+                background: white;
+                border: var(--radio-border-disabled);
+            }
+        }
+    }
+    &:checked {
+        + {
+            label {
+                &::after {
+                    background: svg-load("./icon/checkmark-disabled.svg");
+                }
+            }
+        }
+    }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+select {
+    height: 23px;
+}
+
+input::selection,
+textarea::selection {
+    background: var(--dialog-blue);
+    color: white;
+}
+
+input[type="range"] {
+    &::-webkit-slider-thumb {
+        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: #ecebe4;
+        border-right: 1px solid #f3f2ea;
+        border-bottom: 1px solid #f3f2ea;
+        border-radius: 2px;
+        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #9d9c99, -1px -1px 0 #9d9c99,
+            0 -1px 0 #9d9c99, -1px 1px 0 white, 1px -1px #9d9c99;
+    }
+    &::-moz-range-track {
+        width: 100%;
+        height: 2px;
+        box-sizing: border-box;
+        background: #ecebe4;
+        border-right: 1px solid #f3f2ea;
+        border-bottom: 1px solid #f3f2ea;
+        border-radius: 2px;
+        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #9d9c99, -1px -1px 0 #9d9c99,
+            0 -1px 0 #9d9c99, -1px 1px 0 white, 1px -1px #9d9c99;
+    }
+}
+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 {
+    > input[type="range"] {
+        &::-webkit-slider-runnable-track {
+            border-left: 1px solid #f3f2ea;
+            border-right: 0;
+            border-bottom: 1px solid #f3f2ea;
+            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 #9d9c99, 1px -1px 0 #9d9c99,
+                0 -1px 0 #9d9c99, 1px 1px 0 white, -1px -1px #9d9c99;
+        }
+        &::-moz-range-track {
+            border-left: 1px solid #f3f2ea;
+            border-right: 0;
+            border-bottom: 1px solid #f3f2ea;
+            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 #9d9c99, 1px -1px 0 #9d9c99,
+                0 -1px 0 #9d9c99, 1px 1px 0 white, -1px -1px #9d9c99;
+        }
+    }
+}

package/dist/themes/xp/_global.scss

@@ -0,0 +1,60 @@
+/*-------------------------------------------*\
+    Global
+\*-------------------------------------------*/
+
+::-webkit-scrollbar {
+    width: 17px;
+}
+::-webkit-scrollbar-corner {
+    background: var(--button-face);
+}
+::-webkit-scrollbar-track {
+    &:vertical {
+        background-image: svg-load("./icon/scroll-background.svg");
+    }
+    &:horizontal {
+        background-image: svg-load("./icon/scroll-background-horizontal.svg");
+    }
+}
+::-webkit-scrollbar-thumb {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: #c8d6fb;
+    background-size: 7px;
+    border: 1px solid white;
+    border-radius: 2px;
+    box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
+    &:vertical {
+        background-image: svg-load("./icon/scroll-thumb.svg");
+    }
+    &:horizontal {
+        background-size: 8px;
+        background-image: svg-load("./icon/scroll-thumb-horizontal.svg");
+    }
+}
+::-webkit-scrollbar-button {
+    &:vertical {
+        &:start {
+            height: 17px;
+            background-image: svg-load("./icon/scroll-arrow-up.svg");
+        }
+        &:end {
+            height: 17px;
+            background-image: svg-load("./icon/scroll-arrow-down.svg");
+        }
+    }
+    &:horizontal {
+        &:start {
+            width: 17px;
+            background-image: svg-load("./icon/scroll-arrow-left.svg");
+        }
+        &:end {
+            width: 17px;
+            background-image: svg-load("./icon/scroll-arrow-right.svg");
+        }
+    }
+}
+
+body {
+    font-size: var(--font-size);
+}

package/dist/themes/xp/_groupbox.scss

@@ -0,0 +1,45 @@
+/*-------------------------------------------*\
+    GroupBox
+\*-------------------------------------------*/
+
+fieldset {
+    border: none;
+    box-shadow: none;
+    background: white;
+    border: 1px solid #d0d0bf;
+    border-radius: 4px;
+    padding-top: 10px;
+}
+legend {
+    background: transparent;
+    color: #0046d5;
+}
+.field-row {
+    display: flex;
+    align-items: center;
+    > * {
+        + {
+            * {
+                margin-left: var(--grouped-element-spacing);
+            }
+        }
+    }
+}
+[class^="field-row"] {
+    + {
+        [class^="field-row"] {
+            margin-top: var(--grouped-element-spacing);
+        }
+    }
+}
+.field-row-stacked {
+    display: flex;
+    flex-direction: column;
+    * {
+        + {
+            * {
+                margin-top: var(--grouped-element-spacing);
+            }
+        }
+    }
+}

package/dist/themes/xp/_progressbar.scss

@@ -0,0 +1,156 @@
+/*-------------------------------------------*\
+    ProgressBar
+\*-------------------------------------------*/
+
+@keyframes sliding {
+    0% {
+      transform: translateX(-30px);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  
+  progress {
+    // Move all declarations to the top
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: var(--track-height);
+    border: 1px solid #686868;
+    border-radius: 4px;
+    padding: 1px 2px 1px 0px;
+    overflow: hidden;
+    background-color: #fff;
+    -webkit-box-shadow: var(--track-shadow);
+    -moz-box-shadow: var(--track-shadow);
+    box-shadow: var(--track-shadow);
+
+    &,
+    &[value],
+    &:not([value]) {
+      --determinate-track: repeating-linear-gradient(
+          to right,
+          #fff 0px,
+          #fff 2px,
+          transparent 2px,
+          transparent 10px
+        ),
+        linear-gradient(
+          to bottom,
+          #acedad 0%,
+          #7be47d 14%,
+          #4cda50 28%,
+          #2ed330 42%,
+          #42d845 57%,
+          #76e275 71%,
+          #8fe791 85%,
+          #ffffff 100%
+        );
+      --indeterminate-track: repeating-linear-gradient(
+          to right,
+          transparent 0px,
+          transparent 8px,
+          #fff 8px,
+          #fff 10px,
+          transparent 10px,
+          transparent 18px,
+          #fff 18px,
+          #fff 20px,
+          transparent 20px,
+          transparent 28px,
+          #fff 28px,
+          #fff 100%
+        ),
+        linear-gradient(
+          to bottom,
+          #acedad 0%,
+          #7be47d 14%,
+          #4cda50 28%,
+          #2ed330 42%,
+          #42d845 57%,
+          #76e275 71%,
+          #8fe791 85%,
+          #ffffff 100%
+        );
+      --indeterminate-track-animation: sliding 2s linear 0s infinite;
+      --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1);
+      --track-height: 14px;
+    }
+  
+    /* Determinate styles */
+    &[value] {
+      /* Chrome, Safari, Edge */
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }
+      &::-webkit-progress-value {
+        border-radius: 2px;
+        background: var(--determinate-track);
+      }
+      /* Firefox */
+      &::-moz-progress-bar {
+        border-radius: 2px;
+        background: var(--determinate-track);
+      }
+    }
+  
+    /* Indeterminate styles */
+    &:not([value]) {
+      /* Apply for Chrome, Safari and Edge but animation only works in Safari */
+      &::-webkit-progress-bar {
+        width: 100%;
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+  
+      /* Solution for Chrome and Edge: animate pseudo element :after */
+      & {
+        position: relative;
+      }
+      /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */
+      &::before {
+        box-sizing: border-box;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+  
+        width: 100%;
+        height: 100%;
+  
+        background-color: #fff;
+  
+        -webkit-box-shadow: var(--track-shadow);
+        -moz-box-shadow: var(--track-shadow);
+        box-shadow: var(--track-shadow);
+      }
+      /* Real animated element */
+      &::after {
+        box-sizing: border-box;
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: 2px;
+  
+        width: 100%;
+        height: calc(100% - 2px);
+  
+        padding: 1px 2px 1px 2px;
+  
+        border-radius: 2px;
+  
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+  
+      /* Firefox */
+      &::-moz-progress-bar {
+        width: 100%;
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+    }
+  }
+  

package/dist/themes/xp/_tabs.scss

@@ -0,0 +1,56 @@
+/*-------------------------------------------*\
+    Tabs
+\*-------------------------------------------*/
+
+:root {
+    --tab-bg: linear-gradient(180deg, rgba(252, 252, 254, 1) 0%, rgba(244, 243, 238, 1) 100%);
+    --tab-border: 1px solid #919b9c;
+}
+
+menu[role="tablist"] {
+    button {
+        background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(250, 250, 249, 1) 26%,
+            rgba(240, 240, 234, 1) 95%,
+            rgba(236, 235, 229, 1) 100%
+        );
+        margin-left: -1px;
+        margin-right: 2px;
+        border-radius: 0;
+        border-color: #91a7b4;
+        border-top-right-radius: 3px;
+        border-top-left-radius: 3px;
+        padding: 0 12px 3px;
+        &:hover {
+            box-shadow: unset;
+            border-top: 1px solid #e68b2c;
+            box-shadow: inset 0px 2px #ffc73c;
+        }
+        &[aria-selected="true"] {
+            background: #fcfcfe;
+            border-color: #919b9c;
+            margin-right: -1px;
+            border-bottom: 1px solid transparent;
+            border-top: 1px solid #e68b2c;
+            box-shadow: inset 0px 2px #ffc73c;
+            &:first-of-type {
+                &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    z-index: -1;
+                    top: 100%;
+                    left: -1px;
+                    height: 2px;
+                    width: 0;
+                    border-left: var(--tab-border);
+                }
+            }
+        }
+    }
+}
+[role="tabpanel"] {
+    box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0px rgba(208, 206, 191, 0.75);
+}

package/dist/themes/xp/_treeview.scss

@@ -0,0 +1,9 @@
+/*-------------------------------------------*\
+    TreeView
+\*-------------------------------------------*/
+
+ul.tree-view {
+    -webkit-font-smoothing: none;
+    border: 1px solid #7f9db9;
+    padding: 2px 5px;
+}

package/dist/themes/xp/_variables.scss

@@ -0,0 +1,27 @@
+/*-------------------------------------------*\
+    Variables
+\*-------------------------------------------*/
+$icon-base-path: "/icons/xp/";
+
+:root {
+    --sans-serif: "Pixelated MS Sans Serif", Arial;
+    /* Color */
+    --surface: #ece9d8;
+    --button-highlight: #ffffff;
+    --button-face: #dfdfdf;
+    --button-shadow: #808080;
+    --window-frame: #0a0a0a;
+    --dialog-blue: #2267cb;
+
+    /* Borders */
+    --input-border-color: #789dbc;
+
+    /* Scroll bar */
+    --scrollbar-bg: linear-gradient(
+        90deg,
+        rgba(197, 213, 255, 1) 0%,
+        rgba(181, 211, 255, 1) 86%,
+        rgba(182, 202, 247, 1) 100%
+    );
+    --scrollbar-shadow: inset 1px 1px white, inset -1px -1px white, inset 2px 2px #b9cdfa, inset -2px -2px #b6c9f7;
+}