xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-10 12:08:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

commit latest main.scss (compliation of all bootstrap customization in one file, don't hurt me)

Browse Source
This commit is contained in:
Xevion
2020-09-15 07:23:05 -05:00
parent d1285125f5
commit 8a884c6542
1 changed files with 149 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
client/src/scss/main.scss
View File

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