From 8a884c6542d958ebf5902aa5a0e93a7e24eb17c6 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 15 Sep 2020 07:23:05 -0500
Subject: [PATCH] commit latest main.scss (compliation of all bootstrap
 customization in one file, don't hurt me)

---
 client/src/scss/main.scss | 288 ++++++++++++++++++++------------------
 1 file changed, 149 insertions(+), 139 deletions(-)

diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss
index 083cac6..9ab6da1 100644
--- a/client/src/scss/main.scss
+++ b/client/src/scss/main.scss
@@ -3,11 +3,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
 $grid-breakpoints: (
-    xs: 0,
-    sm: 456px,
-    md: 689px,
-    lg: 900px,
-    xl: 1450px
+        xs: 0,
+        sm: 456px,
+        md: 689px,
+        lg: 900px,
+        xl: 1450px
 );
 
 @import '~bootstrap/scss/bootstrap';
@@ -15,229 +15,231 @@ $grid-breakpoints: (
 @import '~bootstrap-vue/src/index.scss';
 
 body {
-    background-color: $grey-0;
-    font-family: "Roboto", sans-serif;
+  background-color: $grey-0;
+  font-family: "Roboto", sans-serif;
 }
 
 .navbar {
-    background-color: $grey-2;
+  background-color: $grey-2;
 }
 
 .navbar-brand {
-    font-family: "Poppins", sans-serif;
-    font-size: 1.4em;
-    color: $grey-11 !important;
+  font-family: "Poppins", sans-serif;
+  font-size: 1.4em;
+  color: $grey-11 !important;
 }
 
 .nav-link {
-    color: $grey-9 !important;
+  color: $grey-9 !important;
 }
 
 // Apply
 .card {
-    color: $grey-9;
-    background-color: $grey-2;
-    border-bottom: 1px solid $grey-1;
-    border-radius: 0;
+  color: $grey-9;
+  background-color: $grey-2;
+  border-bottom: 1px solid $grey-1;
+  border-radius: 0;
 }
 
 .quote-list > tr {
-    white-space: nowrap;
+  white-space: nowrap;
 
-    &:hover {
-        background-color: $grey-4;
-    }
+  &:hover {
+    background-color: $grey-4;
+  }
 
-    &.highlight {
-        background-color: $grey-5 !important;
-    }
+  &.highlight {
+    background-color: $grey-5 !important;
+  }
 }
 
 .quote-text {
-    white-space: normal;
+  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;
+  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%;
+  }
 
-    a {
-        height: 100%;
-    }
-
-    svg {
-        font-size: 1.35em;
-        opacity: 0;
-        transition: opacity 0.1s ease-in;
-    }
+  svg {
+    font-size: 1.35em;
+    opacity: 0;
+    transition: opacity 0.1s ease-in;
+  }
 }
 
 table.quote-list tr:hover td:last-child svg {
-    opacity: 1;
+  opacity: 1;
 }
 
 // Make all season cards 'clickable'
 .season-item > .card-body > .card-header {
-    cursor: pointer;
+  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;
+  -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);
+  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;
+  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;
+  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-color: darken($grey-3, 2%) !important;
+  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;
+  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;
+  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%) !important;
+  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%);
-    }
+  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;
+  color: $grey-8 !important;
+  background-color: darken($grey-3, 2%) !important;
 }
 
 .season-title {
-    color: $grey-8;
-    cursor: pointer;
+  color: $grey-8;
+  cursor: pointer;
 }
 
 // Season Card Background Color
 .season-item {
-    .card-body {
-        padding: 0;
-    }
+  .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;
-    }
+  .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;
+  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%);
-    }
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: darken($grey-1, 0.75%);
+  }
 }
 
 .no-link {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
     color: inherit;
     text-decoration: none;
-
-    &:hover {
-        color: inherit;
-        text-decoration: none;
-    }
+  }
 }
 
 .btn {
+  box-shadow: none;
+
+  &:focus {
     box-shadow: none;
-
-    &:focus {
-        box-shadow: none;
-    }
+  }
 }
 
 .character-button {
-    color: $grey-10;
-    background-color: $grey-4;
-    border-color: $grey-3;
+  color: $grey-10;
+  background-color: $grey-4;
+  border-color: $grey-3;
 
-    .badge {
-        color: lighten($grey-11, 8%);
-    }
+  .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;
-    }
+  &:focus {
+    background-color: $grey-6 !important;
+    border-color: $grey-4 !important;
 
     &:active {
-        background-color: $grey-3 !important;
-        border-color: $grey-3 !important;
+      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;
+  background-color: $grey-7;
 }
 
 /*.btn-dark {*/
@@ -253,18 +255,18 @@ table.quote-list tr:hover td:last-child svg {
 /*}*/
 
 .card-footer {
-    padding: 0.1em;
-    font-size: 0.8em;
-    color: grey;
+  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%);*/
+  padding: 0.02em;
+  background-color: $highlight;
+  /*color: #black;*/
+  /*-webkit-filter: invert(100%);*/
+  /*filter: invert(100%);*/
 }
 
 //.ais-Hits-item,
@@ -281,28 +283,36 @@ mark,
 
 .card-body h4,
 .breadcrumb-item.active {
-    text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 .skeleton {
-    min-height: 24px;
+  min-height: 24px;
 }
+
 a {
-    color: #1296ff;
-    &:hover {
-        color: #007fe0;
-    }
+  color: #1296ff;
+
+  &:hover {
+    color: #007fe0;
+  }
 }
 
 .breadcrumb-item + .breadcrumb-item::before {
-    color: $grey-10;
+  color: $grey-10;
 }
 
 .breadcrumb {
-    background-color: $grey-3;
-    border-radius: 0;
+  background-color: $grey-3;
+  border-radius: 0;
 
-    .breadcrumb-item {
-        color: $grey-10;
-    }
+  .breadcrumb-item {
+    color: $grey-10;
+  }
+}
+
+.list-group {
+  .list-group-item {
+    background-color: $grey-2;
+  }
 }