/* -------------------------------------- Spinner -------------------------------------- */ .gamipress-spinner { display: block; margin: 4px auto; width: 20px; height: 20px; background: url('../img/spinner.gif'); } /* -------------------------------------- Achievements List -------------------------------------- */ #gamipress-achievements-filter { float: left; margin-bottom: 1em; } #gamipress-achievements-search { margin-right: 5px; margin-bottom: 1em; float: right; } #gamipress-achievements-container:not([class*="gamipress-columns"]), #achievements_list_load_more, #gamipress-achievements-filters-wrap { display: block; margin: 0 auto; clear: both; } #gamipress-achievements-filter select { max-width: 100%; margin-left: 5px; } .gamipress-achievements-list .gamipress-achievement { padding: 1em 0; } .gamipress-no-results { width: 100%; } /* -------------------------------------- Layout Utility -------------------------------------- */ .gamipress-achievement:not(.gamipress-layout-none), .gamipress-rank:not(.gamipress-layout-none), .single-achievement.achievement-wrap:not(.gamipress-layout-none), .single-rank.rank-wrap:not(.gamipress-layout-none), .gamipress-user-points:not(.gamipress-layout-none) { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-self: flex-start; width: 100%; margin-bottom: 1rem; } .gamipress-points-types:not(.gamipress-layout-none) .gamipress-points-type { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-self: flex-start; } /* Force box sizing to box's border instead of box's content */ .gamipress-achievement:not(.gamipress-layout-none) *, .gamipress-rank:not(.gamipress-layout-none) *, .single-achievement.achievement-wrap:not(.gamipress-layout-none) *, .single-rank.rank-wrap:not(.gamipress-layout-none) *, .gamipress-user-points:not(.gamipress-layout-none) *, .gamipress-points-types:not(.gamipress-layout-none) * { box-sizing: border-box; } /* Left and Right */ .gamipress-achievement.gamipress-layout-left .gamipress-achievement-image, .gamipress-achievement.gamipress-layout-right .gamipress-achievement-image, .gamipress-rank.gamipress-layout-left .gamipress-rank-image, .gamipress-rank.gamipress-layout-right .gamipress-rank-image, .single-achievement.gamipress-layout-left .gamipress-achievement-image, .single-achievement.gamipress-layout-right .gamipress-achievement-image, .single-rank.gamipress-layout-left .gamipress-rank-image, .single-rank.gamipress-layout-right .gamipress-rank-image, .gamipress-points-types.gamipress-layout-left .gamipress-points-type-image, .gamipress-points-types.gamipress-layout-right .gamipress-points-type-image { width: 20%; } .gamipress-achievement.gamipress-layout-left .gamipress-achievement-image, .gamipress-rank.gamipress-layout-left .gamipress-rank-image, .single-achievement.gamipress-layout-left .gamipress-achievement-image, .single-rank.gamipress-layout-left .gamipress-rank-image, .gamipress-points-types.gamipress-layout-left .gamipress-points-type-image { padding-right: 1em; } .gamipress-achievement.gamipress-layout-right .gamipress-achievement-image, .gamipress-rank.gamipress-layout-right .gamipress-rank-image, .single-achievement.gamipress-layout-right .gamipress-achievement-image, .single-rank.gamipress-layout-right .gamipress-rank-image, .gamipress-points-types.gamipress-layout-right .gamipress-points-type-image { padding-left: 1em; } .gamipress-achievement.gamipress-layout-left .gamipress-achievement-description, .gamipress-achievement.gamipress-layout-right .gamipress-achievement-description, .gamipress-rank.gamipress-layout-left .gamipress-rank-description, .gamipress-rank.gamipress-layout-right .gamipress-rank-description, .single-achievement.gamipress-layout-left .gamipress-achievement-description, .single-achievement.gamipress-layout-right .gamipress-achievement-description, .single-rank.gamipress-layout-left .gamipress-rank-description, .single-rank.gamipress-layout-right .gamipress-rank-description, .gamipress-points-types.gamipress-layout-left .gamipress-points-type-description, .gamipress-points-types.gamipress-layout-right .gamipress-points-type-description { margin-top: 0; width: 80%; } .gamipress-achievement.gamipress-layout-right, .gamipress-rank.gamipress-layout-right, .single-achievement.gamipress-layout-right, .single-rank.gamipress-layout-right, .gamipress-user-points.gamipress-layout-right .gamipress-points, .gamipress-points-types.gamipress-layout-right .gamipress-points-type { flex-direction: row-reverse; } .gamipress-user-points.gamipress-layout-left .gamipress-points, .gamipress-user-points.gamipress-layout-right .gamipress-points { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; } .gamipress-user-points.gamipress-layout-right .gamipress-points { justify-content: flex-end; } /* Top and Bottom */ .gamipress-achievement.gamipress-layout-top .gamipress-achievement-image, .gamipress-achievement.gamipress-layout-bottom .gamipress-achievement-image, .gamipress-rank.gamipress-layout-top .gamipress-rank-image, .gamipress-rank.gamipress-layout-bottom .gamipress-rank-image, .single-achievement.gamipress-layout-top .gamipress-achievement-image, .single-achievement.gamipress-layout-bottom .gamipress-achievement-image, .single-rank.gamipress-layout-top .gamipress-rank-image, .single-rank.gamipress-layout-bottom .gamipress-rank-image, .gamipress-points-types.gamipress-layout-top .gamipress-points-type-image, .gamipress-points-types.gamipress-layout-bottom .gamipress-points-type-image { width: 100%; } .gamipress-achievement.gamipress-layout-top .gamipress-achievement-image, .gamipress-rank.gamipress-layout-top .gamipress-rank-image, .single-achievement.gamipress-layout-top .gamipress-achievement-image, .single-rank.gamipress-layout-top .gamipress-rank-image, .gamipress-points-types.gamipress-layout-top .gamipress-points-type-image { padding-bottom: 1em; } .gamipress-achievement.gamipress-layout-bottom .gamipress-achievement-image, .gamipress-rank.gamipress-layout-bottom .gamipress-rank-image, .single-achievement.gamipress-layout-bottom .gamipress-achievement-image, .single-rank.gamipress-layout-bottom .gamipress-rank-image, .gamipress-points-types.gamipress-layout-bottom .gamipress-points-type-image { padding-top: 1em; } .gamipress-achievement.gamipress-layout-top .gamipress-achievement-description, .gamipress-achievement.gamipress-layout-bottom .gamipress-achievement-description, .gamipress-rank.gamipress-layout-top .gamipress-rank-description, .gamipress-rank.gamipress-layout-bottom .gamipress-rank-description, .single-achievement.gamipress-layout-top .gamipress-achievement-description, .single-achievement.gamipress-layout-bottom .gamipress-achievement-description, .single-rank.gamipress-layout-top .gamipress-rank-description, .single-rank.gamipress-layout-bottom .gamipress-rank-description, .gamipress-points-types.gamipress-layout-top .gamipress-points-type-description, .gamipress-points-types.gamipress-layout-bottom .gamipress-points-type-description { width: 100%; } .gamipress-achievement.gamipress-layout-bottom, .gamipress-rank.gamipress-layout-bottom, .single-achievement.gamipress-layout-bottom, .single-rank.gamipress-layout-bottom, .gamipress-user-points.gamipress-layout-bottom .gamipress-points, .gamipress-points-types.gamipress-layout-bottom .gamipress-points-type { flex-direction: column-reverse; } .gamipress-user-points.gamipress-layout-top .gamipress-points, .gamipress-user-points.gamipress-layout-bottom .gamipress-points { text-align: center; } .gamipress-user-points.gamipress-layout-top .gamipress-user-points-image, .gamipress-user-points.gamipress-layout-bottom .gamipress-user-points-image { width: 100%; } /* -------------------------------------- Align Utility -------------------------------------- */ .gamipress-align-left { text-align: left; } .gamipress-align-left .gamipress-share-buttons { justify-content: flex-start; } .gamipress-align-center { text-align: center; } .gamipress-align-center .gamipress-share-buttons { justify-content: center; } .gamipress-align-right { text-align: right; } .gamipress-align-right .gamipress-share-buttons { justify-content: flex-end; } .gamipress-align-justify { text-align: justify; } /* -------------------------------------- Columns Utility -------------------------------------- */ [class*="gamipress-columns"] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } [class*="gamipress-columns"] > .gamipress-achievement, [class*="gamipress-columns"] > .gamipress-points, [class*="gamipress-columns"] > .gamipress-points-type, [class*="gamipress-columns"] .gamipress-rank { width: 100%; } /* Force box sizing to box's border instead of box's content */ [class*="gamipress-columns"] * { box-sizing: border-box; } .gamipress-columns-small-2 > .gamipress-achievement, .gamipress-columns-small-2 > .gamipress-points, .gamipress-columns-small-2 > .gamipress-points-type, .gamipress-columns-small-2 .gamipress-rank { width: 50%; } .gamipress-columns-small-3 > .gamipress-achievement, .gamipress-columns-small-3 > .gamipress-points, .gamipress-columns-small-3 > .gamipress-points-type, .gamipress-columns-small-3 .gamipress-rank { width: 33%; } .gamipress-columns-small-4 > .gamipress-achievement, .gamipress-columns-small-4 > .gamipress-points, .gamipress-columns-small-4 > .gamipress-points-type, .gamipress-columns-small-4 .gamipress-rank { width: 25%; } .gamipress-columns-small-5 > .gamipress-achievement, .gamipress-columns-small-5 > .gamipress-points, .gamipress-columns-small-5 > .gamipress-points-type, .gamipress-columns-small-5 .gamipress-rank { width: 20%; } .gamipress-columns-small-6 > .gamipress-achievement, .gamipress-columns-small-6 > .gamipress-points, .gamipress-columns-small-6 > .gamipress-points-type, .gamipress-columns-small-6 .gamipress-rank { width: 16.6%; } @media screen and (min-width: 768px) { #gamipress-achievements-container[class*="gamipress-columns"] > .gamipress-achievement, .gamipress-user-points[class*="gamipress-columns"] > .gamipress-points, .gamipress-points-types[class*="gamipress-columns"] > .gamipress-points-type, .gamipress-ranks-container[class*="gamipress-columns"] .gamipress-rank { padding: 1em; overflow: hidden; border-bottom: none; } .gamipress-columns-2 > .gamipress-achievement, .gamipress-columns-2 > .gamipress-points, .gamipress-columns-2 > .gamipress-points-type, .gamipress-columns-2 .gamipress-rank { width: 50%; } .gamipress-columns-3 > .gamipress-achievement, .gamipress-columns-3 > .gamipress-points, .gamipress-columns-3 > .gamipress-points-type, .gamipress-columns-3 .gamipress-rank { width: 33%; } .gamipress-columns-4 > .gamipress-achievement, .gamipress-columns-4 > .gamipress-points, .gamipress-columns-4 > .gamipress-points-type, .gamipress-columns-4 .gamipress-rank { width: 25%; } .gamipress-columns-5 > .gamipress-achievement, .gamipress-columns-5 > .gamipress-points, .gamipress-columns-5 > .gamipress-points-type, .gamipress-columns-5 .gamipress-rank { width: 20%; } .gamipress-columns-6 > .gamipress-achievement, .gamipress-columns-6 > .gamipress-points, .gamipress-columns-6 > .gamipress-points-type, .gamipress-columns-6 .gamipress-rank { width: 16.6%; } } /* Achievement and rank earned status styles */ .gamipress-achievement .gamipress-achievement-image, .gamipress-rank .gamipress-rank-image, .achievement-wrap .gamipress-achievement-image, .rank-wrap .gamipress-rank-image { opacity: .4; } .gamipress-achievement.user-has-earned .gamipress-achievement-image, .gamipress-rank.user-has-earned .gamipress-rank-image, .user-has-earned .achievement-wrap .gamipress-achievement-image, .achievement-wrap.user-has-earned .gamipress-achievement-image, .user-has-earned .rank-wrap .gamipress-rank-image, .rank-wrap.user-has-earned .gamipress-rank-image { opacity: 1; } .gamipress-points-type .gamipress-points-type-awards, .gamipress-points-type .gamipress-points-type-deducts { width: 100%; } .gamipress-achievement-points { font-weight: bold; } #gamipress-achievements-container .gamipress-achievement-title { display: inline-block; margin-top: 0; } #achievements_list_load_more { margin: 1em auto; } .gamipress-open-close-switch { text-align: right; } .gamipress-extras-window { display: none; } .gamipress-required-achievements .user-has-earned, .gamipress-required-requirements .user-has-earned, .gamipress-achievements-list .gamipress-achievement.user-has-earned .gamipress-extras-window li, .gamipress-rank.user-has-earned .gamipress-extras-window li, .gamipress-points-awards .user-has-earned, .gamipress-points-deducts .user-has-earned { text-decoration: line-through; } .gamipress-required-achievements .user-has-earned:hover, .gamipress-required-requirements .user-has-earned:hover, .gamipress-achievements-list .gamipress-achievement.user-has-earned .gamipress-extras-window li:hover, .gamipress-rank.user-has-earned .gamipress-extras-window li:hover, .gamipress-points-awards .user-has-earned:hover, .gamipress-points-deducts .user-has-earned:hover { text-decoration: none; } .show-hide-open:after, .show-hide-close:after { content: ''; display: inline-block; background: url('../img/arrow.svg') no-repeat; background-size: 100%; width: 22px; height: 22px; vertical-align: top; } .show-hide-close:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } ul.gamipress-achievement-earners-list, ul.gamipress-rank-earners-list { list-style: none; margin: 0; padding: 0; } ul.gamipress-achievement-earners-list:after, ul.gamipress-rank-earners-list:after { content: ""; clear: both; display: block; } ul.gamipress-achievement-earners-list li, ul.gamipress-rank-earners-list li { position: relative; float: left; margin: 5px; padding: 0; } ul.gamipress-achievement-earners-list li .earner-display-name, ul.gamipress-rank-earners-list li .earner-display-name { display: block; } .gamipress-achievement-congratulations, .gamipress-rank-congratulations { background: #f0f0f0; padding: 10px; margin:1em auto 2em; border-radius: 5px; } .gamipress-achievement-points { font-weight: bold; } .gamipress-required-achievements .user-has-earned, .gamipress-required-requirements .user-has-earned { text-decoration: line-through; } .gamipress-required-achievements .user-has-earned:hover, .gamipress-required-requirements .user-has-earned:hover { text-decoration: none; } /* GamiPress unlock with points form */ .gamipress-achievement-unlock-with-points, .gamipress-rank-unlock-with-points { display: inline-block; } /* Inline points image */ img.gamipress-points-thumbnail-inline { height: 1.1em; width: auto; vertical-align: middle !important; margin-top: -0.3em; } /* Inline shortcodes styles */ .gamipress-inline-points .gamipress-inline-points-thumbnail img, .gamipress-inline-achievement .gamipress-inline-achievement-thumbnail img, .gamipress-inline-rank .gamipress-inline-rank-thumbnail img { vertical-align: middle; } /* -------------------------------------- Share buttons -------------------------------------- */ .gamipress-share-buttons-label { margin-top: 0; margin-bottom: 2px; } .gamipress-share-buttons { display: flex; flex-wrap: wrap; margin-left: -2px; margin-right: -2px; } .gamipress-share-button { display: inline-block; width: 28px; height: 28px; vertical-align: middle; padding: 4px; margin: 2px; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; box-sizing: border-box; } .gamipress-share-button span { display: none; } .gamipress-share-button-square { border-radius: 0; } .gamipress-share-button-rounded { border-radius: 6px; } .gamipress-share-button-circle { border-radius: 50%; } .gamipress-share-button-facebook { background-color: #4766a9; background-image: url('../img/social/facebook.svg'); } .gamipress-share-button-twitter { background-color: #000; background-image: url('../img/social/twitter.svg'); } .gamipress-share-button-linkedin { background-color: #0074b3; background-image: url('../img/social/linkedin.svg'); } .gamipress-share-button-pinterest { background-color: #bd081c; background-image: url('../img/social/pinterest.svg'); } /* -------------------------------------- User Earnings -------------------------------------- */ /* User earnings in small areas (with support for iPads screens) */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { #gamipress-earnings-table, #gamipress-earnings-table thead, #gamipress-earnings-table tbody, #gamipress-earnings-table th, #gamipress-earnings-table td, #gamipress-earnings-table tr { display: block; width: 100%; } #gamipress-earnings-table td.gamipress-earnings-col-thumbnail { float: left; width: 18%; margin-right: 2%; } #gamipress-earnings-table td.gamipress-earnings-col-thumbnail img { width: 100%; height: auto; } #gamipress-earnings-table td.gamipress-earnings-col-thumbnail.gamipress-earnings-col-empty { display: none; } #gamipress-earnings-table td.gamipress-earnings-col-description { width: 100%; } #gamipress-earnings-table td.gamipress-earnings-col-description:after { content: " "; display: block; clear: both; } #gamipress-earnings-table td.gamipress-earnings-col-date { width: 48%; float: left; } #gamipress-earnings-table td.gamipress-earnings-col-points { width: 50%; text-align: right; float: right; } #gamipress-earnings-table thead tr { position: absolute; top: -9999px; left: -9999px; } #gamipress-earnings-table tr { padding-bottom: 1em; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1em; } #gamipress-earnings-table tr:after { content: " "; display: block; clear: both; } } /* Force responsive */ #gamipress-earnings-table.gamipress-earnings-force-responsive, #gamipress-earnings-table.gamipress-earnings-force-responsive thead, #gamipress-earnings-table.gamipress-earnings-force-responsive tbody, #gamipress-earnings-table.gamipress-earnings-force-responsive th, #gamipress-earnings-table.gamipress-earnings-force-responsive td, #gamipress-earnings-table.gamipress-earnings-force-responsive tr { display: block; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-thumbnail { float: left; width: 18%; margin-right: 2%; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-thumbnail img { width: 100%; height: auto; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-thumbnail.gamipress-earnings-col-empty { display: none; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-description { width: 100%; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-description:after { content: " "; display: block; clear: both; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-date { width: 48%; float: left; } #gamipress-earnings-table.gamipress-earnings-force-responsive td.gamipress-earnings-col-points { width: 50%; text-align: right; float: right; } #gamipress-earnings-table.gamipress-earnings-force-responsive thead tr { position: absolute; top: -9999px; left: -9999px; } #gamipress-earnings-table.gamipress-earnings-force-responsive tr { padding-bottom: 1em; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1em; } #gamipress-earnings-table.gamipress-earnings-force-responsive tr:after { content: " "; display: block; clear: both; } /* -------------------------------------- Email Settings -------------------------------------- */ .gamipress-email-settings .gamipress-email-settings-header-yes, .gamipress-email-settings .gamipress-email-settings-header-no, .gamipress-email-settings .gamipress-email-settings-column-yes, .gamipress-email-settings .gamipress-email-settings-column-no { width: 80px; text-align: center; } .gamipress-email-settings-loader { position: absolute; right: -65px; font-size: 80%; width: 60px; } .gamipress-email-settings-loader .gamipress-email-settings-saving { -webkit-animation: flickerAnimation 1s infinite; -moz-animation: flickerAnimation 1s infinite; -o-animation: flickerAnimation 1s infinite; animation: flickerAnimation 1s infinite; } @keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* -------------------------------------- Shortcode errors -------------------------------------- */ .gamipress-shortcode-error { color: #a00; background-color: #fdd; padding: 0.5em 1em; margin-bottom: 1em; border-radius: 6px; } .gamipress-shortcode-error .gamipress-shortcode-error-shortcode, .gamipress-shortcode-error .gamipress-shortcode-error-reminder { font-size: 75%; } .gamipress-shortcode-error .gamipress-shortcode-error-reminder { text-align: right; } @media screen and (min-width: 768px) { .gamipress-shortcode-error .gamipress-shortcode-error-shortcode { float: left; } }