Clean up CSS

thecodeflayer · Jul 24, 2020 · 807a5c2 · 807a5c2
1 parent b22069a
commit 807a5c2
Show file tree

Hide file tree

Showing 22 changed files with 306 additions and 343 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,14 +11,15 @@ platforms/
 # Build Artifacts
 *.js.map
 app/components/*.vue.js
-app/default-objects/*.js
-app/interfaces/*.js
-app/inverted/*.js
-app/retro/*.js
-app/standard/*.js
-app/utils/*.js
-app/main.js
-app/vue-extend.js
+app/dist
+#app/default-objects/*.js
+#app/interfaces/*.js
+#app/inverted/*.js
+#app/retro/*.js
+#app/standard/*.js
+#app/utils/*.js
+#app/main.js
+#app/vue-extend.js
 
 # Logs
 logs

diff --git a/app/_global_vars.scss b/app/_global_vars.scss
@@ -0,0 +1,19 @@
+$standard-bg: darkgreen;
+$standard-border: #004c00;
+$standard-btn-border: #003900;
+
+$danger-bg: darkred;
+$danger-border: #740000;
+$danger-btn-border: #5e0000;
+
+$empty-bg: #868585;
+$empty-border: #616161;
+$empty-btn-border: #4c4c4c;
+
+$highlight-bg:forestgreen;
+$highlight-border: #175c17;
+$highlight-btn-border: #124912;
+
+$standard-font-color:#ffffff;
+
+$font-ganon: "Return of Ganon", "ReturnofGanon", serif;
diff --git a/app/app.scss b/app/app.scss
@@ -1,9 +1,146 @@
 @import "~@nativescript/theme/core";
 @import "~@nativescript/theme/blue";
+@import "global_vars";
 
 // Place any CSS rules you want to apply on both iOS and Android here.
 // This is where the vast majority of your CSS code goes.
 
+.btn {
+  font-size: 20;
+  padding: 10;
+  color: white;
+  horizontal-align: center;
+  vertical-align: center;
+  font-family: $font-ganon;
+  width: 100%;
+  border-width: 2;
+  background-color: $standard-border;
+  border-color: $standard-btn-border;
+  &.danger {
+    background-color: $danger-border;
+    border-color: $danger-btn-border;
+  }
+  &.empty {
+    background-color: $empty-border;
+    border-color: $empty-btn-border;
+  }
+  &.highlight {
+    background-color: $highlight-border;
+    border-color: $highlight-btn-border;
+  }
+  &.padded {
+    width:90%;
+    magin-top:5;
+  }
+  &.extra-padded {
+    width: 90%;
+    margin:5;
+  }
+}
+
+.lbl {
+  font-size: 20;
+  font-family: $font-ganon;
+  color: $standard-font-color;
+}
+
+
+.modal-dialog {
+  background-color: $standard-bg;
+  border-width: 2px;
+  border-color: $standard-border;
+  padding: 10;
+  color: $standard-font-color;
+  font-family: $font-ganon;
+  font-size: 20;
+  &.danger {
+    background-color: $danger-bg;
+    border-color: $danger-border;
+  }
+}
+
+.save-wrapper {
+  font-size: 20;
+  margin: 4;
+  padding: 10;
+  color: white;
+  border-width: 2;
+  border-color: $standard-border;
+  vertical-align: top;
+  font-family: $font-ganon;
+  background-color: $standard-bg;
+  &.danger {
+    background-color: $danger-bg;
+    border-color: $danger-border;
+  }
+  &.empty {
+    background-color: $empty-bg;
+    border-color: $empty-border;
+  }
+  &.highlight {
+    background-color: $highlight-bg;
+    border-color: $highlight-border;
+  }
+}
+// Map
+.locale-green {
+  border-width: 3;
+  border-color: black;
+  background-color: aqua;
+}
+.locale-gray {
+  border-width: 3;
+  border-color: black;
+  background-color: gray;
+}
+.locale-red {
+  border-width: 3;
+  border-color: black;
+  background-color: red;
+}
+.center-key {
+  border-width: 3;
+  border-color: black;
+  background-color: yellow;
+}
+// Map Lists
+.list-top-header {
+  background-color: black;
+  font-family: $font-ganon;
+  font-size: 18;
+  color: $standard-font-color;
+  padding-top: 6;
+}
+
+.list-title {
+  font-family: $font-ganon;
+  font-size: 20;
+  padding:5;
+}
+
+.locale-wrapper {
+  background-color: $standard-bg;
+  margin:4;
+  border-width: 2;
+  border-color: $standard-border;
+  color: white;
+  padding: 4;
+  font-family: $font-ganon;
+  font-size: 20;
+  &.darkred {
+    background-color:$danger-bg;
+    border-color: $danger-border;
+  }
+  &.darkgreen {
+    background-color: $standard-bg;
+    border-color: $standard-border;
+  }
+  &.gray {
+    background-color: $empty-bg;
+    border-color: $empty-border;
+  }
+}
+
 // Font icon class
 .fab {
     font-family: "Font Awesome 5 Brands", "fa-brands-400";

diff --git a/app/components/DarkList.vue b/app/components/DarkList.vue
@@ -2,7 +2,7 @@
   <Page>
     <Navbar></Navbar>
     <StackLayout orientation="vertical">
-      <GridLayout columns="28,*,*" rows="20" class="top-header">
+      <GridLayout columns="28,*,*" rows="20" class="list-top-header">
         <Image col="0" row="0" height="16" width="16" src="~/img/map_btn.png" style="padding-left:10" @tap="toggleMode" verticalAlignment="top"/>
         <Label col="1" row="0" style="padding:0 8 0 0" text="Return to Map" @tap="toggleMode"/>
         <Label col="2" row="0" style="padding:0 8" horizontalAlignment="right" @tap="setFilterList"
@@ -24,7 +24,7 @@
                 <Image
                     :src="mapHandler.locations[key].checked ? '~/img/checked.png' : '~/img/unchecked.png'"
                     width="32" height="32" @tap="clickCheck(key)"/>
-                <Label class="title" :text="mapHandler.staticLocations[key].title"/>
+                <Label class="list-title" :text="mapHandler.staticLocations[key].title"/>
               </StackLayout>
               <StackLayout orientation="horizontal" style="padding-right:4;padding-top:6;">
                 <Image v-for="img in mapHandler.staticLocations[key].req" v-bind:key="img"
@@ -36,7 +36,7 @@
                      @tap="clickCompass(key)" horizontalAlignment="center"/>
               <StackLayout orientation="horizontal" style="margin-top:4;" horizontalAlignment="right">
                 <Image src="~/img/chest.png" height="16" width="16"/>
-                <Label class="title" fontSize="16"
+                <Label class="list-title" fontSize="16"
                        :text="'x'+mapHandler.staticLocations[key].itemCount"/>
               </StackLayout>
 

diff --git a/app/components/DarkMap.vue b/app/components/DarkMap.vue
@@ -424,33 +424,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .location-label {
-    font-family: "Return of Ganon";
-    font-size: 16;
-    color: #fff;
-  }
-  .locale-green {
-    border-width: 3;
-    border-color: black;
-    background-color: aqua;
-  }
-  .locale-gray {
-    border-width: 3;
-    border-color: black;
-    background-color: gray;
-  }
-  .locale-red {
-    border-width: 3;
-    border-color: black;
-    background-color: red;
-  }
-  .center-key{
-    border-width: 3;
-    border-color: black;
-    background-color: yellow;
-  }
 </style>
diff --git a/app/components/Debugger.vue b/app/components/Debugger.vue
@@ -89,25 +89,6 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .welcome {
-    color:white;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    padding: 10;
-  }
-  .btn {
-    font-size: 20;
-    background-color: darkgreen;
-    padding: 10;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 90%
-  }
   .textfield {
     color: black;
     background-color: #aaa;

diff --git a/app/components/Dungeons.vue b/app/components/Dungeons.vue
@@ -86,9 +86,6 @@
   @import '~@nativescript/theme/scss/variables/forest';
 
   // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
 
   .dungeon-stack {
   }

diff --git a/app/components/GameEditEmpty.vue b/app/components/GameEditEmpty.vue
@@ -143,35 +143,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #616161;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: gray;
-  }
 </style>
diff --git a/app/components/GameEditInvalid.vue b/app/components/GameEditInvalid.vue
@@ -2,12 +2,12 @@
   <Page backgroundColor="black">
     <Navbar></Navbar>
     <ScrollView>
-      <StackLayout orientation="vertical" class="save-wrapper invalid">
+      <StackLayout orientation="vertical" class="save-wrapper danger">
         <Label :text="game.name" fontSize="24" />
         <Label :text="'Game Mode: '+game.gameMode"/>
         <Label :text="'Item Shuffle: '+itemShuffleOptions[game.itemShuffle].label"/>
         <Label :text="'Goal: '+goalOptions[game.goal].label"/>
-        <Button class="btn invalid" @tap="deleteGame">Delete</Button>
+        <Button class="btn danger padded" @tap="deleteGame">Delete</Button>
         <Label textWrap="true" fontSize="16" textAlignment="center"
                text="NOTE: This game is based on an old version. You must delete this game."/>
         <Label :visibility="!allowDelete && game.timestamp ? 'visible': 'collapsed'" textWrap="true" fontSize="16" textAlignment="center"
@@ -41,35 +41,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #6a0000;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: darkred;
-  }
 </style>