/** * prettyPhoto.scss * Styles for the prettyPhoto lightbox script. Includes a custom WooCommerce theme. * http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ */ /** * Imports */ @import 'mixins'; @import 'variables'; @import 'fonts'; /** * Mixins */ @mixin button() { border-radius: 100%; height: 1em; width: 1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background-color: #444; color: #fff !important; font-size: 16px !important; line-height: 1em; @include transition(); &:hover { background-color: #000; } } /** * Custom WooCommerce prettyPhoto theme */ div.pp_woocommerce { .pp_content_container { background: #fff; border-radius: 3px; box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25); padding: 20px 0; @include clearfix(); } .pp_loaderIcon { @include loader(); } div.ppt { color: black; } .pp_gallery { ul { li { a { border: 1px solid rgba(0, 0, 0, 0.5); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 2px; display: block; &:hover { border-color: #000; } } &.selected { a { border-color: #000; } } } } } .pp_previous, .pp_next { &::before { @include button(); font-family: 'WooCommerce'; content: '\e00b'; text-indent: 0; display: none; position: absolute; top: 50%; margin-top: -10px; text-align: center; } &:hover { &::before { display: block; } } } .pp_previous { &::before { left: 1em; } } .pp_next { &::before { right: 1em; font-family: 'WooCommerce'; content: '\e008'; } } .pp_details { margin: 0; padding-top: 1em; } .pp_nav, .pp_description { font-size: 14px; } .pp_nav, .pp_nav p, .pp_play, .pp_nav .pp_pause, .pp_arrow_previous, .pp_arrow_next { margin: 0; } .pp_nav { margin-right: 1em; position: relative; } .pp_close { @include button(); top: -0.5em; right: -0.5em; font-size: 1.618em !important; &::before { font-family: 'WooCommerce'; content: '\e013'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } .pp_arrow_previous, .pp_arrow_next { @include button(); position: relative; margin-top: -1px; &::before { font-family: 'WooCommerce'; content: '\e00b'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } .pp_arrow_previous { margin-right: 0.5em; } .pp_arrow_next { margin-left: 0.5em; &::before { content: '\e008'; } } a.pp_expand, a.pp_contract { @include button(); right: auto; left: -0.5em; top: -0.5em; font-size: 1.618em !important; &::before { font-family: 'WooCommerce'; content: '\e005'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } a.pp_contract { &::before { content: '\e004'; } } #respond { margin: 0; width: 100%; background: none; border: none; padding: 0; .form-submit { margin-top: 0; float: none; } } .pp_inline { padding: 0!important; } } // RTL support .rtl { div.pp_woocommerce { .pp_content_container { text-align: right; } } } @media only screen and (max-width: 768px) { div.pp_woocommerce { left: 5% !important; right: 5% !important; box-sizing: border-box; width: 90% !important; .pp_gallery, .pp_previous, .pp_next, .pp_expand, .pp_contract { display: none !important; } .pp_arrow_previous, .pp_arrow_next, .pp_close { height: 44px; width: 44px; font-size: 44px; line-height: 44px; &::before { font-size: 44px; } } .pp_description { display: none !important; } .pp_details { width: 100% !important; } } .pp_content { width: 100% !important; #pp_full_res { & > img { width: 100% !important; height: auto !important; } } } .currentTextHolder { line-height: 3; } } /** * Default prettyPhoto css * Do not edit! */ div.pp_pic_holder a:focus { outline: none; } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9999; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_top { height: 20px; position: relative; } * html .pp_top { padding: 0 20px; } .pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle { left: 0; position: static; } .pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_content { height: 40px; min-width: 40px; } * html .pp_content { width: 40px; } .pp_fade { display: none; } .pp_content_container { position: relative; text-align: left; width: 100%; } .pp_content_container .pp_left { padding-left: 20px; } .pp_content_container .pp_right { padding-right: 20px; } .pp_content_container .pp_details { float: left; margin: 10px 0 2px; } .pp_description { display: none; margin: 0; } .pp_social { float: left; margin: 0; } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; } .pp_social .twitter { float: left; } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0; } .pp_nav p { float: left; margin: 2px 4px; white-space: nowrap; } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px; } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; text-indent: -100000px; width: 14px; } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000; } .pp_gallery div { float: left; overflow: hidden; position: relative; } .pp_gallery ul { float: left; height: 35px; margin: 0 0 0 5px; padding: 0; position: relative; white-space: nowrap; } .pp_gallery ul a { border: 1px #000 solid; border: 1px rgba(0, 0, 0, 0.5) solid; display: block; float: left; height: 33px; overflow: hidden; } .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff; } .pp_gallery ul a img { border: 0; } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0; } .pp_gallery li.default a { display: block; height: 33px; width: 50px; } .pp_gallery li.default a img { display: none; } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important; } a.pp_next { display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { position: absolute; right: 0; top: 0; display: block; text-indent: -10000px; } .pp_bottom { height: 20px; position: relative; } * html .pp_bottom { padding: 0 20px; } .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; } #pp_full_res .pp_inline { text-align: left; } div.ppt { color: #fff !important; font-weight: 700; display: none; font-size: 17px; margin: 0 0 5px 15px; z-index: 9999; }