Release 0.9.0

bot/modules/webserver/static/lcars/000-style.css

@@ -0,0 +1,5 @@
+@import url("100-variables.css"); /* contains css-variables for most major elements */
+@import url("200-framework.css");
+@import url("300-header.css");
+@import url("400-main.css");
+@import url("500-footer.css");

bot/modules/webserver/static/lcars/100-variables.css

@@ -0,0 +1,81 @@
+@import url("110-fonts.css");
+
+:root {
+    font-size: 16px;
+    /* colors have to be issued in HEX, so we can use them without trouble inside out JavaScript portion */
+    --background: #000000;
+    --main-bar-color: #939598;
+    --main-bar-border-color: #6F7172;
+
+    /* StarTrek color information found on: https://web.archive.org/web/20190717130329/http://www.lcarscom.net/ */
+    --lcars-pale-canary: #FF9999;
+    --lcars-tanoi: #FFCC99;
+    --lcars-golden-tanoi: #FFCC66;
+    --lcars-neon-carrot: #FF9933;
+
+    --lcars-eggplant: #664466;
+    --lcars-lilac: #CC99CC;
+    --lcars-anakiwa: #99CCFF;
+    --lcars-mariner: #3366CC;
+
+    --lcars-bahama-blue: #006699;
+    --lcars-blue-bell: #9999CC;
+    --lcars-melrose: #9999FF;
+    --lcars-hopbush: #CC6699;
+
+    --lcars-chestnut-rose: #CC6666;
+    --lcars-orange-peel: #FF9966;
+    --lcars-atomic-tangerine: #FF9900;
+    --lcars-danub: #6688CC;
+
+    --lcars-indigo: #4455BB;
+    --lcars-lavender-purple: #9977AA;
+    --lcars-cosmic: #774466;
+    --lcars-red-damask: #DD6644;
+
+    --lcars-medium-carmine: #AA5533;
+    --lcars-bourbon: #BB6622;
+    --lcars-sandy-brown: #EE9955;
+    --lcars-periwinkle: #CCDDFF;
+
+    --lcars-dodger-pale: #5599FF;
+    --lcars-dodger-soft: #3366FF;
+    --lcars-near-blue: #0011EE;
+    --lcars-navy-blue: #000088;
+
+    --lcars-husk: #BBAA55;
+    --lcars-rust: #BB4411;
+    --lcars-tamarillo: #882211;
+
+    /* pixel values taken from the used images */
+    --main_shoulder_width: 16.875em;
+    --main_shoulder_height: 4.5em;
+    --main_shoulder_gap: calc(
+        var(--main_shoulder_width) / 10
+    );
+
+    --main_bar_height: 2.625em;
+    --main_bar_terminator_width: 2.5em;
+
+    --main_table_gutter: 0.25em;
+    --main_table_header_height: 2em;
+    --main_table_footer_height: 1.5em;
+    --main_table_caption_height: 1.5em;
+
+    /* main area height */
+    --main_area_height: calc(
+        100vh
+        - var(--main_shoulder_height) * 2
+        - var(--main_table_gutter) * 2
+    );
+
+    --main_widget_shoulder_width: var(--main_shoulder_width);
+    --main_widget_height: var(--main_area_height);
+    --main_widget_bar_height: var(--main_bar_height);
+}
+
+@keyframes blinker {
+  33% {
+    opacity: 33%;
+  }
+}

bot/modules/webserver/static/lcars/110-fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'SWISS 911 Ultra Compressed BT';
+    src: url('fonts/SWISS911UltraCompressedBT.ttf'); /*URL to font*/
+}
+
+@font-face {
+    font-family: 'SWISS 911 Extra Compressed BT';
+    src: url('fonts/SWISS911ExtraCompressedBT.ttf'); /*URL to font*/
+}

bot/modules/webserver/static/lcars/200-framework.css

@@ -0,0 +1,127 @@
+@import url("210-scrollbar_hacks.css");
+@import url("220-screen_adjustments.css");
+
+html {
+    background: var(--background);
+}
+
+a, a:visited {
+    color: var(--background);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+body {
+    margin: 0 auto;
+    font-family: "SWISS 911 Extra Compressed BT", sans-serif;
+    display: flex;
+    flex-direction: column;
+}
+
+body > header, body > footer {
+    flex: 0 0 auto;
+}
+
+body > main {
+    flex: 1 1 auto;
+}
+
+/* header and footer are special due to their graphical shoulders */
+body > header > div, body > header > div:before,
+body > footer > div, body > footer > div:before {
+    height: var(--main_shoulder_height);
+}
+
+body > header {
+    margin-bottom: var(--main_table_gutter);
+}
+
+body > footer {
+    margin-top: var(--main_table_gutter);
+}
+
+body > header > div {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    margin:
+        0 var(--main_bar_terminator_width)
+        0 var(--main_shoulder_width);
+    overflow: hidden;
+}
+
+body > header,
+body > footer {
+    border-top-left-radius: calc(
+        var(--main_bar_height) * 2.66)
+        calc(var(--main_bar_height) * 1.33
+    );
+    background:
+        url(ui/main_shoulder.png) no-repeat top left,
+        url(ui/main_horizontal_bar_end.png) no-repeat top right;
+}
+
+body > footer,
+body > footer > div,
+body > footer > div:before {
+    transform: scaleY(-1);
+}
+
+body > header > div:before,
+body > footer > div:before {
+    width: 100%;
+    content: "";
+    background:
+        url(ui/main_horizontal_bar.png)
+        repeat-x;
+}
+
+body > footer > div {
+    display: flex;
+    align-items: flex-end;
+    margin:
+        0 var(--main_bar_terminator_width)
+        0 var(--main_shoulder_width);
+    overflow: hidden;
+}
+
+/* every element inside main > div is a widget! */
+body > main > div {
+    color: var(--lcars-atomic-tangerine);
+    display: flex;
+    flex-wrap: wrap;
+    height: var(--main_area_height);
+    overflow-y: scroll; /* this has to stay for scroll-snapping to work */
+    overflow-x: hidden;
+    scroll-snap-type: y mandatory;
+}
+
+body > main > div > .widget {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+    height: var(--main_widget_height);
+    scroll-snap-align: start;
+    border-bottom: var(--main_table_gutter) solid var(--background);
+    border-right: calc(var(--main_table_gutter) * 2) solid var(--background);
+}
+
+body > main > div .single_screen {
+    width: 100%;
+    height: var(--main_area_height);
+    padding-left: calc(var(--main_widget_shoulder_width));
+    background: linear-gradient(
+        to right,
+        var(--main-bar-color) 0,
+        var(--main-bar-color) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
+        var(--background) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
+        var(--background) 100%
+    );
+}
+
+body > main > div .single_screen a:hover {
+    text-decoration: underline;
+}

bot/modules/webserver/static/lcars/210-scrollbar_hacks.css

@@ -0,0 +1,15 @@
+::-webkit-scrollbar {
+    width: var(--main_bar_terminator_width);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--lcars-tanoi);
+    border-radius: 1.25em;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--lcars-atomic-tangerine);
+}

bot/modules/webserver/static/lcars/220-screen_adjustments.css

@@ -0,0 +1,19 @@
+/* This file contains some nasty style adjustments to accommodate ridiculously small screens.
+ * I don't care how it looks like there as long as it's usable.
+ */
+
+@media only screen and (max-width: 960px) {
+	:root {
+        --main_widget_shoulder_width: calc(
+            var(--main_shoulder_width) / 2
+        )
+	}
+}
+
+/* this one will remove table-cell restrictions and kinda condense the table-row. This will be a bit untidy in looks,
+but more data will be available on very small screens */
+@media only screen and (max-width: 960px) {
+    body > main > div > .widget > main > table.data_table > tbody > tr {
+        display: unset;
+    }
+}

bot/modules/webserver/static/lcars/300-header.css

@@ -0,0 +1,25 @@
+@import url("310-header_widgets.css");
+
+body > header > div > hgroup {
+    position: absolute;
+    right: 0; top: 0;
+}
+
+body > header > div > hgroup > h1 {
+    font-size: var(--main_bar_height);
+    color: var(--lcars-tanoi);
+    background-color: var(--background);
+
+    font-family: "SWISS 911 Ultra Compressed BT", sans-serif;
+    text-transform: uppercase;
+    padding: 0 0.25em;
+
+    white-space: nowrap;
+}
+
+body > header > div #header_widgets {
+    position: absolute;
+    height: calc(var(--main_shoulder_height) - var(--main_bar_height));
+    right: 0; bottom: 0; left: 0;
+    display: flex;
+}

bot/modules/webserver/static/lcars/310-header_widgets.css

@@ -0,0 +1,69 @@
+body > header > div > #header_widgets > .widget {
+    padding-right: 0.25em;
+    color: black;
+    padding-top: var(--main_table_gutter)
+}
+
+body > header > div > #header_widgets > .widget > div {
+    background-color: var(--lcars-atomic-tangerine);
+    border-radius: 12px; padding: 0 1em;
+    white-space: nowrap;
+    line-height: 1.5em;
+}
+
+body > header > div > #header_widgets > #login_logout_widget {
+    margin-left: auto;
+}
+
+body > header > div > #header_widgets > #login_logout_widget a {
+    color: var(--background)
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget > div.active {
+    background-color: var(--lcars-tanoi);
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget > div.inactive {
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget span > a,
+body > header > div > #header_widgets > #gameserver_status_widget span > a:visited {
+    color: var(--lcars-blue-bell);
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget span > a {
+    display: inline-block;
+    padding: 0 calc(var(--main_table_gutter) / 2);
+    border-left: calc(var(--main_table_gutter) / 2) solid var(--background);
+    border-right: calc(var(--main_table_gutter) / 2) solid var(--background);
+    color: var(--background); /* Edge seems to require this */
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget span > a:hover,
+body > header > div > #header_widgets > #gameserver_status_widget span > a:visited {
+    color: var(--background);
+    text-decoration: none;
+}
+
+body > header > div > #header_widgets > #gameserver_status_widget span:hover > a {
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > header > div > #header_widgets > #gametime_widget {
+    order: -1;
+}
+
+body > header > div > #header_widgets > #gametime_widget span.time {
+    padding: 0 var(--main_table_gutter);
+}
+
+body > header > div > #header_widgets > #gametime_widget span.day.bloodday,
+body > header > div > #header_widgets > #gametime_widget span.time.bloodmoon {
+    color: var(--lcars-chestnut-rose);
+}
+
+body > header > div > #header_widgets > #gametime_widget span.time.bloodmoon {
+    background-color: var(--background);
+}

bot/modules/webserver/static/lcars/400-main.css

@@ -0,0 +1,12 @@
+@import url("410-main_widgets.css");
+
+body > main > div #unauthorized_disclaimer p {
+    font-size: 1.5em;
+    padding-bottom: 1em;
+}
+
+body > main > div #unauthorized_disclaimer a,
+body > main > div #unauthorized_disclaimer a:visited {
+    color: var(--lcars-melrose);
+    text-decoration: None;
+}

bot/modules/webserver/static/lcars/410-main_widgets.css

@@ -0,0 +1,466 @@
+@import url("411-main_widgets_webserver_status_widget.css");
+@import url("412-main_widgets_telnet_log_widget.css");
+@import url("413-main_widgets_manage_players_widget.css");
+@import url("414-main_widgets_manage_locations_widget.css");
+@import url("415-main_widgets_manage_entities_widget.css");
+
+body > main > div > .widget > main {
+    position: relative;
+}
+
+body > main > div > .widget main a {
+    border-radius: 0.5em;
+    font-family: "SWISS 911 Ultra Compressed BT", sans-serif;
+    padding: 0 0.5em;
+}
+
+body > main > div > .widget main a,
+body > main > div > .widget main a:visited {
+    background-color: var(--lcars-melrose);
+    color: black;
+}
+
+body > main > div > .widget main a:hover {
+    text-decoration: none;
+}
+
+body > main > div > .widget main span.active a {
+    background-color: var(--lcars-tanoi);
+}
+
+body > main > div > .widget main span.inactive a {
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > main > div > .widget main .select_button a {
+    border-radius: 0;
+    padding: 0 0.75em;
+}
+
+body > main > div > .widget > main > table > tbody > tr > td {
+    font-size: 1em;
+    line-height: 1.5em;
+    padding: 0 calc(var(--main_table_gutter) / 2);
+    vertical-align: middle;
+}
+
+body > main > div > .widget > main > table > tbody > tr > td:last-child {
+    padding-right: var(--main_table_gutter);
+}
+
+body > main > div > .widget > main > table > thead tr:last-child {
+    /* this contains the header stuff for the widget-content */
+    background: var(--background);
+}
+
+body > main > div > .widget > main > table.data_table > tbody > tr > td {
+    white-space: nowrap;
+}
+
+body > main > div > .widget > main > table > tfoot > tr > td > div > span.active,
+body > main > div > .widget .pull_out > div > span.active {
+    background-color: var(--lcars-lilac);
+}
+
+body > main > div > .widget > main > table > tfoot > tr > td > span.inactive,
+body > main > div > .widget .pull_out > div > span.inactive {
+    background-color: var(--lcars-hopbush);
+}
+
+body > main > div > .widget .pull_out > div > span.info {
+    background-color: var(--lcars-tanoi);
+}
+
+body > main > div > .widget .pull_out > div > span.info > div > span {
+    margin-left: 0.5em;
+    flex: 1;
+    text-align: left;
+}
+
+body > main > div > .widget .pull_out span a,
+body > main > div > .widget .pull_out span a:visited,
+body > main > div > .widget .pull_out span > div {
+    text-decoration: none;
+    display: block;
+    margin-right: 0.5em;
+    color: var(--background);
+}
+
+body > main > div > .widget > main .dialog {
+    position: absolute;
+    top: var(--main_table_gutter);
+    bottom: 5.5em;
+    display: none;
+}
+
+body > main > div > .widget > main .dialog.open {
+    display: block;
+}
+
+body > main > div > .widget > main .dialog .modal-content {
+    padding: 1em;
+    color: var(--lcars-blue-bell);
+    background-color: var(--background);
+    border: var(--main_table_gutter) solid var(--lcars-chestnut-rose);
+
+    border-radius: 0 1em 0.5em 1.5em / 0 1em 0.5em 1em;
+    height: calc(100% + 1em);
+}
+
+body > main > div > .widget > main .dialog .modal-content a,
+body > main > div > .widget > main .dialog .modal-content p {
+    font-size: 2em;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal {
+    color: var(--lcars-tanoi);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal header,
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div {
+    text-align: center;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal header {
+    flex: 0 0 auto;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div {
+    flex: 1 1 auto;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div.dynamic_content_size {
+    overflow: auto;
+    margin: calc(var(--main_bar_height) / 2) 0;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div.dynamic_content_size::-webkit-scrollbar {
+    width: calc(var(--main_bar_terminator_width) / 1.66);
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div:last-child {
+    flex: 0 0 auto;
+    display: flex;
+}
+
+body > main > div > .widget > main .dialog.open .modal-content .delete_modal div section {
+    flex: 1 1 auto;
+    width: 50%;
+}
+
+body > main > div > .widget > main > table > tbody {
+    display: block;
+    overflow: auto;
+    height: calc(
+        var(--main_widget_height)
+        - var(--main_widget_bar_height)
+        - var(--main_table_caption_height)
+    );
+    padding-right: 0.5em;
+}
+
+body > main > div > .widget > main > table.data_table > tbody {
+    height: calc(
+        var(--main_widget_height)
+        - var(--main_widget_bar_height)
+        - var(--main_table_header_height)
+        - var(--main_table_footer_height)
+        - var(--main_table_caption_height)
+    );
+
+    max-width: calc(
+        100vw
+        - var(--main_widget_shoulder_width)
+        - var(--main_bar_terminator_width)
+        - 1em
+    );
+}
+
+body > main > div > .widget > main > table.data_table > tbody tr {
+    max-width: calc(
+        100vw
+        - var(--main_widget_shoulder_width)
+        - var(--main_bar_terminator_width)
+        - 1em
+        - var(--main_bar_terminator_width)
+    );
+}
+
+body > main > div > .widget > main > table > thead > tr {
+    display: none;
+}
+
+body > main > div > .widget > main > table.data_table > thead > tr {
+    display: inline-block;
+    width: 100%;
+    height: var(--main_table_header_height);
+    text-align: right;
+}
+
+body > main > div > .widget > main > table.data_table > thead > tr > th {
+    display: inline-block;
+    margin: var(--main_table_gutter);
+    height: calc(
+        var(--main_table_header_height)
+        - (var(--main_table_gutter) * 2)
+    );
+    line-height: calc(
+        var(--main_table_header_height)
+        - (var(--main_table_gutter) * 2)
+    );
+}
+
+body > main > div > .widget > main > table.data_table > thead > tr > th:last-child {
+    margin-right: var(--main_bar_terminator_width);
+}
+
+body > main > div > .widget > main table.box_input,
+body > main > div > .widget > main table.box_select {
+    margin-bottom: 1.5em;
+}
+
+body > main > div > .widget > main table.box_select tfoot td,
+body > main > div > .widget > main table.box_input tfoot td {
+    white-space: normal;
+}
+
+body > main > div > .widget > main table.box_select input[disabled],
+body > main > div > .widget > main table.box_input input[disabled] {
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > main > div > .widget > main table.box_select tfoot tr td,
+body > main > div > .widget > main table.box_input tfoot tr td {
+    color: var(--background);
+    padding: 0.5em 0;
+}
+
+body > main > div > .widget > main table.box_select tfoot tr td > div,
+body > main > div > .widget > main table.box_input tfoot tr td > div {
+    /* background-image: linear-gradient(to right, var(--background),  var(--lcars-melrose), var(--lcars-melrose), var(--lcars-melrose)); */
+    background-color: var(--lcars-melrose);
+    text-align: right;
+    line-height: 1em;
+    font-size: 0.9em;
+    padding: 0.8em;
+    /* display: none; */
+}
+
+body > main > div > .widget > main table.box_select td {
+    width: 50%;
+}
+
+/* checkbox styling */
+body > main > div > .widget > main table.box_select label.slider {
+    position: relative;
+    cursor: pointer;
+}
+
+body > main > div > .widget > main table.box_select label.slider [type="checkbox"] {
+    display: none;
+}
+
+body > main > div > .widget > main table.box_select .slider [type="checkbox"] + span {
+    color: var(--background);
+    display: block;
+    background: var(--lcars-chestnut-rose);
+    padding: var(--main_table_gutter);
+    margin: var(--main_table_gutter);
+    border-radius: 0.5em;
+}
+
+body > main > div > .widget > main table.box_select .slider:hover [type="checkbox"] + span,
+body > main > div > .widget > main table.box_select .slider :checked + span {
+    background: var(--lcars-tanoi);
+}
+
+body > main > div > .widget > main table.box_select .slider [type="checkbox"][disabled] + span {
+    background: var(--lcars-orange-peel);
+}
+
+body > main > div > .widget > main > table > thead {
+    max-height: var(--main_table_header_height);
+}
+
+body > main > div > .widget > main > table > tfoot {
+    max-height: var(--main_table_footer_height);
+}
+
+body > main > div > .widget > main > table > caption {
+    /* display: none; */
+    max-height: var(--main_table_caption_height);
+    border-top: 0.5em solid var(--background);
+    margin-right: calc(
+        var(--main_bar_terminator_width) / 2
+    );
+    overflow: hidden;
+}
+
+body > main > div > .widget > header {
+    width: 100%;
+    background-color: var(--lcars-hopbush);
+    border-radius: 1.5em 1.5em 1.5em 0;
+    height: var(--main_bar_height);
+}
+
+body > main > div > .widget > header > div > span {
+    font-size: var(--main_widget_bar_height);
+    line-height: 1em;
+    color: var(--background);
+    margin-left: 1.5em;
+}
+
+body > main > div > .widget > aside {
+    flex: 0 0 var(--main_widget_shoulder_width);
+    background: linear-gradient(
+        to right,
+        var(--main-bar-color) 0,
+        var(--main-bar-color) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
+        var(--background) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
+        var(--background) 100%
+    );
+    height: calc(
+        var(--main_widget_height) - var(--main_widget_bar_height)
+    );
+}
+
+body > main > div > .widget > main {
+    flex: 1 0 calc(
+        100%
+        - var(--main_widget_shoulder_width)
+    );
+    overflow-y: auto;
+    height: calc(
+        var(--main_widget_height) - var(--main_widget_bar_height)
+    );
+}
+
+body > main > div > .widget > aside > div {
+    width: var(--main_widget_shoulder_width);
+}
+
+body > main > div > .widget > aside > div > div {
+    border-top: var(--main_table_gutter) solid var(--background);
+    background-color: var(--background);
+}
+
+body > main > div > .widget > aside > div > div:last-child {
+    border-bottom: var(--main_table_gutter) solid var(--background);
+}
+
+body > main > div > .widget > aside > div > div > span {
+    display: block;
+    background-color: var(--lcars-hopbush);
+    margin-right: var(--main_shoulder_gap);
+    line-height: var(--main_shoulder_height);
+}
+
+body > main > div > .widget > aside > div > div > span {
+    border-radius: var(--main_table_gutter);
+}
+
+body > main > div > .widget > aside > div > div > span.info {
+    border-radius: unset;
+    line-height: calc(var(--main_shoulder_height) / 2);
+}
+
+body > main > div > .widget > main > table > tfoot > tr {
+    height: var(--main_table_footer_height);
+    line-height: var(--main_table_footer_height);
+}
+
+body > main > div > .widget > main > table > tfoot > tr > td {
+    height: calc(
+        var(--main_table_footer_height)
+        - var(--main_table_gutter)
+    );
+    line-height: calc(
+        var(--main_table_footer_height)
+        - var(--main_table_gutter)
+    );
+    vertical-align: bottom;
+}
+
+body > main > div > .widget > main > table > tfoot > tr > td > div {
+    background-color: var(--lcars-tanoi);
+    padding-left: calc(var(--main_shoulder_width) / 2);
+    border-radius: 0 1em 1em 2em / 0 1em 1em 2em;
+}
+
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button {
+    display: inline-block;
+    border-left: 0.25em solid var(--background);
+    border-right: 0.25em solid var(--background);
+}
+
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span a,
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span {
+    display: inline-block;
+}
+
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.active a,
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.active {
+    background-color: var(--lcars-chestnut-rose);
+}
+
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.inactive a,
+body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.inactive {
+    background-color: var(--lcars-tanoi);
+}
+
+body > main > div > .widget > main tr td[id$="_actions"] > span {
+    padding-right: var(--main_table_gutter);
+}
+
+body > main > div > .widget > main tr td[id$="_actions"] > span:last-child {
+    padding-right: 0;
+}
+
+/* making the standard order the middle instead of 0 */
+body > main > div > .widget {
+    order: 500;
+}
+
+body > main > div > #manage_players_widget {
+    order: -4;
+    flex: 1 0 calc(
+        960px
+        - var(--main_table_gutter) * 2
+        - var(--main_bar_terminator_width)
+    );
+}
+
+body > main > div > #webserver_status_widget {
+    order: -3;
+    flex: 1 0 calc(
+        480px
+        - var(--main_table_gutter) * 2
+    );
+}
+
+body > main > div > #manage_locations_widget {
+    order: -2;
+    flex: 1 0 calc(
+        860px
+        - var(--main_table_gutter) * 2
+    );
+}
+
+body > main > div > #manage_entities_widget {
+    order: -1;
+    flex: 1 0 calc(
+        768px
+        - var(--main_table_gutter) * 2
+    );
+}
+
+body > main > div > #telnet_log_widget {
+    order: 999;
+    flex: 1 0 calc(
+        768px
+        - var(--main_table_gutter) * 2
+    );
+}

bot/modules/webserver/static/lcars/412-main_widgets_telnet_log_widget.css

@@ -0,0 +1,30 @@
+body > main > div > #telnet_log_widget {
+    margin-bottom: 0;
+    width: 100%;
+}
+
+body > main > div > #telnet_log_widget .log_line {
+    /* log entries seem to be traditionally blue in LCARS ^^ */
+    color: var(--lcars-blue-bell);
+}
+
+body > main > div > #telnet_log_widget .log_line td {
+    white-space: normal;
+    padding-left: calc(var(--main_shoulder_width) / 3);
+    text-indent: calc(-1 * calc(var(--main_shoulder_width) / 3));
+}
+
+body > main > div > #telnet_log_widget tr.game_chat,
+body > main > div > #telnet_log_widget caption span.game_chat {
+    color: var(--lcars-hopbush);
+}
+
+body > main > div > #telnet_log_widget tr.player_logged,
+body > main > div > #telnet_log_widget caption span.player_logged {
+    color: var(--lcars-anakiwa);
+}
+
+body > main > div > #telnet_log_widget tr.bot_command,
+body > main > div > #telnet_log_widget caption span.bot_command {
+    color: var(--lcars-cosmic);
+}

bot/modules/webserver/static/lcars/413-main_widgets_manage_players_widget.css

@@ -0,0 +1,92 @@
+body > main > div > #manage_players_widget > main > table > tbody > tr > td[id$='_name'] {
+    width: 100%;
+}
+
+body > main > div > #manage_players_widget tbody#player_table > tr:hover * {
+    background-color: var(--lcars-tanoi);
+    color: var(--background)
+}
+
+/* player status */
+/* offline */
+body > main > div > #manage_players_widget caption span:not(.is_online):not(.is_initialized),
+body > main > div > #manage_players_widget tbody > span:not(.is_online):not(.is_initialized),
+body > main > div > #manage_players_widget tbody > tr:not(.is_online):not(.is_initialized) {
+    color: var(--lcars-chestnut-rose);
+}
+
+/* offline and dead */
+body > main > div > #manage_players_widget caption span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
+body > main > div > #manage_players_widget tbody > span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
+body > main > div > #manage_players_widget tbody > tr.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) {
+    color: var(--lcars-chestnut-rose);
+}
+/* special fading animation for offline players currently dead */
+body > main > div > #manage_players_widget caption span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
+body > main > div > #manage_players_widget tbody > span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) td:nth-child(n+3),
+body > main > div > #manage_players_widget tbody > tr.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) td:nth-child(n+3) {
+    animation: blinker 4s linear infinite;
+}
+
+/* online and logging in */
+body > main > div > #manage_players_widget caption span.is_online:not(.is_initialized).in_limbo,
+body > main > div > #manage_players_widget tbody > span.is_online:not(.is_initialized).in_limbo,
+body > main > div > #manage_players_widget tbody > tr.is_online:not(.is_initialized).in_limbo {
+    color: var(--lcars-tanoi);
+}
+/* special fading animation for players currently logging in */
+body > main > div > #manage_players_widget caption span.is_online:not(.is_initialized).in_limbo,
+body > main > div > #manage_players_widget tbody > span.is_online:not(.is_initialized).in_limbo td:nth-child(n+3),
+body > main > div > #manage_players_widget tbody > tr.is_online:not(.is_initialized).in_limbo td:nth-child(n+3) {
+    animation: blinker 3s linear infinite;
+}
+
+/* online */
+body > main > div > #manage_players_widget caption span.is_online.is_initialized:not(.in_limbo),
+body > main > div > #manage_players_widget tbody > span.is_online.is_initialized:not(.in_limbo),
+body > main > div > #manage_players_widget tbody > tr.is_online.is_initialized:not(.in_limbo) {
+    color: var(--lcars-tanoi);
+}
+/* online and dead */
+body > main > div > #manage_players_widget caption span.is_online.is_initialized.in_limbo,
+body > main > div > #manage_players_widget tbody > span.is_online.is_initialized.in_limbo,
+body > main > div > #manage_players_widget tbody > tr.is_online.is_initialized.in_limbo {
+    color: var(--lcars-atomic-tangerine);
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_id"],
+body > main > div > #manage_players_widget tr[id^="player_table_row_"] td[class="position"],
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_ping"],
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_last_updated_servertime"],
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_last_seen_gametime"] {
+    font-size: 0.90em;
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_name"] {
+    max-width: 10em;
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_health"]:before {
+    content: "\2665";
+    padding-right: var(--main_table_gutter);
+    padding-left: calc(var(--main_table_gutter) * 2);
+    color: var(--lcars-chestnut-rose);
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_pos"] span {
+    width: 1.5em;
+    display: inline-block;
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_pos"]:before {
+    padding-left: calc(var(--main_table_gutter) * 2);
+    color: var(--lcars-chestnut-rose);
+    content: "\2691";
+}
+
+body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_zombies"]:before {
+    color: var(--lcars-chestnut-rose);
+    content: "\2620";
+    padding-right: var(--main_table_gutter);
+    padding-left: calc(var(--main_table_gutter) * 2);
+}

bot/modules/webserver/static/lcars/414-main_widgets_manage_locations_widget.css

@@ -0,0 +1,52 @@
+body > main > div > #manage_locations_widget > main > table > tbody > tr > td[id$='_name'] {
+    width: 100%;
+}
+
+body > main > div > #manage_locations_widget tbody#location_table > tr:hover * {
+    background-color: var(--lcars-tanoi);
+    color: var(--background)
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div {
+    display: flex;
+    justify-content: flex-end;
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div > div {
+    margin-right: 0.5em;
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div > div:last-child {
+    margin-right: 0;
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div > label {
+    flex: 0;
+    white-space: nowrap;
+    margin-right: 0.5em;
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div > label:last-child {
+    margin-right: 0;
+}
+
+body > main > div > #manage_locations_widget #current_player_pos > span > div > label input {
+    border: 0;
+    display: inline-block;
+    margin: 0; padding: 0;
+    width: 2.5em;
+    text-align: right;
+    background-color: transparent;
+}
+
+body > main > div > main > div > #manage_locations_widget #current_player_pos > span > div > label:nth-child(2) input {
+    width: 2em;
+}
+
+body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_id"],
+body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_last_changed"],
+body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_coordinates"],
+body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_owner"] {
+    font-size: 0.90em;
+    vertical-align: middle;
+}

bot/modules/webserver/static/lcars/415-main_widgets_manage_entities_widget.css

@@ -0,0 +1,8 @@
+body > main > div > #manage_entities_widget > main > table > tbody > tr > td[id$='_name'] {
+    width: 100%;
+}
+
+body > main > div > #manage_entities_widget tbody#entity_table > tr:hover * {
+    background-color: var(--lcars-tanoi);
+    color: var(--background)
+}

bot/modules/webserver/static/lcars/500-footer.css

@@ -0,0 +1,6 @@
+@import url("310-header_widgets.css");
+
+footer > div > p {
+    position: absolute;
+    right: 0;
+}