lbry.com/web/scss/pages/_youtube.scss
2019-04-17 14:53:34 -05:00

451 lines
7.1 KiB
SCSS

$lbry-yt-blue: mix($lbry-blue-5, $lbry-black, 50%);
.ytsync-previews {
display: flex;
justify-content: space-between;
padding-top: 1.25rem;
@media (max-width: 950px) {
flex-direction: column;
}
}
.ytsync-preview {
position: relative;
@media (min-width: 951px) {
width: 33%;
}
&:not(:hover) {
&::before {
opacity: 0;
}
}
&:hover {
&::before {
opacity: 1;
}
}
&::before {
width: 0; height: 0;
border-top: 2rem solid transparent;
border-bottom: 2rem solid transparent;
border-left: 3.5rem solid var(--lbry-white);
content: "";
pointer-events: none;
position: absolute;
top: calc(50% - 3rem);
transition: opacity 0.2s;
}
video {
cursor: pointer;
margin-bottom: 0.5rem;
}
}
.v-card {
display: flex;
figure {
margin-bottom: 0;
margin-right: 1.25rem;
width: 12rem;
}
info {
display: block;
padding-top: 4rem;
}
}
.error-block,
.sync-status {
margin: 0 auto 0.5rem; padding: 0.5rem 0.75rem;
border-style: solid;
border-width: 1px;
font-size: 0.8rem;
@media (min-width: 951px) {
max-width: 80%;
}
}
.error-block {
background-color: var(--lbry-red-4);
border-color: var(--lbry-red-5);
color: var(--lbry-white);
a {
color: inherit !important;
font-weight: 600;
}
}
.sync-status {
background-color: rgba($lbry-black, 0.05);
border-color: var(--lbry-gray-3);
}
.hero--youtube {
.shape {
width: 100%; height: 100%;
top: 0; left: 0;
position: absolute;
svg {
width: 100%; height: 100%;
path {
fill: none;
stroke: $lbry-yt-blue;
stroke-width: 0.3px;
}
}
.circle,
.dot {
width: 60px; height: 60px;
background-color: $lbry-yt-blue;
border-radius: 50%;
margin: -30px 0 0 -30px;
position: absolute;
}
.circle {
background-color: $lbry-yt-blue;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 10px 50px 0 rgba($lbry-black, 0.25);
&.one {
width: 76px; height: 76px;
top: 31%; left: 50%;
background-image: url("../img/youtube/core@2x.png");
background-size: 25px;
margin: -38px 0 0 -38px;
}
&.two {
top: 20%; left: 75%;
background-image: url("../img/youtube/video@2x.png");
background-size: 15px;
}
&.three {
top: 73%; left: 82%;
background-image: url("../img/youtube/music@2x.png");
background-size: 13px;
}
}
.dot {
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
&.a {
top: 34%; left: 72%;
}
&.b {
top: 27%; left: 80%;
}
&.c {
top: 81%; left: 75%;
}
&.d {
top: 92%; left: 76%;
}
&.e {
top: 81%; left: 93%;
}
&.f {
top: 109%; left: 90%;
}
}
}
button {
&:hover {
color: initial;
}
}
}
.youtube {
&.youtube--landing {
section {
&:nth-child(odd) {
background-color: rgba($lbry-black, 0.05);
}
}
input-submit {
margin-right: auto;
margin-left: auto;
@media (min-width: 951px) {
max-width: 80%;
}
}
}
.channel {
h2 {
@media (min-width: 951px) {
text-align: center;
}
}
}
.confirmation-steps {
padding-top: 1rem;
ul {
display: flex;
margin-bottom: 3rem;
@media (min-width: 951px) {
flex-direction: row;
}
@media (max-width: 950px) {
flex-direction: column;
}
}
li {
@media (min-width: 951px) {
text-align: center;
width: 33%;
}
@media (max-width: 950px) {
width: 100%;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
}
&:not(.disabled) {
span {
background-color: var(--lbry-teal-3);
padding-top: 0.5rem;
}
}
&.disabled {
span {
background-color: var(--lbry-gray-3);
padding-top: 0.5rem;
// Mobile Safari override
@media not all and (min-resolution: 0.001dpcm) {
font-size: 1rem;
padding-top: 1rem;
}
}
}
p {
@media (max-width: 950px) {
display: inline-block;
position: relative;
top: -0.3rem;
}
}
span {
width: 3rem; height: 3rem;
border-radius: 50%;
color: var(--lbry-white);
cursor: default;
font-size: 2rem;
line-height: 1;
text-align: center;
@media (min-width: 951px) {
display: block;
margin: 0 auto 0.5rem;
}
@media (max-width: 950px) {
display: inline-block;
margin-right: 0.5rem;
}
}
}
}
section {
&.hero {
margin-bottom: 0;
}
&:not(.hero) {
margin-bottom: 0;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
fieldset-group {
@media (max-width: 950px) {
flex-direction: column;
fieldset-section {
width: 100%;
}
}
}
checkbox-element {
&[disabled] {
checkbox-toggle {
border-color: initial;
opacity: 0.3;
}
label {
opacity: 0.3;
a {
pointer-events: initial;
}
}
}
&[hidden] {
display: none;
}
}
}
.yt-how {
ol {
@media (min-width: 951px) {
display: none;
}
}
.steps {
width: 100%; height: 260px;
margin-top: 80px;
position: relative;
@media (max-width: 950px) {
display: none;
}
.journey,
.path {
background-position: 0 0;
background-repeat: no-repeat;
background-size: 752px;
height: 287px;
position: absolute;
}
.journey {
top: 0; left: 0;
background-image: url("../img/youtube/path-complete@2x.png");
overflow: hidden;
width: 120px;
}
.path {
top: -52px; left: 0;
background-image: url("../img/youtube/path@2x.png");
width: 752px;
}
}
.step {
position: absolute;
&.enabled {
.circle {
background-color: var(--lbry-gray-5);
}
.text {
color: var(--lbry-gray-5);
}
}
&.one {
top: 0; left: 60px;
.text {
width: 226px;
}
}
&.two {
top: 160px; left: 225px;
.text {
width: 552px;
}
}
&.three {
top: 0; left: 550px;
.text {
width: 390px;
}
}
.circle {
width: 62px; height: 62px;
top: 0; left: 0;
background-color: $lbry-yt-blue;
border-radius: 50%;
box-shadow: 0 20px 50px 0 rgba($lbry-black, 0.15);
color: var(--lbry-white);
font-size: 24px;
font-weight: 600;
line-height: 62px;
position: absolute;
text-align: center;
transition: background-color 0.4s;
}
.text {
top: 0; left: 82px;
color: $lbry-yt-blue;
font-size: 18px;
font-weight: 600;
line-height: 3.4;
position: absolute;
transition: color 0.4s;
}
}
}