v0.1av0.1a

1 files changed, 169 insertions, 0 deletions

diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
new file mode 100644
index 0000000..ebcda47
--- /dev/null
+++ b/wwwroot/styles/global.css
@@ -0,0 +1,169 @@
+@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-scrollbar:              #666666;
+    --col-scrollbar-hover:        #aaaaaa;
+    --col-switch-bg:              var(--col-bg);
+    --col-switch-fg:              #fff;
+    --col-switch-bg-hl:           var(--col-accent-pri);
+
+    --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';
+    margin:         0;
+    overflow:       hidden;
+}
+
+a {
+    color:           var(--col-accent-pri);
+    text-decoration: none;
+}
+
+a:hover {
+    filter: brightness(1.5);
+}
+
+a::selection {
+    background: var(--col-accent-pri);
+    color:      #fff;
+}
+
+a.nondecorated {
+    color: #fff;
+}
+
+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] {
+    background:    var(--col-button-pri);
+    border-radius: 10px;
+    border:        none;
+    box-sizing:    border-box;
+    color:         white;
+    cursor:        pointer;
+    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.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);
+}
+
+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;
+}
+
+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;
+}
+
+/* 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;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--col-scrollbar-hover);
+}
+
+::-webkit-scrollbar-corner {
+    opacity: 0;
+}