Skip to content

Instantly share code, notes, and snippets.

@ccovey

ccovey/Comments LESS

Last active August 29, 2015 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ccovey/f146a2c71f9e77ca2a5d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ccovey/f146a2c71f9e77ca2a5d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Comments LESS
@import "../../bootstrap/less/mixins.less";
@import "../../bootstrap/less/variables.less";
@import "../../bootstrap/less/tooltip.less";
/**
* Style for hiding honeypot input field.
* Name is weird so bots can't detect the honeypot field through common honeypot field names.
*/
.twinkyness {
border: 0;
background: transparent;
font-size: 0;
margin: 0;
padding: 0;
line-height: 0;
position: absolute;
top: -100%;
left: -100%;
}
.user-photo {
.border-radius(50%);
}
.feed-title {
#font .four-of-a-kind;
@media screen and (max-width: 826px) {
width: 100%;
max-width: 654px;
margin: 0 auto;
}
@media screen and (max-width: 580px) {
#font .full-house;
}
@media screen and (max-width: 480px) {
#font .straight;
}
@media screen and (max-width: 390px) {
#font .three-of-a-kind;
}
}
.feed-title-link {
.inline-block();
border-bottom: 2px solid;
line-height: 20px;
color: @logo-blue;
}
.feed-empty {
padding: 18px 0 80px;
text-align: center;
color: @oe-grey;
> h2 {
padding-bottom: 16px;
#font .heavy;
#font .straight;
}
> p {
margin: 0;
padding-bottom: 16px;
#font .three-of-a-kind;
}
}
.feed-empty-nav {
.box-sizing(border-box);
.not-really-a-list();
.clearfix();
> li {
float: left;
width: 50%;
@media screen and (max-width: 580px) {
float: none;
width: 100%;
margin-bottom: 16px;
}
}
}
.feed-item {
position: relative;
margin-bottom: 30px;
a.at-mention,
a.post-link {
color: @logo-blue;
}
}
.feed-post-cta {
padding: 0 16px;
margin-bottom: 24px;
background: #fff;
.boxShadow(0px, 3px, 5px, 0px, @pitythefool-grey);
> a {
display: block;
#font .heavy;
#font .three-of-a-kind;
color: @logo-blue;
line-height: 40px;
position: relative;
> i {
position: absolute;
top: 0;
right: 0;
line-height: 46px;
}
}
&.is-inactive {
.opacity(50);
pointer-events: none;
}
}
.feed-item-bottom,
.feed-item-notification {
position: relative;
.box-sizing(border-box);
background: #fff;
}
.feed-item-friend-member-level-change {
position: relative;
.box-sizing(border-box);
}
.feed-item-notification {
height: 78px;
border: 1px solid @chads-skin;
&.feed-item-new {
border: solid 1px @notification-green;
}
.feed-item-body {
padding: 20px;
}
}
.feed-item-notification-sellable-inventory-available {
&.feed-item-notification {
.feed-item-body {
padding: 0px;
}
}
}
.is-moderated {
.opacity(25);
}
.feed-item-friend-love-group,
.feed-item-comment {
.arrow-icon > i {
font-size: 12px;
color: @pitythefool-grey;
}
}
.feed-item-bottom {
border: 1px solid @chads-skin;
background-color: @even-lighter-grey;
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
}
}
.feed-item-date {
float: right;
margin-right: 10px;
color: @pitythefool-grey;
}
.feed-item-inline-modules {
.clearfix();
position: absolute;
top: 0;
right: 0;
}
.feed-item-inline-smile {
.box-sizing(border-box);
float: right;
padding-right: 20px;
@media screen and (max-width: 500px) {
padding-right: 10px;
}
}
.feed-item-inline-share {
cursor: pointer;
.box-sizing(border-box);
float: right;
display: block;
margin: 20px 10px 0 0;
background: #fcfcfc;
color: #808080;
height: 32px;
text-align: center;
border: #ececec solid 1px;
pointer-events: all;
.transition(all 0.1s ease-in-out);
> i {
display: block;
margin: 3px 7px 0 8px;
font-size: 20px;
}
&:hover {
color: @logo-blue;
border-color: @logo-blue;
}
@media screen and (max-width: 500px) {
right: 75px;
}
}
.feed-item-inline-follow {
position: absolute;
top: 20px;
right: 0;
padding-right: 20px;
}
.rounded-portrait-container {
.box-sizing(border-box);
display: inline-block;
border: #fff solid 3px;
.border-radius(50%);
vertical-align: middle;
}
.feed-post-rounded-portrait {
width: 40px;
.border-radius(50%);
}
.feed-item-loved-by {
#font .two-pair;
#font .normal;
color: @pitythefool-grey;
border-bottom: 1px solid @really-light-grey;
line-height: 20px;
a {
color: @logo-blue;
#font .heavy;
}
}
.feed-item-description {
position: relative;
.box-sizing(border-box);
float: left;
background-color: #fff;
padding: 20px 0px 20px 20px;
width: 100%;
.feed-item-description-sellable-price-clearance {
color: @clearance-red;
}
.feed-item-smile {
color: #999;
}
.osky-logo, .notification-logo, .member-rewards-img {
width: 40px;
float: left;
.box-sizing(border-box);
img {
width: 40px;
}
}
.feed-item-notification & {
padding: 20px 20px 0 20px;
}
svg {
width: 41px; // Weird FireFox bug that cuts off 1px of an svg if the height and width are equal
height: 40px;
@media screen and (max-width: 480px) {
width: 32px;
height: 32px;
}
}
> a {
display: block;
position: absolute;
width: 40px;
height: 40px;
@media screen and (max-width: 580px) {
height: 40px;
}
@media screen and (max-width: 480px) {
height: 32px;
}
> img {
display: block;
.box-sizing(border-box);
width: 40px;
height: 40px;
@media screen and (max-width: 480px) {
width: 32px;
height: 32px;
}
}
}
a {
color: @oe-grey;
&.feed-item-description-name,
&.feed-item-link {
color: @logo-blue;
#font .heavy;
}
}
> span {
display: block;
width: 90%;
vertical-align: middle;
.box-sizing(border-box);
padding: 0 32px 0 60px;
#font .two-pair;
#font .normal;
line-height: 17px;
@media screen and (max-width: 500px) {
#font .two-pair;
}
.feed-item-impersonal & {
padding-left: 24px;
}
.feed-item-description-sellable-price-clearance {
i {
color: @clearance-red;
}
}
i {
font-size: 10px;
color: @pitythefool-grey;
}
@media screen and (max-width: 580px) {
padding-left: 52px;
line-height: 25px;
}
@media screen and (max-width: 480px) {
padding-left: 48px;
line-height: 17px;
}
> a {
> img {
vertical-align: middle;
margin-left: 5px;
.box-sizing(border-box);
width: 40px;
@media screen and (max-width: 480px) {
width: 32px;
}
}
}
}
.feed-item-under-description {
a {
color: #999;
}
font-size: 11px;
color: #999;
@media screen and (max-width: 500px) {
#font .pair;
}
}
.feed-item-notification-sellable-inventory-available & {
float: none;
width: 100%;
}
}
.feed-item-notification-description {
width: 100%;
color: #999;
.notification-link {
#font .heavy();
color: @logo-blue;
}
> span {
@media screen and (max-width: 480px) {
padding-left: 30px;
}
}
.padding-one-image {
padding: 0 90px 0 60px;
@media screen and (max-width: 480px) {
padding: 0 50px 0 30px;
}
}
.padding-two-image {
padding: 0 155px 0 60px;
}
.feed-item-notification-image {
position: absolute;
right: 0;
top: 0;
padding: 4px;
@media screen and (max-width: 480px) {
padding: 20px 4px;
}
img {
width: 70px;
@media screen and (max-width: 480px) {
width: 40px;
}
}
}
i {
color: @notification-green;
font-size: 35px;
@media screen and (max-width: 500px) {
font-size: 28px;
}
}
}
.feed-item-body {
position: relative;
.box-sizing(border-box);
}
.feed-video {
.box-sizing(border-box);
width: 100%;
position: absolute;
top: 0;
padding: 0;
> iframe {
width: 100%;
}
}
.feed-video-placeholder {
width: 100%;
}
.feed-video-play {
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 45px;
width: 45px;
margin-top: -22px;
margin-left: -22px;
background: url('../img/video-play-icon.png') 0 0 transparent;
}
.vine-embed,
.instagram-embed,
.vimeo-embed {
width: 100%;
min-height: 480px;
@media screen and (max-width: 600px) {
min-height: 600px;
}
@media screen and (max-width: 480px) {
min-height: 330px;
}
img {
width: 100%;
}
}
.feed-images {
position: relative;
overflow: hidden;
border-right: 1px solid @chads-skin;
border-left: 1px solid @chads-skin;
border-top: 1px solid @chads-skin;
.clearfix();
img {
display: block;
margin: 0 auto;
}
}
.feed-image {
position: relative;
.box-sizing(border-box);
}
.feed-image-full {
width: 100%;
padding-bottom: 100%;
&.video-type-youtube {
padding-bottom: 75%;
}
&.video-type-vine, &.video-type-vimeo, &.video-type-instagram {
padding-bottom: 0%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.feed-image-half {
width: 100%;
img {
width: 50%;
}
}
.feed-image-thirds {
width: 33.33%;
float: left;
img {
width: 100%;
}
}
.feed-image-inner {
position: relative;
margin: 0;
}
.feed-image-primary {
width: 66%;
}
.feed-image-secondary {
width: 34%;
padding-left: 12px;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
.feed-image-inner {
margin: 0;
}
}
.feed-quote {
position: relative;
margin: 0 0 16px 0;
background: #fff;
border: 1px solid @chads-skin;
.border-radius(3px);
padding: 16px;
.opacity(90);
&:after, &:before {
position: absolute;
height: 0;
width: 0;
left: 40px;
top: 100%;
border: solid transparent;
content: " ";
border-color: rgba(255, 255, 255, 0);
}
&:after {
border-top-color: #fff;
border-width: 8px;
margin-left: -5px;
pointer-events: none;
}
&:before {
border-top-color: @chads-skin;
border-width: 9px;
margin-left: -6px;
pointer-events: none;
}
.feed-item-endorsement & {
&:after, &:before {
position: absolute;
height: 0;
width: 0;
left: 40px;
top: -15px;
bottom: 100%;
border: solid transparent;
content: " ";
border-color: rgba(255, 255, 255, 0);
}
&:after {
border-bottom-color: #fff;
border-width: 8px;
margin-left: -5px;
pointer-events: none;
}
&:before {
border-bottom-color: @really-light-grey;
border-width: 9px;
margin-left: -6px;
margin-top: -2px;
pointer-events: none;
}
}
&.blockquote-with-media {
position: absolute;
border: @really-light-grey solid 1px;
margin: 16px;
bottom: 5px;
width: 85%;
> p {
max-height: 400px;
overflow: hidden;
}
@media screen and (max-width: 500px) {
width: 80%;
> p {
max-height: 200px;
}
}
}
> p {
position: relative;
margin: 0;
#font .slab-serif;
#font .full-house;
line-height: 28px;
word-wrap: break-word;
@media screen and (max-width: 580px) {
#font .straight;
line-height: 24px;
}
}
}
.feed-badge {
position: absolute;
left: -24px;
top: 16px;
z-index: @badge-z-index;
padding: 0 8px;
background: @logo-blue;
.rounded-left(4px);
#font .heavy;
#font .pair;
line-height: 20px;
color: #fff;
&:after {
content: '';
position: absolute;
right: -20px;
border: 10px solid transparent;
border-left: 10px solid @logo-blue;
}
}
.feed-item-name {
#font .heavy;
#font .three-of-a-kind;
}
.feed-collection-name {
float: left;
width: 60%;
#font .heavy;
#font .two-pair;
.text-overflow-ellipsis();
@media screen and (max-width: 420px) {
#font .pair;
}
}
.feed-collection-link {
float: right;
width: 40%;
#font .heavy;
#font .two-pair;
color: @logo-blue;
text-align: right;
@media screen and (max-width: 420px) {
#font .pair;
> span {
display: none;
}
}
}
.feed-item-meta {
position: absolute;
width: 53px;
right: 11px;
bottom: -3px;
}
.feed-item-meta-data {
float: left;
margin: 0;
padding: 0;
.clearfix();
list-style: none;
#font .heavy;
#font .two-pair;
color: @pitythefool-grey;
line-height: 16px;
> li {
position:relative;
float: left;
padding-left: 16px;
@media screen and (max-width: 380px) {
padding-left: 8px;
}
&:first-child {
padding: 0;
}
}
}
.feed-item-smiles {
list-style-type: none;
> i {
position: relative;
top: 2px;
font-size: 17px;
}
}
.feed-item-comments {
> i {
position: relative;
top: 2px;
font-size: 13px;
line-height: 12px;
}
}
.interrupt.is-waiting {
cursor: wait;
}
.interrupt.is-waiting a {
cursor: wait !important;
}
.interrupt-header {
margin-bottom: 20px;
text-align: center;
}
.interrupt-header p {
font-size: 13px;
margin: 10px 0 15px;
}
.interrupt-peekaboo-imac-see-you {
background-color: white;
height: 350px;
overflow: hidden;
padding-top: 20px;
border: 1px solid #ddd;
border-width: 1px 0;
}
.interrupt-peekaboo-imac-see-you img {
display: block;
margin: 0 auto;
position: relative;
left: 65px;
max-width: 100%;
}
.interrupt-footer {
text-align: center;
}
.interrupt-footer-features {
margin: 30px 0;
min-height: 150px;
background-color: #999;
}
.interrupt-footer .interrupt-skip-quiz {
margin-top: 10px;
}
.interrupt-footer .interrupt-skip-quiz a {
color: #54C8EC;
font-weight: bold;
font-size: 12px;
}
.feed.product {
.feed-item {
margin-bottom: 30px;
}
.feed-item-friend-love {
.feed-item-body {
display: none;
}
}
.feed-item-seller-product {
.feed-item-body {
display: none;
}
}
}
.product-feed-wrapper {
background: white;
padding: 20px 0;
}
.no-feed-items {
background-color: #ffffff;
padding: 15px;
.empty-love {
text-decoration: underline;
}
}
.feed-item-body {
.member-rewards-img {
display: block;
margin: 0 auto;
padding: 16px 0;
width: 25%;
}
.feed-item-friend-member-level-change & {
background: #fff;
border-right: 1px solid @chads-skin;
border-left: 1px solid @chads-skin;
border-top: 1px solid @chads-skin;
}
}
.blacklisted-word.highlight {
color: red;
font-weight: bold;
}
.hashtag-feed-header {
position: relative;
margin: 16px 0 0;
padding: 15px 20px;
background: #ccc;
> h2 {
#font .slab-serif;
#font .flush;
color: @oe-grey;
.text-overflow-ellipsis();
}
&:after {
.triangle(down, 6px, #ccc);
position: absolute;
bottom: -6px;
left: 50%;
margin-left: -3px;
}
}
.hashtag-feed-wrapper {
.hashtag-feed-header {
margin-bottom: 20px;
}
}
.suggested-hashtags {
width: 100%;
padding-top: 16px;
> h3 {
#font .heavy;
#font .three-of-a-kind;
line-height: 24px;
color: @pitythefool-grey;
}
> a {
display: block;
#font .normal;
#font .three-of-a-kind;
color: @pitythefool-grey;
line-height: 24px;
.text-overflow-ellipsis();
&:hover {
color: @logo-blue;
}
}
}
a.feed-item-link {
color: @logo-blue;
}
.single-feed-item {
margin-top: 20px;
}
// Hide the endorsement from comment popups only
.oskypopover-comments-module .feed-item-endorsement {
display: none;
}
.feed-item-endorsement {
.feed-item-description {
float: none;
}
}
.feed-item-reply {
position: relative;
background-color: @even-lighter-grey;
border-top: @chads-skin 1px solid;
margin: 0 20px;
&.feed-item-highlight {
background-color: #ffc;
}
.feed-item-description {
.box-sizing(border-box);
min-height: 26px;
background-color: @even-lighter-grey;
width: 100%;
padding: 10px 0;
float: none;
> span {
display: block;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
line-height: 20px;
color: @oe-grey;
@media screen and (max-width: 480px) {
line-height: 20px;
padding: 0 8px 0 40px;
}
}
@media screen and (max-width: 500px) {
padding: 15px 0;
}
}
}
.feed-item-time-row {
> a {
.inline-block();
margin-right: 4px;
}
}
.feed-post-wrapper {
&.feed-post-wrapper-profile {
margin-top: 40px;
}
}
.feed-post-feed {
.show-more-wrap {
border-top: 1px solid @chads-skin;
padding: 20px 0;
margin: 0 20px;
}
}
a.morelink {
display: block;
font-size: 14px;
#font .normal;
font-weight: bold;
color: @pitythefool-grey;
}
.morecontent div {
display: none;
}
.feed-item-user-information {
position: absolute;
background-color: #fff;
border: #dcdcdc solid 1px;
height: 101px;
width: 205px;
top: 0;
right: -230px;
text-align: center;
@media screen and (max-width: 1000px) {
display: none;
}
&:before {
position: absolute;
left: -8px;
top: 30px;
.triangle(left, 8px, #dcdcdc);
}
&:after {
position: absolute;
left: -7px;
top: 30px;
.triangle(left, 8px, #E8F9FE);
}
.feed-item-user-follow {
background-color: #e8f9fe;
padding: 20px 0;
}
.feed-item-description-user-name {
#font .heavy;
#font .three-of-a-kind;
margin: 0 0 14px 0;
&:hover {
color: @logo-blue;
}
}
}
.object-love {
.do-love {
display: block;
}
.do-unlove {
display: none;
}
&.love-it {
.do-unlove {
display: block;
}
.do-love {
display: none;
}
}
}
.feed-item-footer {
background-color: @even-lighter-grey;
}
.feed-item {
.feed-item-object-card-body {
.box-sizing(border-box);
background: #fff;
border-right: 1px solid @chads-skin;
border-left: 1px solid @chads-skin;
border-top: 1px solid @chads-skin;
}
}
.feed-filters {
margin-top: 20px;
.filter a {
padding: 8px 16px;
text-align: left;
line-height: 14px;
}
}
.trending-filters {
margin-top: 20px;
h3.title {
#font .four-of-a-kind;
margin-bottom: 10px;
}
.filter a {
padding: 8px 16px;
text-align: left;
line-height: 14px;
}
}
.feed-item-object-card-body {
padding: 4px;
// @media screen and (max-width: 320px) {
// padding-bottom: 0px;
// }
.clearfix();
.feed-item-object-card-info {
text-align: center;
background-color: #e8f9fe;
height: 242px;
width: 50%;
.box-sizing(border-box);
display: inline-block;
float: left;
.image {
margin-top: 20px;
@media screen and (max-width: 580px) {
margin: 10px 0;
}
@media screen and (max-width: 320px) {
margin: 4px 0;
}
img {
width: 80px;
@media screen and (max-width: 580px) {
width: 50px;
}
}
}
.name, .person-name {
margin: 20px 0;
white-space: nowrap;
overflow: hidden;
@media screen and (max-width: 580px) {
margin: 10px 0;
}
@media screen and (max-width: 320px) {
margin: 0 0 4px 0;
font-size: 13px;
}
}
.follow {
margin: 20px 0;
@media screen and (max-width: 580px) {
margin: 10px 0;
}
@media screen and (max-width: 320px) {
margin: 3px 0;
}
}
.num-followers {
#font .normal;
#font .three-of-a-kind;
color: @pitythefool-grey;
@media screen and (max-width: 320px) {
font-size: 12px;
}
}
@media screen and (max-width: 580px) {
height: 175px;
}
@media screen and (max-width: 320px) {
height: 135px;
}
}
.feed-item-object-card-products {
width: 50%;
padding-left: 4px;
.box-sizing(border-box);
display: inline-block;
float: right;
ul {
list-style-type: none;
margin: 0;
padding: 0;
@media screen and (max-width: 320px) {
height: 135px;
margin-right: -2px;
}
li {
display: inline;
img {
width: 48%;
}
&.less-than-four-sellables {
img {
width: 100%;
@media screen and (max-width: 320px) {
width: 99%;
}
}
}
}
}
}
}
.feed-recommendation {
margin-bottom: 30px;
.box-sizing(border-box);
background: #fff;
border: 1px solid @chads-skin;
.feed-recommendation-bottom {
border-top: #e7e7e7 solid 1px;
padding: 16px;
.feed-recommendation-description {
> span {
display: block;
vertical-align: middle;
.box-sizing(border-box);
#font .two-pair;
#font .normal;
line-height: 20px;
a {
color: @logo-blue;
#font .heavy;
}
}
}
}
}
.feed-item-share {
position: relative;
#font .heavy;
#font .two-pair;
color: #999;
a {
@media screen and (max-width: 500px) {
#font .pair;
}
}
.feed-item-share-buttons {
.inline-block();
position: absolute;
top: 0;
left: 4px;
min-width: 100px;
}
&:before {
content: " · ";
color: #999;
position: relative;
left: -2px;
}
}
.feed-item-more-menu {
width: 200px;
background-color: @really-light-grey;
position: absolute;
border: @chads-skin solid 1px;
z-index: @tooltip-z-index;
ul {
.not-really-a-list();
span {
display: inline-block;
color: @pitythefool-grey;
#font .heavy;
margin-bottom: 5px;
}
li.share {
height: 110px;
padding: 8px;
background-color: #fff;
border-bottom: 1px solid @really-light-grey;
span.url {
#font .normal;
#font .three-of-a-kind;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
}
.moderation {
background-color: #fff;
height: 30px;
padding-top: 8px;
padding-left: 8px
}
.feed-item-moderation-text {
font-size: 12px;
#font .normal;
}
&:after, &:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 8px;
right: 12px;
}
&:before {
border-color: rgba(255, 255, 255, 0);
border-top-color: @chads-skin;
border-width: 10px;
right: 10px;
}
&.logged-out {
&:after {
border-top-color: @really-light-grey;
}
}
}
.feed-item-reply-moderation-form {
display: inline;
.feed-item-reply-moderation {
font-size: 11px;
cursor: pointer;
.feed-item-reply-moderation-label {
display: inline-block;
padding-left: 4px;
}
}
}
.feed-item-reaction-counts {
.clearfix();
clear: both;
padding-left: 17px;
background-color: #fff;
border-top: @chads-skin solid 1px;
ul {
.not-really-a-list();
> li {
#font .three-of-a-kind;
#font .normal;
line-height: 40px;
float: left;
#font .two-pair;
color: @pitythefool-grey;
margin-left: 10px;
.number {
color: @oe-grey;
#font .heavy;
}
}
}
}
.feed-item-reaction-bar {
position: relative;
clear: both;
padding-left: 15px;
padding-right: 12px;
background-color: @even-lighter-grey;
border-top: @chads-skin solid 1px;
height: 70px;
&:after, &:before {
position: absolute;
height: 0;
width: 0;
right: 40px;
bottom: 100%;
border: solid transparent;
content: " ";
border-color: rgba(255, 255, 255, 0);
}
&:after {
border-bottom-color: @even-lighter-grey;
border-width: 8px;
margin-right: -5px;
pointer-events: none;
}
&:before {
border-bottom-color: @chads-skin;
border-width: 9px;
margin-right: -6px;
pointer-events: none;
}
.reactions {
clear: left;
.not-really-a-list();
.reaction-button-container {
width: 50px;
margin:0 4px;
text-align: center;
}
.reaction-bar-love {
color: @tint-pink;
&.is-loved, &.is-loving, &.love-it {
background-color: @tint-pink;
color: @accent-plum;
}
i {
position: relative;
top: 4px;
}
}
.reaction-bar-smile {
color: @logo-blue;
&.is-loved, &.is-loving, &.love-it {
background-color: @logo-blue;
color: @secondary-blue;
}
i {
position: relative;
top: 4px;
}
}
.reaction-bar-reply {
color: @notification-green;
&.active {
color: @secondary-green;
background-color: @tint-green;
}
i {
position: relative;
top: 5px;
}
}
.more {
text-align: right;
float: right;
margin-right: 24px;
i {
color: #adadad;
font-size: 15px;
&:hover {
.no-touch & {
color: @logo-blue;
}
}
}
}
.buy {
a {
i {
position: relative;
top: 4px;
font-size: 20px;
}
}
}
> li {
#font .three-of-a-kind;
#font .normal;
line-height: 45px;
float: left;
padding-top: 10px;
i {
font-size: 22px;
}
&.is-disabled {
a {
.opacity(40);
cursor: default;
color: #999;
&:hover {
color: #999;
}
}
}
}
}
}
.reaction-bar-button {
position: relative;
display: block;
background: #ffffff;
.border-radius(50%);
.boxShadow(0,2px,0,0,rgba(0,0,0,0.1));
pointer-events: all;
text-align: center;
&:hover {
.no-touch & {
top: -1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 3px 0px 0px;
}
}
}
.feed-item-smiles-bar {
.text-overflow-ellipsis();
clear: left;
background-color: @even-lighter-grey;
border-top: @chads-skin solid 1px;
#font .normal;
line-height: 30px;
margin: 0 20px;
font-size: 12px;
color: @pitythefool-grey;
a {
color: @logo-blue;
#font .heavy;
}
@media screen and (max-width: 500px) {
margin: 0 10px;
#font .two-pair;
line-height: 36px;
}
}
.feed-trending-hashtags {
padding: 24px 20px 26px;
margin-bottom: 30px;
background: #fff;
.text-overflow-ellipsis();
> h3 {
#font .light;
#font .full-house;
color: @pitythefool-grey;
margin: 0 0 20px 3px;
}
}
.trending-hashtag {
position: relative;
max-width: 224px;
max-height: 224px;
margin: 0 3px;
> a {
display: block;
> img {
width: 225px;
@media screen and (max-width: 320px) {
width: 127px;
}
}
> span {
position: absolute;
bottom: 0;
left: 0;
.box-sizing(border-box);
display: block;
width: 100%;
padding: 0 20px;
background: rgba(0,0,0,0.7);
#font .normal;
#font .two-pair;
color: #fff;
line-height: 50px;
.text-overflow-ellipsis();
@media screen and (max-width: 420px) {
line-height: 36px;
padding: 0 10px;
}
}
}
}
.tooltip * {
text-align: left;
}
.feed-item-hashtags {
.clearfix();
margin-bottom: 20px;
margin-right: 20px;
ul {
.not-really-a-list();
li {
padding-left: 5px;
padding-right: 5px;
float: left;
.inline-block();
> a {
border: none !important;
color: @pitythefool-grey;
#font .two-pair;
}
}
}
}
.feed-post {
position: relative;
background-color: #fff;
margin: 0 20px 20px;
border: @chads-skin 1px solid;
.merchant-portal & {
margin: 16px 0;
}
.mentions-input-box {
background-color: none;
min-height: 33px;
}
.mentions {
display: none;
}
.feed-post-button {
position: absolute;
bottom: 3px;
right: 5px;
.btn {
line-height: 22px;
}
}
.textarea {
padding: 2px 86px 2px 4px;
min-height: 33px;
textarea {
overflow: hidden;
minheight: 22px;
height: 22px;
background: none;
lineheight: 16px;
border: none;
padding: 0;
padding-top: 8px;
width: 100%;
// .straight is to prevent zooming on on ios when focusing on textarea
#font .straight;
#font .normal;
resize: none;
outline: none;
}
}
.product-feed-wrapper .feed-post-feed & {
margin: 0 20px 20px;
}
.tabs-content &, .product-feed-wrapper & {
margin: 0 0 20px 0;
}
}
Raw
Follow Button LESS
body {
margin: 0;
padding: 0;
}
.osky-follow-widget.disabled {
.widget-btn,
.widget-count {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
}
/* Widget 1 */
iframe.widget1 {
height: 28px;
width: auto;
}
.widget1 {
.osky-follow-widget {
font: normal normal normal 11px/1.7 "Helvetica Neue", Arial, sans-serif;
color: #333;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.osky-follow-widget .widget-btn {
position: relative;
float: left;
height: 26px;
font-weight: bold;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
white-space: nowrap;
vertical-align: top;
background-color: #0E405E;
border: #0E405E solid 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
outline: none;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede');
}
.osky-follow-widget.disabled {
.widget-btn,
.widget-count {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
}
.osky-follow-widget .widget-btn i {
background: transparent url('../img/logo-52.png') 2px 2px no-repeat;
background-size: 20px 20px;
height: 22px;
left: 1px;
position: absolute;
top: 1px;
width: 22px;
}
.osky-follow-widget .widget-label {
display: inline-block;
*display: inline;
font-size: 11px;
padding: 4px 5px 0 26px;
zoom: 1;
color: #ffffff;
}
.osky-follow-widget .widget-count {
position: relative;
display: inline-block;
*display: inline;
height: 21px;
width: auto;
text-align: center;
margin-left: 5px;
padding-top: 5px;
border-image: initial;
background: white;
border: #BBB solid 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
}
.osky-follow-widget .widget-count i,
.osky-follow-widget .widget-count u {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin: -4px 0 0 -4px;
line-height: 0;
border: 4px transparent solid;
border-left: 0;
_border-color: pink;
border-right-color: #AAA;
zoom: 1;
_filter: chroma(color=pink);
}
.osky-follow-widget .widget-count u {
margin-left: -3px;
border-right-color: white;
}
.osky-follow-widget .widget-val {
padding: 2px 3px;
}
}
/* Widget 2 */
iframe.widget2 {
height: 50px;
width: 125px;
}
.widget2 {
.osky-follow-widget {
font: normal normal normal 11px/1.7 "Helvetica Neue", Arial, sans-serif;
color: #333;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.osky-follow-widget .widget-btn {
position: relative;
float: left;
height: 40px;
font-weight: bold;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
white-space: nowrap;
vertical-align: top;
background-color: #0E405E;
border: #0E405E solid 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
outline: none;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede');
}
.osky-follow-widget .widget-btn i {
background: transparent url('../img/logo-52.png') 3px 3px no-repeat;
background-size: 30px 30px;
height: 33px;
width: 33px;
left: 1px;
position: absolute;
top: 1px;
}
.osky-follow-widget .widget-label {
display: inline-block;
*display: inline;
font-size: 13px;
padding: 8px 5px 0 38px;
zoom: 1;
color: #ffffff;
}
.osky-follow-widget .widget-count {
position: relative;
display: inline-block;
*display: inline;
height: 30px;
width: auto;
text-align: center;
margin-left: 5px;
padding-top: 10px;
border-image: initial;
background: white;
border: #BBB solid 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
}
.osky-follow-widget .widget-count i,
.osky-follow-widget .widget-count u {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin: -4px 0 0 -4px;
line-height: 0;
border: 4px transparent solid;
border-left: 0;
_border-color: pink;
border-right-color: #AAA;
zoom: 1;
_filter: chroma(color=pink);
}
.osky-follow-widget .widget-count u {
margin-left: -3px;
border-right-color: white;
}
.osky-follow-widget .widget-val {
padding: 2px 3px;
}
}
Raw
Love Button LESS
a.osky-iframe-btn {
text-decoration: none;
}
.osky-btn-loved {
border-color: #d1d1d1;
color: #999;
.osky-btn-img {
left: -1px;
top: -1px;
}
}
[class="osky-btn"]:hover {
border-color: #999;
}
body.osky-love {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 11px;
margin: 0px;
padding: 0;
height: 22px;
}
.osky-count:after {
border: 4px solid transparent;
border-right-color: #fff;
left: -8px;
margin-top: -4px;
}
.osky-count:after, .osky-count:before {
content: '';
display: block;
position: absolute;
top: 50%;
}
.osky-count {
border-color: #e1e1e1;
color: #4c4c4c;
margin-left: 0.25em;
}
.osky-count:before {
border: 5px solid transparent;
border-right-color: #e1e1e1;
left: -10px;
margin-top: -5px;
}
iframe.osky-widget1 {
height: 23px;
width: 108px;
}
.osky-btn-string {
display: inline-block;
font-weight: bold;
padding-left: 15px;
text-shadow: -1px 1px #fff;
}
.osky-btn {
background-color: #CCC;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #fafafa, #f5f5f5);
background-image: -moz-linear-gradient(top, #fafafa, #f5f5f5);
background-image: -ms-linear-gradient(top, #fafafa, #f5f5f5);
background-image: -o-linear-gradient(top, #fafafa, #f5f5f5);
border-color: #b3b3b3;
color: #574f54;
cursor: pointer;
font-family: inherit;
overflow: hidden;
}
.osky-btn, .osky-count {
border: 1px solid;
border-color:#d1d1d1;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
display: inline-block;
font-size: 1em;
height: 20px;
line-height: 18px;
padding: 0 0.5em;
position: relative;
vertical-align: top;
}
.osky-btn-img {
display: block;
left: -3px;
position: absolute;
top: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment