Finished dark mode! This means re-doing all sass variables in the
variables.scss file and defining css variables in :root and alterting them based on prefered color scheme. This gives us a mechanism to set custom color schemes for the entire site from one place and changing between them just by setting a class to the body element. This is done by overwriting the css variables and then our scss variables use these changes and apply them downward. This seems like a really nice setup for the switching between- and adding color schemes. Also did a lot of cleanup of unused, duplicate or errors styling throughout the application.
This commit is contained in:
72
src/App.vue
72
src/App.vue
@@ -72,7 +72,7 @@ export default {
|
||||
.content {
|
||||
@include tablet-min{
|
||||
width: calc(100% - 95px);
|
||||
padding-top: $header-size;
|
||||
margin-top: $header-size;
|
||||
margin-left: 95px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -80,24 +80,30 @@ export default {
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./src/scss/main";
|
||||
// @import "./src/scss/main";
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body{
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
background: $c-light;
|
||||
color: $c-dark;
|
||||
background: $background-color;
|
||||
color: $text-color;
|
||||
&.hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
a:any-link {
|
||||
color: inherit;
|
||||
}
|
||||
input, textarea, button{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
@@ -116,7 +122,6 @@ img{
|
||||
}
|
||||
.header{
|
||||
position: fixed;
|
||||
background: $c-white;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -128,61 +133,6 @@ img{
|
||||
border-bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
&__search{
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 55px;
|
||||
@include tablet-min{
|
||||
position: relative;
|
||||
height: 75px;
|
||||
right: 0;
|
||||
}
|
||||
&-input{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px 20px 15px 45px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: $c-dark;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
@include tablet-min{
|
||||
padding: 15px 30px 15px 60px;
|
||||
}
|
||||
@include tablet-landscape-min{
|
||||
padding: 15px 30px 15px 80px;
|
||||
}
|
||||
@include desktop-min{
|
||||
padding: 15px 30px 15px 90px;
|
||||
}
|
||||
}
|
||||
&-arrow {
|
||||
height: 19px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
margin-right: 30px;
|
||||
|
||||
-moz-transition: all 0.5s ease;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&.down {
|
||||
-ms-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&-input:focus + &-icon{
|
||||
fill: $c-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// router view transition
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="not-found">
|
||||
<div class="not-found__content">
|
||||
<h2 class="not-found__title">Page Not Found</h2>
|
||||
<h1 class="not-found__title">Page Not Found</h1>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -15,58 +15,36 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
.not-found{
|
||||
.not-found {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
height: calc(100vh - var(--header-size));
|
||||
background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include tablet-min{
|
||||
height: calc(100vh - 75px);
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($c-light, 0.7);
|
||||
}
|
||||
&-shortList{
|
||||
width: 100%;
|
||||
}
|
||||
&__content{
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
@include tablet-min{
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
&-shortList {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
&:before {
|
||||
background: $background-40;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
&__content {
|
||||
padding-top: 30%;
|
||||
}
|
||||
&__title{
|
||||
font-size: 24px;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
@include tablet-min{
|
||||
font-size: 28px;
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
&__button{
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,7 +43,7 @@ header {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
position: relative;
|
||||
background-color: $c-dark;
|
||||
|
||||
@include tablet-min {
|
||||
height: 284px;
|
||||
}
|
||||
@@ -54,7 +54,7 @@ header {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($c-light, 0.7);
|
||||
background: $background-70;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -67,7 +67,7 @@ header {
|
||||
font-size: 22px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
margin: 0;
|
||||
@include tablet-min{
|
||||
font-size: 28px;
|
||||
@@ -78,35 +78,11 @@ header {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $c-dark;
|
||||
color: $text-color-70;
|
||||
margin: 5px 0;
|
||||
@include tablet-min{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: $c-dark;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.5s ease;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
width: 16px;
|
||||
height: 15px;
|
||||
fill: $c-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -231,6 +231,9 @@ export default {
|
||||
@include tablet-min{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
&__header {
|
||||
@@ -243,7 +246,7 @@ export default {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-color: $c-dark;
|
||||
background-color: $background-color;
|
||||
@include tablet-min {
|
||||
height: 350px;
|
||||
}
|
||||
@@ -256,7 +259,7 @@ export default {
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($c-dark, 0.85);
|
||||
background: $background-dark-85;
|
||||
}
|
||||
&.compact {
|
||||
height: 100px;
|
||||
@@ -266,7 +269,7 @@ export default {
|
||||
&__poster {
|
||||
display: none;
|
||||
@include tablet-min {
|
||||
background: $c-white;
|
||||
background: $background-color;
|
||||
height: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -293,7 +296,7 @@ export default {
|
||||
&__title {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
color: $c-green;
|
||||
color: $green;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@include tablet-min {
|
||||
@@ -310,16 +313,8 @@ export default {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: rgba($c-white, 0.7);
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
&__main {
|
||||
background: $c-light;
|
||||
min-height: calc(100vh - 250px);
|
||||
@include tablet-min {
|
||||
min-height: 0;
|
||||
@@ -329,64 +324,16 @@ export default {
|
||||
}
|
||||
&__actions {
|
||||
text-align: center;
|
||||
// min-height: 394px;
|
||||
width: 100%;
|
||||
order: 2;
|
||||
padding: 20px;
|
||||
border-top: 1px solid rgba($c-dark, 0.05);
|
||||
border-top: 1px solid $text-color-5;
|
||||
@include tablet-min {
|
||||
order: 1;
|
||||
width: 45%;
|
||||
padding: 185px 0 40px 40px;
|
||||
border-top: 0;
|
||||
}
|
||||
&-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: rgba($c-dark, 0.5);
|
||||
transition: color 0.5s ease;
|
||||
font-size: 11px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid rgba($c-dark, 0.05);
|
||||
&:hover {
|
||||
color: rgba($c-dark, 0.75);
|
||||
}
|
||||
&.active {
|
||||
color: $c-dark;
|
||||
}
|
||||
&.pending {
|
||||
color: #f8bd2d;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0 10px 0 0;
|
||||
fill: rgba($c-dark, 0.5);
|
||||
transition: fill 0.5s ease, transform 0.5s ease;
|
||||
&.waiting {
|
||||
transform: scale(0.8, 0.8);
|
||||
}
|
||||
&.pending {
|
||||
fill: #f8bd2d;
|
||||
}
|
||||
}
|
||||
&-link:hover &-icon {
|
||||
fill: rgba($c-dark, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
&-link.active &-icon {
|
||||
fill: $c-green;
|
||||
}
|
||||
&-text {
|
||||
display: block;
|
||||
padding-top: 2px;
|
||||
cursor: pointer;
|
||||
margin:4.4px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
&__info {
|
||||
width: 100%;
|
||||
@@ -399,7 +346,7 @@ export default {
|
||||
margin-left: 45%;
|
||||
}
|
||||
}
|
||||
&__actions + &__info {
|
||||
&__info {
|
||||
margin-left: 0;
|
||||
}
|
||||
&__description {
|
||||
@@ -429,7 +376,7 @@ export default {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
color: $green;
|
||||
@include tablet-min {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -456,7 +403,7 @@ export default {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
color: $green;
|
||||
padding-bottom: 20px;
|
||||
@include tablet-min {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -36,7 +36,7 @@ export default {
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba($c-dark, 0.93);
|
||||
background: rgba($dark, 0.93);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
&__box{
|
||||
@@ -44,7 +44,7 @@ export default {
|
||||
max-width: 768px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
background: $c-dark;
|
||||
background: $background-color-secondary;
|
||||
padding-bottom: 50px;
|
||||
@include tablet-min{
|
||||
padding-bottom: 0;
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
left: 10px;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: $c-white;
|
||||
background: $white;
|
||||
}
|
||||
&:before{
|
||||
transform: rotate(45deg);
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover{
|
||||
background: $c-green;
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -226,103 +226,161 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
@import "./src/scss/elements";
|
||||
@import './src/scss/media-queries';
|
||||
@import './src/scss/variables';
|
||||
|
||||
.movies-list {
|
||||
list-style: none;
|
||||
.movies-list {
|
||||
& ul:last-of-type {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&:first-of-type header {
|
||||
padding-top: 1.75rem;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
|
||||
&.sticky {
|
||||
background-color: $background-color-secondary;
|
||||
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: $header-size;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
text-transform: capitalize;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
letter-spacing: .5px;
|
||||
color: $text-color-70;
|
||||
text-decoration: none;
|
||||
transition: color .5s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:after{
|
||||
content: " →";
|
||||
}
|
||||
&:hover{
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.result-count {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
letter-spacing: .5px;
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.results {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&.shortList > li {
|
||||
display: none;
|
||||
|
||||
.list-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 10px;
|
||||
|
||||
@include tablet-min{
|
||||
padding: 23px 15px;
|
||||
}
|
||||
@include tablet-landscape-min{
|
||||
padding: 16px 25px;
|
||||
}
|
||||
@include desktop-min{
|
||||
padding: 8px 30px;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #081c24;
|
||||
font-weight: 300;
|
||||
// flex-basis: 50%;
|
||||
text-transform: capitalize;
|
||||
|
||||
@include tablet-min{
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__result-count {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
letter-spacing: .5px;
|
||||
color: rgba(8,28,36,.5);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header__view-more {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
letter-spacing: .5px;
|
||||
color: rgba($c-dark, 0.5);
|
||||
text-decoration: none;
|
||||
transition: color .5s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:after{
|
||||
content: " →";
|
||||
}
|
||||
&:hover{
|
||||
color: $c-dark;
|
||||
}
|
||||
&:nth-child(-n+4) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.end-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.fullwidth-button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "./src/scss/media-queries";
|
||||
.form__group-input {
|
||||
padding: 10px 5px 10px 15px;
|
||||
margin-left: 0;
|
||||
height: 38px;
|
||||
width: 150px;
|
||||
font-size: 15px;
|
||||
@include desktop-min {
|
||||
width: 200px;
|
||||
font-size: 17px;
|
||||
@include tablet-min {
|
||||
header {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.results.shortList > li:nth-child(-n+6) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@include tablet-landscape-min {
|
||||
header {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.results.shortList > li:nth-child(-n+8) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@include desktop-min {
|
||||
.results.shortList > li:nth-child(-n+12) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop-lg-min {
|
||||
header {
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.results.shortList > li:nth-child(-n+16) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .shutter {
|
||||
// $height: 36px;
|
||||
// height: $height;
|
||||
// width: 100%;
|
||||
// background-color: $background-color-secondary;
|
||||
// position: absolute;
|
||||
// margin-bottom: -$height;
|
||||
|
||||
// position: -webkit-sticky; /* Safari */
|
||||
// position: sticky;
|
||||
// top: $header-size;
|
||||
// z-index: 4;
|
||||
|
||||
// @include tablet-min{
|
||||
// background-color: blue;
|
||||
// height: 23px 15px;
|
||||
// }
|
||||
// @include tablet-landscape-min{
|
||||
// background-color: orange;
|
||||
// height: 30px;
|
||||
// }
|
||||
// @include desktop-min{
|
||||
// background-color: navajowhite;
|
||||
// height: 34px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.form__group-input {
|
||||
padding: 10px 5px 10px 15px;
|
||||
margin-left: 0;
|
||||
height: 38px;
|
||||
width: 150px;
|
||||
font-size: 15px;
|
||||
@include desktop-min {
|
||||
width: 200px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -49,50 +49,28 @@ export default {
|
||||
.movies-item {
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
background-color: $background-color;
|
||||
|
||||
@include tablet-min{
|
||||
padding: 15px;
|
||||
}
|
||||
@include tablet-landscape-min{
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
width: 25%;
|
||||
}
|
||||
@include desktop-min{
|
||||
padding: 30px;
|
||||
padding: 15px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
@include desktop-lg-min{
|
||||
padding: 20px;
|
||||
width: 16.5%;
|
||||
}
|
||||
|
||||
&.shortList {
|
||||
display: none;
|
||||
|
||||
&:nth-child(-n+6) { // show first 6
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include tablet-landscape-min{
|
||||
&:nth-child(-n+8) { // show first 8
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@include desktop-min{
|
||||
&:nth-child(-n+10) { // show first 10
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop-lg-min{
|
||||
display: block; // show all
|
||||
}
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
&__link{
|
||||
text-decoration: none;
|
||||
color: rgba($c-dark, 0.5);
|
||||
color: $text-color-70;
|
||||
font-weight: 300;
|
||||
}
|
||||
&__content{
|
||||
@@ -101,7 +79,6 @@ export default {
|
||||
&__poster{
|
||||
transition: transform 0.5s ease, box-shadow 0.3s ease;
|
||||
transform: translateZ(0);
|
||||
background: $c-white;
|
||||
}
|
||||
&__img{
|
||||
width: 100%;
|
||||
@@ -115,13 +92,14 @@ export default {
|
||||
}
|
||||
&__link:not(.no-image):hover &__poster{
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 0 10px rgba($c-dark, 0.1);
|
||||
box-shadow: 0 0 10px rgba($dark, 0.1);
|
||||
}
|
||||
&__title{
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.5s ease;
|
||||
cursor: pointer;
|
||||
@include mobile-ls-min{
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -130,7 +108,7 @@ export default {
|
||||
}
|
||||
}
|
||||
&__link:hover &__title{
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -75,10 +75,16 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
|
||||
.spacer {
|
||||
@include mobile-only {
|
||||
width: 100%;
|
||||
height: $header-size-mobile;
|
||||
height: $header-size;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
@@ -87,41 +93,40 @@ export default {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: $c-white;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
|
||||
color: $text-color;
|
||||
background-color: $background-color-secondary;
|
||||
|
||||
@include tablet-min{
|
||||
width: 95px;
|
||||
height: 100vh;
|
||||
}
|
||||
&__logo{
|
||||
&__logo {
|
||||
width: 55px;
|
||||
height: $header-size-mobile;
|
||||
height: $header-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $c-dark;
|
||||
background: $background-nav-logo;
|
||||
@include tablet-min{
|
||||
width: 95px;
|
||||
height: $header-size;
|
||||
}
|
||||
&-image{
|
||||
width: 35px;
|
||||
height: 31px;
|
||||
fill: $c-green;
|
||||
fill: $green;
|
||||
transition: transform 0.5s ease;
|
||||
@include tablet-min{
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
&:hover &-image{
|
||||
&:hover &-image {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
&__hamburger{
|
||||
&__hamburger {
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 55px;
|
||||
@@ -129,23 +134,22 @@ export default {
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
background: $c-white;
|
||||
z-index: 10;
|
||||
border-left: 1px solid $c-light;
|
||||
border-left: 1px solid $background-color;
|
||||
@include tablet-min{
|
||||
display: none;
|
||||
}
|
||||
.bar{
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
background: rgba($c-dark, 0.5);
|
||||
background-color: $text-color-70;
|
||||
transition: all 300ms ease;
|
||||
&:nth-child(1){
|
||||
&:nth-child(1) {
|
||||
left: 16px;
|
||||
top: 17px;
|
||||
}
|
||||
&:nth-child(2){
|
||||
&:nth-child(2) {
|
||||
left: 16px;
|
||||
top: 25px;
|
||||
&:after {
|
||||
@@ -155,16 +159,15 @@ export default {
|
||||
top: 0px;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
&:nth-child(3) {
|
||||
right: 15px;
|
||||
top: 33px;
|
||||
}
|
||||
}
|
||||
&--active{
|
||||
&--active {
|
||||
.bar{
|
||||
&:nth-child(1),
|
||||
&:nth-child(3){
|
||||
@@ -175,12 +178,13 @@ export default {
|
||||
}
|
||||
&:nth-child(2):after {
|
||||
transform: rotate(-90deg);
|
||||
background: rgba($c-dark, 0.5);
|
||||
// background: rgba($c-dark, 0.5);
|
||||
background-color: $text-color-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__list{
|
||||
&__list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -189,13 +193,14 @@ export default {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
background: rgba($c-white, 0.98);
|
||||
border-top: 1px solid $c-light;
|
||||
@include mobile-only{
|
||||
border-top: 1px solid $background-color;
|
||||
@include mobile-only {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: calc(100vh - 50px);
|
||||
background-color: $background-95;
|
||||
transition: all 0.5s ease;
|
||||
text-align: left;
|
||||
&--active{
|
||||
@@ -203,9 +208,8 @@ export default {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@include tablet-min{
|
||||
@include tablet-min {
|
||||
display: flex;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -213,31 +217,43 @@ export default {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&__item{
|
||||
@include mobile-only{
|
||||
display: inline-block;
|
||||
&__item {
|
||||
background-color: $background-color-secondary;
|
||||
color: $text-color-70;
|
||||
|
||||
@include mobile-only {
|
||||
flex: 0 0 50%;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid $c-light;
|
||||
border-bottom: 1px solid $background-color;
|
||||
&:nth-child(odd){
|
||||
border-right: 1px solid $c-light;
|
||||
border-right: 1px solid $background-color;
|
||||
|
||||
&:last-child {
|
||||
// flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include tablet-min{
|
||||
@include tablet-min {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $c-light;
|
||||
&--profile{
|
||||
border-bottom: 1px solid $text-color-5;
|
||||
|
||||
&--profile {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: $header-size;
|
||||
height: $header-size;
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid $c-light;
|
||||
border-left: 1px solid $background-color;
|
||||
}
|
||||
}
|
||||
&:hover, .is-active {
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
&__link{
|
||||
&__link {
|
||||
background-color: inherit; // a elements have a transparent background
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -248,7 +264,6 @@ export default {
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: rgba($c-dark, 0.7);
|
||||
transition: color 0.5s ease, background 0.5s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -258,49 +273,38 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mobile-only{
|
||||
@include mobile-only {
|
||||
font-size: 10px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
@include tablet-min{
|
||||
@include tablet-min {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
font-size: 9px;
|
||||
&--profile{
|
||||
&--profile {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background: $c-white;
|
||||
}
|
||||
}
|
||||
&-icon{
|
||||
&-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: rgba($c-dark, 0.7);
|
||||
fill: $text-color-70;
|
||||
transition: fill 0.5s ease;
|
||||
@include tablet-min{
|
||||
@include tablet-min {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
&-title{
|
||||
&-title {
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover{
|
||||
color: $c-dark;
|
||||
}
|
||||
&:hover &-icon{
|
||||
fill: $c-dark;
|
||||
}
|
||||
&.is-active{
|
||||
color: $c-dark;
|
||||
background: $c-light;
|
||||
}
|
||||
&.is-active &-icon{
|
||||
fill: $c-dark;
|
||||
&:hover &-icon, &.is-active &-icon {
|
||||
fill: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,6 +93,10 @@ export default {
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.button--group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// DUPLICATE CODE
|
||||
.profile{
|
||||
&__header{
|
||||
@@ -100,7 +104,17 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba($c-dark, 0.05);
|
||||
border-bottom: 1px solid $text-color-5;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.button--group {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet-min{
|
||||
padding: 29px 30px;
|
||||
}
|
||||
@@ -115,7 +129,7 @@ export default {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
@include tablet-min{
|
||||
font-size: 18px;
|
||||
|
||||
@@ -137,66 +137,33 @@ export default {
|
||||
created(){
|
||||
document.title = 'Profile' + storage.pageTitlePostfix;
|
||||
storage.backTitle = document.title;
|
||||
},
|
||||
mounted(){
|
||||
// this.$refs.email.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
@import "./src/scss/message";
|
||||
|
||||
// DUPLICATE CODE
|
||||
.settings {
|
||||
padding: 35px;
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
&__header {
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.profile__content {
|
||||
padding: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form {
|
||||
// TODO, fix this. if single child it adds weird margin
|
||||
> div:last-child {
|
||||
.link {
|
||||
display: block;
|
||||
width: max-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__group{
|
||||
justify-content: unset;
|
||||
&__input-icon {
|
||||
margin-top: 8px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
&-input {
|
||||
padding: 10px 5px 10px 45px;
|
||||
height: 40px;
|
||||
font-size: 17px;
|
||||
width: 75%;
|
||||
// @include desktop-min {
|
||||
// width: 400px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@keydown.up="navigateUp"
|
||||
@keydown.down="navigateDown" />
|
||||
|
||||
<svg class="search--icon"><use xlink:href="#iconSearch"></use></svg>
|
||||
<svg class="search--icon" fill="currentColor"><use xlink:href="#iconSearch"></use></svg>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
@@ -179,7 +179,7 @@ export default {
|
||||
z-index: 5;
|
||||
min-height: $header-size;
|
||||
right: 0px;
|
||||
background-color: white;
|
||||
background-color: $background-color-secondary;
|
||||
|
||||
@include mobile-only {
|
||||
position: fixed;
|
||||
@@ -209,47 +209,45 @@ export default {
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $text-color-50;
|
||||
|
||||
&.active, &:hover, &:active {
|
||||
color: $c-dark;
|
||||
border-bottom: 2px solid black;
|
||||
color: $text-color;
|
||||
border-bottom: 2px solid $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
height: $header-size-mobile;
|
||||
height: $header-size;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-wrap: wrap;
|
||||
z-index: 5;
|
||||
background-color: $background-color-secondary;
|
||||
|
||||
// TODO check if this is for mobile
|
||||
width: calc(100% - 110px);
|
||||
// width: 100%;
|
||||
top: 0;
|
||||
right: 55px;
|
||||
|
||||
@include tablet-min{
|
||||
position: relative;
|
||||
height: $header-size;
|
||||
width: 100%;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
// height: 75px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 13px 20px 13px 45px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: $c-dark;
|
||||
font-weight: 300;
|
||||
font-size: 19px;
|
||||
|
||||
@@ -261,7 +259,7 @@ export default {
|
||||
&--icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: rgba($c-dark, 0.5);
|
||||
fill: $text-color-50;
|
||||
transition: fill 0.5s ease;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
|
||||
@@ -128,7 +128,7 @@ a {
|
||||
&__header {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -110,49 +110,27 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/message";
|
||||
|
||||
// DUPLICATE CODE
|
||||
.settings {
|
||||
padding: 35px;
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
&__header {
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.profile__content {
|
||||
padding: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form {
|
||||
> div:last-child {
|
||||
.link {
|
||||
display: block;
|
||||
width: max-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__group{
|
||||
justify-content: unset;
|
||||
&__input-icon {
|
||||
margin-top: 8px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
&-input {
|
||||
padding: 10px 5px 10px 45px;
|
||||
height: 40px;
|
||||
font-size: 17px;
|
||||
width: 100%;
|
||||
// @include desktop-min {
|
||||
// width: 400px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
">
|
||||
<seasonedButton @click="resetTorrentsAndToggleEditSearchQuery">Edit search query</seasonedButton>
|
||||
</div>
|
||||
@@ -276,15 +276,15 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
.expanded {
|
||||
display: flex;
|
||||
margin: 0 1rem;
|
||||
max-width: 100%;
|
||||
border-left: 1px solid rgba($c-dark, 0.5);
|
||||
border-right: 1px solid rgba($c-dark, 0.5);
|
||||
border-bottom: 1px solid rgba($c-dark, 0.5);
|
||||
border-left: 1px solid $text-color;
|
||||
border-right: 1px solid $text-color;
|
||||
border-bottom: 1px solid $text-color;
|
||||
|
||||
td {
|
||||
// border-left: 1px solid $c-dark;
|
||||
@@ -299,6 +299,10 @@ export default {
|
||||
@import "./src/scss/media-queries";
|
||||
@import "./src/scss/elements";
|
||||
|
||||
.container {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.torrentHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -310,8 +314,9 @@ export default {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
color: $green;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
@include tablet-min {
|
||||
font-size: 16px
|
||||
@@ -329,7 +334,7 @@ export default {
|
||||
height: 22px;
|
||||
|
||||
&:hover {
|
||||
fill: $c-green;
|
||||
fill: $green;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -345,9 +350,9 @@ table {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0 1rem;
|
||||
border-left: 1px solid rgba($c-dark, 0.8);
|
||||
border-right: 1px solid rgba($c-dark, 0.8);
|
||||
border-bottom: 1px solid rgba($c-dark, 0.8);
|
||||
border-left: 1px solid $text-color;
|
||||
border-right: 1px solid $text-color;
|
||||
border-bottom: 1px solid $text-color;
|
||||
|
||||
th, td {
|
||||
display: flex;
|
||||
@@ -359,6 +364,7 @@ table {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
th:first-child, td:first-child {
|
||||
@@ -392,7 +398,7 @@ table {
|
||||
|
||||
.table__content {
|
||||
td:not(:last-child) {
|
||||
border-right: 1px solid rgba($c-dark, 0.8);
|
||||
border-right: 1px solid $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -404,12 +410,12 @@ table {
|
||||
}
|
||||
|
||||
.table__header {
|
||||
background-color: white;
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
background-color: $background-color-secondary;
|
||||
|
||||
border-top: 1px solid rgba($c-dark, 0.8);
|
||||
border-top: 1px solid $text-color;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
|
||||
@@ -435,7 +441,7 @@ table {
|
||||
}
|
||||
|
||||
th:not(:last-child) {
|
||||
border-right: 1px solid rgba($c-dark, 0.8);
|
||||
border-right: 1px solid $text-color;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -456,36 +462,42 @@ table {
|
||||
.download {
|
||||
|
||||
&__icon {
|
||||
fill: rgba($c-dark, 0.6);
|
||||
fill: $text-color-70;
|
||||
height: 1.2rem;
|
||||
|
||||
&:hover {
|
||||
fill: $c-dark;
|
||||
fill: $text-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.active &__icon {
|
||||
fill: $c-green;
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.torrentloader{
|
||||
animation: load 1s linear infinite;
|
||||
border: 2px solid $c-dark;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
margin: 2rem auto;
|
||||
width: 30px;
|
||||
&:after {
|
||||
border: 5px solid $c-green;
|
||||
.torrentloader {
|
||||
width: 100%;
|
||||
padding: 2rem 0;
|
||||
|
||||
i {
|
||||
animation: load 1s linear infinite;
|
||||
border: 2px solid $text-color;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
display: block;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
margin: 0 auto;
|
||||
width: 30px;
|
||||
|
||||
&:after {
|
||||
border: 5px solid $green;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes load {
|
||||
|
||||
@@ -17,29 +17,26 @@
|
||||
align-items: center;
|
||||
|
||||
&--icon{
|
||||
border: 2px solid rgba($c-dark, 0.9);
|
||||
border: 2px solid $text-color-70;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 40px;
|
||||
// left: 50%;
|
||||
// margin: -1.5em;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
|
||||
&-spinner {
|
||||
// border: 2px solid transparent;
|
||||
display: block;
|
||||
display: block;
|
||||
animation: load 1s linear infinite;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
&:after {
|
||||
border: 7px solid rgba($c-green, 0.9);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
}
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
&:after {
|
||||
border: 7px solid rgba($green, 0.9);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes load {
|
||||
|
||||
@@ -25,18 +25,19 @@ export default {
|
||||
|
||||
.button{
|
||||
display: inline-block;
|
||||
border: 1px solid $c-dark;
|
||||
border: 1px solid $text-color;
|
||||
text-transform: uppercase;
|
||||
background: $c-dark;
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
line-height: 2;
|
||||
height: 45px;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 5px 20px 4px 20px;
|
||||
margin: 0;
|
||||
margin-right: 0.3rem;
|
||||
cursor: pointer;
|
||||
color: $c-dark;
|
||||
background: transparent;
|
||||
color: $text-color;
|
||||
background: $background-color-secondary;
|
||||
outline: none;
|
||||
transition: background 0.5s ease, color 0.5s ease;
|
||||
|
||||
@@ -46,8 +47,8 @@ export default {
|
||||
}
|
||||
|
||||
body:not(.touch) &:hover, &:focus, &:active, &.active {
|
||||
background: $c-dark;
|
||||
color: $c-white;
|
||||
background: $text-color;
|
||||
color: $background-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,20 +46,20 @@ export default {
|
||||
|
||||
&:hover, &:focus {
|
||||
.group__input {
|
||||
border-color: $c-dark;
|
||||
border-color: $text-color;
|
||||
|
||||
&-icon {
|
||||
fill: $c-dark;
|
||||
fill: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.group__input {
|
||||
border-color: $c-dark;
|
||||
border-color: $text-color;
|
||||
|
||||
&-icon {
|
||||
fill: $c-dark;
|
||||
fill: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -70,12 +70,13 @@ export default {
|
||||
padding: 10px 10px 10px 45px;
|
||||
// padding: 15px 10px 15px 45px;
|
||||
outline: none;
|
||||
background-color: $c-white;
|
||||
color: $c-dark;
|
||||
background-color: $background-color-secondary;
|
||||
color: $text-color;
|
||||
font-weight: 100;
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid rgba($c-dark, 0.5);
|
||||
margin-left: -2.2rem;
|
||||
border: 1px solid $text-color-50;
|
||||
margin: 0;
|
||||
margin-left: -2.2rem !important;
|
||||
// margin-bottom: 1rem;
|
||||
z-index: 3;
|
||||
transition: border-color .5s ease;
|
||||
@@ -91,14 +92,14 @@ export default {
|
||||
height: 100%;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
color: rgba($c-dark, 0.5);
|
||||
color: $text-color-50;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: rgba($c-dark, 0.5);
|
||||
fill: $text-color-50;
|
||||
transition: fill 0.5s ease;
|
||||
pointer-events: none;
|
||||
margin-top: 10px;
|
||||
|
||||
@@ -63,12 +63,6 @@ export default {
|
||||
activeClassIfActive() {
|
||||
return this.active ? 'active' : ''
|
||||
}
|
||||
// torrentResults() {
|
||||
// return this.text.toLowerCase().includes('torrents')
|
||||
// },
|
||||
// getTorrentResultCount() {
|
||||
// return store.getters['torrentModule/resultCount']
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -82,18 +76,18 @@ li {
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: rgba($c-dark, 0.5);
|
||||
color: $text-color-50;
|
||||
transition: color 0.5s ease;
|
||||
font-size: 11px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba($c-dark, 0.05);
|
||||
border-bottom: 1px solid $text-color-5;
|
||||
|
||||
&:hover {
|
||||
color: rgba($c-dark, 0.80);
|
||||
color: $text-color-70;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
color: $c-dark;
|
||||
color: $text-color;
|
||||
}
|
||||
.pending {
|
||||
color: #f8bd2d;
|
||||
@@ -108,7 +102,7 @@ li {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0 7px 0 0;
|
||||
fill: rgba($c-dark, 0.5);
|
||||
fill: $text-color-50;
|
||||
transition: fill 0.5s ease, transform 0.5s ease;
|
||||
&.waiting {
|
||||
transform: scale(0.8, 0.8);
|
||||
@@ -117,15 +111,11 @@ li {
|
||||
fill: #f8bd2d;
|
||||
}
|
||||
&:hover &-icon {
|
||||
fill: rgba($c-dark, 0.75);
|
||||
fill: $text-color-70;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
color: $c-green;
|
||||
|
||||
> svg {
|
||||
fill: $c-green;
|
||||
}
|
||||
&.active > svg {
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,21 +2,18 @@
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.filter {
|
||||
// margin: 10px 10px 20px;
|
||||
margin: 1rem;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
transition: color .2s ease;
|
||||
// justify-content: space-evenly;
|
||||
|
||||
&-item {
|
||||
padding: 6px 15px;
|
||||
background-color: $c-white;
|
||||
background-color: $background-color-secondary;
|
||||
transition: color 0.2s ease;
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
@@ -24,16 +21,17 @@
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
white-space:nowrap;
|
||||
// overflow: hidden;
|
||||
|
||||
&:nth-child(n+2) {
|
||||
border-left: solid 1px;
|
||||
}
|
||||
&.active, &:hover {
|
||||
border-color: transparent;
|
||||
background-color: #091c24;
|
||||
color: $c-green;
|
||||
background-color: $teal;
|
||||
color: $green;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@include tablet-min {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,127 @@
|
||||
// Colors
|
||||
$c-green: #01d277;
|
||||
$c-dark: #081c24;
|
||||
$c-white: #ffffff;
|
||||
$c-light: #f8f8f8;
|
||||
$c-green-light: #dff0d9;
|
||||
$c-green-dark: #3e7549;
|
||||
$c-red-light: #f2dede;
|
||||
$c-red-dark: #b75b91;
|
||||
// @import "./media-queries";
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
$header-size: 75px;
|
||||
$header-size-mobile: 50px;
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--text-color: #081c24;
|
||||
--text-color-70: rgba(8, 28, 36, 0.7);
|
||||
--text-color-50: rgba(8, 28, 36, 0.5);
|
||||
--text-color-5: rgba(8, 28, 36, 0.05);
|
||||
--text-color-secondary: orange;
|
||||
--background-color: #f8f8f8;
|
||||
--background-color-secondary: #ffffff;
|
||||
--background-95: rgba(255, 255, 255, 0.95);
|
||||
--background-70: rgba(255, 255, 255, 0.7);
|
||||
--background-40: rgba(255, 255, 255, 0.4);
|
||||
--background-nav-logo: #081c24;
|
||||
|
||||
--color-green: #01d277;
|
||||
--color-teal: #091c24;
|
||||
--color-black: #081c24;
|
||||
--white: #fff;
|
||||
--white-70: rgba(255,255,255,0.7);
|
||||
|
||||
--color-warning: #fff5cd;
|
||||
--color-warning-text: #081c24;
|
||||
--color-warning-light: rgb(255, 203, 5);
|
||||
--color-success: rgba(0, 100, 66, 0.8);
|
||||
--color-success-text: #fff;
|
||||
--color-success-highlight: rgb(0, 100, 66);
|
||||
--color-error: rgba(220, 48, 35, 0.8);
|
||||
--color-error-highlight: #DC3023;
|
||||
--color-error-text: #fff;
|
||||
|
||||
--header-size: 75px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--text-color: #fff;
|
||||
--text-color-70: rgba(255, 255, 255, 0.7);
|
||||
--text-color-50: rgba(255, 255, 255, 0.5);
|
||||
--text-color-5: rgba(255, 255, 255, 0.05);
|
||||
--text-color-secondary: orange;
|
||||
--background-color: #1e1f22;
|
||||
--background-color-secondary: #111111;
|
||||
--background-95: rgba(30, 31, 34, 0.95);
|
||||
--background-70: rgba(30, 31, 34, 0.8);
|
||||
--background-40: rgba(30, 31, 34, 0.4);
|
||||
--color-teal: #091c24;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile-only {
|
||||
:root {
|
||||
--header-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
$header-size: var(--header-size);
|
||||
|
||||
$dark: rgb(30, 31, 34);
|
||||
$green: var(--color-green);
|
||||
$teal: #091c24;
|
||||
$black: #081c24;
|
||||
$black-80: rgba(0,0,0,0.8);
|
||||
$white: #fff;
|
||||
$white-80: rgba(255,255,255,0.8);
|
||||
|
||||
$text-color: var(--text-color) !default;
|
||||
$text-color-70: var(--text-color-70) !default;
|
||||
$text-color-50: var(--text-color-50) !default;
|
||||
$text-color-5: var(--text-color-5) !default;
|
||||
$text-color-secondary: var(--text-color-secondary) !default;
|
||||
$background-color: var(--background-color) !default;
|
||||
$background-color-secondary: var(--background-color-secondary) !default;
|
||||
$background-95: var(--background-95) !default;
|
||||
$background-70: var(--background-70) !default;
|
||||
$background-40: var(--background-40) !default;
|
||||
$background-dark-85: rgba($dark, 0.85) !default;
|
||||
$background-nav-logo: var(--background-nav-logo) !default;
|
||||
$color-warning: var(--color-warning) !default;
|
||||
$color-warning-text: var(--color-warning-text) !default;
|
||||
$color-warning-light: var(--color-warning-light) !default;
|
||||
$color-success: var(--color-success) !default;
|
||||
$color-success-highlight: var(--color-success-highlight) !default;
|
||||
$color-error: var(--color-error) !default;
|
||||
$color-error-highlight: var(--color-error-highlight) !default;
|
||||
$color-error-text: var(--color-error-text) !default;
|
||||
$color-error-light: var(--color-error) !default;
|
||||
|
||||
.halloween {
|
||||
--text-color: #6a318c;
|
||||
--text-color-secondary: #fb5a33;
|
||||
--background-color: #80c350;
|
||||
--background-color-secondary: #ff9234;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--text-color: #fff;
|
||||
--text-color-70: rgba(255, 255, 255, 0.7);
|
||||
--text-color-50: rgba(255, 255, 255, 0.5);
|
||||
--text-color-5: rgba(255, 255, 255, 0.05);
|
||||
--text-color-secondary: orange;
|
||||
--background-color: #1e1f22;
|
||||
--background-color-secondary: #111111;
|
||||
--background-95: rgba(30, 31, 34, 0.95);
|
||||
--background-70: rgba(30, 31, 34, 0.7);
|
||||
--color-teal: #091c24;
|
||||
}
|
||||
|
||||
.light {
|
||||
--text-color: #081c24;
|
||||
--text-color-70: rgba(8, 28, 36, 0.7);
|
||||
--text-color-50: rgba(8, 28, 36, 0.5);
|
||||
--text-color-5: rgba(8, 28, 36, 0.05);
|
||||
--text-color-inverted: #fff;
|
||||
--text-color-secondary: orange;
|
||||
--background-color: #f8f8f8;
|
||||
--background-color-secondary: #ffffff;
|
||||
--background-95: rgba(255, 255, 255, 0.95);
|
||||
--background-70: rgba(255, 255, 255, 0.7);
|
||||
--background-nav-logo: #081c24;
|
||||
--color-green: #01d277;
|
||||
--color-teal: #091c24;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user