first
This commit is contained in:
@ -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