Initialization

main.css

@@ -0,0 +1,175 @@
+@import-glob "views/*.css";
+
+@import-glob "components/*.css";
+
+.sheetform {
+    padding: 0;
+    background-color: #0b0b0b !important;
+    height: 100%;
+    
+    .charactersheet {
+        padding: 4px !important;
+        border: #550000 4px double !important;
+        
+        .img-wrapper {
+            margin: auto;
+            width: fit-content;
+            height: fit-content;
+            img {
+                width: 400px;
+            }
+        }
+        
+        button {
+            background-color: #550000;
+            border-radius: 1em;
+            border: 0;
+            margin: 0px 2px;
+            padding: 0px;
+            text-align: center;
+            vertical-align: middle;
+        }
+        
+        input {
+            background-color: #444444;
+            border: none;
+            color:#aaaaee;
+            
+            &[type=text],
+            &[type=number] {
+                padding: 4px;
+                text-align: center;
+            }
+            
+            &[disabled] {
+                background-color: #111111;
+                border: 3px solid #444444;
+                padding: 1px;
+            }
+            
+            &[type="number"]::-webkit-inner-spin-button,
+            &[type="number"]::-webkit-outer-spin-button {
+                appearance: none;
+                margin: 0;
+            }
+        }
+    }
+}
+
+
+
+.tabflex {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: fit-content;
+    justify-content: center;
+    flex: 1 1 0;
+    gap: 2px;
+    
+    > button {
+        width: 100%;
+        color: white;
+    }
+}
+
+.sheet-tabstoggle {
+    &[value="main"]~button.tabbtn[name="act_main"],
+    &[value="skills"]~button.tabbtn[name="act_skills"],
+    &[value="magic"]~button.tabbtn[name="act_magic"],
+    &[value="enhancements"]~button.tabbtn[name="act_enhancements"],
+    &[value="matrix"]~button.tabbtn[name="act_matrix"],
+    &[value="vehicles"]~button.tabbtn[name="act_vehicles"],
+    &[value="equipment"]~button.tabbtn[name="act_equipment"],
+    &[value="character"]~button.tabbtn[name="act_character"] {
+        color: #aaaaee;
+    }
+}
+
+.newSrCheckbox {
+    position: relative;
+    width: 1.3em !important;
+    margin: auto;
+    border-radius: 100%;
+    visibility: hidden;
+    
+    &::after {
+        visibility: visible;
+        content: "";
+        position: absolute;
+        display: inline-block;
+        width: 1.3em;
+        height: 1.3em;
+        margin: auto;
+        border-radius: 6px;
+        background-color: #550000;
+        text-align: center;
+        vertical-align: middle;
+        overflow: hidden;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    
+    &:checked::after {
+        content: "X";
+    }
+}
+
+.gmroll {
+    position: absolute;
+    display: flex;
+    left: calc(100% - 16em);
+    top: 16em;
+    width: 12em;
+    
+    button {
+        color:#0b0b0b;
+        width: 100%;
+    }
+    
+    .toggmroll[value="/w gm "]~button.togbtn[name="act_toggmroll"],
+    .togedge[value="!/"]~button.togbtn[name="act_togedge"] {
+        color: #aaaaee;
+    }
+}
+
+.generic-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: auto;
+    justify-content: space-around;
+    padding: 2em;
+    width: auto;
+    min-height: 100%;
+}
+
+.tab {
+    margin-top: 10px;
+    outline: 4px;
+    outline-offset: 4px;
+    outline-style: double;
+    outline-color: #550000;
+    width: 100%;
+    height: 40em;
+    display: none;
+}
+
+h2 {
+    color: #aaaaee;
+    font-size: 22pt;
+    margin-bottom: 0.7em;
+}
+
+.hidden {
+    &.op {
+        opacity: 0;
+    }
+
+    &.vis {
+        visibility: hidden;
+    }
+
+    &.disp {
+        display: none;
+    }
+}