%PDF-
%PDF-
Mini Shell
Mini Shell
@import "variables";
@include body-class {
.sui-wrap {
/**
* Onboarding modals
*
* @since 3.1
*/
.checking-files-dialog {
.sui-box { background-color: #fff; }
.sui-box-title {
display: flex !important;
flex-direction: column !important;
}
.sui-icon-loader {
margin-bottom: 20px;
margin-right: 0 !important;
color: #AAAAAA;
}
}
.smush-onboarding-dialog {
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.sui-dialog-content {
max-width: 560px;
.sui-box { background-color: transparent; }
#smush-onboarding-content {
opacity: 0;
background-color: #fff;
animation-duration: 0.7s;
animation-fill-mode: both;
transform-origin: center;
transform-style: preserve-3d;
&.loaded {
opacity: 1;
}
&.fadeInLeft {
opacity: 1;
animation-name: fadeInLeft;
}
&.fadeInRight {
opacity: 1;
animation-name: fadeInRight;
}
}
}
// Start overwrite sui styles.
.sui-box .sui-box-header {
padding: 0 !important;
.sui-dialog-image {
width: 100% !important;
height: auto !important;
margin-left: -50% !important;
border: 0 !important;
position: relative !important;
}
.sui-box-title {
font: bold 22px/30px "Roboto", Arial, sans-serif !important;
}
}
// End overwrite styles.
.sui-box-body {
p {
color: #888;
max-width: 340px;
margin: 0 auto 30px;
&.smush-onboarding-note {
margin-top: 30px;
margin-bottom: 0;
}
}
.smush-onboarding-toggle {
background-color: #F8F8F8;
height: 60px;
margin: 20px -20px 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.sui-button { margin: 0; }
.sui-button-gray { margin-top: 30px; }
button[type=submit] { margin-top: 25px; }
}
.smush-onboarding-arrows a {
position: absolute;
top: 45%;
width: 40px;
height: 40px;
border-radius: 20px;
padding-top: 3px;
&:not(.sui-hidden) {
display: flex;
justify-content: center;
align-items: center;
}
&:hover { background-color: rgba(217, 217, 217, 0.2); }
&:first-of-type {
left: -55px;
padding-right: 2px;
}
&:last-of-type {
right: -55px;
padding-left: 2px;
}
i:before { color: #fff; }
}
.smush-onboarding-dots {
display: flex;
margin-top: 15px;
margin-bottom: 10px;
a { margin: 0 5px; }
span {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: #E6E6E6;
display: block;
&.active { background-color: #666; }
}
}
.smush-onboarding-skip-link {
position: absolute;
bottom: -50px;
opacity: 0.7;
font-size: 13px;
color: #fff !important;
letter-spacing: -0.25px;
line-height: 22px;
text-align: center;
width: 100%;
}
@media screen and (max-width: 782px) {
.sui-dialog-content { padding: 0 30px; }
.sui-dialog-image { display: block !important; }
.smush-onboarding-arrows { display: none; }
}
@media screen and (max-width: 320px) {
.sui-box { margin: 46px 0 0 !important; }
.smush-onboarding-skip-link { bottom: -30px; }
.sui-dialog-content { padding: 0 10px; }
.sui-box-body > * { margin-bottom: 10px !important; }
.sui-box-footer { padding: 0 0 10px !important; }
}
} // End .smush-onboarding-dialog
// Overwrite extra padding on progress bars in modals.
.sui-dialog-content .sui-progress-block {
margin-bottom: 0;
}
// Bulk smush and directory smush (overwrite when the limit is exceeded)
.wp-smush-exceed-limit {
.wp-smush-progress-inner {
background: #FECF2F !important;
}
}
// Directory smush overwrites when limit exceeded
.wp-smush-progress-dialog.wp-smush-exceed-limit {
.sui-hidden {
display: block;
}
.sui-progress {
.sui-progress-icon {
.sui-icon-loader {
@include icon( before, info );
&:before {
color: #fecf2f;
animation: none;
}
}
}
}
.sui-progress-bar span {
background: #fecf2f;
}
.sui-box-footer .sui-actions-right:not(.sui-hidden) {
margin-left: 10px;
margin-right: auto;
float: left;
.sui-button {
padding: 5px 16px 7px;
border: 2px solid #ddd;
background: transparent;
color: #888;
}
}
}
.wp-smush-bulk-progress-bar-wrapper {
margin-bottom: 30px;
.sui-progress-state {
span {
display: inline-block;
}
}
}
#sui-cross-sell-footer h3 {
text-align: center;
}
// Bulk Smush error messages: Start.
.smush-final-log {
.smush-bulk-error-row {
align-content: center;
align-items: center;
border-bottom: 1px solid #E6E6E6;
box-shadow: inset 2px 0 0 0 #FECF2F;
display: flex;
height: 52px;
justify-content: space-between;
margin: 0 -30px;
padding: 0 20px;
font-size: 13px;
letter-spacing: -0.25px;
&:first-child {
border-top: 1px solid #E6E6E6;
}
.smush-bulk-image-data {
display: flex;
align-content: center;
align-items: center;
flex-basis: 100%;
&:before {
content: "I";
font-family: wpmudev-plugin-icons !important;
speak: none;
font-size: 1em;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-right: 10px;
color: #FECF2F;
}
.sui-icon-photo-picture {
font-size: 12px;
border-radius: 4px;
background-color: #E6E6E6;
margin-right: 10px;
padding-left: 9px;
padding-top: 1px;
width: 30px;
height: 30px;
&:before {
width: 30px;
height: 30px;
}
}
.attachment-thumbnail {
border-radius: 4px;
width: 30px;
height: 30px;
margin-right: 10px;
}
.smush-image-name {
line-height: 15px;
font-weight: 500;
margin-right: 10px;
word-break: break-all;
}
.smush-image-error {
line-height: 15px;
word-break: break-all;
margin-right: 10px;
}
}
.smush-bulk-image-actions {
flex-basis: 30px;
button:disabled {
background-color: #F2F2F2;
cursor: default;
.sui-icon-eye-hide:before {
color: lighten( #333333, 50% );
}
}
}
@media screen and (max-width: 600px) {
height: auto;
.smush-bulk-image-data {
flex-wrap: wrap;
padding: 10px 20px;
}
.smush-image-error {
margin-top: 10px;
}
}
}
.smush-bulk-errors-actions {
margin: 30px 0 10px;
}
} // Bulk Smush error messages: End.
.tc {
text-align: center;
}
.wp-smush-page-header {
.sui-actions-right {
.sui-button {
vertical-align: middle;
}
}
}
.sui-box {
.sui-box-body {
&.smush-summary-box-body {
padding: 15px 30px 0;
}
.wp-smush-enable-lossy {
color: #888;
font-size: 13px;
line-height: 22px;
margin-top: 20px;
}
}
}
.sui-actions-right {
float: right;
display: inline-block;
font-size: 13px;
}
.wp-smush-resize-settings-wrap,
.wp-smush-png_to_jpg-wrap,
.wp-smush-image-size-list {
background-color: #FFFFFF;
border: 1px solid #E6E6E6;
border-radius: 5px;
color: #555;
margin-left: 48px;
overflow: hidden;
padding: 30px;
vertical-align: middle;
margin-top: 10px;
margin-bottom: 10px;
.sui-checkbox {
.sui-description {
font-size: 13px;
}
}
}
// Settings - keep data.
.smush-keep-data-form-row {
.sui-tabs-menu,
.sui-button-ghost {
margin-top: 15px;
}
}
.sui-summary-smush {
background-size: 180px;
}
.sui-summary-smush-nextgen {
background-size: 170px;
}
.smush-pro-features {
.smush-pro-feature-title {
@include icon(before, check-tick);
font-weight: 500;
line-height: 30px;
color: #333;
padding: 0 0 0 30px;
position: relative;
&:before {
color: #43a9e4;
vertical-align: middle;
margin-left: -30px;
margin-right: 10px;
margin-top: 0;
font-size: 18px;
position: relative;
}
}
.smush-pro-feature-desc {
color: #888888;
font-size: 13px;
line-height: 22px;
padding: 0 0 0 33px;
}
}
.sui-upsell-row {
margin-top: 30px;
@media screen and (min-width: 1921px) {
margin-top: 60px;
}
.sui-upsell-image {
&.sui-upsell-image-smush:not(.integrations-upsell-image) {
bottom: -30px;
width: 85px;
}
}
}
.sui-progress-close.wp-smush-cancel-bulk.sui-hidden,
.sui-progress-close.wp-smush-all.sui-hidden {
display: none !important;
}
.sui-notice {
&.wp-smush-all-done {
margin-top: 0 !important;
}
&.smush-notice-sm {
p {
font-size: 13px;
}
}
&.smush-highlighting-notice,
&.smush-highlighting-warning {
margin-top: 10px;
margin-bottom: 10px;
}
}
.sui-hidden, button.sui-hidden {
display: none;
}
.sui-loading {
font-size: 18px;
}
span {
&.add-dir-loader {
padding-right: 10px;
font-size: 18px;
}
}
.sui-button {
&.smush-button-check-success,
&.smush-button-check-success:hover {
background: #d1f1ea !important;
color: #1abc9c !important;
pointer-events: none;
@include icon(before, check-tick);
&:before {
padding-right: 5px;
color: $notice-success-icon-color;
}
}
&.wp-smush-skip-resmush,
&.wp-smush-skip-resmush:hover {
display: block;
background: transparent !important;
border: 2px solid #888 !important;
color: #888 !important;
}
}
.sui-toggle + label {
font-weight: 500;
}
}
.wp-smush-pagespeed-recommendation {
font-size: 13px;
.smush-recommendation-title,
.dismiss-recommendation {
font-weight: 500;
}
.dismiss-recommendation {
cursor: pointer;
@include icon(before, close);
&:before {
margin-right: 5px;
}
}
}
.smush-align-left {
float: left;
}
.smush-align-right {
float: right;
}
.sui-summary.sui-summary-smush {
.smushed-items-count {
margin: 5px;
.wp-smush-count-resize-total {
display: inline-block;
margin-left: 50px;
}
.wp-smush-count-total {
display: inline-block;
}
}
.sui-summary-details {
.sui-summary-detail {
font-size: 15px;
font-weight: 500;
line-height: 22px;
display: inline-flex;
.wp-smush-stats-percent {
margin-left: 5px;
}
.wp-smush-stats-human {
margin-right: 5px;
}
}
}
.wp-smush-stats-label-message {
font-size: 13px;
line-height: 22px;
}
.smush-stats-list {
.sui-tag-pro {
top: -1px;
margin-left: 5px;
}
}
}
.wp-smush-no-image {
display: block;
overflow: hidden;
}
.wp-smush-upload-images {
display: block;
overflow: hidden;
padding: 10px 0 40px;
}
.sui-box-footer .sui-icon-loader {
line-height: 18px;
vertical-align: middle;
}
@media screen and (max-width: 600px) {
.sui-summary-smush {
.smushed-items-count {
margin: 0;
display: flex;
justify-content: space-between;
}
}
}
}
Zerion Mini Shell 1.0