@@ -87,8 +86,8 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
@@ -97,8 +96,8 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
@ColinsLastStand
@@ -139,10 +138,21 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
Sync & Earn
LBRY offers a single-click sync process
for existing YouTubers
+
+
+
+
-
diff --git a/view/template/acquisition/youtube_edit.php b/view/template/acquisition/youtube_edit.php
index 39825ff7..856699ce 100644
--- a/view/template/acquisition/youtube_edit.php
+++ b/view/template/acquisition/youtube_edit.php
@@ -4,10 +4,10 @@ $channel_name = $_POST['new_preferred_channel'];
$email = $_POST['new_email'];
$sync_consent = isset($_POST['sync_consent']);
-$current_value = LBRY::statusYoutube($status_token);
+
if(!preg_match("/@[A-Za-z0-9_-]+$/", $channel_name)){
$channel_name = "@" . $channel_name;
}
-AcquisitionActions::actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent, $current_value);
+AcquisitionActions::actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent);
diff --git a/view/template/acquisition/youtube_status.php b/view/template/acquisition/youtube_status.php
index f1278126..5cd9e1d7 100644
--- a/view/template/acquisition/youtube_status.php
+++ b/view/template/acquisition/youtube_status.php
@@ -1,11 +1,10 @@
-
+
-
-
+
@@ -79,7 +78,7 @@
" . "The following error occurred: ". $_GET['error_message'] . " For support please send an email to hello@lbry.io" . "
";
+ if ($error_message): echo "
" . "The following error occurred: ". $error_message . " For support please send an email to hello@lbry.io" . "
";
endif;?>
diff --git a/web/css/yt2.css b/web/css/yt2.css
deleted file mode 100644
index b4fbe989..00000000
--- a/web/css/yt2.css
+++ /dev/null
@@ -1,1476 +0,0 @@
-/* ---------------------------
- -->
---------------------------- */
-@font-face{
- font-family: 'metropolis-bold';
- src: url('../font/metropolis/bold.eot');
- src: url('../font/metropolis/bold.eot?#iefix') format('embedded-opentype'),
- url('../font/metropolis/bold.woff') format('woff'),
- url('../font/metropolis/bold.ttf') format('truetype'),
- url('../font/metropolis/bold.svg#metropolis-bold') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face{
- font-family: 'metropolis-semibold';
- src: url('../font/metropolis/semibold.eot');
- src: url('../font/metropolis/semibold.eot?#iefix') format('embedded-opentype'),
- url('../font/metropolis/semibold.woff') format('woff'),
- url('../font/metropolis/semibold.ttf') format('truetype'),
- url('../font/metropolis/semibold.svg#metropolis-semibold') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-@font-face{
- font-family: 'metropolis-medium';
- src: url('../font/metropolis/medium.eot');
- src: url('../font/metropolis/medium.eot?#iefix') format('embedded-opentype'),
- url('../font/metropolis/medium.woff') format('woff'),
- url('../font/metropolis/medium.ttf') format('truetype'),
- url('../font/metropolis/medium.svg#metropolis-medium') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-
-/* ---------------------------
- --> INIT
---------------------------- */
-body,
-html {
- padding: 0;
- margin: 0;
- font: normal 400 16px/1.5 'metropolis-bold';
- color: #2F3C5C;
-}
-img {
- display: block;
-}
-a,
-input,
-button {
- outline: none;
- border: 0;
-}
-p, h1, h2, h3, img, input {
- float: left;
- padding: 0;
- margin: 0;
-}
-p, h1, h2, h3 {
- width: 100%;
-}
-
-
-/* ---------------------------
- --> HEADER
---------------------------- */
-header {
- position: absolute;
- top: 40px;
- left: 0;
- width: 100%;
- height: 80px;
- padding: 0 80px;
- z-index: 1;
- box-sizing: border-box;
-}
-header .inner {
- float: left;
- width: 100%;
- height: 100%;
-}
-header .left,
-header .right {
- float: left;
- width: 50%;
- height: 100%;
-}
-header .right {
- float: right;
-}
-header .logo {
- float: left;
- width: 126px;
- height: 100%;
- background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
- background-size: 126px;
- margin: 0 40px 0 0;
-}
-header .left a {
- float: left;
- font: normal 400 18px/80px 'metropolis-medium';
- color: #FFF;
- margin: 0 20px 0 0;
- text-decoration: none;
-}
-header .right a {
- float: right;
- width: 40px;
- height: 100%;
- margin: 0 0 0 20px;
-}
-/*header .right a.twitter {
- background: url(../images/social/twitter@2x.png) 50% 50% no-repeat;
- background-size: 24px;
-}
-header .right a.facebook {
- background: url(../images/youtube/facebook@2x.png) 50% 50% no-repeat;
- background-size: 11px;
-}
-header .right a.reddit {
- background: url(../images/youtube/reddit@2x.png) 50% 50% no-repeat;
- background-size: 27px;
-}
-header .right a.github {
- background: url(../images/youtube/github@2x.png) 50% 50% no-repeat;
- background-size: 24px;
-} */
-
-/* ---------------------------
- --> HERO
---------------------------- */
-.hero {
- position: relative;
- width: 100%;
- height: 100vh;
- background: url(../img/youtube/hero@2x.jpg);
- background-size: cover;
-}
-.hero .shape {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-.hero .shape .circle {
- -webkit-box-shadow: 0 10px 50px 0 rgba(0,0,0,0.25);
- -moz-box-shadow: 0 10px 50px 0 rgba(0,0,0,0.25);
- box-shadow: 0 10px 50px 0 rgba(0,0,0,0.25);
-}
-.hero .shape .circle,
-.hero .shape .dot {
- position: absolute;
- width: 60px;
- height: 60px;
- background: #2F3C5C;
- border-radius: 50%;
- margin: -30px 0 0 -30px;
-}
-.hero .shape .dot {
- width: 6px;
- height: 6px;
- margin: -3px 0 0 -3px;
-}
-.hero .shape .circle.one {
- top: 31%;
- left: 50%;
- width: 76px;
- height: 76px;
- background: #2F3C5C url(../img/youtube/core@2x.png) 50% 50% no-repeat;
- background-size: 25px;
- margin: -38px 0 0 -38px;
-}
-.hero .shape .circle.two {
- top: 20%;
- left: 75%;
- background: #2F3C5C url(../img/youtube/video@2x.png) 50% 50% no-repeat;
- background-size: 15px;
-}
-.hero .shape .circle.three {
- top: 73%;
- left: 82%;
- background: #2F3C5C url(../img/youtube/music@2x.png) 50% 50% no-repeat;
- background-size: 13px;
-}
-.hero .shape .dot.a {
- top: 34%;
- left: 72%;
-}
-.hero .shape .dot.b {
- top: 27%;
- left: 80%;
-}
-.hero .shape .dot.c {
- top: 81%;
- left: 75%;
-}
-.hero .shape .dot.d {
- top: 92%;
- left: 76%;
-}
-.hero .shape .dot.e {
- top: 81%;
- left: 93%;
-}
-.hero .shape .dot.f {
- top: 109%;
- left: 90%;
-}
-.hero .title {
- position: absolute;
- top: 40%;
- left: 15%;
- width: 70%;
-}
-.hero .title .overflow {
- float: left;
- position: relative;
- overflow: hidden;
- width: 100%;
- height: 80px;
-}
-.hero .title .overflow + .overflow {
- margin: -10px 0 0 0;
-}
-.hero .title .overflow h1 {
- position: absolute;
- font: normal 400 80px/1 'metropolis-bold';
- color: #FFF;
-}
-.hero .title p {
- float: left;
- width: 100%;
- font: normal 400 21px/1.2 'metropolis-semibold';
- margin-top: 20px;
- color: #FFF;
-}
-.hero .title .button {
- float: left;
- height: 60px;
- background: #FFF;
- color: #2F3C5C;
- padding: 0 24px;
- margin: 40px 0 0 0;
- font: normal 400 18px/60px 'metropolis-semibold';
- border-radius: 30px;
- cursor: pointer;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- transition: box-shadow 0.3s;
-}
-.hero .title .button:hover {
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-}
-
-
-/* ---------------------------
- --> SECTIONS
---------------------------- */
-.section {
- float: left;
- width: 100%;
-}
-.section .inner {
- float: none;
- width: 960px;
- margin: 0 auto;
-}
-.section .inner .content {
- float: left;
- width: 100%;
-}
-.section h1 {
- font: normal 400 30px/1 'metropolis-bold';
- color: #2F3C5C;
-}
-.section h1 + p {
- font: normal 400 18px/1.3 'metropolis-medium';
- margin: 12px 0 0 0;
- color: #AAA;
-}
-.section h1 + p a {
- color: #45B0AF;
-}
-.section .meta {
- float: left;
- width: 100%;
- margin: 40px 0 0 0;
- font: normal 400 13px/1.7 'metropolis-medium';
- text-align: center;
- color: #CCC;
-}
-.section .meta a {
- color: #45B0AF;
-}
-
-
-/* --- CLAIM --- */
-.claim {
- background: #F6F6F6;
- padding: 80px 0;
-}
-.claim .zigzag {
- float: left;
- width: 100%;
- height: 40px;
- background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
- background-size: 72px;
-}
-.claim h1,
-.claim h1 + p {
- text-align: center;
-}
-.claim .sync-status {
- float: left;
- width: 100%;
- font: normal 400 16px/40px 'metropolis-medium';
- text-align: center;
- color: #2F3C5C;
- margin-top: 10px;
-}
-.claim .sync-status a {
- color: #45B0AF;
-}
-.claim form {
- float: left;
- width: 100%;
- margin: 60px 0 0 0;
-}
-.claim .form-inner {
- float: none;
- width: 446px;
- margin: 0 auto;
-}
-.claim .block {
- position: relative;
- float: left;
- margin-top: 10px;
-}
-.claim .error {
- position: absolute;
- top: 100%;
- left: 0;
- font: normal 400 14px/40px 'metropolis-medium';
- color: #E2495E;
-}
-.claim input {
- float: left;
- height: 50px;
- border-radius: 25px;
- font: normal 400 16px/50px 'metropolis-medium';
-}
-.claim input[type="text"] {
- width: 306px;
- background: #FFF;
- text-indent: 32px;
-}
-.claim input[type="submit"] {
- width: 120px;
- background: #2F3C5C;
- color: #FFF;
- text-align: center;
- cursor: pointer;
- margin: 0 0 0 20px;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- transition: box-shadow 0.3s;
-}
-.claim input[type="submit"]:hover {
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-}
-.error_form{
- -webkit-box-shadow:inset 0px 0px 0px 2px #E2495E;
- -moz-box-shadow:inset 0px 0px 0px 2px #E2495E;
- box-shadow:inset 0px 0px 0px 2px #E2495E;
-}
-.claim label {
- position: absolute;
- top: 0;
- left: 0;
- font: normal 400 16px/50px 'metropolis-medium';
- text-indent: 16px;
-}
-
-::-webkit-input-placeholder {
- color: #AAA;
-}
-::-moz-placeholder {
- color: #AAA;
-}
-:-moz-placeholder {
- color: #AAA;
-}
-:-ms-input-placeholder {
- color: #AAA;
-}
-
-
-/* --- JOIN --- */
-.join {
- padding: 100px 0 0 0;
-}
-.join .boxes {
- float: left;
- width: 100%;
- margin: 40px 0 0 0;
-}
-.join .box {
- float: left;
- width: 306px;
- margin: 0 21px 0 0;
-}
-.join .box:last-child {
- margin: 0;
-}
-.join .box .image,
-.join .box .text {
- position: relative;
- float: left;
- width: 100%;
-}
-.join .box .image img {
- width: 100%;
- height: auto;
-}
-.join .box .image .to-play {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0);
- z-index: 1;
- -webkit-transition: background 0.4s;
- transition: background 0.4s;
-}
-.join .box .image:hover .to-play {
- background: rgba(0,0,0,0.5);
-}
-.join .box .image .to-play span {
- opacity: 0;
- display: block;
- position: absolute;
- top: 50%;
- left: 50%;
- width: 40px;
- height: 40px;
- background: url(../img/youtube/play@2x.png) 50% 50% no-repeat;
- background-size: 30px;
- -webkit-transform: translate(-50%,-40%);
- transform: translate(-50%,-40%);
- -webkit-transition: transform 0.4s, opacity 0.4s;
- transition: transform 0.4s, opacity 0.4s;
-}
-.join .box .image:hover .to-play span {
- opacity: 1;
- -webkit-transform: translate(-50%,-50%);
- transform: translate(-50%,-50%);
-}
-.join .box .text {
- margin: 20px 0 0 0;
-}
-.join .box .text p {
- font: normal 400 18px/20px 'metropolis-semibold';
- color: #2F3C5C;
-}
-.join .box .text p + p {
- font: normal 400 14px/20px 'metropolis-medium';
- color: #AAA;
- margin: 10px 0 0 0;
-}
-
-
-/* --- HOW --- */
-.how {
- padding: 100px 0 0 0;
-}
-.how .steps {
- position: relative;
- float: left;
- width: 100%;
- height: 260px;
- margin: 80px 0 0 0;
-}
-.how .steps .path {
- position: absolute;
- top: -52px;
- left: -60px;
- width: 752px;
- height: 287px;
- background: url(../img/youtube/path@2x.png) 0 0 no-repeat;
- background-size: 752px;
-}
-.how .steps .path .journey {
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- width: 120px;
- height: 287px;
- background: url(../img/youtube/path-complete@2x.png) 0 0 no-repeat;
- background-size: 752px;
-}
-.how .step {
- position: absolute;
- top: 0;
- left: 0;
-}
-.how .step .circle {
- position: absolute;
- top: 0;
- left: 0;
- width: 62px;
- height: 62px;
- border-radius: 50%;
- background: #2F3C5C;
- font: normal 400 24px/62px 'metropolis-semibold';
- text-align: center;
- color: #FFF;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -webkit-transition: background 0.4s;
- transition: background 0.4s;
-}
-.how .step .text {
- position: absolute;
- top: 0;
- left: 82px;
- font: normal 400 18px/1.5 'metropolis-medium';
- color: #2F3C5C;
- -webkit-transition: color 0.4s;
- transition: color 0.4s;
-}
-.how .step.one .text {
- width: 226px;
-}
-.how .step.two {
- top: 160px;
- left: 164px;
-}
-.how .step.two .text {
- width: 552px;
-}
-.how .step.three {
- top: 0;
- left: 490px;
-}
-.how .step.three .text {
- width: 390px;
-}
-.how .step.enabled .circle {
- background: #CCC;
-}
-.how .step.enabled .text {
- color: #CCC;
-}
-
-
-/* --- REWARDS --- */
-.rewards {
- padding: 40px 0 80px 0;
- background: #FAFAFA;
-}
-.rewards .price {
- float: left;
- width: 100%;
- margin: 40px 0;
-}
-.rewards .price h3 {
- float: left;
- width: auto;
- font: normal 400 21px/30px 'metropolis-bold';
- color: #2F3C5C;
-}
-.rewards .price p {
- float: right;
- width: auto;
- background: url(../img/youtube/lbc@2x.png) 0 50% no-repeat;
- background-size: 13px;
- font: normal 400 14px/30px 'metropolis-semibold';
- text-indent: 20px;
-}
-.rewards .price p span {
- font: normal 400 12px/30px 'metropolis-medium';
- color: #AAA;
-}
-.rewards .table,
-.rewards .table .head,
-.rewards .table .line {
- float: left;
- width: 100%;
-}
-.rewards .table .head {
- height: 40px;
- border-bottom: 1px solid #EEE;
-}
-.rewards .table .head p,
-.rewards .table .line p {
- float: left;
- width: 306px;
- text-indent: 20px;
- margin: 0 21px 0 0;
- font: normal 400 16px/40px 'metropolis-semibold';
- color: #2F3C5C;
-}
-.rewards .table .head p:last-child,
-.rewards .table .line p:last-child {
- margin: 0;
-}
-.rewards .table .line {
- height: 60px;
-}
-.rewards .table .line:nth-child(odd) {
- background: #F6F6F6;
-}
-.rewards .table .line p {
- font: normal 400 16px/60px 'metropolis-medium';
-}
-.rewards .table .line p span {
- display: inline-block;
- width: 13px;
- height: 13px;
- background: url(../img/youtube/lbc@2x.png) 0 50% no-repeat;
- background-size: 13px;
-}
-.rewards .table .line p i {
- font: normal 400 10px/60px 'metropolis-medium';
-}
-
-
-/* --- SYNC --- */
-.sync {
- padding: 80px 0 60px 0;
- margin: 100px 0 0 0;
- background: #FAFAFA;
-}
-.sync .zigzag {
- float: left;
- width: 100%;
- height: 40px;
- background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
- background-size: 72px;
-}
-.sync h1,
-.sync h1 + p {
- text-align: center;
-}
-.sync .button {
- float: left;
- width: 100%;
- margin: 40px 0 0 0;
-}
-.sync .button a {
- float: none;
- display: block;
- text-decoration: none;
- width: 120px;
- height: 50px;
- background: #45B0AF;
- margin: 0 auto;
- border-radius: 25px;
- font: normal 400 16px/50px 'metropolis-medium';
- text-align: center;
- color: #FFF;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- transition: box-shadow 0.3s;
-}
-.sync .button a:hover {
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-}
-
-
-
-/* --- CONTACT --- */
-.contact {
- padding: 80px 0 100px 0;
-}
-.contact .v-card {
- float: left;
- width: 100%;
- margin: 40px 0 0 0;
-}
-.contact .photo {
- float: left;
- width: 82px;
- margin: 0 24px 0 0;
-}
-.contact .photo img {
- width: 100%;
- height: auto;
-}
-.contact .text {
- float: left;
- width: 854px;
-}
-.contact .text h3 {
- font: normal 400 21px/30px 'metropolis-bold';
- color: #2F3C5C;
-}
-.contact .text p {
- font: normal 400 18px/1.5 'metropolis-medium';
- color: #AAA;
-}
-.contact .text h3 + p {
- font: normal 400 16px/20px 'metropolis-medium';
- color: #AAA;
- margin: 0 0 24px 0;
-}
-.contact .text a {
- float: left;
- height: 50px;
- background: #2F3C5C;
- color: #FFF;
- padding: 0 20px;
- margin: 40px 0 0 0;
- font: normal 400 16px/50px 'metropolis-medium';
- text-decoration: none;
- border-radius: 25px;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- transition: box-shadow 0.3s;
-}
-.contact .text a:hover {
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-}
-
-/* --- TO TOP --- */
-.to-top {
- opacity: 0;
- visibility: hidden;
- position: fixed;
- bottom: 100px;
- right: 80px;
- width: 62px;
- height: 62px;
- border-radius: 50%;
- background: #DDD url(../img/youtube/top@2x.png) 50% 50% no-repeat;
- background-size: 16px;
- cursor: pointer;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.1);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.1);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.1);
- -webkit-transition: background 0.4s;
- transition: background 0.4s;
-}
-.to-top:hover {
- background: #2F3C5C url(../img/youtube/top@2x.png) 50% 50% no-repeat;
- background-size: 16px;
-}
-.to-top span {
- position: absolute;
- top: -24px;
- left: 0;
- width: 62px;
- font: normal 400 14px/20px 'metropolis-bold';
- text-align: center;
- color: #CCC;
-}
-
-
-
-/* --- CHANNEL, SETTINGS --- */
-.channel,
-.settings {
- padding: 80px 0;
-}
-.settings {
- background: #F6F6F6;
-}
-.channel.pad-top {
- padding-top: 160px;
-}
-.channel .zigzag,
-.settings .zigzag {
- float: left;
- width: 100%;
- height: 30px;
- background: url(../img/youtube/zigzag@2x.png) 0 0 no-repeat;
- background-size: 72px;
-}
-.channel h1,
-.settings h1 {
- font: normal 400 24px/30px 'metropolis-bold';
- color: #2F3C5C;
-}
-.channel .block,
-.settings .block {
- position: relative;
- float: left;
- width: 50%;
- margin-top: 40px;
- box-sizing: border-box;
-}
-.channel .block:not(:first-child) {
- width: 25%;
-}
-.settings .block {
- padding-right: 60px;
-}
-.settings .block.full {
- width: 100%;
- padding: 0;
- font: normal 400 16px/30px 'metropolis-semibold';
- color: #2F3C5C;
-}
-.channel .block p {
- float: left;
- width: 100%;
- font: normal 400 13px/20px 'metropolis-medium';
- color: #2F3C5C;
-}
-.channel .block.get-credits p {
- font: normal 400 16px/1.5 'metropolis-semibold';
- color: #2F3C5C;
-}
-.channel .block p span {
- float: left;
- width: 100%;
- font: normal 400 40px/40px 'metropolis-medium';
- color: #2F3C5C;
- margin-top: 8px;
-}
-.channel .block i {
- display: inline-block;
- width: 24px;
- height: 13px;
- background: url(../img/youtube/lbc@2x.png) 50% 50% no-repeat;
- background-size: 13px;
-}
-.channel .error {
- float: left;
- width: 100%;
- font: normal 400 18px/1.5 'metropolis-semibold';
- color: #AAA;
- margin: 0 0 40px 0;
-}
-.channel .error span {
- color: #45B0AF;
- border-bottom: 1px solid #45B0AF;
- cursor: pointer;
-}
-.channel .confirmation-steps {
- float: left;
- width: 100%;
-}
-.channel .confirmation-steps ul {
- float: left;
- width: 100%;
- list-style: none;
- padding: 0;
-}
-.channel .confirmation-steps ul li {
- position: relative;
- float: left;
- width: 33%;
-}
-.channel .confirmation-steps ul li span {
- position: absolute;
- top: 0;
- left: 0;
- width: 48px;
- height: 48px;
- background: #40C0A9;
- border-radius: 50%;
- font: normal 400 18px/48px sans-serif;
- text-align: center;
- color: #FFF;
-}
-.channel .confirmation-steps ul li.disabled span {
- background: #CCC;
- color: #FFF;
-}
-.channel .confirmation-steps ul li p {
- float: left;
- width: 100%;
- padding: 0 0 0 60px;
- line-height: 48px;
- box-sizing: border-box;
-}
-.channel .confirmation-steps ul li.disabled p {
- color: #CCC;
-}
-.channel .confirmation-steps ul li p + p {
- font: normal 400 13px/20px 'metropolis-semibold';
- color: #2F3C5C;
- margin-top: 0;
-}
-.channel .confirmation-steps ul li a {
- color: #45B0AF;
-}
-.settings form {
- float: left;
- width: 100%;
-}
-.settings label {
- float: left;
- width: 100%;
- font: normal 400 13px/20px 'metropolis-semibold';
- color: #2F3C5C;
-}
-.settings input {
- float: left;
- height: 50px;
- border-radius: 25px;
- font: normal 400 16px/50px 'metropolis-medium';
- margin: 8px 0 0 0;
-}
-.settings input[type="text"] {
- width: 100%;
- background: #FFF;
- text-indent: 24px;
-}
-.settings input[type="checkbox"] {
- height: 16px;
- margin: 6px 8px 0 0;
- border-radius: 0;
-}
-.settings input[type="checkbox"][readonly] {
- pointer-events: none;
-}
-.settings .error {
- font: normal 400 14px/40px 'metropolis-medium';
- color: #E2495E;
-}
-.settings button {
- float: left;
- height: 50px;
- background: #2F3C5C;
- border-radius: 25px;
- padding: 0 20px;
- font: normal 400 16px/50px 'metropolis-medium';
- color: #FFF;
- cursor: pointer;
- -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
- transition: box-shadow 0.3s;
-}
-.settings a {
- color: #45B0AF;
-}
-.settings button:hover {
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
-}
-.channel-settings header .logo {
- background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
- background-size: 126px;
-}
-.channel-settings header .left a {
- color: #125548;
-}
-
-
-
-
-
-
-
-/* ---------------------------
- --> RESPONSIVE
---------------------------- */
-@media only screen and (min-width : 1680px) {
- .hero .title .overflow {
- height: 90px;
- }
- .hero .title .overflow h1 {
- font: normal 400 90px/1 'metropolis-bold';
- }
- .section .inner {
- width: 1120px;
- }
- .claim .form-inner {
- width: 500px;
- }
- .claim input[type="text"] {
- width: 360px;
- }
- .join .box {
- width: 360px;
- margin: 0 20px 0 0;
- }
- .earnings .table .head p,
- .earnings .table .line p,
- .rewards .table .head p,
- .rewards .table .line p {
- width: 360px;
- margin: 0 20px 0 0;
- }
- .how .steps {
- margin: 100px 0 0 60px;
- }
-}
-@media only screen and (max-width : 1120px) {
- header {
- top: 20px;
- padding: 0 48px;
- }
- header .logo {
- width: 110px;
- background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
- background-size: 110px;
- }
- .channel-settings header .logo {
- background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
- background-size: 110px;
- }
- header .left a {
- font-size: 16px;
- }
- header .right a {
- width: 32px;
- }
- header .right a.twitter {
- background: url(../img/youtube/twitter@2x.png) 50% 50% no-repeat;
- background-size: 19px;
- }
- header .right a.facebook {
- background: url(../img/social/facebook@2x.png) 50% 50% no-repeat;
- background-size: 9px;
- }
- header .right a.reddit {
- background: url(../img/social/reddit@2x.png) 50% 50% no-repeat;
- background-size: 22px;
- }
- header .right a.github {
- background: url(../img/social/github@2x.png) 50% 50% no-repeat;
- background-size: 19px;
- }
- .hero .title .overflow {
- height: 64px;
- }
- .hero .title .overflow + .overflow {
- margin-top: 0;
- }
- .hero .title .overflow h1 {
- font: normal 400 64px/1 'metropolis-bold';
- }
- .hero .title p {
- font: normal 400 18px/1.3 'metropolis-medium';
- }
- .hero .title .button {
- height: 50px;
- padding: 0 20px;
- margin: 32px 0 0 0;
- font: normal 400 16px/50px 'metropolis-semibold';
- border-radius: 25px;
- }
- .section .inner {
- width: 900px;
- }
- .section h1 {
- font-size: 26px;
- }
- .section h1 + p {
- font: normal 400 16px/1.5 'metropolis-medium';
- }
- .claim form {
- margin: 50px 0 0 0;
- }
- .join {
- padding: 80px 0 0 0;
- }
- .join .box,
- .rewards .table .head p,
- .rewards .table .line p {
- width: 286px;
- }
- .contact .text {
- width: 794px;
- }
-}
-@media only screen and (max-width : 1024px) {
- .section .inner {
- width: 100%;
- padding: 0 64px;
- box-sizing: border-box;
- }
- .join .box,
- .rewards .table .head p,
- .rewards .table .line p {
- width: 31%;
- margin: 0 3.5% 0 0;
- }
- .how {
- padding: 80px 0 0 0;
- }
- .how .steps {
- margin: 24px 0 0 0;
- height: auto;
- }
- .how .steps .path {
- display: none;
- }
- .how .step,
- .how .step .circle,
- .how .step .text {
- position: static;
- float: left;
- }
- .how .step {
- width: 100%;
- margin: 24px 0 0 0;
- }
- .how .step:first-child {
- margin: 0;
- }
- .how .step.enabled .circle {
- width: 5%;
- height: auto;
- margin: 0;
- background: none;
- color: #CCC;
- font: normal 400 18px/1.5 'metropolis-medium';
- text-align: left;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- -webkit-transition: none;
- transition: none;
- }
- .how .step.one .text,
- .how .step.two .text,
- .how .step.three .text {
- width: 95%;
- }
- .how .step.enabled .text {
- color: #2F3C5C;
- }
- .sync {
- margin: 80px 0 0 0;
- }
- .rewards {
- padding: 0 0 80px 0;
- }
- .contact .photo {
- width: 8%;
- margin: 0 2% 0 0;
- }
- .contact .text {
- width: 90%;
- }
- .to-top {
- display: none;
- }
-}
-@media only screen and (max-width : 800px) {
- header {
- padding: 0 10%;
- }
- .channel-settings header {
- padding: 0 64px;
- }
- header .logo {
- width: 96px;
- background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
- background-size: 96px;
- }
- .channel-settings header .logo {
- background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
- background-size: 96px;
- }
- header .left {
- width: 100%;
- }
- header .right {
- display: none;
- }
- .hero {
- float: left;
- height: auto;
- padding: 200px 10% 80px 10%;
- box-sizing: border-box;
- }
- .hero .shape {
- display: none;
- }
- .hero .title {
- position: static;
- float: left;
- width: 100%;
- }
- .hero .title .overflow {
- height: auto;
- }
- .hero .title .overflow h1 {
- position: static;
- font-size: 48px;
- }
- .hero .title .button {
- display: none;
- }
- .section h1 {
- font-size: 24px;
- }
- .section h1 + p {
- font-size: 15px;
- }
- .channel,
- .settings {
- padding: 60px 0;
- }
- .channel h1,
- .settings h1 {
- font: normal 400 21px/30px 'metropolis-bold';
- color: #2F3C5C;
- }
- .channel .block p span {
- font: normal 400 54px/54px 'metropolis-medium';
- }
- .settings .block.full {
- font: normal 400 15px/30px 'metropolis-semibold';
- }
- .settings button {
- height: 40px;
- border-radius: 20px;
- font: normal 400 14px/40px 'metropolis-medium';
- }
- .claim {
- padding: 60px 0;
- }
- .claim .form-inner {
- width: 436px;
- }
- .claim input,
- .settings input {
- height: 40px;
- border-radius: 20px;
- font: normal 400 14px/40px 'metropolis-medium';
- }
- .claim input[type="submit"] {
- width: 110px;
- }
- .claim label {
- font: normal 400 16px/40px 'metropolis-medium';
- }
- .join .box .text p {
- font-size: 15px;
- }
- .join .box .text p + p {
- font: normal 400 13px/1.5 'metropolis-medium';
- }
- .how .step .text,
- .how .step.enabled .circle {
- font: normal 400 15px/1.5 'metropolis-medium';
- }
- .sync {
- padding: 60px 0;
- }
- .sync .button {
- margin: 24px 0 40px 0;
- }
- .sync .button a {
- width: 110px;
- height: 40px;
- border-radius: 20px;
- font: normal 400 15px/40px 'metropolis-medium';
- }
- .contact .text h3 {
- font-size: 16px;
- }
- .contact .text h3 + p {
- font: normal 400 13px/1 'metropolis-medium';
- }
- .contact .text p {
- font: normal 400 15px/1.5 'metropolis-medium';
- }
- .contact .text a {
- height: 40px;
- margin: 24px 0 0 0;
- font: normal 400 15px/40px 'metropolis-medium';
- border-radius: 20px;
- }
-}
-@media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : landscape) {
- .channel .confirmation-steps ul li {
- width: 100%;
- margin-top: 20px;
- }
-}
-@media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : portrait) {
- header {
- padding: 0 10%;
- }
- header .logo {
- width: 100px;
- background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
- background-size: 100px;
- }
- header .left {
- width: 100%;
- }
- header .left a {
- float: right;
- }
- header .right {
- display: none;
- }
- .hero {
- float: left;
- height: auto;
- padding: 200px 10% 80px 10%;
- box-sizing: border-box;
- }
- .hero .shape {
- display: none;
- }
- .hero .title {
- position: static;
- float: left;
- width: 100%;
- }
- .hero .title .overflow {
- height: auto;
- }
- .hero .title .overflow h1 {
- position: static;
- font-size: 48px;
- }
- .hero .title p {
- font-size: 18px;
- }
- .hero .title .button {
- display: none;
- }
- .section .inner {
- padding: 0 36px;
- }
- .section h1 {
- font: normal 400 24px/1.2 'metropolis-bold';
- text-align: center;
- }
- .section h1 + p {
- font: normal 400 16px/1.5 'metropolis-medium';
- text-align: center;
- }
- .claim .form-inner,
- .claim .block {
- width: 100%;
- }
- .claim input {
- float: none;
- }
- .claim input[type="text"] {
- width: 100%;
- }
- .claim input[type="submit"] {
- display: block;
- margin: 24px auto 0 auto;
- width: 120px;
- -webkit-appearance: none;
- -moz-appearance: none;
- }
- .join {
- padding: 60px 0 0 0;
- }
- .join .box,
- .join .box:last-child {
- width: 100%;
- margin: 24px 0 0 0;
- }
- .join .box:first-child {
- margin: 0;
- }
- .join .box .text {
- margin: 12px 0 0 0;
- }
- .join .box .text p {
- font-size: 18px;
- }
- .join .box .text p + p {
- margin: 4px 0 0 0;
- }
- .rewards .price h3,
- .rewards .price p {
- width: 100%;
- text-align: center;
- }
- .rewards .price p {
- background: none;
- text-indent: 0;
- }
- .rewards .table .head p,
- .rewards .table .line p {
- text-indent: 10px;
- font-size: 13px;
- }
- .contact {
- padding: 60px 0 100px 0;
- }
- .contact .photo {
- width: 30%;
- margin: 0 35%;
- }
- .contact .text {
- width: 100%;
- text-align: center;
- }
- .contact .text a {
- width: 40%;
- margin: 20px 30% 0 30%;
- box-sizing: border-box;
- }
- .how .step.enabled .circle {
- width: 10%;
- font-size: 20px;
- }
- .how .step.one .text,
- .how .step.two .text,
- .how .step.three .text {
- width: 90%;
- }
- .channel-settings header {
- padding: 0 10%;
- }
- .channel.pad-top {
- padding-top: 140px;
- }
- .channel .block,
- .settings .block {
- width: 100%;
- }
- .channel .zigzag,
- .settings .zigzag {
- background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
- background-size: 72px;
- }
- .channel .block p {
- text-align: center;
- }
- .settings .block {
- padding-right: 0;
- }
- .settings .block.full {
- line-height: 1.3;
- }
- .channel .block.get-credits p {
- font-size: 14px;
- }
- .settings button {
- float: none;
- display: block;
- width: 180px;
- margin: 0 auto;
- padding: 0;
- text-align: center;
- }
- .channel .confirmation-steps ul li {
- width: 100%;
- margin-top: 20px;
- }
- .channel .block:not(:first-child) {
- width: 100%;
- }
- .channel .error {
- font-size: 14px;
- text-align: center;
- }
-}
diff --git a/web/img/youtube/01@2x.jpg b/web/img/youtube/01@2x.jpg
index be5dec55..b95f8d4a 100644
Binary files a/web/img/youtube/01@2x.jpg and b/web/img/youtube/01@2x.jpg differ
diff --git a/web/img/youtube/02@2x.jpg b/web/img/youtube/02@2x.jpg
index d6a53612..7523c53b 100644
Binary files a/web/img/youtube/02@2x.jpg and b/web/img/youtube/02@2x.jpg differ
diff --git a/web/img/youtube/03@2x.jpg b/web/img/youtube/03@2x.jpg
index e3943331..8d510c6d 100644
Binary files a/web/img/youtube/03@2x.jpg and b/web/img/youtube/03@2x.jpg differ
diff --git a/web/js/yt2/FormValidation.js b/web/js/yt2/FormValidation.js
index 0d5016e5..b9efb00b 100644
--- a/web/js/yt2/FormValidation.js
+++ b/web/js/yt2/FormValidation.js
@@ -63,7 +63,7 @@ function validateEmail(email) {
}
function validateLBRYName(lbry_channel_name){
- var re = /[@A-Za-z0-9_-]+$/;
+ var re = /^[@A-Za-z0-9_-]*$/g;
return re.test(lbry_channel_name);
}
diff --git a/web/js/yt2/youtube_video.js b/web/js/yt2/youtube_video.js
index 0a36d2af..d4a1ec83 100644
--- a/web/js/yt2/youtube_video.js
+++ b/web/js/yt2/youtube_video.js
@@ -1,31 +1,8 @@
-function playVideo1(){
- var myVideo = document.getElementById("video1");
- if (myVideo.paused){
- myVideo.play();
- }
- else{
- myVideo.pause();
- }
-}
-
-function playVideo2(){
- var myVideo = document.getElementById("video2");
- if (myVideo.paused){
- myVideo.play();
- }
- else{
- myVideo.pause();
- }
-}
-
-function playVideo3() {
- var myVideo = document.getElementById("video3");
- if (myVideo.paused) {
- myVideo.play();
- }
- else {
- myVideo.pause();
- }
+function playVideo(id){
+ var myVideo = document.getElementById(id);
+ myVideo.play();
+ $('#' + id).prop("controls", true);
+ $('#play-' + id).hide();
}
\ No newline at end of file
diff --git a/web/scss/youtube.scss b/web/scss/youtube.scss
new file mode 100644
index 00000000..72448f7e
--- /dev/null
+++ b/web/scss/youtube.scss
@@ -0,0 +1,1630 @@
+/* ---------------------------
+ -->
+--------------------------- */
+@font-face {
+ font-family: 'metropolis-bold';
+ src: url('../font/metropolis/bold.eot');
+ src: url('../font/metropolis/bold.eot?#iefix') format("embedded-opentype"), url('../font/metropolis/bold.woff') format("woff"), url('../font/metropolis/bold.ttf') format("truetype"), url('../font/metropolis/bold.svg#metropolis-bold') format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+@font-face {
+ font-family: 'metropolis-semibold';
+ src: url('../font/metropolis/semibold.eot');
+ src: url('../font/metropolis/semibold.eot?#iefix') format("embedded-opentype"), url('../font/metropolis/semibold.woff') format("woff"), url('../font/metropolis/semibold.ttf') format("truetype"), url('../font/metropolis/semibold.svg#metropolis-semibold') format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+@font-face {
+ font-family: 'metropolis-medium';
+ src: url('../font/metropolis/medium.eot');
+ src: url('../font/metropolis/medium.eot?#iefix') format("embedded-opentype"), url('../font/metropolis/medium.woff') format("woff"), url('../font/metropolis/medium.ttf') format("truetype"), url('../font/metropolis/medium.svg#metropolis-medium') format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+/* ---------------------------
+ --> INIT
+--------------------------- */
+
+body, html {
+ padding: 0;
+ margin: 0;
+ font: normal 400 16px/1.5 'metropolis-bold';
+ color: #2F3C5C;
+}
+
+img {
+ display: block;
+}
+
+a, input, button {
+ outline: none;
+ border: 0;
+}
+
+p, h1, h2, h3, img, input {
+ float: left;
+ padding: 0;
+ margin: 0;
+}
+
+p, h1, h2, h3 {
+ width: 100%;
+}
+
+/* ---------------------------
+ --> HEADER
+--------------------------- */
+
+header {
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ height: 80px;
+ padding: 0 80px;
+ z-index: 1;
+ box-sizing: border-box;
+ .inner {
+ float: left;
+ width: 100%;
+ height: 100%;
+ }
+ .left {
+ float: left;
+ width: 50%;
+ height: 100%;
+ }
+ .right {
+ float: left;
+ width: 50%;
+ height: 100%;
+ float: right;
+ }
+ .logo {
+ float: left;
+ width: 126px;
+ height: 100%;
+ background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
+ background-size: 126px;
+ margin: 0 40px 0 0;
+ }
+ .left a {
+ float: left;
+ font: normal 400 18px/80px 'metropolis-medium';
+ color: #FFF;
+ margin: 0 20px 0 0;
+ text-decoration: none;
+ }
+ .right a {
+ float: right;
+ width: 40px;
+ height: 100%;
+ margin: 0 0 0 20px;
+ }
+}
+
+/*header .right a.twitter {
+ background: url(../images/social/twitter@2x.png) 50% 50% no-repeat;
+ background-size: 24px;
+}
+header .right a.facebook {
+ background: url(../images/youtube/facebook@2x.png) 50% 50% no-repeat;
+ background-size: 11px;
+}
+header .right a.reddit {
+ background: url(../images/youtube/reddit@2x.png) 50% 50% no-repeat;
+ background-size: 27px;
+}
+header .right a.github {
+ background: url(../images/youtube/github@2x.png) 50% 50% no-repeat;
+ background-size: 24px;
+} */
+
+/* ---------------------------
+ --> HERO
+--------------------------- */
+
+.hero {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ background: url(../img/youtube/hero@2x.jpg);
+ background-size: cover;
+ .shape {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ .circle {
+ -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ background: #2F3C5C;
+ border-radius: 50%;
+ margin: -30px 0 0 -30px;
+ }
+ .dot {
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ background: #2F3C5C;
+ border-radius: 50%;
+ margin: -30px 0 0 -30px;
+ width: 6px;
+ height: 6px;
+ margin: -3px 0 0 -3px;
+ }
+ .circle {
+ &.one {
+ top: 31%;
+ left: 50%;
+ width: 76px;
+ height: 76px;
+ background: #2F3C5C url(../img/youtube/core@2x.png) 50% 50% no-repeat;
+ background-size: 25px;
+ margin: -38px 0 0 -38px;
+ }
+ &.two {
+ top: 20%;
+ left: 75%;
+ background: #2F3C5C url(../img/youtube/video@2x.png) 50% 50% no-repeat;
+ background-size: 15px;
+ }
+ &.three {
+ top: 73%;
+ left: 82%;
+ background: #2F3C5C url(../img/youtube/music@2x.png) 50% 50% no-repeat;
+ background-size: 13px;
+ }
+ }
+ .dot {
+ &.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%;
+ }
+ }
+ }
+ .title {
+ position: absolute;
+ top: 40%;
+ left: 15%;
+ width: 70%;
+ .overflow {
+ float: left;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: 80px;
+ + .overflow {
+ margin: -10px 0 0 0;
+ }
+ h1 {
+ position: absolute;
+ font: normal 400 80px/1 'metropolis-bold';
+ color: #FFF;
+ }
+ }
+ p {
+ float: left;
+ width: 100%;
+ font: normal 400 21px/1.2 'metropolis-semibold';
+ margin-top: 20px;
+ color: #FFF;
+ }
+ .button {
+ float: left;
+ height: 60px;
+ background: #FFF;
+ color: #2F3C5C;
+ padding: 0 24px;
+ margin: 40px 0 0 0;
+ font: normal 400 18px/60px 'metropolis-semibold';
+ border-radius: 30px;
+ cursor: pointer;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ &:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }
+ }
+ }
+}
+
+/* ---------------------------
+ --> SECTIONS
+--------------------------- */
+
+.section {
+ float: left;
+ width: 100%;
+ .inner {
+ float: none;
+ width: 960px;
+ margin: 0 auto;
+ .content {
+ float: left;
+ width: 100%;
+ }
+ }
+ h1 {
+ font: normal 400 30px/1 'metropolis-bold';
+ color: #2F3C5C;
+ + p {
+ font: normal 400 18px/1.3 'metropolis-medium';
+ margin: 12px 0 0 0;
+ color: #AAA;
+ a {
+ color: #45B0AF;
+ }
+ }
+ }
+ .meta {
+ float: left;
+ width: 100%;
+ margin: 40px 0 0 0;
+ font: normal 400 13px/1.7 'metropolis-medium';
+ text-align: center;
+ color: #CCC;
+ a {
+ color: #45B0AF;
+ }
+ }
+}
+
+/* --- CLAIM --- */
+
+.claim {
+ background: #F6F6F6;
+ padding: 80px 0;
+ .zigzag {
+ float: left;
+ width: 100%;
+ height: 40px;
+ background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
+ background-size: 72px;
+ }
+ h1 {
+ text-align: center;
+ + p {
+ text-align: center;
+ }
+ }
+ .sync-status {
+ float: left;
+ width: 100%;
+ font: normal 400 16px/40px 'metropolis-medium';
+ text-align: center;
+ color: #2F3C5C;
+ margin-top: 10px;
+ a {
+ color: #45B0AF;
+ }
+ }
+ form {
+ float: left;
+ width: 100%;
+ margin: 60px 0 0 0;
+ }
+ .form-inner {
+ float: none;
+ width: 446px;
+ margin: 0 auto;
+ }
+ .block {
+ position: relative;
+ float: left;
+ margin-top: 10px;
+ }
+ .error {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ font: normal 400 14px/40px 'metropolis-medium';
+ color: #E2495E;
+ }
+ input {
+ float: left;
+ height: 50px;
+ border-radius: 25px;
+ font: normal 400 16px/50px 'metropolis-medium';
+ &[type="text"] {
+ width: 306px;
+ background: #FFF;
+ text-indent: 32px;
+ }
+ &[type="submit"] {
+ width: 120px;
+ background: #2F3C5C;
+ color: #FFF;
+ text-align: center;
+ cursor: pointer;
+ margin: 0 0 0 20px;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ &:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }
+ }
+ }
+}
+
+.error_form {
+ -webkit-box-shadow: inset 0px 0px 0px 2px #E2495E;
+ -moz-box-shadow: inset 0px 0px 0px 2px #E2495E;
+ box-shadow: inset 0px 0px 0px 2px #E2495E;
+}
+
+.claim label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ font: normal 400 16px/50px 'metropolis-medium';
+ text-indent: 16px;
+}
+
+::-webkit-input-placeholder, ::-moz-placeholder, :-moz-placeholder, :-ms-input-placeholder {
+ color: #AAA;
+}
+
+/* --- JOIN --- */
+
+.join {
+ padding: 100px 0 0 0;
+ .boxes {
+ float: left;
+ width: 100%;
+ margin: 40px 0 0 0;
+ }
+ .box {
+ float: left;
+ width: 306px;
+ margin: 0 21px 0 0;
+ &:last-child {
+ margin: 0;
+ }
+ .image, .text {
+ position: relative;
+ float: left;
+ width: 100%;
+ height: 100%;
+ }
+ video {
+ float: left;
+ }
+ .image {
+ img {
+ width: 100%;
+ height: auto;
+ }
+ .to-play {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0);
+ z-index: 1;
+ -webkit-transition: background 0.4s;
+ transition: background 0.4s;
+ }
+ &:hover .to-play {
+ background: rgba(0, 0, 0, 0.5);
+ }
+ .to-play span {
+ opacity: 0;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 40px;
+ height: 40px;
+ background: url(../img/youtube/play@2x.png) 50% 50% no-repeat;
+ background-size: 30px;
+ -webkit-transform: translate(-50%, -40%);
+ transform: translate(-50%, -40%);
+ -webkit-transition: transform 0.4s, opacity 0.4s;
+ transition: transform 0.4s, opacity 0.4s;
+ }
+ &:hover .to-play span {
+ opacity: 1;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ }
+ }
+ .text {
+ margin: 20px 0 0 0;
+ p {
+ font: normal 400 18px/20px 'metropolis-semibold';
+ color: #2F3C5C;
+ + p {
+ font: normal 400 14px/20px 'metropolis-medium';
+ color: #AAA;
+ margin: 10px 0 0 0;
+ }
+ }
+ }
+ }
+}
+
+/* --- HOW --- */
+
+.how {
+ padding: 100px 0 0 0;
+ .steps {
+ position: relative;
+ float: left;
+ width: 100%;
+ height: 260px;
+ margin: 80px 0 0 0;
+ .path {
+ position: absolute;
+ top: -52px;
+ left: -60px;
+ width: 752px;
+ height: 287px;
+ background: url(../img/youtube/path@2x.png) 0 0 no-repeat;
+ background-size: 752px;
+ .journey {
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 287px;
+ background: url(../img/youtube/path-complete@2x.png) 0 0 no-repeat;
+ background-size: 752px;
+ }
+ }
+ }
+ .step {
+ position: absolute;
+ top: 0;
+ left: 0;
+ .circle {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 62px;
+ height: 62px;
+ border-radius: 50%;
+ background: #2F3C5C;
+ font: normal 400 24px/62px 'metropolis-semibold';
+ text-align: center;
+ color: #FFF;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -webkit-transition: background 0.4s;
+ transition: background 0.4s;
+ }
+ .text {
+ position: absolute;
+ top: 0;
+ left: 82px;
+ font: normal 400 18px/1.5 'metropolis-medium';
+ color: #2F3C5C;
+ -webkit-transition: color 0.4s;
+ transition: color 0.4s;
+ }
+ &.one .text {
+ width: 226px;
+ }
+ &.two {
+ top: 160px;
+ left: 164px;
+ .text {
+ width: 552px;
+ }
+ }
+ &.three {
+ top: 0;
+ left: 490px;
+ .text {
+ width: 390px;
+ }
+ }
+ &.enabled {
+ .circle {
+ background: #CCC;
+ }
+ .text {
+ color: #CCC;
+ }
+ }
+ }
+}
+
+/* --- REWARDS --- */
+
+.rewards {
+ padding: 40px 0 80px 0;
+ background: #FAFAFA;
+ .price {
+ float: left;
+ width: 100%;
+ margin: 40px 0;
+ h3 {
+ float: left;
+ width: auto;
+ font: normal 400 21px/30px 'metropolis-bold';
+ color: #2F3C5C;
+ }
+ p {
+ float: right;
+ width: auto;
+ background: url(../img/youtube/lbc@2x.png) 0 50% no-repeat;
+ background-size: 13px;
+ font: normal 400 14px/30px 'metropolis-semibold';
+ text-indent: 20px;
+ span {
+ font: normal 400 12px/30px 'metropolis-medium';
+ color: #AAA;
+ }
+ }
+ }
+ .table {
+ float: left;
+ width: 100%;
+ .head, .line {
+ float: left;
+ width: 100%;
+ }
+ .head {
+ height: 40px;
+ border-bottom: 1px solid #EEE;
+ p {
+ float: left;
+ width: 306px;
+ text-indent: 20px;
+ margin: 0 21px 0 0;
+ font: normal 400 16px/40px 'metropolis-semibold';
+ color: #2F3C5C;
+ }
+ }
+ .line p {
+ float: left;
+ width: 306px;
+ text-indent: 20px;
+ margin: 0 21px 0 0;
+ font: normal 400 16px/40px 'metropolis-semibold';
+ color: #2F3C5C;
+ }
+ .head p:last-child {
+ margin: 0;
+ }
+ .line {
+ p:last-child {
+ margin: 0;
+ }
+ height: 60px;
+ &:nth-child(odd) {
+ background: #F6F6F6;
+ }
+ p {
+ font: normal 400 16px/60px 'metropolis-medium';
+ span {
+ display: inline-block;
+ width: 13px;
+ height: 13px;
+ background: url(../img/youtube/lbc@2x.png) 0 50% no-repeat;
+ background-size: 13px;
+ }
+ i {
+ font: normal 400 10px/60px 'metropolis-medium';
+ }
+ }
+ }
+ }
+}
+
+/* --- SYNC --- */
+
+.sync {
+ padding: 80px 0 60px 0;
+ margin: 100px 0 0 0;
+ background: #FAFAFA;
+ .zigzag {
+ float: left;
+ width: 100%;
+ height: 40px;
+ background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
+ background-size: 72px;
+ }
+ h1 {
+ text-align: center;
+ + p {
+ text-align: center;
+ }
+ }
+ form {
+ float: left;
+ width: 100%;
+ margin: 60px 0 0 0;
+ }
+ .form-inner {
+ float: none;
+ width: 446px;
+ margin: 0 auto;
+ }
+ .block {
+ position: relative;
+ float: left;
+ margin-top: 10px;
+ }
+ .error {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ font: normal 400 14px/40px 'metropolis-medium';
+ color: #E2495E;
+ }
+ label {
+ display: block;
+ text-indent: 15px;
+ margin-bottom: 15px;
+ }
+ input {
+ float: left;
+ height: 50px;
+ border-radius: 25px;
+ font: normal 400 16px/50px 'metropolis-medium';
+ &[type="text"] {
+ width: 306px;
+ background: #FFF;
+ text-indent: 32px;
+ }
+ &[type="submit"] {
+ width: 120px;
+ background: #2F3C5C;
+ color: #FFF;
+ text-align: center;
+ cursor: pointer;
+ margin: 0 0 0 20px;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ &:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }&[type="checkbox"] {
+ height: 50px;
+ margin: 6px 8px 0 0;
+ border-radius: 0;
+ &[readonly] {
+ pointer-events: none;
+ }
+ }
+ }
+ }
+ .error {
+ font: normal 400 14px/40px 'metropolis-medium';
+ color: #E2495E;
+ }
+ button {
+ float: left;
+ height: 50px;
+ background: #2F3C5C;
+ border-radius: 25px;
+ padding: 0 20px;
+ font: normal 400 16px/50px 'metropolis-medium';
+ color: #FFF;
+ cursor: pointer;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ }
+ a {
+ color: #45B0AF;
+ }
+ button:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }
+
+}
+
+/* --- CONTACT --- */
+
+.contact {
+ padding: 80px 0 100px 0;
+ .v-card {
+ float: left;
+ width: 100%;
+ margin: 40px 0 0 0;
+ }
+ .photo {
+ float: left;
+ width: 82px;
+ margin: 0 24px 0 0;
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+ .text {
+ float: left;
+ width: 854px;
+ h3 {
+ font: normal 400 21px/30px 'metropolis-bold';
+ color: #2F3C5C;
+ }
+ p {
+ font: normal 400 18px/1.5 'metropolis-medium';
+ color: #AAA;
+ }
+ h3 + p {
+ font: normal 400 16px/20px 'metropolis-medium';
+ color: #AAA;
+ margin: 0 0 24px 0;
+ }
+ a {
+ float: left;
+ height: 50px;
+ background: #2F3C5C;
+ color: #FFF;
+ padding: 0 20px;
+ margin: 40px 0 0 0;
+ font: normal 400 16px/50px 'metropolis-medium';
+ text-decoration: none;
+ border-radius: 25px;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ &:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }
+ }
+ }
+}
+
+/* --- TO TOP --- */
+
+.to-top {
+ opacity: 0;
+ visibility: hidden;
+ position: fixed;
+ bottom: 100px;
+ right: 80px;
+ width: 62px;
+ height: 62px;
+ border-radius: 50%;
+ background: #DDD url(../img/youtube/top@2x.png) 50% 50% no-repeat;
+ background-size: 16px;
+ cursor: pointer;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
+ -webkit-transition: background 0.4s;
+ transition: background 0.4s;
+ &:hover {
+ background: #2F3C5C url(../img/youtube/top@2x.png) 50% 50% no-repeat;
+ background-size: 16px;
+ }
+ span {
+ position: absolute;
+ top: -24px;
+ left: 0;
+ width: 62px;
+ font: normal 400 14px/20px 'metropolis-bold';
+ text-align: center;
+ color: #CCC;
+ }
+}
+
+/* --- CHANNEL, SETTINGS --- */
+
+.channel {
+ padding: 80px 0;
+}
+
+.settings {
+ padding: 80px 0;
+ background: #F6F6F6;
+}
+
+.channel {
+ &.pad-top {
+ padding-top: 160px;
+ }
+ .zigzag {
+ float: left;
+ width: 100%;
+ height: 30px;
+ background: url(../img/youtube/zigzag@2x.png) 0 0 no-repeat;
+ background-size: 72px;
+ }
+}
+
+.settings .zigzag {
+ float: left;
+ width: 100%;
+ height: 30px;
+ background: url(../img/youtube/zigzag@2x.png) 0 0 no-repeat;
+ background-size: 72px;
+}
+
+.channel h1, .settings h1 {
+ font: normal 400 24px/30px 'metropolis-bold';
+ color: #2F3C5C;
+}
+
+.channel .block, .settings .block {
+ position: relative;
+ float: left;
+ width: 50%;
+ margin-top: 40px;
+ box-sizing: border-box;
+}
+
+.channel .block:not(:first-child) {
+ width: 25%;
+}
+
+.settings .block {
+ padding-right: 60px;
+ &.full {
+ width: 100%;
+ padding: 0;
+ font: normal 400 16px/30px 'metropolis-semibold';
+ color: #2F3C5C;
+ }
+}
+
+.channel {
+ .block {
+ p {
+ float: left;
+ width: 100%;
+ font: normal 400 13px/20px 'metropolis-medium';
+ color: #2F3C5C;
+ }
+ &.get-credits p {
+ font: normal 400 16px/1.5 'metropolis-semibold';
+ color: #2F3C5C;
+ }
+ p span {
+ float: left;
+ width: 100%;
+ font: normal 400 40px/40px 'metropolis-medium';
+ color: #2F3C5C;
+ margin-top: 8px;
+ }
+ i {
+ display: inline-block;
+ width: 24px;
+ height: 13px;
+ background: url(../img/youtube/lbc@2x.png) 50% 50% no-repeat;
+ background-size: 13px;
+ }
+ }
+ .error {
+ float: left;
+ width: 100%;
+ font: normal 400 18px/1.5 'metropolis-semibold';
+ color: #AAA;
+ margin: 0 0 40px 0;
+ span {
+ color: #45B0AF;
+ border-bottom: 1px solid #45B0AF;
+ cursor: pointer;
+ }
+ }
+ .confirmation-steps {
+ float: left;
+ width: 100%;
+ ul {
+ float: left;
+ width: 100%;
+ list-style: none;
+ padding: 0;
+ li {
+ position: relative;
+ float: left;
+ width: 33%;
+ span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+ background: #40C0A9;
+ border-radius: 50%;
+ font: normal 400 18px/48px sans-serif;
+ text-align: center;
+ color: #FFF;
+ }
+ &.disabled span {
+ background: #CCC;
+ color: #FFF;
+ }
+ p {
+ float: left;
+ width: 100%;
+ padding: 0 0 0 60px;
+ line-height: 48px;
+ box-sizing: border-box;
+ }
+ &.disabled p {
+ color: #CCC;
+ }
+ p + p {
+ font: normal 400 13px/20px 'metropolis-semibold';
+ color: #2F3C5C;
+ margin-top: 0;
+ }
+ a {
+ color: #45B0AF;
+ }
+ }
+ }
+ }
+}
+
+.settings {
+ form {
+ float: left;
+ width: 100%;
+ }
+ label {
+ float: left;
+ width: 100%;
+ font: normal 400 13px/20px 'metropolis-semibold';
+ color: #2F3C5C;
+ }
+ input {
+ float: left;
+ height: 50px;
+ border-radius: 25px;
+ font: normal 400 16px/50px 'metropolis-medium';
+ margin: 8px 0 0 0;
+ &[type="text"] {
+ width: 100%;
+ background: #FFF;
+ text-indent: 24px;
+ }
+ &[type="checkbox"] {
+ height: 16px;
+ margin: 6px 8px 0 0;
+ border-radius: 0;
+ &[readonly] {
+ pointer-events: none;
+ }
+ }
+ }
+ .error {
+ font: normal 400 14px/40px 'metropolis-medium';
+ color: #E2495E;
+ }
+ button {
+ float: left;
+ height: 50px;
+ background: #2F3C5C;
+ border-radius: 25px;
+ padding: 0 20px;
+ font: normal 400 16px/50px 'metropolis-medium';
+ color: #FFF;
+ cursor: pointer;
+ -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
+ transition: box-shadow 0.3s;
+ }
+ a {
+ color: #45B0AF;
+ }
+ button:hover {
+ -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+ }
+}
+
+.channel-settings header {
+ .logo {
+ background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
+ background-size: 126px;
+ }
+ .left a {
+ color: #125548;
+ }
+}
+
+/* ---------------------------
+ --> RESPONSIVE
+--------------------------- */
+@media only screen and (min-width: 1680px) {
+ .hero .title .overflow {
+ height: 90px;
+ h1 {
+ font: normal 400 90px/1 'metropolis-bold';
+ }
+ }
+ .section .inner {
+ width: 1120px;
+ }
+ .claim {
+ .form-inner {
+ width: 500px;
+ }
+ input[type="text"] {
+ width: 360px;
+ }
+ }
+ .join .box {
+ width: 360px;
+ margin: 0 20px 0 0;
+ }
+ .earnings .table {
+ .head p, .line p {
+ width: 360px;
+ margin: 0 20px 0 0;
+ }
+ }
+ .rewards .table {
+ .head p, .line p {
+ width: 360px;
+ margin: 0 20px 0 0;
+ }
+ }
+ .how .steps {
+ margin: 100px 0 0 60px;
+ }
+}
+
+@media only screen and (max-width: 1120px) {
+ header {
+ top: 20px;
+ padding: 0 48px;
+ .logo {
+ width: 110px;
+ background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
+ background-size: 110px;
+ }
+ }
+ .channel-settings header .logo {
+ background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
+ background-size: 110px;
+ }
+ header {
+ .left a {
+ font-size: 16px;
+ }
+ .right a {
+ width: 32px;
+ &.twitter {
+ background: url(../img/youtube/twitter@2x.png) 50% 50% no-repeat;
+ background-size: 19px;
+ }
+ &.facebook {
+ background: url(../img/social/facebook@2x.png) 50% 50% no-repeat;
+ background-size: 9px;
+ }
+ &.reddit {
+ background: url(../img/social/reddit@2x.png) 50% 50% no-repeat;
+ background-size: 22px;
+ }
+ &.github {
+ background: url(../img/social/github@2x.png) 50% 50% no-repeat;
+ background-size: 19px;
+ }
+ }
+ }
+ .hero .title {
+ .overflow {
+ height: 64px;
+ + .overflow {
+ margin-top: 0;
+ }
+ h1 {
+ font: normal 400 64px/1 'metropolis-bold';
+ }
+ }
+ p {
+ font: normal 400 18px/1.3 'metropolis-medium';
+ }
+ .button {
+ height: 50px;
+ padding: 0 20px;
+ margin: 32px 0 0 0;
+ font: normal 400 16px/50px 'metropolis-semibold';
+ border-radius: 25px;
+ }
+ }
+ .section {
+ .inner {
+ width: 900px;
+ }
+ h1 {
+ font-size: 26px;
+ + p {
+ font: normal 400 16px/1.5 'metropolis-medium';
+ }
+ }
+ }
+ .claim form {
+ margin: 50px 0 0 0;
+ }
+ .join {
+ padding: 80px 0 0 0;
+ .box {
+ width: 286px;
+ }
+ }
+ .rewards .table {
+ .head p, .line p {
+ width: 286px;
+ }
+ }
+ .contact .text {
+ width: 794px;
+ }
+}
+
+@media only screen and (max-width: 1024px) {
+ .section .inner {
+ width: 100%;
+ padding: 0 64px;
+ box-sizing: border-box;
+ }
+ .join .box {
+ width: 31%;
+ margin: 0 3.5% 0 0;
+ }
+ .rewards .table {
+ .head p, .line p {
+ width: 31%;
+ margin: 0 3.5% 0 0;
+ }
+ }
+ .how {
+ padding: 80px 0 0 0;
+ .steps {
+ margin: 24px 0 0 0;
+ height: auto;
+ .path {
+ display: none;
+ }
+ }
+ .step {
+ position: static;
+ float: left;
+ .circle, .text {
+ position: static;
+ float: left;
+ }
+ width: 100%;
+ margin: 24px 0 0 0;
+ &:first-child {
+ margin: 0;
+ }
+ &.enabled .circle {
+ width: 5%;
+ height: auto;
+ margin: 0;
+ background: none;
+ color: #CCC;
+ font: normal 400 18px/1.5 'metropolis-medium';
+ text-align: left;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ -webkit-transition: none;
+ transition: none;
+ }
+ &.one .text, &.two .text, &.three .text {
+ width: 95%;
+ }
+ &.enabled .text {
+ color: #2F3C5C;
+ }
+ }
+ }
+ .sync {
+ margin: 80px 0 0 0;
+ }
+ .rewards {
+ padding: 0 0 80px 0;
+ }
+ .contact {
+ .photo {
+ width: 8%;
+ margin: 0 2% 0 0;
+ }
+ .text {
+ width: 90%;
+ }
+ }
+ .to-top {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ header {
+ padding: 0 10%;
+ }
+ .channel-settings header {
+ padding: 0 64px;
+ }
+ header .logo {
+ width: 96px;
+ background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
+ background-size: 96px;
+ }
+ .channel-settings header .logo {
+ background: url(../img/youtube/lbry-dark@2x.png) 0 50% no-repeat;
+ background-size: 96px;
+ }
+ header {
+ .left {
+ width: 100%;
+ }
+ .right {
+ display: none;
+ }
+ }
+ .hero {
+ float: left;
+ height: auto;
+ padding: 200px 10% 80px 10%;
+ box-sizing: border-box;
+ .shape {
+ display: none;
+ }
+ .title {
+ position: static;
+ float: left;
+ width: 100%;
+ .overflow {
+ height: auto;
+ h1 {
+ position: static;
+ font-size: 48px;
+ }
+ }
+ .button {
+ display: none;
+ }
+ }
+ }
+ .section h1 {
+ font-size: 24px;
+ + p {
+ font-size: 15px;
+ }
+ }
+ .channel, .settings {
+ padding: 60px 0;
+ }
+ .channel h1, .settings h1 {
+ font: normal 400 21px/30px 'metropolis-bold';
+ color: #2F3C5C;
+ }
+ .channel .block p span {
+ font: normal 400 54px/54px 'metropolis-medium';
+ }
+ .settings {
+ .block.full {
+ font: normal 400 15px/30px 'metropolis-semibold';
+ }
+ button {
+ height: 40px;
+ border-radius: 20px;
+ font: normal 400 14px/40px 'metropolis-medium';
+ }
+ }
+ .claim {
+ padding: 60px 0;
+ .form-inner {
+ width: 436px;
+ }
+ input {
+ height: 40px;
+ border-radius: 20px;
+ font: normal 400 14px/40px 'metropolis-medium';
+ }
+ }
+ .settings input {
+ height: 40px;
+ border-radius: 20px;
+ font: normal 400 14px/40px 'metropolis-medium';
+ }
+ .claim {
+ input[type="submit"] {
+ width: 110px;
+ }
+ label {
+ font: normal 400 16px/40px 'metropolis-medium';
+ }
+ }
+ .join .box .text p {
+ font-size: 15px;
+ + p {
+ font: normal 400 13px/1.5 'metropolis-medium';
+ }
+ }
+ .how .step {
+ .text, &.enabled .circle {
+ font: normal 400 15px/1.5 'metropolis-medium';
+ }
+ }
+ .sync {
+ padding: 60px 0;
+ .button {
+ margin: 24px 0 40px 0;
+ a {
+ width: 110px;
+ height: 40px;
+ border-radius: 20px;
+ font: normal 400 15px/40px 'metropolis-medium';
+ }
+ }
+ }
+ .contact .text {
+ h3 {
+ font-size: 16px;
+ + p {
+ font: normal 400 13px/1 'metropolis-medium';
+ }
+ }
+ p {
+ font: normal 400 15px/1.5 'metropolis-medium';
+ }
+ a {
+ height: 40px;
+ margin: 24px 0 0 0;
+ font: normal 400 15px/40px 'metropolis-medium';
+ border-radius: 20px;
+ }
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 767px) and (orientation: landscape) {
+ .channel .confirmation-steps ul li {
+ width: 100%;
+ margin-top: 20px;
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 767px) and (orientation: portrait) {
+ header {
+ padding: 0 10%;
+ .logo {
+ width: 100px;
+ background: url(../img/youtube/lbry@2x.png) 0 50% no-repeat;
+ background-size: 100px;
+ }
+ .left {
+ width: 100%;
+ a {
+ float: right;
+ }
+ }
+ .right {
+ display: none;
+ }
+ }
+ .hero {
+ float: left;
+ height: auto;
+ padding: 200px 10% 80px 10%;
+ box-sizing: border-box;
+ .shape {
+ display: none;
+ }
+ .title {
+ position: static;
+ float: left;
+ width: 100%;
+ .overflow {
+ height: auto;
+ h1 {
+ position: static;
+ font-size: 48px;
+ }
+ }
+ p {
+ font-size: 18px;
+ }
+ .button {
+ display: none;
+ }
+ }
+ }
+ .section {
+ .inner {
+ padding: 0 36px;
+ }
+ h1 {
+ font: normal 400 24px/1.2 'metropolis-bold';
+ text-align: center;
+ + p {
+ font: normal 400 16px/1.5 'metropolis-medium';
+ text-align: center;
+ }
+ }
+ }
+ .claim {
+ .form-inner, .block {
+ width: 100%;
+ }
+ input {
+ float: none;
+ &[type="text"] {
+ width: 100%;
+ }
+ &[type="submit"] {
+ display: block;
+ margin: 24px auto 0 auto;
+ width: 120px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ }
+ }
+ }
+ .join {
+ padding: 60px 0 0 0;
+ .box {
+ width: 100%;
+ margin: 24px 0 0 0;
+ &:last-child {
+ width: 100%;
+ margin: 24px 0 0 0;
+ }
+ &:first-child {
+ margin: 0;
+ }
+ .text {
+ margin: 12px 0 0 0;
+ p {
+ font-size: 18px;
+ + p {
+ margin: 4px 0 0 0;
+ }
+ }
+ }
+ }
+ }
+ .rewards {
+ .price {
+ h3 {
+ width: 100%;
+ text-align: center;
+ }
+ p {
+ width: 100%;
+ text-align: center;
+ background: none;
+ text-indent: 0;
+ }
+ }
+ .table {
+ .head p, .line p {
+ text-indent: 10px;
+ font-size: 13px;
+ }
+ }
+ }
+ .contact {
+ padding: 60px 0 100px 0;
+ .photo {
+ width: 30%;
+ margin: 0 35%;
+ }
+ .text {
+ width: 100%;
+ text-align: center;
+ a {
+ width: 40%;
+ margin: 20px 30% 0 30%;
+ box-sizing: border-box;
+ }
+ }
+ }
+ .how .step {
+ &.enabled .circle {
+ width: 10%;
+ font-size: 20px;
+ }
+ &.one .text, &.two .text, &.three .text {
+ width: 90%;
+ }
+ }
+ .channel-settings header {
+ padding: 0 10%;
+ }
+ .channel {
+ &.pad-top {
+ padding-top: 140px;
+ }
+ .block {
+ width: 100%;
+ }
+ }
+ .settings .block {
+ width: 100%;
+ }
+ .channel .zigzag, .settings .zigzag {
+ background: url(../img/youtube/zigzag@2x.png) 50% 0 no-repeat;
+ background-size: 72px;
+ }
+ .channel .block p {
+ text-align: center;
+ }
+ .settings .block {
+ padding-right: 0;
+ &.full {
+ line-height: 1.3;
+ }
+ }
+ .channel .block.get-credits p {
+ font-size: 14px;
+ }
+ .settings button {
+ float: none;
+ display: block;
+ width: 180px;
+ margin: 0 auto;
+ padding: 0;
+ text-align: center;
+ }
+ .channel {
+ .confirmation-steps ul li {
+ width: 100%;
+ margin-top: 20px;
+ }
+ .block:not(:first-child) {
+ width: 100%;
+ }
+ .error {
+ font-size: 14px;
+ text-align: center;
+ }
+ }
+}
\ No newline at end of file