Edit File by line

@import "variables";

[0] Fix | Delete

[1] Fix | Delete

@import "~@wpmudev/shared-ui/scss/mixins";

[2] Fix | Delete

[3] Fix | Delete

@include body-class {

[4] Fix | Delete

[5] Fix | Delete

/**

[6] Fix | Delete

* Dashboard meta boxes

[7] Fix | Delete

[8] Fix | Delete

* @since 3.8.6

[9] Fix | Delete

[10] Fix | Delete

.wrap-smush {

[11] Fix | Delete

// Images.

[12] Fix | Delete

div[class^="sui-dashboard-"] .sui-box-title:before {

[13] Fix | Delete

color: #333333;

[14] Fix | Delete

float: left;

[15] Fix | Delete

font-size: 20px;

[16] Fix | Delete

margin-right: 10px;

[17] Fix | Delete

line-height: 30px;

[18] Fix | Delete

}

[19] Fix | Delete

[20] Fix | Delete

// Meta boxes.

[21] Fix | Delete

.sui-dashboard-bulk .sui-box-title,

[22] Fix | Delete

.sui-dashboard-upsell-upsell .sui-box-title { @include icon(before, 'smush'); }

[23] Fix | Delete

.sui-dashboard-directory .sui-box-title { @include icon(before, 'folder'); }

[24] Fix | Delete

.sui-dashboard-integrations .sui-box-title { @include icon(before, 'plugin-2'); }

[25] Fix | Delete

.sui-dashboard-lazy-load .sui-box-title { @include icon(before, 'update'); }

[26] Fix | Delete

.sui-dashboard-cdn .sui-box-title { @include icon(before, 'web-globe-world'); }

[27] Fix | Delete

.sui-dashboard-webp .sui-box-title { @include icon(before, 'photo-picture'); }

[28] Fix | Delete

.sui-dashboard-tools .sui-box-title { @include icon(before, 'wrench-tool'); }

[29] Fix | Delete

[30] Fix | Delete

// Dashboard summary meta box.

[31] Fix | Delete

#smush-box-dashboard-summary {

[32] Fix | Delete

.sui-list-detail {

[33] Fix | Delete

display: flex;

[34] Fix | Delete

align-items: center;

[35] Fix | Delete

& > span.sui-tooltip:first-of-type,

[36] Fix | Delete

& > span.sui-tooltip:nth-of-type(2) {

[37] Fix | Delete

line-height: 14px;

[38] Fix | Delete

margin-right: 5px;

[39] Fix | Delete

}

[40] Fix | Delete

a > .sui-tag { cursor: pointer; }

[41] Fix | Delete

}

[42] Fix | Delete

.smush-upgrade-text {

[43] Fix | Delete

color: $purple;

[44] Fix | Delete

margin-right: 10px;

[45] Fix | Delete

}

[46] Fix | Delete

}

[47] Fix | Delete

[48] Fix | Delete

// Dashboard tutorials.

[49] Fix | Delete

#smush-dash-tutorials,

[50] Fix | Delete

#smush-dash-tutorials > .sui-notice { margin-bottom: 30px; }

[51] Fix | Delete

[52] Fix | Delete

// Dashboard lazy load meta box.

[53] Fix | Delete

#smush-box-dashboard-lazy-load {

[54] Fix | Delete

.sui-settings-label {

[55] Fix | Delete

color: #333333;

[56] Fix | Delete

}

[57] Fix | Delete

.sui-box-settings-row.sui-flushed {

[58] Fix | Delete

border-top: 1px solid #E6E6E6;

[59] Fix | Delete

padding: 14px 30px;

[60] Fix | Delete

justify-content: space-between;

[61] Fix | Delete

align-items: center;

[62] Fix | Delete

}

[63] Fix | Delete

}

[64] Fix | Delete

[65] Fix | Delete

// Dashboard CDN meta box.

[66] Fix | Delete

#smush-box-dashboard-cdn {

[67] Fix | Delete

.sui-table-item-title {

[68] Fix | Delete

display: flex;

[69] Fix | Delete

align-items: center;

[70] Fix | Delete

[71] Fix | Delete

.smush-filename-extension { margin-right: 10px; }

[72] Fix | Delete

}

[73] Fix | Delete

[74] Fix | Delete

.sui-table.sui-table-flushed tbody tr td:last-of-type { text-align: right; }

[75] Fix | Delete

}

[76] Fix | Delete

[77] Fix | Delete

// Dashboard integrations meta box.

[78] Fix | Delete

#smush-box-dashboard-integrations {

[79] Fix | Delete

.smush-disabled-table-row {

[80] Fix | Delete

opacity: 0.5;

[81] Fix | Delete

pointer-events: none;

[82] Fix | Delete

background-color: rgba(242,242,242,0.5);

[83] Fix | Delete

}

[84] Fix | Delete

}

[85] Fix | Delete

}

[86] Fix | Delete

[87] Fix | Delete

.sui-wrap {

[88] Fix | Delete

.sui-box-upsell-row .sui-toggle input[disabled] ~ .sui-description {

[89] Fix | Delete

pointer-events: auto !important;

[90] Fix | Delete

}

[91] Fix | Delete

/**

[92] Fix | Delete

* Bulk smush meta boxes

[93] Fix | Delete

[94] Fix | Delete

* @since 3.10.0

[95] Fix | Delete

[96] Fix | Delete

.sui-dashboard-summary, .sui-summary-smush, .sui-summary-smush-nextgen {

[97] Fix | Delete

background-image: none !important;

[98] Fix | Delete

}

[99] Fix | Delete

[100] Fix | Delete

.sui-settings-label > .sui-tag {

[101] Fix | Delete

vertical-align: middle;

[102] Fix | Delete

margin-left: 3px;

[103] Fix | Delete

}

[104] Fix | Delete

[105] Fix | Delete

.sui-summary:not(.sui-unbranded):not(.sui-summary-sm) .sui-summary-image-space {

[106] Fix | Delete

display: flex;

[107] Fix | Delete

justify-content: center;

[108] Fix | Delete

flex-direction: column;

[109] Fix | Delete

align-items: center;

[110] Fix | Delete

[111] Fix | Delete

background-color: #F8F8F8;

[112] Fix | Delete

margin: 20px 10px;

[113] Fix | Delete

min-width: 266px;

[114] Fix | Delete

flex: 0 0 266px;

[115] Fix | Delete

[116] Fix | Delete

@include media(min-width, lg) {

[117] Fix | Delete

min-width: 388px;

[118] Fix | Delete

flex: 0 0 388px;

[119] Fix | Delete

}

[120] Fix | Delete

[121] Fix | Delete

.sui-circle-score {

[122] Fix | Delete

height: 110px;

[123] Fix | Delete

margin-bottom: 10px;

[124] Fix | Delete

[125] Fix | Delete

circle {

[126] Fix | Delete

stroke-width: 10;

[127] Fix | Delete

&:last-of-type {

[128] Fix | Delete

stroke-dasharray: var(--metric-array);

[129] Fix | Delete

}

[130] Fix | Delete

}

[131] Fix | Delete

[132] Fix | Delete

.sui-circle-score-label {

[133] Fix | Delete

position: absolute;

[134] Fix | Delete

display: flex;

[135] Fix | Delete

align-content: space-between;

[136] Fix | Delete

justify-content: center;

[137] Fix | Delete

align-items: center;

[138] Fix | Delete

width: 110px;

[139] Fix | Delete

margin: 0;

[140] Fix | Delete

font-weight: 700;

[141] Fix | Delete

font-size: 30px;

[142] Fix | Delete

letter-spacing: -1px;

[143] Fix | Delete

color: #333;

[144] Fix | Delete

[145] Fix | Delete

&:after {

[146] Fix | Delete

content: '%';

[147] Fix | Delete

}

[148] Fix | Delete

}

[149] Fix | Delete

}

[150] Fix | Delete

[151] Fix | Delete

& > small {

[152] Fix | Delete

color: #333 !important;

[153] Fix | Delete

}

[154] Fix | Delete

}

[155] Fix | Delete

[156] Fix | Delete

@media screen and (min-width: 1140px) {

[157] Fix | Delete

.sui-upgrade-page-header__image {

[158] Fix | Delete

width: 45% !important;

[159] Fix | Delete

}

[160] Fix | Delete

}

[161] Fix | Delete

.sui-upgrade-page .sui-upgrade-page-header__image{

[162] Fix | Delete

background-size: contain;

[163] Fix | Delete

}

[164] Fix | Delete

[165] Fix | Delete

.sui-upgrade-page {

[166] Fix | Delete

.sui-upgrade-page-cta__inner {

[167] Fix | Delete

a.sui-button-purple {

[168] Fix | Delete

display: inline-block;

[169] Fix | Delete

margin-top: 0;

[170] Fix | Delete

margin-bottom: 5px;

[171] Fix | Delete

&:hover {

[172] Fix | Delete

color: #fff !important;

[173] Fix | Delete

}

[174] Fix | Delete

}

[175] Fix | Delete

}

[176] Fix | Delete

[177] Fix | Delete

.smush-stats {

[178] Fix | Delete

position: relative;

[179] Fix | Delete

display: flex;

[180] Fix | Delete

justify-content: space-between;

[181] Fix | Delete

width: 600px;

[182] Fix | Delete

height: 100px;

[183] Fix | Delete

border-radius: 4px;

[184] Fix | Delete

background-color: #FFFFFF;

[185] Fix | Delete

box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);

[186] Fix | Delete

margin: -100px auto 30px;

[187] Fix | Delete

padding: 20px 40px;

[188] Fix | Delete

text-align: center;

[189] Fix | Delete

font-size: 15px;

[190] Fix | Delete

font-weight: 500;

[191] Fix | Delete

color: #333333;

[192] Fix | Delete

[193] Fix | Delete

.smush-stats-description {

[194] Fix | Delete

color: #888888;

[195] Fix | Delete

font-size: 12px;

[196] Fix | Delete

text-transform: uppercase;

[197] Fix | Delete

}

[198] Fix | Delete

[199] Fix | Delete

span {

[200] Fix | Delete

font-size: 24px;

[201] Fix | Delete

}

[202] Fix | Delete

}

[203] Fix | Delete

[204] Fix | Delete

@media (max-width: 800px) {

[205] Fix | Delete

.smush-stats {

[206] Fix | Delete

margin-top: 0;

[207] Fix | Delete

height: auto;

[208] Fix | Delete

width: 75%;

[209] Fix | Delete

flex-wrap: wrap;

[210] Fix | Delete

}

[211] Fix | Delete

[212] Fix | Delete

.smush-stats-item {

[213] Fix | Delete

flex-basis: 100%;

[214] Fix | Delete

}

[215] Fix | Delete

[216] Fix | Delete

.smush-stats-item:nth-child(2) {

[217] Fix | Delete

margin: 20px 0;

[218] Fix | Delete

}

[219] Fix | Delete

}

[220] Fix | Delete

}

[221] Fix | Delete

[222] Fix | Delete

/**

[223] Fix | Delete

* Integrations

[224] Fix | Delete

[225] Fix | Delete

* @since 3.4.0

[226] Fix | Delete

[227] Fix | Delete

.sui-integrations {

[228] Fix | Delete

.sui-settings-label {

[229] Fix | Delete

display: flex;

[230] Fix | Delete

align-items: center;

[231] Fix | Delete

[232] Fix | Delete

.sui-tag { margin-left: 10px; }

[233] Fix | Delete

}

[234] Fix | Delete

[235] Fix | Delete

.sui-toggle-content .sui-notice {

[236] Fix | Delete

margin-top: 10px;

[237] Fix | Delete

}

[238] Fix | Delete

[239] Fix | Delete

.sui-box-settings-row.sui-disabled {

[240] Fix | Delete

margin-bottom: 0;

[241] Fix | Delete

}

[242] Fix | Delete

}

[243] Fix | Delete

[244] Fix | Delete

/**

[245] Fix | Delete

* Lazy loading

[246] Fix | Delete

[247] Fix | Delete

* @since 3.2.2

[248] Fix | Delete

[249] Fix | Delete

.sui-lazyload {

[250] Fix | Delete

#smush-lazy-load-spinners span.sui-description:first-of-type,

[251] Fix | Delete

#smush-lazy-load-placeholder span.sui-description:first-of-type {

[252] Fix | Delete

margin-bottom: 20px;

[253] Fix | Delete

}

[254] Fix | Delete

[255] Fix | Delete

#smush-lazy-load-spinners .sui-box-selectors,

[256] Fix | Delete

#smush-lazy-load-placeholder .sui-box-selectors {

[257] Fix | Delete

background-color: #FFF;

[258] Fix | Delete

padding: 0 0 20px 0;

[259] Fix | Delete

[260] Fix | Delete

&:not([class*="sui-box-selectors-col-"]) ul li {

[261] Fix | Delete

flex: 0;

[262] Fix | Delete

}

[263] Fix | Delete

[264] Fix | Delete

.sui-box-selector {

[265] Fix | Delete

border: 1px solid #DDD;

[266] Fix | Delete

}

[267] Fix | Delete

[268] Fix | Delete

.remove-selector {

[269] Fix | Delete

display: none;

[270] Fix | Delete

top: 0;

[271] Fix | Delete

right: 0;

[272] Fix | Delete

position: absolute;

[273] Fix | Delete

background-color: #AAA;

[274] Fix | Delete

width: 18px;

[275] Fix | Delete

height: 18px;

[276] Fix | Delete

margin-right: 0;

[277] Fix | Delete

border-radius: 0 3px 0 3px;

[278] Fix | Delete

[279] Fix | Delete

i {

[280] Fix | Delete

margin: 0;

[281] Fix | Delete

}

[282] Fix | Delete

[283] Fix | Delete

i:before {

[284] Fix | Delete

color: #FFF;

[285] Fix | Delete

font-size: 12px;

[286] Fix | Delete

line-height: 18px;

[287] Fix | Delete

}

[288] Fix | Delete

[289] Fix | Delete

&:hover {

[290] Fix | Delete

background-color: #FF6D6D;

[291] Fix | Delete

}

[292] Fix | Delete

}

[293] Fix | Delete

[294] Fix | Delete

.sui-box-selector:hover .remove-selector {

[295] Fix | Delete

display: flex;

[296] Fix | Delete

}

[297] Fix | Delete

}

[298] Fix | Delete

[299] Fix | Delete

#smush-lazy-load-spinners .sui-box-selectors {

[300] Fix | Delete

label.sui-box-selector {

[301] Fix | Delete

width: 50px;

[302] Fix | Delete

height: 50px;

[303] Fix | Delete

overflow: visible;

[304] Fix | Delete

}

[305] Fix | Delete

[306] Fix | Delete

.sui-box-selector input + span {

[307] Fix | Delete

padding-top: 17px;

[308] Fix | Delete

padding-bottom: 17px;

[309] Fix | Delete

position: relative;

[310] Fix | Delete

[311] Fix | Delete

img {

[312] Fix | Delete

max-width: 16px;

[313] Fix | Delete

margin: 0;

[314] Fix | Delete

}

[315] Fix | Delete

}

[316] Fix | Delete

[317] Fix | Delete

.sui-box-selector input ~ span {

[318] Fix | Delete

padding-right: 17px;

[319] Fix | Delete

padding-left: 17px;

[320] Fix | Delete

height: 48px;

[321] Fix | Delete

border-radius: 4px;

[322] Fix | Delete

overflow: visible;

[323] Fix | Delete

}

[324] Fix | Delete

[325] Fix | Delete

.sui-box-selector input:checked + span:before,

[326] Fix | Delete

.sui-box-selector input:checked + span:after {

[327] Fix | Delete

content: none;

[328] Fix | Delete

}

[329] Fix | Delete

}

[330] Fix | Delete

[331] Fix | Delete

#smush-lazy-load-placeholder .sui-box-selectors {

[332] Fix | Delete

label.sui-box-selector {

[333] Fix | Delete

width: 80px;

[334] Fix | Delete

height: 60px;

[335] Fix | Delete

overflow: visible;

[336] Fix | Delete

[337] Fix | Delete

&:hover {

[338] Fix | Delete

background-color: #E5E5E5;

[339] Fix | Delete

}

[340] Fix | Delete

[341] Fix | Delete

input + span {

[342] Fix | Delete

height: 40px;

[343] Fix | Delete

padding: 0;

[344] Fix | Delete

margin: 10px;

[345] Fix | Delete

overflow: visible;

[346] Fix | Delete

position: relative;

[347] Fix | Delete

[348] Fix | Delete

&:before {

[349] Fix | Delete

top: -5px;

[350] Fix | Delete

right: -5px;

[351] Fix | Delete

}

[352] Fix | Delete

[353] Fix | Delete

&:after {

[354] Fix | Delete

top: -10px;

[355] Fix | Delete

right: -10px;

[356] Fix | Delete

}

[357] Fix | Delete

}

[358] Fix | Delete

[359] Fix | Delete

input + span img {

[360] Fix | Delete

margin: 0 auto;

[361] Fix | Delete

}

[362] Fix | Delete

[363] Fix | Delete

input[id^="placeholder-icon-1"] + span {

[364] Fix | Delete

background-color: #FAFAFA;

[365] Fix | Delete

}

[366] Fix | Delete

[367] Fix | Delete

input[id^="placeholder-icon-2"] + span {

[368] Fix | Delete

background-color: #333333;

[369] Fix | Delete

}

[370] Fix | Delete

[371] Fix | Delete

.remove-selector {

[372] Fix | Delete

top: -10px;

[373] Fix | Delete

right: -10px;

[374] Fix | Delete

}

[375] Fix | Delete

}

[376] Fix | Delete

}

[377] Fix | Delete

}

[378] Fix | Delete

[379] Fix | Delete

/**

[380] Fix | Delete

* Onboarding modals

[381] Fix | Delete

[382] Fix | Delete

* @since 3.1

[383] Fix | Delete

[384] Fix | Delete

.smush-onboarding-dialog {

[385] Fix | Delete

@keyframes fadeInLeft {

[386] Fix | Delete

from {

[387] Fix | Delete

opacity: 0;

[388] Fix | Delete

transform: translate3d(-50px, 0, 0);

[389] Fix | Delete

}

[390] Fix | Delete

to {

[391] Fix | Delete

opacity: 1;

[392] Fix | Delete

transform: none;

[393] Fix | Delete

}

[394] Fix | Delete

}

[395] Fix | Delete

[396] Fix | Delete

@keyframes fadeInRight {

[397] Fix | Delete

from {

[398] Fix | Delete

opacity: 0;

[399] Fix | Delete

transform: translate3d(50px, 0, 0);

[400] Fix | Delete

}

[401] Fix | Delete

to {

[402] Fix | Delete

opacity: 1;

[403] Fix | Delete

transform: none;

[404] Fix | Delete

}

[405] Fix | Delete

}

[406] Fix | Delete

[407] Fix | Delete

.sui-box { background-color: transparent; }

[408] Fix | Delete

[409] Fix | Delete

#smush-onboarding-content {

[410] Fix | Delete

opacity: 0;

[411] Fix | Delete

background-color: #fff;

[412] Fix | Delete

animation-duration: 0.7s;

[413] Fix | Delete

animation-fill-mode: both;

[414] Fix | Delete

transform-origin: center;

[415] Fix | Delete

transform-style: preserve-3d;

[416] Fix | Delete

[417] Fix | Delete

&.loaded, &.fadeInLeft, &.fadeInRight { opacity: 1; }

[418] Fix | Delete

&.fadeInLeft { animation-name: fadeInLeft; }

[419] Fix | Delete

&.fadeInRight { animation-name: fadeInRight; }

[420] Fix | Delete

[421] Fix | Delete

.sui-box-selectors, .smush-onboarding-sharing-data {

[422] Fix | Delete

display: flex;

[423] Fix | Delete

justify-content: center;

[424] Fix | Delete

align-items: center;

[425] Fix | Delete

[426] Fix | Delete

label:last-of-type {

[427] Fix | Delete

top: 0;

[428] Fix | Delete

font-size: 13px;

[429] Fix | Delete

}

[430] Fix | Delete

}

[431] Fix | Delete

[432] Fix | Delete

.smush-onboarding-tracking-box {

[433] Fix | Delete

background: #f8f8f8;

[434] Fix | Delete

margin: 2px 0 30px;

[435] Fix | Delete

padding: 20px 30px;

[436] Fix | Delete

line-height: 22px;

[437] Fix | Delete

letter-spacing: -0.25px;

[438] Fix | Delete

text-align: center;

[439] Fix | Delete

input{

[440] Fix | Delete

border:1px solid #ddd;

[441] Fix | Delete

background-color: #FAFAFA;

[442] Fix | Delete

border-radius: 4px;

[443] Fix | Delete

box-shadow: none;

[444] Fix | Delete

margin: 0 16px 0 0;

[445] Fix | Delete

width: 16px;

[446] Fix | Delete

height:16px;

[447] Fix | Delete

display: inline-block;

[448] Fix | Delete

vertical-align: middle;

[449] Fix | Delete

+ span{

[450] Fix | Delete

display: inline-block;

[451] Fix | Delete

}

[452] Fix | Delete

}

[453] Fix | Delete

label{

[454] Fix | Delete

display: block;

[455] Fix | Delete

margin:0 auto;

[456] Fix | Delete

max-width: 325px;

[457] Fix | Delete

width: 100%;

[458] Fix | Delete

span {

[459] Fix | Delete

letter-spacing:0;

[460] Fix | Delete

font-size: 12px!important;

[461] Fix | Delete

font-weight: 400;;

[462] Fix | Delete

}

[463] Fix | Delete

}

[464] Fix | Delete

}

[465] Fix | Delete

}

[466] Fix | Delete

[467] Fix | Delete

.smush-onboarding-arrows a {

[468] Fix | Delete

position: absolute;

[469] Fix | Delete

top: 45%;

[470] Fix | Delete

width: 40px;

[471] Fix | Delete

height: 40px;

[472] Fix | Delete

border-radius: 20px;

[473] Fix | Delete

padding-top: 3px;

[474] Fix | Delete

[475] Fix | Delete

&:not(.sui-hidden) {

[476] Fix | Delete

display: flex;

[477] Fix | Delete

justify-content: center;

[478] Fix | Delete

align-items: center;

[479] Fix | Delete

}

[480] Fix | Delete

[481] Fix | Delete

&:hover { background-color: rgba(217, 217, 217, 0.2); }

[482] Fix | Delete

[483] Fix | Delete

&:first-of-type {

[484] Fix | Delete

left: -55px;

[485] Fix | Delete

padding-right: 2px;

[486] Fix | Delete

}

[487] Fix | Delete

[488] Fix | Delete

&:last-of-type {

[489] Fix | Delete

right: -55px;

[490] Fix | Delete

padding-left: 2px;

[491] Fix | Delete

}

[492] Fix | Delete

[493] Fix | Delete

i:before { color: #fff; }

[494] Fix | Delete

}

[495] Fix | Delete

[496] Fix | Delete

@media screen and (max-width: 782px) {

[497] Fix | Delete

.smush-onboarding-arrows { display: none; }

[498] Fix | Delete

}

[499] Fix | Delete

12 3