/** Theme Name: Peafowl Theme URL: http://chevereto.com/ Version: 3 Author: Rodolfo Berrios @Chevereto: 3.7.0 @requires peafowl.css */ /* * LAYOUT * --------------------------------------------- */ body { margin-top: 65px; padding-bottom: 15px; background: #FEFEFE; } body.landing { height: 100%; padding-bottom: 0; margin: 0; } .js body.landing { transform: scale(1.25); overflow: hidden; opacity: 0; } .js body.landing.load { -webkit-transition: -webkit-transform 400ms ease, opacity 350ms linear; transition: transform 400ms ease, opacity 350ms linear; transform: scale(1); opacity: 1; } .js body.landing.loaded { overflow: auto; } body.split { margin-top: 0; } .fluid .content-width, .content-width.fluid { width: 100%; /*max-width: 1620px;*/ } @media (min-width: 992px) { .content-width.wide { max-width: none; } } /* * IMAGE VIEWER * --------------------------------------------- */ .image-viewer { text-align: center; background: #F7F7F7; position: relative; min-height: 72px; overflow: hidden; } .image-viewer-main { display: inline-block; vertical-align: middle; } .image-viewer-container { display: block; margin: 0 auto; position: relative; } .image-viewer-container img { display: block; margin: 0 auto; max-height: 100%; width: auto; } .js .image-viewer-container img { position: absolute; /*background: #000;*/ width: 100%; height: auto; } .image-viewer .btn-download { position: absolute; top: 20px; right: 20px; z-index: 1; } .image-viewer-navigation {} .image-viewer-navigation a { z-index: 3; } .image-viewer-navigation a:hover { background-color: #AAA; background-color: rgba(0,0,0,.3); } #image-viewer-loading { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; border-radius: 100%; background: rgba(17,17,17,.9); } .image-viewer.full-viewer, #image .top-bar-placeholder { background: #111; } .top-bar-white .image-viewer.full-viewer, .top-bar-white #image .top-bar-placeholder { background: #FFF; } /* * LIKE BUTTON * -- */ .btn-like {} .btn-like .btn.btn-liked, .btn-like .btn.btn-unliked { display: none; } .btn-like[data-liked="0"] .btn-unliked { display: inline-block; } .btn-like[data-liked="1"] .btn-liked { display: inline-block; } /* * FOLLOW BUTTON * -- */ .btn-follow {} .btn-follow .btn.btn-followed, .btn-follow .btn.btn-unfollowed { display: none; } .btn-follow[data-followed="0"] .btn-unfollowed { display: inline-block; } .btn-follow[data-followed="1"] .btn-followed { display: inline-block; } /* * UPLOAD BOX * --------------------------------------------- */ #fullscreen-uploader-mask { z-index: 99; } .phone #fullscreen-uploader-mask { z-index: 400; } #anywhere-upload { z-index: 100; scroll: auto; -webkit-overflow-scrolling: touch; -webkit-transition: transform 250ms ease; transition: transform 250ms ease; } #anywhere-upload.hidden-visibility {} #anywhere-upload.hidden-visibility iframe { /* example: adsense */ visibility: hidden; } .phone #anywhere-upload { z-index: 500; } #anywhere-upload-paste { height: 0; opacity: 0; font-size: 0; } #anywhere-upload-paste * { display: none; } .upload-box { border-bottom: 0; } .upload-box-queue { text-align: center; /*width: 960px; /* nota: setear por js */ font-size: 0; margin-top: 40px; margin-bottom: 30px; /* thumbs add 10 */ } .upload-box-queue li { position: relative; text-align: center; display: inline-block; background: red; margin-right: 10px; margin-bottom: 10px; background: #EFEFEF; box-shadow: inset 0px 2px 10px 0px rgba(0,0,0,.07); } .tone-dark .upload-box-queue li { background: #222; } .upload-box-queue li, .upload-box-queue .block { border-radius: 0; } .ios .upload-box-queue li, .ios .upload-box-queue .block, .upload-box-queue .block.failed { border-radius: 0; } .upload-box-queue li, .upload-box-queue li.normal { width: 300px; /* 110 -> 77 -> 55 */ height: 300px; font-size: 14px; font-size: 1rem; } .upload-box-queue li.small { width: 77px; height: 77px; font-size: 9px; font-size: 0.643rem; } .upload-box-queue li.tiny { width: 54px; height: 54px; font-size: 7px; font-size: 0.5rem; } .upload-box-queue .block { width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; position: absolute; } .upload-box-queue a.image-link { display: none; } .upload-box-queue .completed a.image-link { display: block; position: absolute; overflow: hidden; z-index: 1; -webkit-transform: rotate(0.000001deg); /* workraround for webkit rounded:hover:overflow issue */ } .upload-box-queue .queue-item .queue-item-button, .upload-box-queue .queue-item .block.edit { display: block; position: absolute; cursor: pointer; z-index: 100; } .upload-box-queue .queue-item.completed:hover .queue-item-button { display: none; } /*.upload-box-queue .hover-display { opacity: 0; transition: opacity 300ms ease; } .upload-box-queue .queue-item:hover .hover-display { opacity: 1; }*/ .upload-box-queue .queue-item .queue-item-button { font-size: 7px; width: 21px; height: 21px; line-height: 23px; background: #FFF; color: #333; border-radius: 200px; left: -7px; box-shadow: 1px 1px 4px 0px rgba(0,0,0,.5); } .tone-dark .upload-box-queue .queue-item .queue-item-button { background: #333; color: #FFF; } .upload-box-queue .queue-item .queue-item-button.cancel { top: -7px; } .upload-box-queue .queue-item .queue-item-button.edit { top: 16px; font-size: 9px; } .upload-box-queue .big-icon { position: absolute; color: #DADADA; font-size: 5.36em; width: 1em; height: 1em; left: 50%; top: 50%; margin-left: -0.5em; margin-top: -0.5em; text-shadow: 1px 1px 0 rgba(255,255,255,.9); } .tone-dark .upload-box-queue .big-icon { color: #444; text-shadow: 1px 1px 0 rgba(0,0,0,.9); } .upload-box-queue .preview, .upload-box-queue .done { position: relative; overflow: hidden; } .upload-box-queue .preview .canvas { position: absolute; top: 50%; left: 50%; } .upload-box-queue .progress { position: absolute; } .upload-box-queue .progress-bar, .upload-box-queue .progress-percent { height: 100%; } .upload-box-queue .uploading .progress-percent { display: block; } .upload-box-queue .uploading.waiting .progress-percent { display: none; } .upload-box-queue .progress-percent { font-family: arial, helvetica, sans-serif; font-size: 2.86em; font-weight: normal; color: #FFF; text-shadow: 2px 2px 10px rgba(0,0,0,.8); text-align: center; width: 100%; height: 1em; position: absolute; top: 0.86em; z-index: 1; display: none; } .upload-box-queue .progress-percent b { font-weight: bold; } .upload-box-queue .progress-percent span { font-size: 0.5em; font-weight: normal; position: relative; } .upload-box-queue .progress-bar { float: right; width: 100%; display: none; } .upload-box-queue .progress-bar, .upload-box-queue .failed .result { background: rgba(255,255,255,.65); } .upload-box-queue .uploading .progress-bar { display: block; } .upload-box-queue .completed .result.done, .upload-box-queue .failed .result.failed { display: block; } .upload-box-queue .result { position: absolute; z-index: 1; display: none; } .tone-dark .upload-box-queue .progress-bar, .tone-dark .upload-box-queue .failed .result { background: rgba(0,0,0,.65); } .upload-box-queue .result .icon { position: absolute; width: 1em; font-size: 3.429em; color: #FFF; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; margin-left: -0.5em; opacity: 0.92; text-shadow: none; } .upload-box-queue .done .result .icon { text-shadow: 2px 2px 6px rgba(0,0,0,.2); } .upload-box-queue .failed .result .icon { color: #E84C3D; font-size: 3.429em; /* 48 */ } .upload-box-queue.queue-complete .cancel, .upload-box-queue.queue-complete .edit { display: none; } #uploaded-embed-toggle-combo { position: relative; } /* * USER BACKGROUND COVER * --------------------------------------------- */ #background-cover { height: 290px; background-color: #000; position: relative; } .phone #background-cover { height: 230px; } #background-cover.no-background { background-color: #F2F2F2; background-image: none !important; padding: 9px 0; height: auto; margin-top: 50px; } .tone-dark #background-cover.no-background { background: #101010; } #background-cover-wrap { height: 100%; overflow: hidden; position: relative; } #background-cover .content-width { text-align: center; } #change-background-cover { position: absolute; right: 10px; bottom: 10px; } #user-background-upload { top: 0; left: 0; width: 1px; height: 1px; } #background-cover-src { overflow: hidden; background-position: center center; background-size: cover; } #background-cover-src, #background-cover .loading-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #background-cover .loading-placeholder { background: rgba(0,0,0,.8); } /* * LIST STYLES * --------------------------------------------- */ .list-item.privacy-public .list-item-privacy { display: none; } .list-item-thumbs li { display: block; height: auto; } .list-item-thumbs li:last-child { } .list-item-thumbs li img { width: 100%; display: block; } .input-copy { position: relative; } .input-copy .btn-copy { font-size: 10px; position: absolute; right: 2px; top: 8px; background: #FFF; padding: 0 4px; height: 18px; line-height: 18px; text-transform: uppercase; cursor: pointer; border-width: 0 4px; border-style: solid; border-color: #FFF; display: none; } .input-copy .btn-copy:hover { background: #E5E5E5; } .list-item-image-tools { position: absolute; right: -2.4em; top: 0; opacity: 0; } .list-item:hover .hover-display.list-item-image-tools, .phone .list-item .hover-display.list-item-image-tools, .phablet .list-item .hover-display.list-item-image-tools { right: 0; } .list-item.selected .list-item-image-tools, .list-item.unsafe .list-item-image-tools { opacity: 1; right: 0; display: block; } .list-item.selected .list-item-image-tools li, .list-item.unsafe .list-item-image-tools li { display: none; } .phone .list-item .list-item-image-tools li, .phablet .list-item .list-item-image-tools li { display: block; } .list-item.unsafe:hover .list-item-image-tools li { display: block; } .list-item.selected .list-item-image-tools li.tool-select, .list-item.unsafe .list-item-image-tools li.tool-flag, .list-item.selected:hover .list-item-image-tools li { display: block; } .list-item.selected .list-item-image-tools li.tool-select .icon { color: #FFF; background: #27AE60; } .list-item-image-tools li { margin: 2px; cursor: pointer; position: relative; height: 2.4em; /* 36 */ line-height: 2.4em; font-size: 1em; } .list-item-image-tools li, .list-item-image-tools li * { display: block; color: inherit; } .list-item-image-tools li span { float: right; } .list-item-image-tools li .label { font-size: 0.86em; } .list-item-image-tools li .btn-icon { font-size: 1em; } .list-item-image-tools li .label { text-transform: uppercase; padding-left: 1em; padding-right: 0; display: none; height: 100%; } .list-item-image-tools li:hover .label { display: block; } .small-cols .list-item-image-tools li:hover .label { display: none; } .list-item.unsafe li:hover .label-flag-unsafe, .list-item.safe li:hover .label-flag-safe { display: none; } .unsafe-blur-on .list-item.unsafe .list-item-image .image-container { filter: blur(5px); -webkit-filter: blur(5px); transform: scale(1.04); } .unsafe-blur-on .list-item.unsafe:hover .list-item-image .image-container { filter: none; -webkit-filter: none; } .list-item-image-tools li .btn-icon { width: 2.4em; /* 36/15 */ height: 2.4em; line-height: 2.4em; color: #FFF; background: #000; background: rgba(0,0,0,.2); text-align: center; } .list-item-image-tools li:hover .btn-icon, .list-item-image-tools li .label { color: #FFF; background: rgba(0,0,0,.4); } .list-item.selected li.tool-select .btn-icon, .list-item.unsafe li.tool-flag .btn-icon { background: rgba(0,0,0,.4); } .list-item-album .tool-flag { display: none; } .list-item-image-tools li .label { text-shadow: 1px 1px 0 rgba(0,0,0,.1); } /* .label-edit { background: #2980B9; } .label-select { background: #27AE60; } .label-move { background: #F1C40F; } .label-delete { background: #E74C3C; } .label-flag { background: #333; } */ .list-item .list-item-avatar-cover, .list-item .list-item-avatar-cover > * { border-radius: 100%; } .list-item .list-item-avatar-cover { width: 160px; height: 160px; border: 0; background-color: #E5E5E5; position: absolute; left: 50%; top: 50%; /* margin-top: 0 !important; */ margin-top: -80px !important; margin-left: -80px !important; transition: all 300ms; } .tone-dark .list-item .list-item-avatar-cover { background: #555; } .list-item .list-item-avatar-cover > * { width: 100px; height: 100px; } .list-item .list-item-avatar-cover img { height: auto; box-shadow: 2px 2px 2px rgba(0,0,0,.3); } .list-item .list-item-avatar-cover .icon.empty { display: block; top: 50%; position: relative; margin-top: -45px; } .list-item .list-item-avatar-cover .icon.empty, .tone-dark .list-item-image .list-item-avatar-cover .icon.empty { color: #FFF; } .list-item-privacy { position: absolute; left: 0; top: 0; width: 2.4em; height: 2.4em; line-height: 2.4em; color: #FFF; text-shadow: 1px 1px 5px rgba(0,0,0,.5); } .tone-dark .list-item-privacy { background: rgba(0,0,0,.5); color: #FFF; } .list-item-like { position: absolute; height: 20px; top: 50%; margin-top: -8px; right: 10px; } .list-item-like .btn-like { font-size: 20px; cursor: pointer; display: none; } .list-item[data-liked="0"] .list-item-like .btn-like.btn-unliked { display: block; } .list-item[data-liked="1"] .list-item-like .btn-like.btn-liked { display: block; } /* settings */ .settings-group { display: none; } .settings-group-isolated { display: block; } /* stats */ .stats-block, a.stats-block { text-decoration: none; color: inherit; padding: 10px; } a.stats-block:hover { background: #F9F9F9; } .tone-dark a.stats-block:hover { background: #222; } .text-align-center .stats-big-number { text-align: center; } .stats-big-number .number { font-size: 44px; font-weight: 100; } .stats-big-number .number span { font-size: 24px; } .stats-big-number .label { display: block; } .text-content {} .text-content code { background: #F2F2F2; padding: 2px; border: 1px solid #DDD; } .tone-dark .text-content code { border-color: #222; background: #111; } #home-top-bar-placeholder { margin-top: -65px; } #home-cover { width: 100%; background-position: center center; background-color: #333; background-size: cover; color: #FFF; } body.landing #home-cover { margin: 0; padding: 0; height: 100%; } body.split #home-cover { margin: 0; padding: 132px 0 100px 0; } .tone-dark #home-cover { /*background: none;*/ } #home-cover-content { text-align: center; } body.landing #home-cover-content { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #home-cover-content p, #home-cover-content h1 { text-shadow: 1px 1px 2px rgba(0,0,0,.25) } /*#home-cover-content a { color: #FFF; }*/ #home-cover-content h1 { font-size: 2.4em; line-height: 120%; font-weight: 600; } @media (min-width: 768px) { #home-cover-content h1 { font-size: 2.7em; } } @media (min-width: 992px) { #home-cover-content h1 { font-size: 3em; } } #home-cover-content p { font-size: 22px; margin: 20px 0; font-weight: 100; } #home-cover-content .home-buttons { margin: 30px 0 0 0; } .home-buttons { margin: 20px 0; text-align: center; } .home-buttons a { font-size: 16px; text-transform: uppercase; min-height: 50px; line-height: 1.5; height: auto; text-align: center; letter-spacing: 2px; padding: 12px 30px; } #home-pics-feature { height: 700px; overflow: hidden; position: relative; margin: 10px 0; } #home-pics-feature.empty { height: 200px; } #home-pics-feature-overlay { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ width: 100%; height: 200px; position: absolute; bottom: 0; z-index: 1; } .tone-dark #home-pics-feature-overlay { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } #home-pics-feature.empty #home-pics-overlay { display: none; } #home-join { margin: 40px 0; } #home-join h1 { font-size: 38px; font-weight: 100; } #home-join p { margin: 20px 0; font-size: 18px; } /** * BANNERS */ .ad-banner { margin: 10px; text-align: center; } .ad-banner img { display: block; margin: 0 auto; } /* sizes */ .ad-banner-size-300x250 { width: 300px; height: 250px; } .ad-banner-size-336x280 { width: 336px; height: 280px; } .ad-banner-size-728x90 { width: 728px; height: 90px; } .ad-banner-size-300x600 { width: 300px; height: 600px; } .ad-banner-size-320x100 { width: 320px; height: 100px; } .ad-banner-size-320x50 { width: 320px; height: 50px; } .ad-banner-size-468x60 { width: 468px; height: 60px; } .ad-banner-size-234x60 { width: 234px; height: 60px; } .ad-banner-size-120x600 { width: 120px; height: 600px; } .ad-banner-size-120x240 { width: 120px; height: 240px; } .ad-banner-size-160x600 { width: 160px; height: 600px; } .ad-banner-size-300x1050 { width: 300px; height: 1050px; } .ad-banner-size-970x90 { width: 970px; height: 90px; } .ad-banner-size-970x250 { width: 970px; height: 250px; } .ad-banner-size-250x250 { width: 250px; height: 250px; } .ad-banner-size-200x200 { width: 200px; height: 200px; } .ad-banner-size-180x150 { width: 180px; height: 150px; } .ad-banner-size-125x125 { width: 125px; height: 125px; } #banner_before_home_cover { margin: 0; padding: 10px; background: #000; } #banner_image_image-viewer_top, #banner_image_image-viewer_foot { height: 90px; margin-left: auto; margin-right: auto; } body#maintenance { padding: 0; margin: 0; width: 100%; height: 100%; } #maintenance-wrapper { height: 100%; background-position: center center; background-color: #F2F2F2; background-size: cover; } #maintenance-content { color: #FFF; background: rgba(0,0,0,.4); padding: 10px 40px 40px; text-align: center; position: relative; top: 20%; } #maintenance-content #logo { position: relative; top: -70px; } #maintenance-content #logo img { height: 30px; } #maintenance-content h1 { font-size: 2.5em; margin-bottom: 20px; } #maintenance-content p { font-size: 1.2em; } #fullscreen-modal-box .image-preview .canvas { border: 0; display: block; margin: 0 auto; max-width: 100%; max-height: 500px; }