Initial commitwasm-initial

2 files changed, 235 insertions, 0 deletions

diff --git a/Server/wwwroot/styles/data-table.css b/Server/wwwroot/styles/data-table.css
new file mode 100644
index 0000000..994d625
--- /dev/null
+++ b/Server/wwwroot/styles/data-table.css
@@ -0,0 +1,21 @@
+table.data-table {
+    border-collapse: collapse;
+    width:           100%;
+}
+
+table.data-table > tr > th {
+    border-bottom: 1px solid white;
+    padding:       4px;
+}
+
+table.data-table > tr > td {
+    padding: 4px;
+}
+
+table.data-table > tr:nth-child(2n) {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+table.data-table > tr > td:not(:last-child) {
+    border-right: 1px solid white;
+}
diff --git a/Server/wwwroot/styles/global.css b/Server/wwwroot/styles/global.css
new file mode 100644
index 0000000..9de9fc1
--- /dev/null
+++ b/Server/wwwroot/styles/global.css
@@ -0,0 +1,214 @@
+@import url('data-table.css');
+
+:root {
+    --col-accent-pri:             #0aa;
+    --col-accent-pri-hl:          #0cc;
+    --col-error-pri:              #ffaa00;
+    --col-checksum-verified-pri:  #8dff76;
+    --col-bg:                     #222;
+    --col-dialog-bg:              #333;
+    --col-navbar-bg:              var(--col-accent-pri);
+    --col-button-pri:             var(--col-accent-pri);
+    --col-button-pri-hl:          var(--col-accent-pri-hl);
+    --col-button-disabled:        #777;
+    --col-button-disabled-bg:     #444;
+    --col-button-sec:             #555;
+    --col-button-sec-hl:          #777;
+    --col-button-sec-disabled:    #555;
+    --col-button-sec-disabled-bg: #000;
+    --col-button-warning:         #ff4848;
+    --col-button-warning-hl:      #ff9999;
+    --col-hr:                     #888;
+    --col-scrollbar:              #666;
+    --col-scrollbar-hover:        #aaaaaa;
+    --col-switch-bg:              var(--col-bg);
+    --col-switch-fg:              #fff;
+    --col-switch-bg-hl:           var(--col-accent-pri);
+    --col-progbar-fg:             var(--col-accent-pri);
+    --col-progbar-bg:             #777;
+
+    --size-default-gap:           30px;
+}
+
+::selection {
+    background: var(--col-accent-pri);
+}
+
+body {
+    background:     var(--col-bg);
+    color:          white;
+    display:        flex;
+    flex-direction: column;
+    font-family:    'Trebuchet MS', 'Lucida Sans Unicode';
+    height:         100dvh;
+    margin:         0;
+    overflow:       hidden;
+    width:          100dvw;
+}
+
+a {
+    color:           var(--col-accent-pri);
+    text-decoration: none;
+}
+
+@media (hover: hover) {
+    a:hover {
+        filter: brightness(1.5);
+    }
+}
+
+a::selection {
+    background: var(--col-accent-pri);
+    color:      #fff;
+}
+
+a.nondecorated {
+    color: #fff;
+}
+
+@media (hover: hover) {
+    a.nondecorated:hover {
+        color: #999;
+    }
+}
+
+code {
+    background:    #222;
+    border-radius: 10px;
+    box-sizing:    border-box;
+    font-family:   'Lucida Console';
+    font-size:     8pt;
+    overflow-y:    auto;
+    padding:       20px;
+    white-space:   pre-line;
+}
+
+button, input[type=submit] {
+    align-items:   center;
+    background:    var(--col-button-pri);
+    border-radius: 10px;
+    border:        none;
+    box-sizing:    border-box;
+    color:         white;
+    cursor:        pointer;
+    display:       flex;
+    height:        30px;
+    margin:        10px 5px 0 5px;
+    padding:       0 9px 0 9px;
+    user-select:   none;
+}
+
+button:disabled {
+    color:      var(--col-button-disabled)    !important;
+    background: var(--col-button-disabled-bg) !important;
+}
+
+button.warning {
+    background: var(--col-button-warning);
+}
+
+button > img {
+    height:       15px;
+    margin-right: 5px;
+    width:        15px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    button > :not(:first-child) {
+        display: none;
+    }
+
+    button > img {
+        height:       20px;
+        margin-right: 0;
+        padding:      8px;
+        width:        20px;
+    }
+}
+
+@media (hover: hover) {
+    button.warning:hover {
+        background: var(--col-button-warning-hl);
+    }
+}
+
+button.warning:active {
+    color:       var(--col-button-warning);
+    background:  white;
+}
+
+button.secondary {
+    background: var(--col-button-sec);
+}
+
+@media (hover: hover) {
+    button.secondary:hover {
+        background: var(--col-button-sec-hl);
+    }
+}
+
+button.secondary:active {
+    background: white;
+    color:      var(--col-button-sec);
+}
+
+button.secondary:disabled {
+    color:      var(--col-button-sec-disabled)    !important;
+    background: var(--col-button-sec-disabled-bg) !important;
+}
+
+@media (hover: hover) {
+    button:hover, input[type=submit]:hover {
+        background: var(--col-button-pri-hl);
+    }
+}
+
+button:active, input[type=submit]:active {
+    background: white;
+    color:      var(--col-button-pri);
+}
+
+input, textarea {
+    background:    rgba(0, 0, 0, 0);
+    border-radius: 5px;
+    border:        1px solid #aaa;
+    box-sizing:    border-box;
+    color:         white;
+    margin-bottom: 10px;
+}
+
+input {
+    height: 25px !important;
+}
+
+/* disable hotkey underlines on mobile devices */
+@media (hover: none) and (pointer: coarse) {
+    button > u {
+        text-decoration: none !important;
+    }
+}
+
+/* necessary for use inside flex containers */
+hr {
+    width: 100%;
+}
+
+::-webkit-scrollbar {
+    width:  10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background:    var(--col-scrollbar);
+    border-radius: 10px;
+}
+
+@media (hover: hover) {
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--col-scrollbar-hover);
+    }
+}
+
+::-webkit-scrollbar-corner {
+    opacity: 0;
+}