.index-isotope.v3 { &.isotope-simple { article.pluto-post-box, article.pluto-post-box.format-image { .box-shadow(0px 2px 6px 1px rgba(0,0,0,0.03)); .post-body { .figure-link { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } figure { border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important; } } .post-media-body { padding: 0px; } .post-media-body + .post-content-body { padding-top: 20px; } .meta-share, .meta-like { padding: 8px 15px; min-height: 38px; } .meta-view-count { padding-bottom: 12px; padding-top: 10px; float: left; line-height: 14px; text-transform: uppercase; i { font-size: 11px; margin-right: 5px; } span { font-size: floor(@baseFontSize * 0.8); } } ul.post-categories { padding-top: 11px; margin-bottom: 8px; li a { background-color: transparent; border: none; text-transform: uppercase; color: inherit; padding: 0px; &:hover { background-color: transparent; text-decoration: underline; } } } ul.post-categories + .meta-view-count { border-left: @postMetaBorder; padding-left: 15px; margin-left: 15px; } } } &.isotope-with-author { article.pluto-post-box { .meta-like { padding: 25px 15px; } } } // GENERIC FORMAT ON INDEX article.pluto-post-box { border: @postBorder; .box-shadow(@postShadow); background-color: @postBackground; border-radius: @border-radius-large; img { width: inherit; max-width: 100%; height: auto; } .post-body { position: relative; .post-top-share { .transition(all 0.7s ease); .opacity(0); position: absolute; left: 15px; top: 15px; background-color: rgba(0,0,0,0.8); z-index: 1000; padding: 0px 6px; border-radius: 6px; .box-shadow(0px 1px 4px 0px rgba(0,0,0,0.4)); i.share-activator-icon { vertical-align: middle; line-height: 24px; font-size: 10px; color: #fff; padding-right: 3px; } span.share-activator-label { line-height: 24px; vertical-align: middle; font-size: 10px; text-transform: uppercase; color: #fff; padding-left: 10px; border-left: 1px solid #555; } &:hover { cursor: pointer; i.share-activator-icon { color: #fff; } span.share-activator-label { color: #fff; } } .os_social-head-w { display: none; margin-left: 2px; vertical-align: middle; .os_social { font-size: 10px; img { padding: 0px 4px; width: 25px!important; } a { &:hover { .opacity(1); } } } } &.active { span.share-activator-label { display: none; } .os_social-head-w { display: inline-block; } } } .figure-link { border-radius: @border-radius-base; overflow: hidden; figure { border-radius: @border-radius-base; } } } .post-media-body { padding: 15px; } .post-content-body { padding: @postContentPadding; } .post-media-body + .post-content-body { padding-top: 15px; } .post-top-share + .post-content-body { padding-top: 50px; } .post-title { margin-top: 0px; a { font-weight: @headingsFontWeight; color: @postTitleColor; font-size: @headingsBaseFontSize; line-height: floor(@headingsBaseFontSize * 1.6); font-family: @font-family-alt; border-bottom: 1px solid transparent; .transition(all 0.2s ease); &:hover { text-decoration: none; border-color: @postTitleColor; } } } .post-content { color: @postContentColor; font-weight: @baseFontWeight; } .post-meta { .clearfix(); background-color: @postMetaBackground; border-radius: 0px 0px @border-radius-large @border-radius-large; border-top: @postMetaBorder; } .meta-date, .meta-view-count { padding: 15px 0px 15px 15px; float: left; line-height: 20px; text-transform: uppercase; i { font-size: 11px; margin-right: 5px; } time, span { font-size: floor(@baseFontSize * 0.8); } } .meta-date + .meta-view-count { border-left: @postMetaBorder; padding-left: 20px; margin-left: 20px; span { font-size: floor(@baseFontSize * 0.8); } } .meta-author { padding: 15px 20px 15px 5px; float: right; } .meta-author-face { padding: 10px; float: left; .clearfix; .meta-author-avatar { float: left; margin-right: 15px; img { width: 50px; height: 50px; } } .meta-author-info { float: left; padding-top: 8px; .meta-author-info-by { font-size: floor(@baseFontSize * 0.7); text-transform: uppercase; margin-bottom: 2px; } .meta-author-name { font-size: floor(@baseFontSize * 0.9); } } } .meta-share, .meta-like { padding: 15px 15px; float: right; border-left: @postMetaBorder; background-color: @postMetaHeartBackground; border-radius: 0px 0px @border-radius-large 0px; line-height: 11px; min-height: 50px; iframe { width: 76px; } a { &:hover, &.active, &:focus { text-decoration: none; } } .os-like-button:hover { i { color: @postMetaHeartColorHover; } } .os-like-button.osetin-vote-has-voted { i { color: @postMetaHeartColorHover; } } .os-like-button-sub-label { padding-left: 3px; text-transform: uppercase; font-size: 11px; line-height: 20px; &.zero-class { display: none; } } i { line-height: 20px; color: @postMetaHeartColor; vertical-align: middle; } } .post-video-box { margin-bottom: 0px; .arve-wrapper { margin-bottom: 0px; } } ul.post-categories { list-style: none; margin: 0px; padding: 0px; padding-top: 15px; padding-left: 15px; margin-bottom: 10px; float: left; li { margin-right: 3px; margin-bottom: 3px; float: left; display: none; &:first-child { display: block; } } li a { display: block; padding: 2px 5px; background-color: @tagLinkBackground; font-size: 11px; line-height: 14px; color: @tagLinkColor; border: 1px solid @tagLinkBorderColor; border-radius: 4px; &:hover { border-color: darken(@tagLinkBorderColor, 20%); background-color: lighten(@tagLinkBackground, 20%); text-decoration: none; } } } &:hover { .post-top-share { .opacity(1); } } } // AUDIO FORMAT ON INDEX article.pluto-post-box.format-audio { .post-body .post-top-share { i.share-activator-icon { color: lighten(#1F2022, 60%); } span.share-activator-label { color: lighten(#1F2022, 60%); border-left: 1px solid lighten(#1F2022, 20%);; } } } // IMAGE FORMAT ON INDEX article.pluto-post-box.format-image { .post-media-body { padding: 15px; } } // QUOTE FORMAT ON INDEX article.pluto-post-box.format-quote { padding: 10px; .post-body { padding: 50px; padding-top: 30px; } .post-content { font-size: 18px; line-height: 26px; a { text-decoration: none; color: @headings-color; font-family: @headings-font-family; font-weight: @headings-font-weight; } } .quote-author { margin-top: 20px; text-align: right; text-transform: uppercase; font-size: 11px; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } &.has-post-thumbnail { .post-body { position: relative; border-radius: 4px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; background-repeat: repeat; } .image-fader { background-color: rgba(90,172,244,0.7); position: absolute; top: 0; bottom: 0; right: 0; left: 0; border-radius: 4px; background-image: url('@{imagesPath}/fader-bg-2-light.png'); .transition(all 0.2s ease); } .quote-content { position: relative; } .quote-icon { color: rgba(255,255,255,0.9); font-size: 30px; margin-bottom: 10px; } .post-content { a { text-decoration: none; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } } .quote-author { color: rgba(255,255,255,0.8); } &:hover { .post-content a { text-shadow: 1px 1px 5px rgba(0,0,0,0.9); } .image-fader { background-color: rgba(90,172,244,0.9); } } } } // VIDEO FORMAT ON INDEX article.pluto-post-box.format-video { .post-video-box { } .post-body { iframe { width: 100%; border: none; overflow: hidden; height: auto; } } } // GALLERY FORMAT ON INDEX article.pluto-post-box.format-gallery { } article.pluto-post-box.post-color-highlight { background-color: #1F2022; border-color: #0A0A0A; .post-title, .post-title a { color: #fff; } .post-content { color: #A8B6BF; } .post-top-share { i { border-color: @postBackground; color: #A3ABB7; } span.share-activator { color: #A3ABB7; } } .post-meta { background-color: #161718; border-color: #313436; } .meta-date { color: #A8B6BF; } .meta-like { background-color: #161718; border-color: #313436; } } }