move dozens of component styling rules into main.scss

client/src/App.vue

@@ -50,7 +50,6 @@
                     <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
                         <router-view/>
                     </b-col>
-                    <b-col md="0" lg="0" xl="2"></b-col>
                 </b-row>
             </b-container>
             <ais-configure :clickAnalytics="true" />
@@ -59,29 +58,6 @@
 </template>
 
 <style lang="scss">
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
-
-body {
-    background-color: $grey-0;
-    font-family: "Roboto", sans-serif;
-}
-
-.navbar {
-    background-color: $grey-2;
-}
-
-.navbar-brand {
-    font-family: "Poppins", sans-serif;
-    font-size: 1.4em;
-    color: $grey-11 !important;
-}
-
-.nav-link {
-    color: $grey-9 !important;
-}
-
 .ais-SearchBox-form {
     border: none;
 }

client/src/components/Character.vue

@@ -8,36 +8,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.card-body h4,
-.breadcrumb-item.active {
-    text-transform: capitalize;
-}
-
-.skeleton {
-    min-height: 24px;
-}
-a {
-    color: #1296ff;
-    &:hover {
-        color: #007fe0;
-    }
-}
-
-.breadcrumb-item + .breadcrumb-item::before {
-    color: $grey-10;
-}
-
-.breadcrumb {
-    background-color: $grey-3;
-    border-radius: 0;
-
-    .breadcrumb-item {
-        color: $grey-10;
-    }
-}
-</style>
-
 <script>
 import Skeleton from './Skeleton.vue';
 

client/src/components/CharacterList.vue

@@ -18,63 +18,6 @@
     </div>
 </template>
 
-<style lang="scss">
-.btn {
-    box-shadow: none;
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.character-button {
-    color: $grey-10;
-    background-color: $grey-4;
-    border-color: $grey-3;
-
-    .badge {
-        color: lighten($grey-11, 8%);
-    }
-}
-
-.character-button {
-    &:focus {
-        background-color: $grey-6 !important;
-        border-color: $grey-4 !important;
-
-        &:active {
-            box-shadow: none !important;
-        }
-    }
-
-    &:hover {
-        background-color: $grey-4 !important;
-        border-color: $grey-3 !important;
-    }
-
-    &:active {
-        background-color: $grey-3 !important;
-        border-color: $grey-3 !important;
-    }
-}
-
-.character-button > .badge {
-    background-color: $grey-7;
-}
-
-/*.btn-dark {*/
-/*    &:not(:disabled), &:not {*/
-/*        */
-/*    }*/
-/*}*/
-
-/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
-/*    color: #ffffff;*/
-/*    background-color: #1d2124;*/
-/*    border-color: #171a1d;*/
-/*}*/
-</style>
-
 <script>
 export default {
     name: "CharacterList",

client/src/components/Home.vue

@@ -10,15 +10,6 @@
     </b-card>
 </template>
 
-<style lang="scss">
-.card {
-    color: $grey-9;
-    background-color: $grey-2;
-    border-bottom: 1px solid $grey-1;
-    border-radius: 0;
-}
-</style>
-
 <script>
 import axios from "axios";
 

client/src/components/QuoteList.vue

@@ -26,52 +26,6 @@
     </table>
 </template>
 
-<style lang="scss">
-.quote-list > tr {
-    white-space: nowrap;
-
-    &:hover {
-        background-color: $grey-4;
-    }
-
-    &.highlight {
-        background-color: $grey-5 !important;
-    }
-}
-
-.quote-text {
-    white-space: normal;
-}
-
-.quote-speaker {
-    color: darken($grey-10, 1.75%);
-    min-width: 100px;
-    padding-right: 1em;
-    font-weight: 600;
-    vertical-align: text-top;
-    text-align: right;
-    font-family: "Montserrat", sans-serif;
-}
-
-table.quote-list tr td:last-child {
-    height: 100%;
-
-    a {
-        height: 100%;
-    }
-
-    svg {
-        font-size: 1.35em;
-        opacity: 0;
-        transition: opacity 0.1s ease-in;
-    }
-}
-
-table.quote-list tr:hover td:last-child svg {
-    opacity: 1;
-}
-</style>
-
 <script>
 export default {
     props: {

client/src/components/SearchResults.vue

@@ -11,34 +11,7 @@
         </ais-hits>
     </div>
 </template>
-<style lang="scss">
-.card-footer {
-    padding: 0.1em;
-    font-size: 0.8em;
-    color: grey;
-}
 
-mark,
-.mark {
-    padding: 0.02em;
-    background-color: $highlight;
-    /*color: #black;*/
-    /*-webkit-filter: invert(100%);*/
-    /*filter: invert(100%);*/
-}
-
-.ais-Hits-item,
-.ais-InfiniteHits-item,
-.ais-InfiniteResults-item,
-.ais-Results-item {
-    /*margin-top: 1rem;*/
-    /*margin-left: 1rem;*/
-    /*padding: 1rem;*/
-    /*width: calc(25% - 1rem);*/
-    border: none;
-    box-shadow: none;
-}
-</style>
 <script>
 import SearchResult from "./SearchResult.vue";
 

client/src/components/SeasonList.vue

@@ -58,113 +58,6 @@
     </div>
 </template>
 
-<style lang="scss">
-// Make all season cards 'clickable'
-.season-item > .card-body > .card-header {
-    cursor: pointer;
-}
-
-// Make all chevron icons rotate 180 when clicked
-.bi-chevron-down {
-    -moz-transition: all 0.25s ease-in-out;
-    -webkit-transition: all 0.25s ease-in-out;
-    transition: all 0.25s ease-in-out;
-}
-
-.not-collapsed > .bi-chevron-down {
-    transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-}
-
-// White popovers use white background on top left/right corners, this disables it.
-.b-popover {
-    background: transparent;
-}
-
-// Dark theme popover
-.popover-header {
-    background-color: darken($grey-2, 2.1%);
-    border-color: $grey-1;
-    color: $grey-11;
-}
-
-// Dark theme popover, arrow-right fix
-.bs-popover-top > .arrow::after,
-.bs-popover-auto[x-placement^="top"] > .arrow::after {
-    border-top-color: darken($grey-3, 2%);
-}
-
-.bs-popover-bottom > .arrow::after,
-.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
-    border-bottom-color: darken($grey-3, 2%);
-}
-
-.bs-popover-left > .arrow::after,
-.bs-popover-auto[x-placement^="left"] > .arrow::after {
-    border-left-color: darken($grey-3, 2%);
-}
-
-.bs-popover-right > .arrow::after,
-.bs-popover-auto[x-placement^="right"] > .arrow::after {
-    border-right-color: darken($grey-3, 2%);
-}
-
-.season-item .list-group-item:first-child {
-    border-radius: 0;
-}
-
-// Dark theme popover body
-.popover-body {
-    color: $grey-10;
-    background-color: darken($grey-3, 2%);
-}
-
-.season-title {
-    color: $grey-8;
-    cursor: pointer;
-}
-
-// Season Card Background Color
-.season-item {
-    .card-body {
-        padding: 0;
-    }
-
-    .card-header {
-        background-color: darken($grey-2, 1.5%);
-        color: $grey-9;
-        border-bottom: 1px solid $grey-0;
-        font-family: "Montserrat", sans-serif;
-    }
-}
-
-.episode-item {
-    border-color: $grey-2;
-    background-color: darken($grey-3, 2%);
-    color: $grey-8 !important;
-    border-left-width: 0;
-    border-right-width: 0;
-
-    &:hover,
-    &:active,
-    &:focus {
-        background-color: darken($grey-1, 0.75%);
-    }
-}
-
-.no-link {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-        color: inherit;
-        text-decoration: none;
-    }
-}
-</style>
-
 <script>
 import axios from "axios";
 

client/src/scss/main.scss

@@ -1,5 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
 $grid-breakpoints: (
     xs: 0,
@@ -12,3 +13,296 @@ $grid-breakpoints: (
 @import '~bootstrap/scss/bootstrap';
 @import '~bootstrap/scss/_mixins';
 @import '~bootstrap-vue/src/index.scss';
+
+body {
+    background-color: $grey-0;
+    font-family: "Roboto", sans-serif;
+}
+
+.navbar {
+    background-color: $grey-2;
+}
+
+.navbar-brand {
+    font-family: "Poppins", sans-serif;
+    font-size: 1.4em;
+    color: $grey-11 !important;
+}
+
+.nav-link {
+    color: $grey-9 !important;
+}
+
+// Apply
+.card {
+    color: $grey-9;
+    background-color: $grey-2;
+    border-bottom: 1px solid $grey-1;
+    border-radius: 0;
+}
+
+.quote-list > tr {
+    white-space: nowrap;
+
+    &:hover {
+        background-color: $grey-4;
+    }
+
+    &.highlight {
+        background-color: $grey-5 !important;
+    }
+}
+
+.quote-text {
+    white-space: normal;
+}
+
+.quote-speaker {
+    color: darken($grey-10, 1.75%);
+    min-width: 100px;
+    padding-right: 1em;
+    font-weight: 600;
+    vertical-align: text-top;
+    text-align: right;
+    font-family: "Montserrat", sans-serif;
+}
+
+table.quote-list tr td:last-child {
+    height: 100%;
+
+    a {
+        height: 100%;
+    }
+
+    svg {
+        font-size: 1.35em;
+        opacity: 0;
+        transition: opacity 0.1s ease-in;
+    }
+}
+
+table.quote-list tr:hover td:last-child svg {
+    opacity: 1;
+}
+
+// Make all season cards 'clickable'
+.season-item > .card-body > .card-header {
+    cursor: pointer;
+}
+
+// Make all chevron icons rotate 180 when clicked
+.bi-chevron-down {
+    -moz-transition: all 0.25s ease-in-out;
+    -webkit-transition: all 0.25s ease-in-out;
+    transition: all 0.25s ease-in-out;
+}
+
+.not-collapsed > .bi-chevron-down {
+    transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+}
+
+// White popovers use white background on top left/right corners, this disables it.
+.b-popover {
+    background: transparent;
+    border-color: $grey-1 !important;
+}
+
+// Dark theme popover
+.popover-header {
+    background-color: darken($grey-2, 2.1%) !important;
+    border-color: $grey-1 !important;
+    color: $grey-11 !important;
+}
+
+// Dark theme popover, arrow-right fix
+.bs-popover-top > .arrow::after,
+.bs-popover-auto[x-placement^="top"] > .arrow::after {
+    border-color: darken($grey-3, 2%) !important;
+}
+
+.bs-popover-bottom > .arrow::after,
+.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
+    border-bottom-color: darken($grey-3, 2%) !important;
+}
+
+.bs-popover-left > .arrow::after,
+.bs-popover-auto[x-placement^="left"] > .arrow::after {
+    border-color: darken($grey-3, 2%) !important;
+}
+
+.bs-popover-right > .arrow::after,
+.bs-popover-auto[x-placement^="right"] > .arrow::after {
+    border-right-color: darken($grey-3, 2%) !important;
+}
+
+.season-item .list-group-item {
+    background-color: $grey-3;
+    &:first-child {
+        border-radius: 0;
+    }
+    &:hover {
+        background-color: lighten($grey-3, 2.5%);
+    }
+}
+
+// Dark theme popover body
+.popover-body {
+    color: $grey-8 !important;
+    background-color: darken($grey-3, 2%) !important;
+}
+
+.season-title {
+    color: $grey-8;
+    cursor: pointer;
+}
+
+// Season Card Background Color
+.season-item {
+    .card-body {
+        padding: 0;
+    }
+
+    .card-header {
+        background-color: darken($grey-2, 1.5%);
+        color: $grey-9;
+        border-bottom: 1px solid $grey-0 !important;
+        font-family: "Montserrat", sans-serif;
+    }
+}
+
+.episode-item {
+    border-color: $grey-2;
+    background-color: darken($grey-3, 2%);
+    color: $grey-8 !important;
+    border-left-width: 0;
+    border-right-width: 0;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: darken($grey-1, 0.75%);
+    }
+}
+
+.no-link {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+.btn {
+    box-shadow: none;
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.character-button {
+    color: $grey-10;
+    background-color: $grey-4;
+    border-color: $grey-3;
+
+    .badge {
+        color: lighten($grey-11, 8%);
+    }
+}
+
+.character-button {
+    &:focus {
+        background-color: $grey-6 !important;
+        border-color: $grey-4 !important;
+
+        &:active {
+            box-shadow: none !important;
+        }
+    }
+
+    &:hover {
+        background-color: $grey-4 !important;
+        border-color: $grey-3 !important;
+    }
+
+    &:active {
+        background-color: $grey-3 !important;
+        border-color: $grey-3 !important;
+    }
+}
+
+.character-button > .badge {
+    background-color: $grey-7;
+}
+
+/*.btn-dark {*/
+/*    &:not(:disabled), &:not {*/
+/*        */
+/*    }*/
+/*}*/
+
+/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
+/*    color: #ffffff;*/
+/*    background-color: #1d2124;*/
+/*    border-color: #171a1d;*/
+/*}*/
+
+.card-footer {
+    padding: 0.1em;
+    font-size: 0.8em;
+    color: grey;
+}
+
+mark,
+.mark {
+    padding: 0.02em;
+    background-color: $highlight;
+    /*color: #black;*/
+    /*-webkit-filter: invert(100%);*/
+    /*filter: invert(100%);*/
+}
+
+//.ais-Hits-item,
+//.ais-InfiniteHits-item,
+//.ais-InfiniteResults-item,
+//.ais-Results-item {
+//    /*margin-top: 1rem;*/
+//    /*margin-left: 1rem;*/
+//    /*padding: 1rem;*/
+//    /*width: calc(25% - 1rem);*/
+//    border: none;
+//    box-shadow: none;
+//}
+
+.card-body h4,
+.breadcrumb-item.active {
+    text-transform: capitalize;
+}
+
+.skeleton {
+    min-height: 24px;
+}
+a {
+    color: #1296ff;
+    &:hover {
+        color: #007fe0;
+    }
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+    color: $grey-10;
+}
+
+.breadcrumb {
+    background-color: $grey-3;
+    border-radius: 0;
+
+    .breadcrumb-item {
+        color: $grey-10;
+    }
+}