defuss-desktop 0.0.1

package/dist/scss/_global.scss

@@ -0,0 +1,168 @@
+/*-------------------------------------------*\
+    Global
+\*-------------------------------------------*/
+
+@use "variables" as *;
+
+body, html {
+    font-family: Arial;
+    font-size: 12px;
+    color: #222222;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    user-select: none;
+
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    text-size-adjust: none;
+
+    // Apply default cursor with fallback
+    cursor: url("#{$cursor-base-path}default.cur"), default;
+
+    // Cursor utilities for different elements within the desktop
+    * {
+        &[data-cursor="default"], &.cursor-default {
+        cursor: url("#{$cursor-base-path}default.cur"), default;
+        }
+
+        &[data-cursor="pointer"], &.cursor-pointer {
+        cursor: url("#{$cursor-base-path}pointer.cur"), pointer;
+        }
+
+        &[data-cursor="text"], &.cursor-text {
+        cursor: url("#{$cursor-base-path}text.cur"), text;
+        }
+
+        &[data-cursor="wait"], &.cursor-wait {
+        cursor: url("#{$cursor-base-path}wait.cur"), wait;
+        }
+
+        &[data-cursor="crosshair"], &.cursor-crosshair {
+        cursor: url("#{$cursor-base-path}crosshair.cur"), crosshair;
+        }
+
+        &[data-cursor="help"], &.cursor-help {
+        cursor: url("#{$cursor-base-path}help.cur"), help;
+        }
+
+        &[data-cursor="move"], &.cursor-move {
+        cursor: url("#{$cursor-base-path}move.cur"), move;
+        }
+
+        &[data-cursor="not-allowed"], &.cursor-not-allowed {
+        cursor: url("#{$cursor-base-path}not-allowed.cur"), not-allowed;
+        }
+
+        &[data-cursor="grab"], &.cursor-grab {
+        cursor: url("#{$cursor-base-path}grab.cur"), grab;
+        }
+
+        &[data-cursor="grabbing"], &.cursor-grabbing {
+        cursor: url("#{$cursor-base-path}grabbing.cur"), grabbing;
+        }
+    }
+}
+.surface {
+    background: var(--surface);
+}
+h1 {
+    font-size: 5rem;
+}
+h2 {
+    font-size: 2.5rem;
+}
+h3 {
+    font-size: 2rem;
+}
+h4 {
+    font-size: 1.5rem;
+}
+u {
+    text-decoration: none;
+    border-bottom: 0.5px solid #222222;
+}
+
+a {
+    color: var(--link-blue);
+    &:focus {
+        outline: 1px dotted var(--link-blue);
+    }
+}
+
+code {
+    font-family: monospace;
+    * {
+        font-family: monospace;
+    }
+}
+pre {
+    display: block;
+    padding: 12px 8px;
+    background-color: black;
+    color: #c0c0c0;
+    font-family: "Perfect DOS VGA 437 Win";
+    font-size: 1rem;
+    margin: 0;
+    * {
+        font-family: "Perfect DOS VGA 437 Win";
+    }
+}
+summary {
+    &:focus {
+        outline: 1px dotted #000000;
+    }
+}
+::-webkit-scrollbar {
+    width: 16px;
+    &:horizontal {
+        height: 17px;
+    }
+}
+::-webkit-scrollbar-corner {
+    background: var(--button-face);
+}
+::-webkit-scrollbar {
+    width: 16px;
+    &:horizontal {
+        height: 17px;
+    }
+}
+::-webkit-scrollbar-corner {
+    background: var(--button-face);
+}
+::-webkit-scrollbar-track {
+    background-image: svg-load("#{$icon-base-path}scrollbar-background.svg");
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--button-face);
+    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+::-webkit-scrollbar-button:horizontal:start:decrement,
+::-webkit-scrollbar-button:horizontal:end:increment,
+::-webkit-scrollbar-button:vertical:start:decrement,
+::-webkit-scrollbar-button:vertical:end:increment {
+    display: block;
+}
+::-webkit-scrollbar-button {
+    &:vertical {
+        &:start {
+            height: 17px;
+            background-image: svg-load("#{$icon-base-path}button-up.svg");
+        }
+        &:end {
+            height: 17px;
+            background-image: svg-load("#{$icon-base-path}button-down.svg");
+        }
+    }
+    &:horizontal {
+        &:start {
+            width: 16px;
+            background-image: svg-load("#{$icon-base-path}button-left.svg");
+        }
+        &:end {
+            width: 16px;
+            background-image: svg-load("#{$icon-base-path}button-right.svg");
+        }
+    }
+}

package/dist/scss/_groupbox.scss

@@ -0,0 +1,44 @@
+/*-------------------------------------------*\
+    GroupBox
+\*-------------------------------------------*/
+
+@use "variables" as *;
+
+fieldset {
+    border-image: svg-load("#{$icon-base-path}groupbox-border.svg") 2;
+    padding: calc(2 * var(--border-width) + var(--element-spacing));
+    padding-block-start: var(--element-spacing);
+    margin: 0;
+}
+legend {
+    background: var(--surface);
+}
+.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/scss/_logon.scss

@@ -0,0 +1,375 @@
+
+.logon-screen {
+  width: 100vw;
+  height: 100vh;
+  background-color: #508fd9;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  &__top,
+  &__bottom {
+    background-color: #004da3;
+    flex-basis: 12.5%;
+    border-style: solid;
+    border-image-slice: 1;
+  }
+  &__top {
+    border-image-source: linear-gradient(
+      90deg,
+      rgba(0, 77, 163, 1) 0%,
+      rgba(255, 255, 255, 0.8) 30%,
+      rgba(255, 255, 255, 0.9) 40%,
+      rgba(255, 255, 255, 0.9) 50%,
+      rgba(0, 77, 163, 1) 100%
+    );
+    border-width: 0 0 4px 0;
+  }
+  &__bottom {
+    padding: 40px 80px 40px 40px;
+    display: flex;
+    justify-content: space-between;
+    border-image-source: linear-gradient(
+      90deg,
+      rgba(0, 77, 163, 1) 0%,
+      rgba(240, 150, 68, 1) 30%,
+      rgba(240, 150, 68, 1) 40%,
+      rgba(240, 150, 68, 1) 50%,
+      rgba(0, 77, 163, 1) 100%
+    );
+    border-width: 4px 0 0 0;
+  }
+  &__center {
+    flex: 1;
+    display: flex;
+    background-image: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.6) -21%,
+      rgba(255, 255, 255, 0) 60%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    background-size: 700px 700px;
+    background-position: -240px -210px;
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+  &__instructions,
+  &__accounts {
+    flex-basis: 50%;
+  }
+  &__instructions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-right: 30px;
+    align-items: flex-end;
+    border-right-width: 1px;
+    border-image-source: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 5%,
+      rgba(255, 255, 255, 0.5) 15%,
+      rgba(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0.5) 85%,
+      rgba(255, 255, 255, 0) 95%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    border-image-slice: 0 1 0 0;
+    border-right-style: solid;
+
+    img,
+    span {
+      display: block;
+    }
+    img {
+      max-height: 125px;
+      max-width: 250px;
+      margin-bottom: 25px;
+    }
+    span {
+      text-align: right;
+      font-size: 24px;
+    }
+  }
+  &__accounts {
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  &__account {
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    min-width: 470px;
+    max-width: 100%;
+    opacity: 0.6;
+    padding: 12px;
+    border-radius: 8px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    border-right: 0;
+    position: relative;
+    background-clip: padding-box;
+    border: 1px solid transparent;
+
+    &-icon {
+      width: 80px;
+      height: 80px;
+      margin-right: 20px;
+      border: 3px solid #fff;
+      border-radius: 5px;
+      box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &-details {
+      position: relative;
+    }
+    &-name {
+      font-size: 24px;
+      margin-bottom: 20px;
+      display: block;
+    }
+    &:hover,
+    &.active,
+    &.logging-in {
+      opacity: 1;
+      .logon-screen__account-icon {
+        border-color: #ffcc36;
+      }
+      .logon-screen__account-name {
+        margin-bottom: 2px;
+      }
+    }
+    &.active {
+      cursor: pointer;
+      background: linear-gradient(90deg, rgb(0, 72, 154) 56%, rgba(0, 72, 154, 32) 30%, rgba(255, 255, 255, 0) 100%);
+      background-clip: padding-box;
+
+      &::after {
+        content: '';
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.6) 40%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        border-radius: 8px;
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px;
+        z-index: -1;
+        pointer-events: none;
+      }
+      .logon-screen__password {
+        display: block;
+      }
+    }
+  }
+  &__password {
+    display: none;
+    position: absolute;
+    bottom: -20px;
+
+    > span {
+      display: block;
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+    input {
+      padding: 5px;
+      border: 0;
+      border-radius: 5px;
+      width: 160px;
+      line-height: 39px;
+      height: 32px !important;
+      font-size: 30px;
+      box-shadow: #00489a 2px 2px 0px 0px;
+      outline: none;
+    }
+    button {
+      cursor: pointer;
+      margin-left: 8px;
+      border: 1px solid #fff;
+      border-radius: 5px;
+      width: 32px;
+      height: 32px;
+      min-width: 0;
+      background-image: linear-gradient(
+        150deg,
+        rgba(255, 255, 255, 0.7) 0%,
+        rgba(70, 161, 252, 0) 50%
+      );
+      background-repeat: no-repeat;
+      box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.7);
+      position: relative;
+
+      &.logon-screen__submit {
+        background-color: #3eb34d;
+
+        outline: none;
+
+        &:not(:disabled) {
+            &:active,
+            &.active {
+              box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.9);
+              background-color: #339741 !important;
+              background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, rgba(70, 161, 252, 0) 50%);
+            }
+            &:hover {
+              box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.7);
+            }
+        }
+        &:focus,
+        &.focused {
+              box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.9);
+              background-color: #3eb34d;
+        }
+        &::-moz-focus-inner {
+            border: 0;
+        }
+
+        &::before,
+        &::after {
+          content: '';
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 12px 0 12px 12px;
+          border-color: transparent transparent transparent #ffffff;
+          position: absolute;
+          top: 50%;
+          right: 4px;
+          transform: translateY(-50%);
+        }
+        &::after {
+          border-width: 7px 0 7px 7px;
+          border-color: #3eb34d;
+          border-color: transparent transparent transparent #3eb34d;
+          right: 9px;
+        }
+        span {
+          background-color: #fff;
+          position: absolute;
+          height: 4px;
+          width: 17px;
+          top: 50%;
+          transform: translateY(-50%);
+          right: 9px;
+          z-index: 1;
+        }
+      }
+      &.logon-screen__question {
+        background-color: #0573f3;
+        font-size: 30px;
+        font-weight: 900;
+        color: #fff;
+        display: none;
+
+        span {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          line-height: 0;
+        }
+      }
+    }
+    > form {
+      display: flex;
+      margin-left: -5px;
+    }
+  }
+
+  &__turn-off {
+    display: flex;
+    align-items: start;
+    flex-grow: 0;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    span {
+      margin-left: 10px;
+      font-size: 24px;
+    }
+    &-icon {
+      position: relative;
+      background-color: #da5020;
+      border: 1px solid #fff;
+      border-radius: 5px;
+      width: 32px;
+      min-width: 0;
+      height: 32px;
+      background-image: linear-gradient(
+        150deg,
+        rgba(255, 255, 255, 0.7) 0%,
+        rgba(70, 161, 252, 0) 50%
+      );
+
+      outline: none;
+      box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.4);
+
+      &:not(:disabled) {
+          &:active,
+          &.active {
+            box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.4);
+            background-color: #da5020 !important;
+            background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, rgba(70, 161, 252, 0) 50%);
+          }
+          &:hover {
+            box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.4);
+          }
+      }
+      &:focus,
+      &.focused {
+            box-shadow: 2px 2px 0px 0px #00489a, inset -1px -2px 4px 0 rgba(0, 0, 0, 0.4);
+            background-color: #da5020;
+      }
+      &::-moz-focus-inner {
+          border: 0;
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &::before {
+        border: 3px solid #fff;
+        border-radius: 50px;
+        width: 14px;
+        height: 14px;
+      }
+      &::after {
+        background-color: #fff;
+        width: 3px;
+        height: 8px;
+      }
+    }
+  }
+  &__logon-info {
+  }
+}
+
+.welcome-text {
+  font-style: italic;
+  font-size: 76px;
+  font-weight: 900;
+  text-shadow: 3px 4px #00489a;
+}
+.logging-in {
+  .loading-settings {
+    color: #00489a;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}