tgui-core 1.0.0

package/styles/components/Tabs.scss

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:math';
+@use '../base.scss';
+@use '../colors.scss';
+
+$color-default: color.scale(
+  colors.fg(colors.$primary),
+  $lightness: 75%
+) !default;
+$text-color: rgba(255, 255, 255, 0.5) !default;
+$text-color-selected: color.scale($color-default, $lightness: 25%) !default;
+$tab-color: transparent !default;
+$tab-color-hovered: rgba(255, 255, 255, 0.075) !default;
+$tab-color-selected: rgba(255, 255, 255, 0.125) !default;
+$border-radius: base.$border-radius !default;
+$fg-map: colors.$fg-map !default;
+
+.Tabs {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  background-color: base.$color-bg-section;
+}
+
+.Tabs--fill {
+  height: 100%;
+}
+
+// Interoperability with sections
+.Section .Tabs {
+  background-color: transparent;
+}
+
+.Section:not(.Section--fitted) .Tabs {
+  margin: 0 -0.5em 0.5em;
+
+  &:first-child {
+    margin-top: -0.5em;
+  }
+}
+
+.Tabs--vertical {
+  flex-direction: column;
+  padding: 0.25em 0 0.25em 0.25em;
+}
+
+.Tabs--horizontal {
+  margin-bottom: 0.5em;
+  padding: 0.25em 0.25em 0 0.25em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.Tabs__Tab {
+  flex-grow: 0;
+}
+
+.Tabs--fluid .Tabs__Tab {
+  flex-grow: 1;
+}
+
+.Tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $tab-color;
+  color: $text-color;
+  min-height: 2.25em;
+  min-width: 4em;
+}
+
+.Tab:not(.Tab--selected):hover {
+  background-color: $tab-color-hovered;
+}
+
+.Tab--selected {
+  background-color: $tab-color-selected;
+  color: $text-color-selected;
+}
+
+.Tab__text {
+  flex-grow: 1;
+  margin: 0 0.5em;
+}
+
+.Tab__left {
+  min-width: 1.5em;
+  text-align: center;
+  margin-left: 0.25em;
+}
+
+.Tab__right {
+  min-width: 1.5em;
+  text-align: center;
+  margin-right: 0.25em;
+}
+
+.Tabs--horizontal {
+  .Tab {
+    border-top: math.div(1em, 6) solid transparent;
+    border-bottom: math.div(1em, 6) solid transparent;
+    border-top-left-radius: 0.25em;
+    border-top-right-radius: 0.25em;
+  }
+
+  .Tab--selected {
+    border-bottom: math.div(1em, 6) solid $color-default;
+  }
+}
+
+.Tabs--vertical {
+  .Tab {
+    min-height: 2em;
+    border-left: math.div(1em, 6) solid transparent;
+    border-right: math.div(1em, 6) solid transparent;
+    border-top-left-radius: 0.25em;
+    border-bottom-left-radius: 0.25em;
+  }
+
+  .Tab--selected {
+    border-right: math.div(1em, 6) solid $color-default;
+  }
+}
+
+@each $color-name, $color-value in $fg-map {
+  .Tab--selected.Tab--color--#{$color-name} {
+    color: color.scale($color-value, $lightness: 25%);
+  }
+
+  .Tabs--horizontal .Tab--selected.Tab--color--#{$color-name} {
+    border-bottom-color: $color-value;
+  }
+
+  .Tabs--vertical .Tab--selected.Tab--color--#{$color-name} {
+    border-right-color: $color-value;
+  }
+}

package/styles/components/TextArea.scss

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../base.scss';
+@use '../functions.scss' as *;
+@use './Input.scss';
+
+$text-color: Input.$text-color !default;
+$background-color: Input.$background-color !default;
+$border-color: Input.$border-color !default;
+$border-radius: Input.$border-radius !default;
+
+.TextArea {
+  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;
+  background-color: $background-color;
+  margin-right: base.em(2px);
+  line-height: base.em(17px);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.TextArea--fluid {
+  display: block;
+  width: auto;
+  height: auto;
+}
+
+.TextArea--noborder {
+  border: 0px;
+}
+
+.TextArea__textarea.TextArea__textarea--scrollable {
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.TextArea__textarea {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 0;
+  outline: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 1em;
+  line-height: base.em(17px);
+  min-height: base.em(17px);
+  margin: 0;
+  padding: 0 0.5em;
+  font-family: inherit;
+  background-color: transparent;
+  color: inherit;
+  box-sizing: border-box;
+  // Make sure the div and the textarea wrap words in the same way
+  word-wrap: break-word;
+  overflow: hidden;
+
+  &:-ms-input-placeholder {
+    font-style: italic;
+    color: #777;
+    color: rgba(255, 255, 255, 0.45);
+  }
+}
+
+.TextArea__textarea_custom {
+  overflow: visible;
+  white-space: pre-wrap;
+}
+
+.TextArea__nowrap {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  overflow-x: scroll;
+}

package/styles/components/Tooltip.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../base.scss';
+@use '../functions.scss' as *;
+
+$color: #ffffff !default;
+$background-color: #000000 !default;
+$border-radius: base.$border-radius !default;
+
+.Tooltip {
+  z-index: 2;
+  padding: 0.5em 0.75em;
+  pointer-events: none;
+  text-align: left;
+  transition: opacity 150ms ease-out;
+  background-color: $background-color;
+  color: $color;
+  box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
+  border-radius: $border-radius;
+  max-width: base.em(250px);
+}

package/styles/functions.scss

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+//  Type-casting
+// --------------------------------------------------------
+
+// Get a unit-less numeric value
+@function num($value) {
+  @if meta.type-of($value) != number {
+    @error 'Could not convert `#{$value}` - must be `type-of number`';
+    @return null;
+  }
+  @if math.unit($value) == "%" {
+    @return math.div($value, 100%);
+  }
+  @return math.div($value, $value * 0 + 1);
+}
+
+//  Color
+// --------------------------------------------------------
+
+// Increases perceptual color lightness.
+@function lighten($color, $percent) {
+  $scaled: hsl(
+    color.hue($color),
+    color.saturation($color),
+    color.lightness($color) * (1 + num($percent))
+  );
+  $mixed: color.mix(#ffffff, $color, 100% * num($percent));
+  @return color.mix($scaled, $mixed, 75%);
+}
+
+// Returns the NTSC luminance of `$color` as a float (between 0 and 1).
+// 1 is pure white, 0 is pure black.
+@function luminance($color) {
+  $colors: (
+    "red": color.red($color),
+    "green": color.green($color),
+    "blue": color.blue($color),
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: math.div($value, 255);
+    @if $value < 0.03928 {
+      $value: math.div($value, 12.92);
+    } @else {
+      $value: math.div($value + 0.055, 1.055);
+      $value: math.pow($value, 2.4);
+    }
+
+    $colors: map.merge(
+      $colors,
+      (
+        $name: $value,
+      )
+    );
+  }
+
+  @return (map.get($colors, "red") * 0.2126) +
+    (map.get($colors, "green") * 0.7152) + (map.get($colors, "blue") * 0.0722);
+}
+
+// Blends an RGBA color with a static background color based on its
+// alpha channel. Returns an RGB color, which is compatible with IE8.
+@function fake-alpha($color-rgba, $color-background) {
+  @return color.mix(
+    color.change($color-rgba, $alpha: 1),
+    $color-background,
+    color.alpha($color-rgba) * 100%
+  );
+}

package/styles/layouts/Layout.scss

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use '../base.scss';
+
+$scrollbar-color-multiplier: 1 !default;
+
+.Layout,
+.Layout * {
+  // Fancy scrollbar
+  scrollbar-base-color: color.scale(
+    base.$color-bg,
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
+  scrollbar-face-color: color.scale(
+    base.$color-bg,
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
+  scrollbar-3dlight-color: color.scale(
+    base.$color-bg,
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
+  scrollbar-highlight-color: color.scale(
+    base.$color-bg,
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
+  scrollbar-track-color: color.scale(
+    base.$color-bg,
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
+  scrollbar-arrow-color: color.scale(
+    base.$color-bg,
+    $lightness: 50% * $scrollbar-color-multiplier
+  );
+  scrollbar-shadow-color: color.scale(
+    base.$color-bg,
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
+}
+
+.Layout__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.Layout__content--scrollable {
+  overflow-y: scroll;
+  margin-bottom: 0;
+}

package/styles/layouts/NtosHeader.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.NtosHeader__left {
+  position: absolute;
+  left: 1em;
+}
+
+.NtosHeader__right {
+  position: absolute;
+  right: 1em;
+}
+
+.NtosHeader__icon {
+  margin-top: -0.75em;
+  margin-bottom: -0.5em;
+  vertical-align: middle;
+}

package/styles/layouts/NtosWindow.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use '../base.scss';
+
+.NtosWindow__header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2em;
+  line-height: 1.928em;
+  background-color: rgba(0, 0, 0, 0.5);
+  font-family: Consolas, monospace;
+  font-size: base.em(14px);
+  user-select: none;
+  -ms-user-select: none;
+}
+
+.NtosWindow__content .Layout__content {
+  margin-top: 2em;
+  font-family: Consolas, monospace;
+  font-size: base.em(14px);
+}

package/styles/layouts/TitleBar.scss

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use '../base.scss';
+@use '../colors.scss';
+
+$text-color: rgba(255, 255, 255, 0.75) !default;
+$background-color: #363636 !default;
+$shadow-color-core: #161616 !default;
+$shadow-color: rgba(0, 0, 0, 0.1) !default;
+
+.TitleBar {
+  background-color: $background-color;
+  border-bottom: 1px solid $shadow-color-core;
+  box-shadow: 0 2px 2px $shadow-color;
+  box-shadow: 0 base.rem(2px) base.rem(2px) $shadow-color;
+  user-select: none;
+  -ms-user-select: none;
+}
+
+.TitleBar__clickable {
+  color: color.change($text-color, $alpha: 0.5);
+  background-color: $background-color;
+  transition:
+    color 250ms ease-out,
+    background-color 250ms ease-out;
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+    background-color: #cc0000;
+    transition:
+      color 0ms,
+      background-color 0ms;
+  }
+}
+
+.TitleBar__title {
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  left: 46px;
+  left: base.rem(46px);
+  color: $text-color;
+  font-size: 14px;
+  font-size: base.rem(14px);
+  line-height: 31px;
+  line-height: base.rem(31px);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.TitleBar__buttons {
+  pointer-events: initial;
+  display: inline-block;
+  width: 100%;
+  margin-left: 10px;
+}
+
+.TitleBar__dragZone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  height: base.rem(32px);
+}
+
+.TitleBar__statusIcon {
+  position: absolute;
+  top: 0;
+  left: 12px;
+  left: base.rem(12px);
+  transition: color 0.5s;
+  font-size: 20px;
+  font-size: base.rem(20px);
+  line-height: 32px !important;
+  line-height: base.rem(32px) !important;
+}
+
+.TitleBar__close {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  width: 45px;
+  width: base.rem(45px);
+  height: 32px;
+  height: base.rem(32px);
+  font-size: 20px;
+  font-size: base.rem(20px);
+  line-height: 31px;
+  line-height: base.rem(31px);
+  text-align: center;
+}
+
+.TitleBar__devBuildIndicator {
+  position: absolute;
+  top: 6px;
+  top: base.rem(6px);
+  right: 52px;
+  right: base.rem(52px);
+  min-width: 20px;
+  min-width: base.rem(20px);
+  padding: 2px 4px;
+  padding: base.rem(2px) base.rem(4px);
+  background-color: rgba(colors.$good, 0.75);
+  color: #fff;
+  text-align: center;
+}

package/styles/layouts/Window.scss

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use '../base.scss';
+@use '../functions.scss' as *;
+
+.Window {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: base.$color-fg;
+  background-color: base.$color-bg;
+  background-image: linear-gradient(
+    to bottom,
+    base.$color-bg-start 0%,
+    base.$color-bg-end 100%
+  );
+}
+
+.Window__titleBar {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  height: base.rem(32px);
+}
+
+// Everything after the title bar
+.Window__rest {
+  position: fixed;
+  top: 32px;
+  top: base.rem(32px);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.Window__contentPadding {
+  margin: 0.5rem;
+  // IE8: Calc not supported
+  height: 100%;
+  // 0.01 is needed to make the scrollbar not appear
+  // due to rem rendering inaccuracies in IE11.
+  height: calc(100% - 1.01rem);
+}
+
+.Window__contentPadding:after {
+  height: 0;
+}
+
+.Layout__content--scrollable .Window__contentPadding:after {
+  display: block;
+  content: '';
+  height: 0.5rem;
+}
+
+.Window__dimmer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(lighten(base.$color-bg, 30%), 0.25);
+  pointer-events: none;
+}
+
+.Window__resizeHandle__se {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 20px;
+  width: base.rem(20px);
+  height: 20px;
+  height: base.rem(20px);
+  cursor: se-resize;
+}
+
+.Window__resizeHandle__s {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  height: base.rem(6px);
+  cursor: s-resize;
+}
+
+.Window__resizeHandle__e {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 3px;
+  width: base.rem(3px);
+  cursor: e-resize;
+}