implement revamped textual-gs-cli

gs/backend/cli.tcss

@@ -0,0 +1,128 @@
+Screen {
+    background: rgb(36, 36, 36);
+    overflow-y: auto;
+    layout: grid;
+    grid-size: 3 3;
+    grid-columns: 1fr 2fr 1fr;
+    grid-rows: 2fr auto 1fr;
+}
+
+Static {
+    overflow-y: auto;
+    color: white;
+    text-style: bold;
+}
+
+Button.-style-default:focus {
+    text-style: none;
+    background-tint: red 0%;
+}
+
+#logs {
+    background: rgb(36, 36, 36);
+    row-span: 3;
+    scrollbar-size: 2 1;
+    scrollbar-color: rgb(85, 161, 232);
+    scrollbar-color-hover: rgb(64, 128, 188);
+    scrollbar-color-active: rgb(77, 161, 239);
+    border: round rgb(85, 161, 232) 60%;
+    height: 100%;
+    padding-left: 1;
+}
+
+#cli {
+    row-span: 2;
+    background: rgb(36, 36, 36);
+    column-span: 1;
+    height: 1fr;
+    border: round rgb(242, 97, 97) 60%;
+    padding-left: 1;
+    scrollbar-size: 2 1;
+    scrollbar-color: rgb(242, 97, 97);
+    scrollbar-color-hover: rgb(196, 79, 79);
+    scrollbar-color-active: rgb(254, 115, 115);
+    overflow-y: auto;
+}
+
+#cli-input {
+    dock: bottom;
+    border: blank rgb(28, 28, 28);
+    background: rgb(42, 42, 42);
+}
+
+#cmd-panel {
+    column-span: 1;
+    row-span: 3;
+    scrollbar-size: 2 1;
+    background: rgb(36, 36, 36);
+    height: 1fr;
+    padding-left: 1;
+    border: round rgb(85, 161, 232) 60%;
+    scrollbar-color: rgb(85, 161, 232);
+    scrollbar-color-hover: rgb(64, 128, 188);
+    scrollbar-color-active: rgb(77, 161, 239);
+}
+
+#cmd-panel > Static {
+    padding-bottom: 1;
+}
+
+#cmd-panel > CmdButton {
+    layout: grid;
+    grid-columns: auto auto;
+    background: $boost;
+    color: auto;
+    margin-bottom: 1;
+    padding: 1;
+    padding-left: 3;
+    margin-right: 2;
+}
+
+#cmd-panel > CmdButton > Button {
+    background: rgb(45,45,45);
+    align: right middle;
+    column-span: 1;
+}
+
+#cmd-panel > CmdButton > Label {
+    column-span: 1;
+    padding-bottom: 1;
+}
+
+#timetagged {
+    layout: grid;
+    color: white;
+    background: rgb(36, 36, 36);
+    height: 1fr;
+    border: round rgb(85, 161, 232) 60%;
+    grid-rows: auto;
+    padding-left: 1;
+    column-span: 1;
+}
+
+#timetagged > Label {
+    padding-bottom: 1;
+}
+
+#timetagged > DataTable {
+    height: 100%;
+    background: rgb(40,40,40);
+}
+
+DataTable > .datatable--header{
+    background: rgb(48, 48, 48);
+}
+
+DataTable > .datatable--header-hover {
+    background: $block-hover-background 30%;
+}
+
+DataTable:focus > .datatable--cursor {
+    background: dodgerblue;
+}
+
+DataTable > .datatable--cursor {
+    background: $block-hover-background 10%;
+    color: $block-cursor-blurred-foreground;
+    text-style: $block-cursor-blurred-text-style;
+}