first
This commit is contained in:
@ -0,0 +1,50 @@
|
||||
@include body-class(true) {
|
||||
&.sui-color-accessible {
|
||||
.smush-final-log .smush-bulk-error-row {
|
||||
box-shadow: inset 2px 0 0 0 $accessible-dark;
|
||||
.smush-bulk-image-data:before {
|
||||
color: $accessible-dark;
|
||||
}
|
||||
}
|
||||
// Bulk Smush Fancy Tree
|
||||
ul.fancytree-container {
|
||||
.fancytree-selected {
|
||||
background-color: #F8F8F8;
|
||||
span.fancytree-checkbox {
|
||||
border: 1px solid $accessible-dark;
|
||||
background-color: $accessible-dark;
|
||||
}
|
||||
}
|
||||
span.fancytree-expander:before,
|
||||
span.fancytree-icon:before,
|
||||
span.fancytree-title {
|
||||
color: $accessible-dark;
|
||||
}
|
||||
}
|
||||
// CDN
|
||||
.smush-filename-extension {
|
||||
background-color: $accessible-dark;
|
||||
}
|
||||
// Check images button.
|
||||
.sui-button {
|
||||
&.smush-button-check-success:before {
|
||||
color: $accessible-light;
|
||||
}
|
||||
}
|
||||
// Smush submit note.
|
||||
.smush-submit-note {
|
||||
color: $accessible-dark;
|
||||
}
|
||||
|
||||
// Hightlight lazyload spinner.
|
||||
.sui-lazyload .sui-box-selector [name="animation[spinner-icon]"]:checked+span {
|
||||
background-color: rgba(220,220,222, 0.7)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.sui-wrap .sui-toggle-slider {
|
||||
-ms-high-contrast-adjust: none;
|
||||
}
|
||||
}
|
||||
59
wp-content/plugins/wp-smushit/_src/scss/app.scss
Normal file
59
wp-content/plugins/wp-smushit/_src/scss/app.scss
Normal file
@ -0,0 +1,59 @@
|
||||
// This needs to be here.
|
||||
@import "modules/variables";
|
||||
|
||||
// Share UI styles
|
||||
@import "~@wpmudev/shared-ui/scss/functions";
|
||||
@import "~@wpmudev/shared-ui/scss/colors";
|
||||
@import "~@wpmudev/shared-ui/scss/variables";
|
||||
$google-fonts-url: 'https://fonts.bunny.net/css?family=Roboto:400,500,700';
|
||||
@import "~@wpmudev/shared-ui/scss/mixins";
|
||||
@import "~@wpmudev/shared-ui/scss/accessibility";
|
||||
@import "~@wpmudev/shared-ui/scss/animations";
|
||||
@import "~@wpmudev/shared-ui/scss/typography";
|
||||
@import "~@wpmudev/shared-ui/scss/icons";
|
||||
@import "~@wpmudev/shared-ui/scss/buttons";
|
||||
@import "~@wpmudev/shared-ui/scss/toggles";
|
||||
@import "~@wpmudev/shared-ui/scss/boxes";
|
||||
@import "~@wpmudev/shared-ui/scss/box-settings";
|
||||
@import "~@wpmudev/shared-ui/scss/layout";
|
||||
@import "~@wpmudev/shared-ui/scss/notifications";
|
||||
@import "~@wpmudev/shared-ui/scss/header";
|
||||
@import "~@wpmudev/shared-ui/scss/summary";
|
||||
@import "~@wpmudev/shared-ui/scss/list";
|
||||
@import "~@wpmudev/shared-ui/scss/tooltips";
|
||||
@import "~@wpmudev/shared-ui/scss/select2";
|
||||
@import "~@wpmudev/shared-ui/scss/tags";
|
||||
@import "~@wpmudev/shared-ui/scss/forms";
|
||||
@import "~@wpmudev/shared-ui/scss/radio-checkbox";
|
||||
@import "~@wpmudev/shared-ui/scss/tabs";
|
||||
@import "~@wpmudev/shared-ui/scss/sidenav";
|
||||
@import "~@wpmudev/shared-ui/scss/dropdowns";
|
||||
@import "~@wpmudev/shared-ui/scss/scores";
|
||||
@import "~@wpmudev/shared-ui/scss/footer";
|
||||
@import "~@wpmudev/shared-ui/scss/progress-bars";
|
||||
@import "~@wpmudev/shared-ui/scss/modals";
|
||||
@import "~@wpmudev/shared-ui/scss/utility";
|
||||
@import "~@wpmudev/shared-ui/scss/wp-admin-notices";
|
||||
@import "~@wpmudev/shared-ui/scss/tables";
|
||||
@import "~@wpmudev/shared-ui/scss/accordions";
|
||||
// Used on lazy loading page (since 3.2.2).
|
||||
@import "~@wpmudev/shared-ui/scss/box-selectors";
|
||||
@import "~@wpmudev/shared-ui/scss/upload";
|
||||
@import "~@wpmudev/shared-ui/scss/_colorpickers.scss";
|
||||
// Upgrade page (since 3.2.3).
|
||||
@import "~@wpmudev/shared-ui/scss/upgrade-page";
|
||||
@import "~@wpmudev/shared-ui/scss/reviews";
|
||||
// Used on WebP page (since 3.8.0).
|
||||
@import "~@wpmudev/shared-ui/scss/_code-snippet.scss";
|
||||
// Upsells (since 3.9.1).
|
||||
@import "~@wpmudev/shared-ui/scss/upsells";
|
||||
|
||||
// App styles
|
||||
@import "modules/admin";
|
||||
@import "modules/directory-smush";
|
||||
@import "modules/cdn";
|
||||
@import "modules/webp";
|
||||
|
||||
// SUI Color Accessibility
|
||||
@import "~@wpmudev/shared-ui/scss/color-accessibility";
|
||||
@import "accessibility/color-accessibility";
|
||||
597
wp-content/plugins/wp-smushit/_src/scss/common.scss
Normal file
597
wp-content/plugins/wp-smushit/_src/scss/common.scss
Normal file
@ -0,0 +1,597 @@
|
||||
/**
|
||||
* Common styles that are used on all the WP pages in the backend
|
||||
*/
|
||||
@import "modules/media";
|
||||
|
||||
.sui-wrap .smush-upsell-link,
|
||||
.sui-wrap a.smush-upsell-link {
|
||||
color: $purple;
|
||||
> span:before {
|
||||
color: $purple;
|
||||
}
|
||||
&:hover:not(.sui-button),
|
||||
&:focus:not(.sui-button),
|
||||
&:active:not(.sui-button) {
|
||||
color: #64007e;
|
||||
> span:before {
|
||||
color: #64007e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Media details (grid layout)
|
||||
* @since 3.4.0
|
||||
*/
|
||||
.attachment-info .smush-stats .value {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.smush-status {
|
||||
margin: 0 0 10px;
|
||||
flex-basis: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 1.33333;
|
||||
}
|
||||
|
||||
.smush-status-links {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span.sui-tooltip {
|
||||
float: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
a:first-of-type {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-info .smush-status-links,
|
||||
.column-smushit .smush-status-links {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.column-smushit .smush-status-links > a {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wp-smush-progress {
|
||||
padding-left: 25px;
|
||||
margin: 0;
|
||||
background-size: 17px 17px;
|
||||
visibility: visible;
|
||||
vertical-align: initial !important; /* prevent from jumping on a line */
|
||||
display: inline;
|
||||
color: #32373c;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Fix grid view links.
|
||||
.attachment-details .setting span.wp-smush-progress {
|
||||
width: auto;
|
||||
line-height: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/** Settings Page **/
|
||||
.smush-status.fail {
|
||||
color: #dd3d36;
|
||||
}
|
||||
|
||||
.smush-status.success {
|
||||
color: #0074a2;
|
||||
}
|
||||
|
||||
.smush-status.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#wpbody-content .wp-smush-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.wp-smush-action[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#post-body-content .smush-status {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.attachment-info .wp-smush-error-message {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.smush-stats-wrapper .row {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.smush-stats-wrapper .row:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.smush-stats-wrapper td, .smush-stats-wrapper th {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.smush-skipped .dashicons-editor-help {
|
||||
margin-top: -2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.smush-skipped {
|
||||
a:focus { box-shadow: 0 0 black; }
|
||||
.sui-tag.sui-tag-purple {
|
||||
min-height: 18px;
|
||||
padding: 2px 10px;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background-color: #8d00b1;
|
||||
color: #fff;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Help Tip **/
|
||||
.ui-tooltip-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/** All Smushed **/
|
||||
.wp-smush-notice {
|
||||
background-color: #D1F1EA;
|
||||
border-radius: 5px;
|
||||
color: #333333;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 30px;
|
||||
padding: 15px 30px;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
div.smush-notice-cta a.smush-notice-act.button-primary {
|
||||
padding: 3px 23px;
|
||||
background-color: #00B0DB;
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.wp-smush-resize-enable:hover,
|
||||
a.wp-smush-lossy-enable:hover {
|
||||
color: #0A9BD6;
|
||||
}
|
||||
|
||||
.wp-smush-bulk-wrapper {
|
||||
#wp-smush-bulk-image-count {
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#wp-smush-bulk-image-count-description {
|
||||
color: #333333;
|
||||
font-size: 13px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sui-tooltip,
|
||||
.sui-tooltip > .sui-icon-info {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/** Image Remaining **/
|
||||
div.wp-smush-remaining,
|
||||
div.wp-smush-dir-limit,
|
||||
div.smush-s3-setup-message {
|
||||
background-color: #FFF5D5;
|
||||
border: none;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
div.smush-s3-setup-message {
|
||||
background-color: #DFF6FA;
|
||||
}
|
||||
|
||||
div.wp-smush-dir-limit {
|
||||
background-color: #dff6fa;
|
||||
}
|
||||
|
||||
.wp-smush-resmush-wrap .wp-smush-remaining {
|
||||
padding: 10px 50px;
|
||||
}
|
||||
|
||||
.wp-smush-count {
|
||||
color: #888888;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/** Stats Container **/
|
||||
|
||||
a.wp-smush-lossy-enable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** Re Smush **/
|
||||
.wp-smush-settings-changed {
|
||||
background: #dff6fa;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.compat-item .compat-field-wp_smush {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.manage-column.column-smushit {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.smushit [tooltip],
|
||||
label.setting.smush-stats [tooltip],
|
||||
.compat-field-wp_smush [tooltip] {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.smushit [tooltip]:before,
|
||||
label.setting.smush-stats [tooltip]:before,
|
||||
.compat-field-wp_smush [tooltip]:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #0B2F3F;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
margin-bottom: -5px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition: margin .2s, opacity .2s, z-index .2s linear .2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.smushit [tooltip]:after,
|
||||
label.setting.smush-stats [tooltip]:after,
|
||||
.compat-field-wp_smush [tooltip]:after {
|
||||
background: #0B2F3F;
|
||||
border-radius: 4px;
|
||||
bottom: 100%;
|
||||
color: #FFF;
|
||||
content: attr(tooltip);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
left: 50%;
|
||||
line-height: 20px;
|
||||
margin-left: -100px;
|
||||
margin-bottom: 5px;
|
||||
opacity: 0;
|
||||
padding: 5px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
transition: margin .2s, opacity .2s, z-index .2s linear .2s;
|
||||
white-space: pre-wrap;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.smushit .smush-skipped [tooltip]:before,
|
||||
label.setting.smush-stats .smush-skipped [tooltip]:before,
|
||||
.compat-field-wp_smush .smush-skipped [tooltip]:before {
|
||||
border-top-color: transparent;
|
||||
border-left-color: #0B2F3F;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.smushit .smush-skipped [tooltip]:after,
|
||||
label.setting.smush-stats .smush-skipped [tooltip]:after,
|
||||
.compat-field-wp_smush .smush-skipped [tooltip]:after {
|
||||
margin-left: 0;
|
||||
left: -195px;
|
||||
top: -35px;
|
||||
bottom: inherit;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label.setting.smush-stats .smush-skipped [tooltip]:after {
|
||||
top: -98px;
|
||||
}
|
||||
|
||||
div.media-sidebar label.setting.smush-stats .smush-skipped [tooltip]:after {
|
||||
left: -188px;
|
||||
padding-left: 10px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
div.media-sidebar label.setting.smush-stats .smush-skipped [tooltip]:before {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-s:after,
|
||||
label.setting.smush-stats [tooltip].tooltip-s:after,
|
||||
.compat-field-wp_smush [tooltip].tooltip-s:after {
|
||||
width: 150px;
|
||||
margin-left: -75px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-l:after,
|
||||
label.setting.smush-stats [tooltip].tooltip-l:after,
|
||||
.compat-field-wp_smush [tooltip].tooltip-l:after {
|
||||
width: 280px;
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-right:after, .compat-field-wp_smush [tooltip].tooltip-right:after {
|
||||
margin-left: -180px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-s.tooltip-right:after, .compat-field-wp_smush [tooltip].tooltip-s.tooltip-right:after {
|
||||
margin-left: -130px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-l.tooltip-right:after, .compat-field-wp_smush [tooltip].tooltip-l.tooltip-right:after {
|
||||
margin-left: -260px;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-bottom:before, .compat-field-wp_smush [tooltip].tooltip-bottom:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #0B2F3F;
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.smushit [tooltip].tooltip-bottom:after, .compat-field-wp_smush [tooltip].tooltip-bottom:after {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.smushit [tooltip]:hover:before,
|
||||
label.setting.smush-stats [tooltip]:hover:before,
|
||||
.compat-field-wp_smush [tooltip]:hover:before {
|
||||
z-index: 1;
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
transition: margin .2s, opacity .2s;
|
||||
}
|
||||
|
||||
.smushit [tooltip]:hover:after,
|
||||
label.setting.smush-stats [tooltip]:hover:after,
|
||||
.compat-field-wp_smush [tooltip]:hover:after {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px;
|
||||
transition: margin .2s, opacity .2s;
|
||||
}
|
||||
|
||||
.smushit .disabled[tooltip]:before,
|
||||
.smushit .disabled[tooltip]:after,
|
||||
label.setting.smush-stats .disabled[tooltip]:before,
|
||||
label.setting.smush-stats .disabled[tooltip]:after,
|
||||
.compat-field-wp_smush .disabled[tooltip]:before,
|
||||
.compat-field-wp_smush .disabled[tooltip]:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Image List **/
|
||||
div.wp-smush-scan-result {
|
||||
background: white;
|
||||
|
||||
div.wp-smush-notice {
|
||||
margin-top: 14px;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
div.content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div.wp-smush-info.notice {
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0 0 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/** Media Queries **/
|
||||
|
||||
@media screen and (max-width: 1024px) and (min-width: 800px) {
|
||||
/** Stats Section **/
|
||||
.smush-stats-wrapper h3 {
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Media Queries for resolution below 782px **/
|
||||
@media only screen and (max-width: 800px) {
|
||||
.dev-box.bulk-smush-wrapper.wp-smush-container {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS styles used Admin notice
|
||||
*/
|
||||
.smush-notice.notice {
|
||||
padding: 0;
|
||||
margin: 5px 0 10px;
|
||||
border: 1px solid #E5E5E5;
|
||||
background: #FFF;
|
||||
overflow: hidden;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 80px;
|
||||
display: table; /* The magic ingredient! */
|
||||
font: 13px "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.smush-notice.notice.loading:before {
|
||||
content: attr(data-message);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.smush-notice > div {
|
||||
display: table-cell; /* The magic ingredient! */
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.smush-notice.notice.loading > div {
|
||||
-webkit-filter: blur(2px);
|
||||
-moz-filter: blur(2px);
|
||||
-o-filter: blur(2px);
|
||||
-ms-filter: blur(2px);
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.smush-notice-logo {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.smush-notice-message {
|
||||
color: #23282D;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
padding: 20px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.smush-notice-cta {
|
||||
background: #F8F8F8;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wp-core-ui .smush-notice-cta button,
|
||||
.wp-core-ui .smush-notice-cta .button-primary:active {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wp-core-ui .smush-notice-cta input[type="email"] {
|
||||
vertical-align: middle;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
min-width: 50px;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upsell lists.
|
||||
* @since 3.9.1
|
||||
*/
|
||||
#smush-box-cdn-upsell,
|
||||
#smush-box-webp-wizard {
|
||||
.sui-upsell-list {
|
||||
max-width: 525px;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only all and (max-width: 1000px) {
|
||||
.smush-notice.notice {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.smush-notice > .smush-notice-logo {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.smush-notice > .smush-notice-message {
|
||||
width: auto;
|
||||
display: block;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.smush-notice > .smush-notice-cta {
|
||||
display: block;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
border-left: 0;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
line-height: 30px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.wp-core-ui .smush-notice > .smush-notice-cta > input[type="email"],
|
||||
.smush-notice > .smush-notice-cta > button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only all and (max-width: 500px) {
|
||||
.wp-core-ui .smush-notice > .smush-notice-cta > input[type="email"],
|
||||
.smush-notice > .smush-notice-cta > button {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-dismissible-notice {
|
||||
position: relative;
|
||||
}
|
||||
1375
wp-content/plugins/wp-smushit/_src/scss/modules/_admin.scss
Normal file
1375
wp-content/plugins/wp-smushit/_src/scss/modules/_admin.scss
Normal file
File diff suppressed because it is too large
Load Diff
72
wp-content/plugins/wp-smushit/_src/scss/modules/_cdn.scss
Normal file
72
wp-content/plugins/wp-smushit/_src/scss/modules/_cdn.scss
Normal file
@ -0,0 +1,72 @@
|
||||
@import "variables";
|
||||
|
||||
/**
|
||||
* CDN styles
|
||||
*
|
||||
* @since 3.0
|
||||
*/
|
||||
|
||||
@include body-class {
|
||||
|
||||
.sui-wrap {
|
||||
|
||||
.sui-box-settings-row .sui-box-settings-col-1 {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.wrap-smush-cdn {
|
||||
.sui-block-content-center p {
|
||||
max-width: 600px;
|
||||
margin: 20px auto 30px;
|
||||
}
|
||||
.sui-box-header .sui-actions-right .sui-icon-info{
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sui-cdn {
|
||||
form p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.wp-smush-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
|
||||
.sui-tooltip {
|
||||
line-height: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Filename Extensions Icons */
|
||||
.smush-filename-extension {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
height: 30px;
|
||||
margin: 0 5px 0 0;
|
||||
width: 30px;
|
||||
|
||||
&.smush-extension-jpeg,
|
||||
&.smush-extension-jpg { background-color: #F7E100; }
|
||||
&.smush-extension-png { background-color: #FFB694; }
|
||||
&.smush-extension-gif { background-color: #72D5D4; }
|
||||
&.smush-extension-webp { background-color: #72ADD5; }
|
||||
&.smush-extension-svg { background-color: #88D572; }
|
||||
&.smush-extension-iframe {
|
||||
background-color: #8772D5;
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,338 @@
|
||||
/* ****************************************************************************
|
||||
* MODULE: Directory Smush styles.
|
||||
*/
|
||||
|
||||
@include body-class {
|
||||
|
||||
.wp-smush-progress-dialog,
|
||||
.wp-smush-list-dialog {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sui-directory.sui-message {
|
||||
text-align: left;
|
||||
|
||||
.sui-message-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sui-directory .smush-final-log {
|
||||
margin-top: 30px;
|
||||
|
||||
.sui-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.fancytree-container {
|
||||
color: #666;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0 solid transparent;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-left: 13px;
|
||||
width: 15px;
|
||||
|
||||
&:before {
|
||||
font-family: wpmudev-plugin-icons, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-exp-c span.fancytree-expander,
|
||||
.fancytree-exp-cd:not(.fancytree-unselectable) span.fancytree-expander,
|
||||
.fancytree-exp-cf:not(.fancytree-unselectable) span.fancytree-expander {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
// --- End nodes (use connectors instead of expanders)
|
||||
|
||||
.fancytree-expanded.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-expanded.fancytree-exp-nl span.fancytree-expander {
|
||||
width: 13px;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fancytree-exp-nl span.fancytree-expander:before {
|
||||
content: "\131";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span.fancytree-ico-c span.fancytree-expander:before {
|
||||
content: '';
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// --- Collapsed
|
||||
|
||||
.fancytree-exp-c span.fancytree-expander:before,
|
||||
.fancytree-exp-cl span.fancytree-expander:before,
|
||||
.fancytree-exp-cd span.fancytree-expander:before,
|
||||
.fancytree-exp-cdl span.fancytree-expander:before,
|
||||
.fancytree-exp-e span.fancytree-expander:before,
|
||||
.fancytree-exp-ed span.fancytree-expander:before,
|
||||
.fancytree-exp-el span.fancytree-expander:before,
|
||||
.fancytree-exp-edl span.fancytree-expander:before {
|
||||
color: #888888;
|
||||
content: "\2DC";
|
||||
}
|
||||
|
||||
// --- Expanded
|
||||
|
||||
.fancytree-exp-e span.fancytree-expander:before,
|
||||
.fancytree-exp-ed span.fancytree-expander:before,
|
||||
.fancytree-exp-el span.fancytree-expander:before,
|
||||
.fancytree-exp-edl span.fancytree-expander:before {
|
||||
content: "\131";
|
||||
}
|
||||
|
||||
// --- Unselectable
|
||||
|
||||
.fancytree-unselectable span.fancytree-expander:before {
|
||||
content: "9";
|
||||
}
|
||||
|
||||
/* Fade out expanders, when container is not hovered or active */
|
||||
.fancytree-fade-expander {
|
||||
span.fancytree-expander:before {
|
||||
transition: opacity 1.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover span.fancytree-expander:before,
|
||||
&.fancytree-treefocus span.fancytree-expander:before,
|
||||
.fancytree-treefocus span.fancytree-expander:before,
|
||||
[class*='fancytree-statusnode-'] span.fancytree-expander:before {
|
||||
transition: opacity 0.6s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-checkbox {
|
||||
margin-right: 5px;
|
||||
margin-left: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #e6e6e6;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
position: relative;
|
||||
transition: .2s;
|
||||
|
||||
@include icon( before, check );
|
||||
&:before {
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
border: 1px solid #17a8e3;
|
||||
background-color: #17a8e3;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-expanded span.fancytree-checkbox {
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
// Unselectable is dimmed, without hover effects
|
||||
.fancytree-unselectable {
|
||||
background-color: transparent !important;
|
||||
|
||||
// Fix for bug in library.
|
||||
&.fancytree-selected {
|
||||
margin-left: -9px;
|
||||
|
||||
span.fancytree-expander {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span.fancytree-checkbox {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #e6e6e6;
|
||||
|
||||
&:before {
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-title {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-title {
|
||||
opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
|
||||
&:before {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-icon:before { // Default icon
|
||||
margin-left: 10px;
|
||||
font-family: wpmudev-plugin-icons, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #AAA;
|
||||
content: 'D';
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:before { // Collapsed folder (empty)
|
||||
content: 'D';
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:before { // Collapsed folder (not empty)
|
||||
content: 'D';
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:before { // Expanded folder
|
||||
content: '\BB';
|
||||
}
|
||||
|
||||
/* Folders */
|
||||
.fancytree-exp-n.fancytree-ico-ef span.fancytree-icon:before,
|
||||
.fancytree-exp-nl.fancytree-ico-ef span.fancytree-icon:before,
|
||||
.fancytree-ico-cf span.fancytree-icon:before { // Collapsed folder (empty)
|
||||
content: '\2D8';
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:before { // Collapsed folder (not empty)
|
||||
content: '\2D8';
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:before { // Expanded folder
|
||||
content: '\BB';
|
||||
}
|
||||
|
||||
// 'Loading' status overrides all others
|
||||
.fancytree-loading span.fancytree-expander:before,
|
||||
.fancytree-statusnode-loading span.fancytree-icon:before {
|
||||
content: 'N';
|
||||
display: inline-block;
|
||||
animation: spin 1.3s linear infinite;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-node {
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
min-height: 40px;
|
||||
|
||||
&:not(.fancytree-unselectable):hover {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
}
|
||||
span.fancytree-title {
|
||||
color: #666; // inherit doesn't work on IE
|
||||
cursor: pointer;
|
||||
display: inline-block; // Better alignment, when title contains <br>
|
||||
vertical-align: top;
|
||||
min-height: 20px;
|
||||
padding: 0 3px 0 3px; // Otherwise italic font will be outside right bounds
|
||||
margin: 0 0 0 5px;
|
||||
border: 1px solid transparent; // avoid jumping, when a border is added on hover
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
//color: @fancy-font-error-color;
|
||||
}
|
||||
|
||||
span.fancytree-expanded,
|
||||
span.fancytree-selected {
|
||||
border-radius: 4px;
|
||||
background-color: #F8F8F8;
|
||||
color: #17A8E3;
|
||||
|
||||
span.fancytree-title {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-selected {
|
||||
background-color: #E1F6FF;
|
||||
|
||||
span.fancytree-expander:before,
|
||||
span.fancytree-icon:before,
|
||||
span.fancytree-title {
|
||||
color: #17A8E3;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-focused {
|
||||
background-color: #e1e1e1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
216
wp-content/plugins/wp-smushit/_src/scss/modules/_media.scss
Normal file
216
wp-content/plugins/wp-smushit/_src/scss/modules/_media.scss
Normal file
@ -0,0 +1,216 @@
|
||||
/* ****************************************************************************
|
||||
* MEDIA AREA SCSS FILE
|
||||
*/
|
||||
@import "~@wpmudev/shared-ui/scss/functions";
|
||||
@import "~@wpmudev/shared-ui/scss/colors";
|
||||
@import "~@wpmudev/shared-ui/scss/variables";
|
||||
// Override body class
|
||||
$sui-version: 'smush-media';
|
||||
$sui-wrap-class: false;
|
||||
@import "~@wpmudev/shared-ui/scss/mixins";
|
||||
@import "~@wpmudev/shared-ui/scss/tooltips";
|
||||
|
||||
/* ****************************************************************************
|
||||
* MEDIA AREA STYLES
|
||||
*/
|
||||
|
||||
// Set column width.
|
||||
.manage-column.column-smushit {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
// Margin for buttons.
|
||||
.sui-smush-media {
|
||||
.button {
|
||||
margin-right: 5px;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Smush button loading icon.
|
||||
#ngg-listimages,
|
||||
.column-smushit {
|
||||
.spinner {
|
||||
float: none;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.smush-status-links{
|
||||
.smush-upgrade-link {
|
||||
color: #8D00B1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.smush-ignore-utm,.smush-revert-utm{
|
||||
display: block;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
float: none !important;;
|
||||
}
|
||||
.smush-cdn-notice {
|
||||
color: #50575E;
|
||||
a {
|
||||
color:#2271B1;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.smush-status {
|
||||
&.smush-warning,&.smush-ignored,&.smush-success{
|
||||
padding-left:17px;
|
||||
position: relative;
|
||||
&:before{
|
||||
content:"";
|
||||
background: url('../images/icon-warning.png' ) no-repeat 0 0;
|
||||
position: absolute;
|
||||
width:12px;
|
||||
height:12px;
|
||||
background-size: contain;
|
||||
left: 0;
|
||||
top:3px;
|
||||
}
|
||||
}
|
||||
&.smush-ignored{
|
||||
&:before{
|
||||
background-image: url('../images/icon-ignored.png' ) !important;
|
||||
}
|
||||
}
|
||||
&.smush-success{
|
||||
&:before{
|
||||
background-image: url('../images/icon-success.png' ) !important;
|
||||
}
|
||||
}
|
||||
.sui-icon-warning-media-lib {
|
||||
margin-right:4px;
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
}
|
||||
.column-smushit .smush-status{
|
||||
color:#50575E;
|
||||
}
|
||||
// Stats table.
|
||||
.sui-smush-media {
|
||||
table.wp-smush-stats-holder {
|
||||
width: 100%;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 4px;
|
||||
margin-top: 6px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
thead {
|
||||
th.smush-stats-header {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #E6E6E6 !important;
|
||||
color: #32373D;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.23px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
border: 1px solid #E6E6E6;
|
||||
}
|
||||
td {
|
||||
overflow-wrap: break-word;
|
||||
vertical-align: middle;
|
||||
padding: 8px 10px;
|
||||
color: #555555;
|
||||
font-size: 11px;
|
||||
letter-spacing: -0.21px;
|
||||
line-height: 16px;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
&:first-of-type {
|
||||
max-width: 110px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override !important set from WordPress.
|
||||
#the-list {
|
||||
.sui-smush-media {
|
||||
thead {
|
||||
th.smush-stats-header {
|
||||
border-bottom: 1px solid #E6E6E6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive table for list mode.
|
||||
@media screen and (max-width: 1024px) {
|
||||
.wp-list-table .smushit {
|
||||
table.wp-smush-stats-holder {
|
||||
th {
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
tr td {
|
||||
word-wrap: break-word;
|
||||
display: table-cell !important;
|
||||
&:first-child {
|
||||
border-right: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&:last-child {
|
||||
box-sizing: border-box;
|
||||
float: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NextGen Integration.
|
||||
.iedit .wp-smush-action,
|
||||
.iedit .smush-stats-details {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/*NextGen Gallery stats*/
|
||||
#ngg-listimages {
|
||||
table.wp-smush-stats-holder {
|
||||
table-layout: fixed;
|
||||
border: 1px solid lightgray;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #CECECE;
|
||||
}
|
||||
}
|
||||
.column-7 {
|
||||
width: 300px;
|
||||
}
|
||||
.spinner {
|
||||
width: auto;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/** NextGen Gallery tr height, to show the progress bar properly for alternate rows **/
|
||||
.alternate.iedit {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/** Allows to click on button, otherwise row-actions from NextGen interferes **/
|
||||
.wp-smush-nextgen-send {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
/* ****************************************************************************
|
||||
* MODULE: VARIABLES
|
||||
*/
|
||||
|
||||
$font--path: "../fonts" !default;
|
||||
$img--path: "../images" !default;
|
||||
|
||||
$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';
|
||||
|
||||
$summary-image: '#{$img--path}/smush-graphic-dashboard-summary.svg';
|
||||
|
||||
// Promo banners for free footer
|
||||
$cross-sell-1: 'hummingbird';
|
||||
$cross-sell-2: 'defender';
|
||||
$cross-sell-3: 'smartcrawl';
|
||||
|
||||
$main-color: #17A8E3;
|
||||
$text-color: #333;
|
||||
$border-radius: 4px;
|
||||
|
||||
$upgrade-image: '../../app/assets/images/hero@2x.png';
|
||||
$upgrade-image-mobile: '../../app/assets/images/hero.png';
|
||||
212
wp-content/plugins/wp-smushit/_src/scss/modules/_webp.scss
Normal file
212
wp-content/plugins/wp-smushit/_src/scss/modules/_webp.scss
Normal file
@ -0,0 +1,212 @@
|
||||
/**
|
||||
* Webp styles
|
||||
*
|
||||
* @since 3.8.0
|
||||
*/
|
||||
|
||||
@include body-class(true) {
|
||||
|
||||
#smush-box-webp-webp {
|
||||
|
||||
.smush-webp-supported-browser {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #F2F2F2;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#smush-box-webp-wizard {
|
||||
.sui-row-with-sidenav {
|
||||
margin-bottom: 0;
|
||||
|
||||
.sui-sidenav {
|
||||
padding: 30px;
|
||||
border-top-left-radius: $border-radius;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.smush-wizard-bar-subtitle {
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
color: #AAAAAA;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.smush-sidenav-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 33px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-steps-container {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
@include media(max-width, lg) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-bar-step {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: #AAAAAA;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
|
||||
.smush-wizard-bar-step-number {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
background-color: #F2F2F2;
|
||||
border: 1px solid #DDDDDD;
|
||||
|
||||
@include media(max-width, lg) {
|
||||
display: block;
|
||||
margin: 0 auto 5px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #DDDDDD;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: #333333;
|
||||
|
||||
.smush-wizard-bar-step-number {
|
||||
background-color: #FFFFFF;
|
||||
border-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.done .smush-wizard-bar-step-number {
|
||||
background-color: #1ABC9C;
|
||||
border-color: #1ABC9C;
|
||||
|
||||
.sui-icon-check::before {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include media(max-width, lg) {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
line {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
&.smush-svg-desktop {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-svg-mobile {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
display: block;
|
||||
margin-bottom: -14px;
|
||||
padding: 0 35px;
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media(max-width, sm) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-steps-content-wrapper {
|
||||
padding: 20px;
|
||||
|
||||
.smush-wizard-steps-content {
|
||||
padding: 0 70px;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.smush-step-indicator {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media(max-width, sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-wizard-step-1 {
|
||||
|
||||
.sui-box-selectors {
|
||||
padding-left: 115px;
|
||||
padding-right: 115px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-wizard-step-2 {
|
||||
|
||||
.smush-wizard-rules-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sui-tabs-menu {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(min-width, sm) {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
360
wp-content/plugins/wp-smushit/_src/scss/resize-detection.scss
Normal file
360
wp-content/plugins/wp-smushit/_src/scss/resize-detection.scss
Normal file
@ -0,0 +1,360 @@
|
||||
@import url('https://fonts.bunny.net/css?family=Roboto:400,500,700');
|
||||
@import "modules/variables";
|
||||
$font--path: '~@wpmudev/shared-ui/dist/fonts/';
|
||||
|
||||
@font-face {
|
||||
font-family: "wpmudev-plugin-icons";
|
||||
src: url('#{$font--path}/wpmudev-plugin-icons.eot?');
|
||||
src: url('#{$font--path}/wpmudev-plugin-icons.eot?') format('embedded-opentype'),
|
||||
url('#{$font--path}/wpmudev-plugin-icons.ttf') format('truetype'),
|
||||
url('#{$font--path}/wpmudev-plugin-icons.woff') format('woff'),
|
||||
url('#{$font--path}/wpmudev-plugin-icons.woff2') format('woff2'),
|
||||
url('#{$font--path}/wpmudev-plugin-icons.svg') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 800px ) {
|
||||
#smush-image-bar-toggle,
|
||||
#smush-image-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( min-width: 800px ) {
|
||||
.smush-detected-img {
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s ease;
|
||||
box-shadow: 0 0 0 5px #FECF2F;
|
||||
}
|
||||
|
||||
#smush-image-bar-toggle {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 330px;
|
||||
height: 50px;
|
||||
width: 60px;
|
||||
z-index: 9999999;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background-color: #FFF;
|
||||
box-shadow: inset 2px 0 0 0 #FECF2F, -13px 5px 20px 0 rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition-property: all;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
|
||||
&.closed {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.smush-toggle-success {
|
||||
box-shadow: inset 2px 0 0 0 #1abc9c, -13px 5px 20px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
i.sui-icon-info,
|
||||
i.sui-icon-loader {
|
||||
font-family: "wpmudev-plugin-icons" !important;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
color: #FECF2F;
|
||||
}
|
||||
|
||||
i.sui-icon-info:before {
|
||||
content: "I";
|
||||
}
|
||||
|
||||
&.smush-toggle-success i.sui-icon-info {
|
||||
color: #1abc9c;
|
||||
&:before {
|
||||
content: "_";
|
||||
}
|
||||
}
|
||||
|
||||
i.sui-icon-loader {
|
||||
&:before {
|
||||
display: block;
|
||||
content: "N";
|
||||
-webkit-animation: spin 1.3s linear infinite;
|
||||
animation: spin 1.3s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#smush-image-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 330px;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
|
||||
z-index: 999999;
|
||||
padding: 0 0 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-width: 330px;
|
||||
transition-property: all;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
|
||||
&.closed {
|
||||
max-width: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
h3, p, strong, span {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
letter-spacing: -0.25px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
background-color: #FAFAFA;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #888888;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #AAAAAA;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.smush-resize-box {
|
||||
background-color: #F8F8F8;
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid #E6E6E6;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
span:first-of-type {
|
||||
color: #888;
|
||||
height: 34px;
|
||||
width: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.smush-image-info {
|
||||
background-color: #FFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
padding: 17px 20px;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smush-front-icons {
|
||||
margin: 0 10px;
|
||||
line-height: 5px;
|
||||
|
||||
&:before {
|
||||
font-family: "wpmudev-plugin-icons" !important;
|
||||
speak: none;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
color: #AAA;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&.smush-front-icon-arrows-in {
|
||||
&:before {
|
||||
content: '\2264';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smush-tag {
|
||||
background-color: #fecf2f;
|
||||
color: #333;
|
||||
border-radius: 13px;
|
||||
height: 26px;
|
||||
width: 116px;
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.smush-tag-success {
|
||||
background-color: #1abc9c;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-tooltip {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transition: margin .2s, opacity .2s;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border: 5px solid transparent;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
border-top-color: #000000;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: attr(data-tooltip);
|
||||
min-width: 40px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
background: #000000;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
font: 400 12px/18px "Roboto", Arial, sans-serif;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin: 0 0 10px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&.smush-tooltip-constrained {
|
||||
&:after {
|
||||
min-width: 240px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.show-description):hover {
|
||||
&:before,
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.show-description):hover,
|
||||
&.show-description {
|
||||
.smush-image-info { background-color: #F8F8F8; }
|
||||
|
||||
span:first-of-type {
|
||||
background-color: #E6E6E6;
|
||||
color: transparent;
|
||||
&:before {
|
||||
font-family: "wpmudev-plugin-icons" !important;
|
||||
font-weight: 400;
|
||||
content: "";
|
||||
color: #666;
|
||||
margin-right: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smush-image-description {
|
||||
display: none;
|
||||
border-radius: 4px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 2px 0 0 #DDDDDD;
|
||||
margin: 0 20px 20px;
|
||||
padding: 20px;
|
||||
color: #888888;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&.show-description {
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
|
||||
.smush-image-info { border-bottom: 0; }
|
||||
.smush-image-description { display: block; }
|
||||
|
||||
span:first-of-type {
|
||||
background-color: #FECF2F;
|
||||
border-color: #FECF2F;
|
||||
&:before { color: #333; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#smush-image-bar-notice {
|
||||
display: none;
|
||||
margin: 20px;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-left: 2px solid #1abc9c;
|
||||
border-radius: 4px;
|
||||
padding: 15px 20px 15px 25px;
|
||||
|
||||
p:before {
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
font-family: "wpmudev-plugin-icons" !important;
|
||||
font-weight: 400;
|
||||
content: "_";
|
||||
color: #1abc9c;
|
||||
margin-right: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user