darken based color changes, badge color white to grey

This commit is contained in:
Xevion
2020-08-11 14:23:45 -05:00
parent 8a13f240e3
commit ba19e8be5b
5 changed files with 17 additions and 10 deletions
+1 -1
View File
@@ -26,7 +26,7 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&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=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; } body { background-color: $grey-0; font-family: 'Roboto', sans-serif; }
.ais-SearchBox-form { .ais-SearchBox-form {
border: none; border: none;
+1 -1
View File
@@ -6,7 +6,7 @@ $grey-7: #565656;
$grey-6: #3e3e3e; $grey-6: #3e3e3e;
$grey-5: #292929; $grey-5: #292929;
$grey-4: #242424; $grey-4: #242424;
$grey-3: #1d1d1d; $grey-3: #191919;
$grey-2: #131313; $grey-2: #131313;
$grey-1: #0e0e0e; $grey-1: #0e0e0e;
$grey-0: #070707; $grey-0: #070707;
+3 -1
View File
@@ -15,7 +15,6 @@
.btn { .btn {
box-shadow: none; box-shadow: none;
&:focus { box-shadow: none; } &:focus { box-shadow: none; }
} }
@@ -23,6 +22,9 @@
color: $grey-10; color: $grey-10;
background-color: $grey-4; background-color: $grey-4;
border-color: $grey-3; border-color: $grey-3;
.badge {
color: lighten($grey-11, 8%);
}
} }
.character-button { .character-button {
+1
View File
@@ -24,6 +24,7 @@
} }
.quote-speaker { .quote-speaker {
color: darken($grey-10, 1.75%);
min-width: 100px; min-width: 100px;
padding-right: 1em; padding-right: 1em;
font-weight: 600; font-weight: 600;
+11 -7
View File
@@ -65,20 +65,24 @@
// Dark theme popover // Dark theme popover
.popover-header { .popover-header {
background-color: $grey-3; background-color: darken($grey-2, 2.1%);
border-color: $grey-2; border-color: $grey-1;
color: $grey-11; color: $grey-11;
} }
// Dark theme popover, arrow-right fix // Dark theme popover, arrow-right fix
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: $grey-2; border-right-color: darken($grey-3, 2%);
}
.season-item .list-group-item:first-child {
border-radius: 0;
} }
// Dark theme popover body // Dark theme popover body
.popover-body { .popover-body {
color: $grey-10; color: $grey-10;
background-color: $grey-2; background-color: darken($grey-3, 2%);
} }
.season-title { color: $grey-8; cursor: pointer; } .season-title { color: $grey-8; cursor: pointer; }
@@ -89,7 +93,7 @@
padding: 0; padding: 0;
} }
.card-header { .card-header {
background-color: $grey-2; background-color: darken($grey-2, 1.5%);
color: $grey-9; color: $grey-9;
border-bottom: 1px solid $grey-0; border-bottom: 1px solid $grey-0;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@@ -98,12 +102,12 @@
.episode-item { .episode-item {
border-color: $grey-2; border-color: $grey-2;
background-color: $grey-2; background-color: darken($grey-3, 2%);
color: $grey-8; color: $grey-8;
border-left-width: 0; border-left-width: 0;
border-right-width: 0; border-right-width: 0;
&:hover { background-color: $grey-2; } &:hover { background-color: darken($grey-3, 1%); }
} }
.no-link { .no-link {