.imagify-plugins-error { overflow:hidden; padding-left:20px; list-style-type:disc } .imagify-plugins-error li { width:300px; line-height:30px } @media (max-width: 570px) { .imagify-plugins-error li { width: auto; } } .imagify-notice-dismiss.notice-dismiss { text-decoration: none; } .imagify-spinner { display: inline-block; width: 20px; height: 20px; margin-right: 5px; vertical-align: middle; background: rgba(0, 0, 0, 0) url("../images/spinner.gif") no-repeat scroll 0 0 / 20px 20px; opacity: 0.7; } .misc-pub-section.misc-pub-imagify h4 { font-size: 14px; margin-top: 5px; margin-bottom: 0; } /* Some Sweet alert styles */ .imagify-sweet-alert button { margin-top: 17px !important; height: 45px !important; letter-spacing: 3px; text-transform: uppercase !important; border-radius: 3px !important; background-color: #40b1d0 !important; box-shadow: 0 3px 0 #338ea6 !important; } .imagify-sweet-alert button.cancel { background: #777 !important; box-shadow: 0 3px 0 #444 !important; } .imagify-sweet-alert-signup .sa-confirm-button-container { width: 40%; } .imagify-sweet-alert-signup button { width: 100%; padding: 0 !important; } .imagify-sweet-alert .sa-input-error:before, .imagify-sweet-alert .sa-input-error:after, .imagify-sweet-alert .la-ball-fall { top: 25% !important; } #wpwrap { transition: all .4s; } .stop-scrolling #wpwrap { filter: blur(2px); } .stop-scrolling #wpwrap #wpadminbar { top: -32px; } /* Some basic colors */ .imagify-primary { color: #40b1d0; } .imagify-secondary { color: #8cc152; } #imagify-check-api-container { font-weight: bold; } #imagify-check-api-container .dashicons { font-size: 25px; } #imagify-check-api-container .dashicons-no:before { color: #f06e57; vertical-align: -1px; } #imagify-check-api-container .dashicons-yes:before { color: #8BC34A; vertical-align: -1px; } .imagify-valid { color: #8BC34A; } .imagify-chart { width: 33.33%; position: relative; } #imagify-overview-chart-legend { overflow: hidden; } .imagify-doughnut-legend { margin-top: 38px; list-style: none; } .imagify-doughnut-legend li { display: block; padding-left: 30px; position: relative; margin-bottom: 15px; border-radius: 5px; padding: 3px 8px 2px 31px; font-size: 14px; font-weight: 600; cursor: default; -webkit-transition: background-color 200ms ease-in-out; -moz-transition: background-color 200ms ease-in-out; -o-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; } .imagify-doughnut-legend li span { display: block; position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%; } .imagify-chart { float: left; margin-bottom: 20px; } td .imagify-chart { float: none; margin-bottom: 0; } .imagify-chart-container { position: relative; width: 180px; float: left; margin-right: 40px; } td .imagify-chart-container { width: 18px; height: 18px; float: none; margin-right: 10px; } td .imagify-chart { top: 4px; } .imagify-chart-percent { position: absolute; left: 0; right: 0; top: 50%; margin-top: -14px; text-align: center; font-size: 55px; font-weight: bold; color: #46B1CE; } .imagify-chart-percent span { font-size: 20px; vertical-align: super; } .media_page_imagify-bulk-optimization .media-item { margin: 0; } .media_page_imagify-bulk-optimization .media-item .progress { float: none; width: 100%; margin: 0; background: #1F2331; box-shadow: 0; border-radius: 0; } .media_page_imagify-bulk-optimization .media-item .percent { width: auto; padding: 0 5px; line-height: 1.85; font-size: 12px; } .media_page_imagify-bulk-optimization .media-item .progress, .media_page_imagify-bulk-optimization .media-item .percent { text-align: right; } .media_page_imagify-bulk-optimization .media-item .progress .bar { width: 1px; height: 22px; margin-top: 0; background: #46B1CE; border-radius: 0; overflow: visible; -webkit-transition: width .5s; transition: width .5s; } /* * * == Settings page * */ /* Basic HTML elements */ .imagify-settings a, .imagify-settings .button, .imagify-settings input, .imagify-welcome a, .imagify-welcome .button, .imagify-weolcome input { -webkit-transition: all .275s; transition: all .275s; } .imagify-settings a { color: #40b1d0; } .imagify-options-title { padding-bottom: .5em; border-bottom: 3px solid #F2F2F2; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; color: #40b1d0; } .imagify-settings, .imagify-settings p, .imagify-settings th { color: #5F758E; } @media (max-width: 782px) { .imagify-settings .form-table th { padding-top: 2em; padding-bottom: .5em; } } .imagify-settings .form-table td { vertical-align: top; } .imagify-settings .form-table th span { cursor: pointer; } .imagify-middle th { padding-top: 35px; } .imagify-settings .button, .imagify-welcome .button, .imagify-notice .button { height: auto; padding: 8px 20px; border: 0 none; font-size: 14px; font-weight: 600; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); } .imagify-notice .button-mini { padding: 2px 10px; font-size: 13px; } .button-primary.button-mini { padding: 2px 10px; } .imagify-settings .button.button-mini-flat { padding: 3px 6px 5px; font-size: 12px; box-shadow: none!important; line-height: 1.2; } .imagify-settings .button.button-mini-flat:hover, .imagify-settings .button.button-mini-flat:focus { box-shadow: none!important; } .imagify-title .button-ghost.button-ghost { padding: 2px 9px; border: 1px solid #40B1D0; font-size: 12px; font-weight: normal; color: #40B1D0; background: transparent; } .imagify-title .button-ghost.button-ghost:hover, .imagify-title .button-ghost.button-ghost:focus { border-color: transparent; color: #000; background: #40B1D0; } .button .dashicons { margin-right: 5px; vertical-align: middle; } .imagify-settings .button-primary.button-primary, .imagify-welcome .button-primary.button-primary { background: #40B1D0; color: #FFF; box-shadow: 0 3px 0 rgba(51, 142, 166, 1); text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799 } .imagify-settings .button-primary:hover, .imagify-settings .button-primary:focus, .imagify-welcome .button-primary:hover, .imagify-welcome .button-primary:focus { background: rgb(51, 142, 166); box-shadow: 0 3px 0 rgb(31, 122, 146); } .imagify-settings input[type="text"] { color: #4A4A4A; font-weight: 600; box-shadow: none; } .imagify-settings p.submit .button-primary { margin-left: 240px; } @media (max-width: 850px) { .imagify-settings p.submit .button-primary { margin-left: 0px; } .imagify-settings p.submit { text-align: center; } } /* Header & Subheader */ .imagify-title.imagify-title { position: relative; padding: 30px 50px; font-size: 23px; background: #2E3243; color: #FFF; } .imagify-settings .imagify-title + .imagify-notice { margin: 0; border-right: 1px solid #D9D9D9; padding-top: 15px; padding-bottom: 15px; } .imagify-logo { vertical-align: top; } .imagify-sub-header, .imagify-sub-title.imagify-sub-title, .imagify-settings div.submit { /* heavier is better */ margin: 0; padding: 20px; background: #F2F5F7; } .imagify-bulk-info { margin: 1em 1em 1em 240px; transition: margin .3s; } @media (max-width: 850px) { .imagify-bulk-info { margin: 1em; } } .imagify-bulk-info p { display: inline-block; text-align: left; width: 400px; max-width: 100%; font-weight: bold; } @media (min-width: 1500px) { .imagify-settings div.submit { display: table; width: 100%; } .imagify-settings div.submit > * { display: table-cell; vertical-align: middle; } .imagify-bulk-info { padding: 0 25px; text-align: right; } } .imagify-settings div.submit { margin-top: 2em; padding: 20px 0; } .imagify-sub-header th { text-align: right; } .imagify-sub-header .form-table { margin: 0; } .imagify-sub-header th, .imagify-sub-header td { padding-top: 0; padding-bottom: 0; } [for="api_key"] { padding-top: 5px; } .imagify-notice .imagify-rate-us.imagify-rate-us { position: relative; bottom: 0; right: 0; text-align: left; } .imagify-notice .imagify-rate-us .stars { margin: 0; } .imagify-rate-us.imagify-rate-us { position: absolute; bottom: 50%; right: 20px; text-align: right; margin-bottom: -2.4em; color: #FFF; } .imagify-rate-us a { color: #40B1D0; } .imagify-rate-us .stars { display: inline-block; margin: 2px 0 0 10px; text-decoration: none; letter-spacing: .2em; vertical-align: -1px; } .imagify-rate-us .stars .dashicons:before { font-size: 18px; } .imagify-rate-us a:hover, .imagify-rate-us a:focus { color: #FEE102; } @media (max-width: 1220px) { .imagify-rate-us.imagify-rate-us { position: static; margin-bottom: 0; text-align: left; } .imagify-rate-us.imagify-rate-us br { display: none; } .imagify-rate-us .stars { display: block; margin-left: 0; } } /* Sections */ .imagify-settings-section { padding: 10px 20px; } [id="imagify-settings"], .imagify-welcome .imagify-settings-section { border: 1px solid #D9D9D9; border-top: 0 none; background: #FFF; } .imagify-br { line-height: 2; } /* Some colors */ .imagify-important { color: #F5A623; } .imagify-info, .imagify-info a { color: #40B1D0; font-size: 12px; } .imagify-info { position: relative; display: inline-block; padding-left: 25px; vertical-align: top; } .imagify-info .dashicons { position: absolute; left: 0; top: -1px; } label + .imagify-info, label + .imagify-options-line, .imagify-visual-label { display: inline-block; max-width: 70%; margin-left: 15px; margin-top: 2px!important; -webkit-transition: opacity .3s; transition: opacity .3s; } .imagify-visual-label { vertical-align: -5px; } label[for="imagify_sizes_full"] + .imagify-info { vertical-align: middle; } .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label + .imagify-options-line, .imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label .imagify-visual-label { opacity: .5; } .imagify-settings.imagify-settings [type="checkbox"]:checked + label + .imagify-options-line, .imagify-settings.imagify-settings [type="checkbox"]:checked + label .imagify-visual-label { opacity: 1; } .imagify-checkbox-marged { max-width: 500px; margin-left: 45px; } /* Custom checkboxes in CSS */ .imagify-settings.imagify-settings [type="checkbox"]:not(:checked), .imagify-settings.imagify-settings [type="checkbox"]:checked { opacity: 0.01; } .imagify-settings.imagify-settings [type="checkbox"]:not(:checked):focus, .imagify-settings.imagify-settings [type="checkbox"]:checked:focus { box-shadow: none!important; /* system value to override */ outline: none!important; border: 0 none!important; } .imagify-settings [type="checkbox"]:not(:checked) + label, .imagify-settings [type="checkbox"]:checked + label { position: relative; padding-left: 6px; cursor: pointer; vertical-align: top; } /* checkbox aspect */ .imagify-settings [type="checkbox"]:not(:checked) + label:before, .imagify-settings [type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: 0 0 0 -24px; border: 2px solid #8BA6B4; background: #FFFFFF; border-radius: 4px; } /* checked mark aspect */ .imagify-settings [type="checkbox"]:not(:checked) + label:after, .imagify-settings [type="checkbox"]:checked + label:after { content: "✓"; position: absolute; font-size: 1.4em; top: 3px; left: -16px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; transition: all .2s; } /* disabled aspect */ .imagify-settings [type="checkbox"][disabled]:not(:checked) + label:before, .imagify-settings [type="checkbox"][disabled]:checked + label:before { border-color: #ccc; background: #ddd; } /* checked mark aspect changes */ .imagify-settings [type="checkbox"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .imagify-settings [type="checkbox"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } input[id^="imagify_sizes_"]:checked + label { font-weight: bold; } /* mini version */ .imagify-settings .mini[type="checkbox"]:not(:checked) + label:before, .imagify-settings .mini[type="checkbox"]:checked + label:before { width: 15px; height: 15px; border-width: 1px; border-radius: 2px; margin-top: 0; } .imagify-settings .mini[type="checkbox"]:not(:checked) + label:after, .imagify-settings .mini[type="checkbox"]:checked + label:after { content: "✓"; font-size: .9em; left: -21px; top: 1px; } /* focus aspect */ .imagify-settings [type="checkbox"]:not(:checked):focus + label:before, .imagify-settings [type="checkbox"]:checked:focus + label:before { border-style: dotted; border-color: #40b1d0; } /* Custom radio in CSS */ .imagify-inline-options { position: relative; display: table; width: 100%; max-width: 600px; border-collapse: collapse; } .imagify-inline-options:after { content: ""; display: table; clear: both; } .imagify-inline-options input[type="radio"]:not(:checked), .imagify-inline-options input[type="radio"]:checked { position: absolute; left: 5px; top: 5px; display: none; } .imagify-inline-options input[type="radio"]:not(:checked) + label, .imagify-inline-options input[type="radio"]:checked + label { position: relative; /* float: left; padding: 13px 40px; */ display: table-cell; padding: 13px 10px; text-align: center; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; color: #FFF; background: #2E3243; border-left: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset, inset -1px 0 0 rgba(255, 255, 255, 0.2); z-index: 2; -webkit-transition: all .275s; transition: all .275s; } .imagify-bulk-submit .imagify-inline-options input[type="radio"]:not(:checked) + label, .imagify-bulk-submit .imagify-inline-options input[type="radio"]:checked + label { margin-bottom: 1.75em; } .imagify-inline-options input[type="radio"]:not(:checked) + label:first-of-type, .imagify-inline-options input[type="radio"]:checked + label:first-of-type { border-radius: 3px 0 0 3px; } .imagify-inline-options input[type="radio"]:not(:checked) + label:last-of-type, .imagify-inline-options input[type="radio"]:checked + label:last-of-type { border-radius: 0 3px 3px 0; } .imagify-inline-options input[type="radio"]:checked + label { background: #8BC34A } .imagify-inline-options .imagify-info { margin-top: 15px; } .imagify-btn-info { display: block; font-size: 0.7em; letter-spacing: 0; line-height: 1; text-transform: none; } /* Some inputs */ #describe-resize-larger input { width: 5em; } /* Ads & columns */ .imagify-col { overflow: hidden; } .imagify-sidebar { float: right; width: 280px; margin-left: 25px; } .imagify-sidebar-section { border: 1px solid #BBB; background: #FFF; } .imagify-sidebar-section + .imagify-sidebar-section { margin-top: 2em; } @media (max-width: 760px) { .imagify-settings { display: flex; flex-direction: column; } .imagify-sidebar { order: 2; float: none; width: auto; margin-left: 0; margin-top: 25px; } .wp-media-products { text-align: center; } .wp-media-products li { display: inline-block; width: 100%; max-width: 276px; } } .imagify-sidebar-title { display: block; padding: 20px 15px; border-bottom: 1px solid #BBB; font-size: 14px; font-weight: bold; color: #23282d; background: #F2F5F7; } .imagify-sidebar-title img { vertical-align: top; margin-right: 5px; } .imagify-sidebar .wp-media-products { margin-top: 0; margin-bottom: -.5em; } .imagify-sidebar .wp-media-products .links { display: block; padding: 85px 25px 24px; text-align: center; background-color: #2E3243; background-size: contain; background-repeat: no-repeat; background-position: 50% 0; text-decoration: none; } .imagify-sidebar .wp-media-products .links p { margin: 1.5em auto; color: #FFF; } .imagify-sidebar .wp-media-products .wprocket-link { background-image: linear-gradient(to bottom, rgba(59, 30, 78 ,0), rgba(59, 30, 78 ,0) 130px, rgba(59 ,30 ,78 , 1) 210px), url("../images/sidebar-wp-rocket.jpg"); background-color: #3B1E4E; background-repeat: repeat-x, no-repeat; } .imagify-sidebar-content { padding: 10px 20px; } .imagify-mark-styled { display: inline-block; padding: 1px 2px 1px 4px; line-height: 1.3; font-weight: bold; background: #F7A933; transform-origine: 50% 50%; transform: rotateZ(-2deg) rotateX(-10deg) skewX(-2deg) skewY(-3deg); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .imagify-mark-styled span { display: inline-block; transform: rotateZ(2deg) rotateX(10deg) skewX(2deg) skewY(3deg); } .imagify-discount-code { margin: 0.35em 0 .5em; display: block; font-size: 2em; letter-spacing: .05em; font-weight: bold; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .imagify-big-text { font-size: 15px; font-weight: bold; } .imagify-big-text strong { font-size: 20px; } a.btn-rocket { display: block; font-size: 1.15em; padding: 12px; background: #F7A933; box-shadow: 0 3px 0 #D69626; border-radius: 3px; color: #FFF; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-decoration: none; } a.btn-rocket:hover, a.btn-rocket:focus { background: darkorange; box-shadow: 0 3px 0 darkorange; } /* * == Welcome section */ .imagify-welcome { margin: 30px 20px 0 0; } .imagify-welcome .baseline { display: inline-block; margin: .2em 0 0 2em; font-size: 17px; } .imagify-welcome .imagify-logo { vertical-align: middle; } .imagify-welcome-remove { position: absolute; top: 50%; right: 15px; margin-top: -8px; color: #FFF; text-decoration: none; } .imagify-columns { overflow: hidden; padding: 15px 0; counter-reset: cols; } .imagify-columns [class^="col-"] { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .imagify-columns .col-1-3 { width: 33.333%; padding-left: 28px; } .imagify-columns .col-1-2 { width: 50%; padding: 0 20px; } .imagify-columns .col-informations { width: 41.6%; padding-right: 30px; } .imagify-columns .col-statistics { width: 25%; } @media (max-width: 830px) { .imagify-columns [class^="col-"] { float: none; margin-bottom: 1.5em; } .imagify-columns .col-1-3, .imagify-columns .col-1-2 { width: auto; padding: 0 28px; clear: both; padding-top: 1em; } } .imagify-columns [class^="col-"] img { float: left; margin-right: 18px; } .imagify-col-content { overflow: hidden; } .imagify-col-title { margin: 0 0 15px 0; font-size: 23px; } .counter .imagify-col-title:before { counter-increment: cols; content: counter(cols) ". "; color: #40B1D0; } .imagify-col-desc { color: #5F758E; margin-bottom: 2em; } /* * == Imagify Notices */ .imagify-notice.imagify-notice { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; margin: 10px 20px 10px 2px; border: 0 none; background: #2E3243; box-shadow: none; color: #FFF; } @media (max-width:782px) { .imagify-notice.imagify-notice, .imagify-welcome { margin-right: 12px; } } @media (max-width: 450px) { .imagify-notice.imagify-notice { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .wrap .imagify-notice { margin: 5px 15px 2px; position: relative; } .imagify-notice-logo { padding: 18px 23px; background: #40B1D0; } .updated .imagify-notice-logo { background: #8BC34A; } .error .imagify-notice-logo { background: #D0021B; } .imagify-notice-title { font-size: 15px; } .imagify-notice-content { padding: 5px 23px; } .imagify-notice-content.imagify-notice-content p { margin: 0.65em 0; } .imagify-notice a { color: #40B1D0; } .imagify-notice a:hover, .imagify-notice a:focus { color: #FEE102; } .imagify-notice code { background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0; } /* * == Custom column & Metabox */ .column-imagify_optimized_file.column-imagify_optimized_file { width: 300px; text-align: center; vertical-align: middle; } .column-imagify_optimized_file > * { max-width: 235px; margin: 0 auto; } ul.imagify-datas-list.imagify-datas-list { margin: 0 auto; color: #555; font-size: 10px; } .compat-field-imagify .label { vertical-align: top; } .compat-field-imagify ul.imagify-datas-list { margin-top: 7px; font-size: 11px; } ul.imagify-datas-list .big { font-size: 12px; color: #40B1D0; } .imagify-data-item { overflow: hidden; } .imagify-data-item .imagify-chart { display: inline-block; top: 1px; width: 20px; vertical-align: middle; margin-bottom: 0; } li.imagify-data-item { clear: both; margin-bottom: 2px; } ul.imagify-datas-list .imagify-data-item span.data, ul.imagify-datas-list .imagify-data-item strong { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.imagify-datas-list .imagify-data-item span.data { text-align: left; padding-right: 5px; } .compat-field-imagify .imagify-datas-list .imagify-data-item .data { width: 130px; text-align: left; font-weight: bold; } .media-sidebar .imagify-datas-list .imagify-data-item .data { width: auto; float: none; } ul.imagify-datas-list .imagify-data-item strong { text-align: left; padding-left: 5px; } .media-sidebar .imagify-datas-list .imagify-data-item strong { width: auto; float: none; } .imagify-datas-more-action.imagify-datas-more-action { margin: .4em auto; background: linear-gradient(to bottom, transparent, transparent 49%, rgba(0,0,0,.075) 50%, rgba(0,0,0,.075) 58%, transparent 58%, transparent); } .imagify-datas-more-action a { display: inline-block; padding: 0 5px; background: #40B1D0; color: #FFF; text-transform: uppercase; font-size: 9px; font-weight: bold; line-height: 1.9; text-decoration: none; } .imagify-datas-more-action a.is-open { background: #555; } .imagify-datas-more-action a.is-open .dashicons { transform: rotate(180deg); } .imagify-datas-more-action a .dashicons { font-size: 14px; vertical-align: middle; line-height: .8; } .imagify-datas-more-action a .dashicons:before { vertical-align: middle; line-height: 20px; } .imagify-datas-more-action .the-text { display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; } ul.imagify-datas-details.imagify-datas-details { margin: .7em auto; } .imagify-datas-details strong { color: #40B1D0; } .imagify-datas-details .original { color: #555; } .imagify-datas-actions-links { overflow: hidden; border-top: 2px solid transparent; padding-top: 5px; font-size: 8px; } .imagify-datas-actions-links a { position: relative; display: inline-block; padding-left: 17px; text-decoration: none; font-weight: 600; } .compat-field-imagify .imagify-datas-actions-links { max-width: 300px; } .misc-pub-imagify .imagify-datas-actions-links { border-top: 2px solid #f2f2f2; padding-bottom: 5px; } /* Media edition */ .compat-field-imagify .imagify-datas-actions-links a, .misc-pub-imagify .imagify-datas-actions-links a { font-size: 10px; float: left; width: 50%; } .media-sidebar .compat-field-imagify .imagify-datas-actions-links a { display: block; width: auto; float: none; } /* Medias list */ .column-imagify_optimized_file .imagify-datas-actions-links a { margin: 0 .7em; padding-left: 15px; } .imagify-datas-actions-links a:only-child { float: none; width: auto; } .imagify-datas-details.is-open + .imagify-datas-actions-links { border-top-color: rgba(0,0,0,.075); } .imagify-datas-actions-links .dashicons { position: absolute; left: 0; top: 4px; width: 12px; margin-right: 2px; font-size: 11px; } /* * == Bulk page */ .imagify-title > h1 { padding: 0; } .imagify-title-right { display: table; float: right; margin-top: -10px; } .imagify-title-right p { margin: 0; } .imagify-title-right a { font-weight: bold; text-decoration: none; } .imagify-title-right > div { display: table-cell; vertical-align: middle; } .imagify-title-right .dashicons-arrow-down-alt2 { vertical-align: -4px; margin-left: 2px; } @media (max-width: 1200px) { .imagify-bulk .imagify-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .imagify-title-right { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; margin-top: 20px; } } .imagify-account, .imagify-account-link { padding-right: 15px; } .imagify-sep-v { width: 1px; background: rgba(255, 255, 255, .2); } .imagify-credit-left { position: relative; min-width: 280px; padding-left: 15px; } .imagify-meteo-icon { display: inline-block; height: 38px; vertical-align: middle; margin-right: 10px; } .imagify-user-plan { color: #40b1d0; } @media (max-width: 630px) { .imagify-title-right { display: block; width: auto; } .imagify-title-right > div { display: block; width: auto; margin-top: 10px; max-width: 100%; } .imagify-credit-left { padding-left: 0; } } /* .imagify-meteo-icon:after { opacity: 0; visibility: hidden; content: attr(data-title); position: absolute; top: 100%; left: 50%; font-size: 11px; line-height: 1.3; width: 150px; margin-left: -80px; padding: 6px 12px; background: #60758d; border-radius: 4px; -webkit-transition: opacity .3s; transition: opacity .3s; } .imagify-meteo-icon:hover:after, .imagify-meteo-icon:focus:after { opacity: 1; visibility: visible; } */ .imagify-meteo-title.imagify-meteo-title { color: #FFF; font-size: 17px; } .imagify-space-left { display: inline-block; min-height: 38px; min-width: 245px; vertical-align: middle; } .imagify-space-left > p { color: #FFF; } [class^="imagify-bar-"], #wp-admin-bar-imagify-profile [class^="imagify-bar-"] { position: relative; height: 15px; width: 100%; background: #60758D; color: #FFF; font-size: 10px; } .base-transparent { background: transparent; } [class^="imagify-bar-"].right-outside-number { -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 45px; } .right-outside-number .imagify-barnb { display: block; margin-right: -45px; text-align: right; font-weight: bold; line-height: 15px; } .imagify-progress-value, #wp-admin-bar-imagify-profile .imagify-progress-value { position: absolute; top: 0; right: 0; left: 0; bottom: 0; text-align: center; line-height: 13px; font-weight: bold; } .imagify-progress, #wp-admin-bar-imagify-profile .imagify-progress { height: 15px; } .imagify-bar-positive .imagify-progress { background: #8CC152; } .imagify-bar-positive .imagify-barnb { color: #8CC152; } .imagify-bar-negative .imagify-progress { background: #73818C; } .imagify-bar-negative .imagify-barnb { color: #73818C; } .imagify-bar-neutral .imagify-progress { background: #F5A623; } .imagify-space-left .imagify-bar-negative .imagify-progress { background: #D0021B; } /* admin bar version */ #wpadminbar #wp-admin-bar-imagify-profile * { line-height: 1.5; white-space: initial; } #wpadminbar #wp-admin-bar-imagify .ab-submenu { padding-bottom: 0; } #wpadminbar #wp-admin-bar-imagify-profile .ab-item { height: auto; padding: 0 13px; } #wpadminbar #wp-admin-bar-imagify-profile { min-width: 200px; padding: 15px 0 10px; margin-top: 0.7em; background: #222; } #wp-admin-bar-imagify .dashicons { font-family: "dashicons"; font-size: 18px; vertical-align: middle; margin: 0 5px 0 0; } #wp-admin-bar-imagify .button-text { display: inline-block; vertical-align: middle; } #wp-admin-bar-imagify .imagify-abq-row { display: table; width: 100%; } #wp-admin-bar-imagify .imagify-abq-row + .imagify-abq-row { margin-top: .75em; } #wp-admin-bar-imagify .imagify-abq-row > * { display: table-cell; } #wp-admin-bar-imagify-profile .imagify-meteo-icon { padding-right: 7px; } #wp-admin-bar-imagify-profile .imagify-meteo-icon img { width: 37px; } #wp-admin-bar-imagify-profile .imagify-meteo-title { font-size: 17px; } #wp-admin-bar-imagify-profile .imagify-meteo-subs { color: #72889F; } #wpadminbar #wp-admin-bar-imagify-profile strong { font-weight: bold; } #wpadminbar #wp-admin-bar-imagify-profile .imagify-user-plan, #wpadminbar #wp-admin-bar-imagify-profile a { padding: 0; color: #40B1D0; } #wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link { display: table; } #wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link > * { display: table-cell; } #wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left { max-width: 210px; min-width: 210px; width: 210px; } #wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left p { font-size: 12px; } #wp-admin-bar-imagify-profile .imagify-error, #wp-admin-bar-imagify-profile .imagify-warning { padding: 10px; margin: 0 -13px -13px; } #wp-admin-bar-imagify-profile .imagify-error p + p, #wp-admin-bar-imagify-profile .imagify-warning p + p { margin-top: .5em; } #wp-admin-bar-imagify-profile .imagify-error p + p + p, #wp-admin-bar-imagify-profile .imagify-warning p + p + p { margin-top: 1em; } .btn-ghost, #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost { display: inline-block; height: auto; padding: 7px 10px; border: 1px solid #FFF; text-align: center; background: transparent; color: #FFF; border-radius: 3px; transition: all .275s; } .btn-ghost:hover, .btn-ghost:focus, #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:hover, #wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:focus { background: #FFF; color: #888; } .txt-center { text-align: center; } .imagify-list-dash li { position: relative; padding-left: 24px; } .imagify-list-dash li:before { content: ""; position: absolute; left: 0; top: 9px; height: 1px; width: 12px; background: #5f758e; } .imagify-sub-title.imagify-sub-title { font-size: 23px; background: #FFF; color: #2E3243; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9; font-weight: lighter; } .imagify-sub-title .icon-bulk { margin-right: 10px; vertical-align: middle; } .imagify-sub-title .title-text { display: inline-block; line-height: 1; vertical-align: middle; } .imagify-bulk .imagify-settings-section { border: 1px solid #D9D9D9; border-top: 0; background: #F2F5F7; color: #4A4A4A; } .imagify-bulk .imagify-settings-section p, .imagify-bulk .imagify-settings-section li, .imagify-bulk .imagify-settings-section h3 { color: #4A4A4A; } .imagify-bulk .imagify-settings-section h3 { margin-bottom: 2em; } .imagify-bulk-submit { margin-top: 4em; } #imagify-bulk-action { float: left; } #imagify-bulk-action + .imagify-tooltips { overflow: hidden; display: block; } .imagify-title .imagify-tooltips { position: absolute; top: 100%; left: 0; } .imagify-tooltips .icon-round { float: left; display: inline-block; width: 28px; height: 28px; border: 1px solid #FFF; margin-right: 8px; margin-bottom: 8px; font-size: 17px; font-style: italic; line-height: 29px; font-weight: bold; text-align: center; border-radius: 50%; } .imagify-tooltips .tooltip-content { display: block; position: relative; max-width: 250px; padding: 7px 15px 8px; background: #2e3242; color: #FFF; font-size: 10px; border-radius: 3px; } .imagify-tooltips.right .tooltip-content { margin-left: 12px; } .imagify-tooltips.bottom .tooltip-content { margin-top: 4px; } .imagify-inline-options label .tooltip-content { position: absolute; left: 0; right: 0; top: 100%; text-transform: none; font-size: 10px; letter-spacing: 0; text-align: center; } .imagify-tooltips .tooltip-content:after { content: ""; position: absolute; } .imagify-tooltips.right .tooltip-content:after { top: 16px; left: -6px; border-right: 8px solid #2e3242; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .imagify-tooltips.bottom .tooltip-content:after { top: -5px; left: 50%; margin-left: -3px; border-bottom: 6px solid #2e3242; border-left: 6px solid transparent; border-right: 6px solid transparent; } .imagify-space-tooltips .tooltip-content { max-width: 280px; margin-top: 20px; margin-left: 0; padding: 5px 15px 5px; font-size: 13px; background: #40B1D0; box-shadow: 0 3px 0 #338EA6; } .imagify-space-tooltips .tooltip-content:after { top: -14px; left: 50%; margin-left: -7px; border: 0 none; border-bottom: 15px solid #40B1D0; border-left: 15px solid transparent; border-right: 15px solid transparent; } .tooltip-content.tooltip-table { display: table; width: 100%; } .tooltip-content.tooltip-table > * { display: table-cell; vertical-align: middle; } .tooltip-content .cell-icon { width: 28px; } .tooltip-content .cell-icon .icon { margin-bottom: 0; } .tooltip-content .cell-text { padding: 5px 10px 5px 0; line-height: 1.3; } .tooltip-content .cell-sep { width: 1px; background: rgba(255, 255, 255, .4); } .tooltip-content .cell-cta { padding-left: 10px; } .tooltip-content .cell-cta a { display: block; color: #FFF; width: 100%; height: 100%; white-space: nowrap; } .imagify-number-you-optimized .number { float: left; margin-right: 15px; font-size: 36px; font-weight: bold; line-height: 1.1; } .imagify-number-you-optimized .text { display: block; overflow: hidden; font-size: 12px; } .imagify-number-you-optimized { padding-bottom: 0.85em; margin-bottom: 1.35em; overflow: hidden; border-bottom: 1px solid rgba(0,0,0, 0.05); } .imagify-bars p { font-weight: bold; font-size: 12px; margin-bottom: 0; } .imagify-bars + .imagify-number-you-optimized { border-bottom: 0; padding-top: 0.85em; } .imagify-bars + .imagify-number-you-optimized p { color: #46b1ce; } /* * == Bulk table */ .imagify-bulk-table { margin-top: 2em; max-height: 600px; max-height: 60vh; overflow: auto; } .imagify-bulk-table table { width: 100%; border-spacing: 0; border-collapse: collapse; border: 1px solid #D3D3D3; } .imagify-bulk-table td { padding: 8px 15px; } .imagify-bulk-table thead tr, .imagify-bulk-table thead th { background: #2E3242; } .imagify-bulk-table tfoot tr, .imagify-bulk-table tfoot th { background: #73818C; } .imagify-bulk-table thead th { padding: 14px 15px; text-align: left; color: #F2F5F7; font-weight: bold; font-size: 14px; } .imagify-bulk-table tfoot td { padding: 14px 15px; color: #F9FAFA; } .imagify-bulk-table tbody tr, .imagify-bulk-table tbody td { background: #FFF; } .imagify-bulk-table tbody tr:nth-child(odd), .imagify-bulk-table tbody tr:nth-child(odd) td { background: #F2F5F7; } .imagify-bulk-table .imagify-row-progress { display: none; } .imagify-bulk-table .imagify-row-progress, .imagify-bulk-table .imagify-row-progress td { height: 15px; padding: 0; } .imagify-bulk-table .imagify-no-uploaded-yet td { height: 200px; font-size: 17px; letter-spacing: .1em; word-spacing: .12em; vertical-align: middle; text-transform: uppercase; font-weight: bold; text-align: center; color: #999; background-color: #FFF; } .imagify-row-complete { padding: 35px 20px; margin-top: 2em; background: #8BC34A; color: #FFF; text-shadow: 0 0 2px rgba(0,0,0,.1); } .imagify-row-complete .imagify-ac-chart { margin-top: 3px; } .imagify-row-complete p { color: #FFF; margin: 0; } @-webkit-keyframes congrate { 0% { opacity: 0; -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } ​ @keyframes congrate { 0% { opacity: 0; transform: scale(1); } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .imagify-row-complete.done { -webkit-animation: congrate 500ms ease-in-out; animation: congrate 500ms ease-in-out; } .imagify-all-complete { margin: 1.5em 0; } .imagify-all-complete > div { display: inline-block; vertical-align: middle; } .imagify-ac-report { min-width: 310px; } .imagify-ac-chart { width: 46px; height: 46px; float: left; margin: 0 20px 0 10px; } .imagify-ac-report-text { overflow: hidden; } .imagify-ac-report-text p { line-height: 1.3; } .imagify-ac-rt-big { font-weight: bold; font-size: 24px; letter-spacing: 0.15em; word-spacing: 0.15em; text-transform: uppercase; } .imagify-ac-share { text-align: right; } .imagify-ac-share-content { display: inline-block; padding: 10px 15px; background: rgba(255,255,255,.2); } .imagify-ac-share-content > * { display: inline-block; vertical-align: middle; } .imagify-bulk-table .imagify-ac-share-content p { margin-right: 5px; } .imagify-share-networks, .imagify-share-networks li { margin: 0; } .imagify-share-networks li { display: inline-block; } .imagify-share-networks a { display: inline-block; vertical-align: -7px; margin: 0 5px; text-decoration: none; color: #FFF; } /* TD's width */ .imagify-cell-filename { max-width: 200px; } .imagify-cell-status { max-width: 145px; } .imagify-cell-status .dashicons-warning { margin-right: 2px; } .imagify-cell-thumbnails { max-width: 120px; } td.imagify-cell-filename { text-overflow: clip; /* ellipsis replace all the text by ... :`/ */ white-space: nowrap; overflow: hidden; } .imagify-bulk-table td.imagify-cell-totaloriginal { padding-right: 78px; } .imagiuploaded, .imagifilename { display: inline-block; vertical-align: middle; } .imagifilename { font-size: 12px; } .imagiuploaded { width: 33px; height: 33px; margin-right: 5px; margin-left: -8px; overflow: hidden; background: url(../images/upload-image.png) 0 0 no-repeat; background-size: cover; } .imagiuploaded img { max-widht: 100%; height: auto; } .imagistatus { color: #8CA6B3; text-transform: uppercase; font-weight: bold; } .status-compressing { color: #46B1CE; } .status-error { color: #CE0B24; } .status-warning { color: #f5a623; } .status-complete { color: #8CC152; } .imagify-error { background: #D0021B; color: #FFF; } .imagify-warning, #wpadminbar .imagify-warning * { background: #f5a623; color: #FFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } .imagify-bulk-table .imagify-cell-thumbnails { text-align: center; } .imagify-cell-percentage, .imagify-cell-savings { color: #46B1CE; font-weight: bold; } .imagify-cell-optimized { font-weight: bold; } .imagify-cell-totaloriginal { text-align: right; } /* icon rotate */ .dashicons.rotate { -webkit-animation: icon-rotate 2.6s infinite linear; animation: icon-rotate 2.6s infinite linear; } .dashicons-admin-generic { transform-origin: 48.75% 51.75%; } /* Imagify Modal */ .imagify-modal { display: flex; flex-direction: column; align-items: center; justify-content: center; } .js .imagify-modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #1F2332; background-color: rgba(31,35,50,.95); z-index: 99999; } .imagify-modal-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 800px; max-width: 95%; max-height: 90vw; overflow: auto; padding: 20px 25px; margin: 1em auto; background: #FFF; box-shadow: 1px 1px 4px rgba(0,0,0,.7); border-radius: 3px; } #imagify-visual-comparison .imagify-modal-content { max-width: 1400px; background: transparent; padding: 5px; box-shadow: none; border-radius: 0; } .imagify-modal .h2 { margin: .5em 0; color: #8ba6b4; font-weight: normal; font-size: 24px; letter-spacing: 0.075em; text-align: center; } .imagify-modal .h3 { color: #40b1d0; font-weight: normal; font-size: 18px; letter-spacing: 0.075em; text-align: center; } .text-justify { text-align: justify; } .imagify-modal .close-btn { display: none; visibility: hidden; position: absolute; right: 20px; top: 20px; font-size: 1.2em; border: 0; background: transparent none; border-radius: 0; cursor: pointer; } .imagify-modal .close-btn:hover, .imagify-modal .close-btn:focus { color: #40b1d0; } .js .imagify-modal .close-btn { display: block; visibility: visible; } #imagify-visual-comparison .close-btn { top: 50px; right: 5px; width: 33px; height: 33px; padding: 1px 0 0 2px; border: 1px solid #F2F2F2; color: #F2F2F2; line-height: 19px; text-align: center; border-radius: 50%; } .imagify-modal .imagify-comparison-title { font-size: 28px; margin-bottom: 1em; color: #F2F2F2; text-align: left; } .imagify-modal .imagify-comparison-title .twentytwenty-duo-buttons { position: static; margin: 0 10px 0 15px; } .imagify-comparison-title .twentytwenty-duo-buttons button { float: none; padding: 6px 12px; font-size: 16px; text-transform: none; border: 1px solid #40B1D0; color: #888899; letter-spacing: 0; } .imagify-comparison-title .twentytwenty-duo-buttons button:focus { outline: none; box-shadow: none; } .imagify-comparison-title .twentytwenty-duo-buttons .selected { border: 1px solid #40B1D0; color: #FFF; background: #40B1D0; } .imagify-comparison-levels { margin: 15px 0; overflow: hidden; } .imagify-comparison-levels div { display: none; min-width: 175px; font-size: 11px; } .imagify-comparison-levels .imagify-chart, .imagify-comparison-levels .imagify-chart-container { width: 25px; float: none; margin: 0; } .imagify-c-level.go-left { float: left; } .imagify-c-level.go-right { float: right; } .imagify-c-level.go-right, .imagify-c-level.go-left { display: table; } .imagify-c-level .imagify-c-level-row { display: table-row; margin: 0; color: #FFF; } .imagify-c-level-row > span { display: table-cell; padding: 2px 0; } .imagify-c-level-row .value { text-align: right; padding-left: 5px; } .imagify-c-level-row .value.level { color: #40b1d0; } .imagify-c-level-row .value.size { color: #8bc34a; font-weight: bold; } .imagify-c-level-row .value .imagify-chart { top: 1px; } @-webkit-keyframes icon-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes icon-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .imagify-menu-bar-img { margin-top: 1em; } /** * Visual Comparison */ .imagify-modal .loader { position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; opacity: 0; visibility: hidden; transition: opacity .4s; } .imagify-modal .loading .loader { visibility: visible; opacity: 1; } .imagify-settings .imagify-visual-comparison-text { margin-top: 1em; color: #40b1d0; font-weight: bold; }