mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Mobile styling.
This commit is contained in:
Samuel Clay
parent
9b1dbdbacc
commit
7fc0841ae2
2 changed files with 189 additions and 87 deletions
|
|
@ -58,8 +58,9 @@ body {
|
|||
background: #ebedee url('/../../../media/img/circular/background.png?1358878506') repeat 0 0;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
color: #333333;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -149,7 +150,7 @@ blockquote {
|
|||
opacity: 0.0;
|
||||
height: 60px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-watermark-logo {
|
||||
height: 40px;
|
||||
margin: 10px auto;
|
||||
|
|
@ -180,6 +181,9 @@ blockquote {
|
|||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.NB-blue-button:hover {
|
||||
border: 1px solid #3573a5;
|
||||
|
|
@ -200,9 +204,10 @@ blockquote {
|
|||
-moz-box-shadow: inset 0px 0px 10px #1f74b8;
|
||||
box-shadow: inset 0px 0px 10px #1f74b8;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-blue-button {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -227,6 +232,9 @@ blockquote {
|
|||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.NB-grey-button:hover {
|
||||
border: 1px solid #ababab;
|
||||
|
|
@ -249,9 +257,10 @@ blockquote {
|
|||
box-shadow: inset 0px 0px 10px #c1c1c1;
|
||||
color: #333333;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-grey-button {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +281,7 @@ blockquote {
|
|||
height: 44px;
|
||||
bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
|
|
@ -286,7 +295,7 @@ blockquote {
|
|||
.NB-header .NB-header-tabs {
|
||||
margin: 0 70px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header .NB-header-tabs {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
|
@ -313,7 +322,7 @@ blockquote {
|
|||
.NB-header .NB-header-tabs .NB-header-tab:first-child {
|
||||
border-left: 1px solid #cdcdcd;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header .NB-header-tabs .NB-header-tab {
|
||||
height: 60px;
|
||||
font-size: 11px;
|
||||
|
|
@ -339,7 +348,7 @@ blockquote {
|
|||
display: inline-block;
|
||||
line-height: 44px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header .NB-header-tabs .NB-header-tab div.NB-tab-inner {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
|
@ -349,7 +358,7 @@ blockquote {
|
|||
margin-right: -8px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header .NB-header-tabs .NB-header-tab img.NB-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -369,7 +378,7 @@ blockquote {
|
|||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-header .NB-header-tabs .NB-header-tab img,
|
||||
.NB-header .NB-header-tabs .NB-header-tab .NB-icon {
|
||||
float: none;
|
||||
|
|
@ -414,7 +423,7 @@ blockquote {
|
|||
padding: 12px 0 18px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-banner {
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
|
|
@ -439,7 +448,7 @@ blockquote {
|
|||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
@media all and (max-width: 580px) {
|
||||
.NB-banner .NB-title-photo img {
|
||||
max-width: 72px;
|
||||
max-height: 72px;
|
||||
|
|
@ -486,15 +495,16 @@ blockquote {
|
|||
}
|
||||
.NB-banner .NB-button-follow,
|
||||
.NB-banner .NB-button-following {
|
||||
width: 108px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
height: auto;
|
||||
}
|
||||
.NB-banner .NB-button-follow {
|
||||
padding: 2px 0;
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-banner .NB-button-follow,
|
||||
.NB-banner .NB-button-following {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.NB-banner .NB-button-following {
|
||||
padding: 2px 0;
|
||||
.NB-banner .NB-button-follow, .NB-banner .NB-button-following {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* ================ */
|
||||
|
|
@ -543,7 +553,7 @@ blockquote {
|
|||
position: relative;
|
||||
/* contains all children */
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-story-inner {
|
||||
padding: 12px 12px 15px;
|
||||
}
|
||||
|
|
@ -555,7 +565,7 @@ blockquote {
|
|||
text-decoration: none;
|
||||
color: #333333;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-story-title .NB-story-title-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -568,7 +578,7 @@ blockquote {
|
|||
font-size: 21px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-story-author {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -580,7 +590,7 @@ blockquote {
|
|||
display: block;
|
||||
margin: 5px 0 8px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-story-metadata {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -595,7 +605,7 @@ blockquote {
|
|||
.NB-story .NB-feed .NB-feed-title {
|
||||
float: left;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-feed {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -605,7 +615,7 @@ blockquote {
|
|||
color: gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story .NB-feed a {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
@ -664,7 +674,7 @@ blockquote {
|
|||
padding: 0 12px;
|
||||
font-size: 24px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-content-wrapper .NB-story-content-expander .NB-story-content-expander-pages {
|
||||
padding: 0 4px;
|
||||
font-size: 16px;
|
||||
|
|
@ -678,7 +688,7 @@ blockquote {
|
|||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-content {
|
||||
font-size: 12px;
|
||||
line-height: 160%;
|
||||
|
|
@ -707,7 +717,7 @@ blockquote {
|
|||
line-height: 16px;
|
||||
float: right;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-shares-container {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
|
|
@ -734,7 +744,7 @@ blockquote {
|
|||
float: left;
|
||||
margin: 2px 1px 0 2px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-shares-container .NB-user-avatar {
|
||||
margin: 2px 3px 0 0px;
|
||||
}
|
||||
|
|
@ -757,7 +767,7 @@ blockquote {
|
|||
padding: 0 20px;
|
||||
border-top: 0;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container {
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
|
|
@ -779,7 +789,7 @@ blockquote {
|
|||
border-radius: 3px / 3px;
|
||||
/* @include single-box-shadow; gets in the way of transparent PNGs */
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-user-avatar img,
|
||||
.NB-story-comments-container img.NB-user-avatar {
|
||||
height: 24px;
|
||||
|
|
@ -794,7 +804,7 @@ blockquote {
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-user-avatar.NB-story-comment-reshare img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
|
@ -808,7 +818,7 @@ blockquote {
|
|||
position: relative;
|
||||
min-height: 32px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment {
|
||||
padding: 10px 0 12px 34px;
|
||||
}
|
||||
|
|
@ -825,7 +835,7 @@ blockquote {
|
|||
color: gray;
|
||||
text-shadow: 0px 1px 1px white;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment .NB-story-comment-date {
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
|
|
@ -838,7 +848,7 @@ blockquote {
|
|||
text-transform: uppercase;
|
||||
text-shadow: 0px 1px 1px white;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment .NB-story-comment-location {
|
||||
font-size: 10px;
|
||||
padding-top: 4px;
|
||||
|
|
@ -849,6 +859,12 @@ blockquote {
|
|||
line-height: 18px;
|
||||
clear: both;
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment .NB-story-comment-content {
|
||||
padding-top: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment .NB-story-comment-reshares .NB-user-avatar img {
|
||||
top: 15px;
|
||||
left: 12px;
|
||||
|
|
@ -856,7 +872,7 @@ blockquote {
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment .NB-story-comment-reshares .NB-user-avatar img {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -867,11 +883,12 @@ blockquote {
|
|||
border-top: 1px solid #bdbdbd;
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply {
|
||||
margin-top: 6px;
|
||||
padding: 6px 0 0px 32px;
|
||||
padding: 12px 0 0px 32px;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-reply .NB-story-comment-reply-content {
|
||||
|
|
@ -879,6 +896,12 @@ blockquote {
|
|||
line-height: 18px;
|
||||
clear: both;
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply .NB-story-comment-reply-content {
|
||||
padding-top: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-button {
|
||||
margin-top: -6px;
|
||||
padding: 4px 6px;
|
||||
|
|
@ -898,7 +921,7 @@ blockquote {
|
|||
line-height: 10px;
|
||||
font-size: 9px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-button .NB-story-comment-button-wrapper {
|
||||
margin-top: 2px;
|
||||
padding-top: 1px;
|
||||
|
|
@ -943,6 +966,11 @@ blockquote {
|
|||
.NB-story-comments-container .NB-story-comment-reply-form .NB-story-comment-reply-username {
|
||||
margin: 12px 8px 6px 0;
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-story-comment-reply-username {
|
||||
margin: 6px 6px 6px 0;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-story-comment-reply-comments {
|
||||
margin: 6px 8px 4px 0;
|
||||
width: 50%;
|
||||
|
|
@ -951,6 +979,12 @@ blockquote {
|
|||
font-size: 12px;
|
||||
height: 20px;
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-story-comment-reply-comments {
|
||||
clear: both;
|
||||
margin: 4px 4px 4px 0;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button {
|
||||
float: left;
|
||||
margin: 4px 4px 0 0;
|
||||
|
|
@ -974,6 +1008,9 @@ blockquote {
|
|||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button:hover {
|
||||
border: 1px solid #ababab;
|
||||
|
|
@ -996,9 +1033,15 @@ blockquote {
|
|||
box-shadow: inset 0px 0px 10px #c1c1c1;
|
||||
color: #333333;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button:last-child {
|
||||
|
|
@ -1037,6 +1080,9 @@ blockquote {
|
|||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save:hover {
|
||||
border: 1px solid #ababab;
|
||||
|
|
@ -1059,9 +1105,10 @@ blockquote {
|
|||
box-shadow: inset 0px 0px 10px #c1c1c1;
|
||||
color: #333333;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-delete {
|
||||
|
|
@ -1265,6 +1312,15 @@ footer {
|
|||
line-height: 140%;
|
||||
text-transform: none;
|
||||
}
|
||||
@media screen and (max-width: 580px) {
|
||||
.popover .arrow {
|
||||
left: 88% !important;
|
||||
}
|
||||
.popover {
|
||||
left: inherit !important;
|
||||
right: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.NB-switch-login-button {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $border-color-active: #9D9D9D;
|
|||
$title-font-size: 21px;
|
||||
$small-title-font-size: 16px;
|
||||
$small-font-size: 14px;
|
||||
$small-iphone-font-size: 14px;
|
||||
$small-iphone-font-size: 12px;
|
||||
$smallest-font-size: 12px;
|
||||
$smallest-iphone-font-size: 11px;
|
||||
$tiny-font-size: 11px;
|
||||
|
|
@ -54,7 +54,11 @@ $default-box-shadow-blur: 1px;
|
|||
padding: 4px 12px;
|
||||
font-size: $small-font-size;
|
||||
font-weight: normal;
|
||||
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $border-color-hover;
|
||||
color: $grey-text-color;
|
||||
|
|
@ -67,7 +71,8 @@ $default-box-shadow-blur: 1px;
|
|||
@include single-box-shadow(#c1c1c1, 0px, 0px, 10px, false, true);
|
||||
color: $text-color;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding: 2px 6px;
|
||||
font-size: $small-iphone-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +90,10 @@ $default-box-shadow-blur: 1px;
|
|||
font-size: $small-font-size;
|
||||
font-weight: normal;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #3573A5;
|
||||
|
|
@ -96,7 +105,8 @@ $default-box-shadow-blur: 1px;
|
|||
@include background-image(linear-gradient(#4d98d2, #4d98d2));
|
||||
@include single-box-shadow(#1f74b8, 0px, 0px, 10px, false, true);
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding: 2px 6px;
|
||||
font-size: $small-iphone-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -109,8 +119,9 @@ body {
|
|||
background: #ebedee image-url('background.png') repeat 0 0;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
color: $text-color;
|
||||
-webkit-text-size-adjust: none;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -204,7 +215,7 @@ blockquote {
|
|||
opacity: 0.0;
|
||||
height: 60px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
height: 40px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
|
@ -233,7 +244,7 @@ blockquote {
|
|||
height: 44px;
|
||||
bottom: 0;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
}
|
||||
|
|
@ -247,7 +258,7 @@ blockquote {
|
|||
.NB-header-tabs {
|
||||
margin: 0 70px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -273,7 +284,7 @@ blockquote {
|
|||
border-left: 1px solid #cdcdcd;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
height: 60px;
|
||||
font-size: $smallest-iphone-font-size;
|
||||
|
||||
|
|
@ -304,7 +315,7 @@ blockquote {
|
|||
display: inline-block;
|
||||
line-height: 44px;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
|
@ -314,7 +325,7 @@ blockquote {
|
|||
margin-right: -8px;
|
||||
margin-left: 4px;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -332,7 +343,7 @@ blockquote {
|
|||
width: 17px;
|
||||
height: 17px;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 10px auto 0;
|
||||
|
|
@ -394,7 +405,7 @@ blockquote {
|
|||
padding: 12px 0 18px 0;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -419,7 +430,7 @@ blockquote {
|
|||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
@media all and (max-width: 580px) {
|
||||
.NB-title-photo img {
|
||||
max-width: 72px;
|
||||
max-height: 72px;
|
||||
|
|
@ -466,15 +477,14 @@ blockquote {
|
|||
}
|
||||
.NB-button-follow,
|
||||
.NB-button-following {
|
||||
width: 108px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
height: auto;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.NB-button-follow {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.NB-button-following {
|
||||
padding: 2px 0;
|
||||
.NB-button-follow, .NB-button-following {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -528,7 +538,7 @@ blockquote {
|
|||
overflow: hidden;
|
||||
position: relative; /* contains all children */
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
padding: 12px 12px 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -541,7 +551,7 @@ blockquote {
|
|||
text-decoration: none;
|
||||
color: $text-color;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
font-size: $small-title-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -557,7 +567,7 @@ blockquote {
|
|||
font-size: $title-font-size;
|
||||
white-space: nowrap;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
font-size: $small-title-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -569,7 +579,7 @@ blockquote {
|
|||
display: block;
|
||||
margin: 5px 0 8px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
font-size: $smallest-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -586,7 +596,7 @@ blockquote {
|
|||
}
|
||||
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
|
@ -595,7 +605,7 @@ blockquote {
|
|||
color: $light-text-color;
|
||||
font-size: $smallest-font-size;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
font-size: $smallest-iphone-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -661,7 +671,7 @@ blockquote {
|
|||
padding: 0 12px;
|
||||
font-size: 24px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
padding: 0 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -676,7 +686,7 @@ blockquote {
|
|||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
font-size: $smallest-font-size;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
|
@ -713,7 +723,7 @@ blockquote {
|
|||
line-height: 16px;
|
||||
float: right;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
text-align: left;
|
||||
font-size: $smallest-iphone-font-size;
|
||||
}
|
||||
|
|
@ -742,7 +752,7 @@ blockquote {
|
|||
float: left;
|
||||
margin: 2px 1px 0 2px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
margin: 2px 3px 0 0px;
|
||||
}
|
||||
|
||||
|
|
@ -766,7 +776,7 @@ blockquote {
|
|||
padding: 0 20px;
|
||||
border-top: 0;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
font-size: $smallest-iphone-font-size;
|
||||
|
|
@ -786,7 +796,7 @@ blockquote {
|
|||
@include border-radius(3px, 3px);
|
||||
/* @include single-box-shadow; gets in the way of transparent PNGs */
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 12px;
|
||||
|
|
@ -801,7 +811,7 @@ blockquote {
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 8px;
|
||||
|
|
@ -815,7 +825,7 @@ blockquote {
|
|||
position: relative;
|
||||
min-height: 32px;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding: 10px 0 12px 34px;
|
||||
}
|
||||
|
||||
|
|
@ -831,7 +841,7 @@ blockquote {
|
|||
font-size: $smallest-font-size;
|
||||
color: $light-text-color;
|
||||
@include single-text-shadow;
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding-top: 1px;
|
||||
font-size: $smallest-iphone-font-size;
|
||||
}
|
||||
|
|
@ -843,7 +853,7 @@ blockquote {
|
|||
padding-top: 10px;
|
||||
text-transform: uppercase;
|
||||
@include single-text-shadow;
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
font-size: $tiny-iphone-font-size;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
|
@ -853,6 +863,11 @@ blockquote {
|
|||
padding-top: 4px;
|
||||
line-height: 18px;
|
||||
clear: both;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
padding-top: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.NB-story-comment-reshares .NB-user-avatar img {
|
||||
|
|
@ -862,7 +877,7 @@ blockquote {
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -874,17 +889,24 @@ blockquote {
|
|||
border-top: 1px solid $border-color;
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and ( max-width: 580px) {
|
||||
margin-top: 6px;
|
||||
padding: 6px 0 0px 32px
|
||||
padding: 12px 0 0px 32px;
|
||||
}
|
||||
|
||||
.NB-story-comment-reply-content {
|
||||
padding-top: 4px;
|
||||
line-height: 18px;
|
||||
clear: both;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
padding-top: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.NB-story-comment-button {
|
||||
|
|
@ -905,7 +927,7 @@ blockquote {
|
|||
padding: 2px 4px 1px;
|
||||
line-height: 10px;
|
||||
font-size: 9px;
|
||||
@media screen and ( max-width: 480px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
margin-top: 2px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
|
@ -954,6 +976,10 @@ blockquote {
|
|||
|
||||
.NB-story-comment-reply-username {
|
||||
margin: 12px 8px 6px 0;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
margin: 6px 6px 6px 0;
|
||||
}
|
||||
}
|
||||
.NB-story-comment-reply-comments {
|
||||
margin: 6px 8px 4px 0;
|
||||
|
|
@ -962,12 +988,21 @@ blockquote {
|
|||
float: left;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
clear: both;
|
||||
margin: 4px 4px 4px 0;
|
||||
}
|
||||
}
|
||||
.NB-modal-submit-button {
|
||||
float: left;
|
||||
margin: 4px 4px 0 0;
|
||||
@include NB-default-button;
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -1214,6 +1249,17 @@ footer {
|
|||
line-height: 140%;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
.arrow {
|
||||
left: 88% !important;
|
||||
}
|
||||
|
||||
& {
|
||||
left: inherit !important;
|
||||
right: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue