tgui-core 4.1.4 → 4.2.1

package/styles/themes/ntos_synth.scss

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+// That's really cursed theme
+.theme-ntos_synth {
+  &:root {
+    --synth-cyan: hsl(156, 65%, 60%);
+    --synth-pink: hsl(300, 91%, 52%);
+    --synth-orange: hsl(36, 100%, 50%);
+    --synth-purple: hsl(248, 47%, 37%);
+
+    // Base
+    --color-base: var(--synth-purple);
+    --color-secondary: hsla(185, 95%, 23%, 0.75);
+    --color-primary: var(--synth-pink);
+    --color-label: var(--synth-orange);
+    --color-good: var(--synth-cyan);
+    --base-gradient-spread: 12;
+
+    // Components
+    --button-color: var(--color-black);
+    --button-background-default: var(--synth-cyan);
+    --button-background-selected: hsl(227, 37%, 45%);
+    --button-background-caution: hsl(30, 88%, 39%);
+    --button-background-disabled: var(--synth-purple);
+    --tooltip-background: hsla(36, 100%, 50%, 0.75);
+  }
+
+  .Section {
+    color: var(--synth-cyan);
+    background-image: linear-gradient(
+      to right,
+      hsla(300, 100%, 42%, 0.75),
+      hsla(185, 95%, 23%, 0.75)
+    );
+  }
+
+  :where(.Button) {
+    background-color: var(--synth-purple);
+    color: var(--synth-cyan);
+  }
+
+  .Button {
+    outline: var(--border-thickness-small) outset var(--synth-pink);
+  }
+
+  .ProgressBar {
+    color: var(--synth-orange);
+  }
+
+  .Layout__content {
+    background-image: url("@assets/bg-synthsunset-c-grid.svg");
+    background-size: 100%;
+    background-position: top;
+    background-repeat: no-repeat;
+  }
+
+  .Tab {
+    color: var(--synth-cyan);
+    background-image: linear-gradient(
+      to right,
+      hsla(36, 100%, 50%, 0.4),
+      hsla(300, 100%, 42%, 0.75)
+    );
+  }
+
+  .Tab--selected {
+    color: var(--synth-pink);
+  }
+}

package/styles/themes/ntos_terminal.scss

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntos_terminal:root {
+  --terminal-color: hsl(146, 82%, 53%);
+
+  // Base
+  --color-base: hsl(120, 10%, 10%);
+  --color-secondary: hsl(
+    from var(--terminal-color) calc(h - 25) calc(s + 20) calc(l - 34) / 0.25
+  );
+  --color-primary: var(--terminal-color);
+  --color-good: hsl(from var(--terminal-color) h s l / 0.5);
+  --color-text: var(--color-white);
+  --color-action: var(--terminal-color);
+  --font-family: Inconsolata;
+  --base-gradient-spread: 0;
+
+  // Components
+  --button-color: var(--terminal-color);
+  --button-background-default: transparent;
+  --button-background-selected: hsl(from var(--terminal-color) h s l / 0.25);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --progress-bar-fill: hsl(from var(--terminal-color) h s l / 0.5);
+
+  body {
+    letter-spacing: 1px;
+  }
+
+  .Window__rest {
+    background-image:
+      repeating-linear-gradient(
+        0deg,
+        hsla(0, 0%, 0%, 0.15),
+        hsla(0, 0%, 0%, 0.15) 1px,
+        transparent 2.5px,
+        transparent 5px
+      ),
+      radial-gradient(
+        hsl(
+          from var(--terminal-color) calc(h - 25) calc(s + 20) calc(l - 34) /
+            0.75
+        ),
+        black 150%
+      );
+    background-size: 100%, 100%;
+    background-position: center, center;
+  }
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .Button:hover {
+    background-color: hsla(146, 82%, 53%, 0.25);
+    transition: 0.1s;
+  }
+
+  .Tab,
+  .Section,
+  .Tab--selected {
+    color: var(--terminal-color);
+  }
+
+  body,
+  .Flex,
+  .Table,
+  .Button {
+    text-shadow: 0 0 2px var(--terminal-color);
+  }
+
+  ::selection {
+    background: hsl(210, 100%, 50%);
+    text-shadow: none;
+  }
+}

package/styles/themes/paper.scss

@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2020 Paul Bruner
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-paper:root {
+  // Base
+  --color-base: hsl(0, 0%, 90%);
+  --secondary-lightness-adjustment: -3;
+  --color-section: hsla(0, 0%, 0%, 0.1);
+  --color-primary: var(--color-white);
+  --color-text: var(--color-black);
+  --color-scrollbar-base: var(--color-white);
+  --color-scrollbar-thumb: var(--color-light-grey);
+  --border-primary-saturation: 0;
+  --base-gradient-spread: 0;
+
+  // Components
+  --button-background-default: hsl(50, 50%, 90%);
+  --button-background-selected: hsl(0, 100%, 30%);
+  --button-background-caution: hsl(30, 90%, 40%);
+  --button-background-danger: hsl(60, 100%, 30%);
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .PaperInput {
+    position: relative;
+    display: inline-block;
+    width: 120px;
+    border: none;
+    background: transparent;
+    border-bottom: 1px solid var(--color-black);
+    outline: none;
+    background-color: hsla(60, 100%, 60%, 0.8);
+    padding: 0 4px;
+    margin-right: 2px;
+    line-height: 17px;
+    overflow: visible;
+  }
+
+  .PaperInput__baseline {
+    display: inline-block;
+    color: transparent;
+  }
+
+  .PaperInput__input {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 0;
+    outline: 0;
+    width: 100%;
+    font-size: 12px;
+    line-height: 17px;
+    height: 17px;
+    margin: 0;
+    padding: 0 6px;
+    font-family: Verdana, sans-serif;
+    background-color: transparent;
+    color: hsl(0, 0%, 100%);
+    color: inherit;
+
+    &::placeholder {
+      font-style: italic;
+      color: hsl(0, 0%, 47%);
+      color: hsla(0, 0%, 100%, 0.45);
+    }
+  }
+
+  .paper-text {
+    input:disabled {
+      position: relative;
+      display: inline-block;
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid var(--color-black);
+      outline: none;
+      background-color: hsla(60, 100%, 60%, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+
+    input {
+      position: relative;
+      display: inline-block;
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid var(--color-black);
+      outline: none;
+      background-color: hsla(60, 100%, 60%, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+  }
+
+  .Section__title {
+    border-bottom: none;
+  }
+
+  .paper-field {
+    position: relative;
+    display: inline-block;
+
+    border: none;
+    background: transparent;
+    border-bottom: 1px solid var(--color-black);
+    outline: none;
+    background-color: hsla(60, 100%, 60%, 0.8);
+    padding: 0 4px;
+    margin-right: 2px;
+    line-height: 17px;
+    overflow: visible;
+
+    input:disabled {
+      position: relative;
+      display: inline-block;
+
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid var(--color-black);
+      outline: none;
+      background-color: hsla(60, 100%, 60%, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+  }
+}

package/styles/themes/retro.scss

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-retro:root {
+  // Base
+  --color-base: hsl(45, 40%, 85%);
+  --color-primary: hsl(from var(--color-base) h s calc(l - 30));
+  --color-label: hsl(from var(--color-primary) h s 65);
+  --secondary-saturation: 10;
+  --secondary-lightness-adjustment: -56;
+  --base-gradient-spread: 0;
+  --border-radius-unit: 0;
+
+  // Components
+  --button-color: var(--color-black);
+  --button-background-default: var(--color-base);
+  --button-background-selected: hsl(0, 90%, 35%);
+  --button-background-caution: hsl(30, 85%, 40%);
+  --button-background-danger: hsl(60, 100%, 30%);
+  --progress-bar-background: hsl(0, 0%, 0%, 0.5);
+  --input-background: transparent;
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .Button {
+    font-family: var(--font-family-mono);
+    border: var(--border-thickness-small) outset var(--color-base);
+    outline: var(--border-thickness-tiny) solid hsl(60, 6%, 8%);
+
+    &-disabled {
+      color: hsl(60, 6%, 77%);
+      font-family: var(--font-family-mono);
+
+      &:hover {
+        color: hsl(0, 0%, 100%);
+      }
+    }
+
+    &--selected {
+      border-style: inset;
+    }
+  }
+}

package/styles/themes/spookyconsole.scss

@@ -0,0 +1,23 @@
+.theme-spookyconsole:root,
+.theme-ntos_spooky:root {
+  // Base
+  --color-base: hsl(0, 100%, 12.5%);
+  --color-primary: hsl(345, 95%, 30%);
+  --color-good: hsl(0, 82%, 52%);
+  --color-bad: hsl(340, 91%, 32%);
+  --base-gradient-spread: 12;
+  --secondary-lightness-adjustment: 9;
+
+  // Components
+  --button-background-selected: var(--color-good);
+  --button-background-caution: hsl(240, 80%, 35%);
+  --button-background-danger: hsl(282, 61%, 30%);
+  --dimmer-background-opacity: 0.45;
+  --notice-box-background: hsl(0, 90%, 23%);
+  --notice-box-color: var(--color-fixed-white);
+  --progress-bar-background: hsla(0, 97%, 7%, 0.5);
+
+  .Layout__content {
+    background-image: url("@assets/bg-spookycomp-compressed.svg");
+  }
+}

package/styles/themes/syndicate.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-syndicate:root {
+  // Base
+  --color-base: hsl(0, 96%, 17%);
+  --color-primary: hsl(120, 34%, 35%);
+  --secondary-lightness-adjustment: 11.5;
+  --base-gradient-spread: 6;
+  // Components
+  --button-background-selected: hsl(0, 90%, 37.5%);
+  --button-background-caution: hsl(28, 87%, 39%);
+  --button-background-danger: hsl(61, 100%, 30%);
+  --notice-box-background: hsl(0, 98%, 28%);
+  --notice-box-color: var(--color-text-fixed-white);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tooltip-background-lightness: 25;
+
+  .Layout__content {
+    background-image: url("@assets/bg-syndicate.svg");
+  }
+}

package/styles/themes/wizard.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-wizard:root {
+  // Base
+  --color-base: hsl(205, 40%, 20%);
+  --color-primary: hsl(190, 80%, 40%);
+  --color-secondary: hsl(134, 71%, 31%);
+  --color-border-primary: hsl(225, 25%, 40%);
+  --base-gradient-spread: 6;
+
+  // Components
+  --button-background-selected: hsl(227, 40%, 44%);
+  --button-background-caution: hsl(28, 89%, 39%);
+  --button-background-danger: hsl(0, 91%, 35%);
+  --notice-box-background: hsl(340, 58%, 41%);
+  --notice-box-color: var(--color-white);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tooltip-background: hsl(134, 61%, 42%);
+
+  .Layout__content {
+    background-image: url("@assets/bg-wizard.svg");
+  }
+}