diff --git a/view/template/acquisition/youtube.php b/view/template/acquisition/youtube.php index bde9f11e..08c498fa 100644 --- a/view/template/acquisition/youtube.php +++ b/view/template/acquisition/youtube.php @@ -34,7 +34,6 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru

Content Freedom.

-

Put your content on the blockchain and earn rewards.

Claim Your LBRY Channel
diff --git a/view/template/acquisition/youtube_status.php b/view/template/acquisition/youtube_status.php index 1ade1c8d..12cc7f03 100644 --- a/view/template/acquisition/youtube_status.php +++ b/view/template/acquisition/youtube_status.php @@ -11,51 +11,58 @@
+ +
Your email address is set as xxx@plusgoogle.com.
If this is not your email address, please change it below.
+

-

The Steps

- - - -
Your email address is set as xxx@plusgoogle.com. If this is not your email address, please change it below.
- -
-
-

Your Sync Status
- -

-
-
-

Subscribers
- -

-
-
-

Videos
- -

-
-
-

Expected Rewards
- -

-
+
+ +
+ +
+
+

Your Sync Status
+ + + +

+
+
+

Subscribers
+ +

+
+
+

Videos
+ +

+
+
+

Expected Rewards
+ +

+
+
diff --git a/web/css/yt2.css b/web/css/yt2.css index ed1c9587..95e0d59a 100644 --- a/web/css/yt2.css +++ b/web/css/yt2.css @@ -42,6 +42,7 @@ html { padding: 0; margin: 0; font: normal 400 16px/1.5 'metropolis-bold'; + color: #2F3C5C; } img { display: block; @@ -222,7 +223,7 @@ header .right a.github { height: 80px; } .hero .title .overflow + .overflow { - margin: -10px 0 20px 0; + margin: -10px 0 0 0; } .hero .title .overflow h1 { position: absolute; @@ -233,6 +234,7 @@ header .right a.github { float: left; width: 100%; font: normal 400 21px/1.2 'metropolis-semibold'; + margin-top: 20px; color: #FFF; } .hero .title .button { @@ -806,6 +808,67 @@ header .right a.github { 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%; @@ -854,6 +917,9 @@ header .right a.github { 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); @@ -867,6 +933,12 @@ header .right a.github { color: #125548; } + + + + + + /* --------------------------- --> RESPONSIVE --------------------------- */ @@ -1182,6 +1254,12 @@ header .right a.github { 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%; @@ -1349,4 +1427,15 @@ header .right a.github { 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; + } }