SeasonList, Card Color, CharacterList adjustments, class arrangements

client/src/assets/scss/_variables.scss

@@ -1,3 +1,5 @@
+$grey-11: #dddddd;
+$grey-10: #cfcfcf;
 $grey-9: #b3b3b3;
 $grey-8: #a0a0a0;
 $grey-7: #565656;
@@ -5,7 +7,7 @@ $grey-6: #3e3e3e;
 $grey-5: #292929;
 $grey-4: #242424;
 $grey-3: #1d1d1d;
-$grey-2: #181818;
+$grey-2: #131313;
-$grey-1: #151515;
+$grey-1: #0e0e0e;
-$grey-0: #000000;
+$grey-0: #070707;
 $highlight: #d2ca00;

client/src/components/CharacterList.vue

@@ -20,8 +20,9 @@
     }
 
     .character-button {
-        background-color: $grey-6;
+        color: $grey-10;
-        border-color: $grey-4;
+        background-color: $grey-4;
+        border-color: $grey-3;
     }
 
     .character-button {

client/src/components/Home.vue

@@ -14,8 +14,8 @@
 
     .card {
         color: $grey-9;
-        background-color: $grey-1;
+        background-color: $grey-2;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+        border-bottom: 1px solid $grey-1;
         border-radius: 0;
     }
 </style>

client/src/components/SeasonList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="accordion" role="tablist">
-        <b-card class="season-card" v-for="season in seasons" :key="season.season_id">
+        <b-card class="season-item" v-for="season in seasons" :key="season.season_id">
             <b-card-header header-tag="header" role="tab">
                 <a class="no-link align-items-center justify-content-between d-flex"
                    v-b-toggle="'accordion-' + season.season_id">
@@ -14,7 +14,8 @@
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="episode in season.episodes">
-                            <b-list-group-item :id="`s-${season.season_id}-ep-${episode.episode_id}`"
+                            <b-list-group-item class="episode-item"
+                                               :id="`s-${season.season_id}-ep-${episode.episode_id}`"
                                                :key="`rl-${episode.episode_id}`">
                                 <router-link class="no-link"
                                              :to="`/${season.season_id}/${episode.episode_id}`">
@@ -38,20 +39,18 @@
 <style lang="scss">
     @import "../assets/scss/_variables";
 
-    .season-card > .card-body > .card-header {
+    // 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;
     }
 
-    .collapsed > .bi-chevron-down {
-        text-align: right;
-    }
-
     .not-collapsed > .bi-chevron-down {
         transform: rotate(180deg);
         -ms-transform: rotate(180deg);
@@ -59,70 +58,47 @@
         -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: $grey-3;
         border-color: $grey-2;
-        color: white;
+        color: $grey-11;
     }
 
+    // Dark theme popover, arrow-right fix
     .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
-        /*left: 1px;*/
-        /*border-width: 0.5rem 0.5rem 0.5rem 0;*/
         border-right-color: $grey-2;
     }
 
+    // Dark theme popover body
     .popover-body {
-        color: white;
+        color: $grey-10;
         background-color: $grey-2;
     }
 
     .season-title { color: $grey-8; cursor: pointer; }
 
-    .accordion.list-group-item {
+    // Season Card Background Color
-        border-radius: 0;
+    .season-item {
-        border-width: 0 0 0 0;
+        .card-body {
-        border-bottom-width: 1px;
+            padding: 0;
-        padding-left: 30px;
-        font-weight: 500;
-
-        &:first-child { border-top-width: 1px; }
-
-        &:last-child { border-bottom-width: 0; }
         }
-
-    .accordion {
-        .list-group-item {
-            padding: 10px 20px;
-
-            a { display: block; }
-
-            .badge { float: right; min-width: 36px; }
-        }
-
-        .card-body { padding: 0; }
-    }
-
         .card-header {
             background-color: $grey-2;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+            color: $grey-9;
+            border-bottom: 1px solid $grey-0;
             font-family: 'Montserrat', sans-serif;
         }
-
-    .card {
-        background-color: inherit;
-        /*border: 3px solid #0a0a0a;*/
-        /*border-radius: 0;*/
-        padding-bottom: 0;
-        /*&:not(:first-child) { border-top-width: 0; }*/
-        /*&:not(:last-child) { border-bottom-width: 0; }*/
     }
 
-    .list-group-item {
+    .episode-item {
-        border-color: rgba(24, 24, 24, 0.82);
+        border-color: $grey-2;
-        background-color: $grey-3;
+        background-color: $grey-2;
         color: $grey-8;
         border-left-width: 0;
         border-right-width: 0;