%PDF- %PDF-
Direktori : /var/www/html/buggydubrovnik.com/wp-content/plugins/envira-gallery-lite/assets/scss/ |
Current File : /var/www/html/buggydubrovnik.com/wp-content/plugins/envira-gallery-lite/assets/scss/envira.scss |
/* ========================================================================== Envira Gallery Styles ========================================================================== */ /** * Envira Gallery - Reset */ .envira-gallery-wrap, .envira-gallery-wrap *, .envira-tags-filter-list, .envira-tags-filter-list * { background:none; border:0 none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; float:none; font-size:100%; height:auto; letter-spacing:normal; list-style:none; outline:none; position:static; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; width:auto; visibility:visible; overflow:visible; margin:0; padding:0; line-height:1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; -webkit-appearance:none; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; } /** * Tags Addon */ .envira-tags-filter-list { clear: both; margin: 0 0 10px 0; li.envira-tags-filter, li.envira-tag-filter { float: left; margin: 0 20px 10px 0; } .envira-tag-filter-link { font-size: 13px; font-weight: bold; } } /** * Breadcrumbs Addon */ .envira-breadcrumbs { display: block; margin: 0 0 20px 0; padding: 10px; background: #eee; a { text-decoration: none; } } /** * Main Wrapper */ .envira-gallery-wrap { width: 100%; margin: 0 auto 20px auto; /** * Pagination Addon */ .envira-pagination { margin: 0 0 20px 0; } /** * Description */ .envira-gallery-description { clear: both; } /** * Inner Wrapper */ .envira-gallery-public { width: 100%; margin: 0 auto 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /** * Clearing */ &.envira-clear { clear: both; &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: auto; visibility: hidden; zoom: 1; } } /** * Inner */ .envira-gallery-item-inner { position: relative; /** * Dynamic Positioning */ .envira-gallery-position-overlay { box-sizing: border-box; position: absolute; overflow: visible; z-index: 999; /** * Top Left */ &.envira-gallery-top-left { top: 0; left: 0; padding: 5px 0 0 5px; } /** * Top Right */ &.envira-gallery-top-right { top: 0; right: 0; padding: 5px 5px 0 0; text-align: right; } /** * Bottom Left */ &.envira-gallery-bottom-left { bottom: 0; left: 0; padding: 0 0 5px 5px; } /** * Bottom Right */ &.envira-gallery-bottom-right { bottom: 0; right: 0; padding: 0 5px 5px 0; text-align: right; } } } /** * Gallery Item */ .envira-gallery-item { float: left; /** * Link */ > .envira-gallery-link { display: block; outline: none; border: 0 none; position: relative; } /** * Image */ img { float: none; display: block; margin: 0 auto; padding: 0; max-width: 100%; } /** * Videos */ iframe, video { display: block; margin: 0 auto; width: 100%; } } /** * Column Widths and Clearing */ &.envira-gallery-1-columns { .envira-gallery-item { clear: both; width: 100%; } } &.envira-gallery-2-columns { .envira-gallery-item { width: 50%; &:nth-child(2n+1) { clear: both; } } } &.envira-gallery-3-columns { .envira-gallery-item { width: 33.33%; &:nth-child(3n+1) { clear: both; } } } &.envira-gallery-4-columns { .envira-gallery-item { width: 25%; margin: 0; padding: 0; box-sizing: border-box; &:nth-child(4n+1) { clear: both; } } } &.envira-gallery-5-columns { .envira-gallery-item { width: 20%; &:nth-child(5n+1) { clear: both; } } } &.envira-gallery-6-columns { .envira-gallery-item { width: 16.66%; &:nth-child(6n+1) { clear: both; } } } /** * Optional: Isotope * - if enabled, .enviratope is added to .envira-gallery-public * - no clearing on gallery items */ &.enviratope { .envira-gallery-item { clear: none !important; } } /** * Optional: CSS Animations * - if enabled, .envira-gallery-css-animations is added to .envira-gallery-public */ &.envira-gallery-css-animations { /** * Gallery Item */ .envira-gallery-item { /** * Image */ img { opacity: 0; transition: all .2s ease-in-out; } /** * Image Hover * - Always force opacity: 1, as the CSS Opacity setting for images may be less e.g. 0.5 */ a:hover { img { opacity: 1 !important; } } } } } } /** * Main Wrapper */ .envira-gallery-public.justified-gallery { /** * Inner */ .envira-gallery-item-inner { position: absolute; } .envira-exif { } /* .envira-gallery-description { &.envira-gallery-description-above { display: table; } }*/ } /** * RTL Support */ .envira-gallery-wrap.envira-gallery-rtl { /** * Inner Wrapper */ .envira-gallery-public { /** * Gallery Item */ .envira-gallery-item { float: right; } } } /** * Mobile Landscape Size to Tablet Portrait (devices and browsers) * - Envira Gallery Columns: If 4, 5 or 6, reduce to 3 columns. Isotope will detect change + resize automatically. */ @media only screen and (max-width: 768px) { /** * Main Wrapper */ .envira-gallery-wrap { /** * Inner Wrapper */ .envira-gallery-public { /** * Column Widths and Clearing */ // 4, 5 + 6 cols becomes 3 cols &.envira-gallery-4-columns { .envira-gallery-item { width: 33%; &:nth-child(4n+1) { clear: none; } &:nth-child(3n+1) { clear: both; } } } &.envira-gallery-5-columns { .envira-gallery-item { width: 33%; &:nth-child(5n+1) { clear: none; } &:nth-child(3n+1) { clear: both; } } } &.envira-gallery-6-columns { .envira-gallery-item { width: 33%; &:nth-child(6n+1) { clear: none; } &:nth-child(3n+1) { clear: both; } } } /** * Optional: Isotope * - if enabled, .enviratope is added to .envira-gallery-public * - no clearing on gallery items */ &.enviratope { .envira-gallery-item { clear: none !important; } } } } } /** * Mobile Landscape (devices and browsers) * - Envira Gallery Columns: Reduce to 2 column. Isotope will detect change + resize automatically. */ @media only screen and (max-width: 459px) { /** * Main Wrapper */ .envira-gallery-wrap { /** * Inner Wrapper */ .envira-gallery-public { /** * Column Widths and Clearing */ // 2, 3, 4, 5 + 6 cols becomes 2 cols &.envira-gallery-2-columns, &.envira-gallery-3-columns, &.envira-gallery-4-columns, &.envira-gallery-5-columns, &.envira-gallery-6-columns { .envira-gallery-item { width: 50% !important; &:nth-child(3n+1), &:nth-child(4n+1), &:nth-child(5n+1), &:nth-child(6n+1) { clear: none !important; } &:nth-child(2n+1) { clear: both !important; } } } /** * Optional: Isotope * - if enabled, .enviratope is added to .envira-gallery-public * - no clearing on gallery items */ &.enviratope { .envira-gallery-item { clear: none !important; } } } } } /** * Mobile Portrait (devices and browsers) * - Envira Gallery Columns: Reduce to 1 column. Isotope will detect change + resize automatically. */ @media only screen and (max-width: 320px) { /** * Main Wrapper */ .envira-gallery-wrap { /** * Inner Wrapper */ .envira-gallery-public { /** * Column Widths and Clearing */ // 1, 2, 3, 4, 5 + 6 cols becomes 2 cols &.envira-gallery-1-columns, &.envira-gallery-2-columns, &.envira-gallery-3-columns, &.envira-gallery-4-columns, &.envira-gallery-5-columns, &.envira-gallery-6-columns { .envira-gallery-item { width: 100% !important; &:nth-child(2n+1), &:nth-child(3n+1), &:nth-child(4n+1), &:nth-child(5n+1), &:nth-child(6n+1) { clear: both; } } } /** * Optional: Isotope * - if enabled, .enviratope is added to .envira-gallery-public * - no clearing on gallery items */ &.enviratope { .envira-gallery-item { clear: none !important; } } } } } /* ========================================================================== Envira Lightbox Gallery Styles ========================================================================== */ .envirabox-wrap, .envirabox-skin, .envirabox-outer, .envirabox-inner, .envirabox-image, .envirabox-wrap iframe, .envirabox-wrap object, .envirabox-nav, .envirabox-nav span, .envirabox-tmp, .envirabox-buttons, .envirabox-thumbs, .envirabox-wrap *, .envirabox-thumbs *, .envirabox-buttons * { background:none; border:0 none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; float:none; font-size:100%; height:auto; letter-spacing:normal; list-style:none; outline:none; position:static; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; width:auto; visibility:visible; overflow:visible; margin:0; padding:0; line-height:1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; -webkit-appearance:none; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; } .envirabox-wrap { position: absolute; top: 0; left: 0; z-index: 988020; } .envirabox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .envirabox-opened { z-index: 988030; } .envirabox-opened .envirabox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .envirabox-outer, .envirabox-inner { position: relative; } .envirabox-inner { overflow: hidden; /** * Dynamic Positioning */ .envirabox-position-overlay { box-sizing: border-box; position: absolute; overflow: visible; z-index: 988041; /* Beat the prev/next controls */ padding: 0; /** * Top Left */ &.envira-gallery-top-left { top: 0; left: 0; } /** * Top Right */ &.envira-gallery-top-right { top: 0; right: 0; text-align: right; } /** * Bottom Left */ &.envira-gallery-bottom-left { bottom: 0; left: 0; } /** * Bottom Right */ &.envira-gallery-bottom-right { bottom: 0; right: 0; text-align: right; } } } .envirabox-type-iframe .envirabox-inner { -webkit-overflow-scrolling: touch; } .envirabox-error { color: #444; font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .envirabox-image, .envirabox-iframe { display: block; width: 100%; height: 100%; } .envirabox-image { max-width: 100%; max-height: 100%; } #envirabox-loading, .envirabox-close, .envirabox-prev span, .envirabox-next span { background-image: url('images/envirabox_sprite.png'); } #envirabox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 988060; } #envirabox-loading div { width: 44px; height: 44px; background: url('images/envirabox_loading.gif') center center no-repeat; } .envirabox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 988040; } .envirabox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('images/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 988040; } .envirabox-prev { left: 0; } .envirabox-next { right: 0; } .envirabox-prev.envirabox-arrows-outside { left: -100px; } .envirabox-next.envirabox-arrows-outside { right: -100px; } .envirabox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 988040; visibility: hidden; } body.envira-touch .envirabox-nav span { visibility: visible; } .envirabox-prev span { left: 10px; background-position: 0 -36px; } .envirabox-next span { right: 10px; background-position: 0 -72px; } .envirabox-nav:hover span { visibility: visible; } .envirabox-tmp { position: absolute; top: -99999px; left: -99999px; max-width: 99999px; max-height: 99999px; overflow: visible !important; } a.envirabox-close, a.envirabox-nav, a.fancy-close:hover, a.envirabox-nav:hover { border: 0; } /* Overlay helper */ .envirabox-lock { overflow: visible !important; width: auto; } .envirabox-lock body { overflow: hidden !important; } .envirabox-lock-test { overflow-y: hidden !important; } .envirabox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 988010; background: url('images/envirabox_overlay.png'); } .envirabox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .envirabox-lock .envirabox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .envirabox-title { visibility: hidden; font-size: 13px; line-height: 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 988090; } .envirabox-opened .envirabox-title { visibility: visible; } .envirabox-title-float-wrap { position: absolute; bottom: auto; right: 50%; margin-top: 20px; z-index: 988050; text-align: center; } .envirabox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; line-height: 24px; white-space: normal; } .envirabox-title-float-wrap.envirabox-title-text-wrap .child { white-space: normal; } .envirabox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .envirabox-title-inside-wrap { padding-top: 10px; } .envirabox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } #envirabox-buttons { position: fixed; left: 0; width: 100%; z-index: 988050; } #envirabox-buttons.top { top: 10px; } #envirabox-buttons.bottom { bottom: 10px; } /* Allows for thumbnails to be displayed */ #envirabox-buttons.bottom.has-padding { bottom: 80px; } #envirabox-buttons.top.has-padding { top: 80px; } #envirabox-buttons ul { display: block; width: auto; height: 30px; margin: 0 auto; padding: 0; list-style: none; border: 1px solid #111; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); background: rgb(50,50,50); background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); } #envirabox-buttons ul li { float: left; margin: 0; padding: 0; } #envirabox-buttons ul li#envirabox-buttons-title span { display: block; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; line-height: 30px; padding: 0 10px; color: #fff; } #envirabox-buttons a { display: block; width: 30px; height: 30px; text-indent: -9999px; background-color: transparent; background-image: url('images/envirabox_buttons.png'); background-repeat: no-repeat; outline: none; opacity: 0.8; } #envirabox-buttons a:hover { opacity: 1; } #envirabox-buttons a.btnPrev { background-position: 5px 0; } #envirabox-buttons a.btnNext { background-position: -33px 0; border-right: 1px solid #3e3e3e; } #envirabox-buttons a.btnPlay { background-position: 0 -30px; } #envirabox-buttons a.btnPlayOn { background-position: -30px -30px; } #envirabox-buttons a.btnToggle, #envirabox-buttons a.btnFullscreen { background-position: 3px -60px; border-left: 1px solid #111; border-right: 1px solid #3e3e3e; width: 35px } #envirabox-buttons a.btnToggleOn, #envirabox-buttons a.btnFullscreenOn { background-position: -27px -60px; } #envirabox-buttons a.btnClose { border-left: 1px solid #111; width: 35px; background-position: -56px 0px; } #envirabox-buttons a.btnDisabled { opacity : 0.4; cursor: default; } /** * Lightbox: Thumbnails Helper */ #envirabox-thumbs { position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 988050; box-sizing: border-box; &.top { top: 2px; } &.top.has-other-content { top: 50px; } &.bottom { bottom: 2px; } &.bottom.has-other-content { bottom: 50px; } &.inline { position: absolute; } * { box-sizing: border-box; } } #envirabox-thumbs ul { position: relative; list-style: none; margin: 0; padding: 0; } #envirabox-thumbs ul li { border: 3px solid #fff; float: left; margin: 5px; opacity: 1; } #envirabox-thumbs ul li.active { opacity: 0.75; border: 3px solid #888; } #envirabox-thumbs ul li:hover { opacity: 0.75; } #envirabox-thumbs ul li a { display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none; } #envirabox-thumbs ul li img { display: block; position: relative; border: 0; padding: 0; max-width: none; } /* Retina stuff */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #envirabox-loading, .envirabox-close, .envirabox-prev span, .envirabox-next span { background-image: url('images/envirabox_sprite@2x.png'); background-size: 44px 152px; } #envirabox-loading div { background-image: url('images/envirabox_loading@2x.gif'); background-size: 24px 24px; } } /* #content img{ height: 0; width: 0; padding: 35px 120px; // adjust that depend on your image size background-image: url('YOUR_IMAGE_PATH'); background-repeat: no-repeat; }*/ /*.envira-gallery-public a.envira-gallery-link { background-image: url("../images/placeholders/spinner.gif"); background-repeat: no-repeat; background-position: center; background-size: 25%; display: inline-block; background-color: #f1f1f1; color: transparent; }*/ /*.envira-gallery-public img.envira-gallery-image { opacity: 0.0; }*/ /* .meter { box-sizing: unset; height: 20px; position: relative; margin: 10px 0 10px 0; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); } .meter > span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(43,194,83); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) ); background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden; } .meter > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } .animate > span:after { display: none; } @-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } @-moz-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .orange > span { background-color: #f1a165; background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } .red > span { background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } .nostripes > span > span, .nostripes > span:after { -webkit-animation: none; -moz-animation: none; background-image: none; } */