mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-09 16:08:50 -06:00
commit latest main.scss (compliation of all bootstrap customization in one file, don't hurt me)
This commit is contained in:
Xevion
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user