tgui-core 1.0.0

package/styles/main.scss

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:meta';
+@use './base.scss';
+
+// Core styles
+@include meta.load-css('./reset.scss');
+
+// Atomic classes
+@include meta.load-css('./atomic/candystripe.scss');
+@include meta.load-css('./atomic/centered-image.scss');
+@include meta.load-css('./atomic/color.scss');
+@include meta.load-css('./atomic/debug-layout.scss');
+@include meta.load-css('./atomic/fit-text.scss');
+@include meta.load-css('./atomic/links.scss');
+@include meta.load-css('./atomic/outline.scss');
+@include meta.load-css('./atomic/text.scss');
+
+// Components
+@include meta.load-css('./components/BlockQuote.scss');
+@include meta.load-css('./components/Button.scss');
+@include meta.load-css('./components/ColorBox.scss');
+@include meta.load-css('./components/Dialog.scss');
+@include meta.load-css('./components/Dimmer.scss');
+@include meta.load-css('./components/Divider.scss');
+@include meta.load-css('./components/Dropdown.scss');
+@include meta.load-css('./components/Flex.scss');
+@include meta.load-css('./components/Icon.scss');
+@include meta.load-css('./components/Input.scss');
+@include meta.load-css('./components/Knob.scss');
+@include meta.load-css('./components/LabeledList.scss');
+@include meta.load-css('./components/MenuBar.scss');
+@include meta.load-css('./components/Modal.scss');
+@include meta.load-css('./components/NoticeBox.scss');
+@include meta.load-css('./components/NumberInput.scss');
+@include meta.load-css('./components/ProgressBar.scss');
+@include meta.load-css('./components/RoundGauge.scss');
+@include meta.load-css('./components/SearchItem.scss');
+@include meta.load-css('./components/Section.scss');
+@include meta.load-css('./components/Slider.scss');
+@include meta.load-css('./components/Stack.scss');
+@include meta.load-css('./components/Table.scss');
+@include meta.load-css('./components/Tabs.scss');
+@include meta.load-css('./components/TextArea.scss');
+@include meta.load-css('./components/Tooltip.scss');
+
+// Interfaces
+@include meta.load-css('./interfaces/AlertModal.scss');
+@include meta.load-css('./interfaces/Changelog.scss');
+@include meta.load-css('./interfaces/CrewManifest.scss');
+@include meta.load-css('./interfaces/Emojipedia.scss');
+@include meta.load-css('./interfaces/ExperimentConfigure.scss');
+@include meta.load-css('./interfaces/Fabricator.scss');
+@include meta.load-css('./interfaces/Fishing.scss');
+@include meta.load-css('./interfaces/HellishRunes.scss');
+@include meta.load-css('./interfaces/HotKeysHelp.scss');
+@include meta.load-css('./interfaces/Hypertorus.scss');
+@include meta.load-css('./interfaces/IntegratedCircuit.scss');
+@include meta.load-css('./interfaces/LibraryAdmin.scss');
+@include meta.load-css('./interfaces/LibraryComputer.scss');
+@include meta.load-css('./interfaces/ListInput.scss');
+@include meta.load-css('./interfaces/Mecha.scss');
+@include meta.load-css('./interfaces/NtosMessenger.scss');
+@include meta.load-css('./interfaces/NtosNotepad.scss');
+@include meta.load-css('./interfaces/NuclearBomb.scss');
+@include meta.load-css('./interfaces/Orbit.scss');
+@include meta.load-css('./interfaces/Paper.scss');
+@include meta.load-css('./interfaces/PersonalCrafting.scss');
+@include meta.load-css('./interfaces/PreferencesMenu.scss');
+@include meta.load-css('./interfaces/RequestManager.scss');
+@include meta.load-css('./interfaces/Roulette.scss');
+@include meta.load-css('./interfaces/Safe.scss');
+@include meta.load-css('./interfaces/TachyonArray.scss');
+@include meta.load-css('./interfaces/Techweb.scss');
+@include meta.load-css('./interfaces/Trophycase.scss');
+@include meta.load-css('./interfaces/Uplink.scss');
+@include meta.load-css('./interfaces/UtilityModulesPane.scss');
+
+// Layouts
+@include meta.load-css('./layouts/Layout.scss');
+@include meta.load-css('./layouts/NtosHeader.scss');
+@include meta.load-css('./layouts/NtosWindow.scss');
+@include meta.load-css('./layouts/TitleBar.scss');
+@include meta.load-css('./layouts/Window.scss');
+
+@include meta.load-css('highlight.js/scss/github-dark.scss');
+
+// NT Theme
+.Layout__content {
+  background-image: url('../assets/bg-nanotrasen.svg');
+  background-size: 70%;
+  background-position: center;
+  background-repeat: no-repeat;
+}

package/styles/reset.scss

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "./base.scss";
+
+html,
+body {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  font-size: base.$font-size;
+}
+
+html {
+  overflow: hidden;
+  cursor: default; // Reset the cursor.
+}
+
+body {
+  overflow: auto;
+  font-family: Verdana, Geneva, sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: block;
+  margin: 0;
+  padding: 6px 0;
+  padding: 0.5rem 0;
+}
+
+h1 {
+  font-size: 18px;
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 16px;
+  font-size: 1.333rem;
+}
+
+h3 {
+  font-size: 14px;
+  font-size: 1.167rem;
+}
+
+h4 {
+  font-size: 12px;
+  font-size: 1rem;
+}
+
+td,
+th {
+  vertical-align: baseline;
+  text-align: left;
+}

package/styles/themes/abductor.scss

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #ad2350,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #2a314a,
+  $color-bg-grad-spread: 6%,
+  $border-radius: 2px
+);
+
+.theme-abductor {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #465899,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #a82d55)
+  );
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #9e1b46)
+  );
+
+  .Layout__content {
+    background-image: none;
+  }
+}

package/styles/themes/admin.scss

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #1596b6,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #29333a,
+  $color-bg-grad-spread: 6%,
+  $border-radius: 2px
+);
+
+.theme-admin {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+
+  .Layout__content {
+    background-image: url('../../assets/bg-admin.svg');
+  }
+
+  .candystripe:nth-child(odd) {
+    background-color: rgba(12, 49, 71, 0.25);
+  }
+  .candystripe:nth-child(even) {
+    background-color: rgba(33, 114, 206, 0.25);
+  }
+}

package/styles/themes/cardtable.scss

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #000000,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #117039,
+  $color-bg-grad-spread: 0%,
+  $border-radius: 0
+);
+
+//Made for the roulette table, probably requires a bunch of manual hacks to work for anything else
+.theme-cardtable {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #117039,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #fff)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #381608)
+  );
+
+  .Button {
+    border: base.em(2px) solid #fff;
+  }
+}

package/styles/themes/hackerman.scss

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #00ff00,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #121b12,
+  $color-bg-grad-spread: 0%
+);
+
+.theme-hackerman {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #4a6a4a,
+      'color-selected': #00ff00
+    )
+  );
+  @include meta.load-css(
+    '../components/Tabs.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'tab-color-selected': #00ff003f,
+      'text-color': #e7e7e7
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': colors.$primary)
+  );
+  @include meta.load-css('../components/Modal.scss');
+  @include meta.load-css('../components/Section.scss');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #223d22)
+  );
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .Button {
+    font-family: monospace;
+    border-width: base.em(2px);
+    border-style: outset;
+    border-color: #00aa00;
+    outline: base.em(1px) solid rgb(0, 122, 0);
+  }
+
+  .candystripe:nth-child(odd) {
+    background-color: rgba(0, 100, 0, 0.5);
+  }
+}

package/styles/themes/malfunction.scss

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #910101,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #1b3443,
+  $color-bg-grad-spread: 6%
+);
+
+.theme-malfunction {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #1e5881,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #1a3f57)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #235577)
+  );
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1a3f57)
+  );
+
+  .Layout__content {
+    background-image: none;
+  }
+}

package/styles/themes/neutral.scss

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+$neutral: #ffb300;
+
+@use '../colors.scss' with (
+  $primary: $neutral,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: color.scale($neutral, $lightness: -40%),
+  $color-bg-grad-spread: 6%
+);
+
+.theme-neutral {
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': color.scale($neutral, $lightness: -30%),
+      'color-transparent-text': color.scale($neutral, $lightness: 30%)
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $neutral,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
+  );
+  @include meta.load-css('../components/Section.scss');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': color.scale($neutral, $lightness: -25%))
+  );
+
+  .Layout__content {
+    background-image: url('../../assets/bg-neutral.svg');
+  }
+}

package/styles/themes/ntOS95.scss

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+$light-gray: #c3c3c3;
+$dark-gray: #858585;
+$scrollbar-color-multiplier: 1;
+
+@use '../colors.scss' with (
+  $primary: #000000,
+  $good: #007c11,
+  $average: #f0ec11,
+  $bad: #db2828,
+  $label: #000000
+);
+@use '../base.scss' with (
+  $color-bg: #008081,
+  $color-bg-grad-spread: 0%,
+  $border-radius: 0
+);
+
+.theme-ntOS95 {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #e8e4c9,
+      'color-disabled': #707070,
+      'color-selected': #007c11,
+      'color-caution': #be6209,
+      'color-danger': #9d0808
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.4))
+  );
+
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #ecee9e)
+  );
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #000080)
+  );
+
+  .Button {
+    color: #161613;
+    background-color: #c2c2c2;
+    //border: base.em(2px) outset #E8E4C9;
+    outline: base.em(2px) outset #c3c3c3;
+  }
+  .Button:hover {
+    background-color: #002ead;
+    transition: 0.1s;
+  }
+
+  .Section {
+    &__titleText {
+      color: black;
+    }
+    color: black;
+    background-color: #c0c0c0;
+    outline: base.em(2px) outset #c3c3c3;
+  }
+
+  .Input {
+    background-color: white;
+    outline: base.em(2px) inset #c3c3c3;
+    color: black;
+    &__input:-ms-input-placeholder {
+      color: black;
+    }
+  }
+
+  .TextArea {
+    background-color: white;
+    outline: base.em(2px) inset #c3c3c3;
+  }
+
+  .Layout__content {
+    background-image: none;
+  }
+  .Layout,
+  .Layout * {
+    // Fancy scrollbar
+    scrollbar-base-color: color.scale(
+      $light-gray,
+      $lightness: -25% * $scrollbar-color-multiplier
+    );
+    scrollbar-face-color: color.scale(
+      $light-gray,
+      $lightness: 10% * $scrollbar-color-multiplier
+    );
+
+    scrollbar-3dlight-color: color.scale(
+      $light-gray,
+      $lightness: 0% * $scrollbar-color-multiplier
+    );
+    scrollbar-highlight-color: color.scale(
+      $light-gray,
+      $lightness: 0% * $scrollbar-color-multiplier
+    );
+    scrollbar-track-color: color.scale(
+      $light-gray,
+      $lightness: -25% * $scrollbar-color-multiplier
+    );
+    scrollbar-arrow-color: color.scale(
+      $light-gray,
+      $lightness: 50% * $scrollbar-color-multiplier
+    );
+    scrollbar-shadow-color: color.scale(
+      $light-gray,
+      $lightness: 10% * $scrollbar-color-multiplier
+    );
+  }
+
+  .Tab {
+    color: #000000;
+    background-color: #ecee9e;
+  }
+
+  .Tab--selected {
+    color: #9d0808;
+    background-color: #c3c3c3;
+  }
+
+  body {
+    overflow: auto;
+    font-family: ui-sans-serif;
+  }
+  .ProgressBar {
+    color: white;
+  }
+
+  .Table__cell {
+    display: table-cell;
+    padding: 0 0.25em;
+    background-color: #c3c3c3;
+    //outline: base.em(3px) outset #c0c0c0
+  }
+  .Box {
+    outline: base.em(3px) outset #c0c0c0;
+  }
+  .Tooltip {
+    color: black;
+  }
+  .NtosWindow__header {
+    background-color: $dark-gray;
+  }
+}