/** * SRP LAYOUT CSS * Package: special-recent-posts-pro * Version: 3.0.8 * The stylesheet of the SRP widget layout */ /** * -------------------------------- * THE WIDGET TITLE * -------------------------------- */ .srp-widget-title {} /** * -------------------------------- * THE POSTS CONTAINER * -------------------------------- */ .srp-widget-container, .srp-widget-row { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .srp-container-single-column { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .srp-container-single-row { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .srp-container-multi-column { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /** * -------------------------------- * THE SINGLE POST * -------------------------------- */ .srp-widget-singlepost { margin-bottom : 10px; padding-bottom : 10px; } .srp-container-single-column .srp-widget-singlepost { border-bottom : 1px solid #cccccc; } .srp-widget-container > .srp-widget-singlepost:last-child { border-bottom : 0; margin-bottom : 0; padding-bottom : 0; } .srp-post-content-container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .srp-thumbnail-position-default { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .srp-thumbnail-position-above { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .srp-container-multi-column .srp-post-multi-column, .srp-widget-container .srp-post-single-row { margin-right: 20px; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .srp-widget-container .srp-post-single-row:last-child { margin: 0; } .srp-container-multi-column .srp-post-multi-column:last-child { margin-right: 0; } /** * -------------------------------- * THE THUMBNAIL BOX * -------------------------------- */ .srp-thumbnail-position-default .srp-thumbnail-box { margin-right: 20px; } .srp-thumbnail-position-above .srp-thumbnail-box { margin: 0; } .srp-post-thumbnail-link { display: block; } .srp-thumbnail-box .avatar {} .srp-thumbnail-box img { height : auto; max-width : 100%; } /** * -------------------------------- * THE CONTENT BOX * -------------------------------- */ .srp-thumbnail-position-default .srp-content-box { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .srp-post-meta-container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; font-size: small; line-height: 1.2em; margin: 0 0 5px 0; } /** * -------------------------------- * THE POST TITLE * -------------------------------- */ .srp-content-box .srp-post-title, .widget-area .widget .srp-post-title { margin: 0; } .srp-content-box .srp-post-stringbreak-link { margin: 0 5px; } /** * -------------------------------- * THE POST META BOXES * -------------------------------- */ .srp-post-meta-container > div { margin: 0 5px 0 0; } .srp-post-meta-container > div:last-child { margin: 0; } .srp-content-box .srp-post-title, .widget-area .widget .srp-post-title { margin: 0; } .srp-content-box .srp-post-author, .widget-area .widget .srp-post-author { -ms-flex-order: 1; -webkit-order: 1; -moz-order: 1; order: 1; } .srp-content-box .srp-post-date, .widget-area .widget .srp-post-date { -ms-flex-order: 2; -webkit-order: 2; -moz-order: 2; order: 2; } .srp-content-box .srp-post-category, .widget-area .widget .srp-post-category { -ms-flex-order: 3; -webkit-order: 3; -moz-order: 3; order: 3; } .srp-content-box .srp-post-comments, .widget-area .widget .srp-post-comments { -ms-flex-order: 4; -webkit-order: 4; -moz-order: 4; order: 4; } .srp-content-box .srp-post-tags, .widget-area .widget .srp-post-tags { margin: 0 0 10px; } /** * -------------------------------- * THE POST CONTENT * -------------------------------- */ .srp-content-box .srp-post-content, .widget-area .widget .srp-post-content { margin: 0; } /** * -------------------------------- * MEDIA QUERIES * -------------------------------- */ @media only screen and (max-width : 1200px) { } @media only screen and (max-width : 992px) { } @media only screen and (max-width : 768px) { /** * -------------------------------- * The Single Post * -------------------------------- */ .srp-post-content-container, .srp-container-single-row { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .srp-widget-container, .srp-widget-row { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .srp-thumbnail-position-default .srp-content-box { -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: none; /* OLD - Firefox 19- */ width: auto; /* For old syntax, otherwise collapses. */ -webkit-flex: none; /* Chrome */ -ms-flex: none; /* IE 10 */ flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } /** * -------------------------------- * The Thumbnail Box * -------------------------------- */ .srp-thumbnail-position-default .srp-thumbnail-box, .srp-thumbnail-position-above .srp-thumbnail-box { margin: 0 0 10px; } } @media only screen and (max-width : 480px) { }