abandon ghetto css

src/csui/LoggerUi.vue

@@ -1,18 +1,18 @@
 <template>
-  <div v-if="showLoggerUi" :style="[ghettoCss.rootWindow, ghettoCss.flexColumn]">
-    <div :style="ghettoCss.header">
-      <div :style="ghettoCss.headerTop">DEFORESTATOR 5000</div>
-      <div :style="[ghettoCss.headerBottom]">Iron Legion's finest logging tool</div>
+  <div v-if="showLoggerUi">
+    <div>
+      <div>DEFORESTATOR 5000</div>
+      <div>Iron Legion's finest logging tool</div>
     </div>
-    <div :style="[ghettoCss.flexRow, ghettoCss.flexGrow, ghettoCss.content]">
-      <div :style="[ghettoCss.flexColumn, ghettoCss.configPanel]">
+    <div>
+      <div>
         logger config panel is here
       </div>
-      <div :style="[ghettoCss.flexColumn, ghettoCss.logPanel]">
+      <div class="test-class">
         logger results will go here
       </div>
     </div>
-    <div :style="[ghettoCss.content, ghettoCss.buttonRow]">
+    <div>
       button row is here
     </div>
   </div>
@@ -24,60 +24,7 @@ export default {
     return {
       showLoggerUi: true,
       ghettoCss: {
-        rootWindow: {
-          position: 'fixed',
-          top: '5vh',
-          left: '5vw',
-          width: '90vw',
-          height: '90vh',
-          zIndex: '999999', 
-          backgroundColor: 'rgba(18,17,15,0.9)',
-          color: '#f1f1f1',
-          fontSize: '14px',
-        },
-        header: {
-          width: '100%',
-          color: '#ffffff',
-          backgroundColor: '#811',
-          flexGrow: '0',
-          flexShrink: '0',
-        },
-        headerTop: {
-          width: '100%',
-          fontSize: '42px',
-          paddingLeft: '32px',
-          paddingTop: '8px',
-        },
-        headerBottom: {
-          // width: '100%',
-          fontSize: '18px',
-          paddingLeft: '32px',
-          paddingTop: '8px',
-          paddingBottom: '6px',
-          backgroundColor: '#322',
-        },
-        flexColumn: {
-          display: 'flex',
-          flexDirection: 'column',
-        },
-        flexRow: {
-          display: 'flex',
-          flexDirection: 'row',
-        },
-        flexGrow: {
-          flexGrow: 1,
-        },
-        configPanel: {
-          flexGrow: 1,
-          padddingRight: '8px',
-        },
-        logPanel: {
-          flexGrow: 2,
-          padddingRight: '8px',
-        },
-        content: {
-          padding: '16px',
-        }
+        
       }
     }
   }
@@ -85,6 +32,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// scss no worky
+@import url('../res/css/colors.scss');
+@import url('../res/css/font/overpass.css');
+@import url('../res/css/font/overpass-mono.css');
+@import url('../res/css/common.scss');
+@import url('../res/css/flex.css');
+
+.rootWindow {
+  position: fixed !important;
+  top: 5vh !important;
+  left: 5vw !important;
+  width: 90vw !important;
+  height: 90vh !important;
+  z-index: 999999 !important;
+  background-color: rgba(18,17,15,0.9) !important;
+  color: #f1f1f1 !important;
+  font-size: 14px !important;
+}
 
 </style>