tgui-core 1.7.0 → 1.7.1

package/styles/components/ImageButton.scss

@@ -0,0 +1,273 @@
+/**
+ * @file
+ * @copyright 2024 Aylong (https://github.com/AyIong)
+ * @license MIT
+ */
+
+@use "../base";
+@use "../colors";
+@use "../functions" as *;
+
+$color-default: colors.bg(base.$color-bg-section) !default;
+$color-disabled: hsl(0, 54.7%, 25.1%) !default;
+$color-selected: colors.bg(colors.$green) !default;
+$color-divider: rgba(255, 255, 255, 0.1) !default;
+$divider-thickness: base.em(2px) !default;
+$bg-map: colors.$bg-map !default;
+
+@mixin button-style(
+  $color,
+  $border-color: rgba(lighten($color, 50%), 0.2),
+  $border-width: 1px 0 0 0,
+  $opacity: 0.2,
+  $hoverable: true,
+  $transition-duration: 0.2s
+) {
+  $luminance: luminance($color);
+  $text-color: if($luminance > 0.3, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
+
+  background-color: rgba($color, $opacity);
+  color: $text-color;
+  border: solid $border-color;
+  border-width: $border-width;
+  transition:
+    background-color $transition-duration,
+    border-color $transition-duration;
+
+  @if $hoverable {
+    &:hover {
+      background-color: rgba(lighten($color, 50%), $opacity);
+    }
+  }
+}
+
+@each $color-name, $color-value in $bg-map {
+  .ImageButton--color__#{$color-name} {
+    @include button-style($color-value, $border-width: 1px);
+  }
+
+  .ImageButton--contentColor__#{$color-name} {
+    @include button-style(
+      $color-value,
+      $border-color: lighten($color-value, 25%),
+      $opacity: 1,
+      $hoverable: false
+    );
+  }
+
+  .ImageButton--buttonsContainerColor__#{$color-name} {
+    @include button-style(
+      $color-value,
+      $border-width: 1px 1px 1px 0,
+      $opacity: 0.33,
+      $hoverable: false,
+      $transition-duration: 0
+    );
+  }
+}
+
+.ImageButton--color__default {
+  @include button-style(lighten($color-default, 85%), $border-width: 1px);
+}
+
+.ImageButton--disabled {
+  background-color: rgba($color-disabled, 0.25) !important;
+  border-color: rgba($color-disabled, 0.25) !important;
+}
+
+.ImageButton--selected {
+  @include button-style(
+    $color-selected,
+    $border-color: rgba($color-selected, 0.25),
+    $border-width: 1px
+  );
+}
+
+.ImageButton--contentColor__default {
+  @include button-style(
+    lighten($color-default, 80%),
+    $border-color: lighten($color-default, 100%),
+    $opacity: 1,
+    $hoverable: false
+  );
+}
+
+.ImageButton--contentDisabled {
+  background-color: $color-disabled !important;
+  border-top: 1px solid lighten($color-disabled, 25%) !important;
+}
+
+.ImageButton--contentSelected {
+  @include button-style(
+    $color-selected,
+    $border-color: lighten($color-selected, 25%),
+    $opacity: 1,
+    $hoverable: false
+  );
+}
+
+.ImageButton--buttonsContainerColor__default {
+  @include button-style(
+    lighten($color-default, 85%),
+    $border-width: 1px 1px 1px 0,
+    $hoverable: false,
+    $transition-duration: 0
+  );
+}
+
+.ImageButton {
+  /* Better replace via inline-flex after Byond 516 will be stable */
+  display: inline-table;
+  position: relative;
+  text-align: center;
+  margin: 0.25em;
+  user-select: none;
+  -ms-user-select: none;
+
+  .noAction {
+    pointer-events: none;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.33em;
+  }
+
+  .image {
+    position: relative;
+    align-self: center;
+    pointer-events: none;
+    overflow: hidden;
+    line-height: 0;
+    padding: 0.25em;
+    border-radius: 0.33em;
+  }
+
+  .buttonsContainer {
+    display: flex;
+    position: absolute;
+    overflow: hidden;
+    left: 1px;
+    bottom: 1.8em;
+    max-width: 100%;
+    z-index: 1;
+
+    &.buttonsAltContainer {
+      overflow: visible;
+      flex-direction: column;
+      pointer-events: none;
+      top: 1px;
+      bottom: inherit !important;
+    }
+
+    &.buttonsEmpty {
+      bottom: 1px;
+    }
+
+    & > * {
+      /* I know !important is bad, but here's no other way */
+      margin: 0 !important;
+      padding: 0 0.2em !important;
+      border-radius: 0 !important;
+    }
+  }
+
+  .content {
+    -ms-user-select: none;
+    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0.25em 0.33em;
+    margin: -1px;
+    border-radius: 0 0 0.33em 0.33em;
+    z-index: 2;
+  }
+}
+
+.ImageButton--fluid {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  text-align: center;
+  margin: 0 0 0.33em 0;
+  user-select: none;
+  -ms-user-select: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+  }
+
+  .title {
+    font-weight: bold;
+    padding: 0.5em;
+
+    &.divider {
+      margin: 0 0.5em;
+      border-bottom: $divider-thickness solid $color-divider;
+    }
+  }
+
+  .contentFluid {
+    padding: 0.5em;
+    color: white;
+  }
+
+  .container {
+    flex-direction: row;
+    flex: 1;
+
+    &.hasButtons {
+      border-radius: 0.33em 0 0 0.33em;
+      border-width: 1px 0 1px 1px;
+    }
+  }
+
+  .image {
+    padding: 0;
+  }
+
+  .buttonsContainer {
+    position: relative;
+    left: inherit;
+    bottom: inherit;
+    border-radius: 0 0.33em 0.33em 0;
+
+    &.buttonsEmpty {
+      bottom: inherit;
+    }
+
+    &.buttonsAltContainer {
+      overflow: hidden;
+      pointer-events: auto;
+      top: inherit;
+
+      & > * {
+        border-top: 1px solid rgba(255, 255, 255, 0.075);
+
+        &:first-child {
+          border-top: 0;
+        }
+      }
+    }
+
+    & > * {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      white-space: pre-wrap;
+      line-height: base.em(14px);
+      height: 100%;
+      border-left: 1px solid rgba(255, 255, 255, 0.075);
+    }
+  }
+}

package/styles/components/Input.scss

@@ -0,0 +1,63 @@
+@use "../base";
+@use "../functions" as *;
+
+$text-color: base.$color-fg !default;
+$background-color: hsl(0, 0%, 3.9%) !default;
+$border-color: hsl(212.3, 100%, 76.7%) !default;
+$border-radius: base.$border-radius !default;
+
+.Input {
+  position: relative;
+  display: inline-block;
+  width: base.em(120px);
+  border: base.em(1px) solid $border-color;
+  border: base.em(1px) solid rgba($border-color, 0.75);
+  border-radius: $border-radius;
+  color: $text-color;
+  background-color: $background-color;
+  padding: 0 base.em(4px);
+  margin-right: base.em(2px);
+  line-height: base.em(17px);
+  overflow: visible;
+}
+
+.Input--fluid {
+  display: block;
+  width: auto;
+}
+
+.Input__baseline {
+  display: inline-block;
+  color: transparent;
+}
+
+.Input__input {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 0;
+  outline: 0;
+  width: 100%;
+  font-size: base.em(12px);
+  line-height: base.em(17px);
+  height: base.em(17px);
+  margin: 0;
+  padding: 0 0.5em;
+  font-family: Verdana, sans-serif;
+  background-color: transparent;
+  color: $text-color;
+  color: inherit;
+
+  &:-ms-input-placeholder {
+    font-style: italic;
+    color: hsl(0, 0%, 46.7%);
+    color: hsla(0, 0%, 100%, 0.45);
+  }
+}
+
+.Input--monospace .Input__input {
+  font-family: "Consolas", monospace;
+}

package/styles/components/Knob.scss

@@ -0,0 +1,126 @@
+@use "../base";
+@use "../colors";
+@use "../functions" as *;
+
+$bg-map: colors.$bg-map !default;
+$fg-map: colors.$fg-map !default;
+$ring-color: hsl(212.2, 46.8%, 60.2%) !default;
+$knob-color: hsl(0, 0%, 20%) !default;
+$popup-background-color: hsl(0, 0%, 0%) !default;
+$popup-text-color: hsl(0, 0%, 100%) !default;
+
+$inner-padding: 0.1em;
+
+.Knob {
+  position: relative;
+  font-size: 1rem;
+  width: 2.6em;
+  height: 2.6em;
+  margin: 0 auto;
+  margin-bottom: -0.2em;
+  cursor: n-resize;
+
+  // Adjusts a baseline in a way, that makes knob middle-aligned
+  // when it flows with the text.
+  &:after {
+    content: ".";
+    color: transparent;
+    line-height: 2.5em;
+  }
+}
+
+.Knob__circle {
+  position: absolute;
+  top: $inner-padding;
+  bottom: $inner-padding;
+  left: $inner-padding;
+  right: $inner-padding;
+  margin: 0.3em;
+  background-color: $knob-color;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  border-radius: 50%;
+  box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
+}
+
+.Knob__cursorBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.Knob__cursor {
+  position: relative;
+  top: 0.05em;
+  margin: 0 auto;
+  width: 0.2em;
+  height: 0.8em;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.Knob__popupValue {
+  position: absolute;
+  top: -2rem;
+  right: 50%;
+  font-size: 1rem;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+  color: $popup-text-color;
+  background-color: $popup-background-color;
+  transform: translateX(50%);
+  white-space: nowrap;
+}
+
+.Knob__ring {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: $inner-padding;
+}
+
+$pi: 3.1416;
+
+.Knob__ringTrackPivot {
+  transform: rotateZ(135deg);
+}
+
+.Knob__ringTrack {
+  // transform-origin: 50% 50%;
+  fill: transparent;
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-dasharray: 75 * $pi;
+}
+
+.Knob__ringFillPivot {
+  transform: rotateZ(135deg);
+}
+
+.Knob--bipolar .Knob__ringFillPivot {
+  transform: rotateZ(270deg);
+}
+
+.Knob__ringFill {
+  fill: transparent;
+  stroke: $ring-color;
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-dasharray: 100 * $pi;
+  transition: stroke 50ms ease-out;
+}
+
+@each $color-name, $color-value in $fg-map {
+  .Knob--color--#{$color-name} {
+    .Knob__ringFill {
+      stroke: $color-value;
+    }
+  }
+}

package/styles/components/LabeledList.scss

@@ -0,0 +1,44 @@
+@use "../base";
+
+.LabeledList {
+  display: table;
+  // IE8: Does not support calc
+  width: 100%;
+  // Compensate for negative margin
+  width: calc(100% + 1em);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: -0.25em -0.5em;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.LabeledList__row {
+  display: table-row;
+}
+
+.LabeledList__row:last-child .LabeledList__cell {
+  padding-bottom: 0;
+}
+
+.LabeledList__cell {
+  display: table-cell;
+  margin: 0;
+  padding: 0.25em 0.5em;
+  border: 0;
+  text-align: left;
+}
+
+.LabeledList__label--nowrap {
+  width: 1%;
+  white-space: nowrap;
+  min-width: 5em;
+}
+
+.LabeledList__buttons {
+  width: 0.1%;
+  white-space: nowrap;
+  text-align: right;
+  padding-top: base.em(1px);
+  padding-bottom: 0;
+}

package/styles/components/MenuBar.scss

@@ -0,0 +1,71 @@
+@use "sass:color";
+@use "../base";
+
+$separator-color: base.$color-bg-section;
+$background-color: base.$color-bg !default;
+$dropdown-z-index: 5;
+
+.MenuBar {
+  display: flex;
+}
+
+.MenuBar__font {
+  font-family: Verdana, sans-serif;
+  font-size: base.em(12px);
+  line-height: base.em(17px);
+}
+
+.MenuBar__hover {
+  &:hover {
+    background-color: color.adjust($background-color, $lightness: 30%);
+    transition: background-color 0ms;
+  }
+}
+
+.MenuBar__MenuBarButton {
+  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
+}
+
+.MenuBar__menu {
+  position: absolute;
+  z-index: $dropdown-z-index;
+  background-color: $background-color;
+  padding: 0.3rem 0.3rem 0.3rem 0.3rem;
+  box-shadow: 4px 6px 5px -2px rgba(0, 0, 0, 0.55);
+}
+
+.MenuBar__MenuItem {
+  z-index: $dropdown-z-index;
+  transition: background-color 100ms ease-out;
+  background-color: $background-color;
+  white-space: nowrap;
+  padding: 0.3rem 2rem 0.3rem 3rem;
+}
+
+.MenuBar__MenuItemToggle {
+  padding: 0.3rem 2rem 0.3rem 0;
+}
+
+.MenuBar__MenuItemToggle__check {
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 3rem;
+  margin-left: 0.3rem;
+}
+
+.MenuBar__over {
+  top: auto;
+  bottom: 100%;
+}
+
+.MenuBar__MenuBarButton-text {
+  text-overflow: clip;
+  white-space: nowrap;
+  height: base.em(17px);
+}
+
+.MenuBar__Separator {
+  display: block;
+  margin: 0.3rem 0.3rem 0.3rem 2.3rem;
+  border-top: 1px solid $separator-color;
+}

package/styles/components/Modal.scss

@@ -0,0 +1,9 @@
+@use "../base";
+
+$background-color: base.$color-bg !default;
+
+.Modal {
+  background-color: $background-color;
+  max-width: calc(100% - 1rem);
+  padding: 1rem;
+}

package/styles/components/NoticeBox.scss

@@ -0,0 +1,60 @@
+@use "sass:color";
+@use "../base";
+@use "../colors";
+@use "../functions" as *;
+
+// NoticeBox
+$background-color: hsl(36.9, 37.9%, 57.1%) !default;
+$color-stripes: rgba(0, 0, 0, 0.1) !default;
+$color-border: hsl(0, 0%, 15.3%) !default;
+$bg-map: colors.$bg-map !default;
+
+.NoticeBox {
+  // Adapt text color to background luminance to ensure high contast
+  $luminance: luminance($background-color);
+  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
+
+  padding: 0.33em 0.5em;
+  margin-bottom: 0.5em;
+  box-shadow: none;
+  font-weight: bold;
+  font-style: italic;
+  color: $text-color;
+  background-color: $background-color;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent base.em(10px),
+    $color-stripes base.em(10px),
+    $color-stripes base.em(20px)
+  );
+}
+
+@mixin box-color($color) {
+  $luminance: luminance($color);
+  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
+  color: $text-color;
+  background-color: color.adjust($color, $saturation: -15%, $lightness: -15%);
+}
+
+@each $color-name, $color-value in $bg-map {
+  .NoticeBox--color--#{$color-name} {
+    @include box-color($color-value);
+  }
+}
+
+.NoticeBox--type--info {
+  @include box-color(colors.$blue);
+}
+
+.NoticeBox--type--success {
+  @include box-color(colors.$green);
+}
+
+.NoticeBox--type--warning {
+  @include box-color(colors.$orange);
+}
+
+.NoticeBox--type--danger {
+  @include box-color(colors.$red);
+}

package/styles/components/NumberInput.scss

@@ -0,0 +1,71 @@
+@use "sass:color";
+@use "../base";
+@use "../functions" as *;
+@use "./Input";
+
+$text-color: Input.$text-color !default;
+$background-color: Input.$background-color !default;
+$border-color: Input.$border-color !default;
+$border-radius: Input.$border-radius !default;
+
+.NumberInput {
+  position: relative;
+  display: inline-block;
+  border: base.em(1px) solid $border-color;
+  border: base.em(1px) solid rgba($border-color, 0.75);
+  border-radius: $border-radius;
+  color: $border-color;
+  background-color: $background-color;
+  padding: 0 base.em(4px);
+  margin-right: base.em(2px);
+  line-height: base.em(17px);
+  text-align: right;
+  overflow: visible;
+  cursor: n-resize;
+}
+
+.NumberInput--fluid {
+  display: block;
+}
+
+.NumberInput__content {
+  margin-left: 0.5em;
+}
+
+.NumberInput__barContainer {
+  position: absolute;
+  top: base.em(2px);
+  bottom: base.em(2px);
+  left: base.em(2px);
+}
+
+.NumberInput__bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: base.em(3px);
+  box-sizing: border-box;
+  border-bottom: base.em(1px) solid $border-color;
+  background-color: $border-color;
+}
+
+.NumberInput__input {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 0;
+  outline: 0;
+  width: 100%;
+  font-size: base.em(12px);
+  line-height: base.em(17px);
+  height: base.em(17px);
+  margin: 0;
+  padding: 0 0.5em;
+  font-family: Verdana, sans-serif;
+  background-color: $background-color;
+  color: $text-color;
+  text-align: right;
+}