first
This commit is contained in:
@ -0,0 +1,65 @@
|
||||
.sp-column-info
|
||||
{
|
||||
max-width: 300px; // fix for wide screen when the actions will move
|
||||
|
||||
.sp-column-actions {
|
||||
max-width: 140px;
|
||||
float:right;
|
||||
text-align: right;
|
||||
.button.button-smaller {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnails.optimized
|
||||
{
|
||||
display: inline-block;
|
||||
.thumb-wrapper
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
.sp-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sp-dropbtn.button {
|
||||
box-sizing: content-box;
|
||||
padding: 0 5px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.sp-dropdown-content {
|
||||
display: none;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: #f9f9f9;
|
||||
min-width: 200px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 5;
|
||||
}
|
||||
.rtl .sp-dropdown-content {
|
||||
right:auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.sp-dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Change color of dropdown links on hover */
|
||||
.sp-dropdown-content a:hover {background-color: #f1f1f1}
|
||||
|
||||
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
|
||||
.sp-dropdown.sp-show .sp-dropdown-content {display:block;}
|
||||
|
||||
} // column
|
||||
@ -0,0 +1,28 @@
|
||||
@mixin loadspinner()
|
||||
{
|
||||
animation: cssload-spin 5000ms infinite linear;
|
||||
-o-animation: cssload-spin 5000ms infinite linear;
|
||||
-ms-animation: cssload-spin 5000ms infinite linear;
|
||||
-webkit-animation: cssload-spin 5000ms infinite linear;
|
||||
-moz-animation: cssload-spin 5000ms infinite linear;
|
||||
|
||||
@keyframes loading-spin {
|
||||
100%{ transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes loading-spin {
|
||||
100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes loading-spin {
|
||||
100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading-spin {
|
||||
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes loading-spin {
|
||||
100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
@mixin breakpoint($min: 0, $max : 0) {
|
||||
@if $min > 0 and $max == 0
|
||||
{
|
||||
@media (min-width: $min ) { @content; }
|
||||
}
|
||||
@if $min > 0 and $max > 0
|
||||
{
|
||||
@media (min-width: $min) and (max-width: $max ) { @content; }
|
||||
}
|
||||
@if $max > 0 and $min == 0
|
||||
{
|
||||
@media (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
$color-darkest: #0f6a7d;
|
||||
$color-dark: #1cbecb;
|
||||
$color-light: #d1f5fd;
|
||||
|
||||
$color-brokenwhite: #F5F5F5;
|
||||
@ -0,0 +1,84 @@
|
||||
@import 'elements/animation';
|
||||
@import 'elements/actionbar';
|
||||
|
||||
@import 'view/edit-media';
|
||||
//@import 'view/other-media';
|
||||
@import 'view/list-item';
|
||||
@import 'view/modal';
|
||||
@import 'view/debug';
|
||||
|
||||
|
||||
// General Styles ( mostly from style.css )
|
||||
|
||||
// Used in modals around
|
||||
.shortpixel-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Reserve some space for the processing text on bottom.
|
||||
.button-primary.optimize
|
||||
{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.switch_button
|
||||
{
|
||||
// margin-left: -5px;
|
||||
line-height: 12px;
|
||||
margin: 2px -5px 10px -5px ;
|
||||
display: inline-block;
|
||||
|
||||
label{
|
||||
padding: 8px 5px; // this padding to make clicking more flexible ( bigger hitbox )
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
input { display: none;
|
||||
&:checked ~ .the_switch { background: #7cdce4; } // background of bar when active
|
||||
&:checked ~ .the_switch:after {
|
||||
left: 20px;
|
||||
background: #1caecb; // color of circle when active
|
||||
}
|
||||
&:disabled ~ .the_switch{
|
||||
background: #d5d5d5;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:disabled ~ .the_switch:after { background: #bcbdbc; }
|
||||
}
|
||||
.the_switch{
|
||||
margin: 8px 15px 8px 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 40px;
|
||||
background: #cccccc; // color of bar when not active
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.25) !important;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -5px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100px;
|
||||
background: #aaa;
|
||||
box-shadow: 0px 1px 2px rgba(0,0,0,0.31);
|
||||
content: '';
|
||||
|
||||
// bouncy effect
|
||||
-webkit-transition : left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.5s ease, margin 0.5s ease !important;
|
||||
-o-transition : left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.5s ease, margin 0.5s ease !important;
|
||||
transition : left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.5s ease, margin 0.5s ease !important;
|
||||
}
|
||||
&:active:after { transform: scale(0.9, 0.85); }
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,88 @@
|
||||
// Shortpixel FolderTree Component
|
||||
|
||||
.sp-folder-picker
|
||||
{
|
||||
position :relative;
|
||||
border: 1px solid #000;
|
||||
margin: 8px 0;
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
.loading {
|
||||
background: rgba(0,0,0,0.4);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 8px;
|
||||
margin-left: 35px;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
&.collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// item
|
||||
.folder
|
||||
{
|
||||
line-height: 20px;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
&.selected > a {
|
||||
font-weight: 700;
|
||||
}
|
||||
&.closed > a > i {
|
||||
background: url('../img/filebrowser/folder-closed.svg') center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
fill: #ff0000;
|
||||
}
|
||||
&.open > a > i {
|
||||
background: url('../img/filebrowser/folder-open.svg') center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
&.is_active > a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} // sp-folder-picker
|
||||
|
||||
// The whole modal space
|
||||
.modal-folder-picker
|
||||
{
|
||||
.sp-folder-picker-selected {
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.folder-message {
|
||||
border: 1px solid #ff0000;
|
||||
margin: 8px 0;
|
||||
padding: 8px 8px 8px 12px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
|
||||
#ngg_page_content .sp-column-info
|
||||
{
|
||||
position: relative;
|
||||
|
||||
.button-smaller {
|
||||
min-width: 150px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.sp-column-actions {
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.button {
|
||||
background-color: black;
|
||||
}
|
||||
.dashicons::before // reinstate what is removed by nextgen
|
||||
{
|
||||
font-family: dashicons;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
@import 'elements/colors';
|
||||
|
||||
|
||||
.shortpixel.shortpixel-notice
|
||||
{
|
||||
|
||||
//padding: 18px;
|
||||
/*min-height: 75px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 1px 12px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
border: 1px solid #c3c4c7;
|
||||
margin: 15px 0;
|
||||
border-left-width: 4px;
|
||||
border-left-color: #72aee6;
|
||||
position: relative; */
|
||||
|
||||
/*span
|
||||
{
|
||||
vertical-align: middle;
|
||||
&.icon {
|
||||
//float: left;
|
||||
margin: 0 25px 0 0;
|
||||
width: 80px;
|
||||
// display: inline-block;
|
||||
}
|
||||
&.content
|
||||
{
|
||||
// width: 50%;
|
||||
padding: 8px 0;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
} */
|
||||
.details-wrapper // open close mechanic.
|
||||
{
|
||||
margin: 8px 0 4px 0;
|
||||
.detail-content-wrapper
|
||||
{
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.detail-content {
|
||||
opacity: 0;
|
||||
transition: opacity 750ms linear;
|
||||
}
|
||||
}
|
||||
label
|
||||
{
|
||||
opacity: 100;
|
||||
transition: opacity 250ms ease-in;
|
||||
span
|
||||
{
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #0085ba;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
input[name="detailhider"] { display: none; } // hidden checkbox
|
||||
input[name="detailhider"]:checked ~ .detail-content-wrapper
|
||||
{
|
||||
max-height: none;
|
||||
}
|
||||
input[name="detailhider"]:checked ~ .detail-content-wrapper .detail-content
|
||||
{
|
||||
opacity: 100;
|
||||
|
||||
}
|
||||
input[name="detailhider"]:checked ~ .show-details
|
||||
{
|
||||
opacity: 0;
|
||||
transition: opacity 50ms ease-out;
|
||||
}
|
||||
input[name='detailhider']:not(:checked) ~ .hide-details
|
||||
{
|
||||
opacity: 0;
|
||||
transition: opacity 50ms ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// compat list if.
|
||||
.shortpixel.shortpixel-notice
|
||||
{
|
||||
.sp-conflict-plugins {
|
||||
display: table;
|
||||
border-spacing: 10px;
|
||||
border-collapse: separate;
|
||||
li {
|
||||
display: table-row;
|
||||
}
|
||||
li > * {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content .button-primary
|
||||
{ // gets overwritten in NGG.
|
||||
background-color: $color-darkest;
|
||||
border-color: $color-darkest;
|
||||
|
||||
&:hover { background-color: $color-dark; }
|
||||
}
|
||||
|
||||
li.sp-conflict-plugins-list {
|
||||
line-height: 28px;
|
||||
list-style: disc;
|
||||
margin-left: 80px;
|
||||
}
|
||||
li.sp-conflict-plugins-list a.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,340 @@
|
||||
.shortpixel-other-media
|
||||
{
|
||||
margin-bottom: 120px; // leave space for the helpscout widget.
|
||||
.search-form
|
||||
{
|
||||
float: right;
|
||||
label
|
||||
{
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.pagination
|
||||
{
|
||||
margin: 25px 0;
|
||||
@media(max-width: 782px) // wp breakpoint.
|
||||
{
|
||||
.pagination-links
|
||||
{
|
||||
float: right;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.displaying-num
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-media-tabs
|
||||
{
|
||||
display: block;
|
||||
margin: 20px 0 0 0;
|
||||
a {
|
||||
background: #ddd;
|
||||
width: 100px;
|
||||
// margin: 0 20px 0 0;
|
||||
margin-right: 0;
|
||||
border-right: 1px solid #fff;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
color: #23282d;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #23282d;
|
||||
font-size: 14px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra-heading
|
||||
{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ccd0d4;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||
span {
|
||||
&:first-child {
|
||||
width: 48px;
|
||||
|
||||
}
|
||||
&.custom-filter
|
||||
{
|
||||
margin-left:12px;
|
||||
}
|
||||
padding: 12px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.list-overview
|
||||
{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #ccd0d4;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||
clear: both;
|
||||
display: table;
|
||||
|
||||
.heading, .item
|
||||
{
|
||||
display: table-row;
|
||||
|
||||
> span
|
||||
{
|
||||
display: table-cell;
|
||||
padding: 8px 10px;
|
||||
line-height: 1.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.heading
|
||||
{
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.sorted::before
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
.sorted.desc::before
|
||||
{
|
||||
content: "\f140";
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
.sorting-indicator::before
|
||||
{
|
||||
content: "\f142";
|
||||
visibility: visible;
|
||||
}
|
||||
.sorting-indicator.asc::before
|
||||
{
|
||||
content: "\f140";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
span.heading span
|
||||
{
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.item
|
||||
{
|
||||
&:nth-child(odd) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
> span:last-child
|
||||
{
|
||||
min-width: 400px;
|
||||
max-width: 400px;
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
.row-actions
|
||||
{
|
||||
left: 0;
|
||||
color: #bbb;
|
||||
a
|
||||
{
|
||||
// margin-right: 4px;
|
||||
text-decoration: none;
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filename
|
||||
{
|
||||
font-size: 14px;
|
||||
min-width: 350px;
|
||||
}
|
||||
.thumb
|
||||
{
|
||||
min-width: 60px;
|
||||
min-height: 60px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
img {
|
||||
max-width: 60px;
|
||||
max-height: 60px;
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
.actions
|
||||
{
|
||||
min-width: 105px;
|
||||
|
||||
div
|
||||
{
|
||||
//float: right;
|
||||
}
|
||||
}
|
||||
.single-action
|
||||
{
|
||||
text-align: left;
|
||||
a
|
||||
{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.button-smaller
|
||||
{
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-action-wrapper
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.single-action
|
||||
{
|
||||
display: inline-block;
|
||||
margin: 8px 0;
|
||||
a
|
||||
{
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.sp-column-info {
|
||||
// max-width: 400px;
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.thumbs-todo
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media(max-width: 1550px) {
|
||||
width: auto;
|
||||
}
|
||||
.sp-column-actions
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media(max-width: 1250px)
|
||||
{
|
||||
.heading
|
||||
{
|
||||
.type { display: none; }
|
||||
}
|
||||
.item {
|
||||
.mediatype { display: none; }
|
||||
.filename, .folderpath { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width: 1200px)
|
||||
{
|
||||
.heading
|
||||
{
|
||||
.date { display: none; }
|
||||
}
|
||||
|
||||
.item
|
||||
{
|
||||
.date { display: none; }
|
||||
}
|
||||
}
|
||||
.no-items
|
||||
{
|
||||
padding: 10px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
} // list-overview
|
||||
|
||||
// Scan Tab
|
||||
.scan-area
|
||||
{
|
||||
margin: 20px 0;
|
||||
|
||||
.scan-actions
|
||||
{
|
||||
> div {
|
||||
margin: 20px 0;
|
||||
transition:visibility 0.3s linear,opacity 0.3s linear;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.button {
|
||||
width: 200px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.result
|
||||
{
|
||||
min-width: 500px;
|
||||
margin: 20px 0;
|
||||
transition: 1s all;
|
||||
|
||||
}
|
||||
.result-table
|
||||
{
|
||||
display: table;
|
||||
min-width: 300px;
|
||||
> div {
|
||||
display: table-row;
|
||||
|
||||
background: #fff;
|
||||
> span {
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
.message {
|
||||
padding: 4px 8px;
|
||||
font-weight: 700;
|
||||
display: table-caption;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
.not-visible {
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.scan-help
|
||||
{
|
||||
max-width: 750px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
} // scan-area
|
||||
|
||||
} // shortpixel-other-media
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
@import 'view/settings';
|
||||
@import 'view/settings-advanced';
|
||||
@import 'view/settings-cloudflare';
|
||||
@import 'view/settings-tools';
|
||||
@import 'view/inline-help';
|
||||
@ -0,0 +1,207 @@
|
||||
/**
|
||||
CSS for features that are displayed on all Admin page, like the bar status icon and some alerts.
|
||||
*/
|
||||
|
||||
#wpadminbar li.shortpixel-toolbar-processing
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&.shortpixel-hide {
|
||||
display: none;
|
||||
}
|
||||
.ab-item > div {
|
||||
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
padding: 0;
|
||||
margin-top: -1px;
|
||||
padding: 0 3px;
|
||||
img {
|
||||
margin-right: 2px;
|
||||
margin-top: 6px;
|
||||
vertical-align: top;
|
||||
opacity: 1;
|
||||
transition: all 1s linear;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
span.shp-alert {
|
||||
display:none;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.stats
|
||||
{
|
||||
left: -1px;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
padding: 5px 0 0 0px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
text-align:center;
|
||||
}
|
||||
.controls
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 32px;
|
||||
background: rgba(35,40,45,0.5);
|
||||
box-sizing: border-box;
|
||||
transition: all 1s linear;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.play, .pause
|
||||
{
|
||||
font-family: dashicons;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.cssload-container {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
}
|
||||
.cssload-speeding-wheel {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.7;
|
||||
margin: 0 auto;
|
||||
border: 4px solid rgb(28,191,203);
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
animation: cssload-spin 2000ms infinite linear;
|
||||
-o-animation: cssload-spin 2000ms infinite linear;
|
||||
-ms-animation: cssload-spin 2000ms infinite linear;
|
||||
-webkit-animation: cssload-spin 2000ms infinite linear;
|
||||
-moz-animation: cssload-spin 2000ms infinite linear;
|
||||
}
|
||||
|
||||
@keyframes cssload-spin {
|
||||
100%{ transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes cssload-spin {
|
||||
100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes cssload-spin {
|
||||
100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes cssload-spin {
|
||||
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes cssload-spin {
|
||||
100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
&:hover
|
||||
{
|
||||
img:hover, .stats
|
||||
{
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.controls
|
||||
{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
} // ab-item > div
|
||||
|
||||
&.shortpixel-paused .ab-item > div
|
||||
{
|
||||
.cssload-speeding-wheel
|
||||
{
|
||||
animation: none;
|
||||
}
|
||||
.controls
|
||||
{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
.stats
|
||||
{
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.shortpixel-alert .ab-item > div // alert active.
|
||||
{
|
||||
span.shp-alert{
|
||||
display: inline;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.controls { display: none; }
|
||||
}
|
||||
&.shortpixel-quota-exceeded .ab-item > div {
|
||||
.cssload-container { display: none; }
|
||||
&:hover img:hover
|
||||
{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-notice-wrapper
|
||||
{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
|
||||
.toolbar-notice
|
||||
{
|
||||
border: 1px solid rgb(28,191,203);
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 4px 14px;
|
||||
white-space: nowrap;
|
||||
transition: opacity 5s;
|
||||
opacity: 1;
|
||||
margin: 4px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
|
||||
|
||||
body.debug-model-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.debugInfo .content.wrapper
|
||||
{
|
||||
display: none;
|
||||
li strong {
|
||||
margin-right: 15px;
|
||||
}
|
||||
ul
|
||||
{
|
||||
margin: 25px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.debug-modal {
|
||||
display: none;
|
||||
width: 75%;
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
top: 10%;
|
||||
//overflow-y: auto;
|
||||
z-index: 10020; // just trying to stay on top, don't blame me.
|
||||
|
||||
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
|
||||
&.success {
|
||||
//borer: solgreen;
|
||||
border: 4px solid green;
|
||||
|
||||
}
|
||||
&.error {
|
||||
border: 4px solid red;
|
||||
h3 { background-color: #ff0000;}
|
||||
}
|
||||
|
||||
.content-area {
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.modal_header {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
background-color: #f3f3f3;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 8px 5px;
|
||||
cursor: move;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal_close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content, .modal_content {
|
||||
padding: 5px 15px 10px;
|
||||
//display: inline-block;
|
||||
//height: 100%;
|
||||
//margin-top: -40px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.debugModal_overlay
|
||||
{
|
||||
background: #000;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
opacity : 0.7;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
|
||||
|
||||
.view-edit-media
|
||||
{
|
||||
a.debugModal
|
||||
{
|
||||
margin: 20px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sp-column-stats
|
||||
{
|
||||
position: relative;
|
||||
|
||||
.sp-column-actions
|
||||
{
|
||||
margin-right: 5px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.edit-media-stats
|
||||
{
|
||||
// border: 1px solid #ccc;
|
||||
// padding: 16px;
|
||||
|
||||
li
|
||||
{
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-actions
|
||||
{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
//text-align: center;
|
||||
.button.button-smaller
|
||||
{
|
||||
//float: none;
|
||||
padding: 6px 15px;
|
||||
height: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
} // view-edit-media
|
||||
|
||||
.spio-message
|
||||
{
|
||||
img {
|
||||
@include loadspinner;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
// Loads on the bottom body part, load strict
|
||||
.shortpixel-modal-active .debug-modal.debugInfo // Modal open
|
||||
{
|
||||
ul
|
||||
{
|
||||
li {
|
||||
strong
|
||||
{
|
||||
display: inline-block;
|
||||
min-width: 200px;
|
||||
}
|
||||
img {
|
||||
max-height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre
|
||||
{
|
||||
// font-size: 12px;
|
||||
// overflow: hidden;
|
||||
}
|
||||
.green { color: green; }
|
||||
.red { color: red; }
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
|
||||
div.spio-inline-help{
|
||||
float:right;
|
||||
margin-left: 15px;
|
||||
span{
|
||||
font-size: 1.8em;
|
||||
color: #1caecb;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
div.spio-modal-shade {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 10; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
div.spio-modal {
|
||||
background-color: #fefefe;
|
||||
/*margin: 8% auto; 15% from the top and centered */
|
||||
background-image: url("../img/spinner2.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
padding: 20px 16px 16px;
|
||||
border: 1px solid #888;
|
||||
width: 30%; /* Could be more or less, depending on screen size */
|
||||
min-width: 300px; /* Could be more or less, depending on screen size */
|
||||
z-index: 100; /* Proper z-index */
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
.spio-close-help-button {
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:0;
|
||||
margin-top: 0px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 22px;
|
||||
line-height: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
div.spio-modal-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
.spio-hide { display: none; }
|
||||
@ -0,0 +1,144 @@
|
||||
|
||||
.sp-column-info
|
||||
{
|
||||
position: relative;
|
||||
|
||||
.thumbnails.optimized
|
||||
{
|
||||
// position: relative;
|
||||
|
||||
.totals {
|
||||
|
||||
}
|
||||
.thumb-wrapper
|
||||
{
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
max-width: 360px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
transition: all 1s;
|
||||
box-sizing: border-box;
|
||||
.thumb
|
||||
{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.thumb-name {
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.optimize-bar {
|
||||
float: right;
|
||||
margin-left: 8px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
margin-top: 4px;
|
||||
|
||||
.point
|
||||
{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
display: inline-block;
|
||||
background: #d6d8d9;
|
||||
|
||||
&.checked {
|
||||
background: #1abdca;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cutoff {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
} // wrapper
|
||||
&:hover {
|
||||
.thumb-wrapper{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.sp-column-actions
|
||||
{
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.thumbs-todo
|
||||
{
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
h4:hover ~ span { display: inline-block; }
|
||||
}
|
||||
|
||||
h4 { margin: 0; }
|
||||
.shortpixel-image-error, .shortpixel-image-notice {
|
||||
display: block;
|
||||
border: 1px solid #ff0000;
|
||||
padding: 12px;
|
||||
margin: 14px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
.shortpixel-error-reset
|
||||
{
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
} //error
|
||||
.shortpixel-image-notice {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
} // sp-column-info
|
||||
|
||||
// The whole column
|
||||
.column-wp-shortPixel
|
||||
{
|
||||
|
||||
.message
|
||||
{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 12px 0;
|
||||
img {
|
||||
@include loadspinner;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Style for Grid view popups */
|
||||
.shortpixel-popup-info
|
||||
{
|
||||
display: flex;
|
||||
clear: both;
|
||||
border-top: 1px solid #dcdcde;
|
||||
margin: 12px 0;
|
||||
// float: left;
|
||||
// width: 100%;
|
||||
|
||||
label {
|
||||
min-width: 30%;
|
||||
text-align: right;
|
||||
margin-right: 4%;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
> div { padding-left: 8px; padding-bottom: 8px; }
|
||||
|
||||
}
|
||||
|
||||
.edit-attachment-frame .shortpixel-popup-info
|
||||
{
|
||||
border: 0;
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
div.sp-modal-shade {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 10000; /* Sit on top - blame WP-admin for the z-index battle . */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background: rgb(0,0,0); /* Fallback color */
|
||||
background: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
opacity: 0.4; // doesn't work without this for some reason?
|
||||
}
|
||||
div.shortpixel-modal {
|
||||
background-color: #fefefe;
|
||||
/*margin: 8% auto; 15% from the top and centered */
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 30%; /* Could be more or less, depending on screen size */
|
||||
min-width: 300px; /* Could be more or less, depending on screen size */
|
||||
z-index: 999999; /* Z-index wars :/ */
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
.sp-close-button, button.sp-close-upgrade-button
|
||||
{
|
||||
float: right;
|
||||
margin-top: 0px;
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
font-size: 22px;
|
||||
line-height: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.sptw-modal-spinner {
|
||||
background-image: url("../img/spinner2.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.sp-modal-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
div.sp-modal-body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
/* Specific styles for advanced settings tab */
|
||||
|
||||
#shortpixel-settings-tabs #tab-adv-settings
|
||||
{
|
||||
|
||||
.excludeSizeOption {
|
||||
margin-right: 20px;
|
||||
white-space:nowrap;
|
||||
line-height: 24px;
|
||||
float: left;
|
||||
clear: both;
|
||||
input { margin-right: 8px; }
|
||||
}
|
||||
|
||||
.deliverWebpTypes, .deliverWebpAlteringTypes {
|
||||
margin: 16px 0 16px 16px;
|
||||
}
|
||||
|
||||
.new-exclusion-button {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
ul.exclude-list {
|
||||
li {
|
||||
float: left;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #1caecb;
|
||||
background: #1caecb;
|
||||
border-radius: 8px;
|
||||
margin: 8px 8px 0 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
&.no-exclusion-item
|
||||
{
|
||||
cursor: default;
|
||||
}
|
||||
span {
|
||||
margin-left: 6px;
|
||||
|
||||
}
|
||||
&.has-error {
|
||||
background: #ff0000;
|
||||
border-color: #ff0000;
|
||||
}
|
||||
&.is-regex {
|
||||
border-right: green;
|
||||
border-right-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
margin: 20px 0;
|
||||
.not-visible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.new-exclusion
|
||||
{
|
||||
// border-top: 1px solid #ccc;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 2px 2px 1px #ccc;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
h3 {
|
||||
margin: 2px 0;
|
||||
}
|
||||
&.not-visible
|
||||
{
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
margin: 8px 0;
|
||||
height: auto;
|
||||
label
|
||||
{
|
||||
min-width: 110px;
|
||||
display: inline-block;
|
||||
}
|
||||
input, select {
|
||||
min-width: 250px;
|
||||
&.small {
|
||||
width: 80px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
&.button-actions
|
||||
{
|
||||
margin-left: 114px;
|
||||
}
|
||||
button {
|
||||
// margin-left: 104px;
|
||||
min-width: 75px;
|
||||
padding: 8px 6px;
|
||||
&[name="removeExclusion"]
|
||||
{
|
||||
background: #ff0000;
|
||||
border-color: #ff0000;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.not-visible
|
||||
{
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
transition: 500ms height;
|
||||
}
|
||||
|
||||
.size-option
|
||||
{
|
||||
> div {
|
||||
margin: 8px 0;
|
||||
}
|
||||
div label
|
||||
{
|
||||
min-width: 110px;
|
||||
}
|
||||
}
|
||||
.thumbnail-option:not(.not-visible) {
|
||||
height: 150px;
|
||||
margin-left: 12px;
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.exclusion-save-reminder
|
||||
{
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avifNoticeDisabled
|
||||
{
|
||||
padding: 12px 12px;
|
||||
line-height: 26px;
|
||||
> .spio-inline-help {
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
.cf_switch
|
||||
{
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
margin: 0 -2px;
|
||||
background-color: #e2faff;
|
||||
// font-weight: 700;
|
||||
display: inline-block;
|
||||
// font-size: 13px;
|
||||
//cursor: default;
|
||||
|
||||
span
|
||||
{
|
||||
//text-align:center;
|
||||
// font-size: 18px;
|
||||
padding:8px 0px 8px 15px;
|
||||
display:block;
|
||||
//font-size: 13px;
|
||||
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
input:checked + span
|
||||
{
|
||||
background-color:#0085ba;
|
||||
color:#F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
&.global-hidden
|
||||
{
|
||||
label {
|
||||
cursor: default;
|
||||
}
|
||||
input:checked + span
|
||||
{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
|
||||
#tab-tools
|
||||
{
|
||||
.button { min-height: 44px; }
|
||||
.option{
|
||||
clear: both;
|
||||
display: flex;
|
||||
margin: 25px 0;
|
||||
div.name {
|
||||
width: 220px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
flex : 0 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
div.field {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
// margin-left: 220px;
|
||||
// flex: 0 0 auto;
|
||||
.button {
|
||||
min-width: 200px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 6px 8px;
|
||||
&.danger
|
||||
{
|
||||
color: #fff;
|
||||
background: #ff0000;
|
||||
border: 1px solid #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
&.queue-warning
|
||||
{
|
||||
border: 1px solid #ff0000;
|
||||
font-weight: 700;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
}
|
||||
//p.description { margin: 8px 0; }
|
||||
}
|
||||
|
||||
|
||||
.option-row
|
||||
{
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.danger-zone
|
||||
{
|
||||
h3 {
|
||||
margin-left: 15px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
> p { margin-left: 15px; }
|
||||
// padding: 8px;
|
||||
// border: 1px solid #ff0000;
|
||||
}
|
||||
|
||||
|
||||
} // Tab tools.
|
||||
@ -0,0 +1,530 @@
|
||||
|
||||
// in our own scope.
|
||||
.settings_page_wp-shortpixel-settings
|
||||
{
|
||||
@import '../elements/colors';
|
||||
@import '../elements/breakpoints';
|
||||
|
||||
a {
|
||||
color: $color-darkest;
|
||||
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
&:before, &:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.form-table {
|
||||
th {
|
||||
width: 220px;
|
||||
}
|
||||
td {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.shortpixel-key-valid {
|
||||
font-weight: bold;
|
||||
.dashicons-yes:before {
|
||||
font-size: 2em;
|
||||
line-height: 25px;
|
||||
color: #3485ba;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* TABS CONTROLS */
|
||||
article.sp-tabs {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
/*height: 1100px;*/
|
||||
margin: 2em auto;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 1.8em;
|
||||
left: 0;
|
||||
/*height: 1100px;*/
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
/*background-color: #ddd;*/
|
||||
/* border-radius: 5px; */
|
||||
z-index: 0;
|
||||
&.sel-tab {
|
||||
position: relative;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
|
||||
.wp-shortpixel-tab-content {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
.wp-shortpixel-tab-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
&:first-child {
|
||||
z-index: 1;
|
||||
}
|
||||
} // section
|
||||
section h2 a:focus, article.sp-tabs section#tab-resources a:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
section.sel-tab, article.sp-tabs section.sel-tab h2 {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
h2:before {
|
||||
content: none;
|
||||
}
|
||||
} // article
|
||||
|
||||
.sp-column-actions-template + .sp-column-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button, button:focus
|
||||
{
|
||||
color: $color-darkest;
|
||||
border-color: $color-darkest;
|
||||
}
|
||||
.button-primary, .button-primary:focus {
|
||||
background-color: $color-darkest;
|
||||
border-color: $color-darkest;
|
||||
color: #fff;
|
||||
|
||||
&:hover
|
||||
{
|
||||
background-color: $color-dark;
|
||||
border-color: $color-darkest;
|
||||
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
.button {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
.top-menu
|
||||
{
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
position: relative;
|
||||
@include breakpoint(0, 1200px)
|
||||
{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.links
|
||||
{
|
||||
|
||||
a { font-size: 18px; margin-right: 8px; white-space: nowrap; line-height: 26px;}
|
||||
padding-right: 195px;
|
||||
flex: 12 4 auto;
|
||||
}
|
||||
.quota-remaining
|
||||
{
|
||||
//float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.spio-status-box {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -49px;
|
||||
right: 0;
|
||||
padding: 5px 10px;
|
||||
background: white;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
.pie-wrapper
|
||||
{
|
||||
flex: 4 2 auto;
|
||||
min-width: 100px;
|
||||
display: inline-block;
|
||||
// flex-grow: 2;
|
||||
}
|
||||
div.sp-bulk-summary {
|
||||
|
||||
z-index: 10;
|
||||
|
||||
.opt-circle-average {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
// margin-right: 35px;
|
||||
.trail {
|
||||
stroke: #ddd;
|
||||
}
|
||||
.path {
|
||||
stroke: $color-dark;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease 0s;
|
||||
}
|
||||
.text {
|
||||
|
||||
fill: #1FBEC9;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
dominant-baseline: middle;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
}
|
||||
span {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
font-weight: 700;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
color: #0f6a7d;
|
||||
}
|
||||
@include breakpoint(0,1500px)
|
||||
{
|
||||
|
||||
.opt-circle-average {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
} // optimized thing
|
||||
} // top menu
|
||||
|
||||
.wp-shortpixel-tab-content
|
||||
{
|
||||
transition: all 1000ms linear;
|
||||
}
|
||||
.red {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.option
|
||||
{
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
.button
|
||||
{
|
||||
|
||||
}
|
||||
p {
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shortpixel-help-link span.dashicons
|
||||
{
|
||||
text-decoration: none;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
//tabs
|
||||
article.sp-tabs
|
||||
{
|
||||
section // inside the tab
|
||||
{
|
||||
p.settings-info {
|
||||
padding-top: 0px;
|
||||
color: #818181;
|
||||
font-size:13px !important;
|
||||
}
|
||||
p.settings-info.shortpixel-settings-error {
|
||||
color: #c32525;
|
||||
}
|
||||
|
||||
.wp-shortpixel-tab-content
|
||||
{ opacity: 0; }
|
||||
&.sel-tab .wp-shortpixel-tab-content
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.option-content
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.suboption // if you are child of main option, indent left.
|
||||
{
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
.toggleTarget
|
||||
{
|
||||
display: none;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
|
||||
}
|
||||
|
||||
.modalTarget
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleTarget.is-visible
|
||||
{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
}
|
||||
section h2 {
|
||||
position: absolute;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
width: 180px;
|
||||
height: 1.8em;
|
||||
top: -1.8em;
|
||||
left: 10px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #999;
|
||||
background-color: #ddd;
|
||||
@include breakpoint(0, 991px)
|
||||
{
|
||||
width: 140px;
|
||||
}
|
||||
/* border-radius: 5px 5px 0 0; */
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.8em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #23282d;
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
section.sel-tab h2
|
||||
{
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
article.sp-tabs section:nth-of-type(2) h2 {
|
||||
left: 192px;
|
||||
@include breakpoint(0, 991px)
|
||||
{
|
||||
left: 152px;
|
||||
}
|
||||
}
|
||||
article.sp-tabs section:nth-of-type(3) h2 {
|
||||
left: 374px;
|
||||
@include breakpoint(0, 991px)
|
||||
{
|
||||
left: 294px;
|
||||
}
|
||||
}
|
||||
article.sp-tabs section:nth-of-type(4) h2 {
|
||||
left: 556px;
|
||||
@include breakpoint(0, 991px)
|
||||
{
|
||||
left: 436px;
|
||||
}
|
||||
}
|
||||
article.sp-tabs section:nth-of-type(5) h2 {
|
||||
left: 738px;
|
||||
@include breakpoint(0, 991px)
|
||||
{
|
||||
left: 578px;
|
||||
}
|
||||
}
|
||||
article.sp-tabs section:nth-of-type(6) h2 {
|
||||
left: 920px;
|
||||
}
|
||||
|
||||
//debug-tab is now after the other tabs, because of form issues.
|
||||
article.sp-tabs section#tab-debug {
|
||||
|
||||
}
|
||||
//article.sp-tabs section h2
|
||||
|
||||
section#tab-debug
|
||||
{
|
||||
h2 { left: 738px; }
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.env .flex, .fs .flex {
|
||||
flex-wrap: wrap;
|
||||
max-width: 450px;
|
||||
span {
|
||||
width: 45%;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
.table
|
||||
{
|
||||
display: table;
|
||||
>div {
|
||||
display: table-row;
|
||||
>span {
|
||||
display: table-cell;
|
||||
}
|
||||
&.head > span { font-weight: 700; }
|
||||
}
|
||||
|
||||
}
|
||||
.table.notices {
|
||||
> div > span
|
||||
{
|
||||
width: 18%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.banner
|
||||
{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
a { display: inline-block;
|
||||
outline: none;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
img { width: 180px}
|
||||
|
||||
}
|
||||
.line {
|
||||
flex: 2;
|
||||
|
||||
h3 {
|
||||
color: #00d0e5;
|
||||
font-size: 22px;
|
||||
};
|
||||
|
||||
}
|
||||
.button-wrap
|
||||
{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
.button {
|
||||
background: #ff0000;
|
||||
padding: 4px 12px;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
margin: 12px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
//height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* In-view notice ( not on top, between the options ) - styled after WP notice */
|
||||
.view-notice, .compression-notice
|
||||
{
|
||||
|
||||
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
border: 4px solid #fff;
|
||||
|
||||
padding: 1px 12px;
|
||||
p {
|
||||
margin: 1em 0 !important;
|
||||
//line-height: 12px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.warning
|
||||
{
|
||||
border-left-color: #ffb900;
|
||||
}
|
||||
}
|
||||
// lazy reposition.
|
||||
.compression-notice
|
||||
{
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.view-notice-row
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ####### SETTINGS TAB (GENERAL)
|
||||
#tab-settings
|
||||
{
|
||||
.shortpixel-compression
|
||||
{
|
||||
strong
|
||||
{
|
||||
line-height: 22px;
|
||||
}
|
||||
.shortpixel-compression-options {
|
||||
// color: #999;
|
||||
display: inline-block;
|
||||
}
|
||||
label {
|
||||
width:158px;
|
||||
margin: 0 -2px;
|
||||
background-color:$color-light;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
span {
|
||||
text-align:center;
|
||||
font-size: 16px;
|
||||
padding:8px 0px;
|
||||
display:block;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked + span {
|
||||
background-color:$color-darkest;
|
||||
color:#FFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
} // tab-settings
|
||||
} // end of settings
|
||||
Reference in New Issue
Block a user