mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-09 14:08:53 -06:00
move dozens of component styling rules into main.scss
This commit is contained in:
Xevion
@@ -50,7 +50,6 @@
|
||||
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
|
||||
<router-view/>
|
||||
</b-col>
|
||||
<b-col md="0" lg="0" xl="2"></b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<ais-configure :clickAnalytics="true" />
|
||||
@@ -59,29 +58,6 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@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=Poppins:wght@500&display=swap");
|
||||
|
||||
body {
|
||||
background-color: $grey-0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: $grey-2;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.4em;
|
||||
color: $grey-11 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $grey-9 !important;
|
||||
}
|
||||
|
||||
.ais-SearchBox-form {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -8,36 +8,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-body h4,
|
||||
.breadcrumb-item.active {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
min-height: 24px;
|
||||
}
|
||||
a {
|
||||
color: #1296ff;
|
||||
&:hover {
|
||||
color: #007fe0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background-color: $grey-3;
|
||||
border-radius: 0;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $grey-10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Skeleton from './Skeleton.vue';
|
||||
|
||||
|
||||
@@ -18,63 +18,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.character-button {
|
||||
color: $grey-10;
|
||||
background-color: $grey-4;
|
||||
border-color: $grey-3;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $grey-3 !important;
|
||||
border-color: $grey-3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.character-button > .badge {
|
||||
background-color: $grey-7;
|
||||
}
|
||||
|
||||
/*.btn-dark {*/
|
||||
/* &:not(:disabled), &:not {*/
|
||||
/* */
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
|
||||
/* color: #ffffff;*/
|
||||
/* background-color: #1d2124;*/
|
||||
/* border-color: #171a1d;*/
|
||||
/*}*/
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CharacterList",
|
||||
|
||||
@@ -10,15 +10,6 @@
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.card {
|
||||
color: $grey-9;
|
||||
background-color: $grey-2;
|
||||
border-bottom: 1px solid $grey-1;
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
@@ -26,52 +26,6 @@
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.quote-list > tr {
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-4;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background-color: $grey-5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
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;
|
||||
}
|
||||
|
||||
table.quote-list tr td:last-child {
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.35em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
table.quote-list tr:hover td:last-child svg {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -11,34 +11,7 @@
|
||||
</ais-hits>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.card-footer {
|
||||
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%);*/
|
||||
}
|
||||
|
||||
.ais-Hits-item,
|
||||
.ais-InfiniteHits-item,
|
||||
.ais-InfiniteResults-item,
|
||||
.ais-Results-item {
|
||||
/*margin-top: 1rem;*/
|
||||
/*margin-left: 1rem;*/
|
||||
/*padding: 1rem;*/
|
||||
/*width: calc(25% - 1rem);*/
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import SearchResult from "./SearchResult.vue";
|
||||
|
||||
|
||||
@@ -58,113 +58,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// 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;
|
||||
}
|
||||
|
||||
.not-collapsed > .bi-chevron-down {
|
||||
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;
|
||||
}
|
||||
|
||||
// Dark theme popover
|
||||
.popover-header {
|
||||
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-top-color: darken($grey-3, 2%);
|
||||
}
|
||||
|
||||
.bs-popover-bottom > .arrow::after,
|
||||
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
|
||||
border-bottom-color: darken($grey-3, 2%);
|
||||
}
|
||||
|
||||
.bs-popover-left > .arrow::after,
|
||||
.bs-popover-auto[x-placement^="left"] > .arrow::after {
|
||||
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%);
|
||||
}
|
||||
|
||||
.season-item .list-group-item:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Dark theme popover body
|
||||
.popover-body {
|
||||
color: $grey-10;
|
||||
background-color: darken($grey-3, 2%);
|
||||
}
|
||||
|
||||
.season-title {
|
||||
color: $grey-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Season Card Background Color
|
||||
.season-item {
|
||||
.card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: darken($grey-2, 1.5%);
|
||||
color: $grey-9;
|
||||
border-bottom: 1px solid $grey-0;
|
||||
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;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($grey-1, 0.75%);
|
||||
}
|
||||
}
|
||||
|
||||
.no-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&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=Poppins:wght@500&display=swap");
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
@@ -12,3 +13,296 @@ $grid-breakpoints: (
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
@import '~bootstrap/scss/_mixins';
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
|
||||
body {
|
||||
background-color: $grey-0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: $grey-2;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.4em;
|
||||
color: $grey-11 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $grey-9 !important;
|
||||
}
|
||||
|
||||
// Apply
|
||||
.card {
|
||||
color: $grey-9;
|
||||
background-color: $grey-2;
|
||||
border-bottom: 1px solid $grey-1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.quote-list > tr {
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-4;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background-color: $grey-5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
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;
|
||||
}
|
||||
|
||||
table.quote-list tr td:last-child {
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.35em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
table.quote-list tr:hover td:last-child svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.not-collapsed > .bi-chevron-down {
|
||||
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;
|
||||
}
|
||||
|
||||
// Dark theme popover
|
||||
.popover-header {
|
||||
background-color: darken($grey-2, 2.1%) !important;
|
||||
border-color: $grey-1 !important;
|
||||
color: $grey-11 !important;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.bs-popover-bottom > .arrow::after,
|
||||
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
|
||||
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;
|
||||
}
|
||||
|
||||
.bs-popover-right > .arrow::after,
|
||||
.bs-popover-auto[x-placement^="right"] > .arrow::after {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme popover body
|
||||
.popover-body {
|
||||
color: $grey-8 !important;
|
||||
background-color: darken($grey-3, 2%) !important;
|
||||
}
|
||||
|
||||
.season-title {
|
||||
color: $grey-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Season Card Background Color
|
||||
.season-item {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.episode-item {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
.no-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.character-button {
|
||||
color: $grey-10;
|
||||
background-color: $grey-4;
|
||||
border-color: $grey-3;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $grey-3 !important;
|
||||
border-color: $grey-3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.character-button > .badge {
|
||||
background-color: $grey-7;
|
||||
}
|
||||
|
||||
/*.btn-dark {*/
|
||||
/* &:not(:disabled), &:not {*/
|
||||
/* */
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
|
||||
/* color: #ffffff;*/
|
||||
/* background-color: #1d2124;*/
|
||||
/* border-color: #171a1d;*/
|
||||
/*}*/
|
||||
|
||||
.card-footer {
|
||||
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%);*/
|
||||
}
|
||||
|
||||
//.ais-Hits-item,
|
||||
//.ais-InfiniteHits-item,
|
||||
//.ais-InfiniteResults-item,
|
||||
//.ais-Results-item {
|
||||
// /*margin-top: 1rem;*/
|
||||
// /*margin-left: 1rem;*/
|
||||
// /*padding: 1rem;*/
|
||||
// /*width: calc(25% - 1rem);*/
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
//}
|
||||
|
||||
.card-body h4,
|
||||
.breadcrumb-item.active {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
min-height: 24px;
|
||||
}
|
||||
a {
|
||||
color: #1296ff;
|
||||
&:hover {
|
||||
color: #007fe0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background-color: $grey-3;
|
||||
border-radius: 0;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $grey-10;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user