2816 lines
No EOL
56 KiB
CSS
2816 lines
No EOL
56 KiB
CSS
@charset "UTF-8";
|
|
/*-----------------------------------------------*\
|
|
|
|
Author: Thomas Geisen (www.thomasgeisen.fr)
|
|
Method : SUITCSS (modified)
|
|
|
|
.ComponentName => Name of component (Ex : .SiteHeader)
|
|
.ComponentName--modifierName => Modifier of component (.SiteHeader--white, .SiteHeader--fixed)
|
|
.ComponentName-descendantName => Children of componant (.SiteHeader-logo, .SiteHeader-menu)
|
|
.ComponentName.isState => State of component (.isActive, .isOpen)
|
|
|
|
More informations here : https://suitcss.github.io/ or http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html (french)
|
|
|
|
--- EVERY CLASS are prefixed with "wpr-"
|
|
|
|
\*-----------------------------------------------*/
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: currentColor;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a {
|
|
color: currentColor;
|
|
transition: color 200ms ease-out;
|
|
-webkit-transition: color 200ms ease-out;
|
|
}
|
|
a:hover {
|
|
color: currentColor;
|
|
}
|
|
|
|
input[type=submit] {
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
a:active, button:active {
|
|
outline: none;
|
|
}
|
|
a:focus, button:focus {
|
|
color: currentColor;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.wpr-wrap {
|
|
padding: 16px;
|
|
margin: 0 0 0 -20px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-wrap {
|
|
padding: 0;
|
|
margin: 0 0 0 -10px;
|
|
}
|
|
}
|
|
|
|
.wpr-body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
image-rendering: optimizeQuality;
|
|
text-rendering: optimizeLegibility;
|
|
display: flex;
|
|
color: #121116;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.wpr-body * {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 783px) {
|
|
#hs-beacon {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.wpr-u-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Icons in a font-icon with icomoon (https://icomoon.io/app)
|
|
|
|
\*-----------------------------------------------*/
|
|
@font-face {
|
|
font-family: "wpr-icomoon";
|
|
src: url("../fonts/icomoon.eot");
|
|
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg#icomoon") format("svg");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
[class^=wpr-icon-]:before, [class*=" wpr-icon-"]:after,
|
|
[class^=wpr-icon-]:after, [class*=" wpr-icon-"]:before,
|
|
[id^=wpr-nav-]:before, [id*=" wpr-nav-"]:after,
|
|
[id^=wpr-nav-]:after, [id*=" wpr-nav-"]:before {
|
|
font-family: "wpr-icomoon";
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
[class^=wpr-icon-] span.hidden,
|
|
[class*=" wpr-icon-"] span.hidden {
|
|
display: inline-block;
|
|
height: 0;
|
|
width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wpr-icon-chevron-right:before {
|
|
content: "\e900";
|
|
}
|
|
|
|
.wpr-icon-chevron-left:before {
|
|
content: "\e900";
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.wpr-icon-chevron-down:before {
|
|
content: "\e901";
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
.wpr-icon-chevron-up:before {
|
|
content: "\e902";
|
|
top: 50%;
|
|
transform: translateY(-50%) scale(0.6);
|
|
}
|
|
|
|
.wpr-icon-rollback:before {
|
|
content: "\e903";
|
|
}
|
|
|
|
.wpr-icon-addon:before, .wpr-addonSubMenuItem:before {
|
|
content: "\e904";
|
|
}
|
|
|
|
.wpr-icon-addons:before, #wpr-nav-addons:before {
|
|
content: "\e905";
|
|
}
|
|
|
|
.wpr-icon-book:before {
|
|
content: "\e906";
|
|
}
|
|
|
|
.wpr-icon-cdn:before, #wpr-nav-page_cdn:before {
|
|
content: "\e907";
|
|
}
|
|
|
|
.wpr-icon-database:before, #wpr-nav-database:before {
|
|
content: "\e908";
|
|
}
|
|
|
|
.wpr-icon-export:before {
|
|
content: "\e909";
|
|
}
|
|
|
|
.wpr-icon-files:before, #wpr-nav-cache:before {
|
|
content: "\e90a";
|
|
}
|
|
|
|
.wpr-icon-help:before {
|
|
content: "\e90b";
|
|
}
|
|
|
|
.wpr-icon-home:before, #wpr-nav-dashboard:before {
|
|
content: "\e90c";
|
|
}
|
|
|
|
.wpr-icon-import:before {
|
|
content: "\e90d";
|
|
}
|
|
|
|
.wpr-icon-important:before {
|
|
content: "\e90e";
|
|
}
|
|
|
|
.wpr-icon-information:before {
|
|
content: "\e90f";
|
|
}
|
|
|
|
.wpr-icon-information2:before {
|
|
content: "\e910";
|
|
}
|
|
|
|
.wpr-icon-interrogation:before {
|
|
content: "\e911";
|
|
}
|
|
|
|
.wpr-icon-media:before, #wpr-nav-media:before {
|
|
content: "\e912";
|
|
}
|
|
|
|
.wpr-icon-plus:before {
|
|
content: "\e913";
|
|
}
|
|
|
|
.wpr-icon-refresh:before, #wpr-nav-preload:before {
|
|
content: "\e914";
|
|
}
|
|
|
|
.wpr-icon-rules:before, #wpr-nav-advanced_cache:before {
|
|
content: "\e915";
|
|
}
|
|
|
|
.wpr-icon-stack:before, #wpr-nav-file_optimization:before {
|
|
content: "\e916";
|
|
}
|
|
|
|
.wpr-icon-tools:before, #wpr-nav-tools:before {
|
|
content: "\e917";
|
|
}
|
|
|
|
.wpr-icon-trash:before {
|
|
content: "\e918";
|
|
}
|
|
|
|
.wpr-icon-user:before {
|
|
content: "\e919";
|
|
}
|
|
|
|
.wpr-icon-check:before {
|
|
content: "\e920";
|
|
}
|
|
|
|
.wpr-icon-check2:before {
|
|
content: "\e921";
|
|
}
|
|
|
|
.wpr-icon-close:before {
|
|
content: "\e922";
|
|
}
|
|
|
|
.wpr-icon-heartbeat:before, #wpr-nav-heartbeat:before {
|
|
content: url("../img/heartbeat.svg");
|
|
}
|
|
|
|
.wpr-icon-heartbeat-hover:before, #wpr-nav-heartbeat.isActive:before, #wpr-nav-heartbeat:hover:before {
|
|
content: url("../img/heartbeat-hover.svg");
|
|
}
|
|
|
|
.wpr-icon-imagify:before, #wpr-nav-imagify:before {
|
|
content: url("../img/imagify.svg");
|
|
}
|
|
|
|
.wpr-icon-imagify-hover:before, #wpr-nav-imagify.isActive:before, #wpr-nav-imagify:hover:before {
|
|
content: url("../img/imagify-hover.svg");
|
|
}
|
|
|
|
.wpr-icon-tutorial:before, #wpr-nav-tutorials:before {
|
|
content: url("../img/play.svg");
|
|
}
|
|
|
|
.wpr-icon-tutorial-hover:before, #wpr-nav-tutorials.isActive:before, #wpr-nav-tutorials:hover:before {
|
|
content: url("../img/play-hover.svg");
|
|
}
|
|
|
|
.wpr-icon-tutorial-alt:before {
|
|
content: url("../img/play-alt.svg");
|
|
}
|
|
|
|
.wpr-title1 {
|
|
font-size: 1.625rem;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.wpr-title2 {
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
font-weight: bold;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.wpr-title3, .wpr-select label, .wpr-select select, .wpr-field--radio label {
|
|
font-size: 0.875rem;
|
|
line-height: 1.7142857143;
|
|
font-weight: bold;
|
|
letter-spacing: -0.011em;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Header / Navigation (left bar)
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-Header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 0 0 225px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Header {
|
|
flex: 0 0 50px;
|
|
}
|
|
}
|
|
.wpr-Header-logo {
|
|
padding: 32px 0 24px;
|
|
text-align: center;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Header-logo {
|
|
padding: 16px 0 8px;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Header-logo-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
.wpr-Header-logo-mobile {
|
|
display: none;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Header-logo-mobile {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.wpr-Header-footer {
|
|
margin-top: auto;
|
|
padding: 48px 20px 0;
|
|
font-size: 0.6875rem;
|
|
line-height: 4.3636363636;
|
|
color: #666666;
|
|
opacity: 0.6;
|
|
font-weight: bold;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Header-footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Sidebar (right)
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-Sidebar {
|
|
position: relative;
|
|
display: none;
|
|
flex: 0 0 290px;
|
|
padding: 24px 16px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-Sidebar {
|
|
flex: 0 0 260px;
|
|
}
|
|
}
|
|
@media (max-width: 1083px) {
|
|
.wpr-Sidebar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.wpr-Sidebar-title {
|
|
margin-bottom: 32px;
|
|
}
|
|
.wpr-Sidebar-notice {
|
|
padding: 8px 16px;
|
|
margin-bottom: 16px;
|
|
background: #fff;
|
|
border: 1px solid #E8EBEE;
|
|
border-left: 2px solid #1EADBF;
|
|
border-radius: 0 3px 3px 0;
|
|
color: #666666;
|
|
}
|
|
.wpr-Sidebar-notice p {
|
|
margin: 0;
|
|
}
|
|
.wpr-Sidebar-notice-link {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
font-size: 0.6875rem;
|
|
line-height: 1.8181818182;
|
|
color: #02707F;
|
|
letter-spacing: -0.05em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-Sidebar-notice-link:hover, .wpr-Sidebar-notice-link:focus {
|
|
color: #40BACB;
|
|
}
|
|
.wpr-Sidebar-info {
|
|
padding: 16px;
|
|
background: #EBFAF5;
|
|
margin-bottom: 16px;
|
|
border-radius: 3px;
|
|
}
|
|
.wpr-Sidebar-info h4 {
|
|
padding-left: 48px;
|
|
font-weight: 500;
|
|
}
|
|
.wpr-Sidebar-info p {
|
|
margin: 8px 0 0;
|
|
font-size: 0.6875rem;
|
|
line-height: 1.4545454545;
|
|
color: #666666;
|
|
}
|
|
.wpr-Sidebar-info i {
|
|
position: absolute;
|
|
display: block;
|
|
margin-top: -1px;
|
|
width: 40px;
|
|
height: 40px;
|
|
color: #00A66B;
|
|
font-size: 1.0625rem;
|
|
line-height: 2.3529411765;
|
|
background: #C6F0DE;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Main content of the page
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-Content {
|
|
position: relative;
|
|
background: #fff;
|
|
padding: 32px 24px;
|
|
flex: 1 1 auto;
|
|
max-width: 1230px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Content {
|
|
padding: 24px 16px;
|
|
}
|
|
}
|
|
.wpr-Content form > input:last-child {
|
|
margin-top: 24px;
|
|
color: #fff !important;
|
|
}
|
|
.wpr-Content.isNotFull {
|
|
max-width: 960px;
|
|
}
|
|
.wpr-Content-tips {
|
|
position: absolute;
|
|
top: 48px;
|
|
right: 24px;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
}
|
|
@media (max-width: 1083px) {
|
|
.wpr-Content-tips {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Page / section
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-Page {
|
|
margin-bottom: 32px;
|
|
}
|
|
.wpr-Page-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-Page-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.wpr-Page-col {
|
|
flex: 1 1 auto;
|
|
}
|
|
.wpr-Page-col--fixed {
|
|
margin-left: 24px;
|
|
flex: 0 0 325px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-Page-col--fixed {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.wpr-Page#dashboard #wpr-action-refresh_account:before {
|
|
transition: all 200ms ease-out;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.wpr-Page#dashboard #wpr-action-refresh_account.wpr-isLoading:before {
|
|
animation: loading 1.2s infinite;
|
|
}
|
|
.wpr-Page#dashboard #wpr-action-refresh_account.wpr-isHidden:before {
|
|
opacity: 0;
|
|
}
|
|
.wpr-Page#dashboard #wpr-action-refresh_account.wpr-isShown:before {
|
|
opacity: 1;
|
|
}
|
|
@keyframes loading {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.wpr-Page#dashboard .wpr-documentation {
|
|
margin-top: 98px;
|
|
padding: 43px 16px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-Page#dashboard .wpr-documentation {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
.wpr-Page#dashboard .wpr-documentation .wpr-button {
|
|
margin-top: 8px;
|
|
}
|
|
.wpr-Page#dashboard .wpr-documentation i {
|
|
font-size: 3.375rem;
|
|
line-height: 1;
|
|
}
|
|
.wpr-Page#dashboard .wpr-radio {
|
|
padding-left: 72px;
|
|
}
|
|
.wpr-Page#dashboard .wpr-field--radio {
|
|
padding: 16px 8px;
|
|
}
|
|
.wpr-Page#dashboard .wpr-field--radio:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.wpr-Page#dashboard .wpr-field--radio:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
.wpr-Page#dashboard .wpr-field--radio .wpr-field-description {
|
|
font-style: normal;
|
|
color: #666666;
|
|
margin-left: 72px;
|
|
}
|
|
.wpr-Page#dashboard .wpr-field-account {
|
|
padding-bottom: 0;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount {
|
|
font-weight: bold;
|
|
margin-left: 8px;
|
|
color: #444444;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount:before {
|
|
content: "";
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 13px;
|
|
background: #E0E4E9;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
margin-right: 6px;
|
|
text-align: center;
|
|
top: 2px;
|
|
font-size: 0.5rem;
|
|
line-height: 1.625;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount.wpr-isValid {
|
|
color: #00A66B;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount.wpr-isValid:before {
|
|
content: "\e920";
|
|
font-family: "wpr-icomoon";
|
|
speak: none;
|
|
background: #3ECE9D;
|
|
top: -1px;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount.wpr-isInvalid {
|
|
color: #D60E5B;
|
|
}
|
|
.wpr-Page#dashboard .wpr-infoAccount.wpr-isInvalid:before {
|
|
content: "!";
|
|
font-weight: bold;
|
|
font-size: 0.625rem;
|
|
line-height: 1.3;
|
|
speak: none;
|
|
background: #D33F49;
|
|
top: -1px;
|
|
}
|
|
.wpr-Page#dashboard #wpr-account-data:before {
|
|
content: none;
|
|
}
|
|
.wpr-Page#tools #wpr-action-rocket_enable_mobile_cpcss:before {
|
|
transition: all 200ms ease-out;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.wpr-Page#tools #wpr-action-rocket_enable_mobile_cpcss.wpr-isLoading:before {
|
|
animation: loading 1.2s infinite;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Popin analytics
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-Popin {
|
|
display: none;
|
|
position: fixed;
|
|
width: 772px;
|
|
height: auto;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: #fff;
|
|
border-radius: 3px;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 100000;
|
|
}
|
|
.wpr-Popin-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 99999;
|
|
}
|
|
.wpr-Popin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
background: #2D1656;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
.wpr-Popin-close {
|
|
color: #665090;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
transition: color 200ms ease-out;
|
|
-webkit-transition: color 200ms ease-out;
|
|
}
|
|
.wpr-Popin-close:hover, .wpr-Popin-close:focus {
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
.wpr-Popin-content {
|
|
padding: 8px 32px;
|
|
color: #666666;
|
|
}
|
|
.wpr-Popin-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.wpr-Popin-flex div {
|
|
margin-left: 32px;
|
|
}
|
|
.wpr-Popin p {
|
|
margin: 16px 0;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table {
|
|
padding: 12px 24px;
|
|
background: #F2F3F6 !important;
|
|
border: none;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table td {
|
|
width: 50%;
|
|
color: #121116;
|
|
padding: 8px 0;
|
|
padding-left: 4px;
|
|
border-bottom: 1px solid #c2cad4;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table td:not(.column-primary) {
|
|
font-family: "Monaco";
|
|
font-size: 0.75rem;
|
|
line-height: 1.6666666667;
|
|
color: #666666;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table tr {
|
|
background: #F2F3F6;
|
|
border-bottom: 1px solid #E0E4E9;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table strong {
|
|
font-weight: 500;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table em {
|
|
font-style: normal;
|
|
}
|
|
.wpr-Popin .wp-rocket-data-table code {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
RocketCDN Banners & CTA
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-rocketcdn-cta-small {
|
|
border-radius: 5px;
|
|
margin: 24px 0;
|
|
padding: 16px;
|
|
}
|
|
.wpr-rocketcdn-cta-small.wpr-isHidden {
|
|
display: none;
|
|
}
|
|
.wpr-rocketcdn-cta-small .notice-title {
|
|
font-weight: 700;
|
|
}
|
|
.wpr-rocketcdn-cta-small .wpr-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-rocketcdn-cta-small .wpr-flex {
|
|
text-align: start;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.wpr-rocketcdn-cta {
|
|
margin: 10px 0;
|
|
position: relative;
|
|
}
|
|
.wpr-rocketcdn-cta.wpr-isHidden {
|
|
display: none;
|
|
}
|
|
.wpr-rocketcdn-cta-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: transparent;
|
|
border: 0;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
.wpr-rocketcdn-cta-close--no-promo {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: transparent;
|
|
border: 0;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.wpr-rocketcdn-cta-close--no-promo:before {
|
|
content: "✕";
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3333333333;
|
|
}
|
|
.wpr-rocketcdn-cta-close:before {
|
|
content: "✕";
|
|
color: #121116;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3333333333;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-promo {
|
|
background: #FFD147;
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
padding: 16px 48px 16px 16px;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-promo-title {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3333333333;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-promo-date {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
.wpr-rocketcdn-cta-subtitle {
|
|
color: #444444;
|
|
margin-top: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.7142857143;
|
|
}
|
|
.wpr-rocketcdn-cta-content {
|
|
background: #F9FAFB;
|
|
border-top: 1px solid #E8EBEE;
|
|
border-left: 1px solid #E8EBEE;
|
|
border-right: 1px solid #E8EBEE;
|
|
padding: 16px;
|
|
}
|
|
.wpr-rocketcdn-cta-content--no-promo {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
background: #F9FAFB;
|
|
border-top: 1px solid #E8EBEE;
|
|
border-left: 1px solid #E8EBEE;
|
|
border-right: 1px solid #E8EBEE;
|
|
padding: 16px;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-rocketcdn-cta .wpr-flex {
|
|
text-align: start;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-features {
|
|
margin: 0;
|
|
padding-right: 16px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-features {
|
|
border-right: none;
|
|
}
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing {
|
|
background-color: #fff;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
padding-bottom: 32px;
|
|
width: 33.3333333333%;
|
|
max-width: 219px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing {
|
|
width: auto;
|
|
}
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing-regular {
|
|
color: #72777C;
|
|
margin-bottom: 8px;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing .wpr-rocketcdn-cta-billing-detail {
|
|
margin-bottom: 16px;
|
|
font-size: 1rem;
|
|
line-height: 1.375;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing .wpr-rocketcdn-cta-currency-major {
|
|
font-weight: 700;
|
|
font-size: 3rem;
|
|
line-height: 1.1666666667;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-pricing .wpr-rocketcdn-cta-currency-minor {
|
|
font-weight: 700;
|
|
vertical-align: top;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3333333333;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-feature {
|
|
margin: 24px 0;
|
|
min-height: 30px;
|
|
padding-left: 62px;
|
|
position: relative;
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-feature:before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 5px;
|
|
transform: translateY(-50%);
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-bandwidth:before {
|
|
content: url(../img/bandwidth.svg);
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-configuration:before {
|
|
content: url(../img/configuration.svg);
|
|
}
|
|
.wpr-rocketcdn-cta .wpr-rocketcdn-automatic:before {
|
|
content: url(../img/automatic.svg);
|
|
}
|
|
.wpr-rocketcdn-cta-footer {
|
|
color: #121116;
|
|
font-weight: 600;
|
|
padding: 16px 8px 8px;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5714285714;
|
|
}
|
|
.wpr-rocketcdn-cta-footer a {
|
|
position: relative;
|
|
padding-left: 22px;
|
|
}
|
|
.wpr-rocketcdn-cta-footer a:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
background: url("../img/icon-i-circle.svg") no-repeat center center;
|
|
top: 3px;
|
|
left: 0;
|
|
}
|
|
.wpr-rocketcdn-cta-promo-footer {
|
|
color: #121116;
|
|
padding: 16px 8px 8px;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5714285714;
|
|
}
|
|
|
|
.wpr-rocketcdn-subscription {
|
|
text-align: end;
|
|
}
|
|
.wpr-rocketcdn-subscription .wpr-rocketcdn-open {
|
|
color: #666666;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Upgrade popin
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-license-upgrade-button {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
.wpr-license-upgrade-button:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wpr-field.wpr-field-account .wpr-flex {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.wpr-infoAccount-License {
|
|
flex: 1 0 60%;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
@media (max-width: 783px) {
|
|
.wpr-field.wpr-field-account .wpr-flex > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.wpr-field.wpr-field-account .wpr-flex > div:last-child {
|
|
text-align: right;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-field.wpr-field-account .wpr-flex > div:last-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.wpr-Popin-Upgrade .wpr-Popin-content {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.wpr-Popin-Upgrade .wpr-Popin-flex {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wpr-Popin-Upgrade .wpr-Popin-flex > div {
|
|
align-items: center;
|
|
border: 1px solid #DADADA;
|
|
border-radius: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 16px 0 0;
|
|
padding: 24px;
|
|
text-align: center;
|
|
width: 50%;
|
|
}
|
|
.wpr-Popin-Upgrade .wpr-Popin-flex > div:last-child {
|
|
margin-right: 0;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-Popin-Upgrade .wpr-Popin-flex > div {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.wpr-Upgrade-Plus .wpr-upgrade-title::before {
|
|
content: url(../img/plus.svg);
|
|
display: block;
|
|
width: 117px;
|
|
height: 31px;
|
|
top: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.wpr-Upgrade-Infinite .wpr-upgrade-title::before {
|
|
content: url(../img/infinite.svg);
|
|
display: block;
|
|
width: 48px;
|
|
height: 31px;
|
|
top: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
div.wpr-upgrade-saving {
|
|
background: #FFD147;
|
|
border-radius: 44px;
|
|
color: #121116;
|
|
font-weight: bold;
|
|
margin: 0 0 24px 0;
|
|
padding: 8px 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.wpr-upgrade-title {
|
|
color: #F56F46;
|
|
font-size: 1.875rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 16px;
|
|
padding-top: 55px;
|
|
position: relative;
|
|
}
|
|
|
|
div.wpr-upgrade-prices {
|
|
color: #121116;
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.wpr-upgrade-price-symbol {
|
|
font-size: 1.875rem;
|
|
line-height: 1;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.wpr-upgrade-price-regular {
|
|
color: #72777C;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.wpr-upgrade-websites {
|
|
color: #121116;
|
|
font-size: 0.875rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
margin: 0 0 24px 0;
|
|
}
|
|
|
|
.wpr-upgrade-link {
|
|
background: #fff;
|
|
border: 1px solid #F56F46;
|
|
border-radius: 800px;
|
|
color: #F56F46;
|
|
display: block;
|
|
font-size: 1rem;
|
|
line-height: 1.125;
|
|
font-weight: bold;
|
|
padding: 16px 24px;
|
|
text-decoration: none;
|
|
}
|
|
.wpr-upgrade-link:hover {
|
|
background: #F56F46;
|
|
color: #fff;
|
|
}
|
|
.wpr-upgrade-link::after {
|
|
content: "→";
|
|
font-weight: normal;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Promotions banner
|
|
|
|
\*-----------------------------------------------*/
|
|
.rocket-promo-banner {
|
|
background: #FFD147;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 16px;
|
|
padding: 24px;
|
|
position: relative;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.rocket-promo-banner {
|
|
flex-flow: column;
|
|
}
|
|
}
|
|
.rocket-promo-banner > div {
|
|
display: flex;
|
|
flex-flow: column;
|
|
width: 50%;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.rocket-promo-banner > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.rocket-promo-title {
|
|
font-weight: bold;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.rocket-promo-discount {
|
|
background: #fff;
|
|
border-radius: 44px;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
padding: 8px 16px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.rocket-promo-message,
|
|
.rocket-promo-deal {
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rocket-promo-deal {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.rocket-promo-cta-block {
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.rocket-promo-countdown {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
width: 66%;
|
|
}
|
|
.rocket-promo-countdown > .rocket-countdown-item {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
flex: 1;
|
|
margin-right: 8px;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
.rocket-promo-countdown > .rocket-countdown-item > .rocket-countdown-value {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rocket-promo-cta {
|
|
background: #172153;
|
|
border-radius: 44px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
padding: 16px 32px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Renewals banner
|
|
|
|
\*-----------------------------------------------*/
|
|
.rocket-renewal-banner {
|
|
background: #FFD147;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
margin-top: 16px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.rocket-renewal-expired-banner {
|
|
background: #FFD147;
|
|
margin-top: 16px;
|
|
padding: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.rocket-renewal-expired-banner-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.rocket-renewal-expired-banner-container {
|
|
flex-flow: column;
|
|
}
|
|
}
|
|
.rocket-renewal-expired-banner-container > div {
|
|
display: flex;
|
|
flex-flow: column;
|
|
width: 50%;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.rocket-renewal-expired-banner-container > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.rocket-renew-message {
|
|
margin: 0 16px;
|
|
}
|
|
.rocket-renew-message > p {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.rocket-expired-message > p {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
padding-left: 80px;
|
|
}
|
|
|
|
.rocket-expired-title {
|
|
font-size: 1.375rem;
|
|
line-height: 1.5;
|
|
font-weight: bold;
|
|
}
|
|
.rocket-expired-title::before {
|
|
content: url(../img/warning.svg);
|
|
display: inline-block;
|
|
height: 48px;
|
|
width: 63px;
|
|
margin-right: 17px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.rocket-expired-cta-container {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.rocket-renew-cta {
|
|
display: block;
|
|
background: #172153;
|
|
border-radius: 44px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
line-height: 1.125;
|
|
font-weight: bold;
|
|
padding: 16px 24px;
|
|
text-decoration: none;
|
|
}
|
|
.rocket-renew-cta:hover, .rocket-renew-cta:active, .rocket-renew-cta:focus {
|
|
color: #fff;
|
|
}
|
|
.rocket-renew-cta::after {
|
|
content: "→";
|
|
font-weight: normal;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Navigation menu item
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-menuItem {
|
|
position: relative;
|
|
display: block;
|
|
padding: 16px 44px 18px 20px;
|
|
text-decoration: none;
|
|
color: #121116;
|
|
border-top: 1px solid #E0E4E9;
|
|
border-left: 2px solid transparent;
|
|
overflow: hidden;
|
|
transition: all 100ms ease-out;
|
|
-webkit-transition: all 100ms ease-out;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-menuItem {
|
|
width: 57px;
|
|
height: 50px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.wpr-menuItem:before {
|
|
position: absolute;
|
|
top: calc(50% - 12px);
|
|
right: 18px;
|
|
text-align: center;
|
|
font-size: 1.4375rem;
|
|
line-height: 1;
|
|
color: #121116;
|
|
opacity: 0.4;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
.wpr-menuItem:hover, .wpr-menuItem.isActive {
|
|
color: #121116;
|
|
background: #fff;
|
|
border-left: 2px solid #F56640;
|
|
}
|
|
.wpr-menuItem:hover .wpr-menuItem-title, .wpr-menuItem.isActive .wpr-menuItem-title {
|
|
color: #F56640;
|
|
}
|
|
.wpr-menuItem:hover:before, .wpr-menuItem.isActive:before {
|
|
color: #F56640;
|
|
opacity: 1;
|
|
}
|
|
.wpr-menuItem:focus {
|
|
color: #121116;
|
|
}
|
|
.wpr-menuItem:focus:before {
|
|
color: #121116;
|
|
}
|
|
.wpr-menuItem-title {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.4615384615;
|
|
font-weight: bold;
|
|
letter-spacing: -0.08px;
|
|
text-transform: uppercase;
|
|
color: #121116;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-menuItem-title {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.wpr-menuItem-description {
|
|
margin-top: 2px;
|
|
color: #72777C;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.2307692308;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-menuItem-description {
|
|
display: none;
|
|
}
|
|
}
|
|
.wpr-menuItem.wpr-subMenuItem {
|
|
display: none;
|
|
padding: 10px 20px 8px 25px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-menuItem.wpr-subMenuItem {
|
|
padding: 8px 20px 8px 23px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
.wpr-menuItem.wpr-subMenuItem .wpr-menuItem-title {
|
|
display: inline-block;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.8461538462;
|
|
text-transform: inherit;
|
|
font-weight: 600;
|
|
}
|
|
.wpr-menuItem.wpr-subMenuItem:before {
|
|
position: relative;
|
|
display: inline-block;
|
|
top: 2px;
|
|
right: 2px;
|
|
margin-right: 8px;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
#wpr-nav-cache:before {
|
|
right: 20px;
|
|
}
|
|
#wpr-nav-tools:before {
|
|
right: 20px;
|
|
}
|
|
/*-----------------------------------------------*\
|
|
|
|
Section header of the page
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-sectionHeader {
|
|
position: relative;
|
|
border-bottom: 1px solid #E0E4E9;
|
|
padding-bottom: 24px;
|
|
}
|
|
.wpr-sectionHeader:before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 48px;
|
|
height: 2px;
|
|
bottom: -1px;
|
|
left: 0;
|
|
background: #F56640;
|
|
}
|
|
.wpr-sectionHeader .wpr-title1 {
|
|
line-height: 48px;
|
|
}
|
|
.wpr-sectionHeader .wpr-title1:before {
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 24px;
|
|
background: #FDE0D9;
|
|
color: #F56640;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
}
|
|
.wpr-sectionHeader-title {
|
|
margin-top: 8px;
|
|
padding-left: 72px;
|
|
}
|
|
.wpr-sectionHeader-description {
|
|
color: #666666;
|
|
margin-top: 8px;
|
|
padding-left: 72px;
|
|
}
|
|
.wpr-sectionHeader-logo {
|
|
vertical-align: top;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Header of option group
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-optionHeader {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 48px;
|
|
padding-bottom: 9px;
|
|
border-bottom: 1px solid #E0E4E9;
|
|
}
|
|
.wpr-optionHeader .wpr-title2 {
|
|
line-height: 24px;
|
|
color: #F56640;
|
|
padding-right: 40px;
|
|
}
|
|
.wpr-optionHeader .wpr-infoAction {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.wpr-optionHeader.wpr-isHidden {
|
|
display: none;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Group of fields (fieldset)
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-fieldsContainer {
|
|
margin-top: 8px;
|
|
}
|
|
.wpr-fieldsContainer-description {
|
|
color: #666666;
|
|
}
|
|
.wpr-fieldsContainer-description a:hover,
|
|
.wpr-fieldsContainer-description a:focus {
|
|
color: #1EADBF;
|
|
}
|
|
.wpr-fieldsContainer-fieldset {
|
|
margin-top: 16px;
|
|
background: #F9FAFB;
|
|
padding: 16px;
|
|
border: 1px solid #E8EBEE;
|
|
border-radius: 2px;
|
|
}
|
|
.wpr-fieldsContainer-fieldset--split {
|
|
display: flex;
|
|
}
|
|
.wpr-fieldsContainer-fieldset--split .wpr-field + .wpr-field {
|
|
border: none;
|
|
}
|
|
.wpr-fieldsContainer-fieldset--split .wpr-field {
|
|
flex: 0 0 50%;
|
|
padding: 0;
|
|
}
|
|
.wpr-fieldsContainer-fieldset--split .wpr-field:first-child {
|
|
padding-right: 15px;
|
|
}
|
|
.wpr-fieldsContainer-fieldset--split .wpr-field:last-child {
|
|
padding-left: 15px;
|
|
}
|
|
.wpr-fieldsContainer-helper {
|
|
margin-top: 16px;
|
|
color: #D60E5B;
|
|
font-weight: 500;
|
|
}
|
|
.wpr-fieldsContainer-helper:before {
|
|
position: relative;
|
|
top: 3px;
|
|
font-size: 1.125rem;
|
|
line-height: 1;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.wpr-fieldsContainer.wpr-isHidden {
|
|
display: none;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Link action inside .optionHeader (ex: Need help ?)
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-infoAction {
|
|
position: relative;
|
|
height: 24px;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.8461538462;
|
|
vertical-align: middle;
|
|
letter-spacing: -0.03em;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: all 200ms ease-out;
|
|
-webkit-transition: all 200ms ease-out;
|
|
}
|
|
.wpr-infoAction:before {
|
|
position: absolute;
|
|
margin-left: -26px;
|
|
font-size: 1.125rem;
|
|
line-height: 1.3333333333;
|
|
transition: color 200ms ease-out;
|
|
-webkit-transition: color 200ms ease-out;
|
|
}
|
|
.wpr-infoAction--help {
|
|
text-transform: uppercase;
|
|
color: #02707F;
|
|
font-weight: bold;
|
|
font-size: 0.75rem;
|
|
line-height: 2;
|
|
letter-spacing: 0;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-infoAction--help {
|
|
display: none;
|
|
}
|
|
}
|
|
.wpr-infoAction--help:before {
|
|
color: #1EADBF;
|
|
}
|
|
.wpr-infoAction:hover, .wpr-infoAction:focus {
|
|
color: #F56640;
|
|
outline: none;
|
|
}
|
|
.wpr-infoAction:hover:before, .wpr-infoAction:focus:before {
|
|
color: #FFA58B;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Button call to action
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-button {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 8px 24px;
|
|
text-align: center;
|
|
background: #F56640;
|
|
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
letter-spacing: -0.08px;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
color: #fff !important;
|
|
white-space: nowrap;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: all 200ms ease-out;
|
|
-webkit-transition: all 200ms ease-out;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5384615385;
|
|
}
|
|
.wpr-button:hover, .wpr-button:focus {
|
|
color: #fff !important;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.wpr-button--small {
|
|
padding: 5px 0;
|
|
letter-spacing: -0.08px;
|
|
font-size: 0.6875rem;
|
|
line-height: 1.8181818182;
|
|
}
|
|
.wpr-button--icon {
|
|
min-width: 160px;
|
|
padding-left: 8px;
|
|
padding-right: 40px;
|
|
text-align: left;
|
|
}
|
|
.wpr-button--icon:before {
|
|
position: absolute;
|
|
right: 8px;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.3333333333;
|
|
}
|
|
.wpr-button--fixed {
|
|
position: fixed;
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
right: 24px;
|
|
bottom: 32px;
|
|
border-radius: 16px;
|
|
}
|
|
.wpr-button--fixed:before {
|
|
font-size: 1.125rem;
|
|
line-height: 1;
|
|
margin-right: 8px;
|
|
}
|
|
.wpr-button--purple {
|
|
background: #2D1656;
|
|
}
|
|
.wpr-button--blue {
|
|
min-width: inherit;
|
|
background: #1EADBF;
|
|
}
|
|
.wpr-button--lightBlue {
|
|
min-width: inherit;
|
|
background: #40BACB;
|
|
}
|
|
.wpr-button--red {
|
|
background: #D33F49;
|
|
}
|
|
.wpr-button--gray {
|
|
background: #E0E4E9;
|
|
color: #121116 !important;
|
|
}
|
|
.wpr-button--gray:hover, .wpr-button--gray:active, .wpr-button--gray:focus {
|
|
color: #121116 !important;
|
|
}
|
|
.wpr-button--gray.radio-active {
|
|
background: #2D1656 !important;
|
|
color: #fff !important;
|
|
}
|
|
.wpr-button--gray.radio-active:hover, .wpr-button--gray.radio-active:active, .wpr-button--gray.radio-active:focus {
|
|
color: #fff !important;
|
|
}
|
|
.wpr-button--blueDark {
|
|
background: #02707F;
|
|
}
|
|
.wpr-button:focus {
|
|
outline: none;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Field container
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-field {
|
|
padding: 16px 0;
|
|
transition: opacity 150ms ease-out;
|
|
-webkit-transition: opacity 150ms ease-out;
|
|
}
|
|
.wpr-field + .wpr-field, .wpr-field + .wpr-warningContainer {
|
|
border-top: 1px solid #E0E4E9;
|
|
}
|
|
.wpr-field:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.wpr-field:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
.wpr-field-description {
|
|
margin-top: 4px;
|
|
color: #666666;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5384615385;
|
|
}
|
|
.wpr-field-description .wpr-js-popin {
|
|
color: #444444;
|
|
text-decoration: underline;
|
|
}
|
|
.wpr-field-description .wpr-js-popin:hover, .wpr-field-description .wpr-js-popin:focus {
|
|
color: #1EADBF;
|
|
}
|
|
.wpr-field-description a:hover,
|
|
.wpr-field-description a:focus {
|
|
color: #1EADBF;
|
|
}
|
|
.wpr-field-description-helper {
|
|
color: #00A66B;
|
|
}
|
|
.wpr-field-description-label {
|
|
font-size: 0.875rem;
|
|
line-height: 1.4285714286;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
.wpr-field-list {
|
|
margin: 0;
|
|
color: #666666;
|
|
font-weight: 500;
|
|
}
|
|
.wpr-field-list li + li {
|
|
margin-top: 16px;
|
|
}
|
|
.wpr-field-list li:before {
|
|
position: relative;
|
|
top: 3px;
|
|
margin-right: 8px;
|
|
color: #02707F;
|
|
font-size: 1.125rem;
|
|
line-height: 1.1111111111;
|
|
}
|
|
.wpr-field-list a {
|
|
text-decoration: none;
|
|
}
|
|
.wpr-field-list a:hover, .wpr-field-list a:focus {
|
|
color: #1EADBF;
|
|
}
|
|
.wpr-field-betweenText {
|
|
margin: 0 16px;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-field .wpr-button {
|
|
margin: 8px 0;
|
|
}
|
|
.wpr-field .wpr-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-field .wpr-flex {
|
|
text-align: left;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.wpr-field .wpr-flex--egal > div {
|
|
flex: 0 0 50%;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-field .wpr-flex--egal > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.wpr-field .wpr-flex--egal > div:last-child {
|
|
text-align: right;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-field .wpr-flex--egal > div:last-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
.wpr-field .wpr-flex--egal > div .wpr-field-description {
|
|
font-style: normal;
|
|
color: #666666;
|
|
}
|
|
.wpr-field p {
|
|
margin-bottom: 0;
|
|
}
|
|
.wpr-field label {
|
|
font-weight: 500;
|
|
}
|
|
.wpr-field h4 {
|
|
font-size: 0.875rem;
|
|
line-height: 1.7142857143;
|
|
}
|
|
.wpr-field.wpr-isDisabled {
|
|
opacity: 0.55;
|
|
}
|
|
.wpr-field.wpr-isParent {
|
|
padding-bottom: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.wpr-field.wpr-Delayjs {
|
|
margin-top: 16px;
|
|
}
|
|
.wpr-field.wpr-RemoveUnUsedCss {
|
|
margin-bottom: 0;
|
|
}
|
|
.wpr-field.wpr-NoPaddingBottom {
|
|
padding-bottom: 0;
|
|
}
|
|
.wpr-field.wpr-isLastElem {
|
|
margin-top: 16px;
|
|
}
|
|
.wpr-field.wpr-isHidden {
|
|
display: none;
|
|
}
|
|
.wpr-field .wpr-isHidden {
|
|
display: none;
|
|
}
|
|
.wpr-field--children {
|
|
display: none;
|
|
padding-left: 32px;
|
|
}
|
|
.wpr-field--children.wpr-isOpen {
|
|
display: block;
|
|
}
|
|
.wpr-field--children.wpr-field--textarea {
|
|
padding-right: 80px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-field--children.wpr-field--textarea {
|
|
padding-right: 32px;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-field--children.wpr-field--textarea {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.wpr-field--children.no-space {
|
|
padding-left: 0;
|
|
}
|
|
.wpr-field--checkbox .wpr-field-description {
|
|
margin-left: 32px;
|
|
}
|
|
.wpr-field--radio {
|
|
padding: 24px 16px;
|
|
}
|
|
.wpr-field--radio:first-child {
|
|
padding-top: 8px;
|
|
}
|
|
.wpr-field--radio:last-child {
|
|
padding-bottom: 8px;
|
|
}
|
|
.wpr-field--radio .wpr-field-description {
|
|
margin-left: 88px;
|
|
}
|
|
.wpr-field--radio .wpr-field-description button {
|
|
color: #666666;
|
|
}
|
|
.wpr-field--split {
|
|
display: inline-block;
|
|
width: 50%;
|
|
padding-right: 16px;
|
|
padding-bottom: 0;
|
|
}
|
|
.wpr-field--split + .wpr-field--split {
|
|
padding-left: 16px;
|
|
padding-right: 0;
|
|
}
|
|
.wpr-field--split + .wpr-field--split:nth-child(2) {
|
|
padding-top: 0;
|
|
border-top: none;
|
|
}
|
|
.wpr-field--cache .wpr-field--number,
|
|
.wpr-field--cache .wpr-field--select {
|
|
display: inline-block;
|
|
padding-top: 0;
|
|
width: auto;
|
|
padding-bottom: 0;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-field--cache .wpr-field--select {
|
|
position: relative;
|
|
padding-left: 8px;
|
|
top: -2px;
|
|
border-top: none;
|
|
}
|
|
.wpr-field--cache .wpr-field--number .wpr-text input[type=number] {
|
|
background: #F2F3F6;
|
|
height: 35px;
|
|
border: 1px solid #E0E4E9;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
}
|
|
.wpr-field--cache .wpr-field-description {
|
|
margin: 8px 0;
|
|
color: #00A66B;
|
|
}
|
|
.wpr-field--cache .wpr-field-description-label {
|
|
color: #121116;
|
|
}
|
|
.wpr-field--textarea .wpr-field-description pre {
|
|
background: rgba(0, 0, 0, 0.07);
|
|
padding: 1em;
|
|
margin: 1em 0 0;
|
|
white-space: normal;
|
|
}
|
|
.wpr-field--textarea .wpr-field-description pre code {
|
|
background: transparent;
|
|
-webkit-touch-callout: all;
|
|
-webkit-user-select: all;
|
|
-khtml-user-select: all;
|
|
-moz-user-select: all;
|
|
-ms-user-select: all;
|
|
user-select: all;
|
|
color: #121116;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Field warning
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-fieldWarning {
|
|
display: none;
|
|
position: relative;
|
|
padding: 16px 16px 24px 56px;
|
|
background: #19073B;
|
|
margin: 8px 0 0;
|
|
color: #fff;
|
|
}
|
|
.wpr-fieldWarning.wpr-isOpen {
|
|
display: block;
|
|
}
|
|
.wpr-fieldWarning:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: -8px;
|
|
left: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0 12px 8px 12px;
|
|
border-color: transparent transparent #19073B transparent;
|
|
}
|
|
.wpr-fieldWarning:before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: calc(100% + 32px);
|
|
height: 100%;
|
|
top: 0;
|
|
left: -16px;
|
|
background: #19073B;
|
|
}
|
|
.wpr-fieldWarning-title {
|
|
position: relative;
|
|
color: #F56640;
|
|
font-size: 0.875rem;
|
|
line-height: 1.4285714286;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-fieldWarning-title:before {
|
|
position: absolute;
|
|
left: -36px;
|
|
font-size: 1.5rem;
|
|
line-height: 0.8333333333;
|
|
}
|
|
.wpr-fieldWarning-description {
|
|
position: relative;
|
|
margin-top: 8px;
|
|
}
|
|
.wpr-fieldWarning .wpr-button {
|
|
margin-top: 16px;
|
|
}
|
|
.wpr-fieldWarning.wpr-radio-warning {
|
|
margin-left: -32px;
|
|
}
|
|
.wpr-fieldWarning.wpr-radio-warning:after {
|
|
left: 40px;
|
|
}
|
|
|
|
.wpr-warningContainer + .wpr-warningContainer,
|
|
.wpr-warningContainer + .wpr-field,
|
|
.wpr-field + .wpr-warningContainer {
|
|
border-top: 1px solid #E0E4E9;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.wpr-warningContainer + .wpr-warningContainer,
|
|
.wpr-field + .wpr-warningContainer {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
@media only screen and (max-width: 400px) {
|
|
.wpr-fieldWarning.wpr-radio-warning {
|
|
margin-left: -32px;
|
|
}
|
|
.wpr-fieldWarning.wpr-radio-warning .wpr-button {
|
|
white-space: normal;
|
|
padding-right: 32px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 350px) {
|
|
.wpr-radio-buttons {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.wpr-fieldWarning.wpr-radio-warning {
|
|
margin-left: -24px;
|
|
padding-left: 30px;
|
|
padding-right: 0;
|
|
}
|
|
.wpr-fieldWarning.wpr-radio-warning .wpr-button {
|
|
padding-right: 24px;
|
|
}
|
|
}
|
|
/*-----------------------------------------------*\
|
|
|
|
Documentation
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-documentation {
|
|
padding: 24px 16px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #40BACB;
|
|
}
|
|
.wpr-documentation p {
|
|
margin: 8px 0 16px;
|
|
font-weight: 500;
|
|
}
|
|
.wpr-documentation i {
|
|
display: block;
|
|
font-size: 2.25rem;
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
}
|
|
.wpr-documentation .wpr-button {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Addon style
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-addon {
|
|
padding: 24px 0;
|
|
}
|
|
.wpr-addon .wpr-flex {
|
|
align-items: flex-start;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-addon .wpr-flex {
|
|
align-items: center;
|
|
}
|
|
}
|
|
.wpr-addon .wpr-flex > div {
|
|
text-align: left;
|
|
}
|
|
.wpr-addon .wpr-addon-title {
|
|
margin-bottom: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.wpr-addon .wpr-field-description {
|
|
font-style: normal;
|
|
}
|
|
.wpr-addon .wpr-addon-logo {
|
|
text-align: center;
|
|
flex: 0 0 160px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-addon .wpr-addon-logo {
|
|
max-width: 100px;
|
|
}
|
|
.wpr-addon .wpr-addon-logo img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
@media (max-width: 1083px) {
|
|
.wpr-addon .wpr-addon-logo {
|
|
max-width: 160px;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-addon .wpr-addon-logo {
|
|
flex: 0 0 auto;
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
.wpr-addon .wpr-addon-text {
|
|
margin-left: 32px;
|
|
flex: 1 1 auto;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-addon .wpr-addon-text {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 1083px) {
|
|
.wpr-addon .wpr-addon-text {
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-addon .wpr-addon-text {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.wpr-addon .wpr-addon-text a {
|
|
display: inline-block;
|
|
margin-top: 24px;
|
|
}
|
|
.wpr-addon .wpr-addon-text .button {
|
|
margin-top: 24px;
|
|
}
|
|
.wpr-addon .wpr-addon-text .wpr-add-on-helper {
|
|
font-weight: normal;
|
|
color: #1eadbf;
|
|
}
|
|
.wpr-addon .wpr-addon-text .wpr-add-on-helper a {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.wpr-webp-addon .wpr-addon .wpr-addon-text a {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Notice for first time on dashboard
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-notice {
|
|
position: relative;
|
|
color: #444444;
|
|
background: #EBFAF5 url("../img/bg-activated.svg") no-repeat 90% bottom;
|
|
background-size: 350px;
|
|
margin-top: 24px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.wpr-notice-container {
|
|
padding: 24px 25% 24px 40px;
|
|
}
|
|
.wpr-notice-supTitle {
|
|
font-size: 1rem;
|
|
line-height: 1.375;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-notice-title {
|
|
font-size: 1.5rem;
|
|
line-height: 1.3333333333;
|
|
color: #3ECE9D;
|
|
margin-top: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-notice-description {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5714285714;
|
|
margin: 16px 0 24px;
|
|
}
|
|
.wpr-notice-continue {
|
|
color: #666666;
|
|
}
|
|
.wpr-notice-close {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
color: #666666;
|
|
text-decoration: none;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
transition: color 200ms ease-out;
|
|
-webkit-transition: color 200ms ease-out;
|
|
}
|
|
.wpr-notice-close:hover {
|
|
color: #444444;
|
|
}
|
|
.wpr-notice-close:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Tools style
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-tools {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 32px 0;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-tools {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
@media (max-width: 1083px) {
|
|
.wpr-tools {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-tools {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.wpr-tools:nth-child(2) {
|
|
margin-top: 16px;
|
|
}
|
|
.wpr-tools + .wpr-tools {
|
|
border-top: 1px solid #E0E4E9;
|
|
}
|
|
.wpr-tools-label {
|
|
display: block;
|
|
}
|
|
.wpr-tools-label:before {
|
|
position: absolute;
|
|
left: 0;
|
|
margin-top: 5px;
|
|
font-size: 2.25rem;
|
|
line-height: 1;
|
|
color: #F56640;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-tools-label:before {
|
|
display: block;
|
|
position: initial;
|
|
}
|
|
}
|
|
.wpr-tools-col {
|
|
flex: 1 1 auto;
|
|
}
|
|
.wpr-tools-col:first-child {
|
|
padding-left: 72px;
|
|
padding-right: 24px;
|
|
min-width: 340px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-tools-col:first-child {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
.wpr-tools-col:last-child {
|
|
text-align: right;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-tools-col:last-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
.wpr-tools .wpr-button {
|
|
margin-top: 24px;
|
|
white-space: normal;
|
|
}
|
|
.wpr-tools .wpr-field-description {
|
|
font-style: normal;
|
|
color: #666666;
|
|
}
|
|
.wpr-tools #wpr-update-exclusion-msg {
|
|
min-height: 20px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Imagify Tab style
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-imagify {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-top: 30px;
|
|
}
|
|
.wpr-imagify-description {
|
|
width: 33.3333333333%;
|
|
padding-right: 60px;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-imagify-description {
|
|
width: auto;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.wpr-imagify-screenshot {
|
|
width: 66.6666666667%;
|
|
}
|
|
@media (max-width: 1239px) {
|
|
.wpr-imagify-screenshot {
|
|
margin-top: 60px;
|
|
width: auto;
|
|
}
|
|
}
|
|
.wpr-imagify-screenshot img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.wpr-imagify-more, .wpr-imagify-name {
|
|
color: #00a8dc;
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
}
|
|
.wpr-imagify-more::before {
|
|
content: "✓";
|
|
color: #000;
|
|
font-size: 2rem;
|
|
margin-right: 5px;
|
|
}
|
|
.wpr-imagify p {
|
|
font-size: 1rem;
|
|
}
|
|
.wpr-imagify p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.wpr-imagify ul {
|
|
margin-top: 0;
|
|
margin-left: 40px;
|
|
list-style-type: ">";
|
|
}
|
|
.wpr-imagify li {
|
|
padding-left: 7px;
|
|
}
|
|
.wpr-imagify a {
|
|
text-decoration: none;
|
|
}
|
|
.wpr-imagify a:hover {
|
|
color: #00a8dc;
|
|
}
|
|
.wpr-imagify .button-primary {
|
|
background: #2abb9b;
|
|
border: 1px solid #bebebe;
|
|
box-shadow: none;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
height: auto;
|
|
line-height: 1;
|
|
margin-top: 60px;
|
|
padding: 20px 45px;
|
|
text-shadow: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wpr-tutorials-section {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
div.wpr-tutorial-item {
|
|
width: 32%;
|
|
margin-bottom: 10px;
|
|
margin-right: 1%;
|
|
}
|
|
|
|
.wpr-tutorial-link {
|
|
cursor: pointer;
|
|
transition: color 200ms ease-out;
|
|
}
|
|
.wpr-tutorial-link:hover {
|
|
color: #1EADBF;
|
|
}
|
|
|
|
@media (max-width: 1083px) {
|
|
div.wpr-tutorial-item {
|
|
width: 48%;
|
|
}
|
|
}
|
|
@media (max-width: 783px) {
|
|
div.wpr-tutorial-item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
/*-----------------------------------------------*\
|
|
|
|
RocketCDN modal style
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-rocketcdn-modal {
|
|
display: none;
|
|
}
|
|
.wpr-rocketcdn-modal.is-open {
|
|
display: block;
|
|
}
|
|
.wpr-rocketcdn-modal__overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.wpr-rocketcdn-modal__container {
|
|
max-width: 674px;
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.wpr-rocketcdn-modal iframe {
|
|
max-width: 100%;
|
|
}
|
|
.wpr-rocketcdn-modal .wpr-sub-list {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Custom checkbox
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-checkbox {
|
|
position: relative;
|
|
padding-left: 32px;
|
|
}
|
|
.wpr-checkbox label {
|
|
user-select: none;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:not(:checked),
|
|
.wpr-checkbox [type=checkbox]:checked {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:not(:checked) + label:before,
|
|
.wpr-checkbox [type=checkbox]:checked + label:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4px;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid #444444;
|
|
border-radius: 3px;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:not(:checked) + label:after,
|
|
.wpr-checkbox [type=checkbox]:checked + label:after {
|
|
content: "\e921";
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 2px;
|
|
color: #fff;
|
|
font-family: "wpr-icomoon";
|
|
speak: none;
|
|
font-size: 0.875rem;
|
|
line-height: 1.2857142857;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:not(:checked) + label:after {
|
|
opacity: 0;
|
|
transform: scale(2);
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:checked + label:after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:checked + label:before {
|
|
background: #19073B;
|
|
border-color: #19073B;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:checked:focus + label:before {
|
|
background: #665090;
|
|
border: 2px dotted #665090;
|
|
}
|
|
|
|
.wpr-checkbox [type=checkbox]:focus + label:before {
|
|
border: 2px dotted #444444;
|
|
}
|
|
|
|
.wpr-checkbox-warning {
|
|
color: #D33F49;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.wpr-checkbox-warning::before {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Custom radio (radio on/off)
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-radio {
|
|
position: relative;
|
|
padding-left: 88px;
|
|
}
|
|
.wpr-radio label {
|
|
user-select: none;
|
|
font-weight: bold;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked),
|
|
.wpr-radio [type=checkbox]:checked {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked) + label:before,
|
|
.wpr-radio [type=checkbox]:checked + label:before,
|
|
.wpr-radio [type=checkbox]:not(:checked) + label:after,
|
|
.wpr-radio [type=checkbox]:checked + label:after {
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked) + label:before,
|
|
.wpr-radio [type=checkbox]:checked + label:before {
|
|
left: 0;
|
|
width: 52px;
|
|
height: 22px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
border: 1px solid #444444;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked) + label:after,
|
|
.wpr-radio [type=checkbox]:checked + label:after {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 100%;
|
|
background: #444444;
|
|
top: 3px;
|
|
left: 3px;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
.wpr-radio [type=checkbox]:disabled + label:after,
|
|
.wpr-radio [type=checkbox]:disabled + label:after {
|
|
background: #E0E4E9;
|
|
}
|
|
.wpr-radio [type=checkbox]:disabled + label:before,
|
|
.wpr-radio [type=checkbox]:disabled + label:before {
|
|
border: 1px solid #E0E4E9;
|
|
}
|
|
.wpr-radio [type=checkbox]:checked + label:before {
|
|
border-color: #1EADBF;
|
|
}
|
|
.wpr-radio [type=checkbox]:checked + label:after {
|
|
background: #1EADBF;
|
|
left: 33px;
|
|
}
|
|
.wpr-radio [type=checkbox]:checked + label .wpr-radio-ui,
|
|
.wpr-radio [type=checkbox]:not(:checked) + label .wpr-radio-ui:before,
|
|
.wpr-radio [type=checkbox]:checked + label .wpr-radio-ui:after {
|
|
position: absolute;
|
|
left: 4px;
|
|
width: 52px;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.01em;
|
|
font-weight: bold;
|
|
font-size: 0.6875rem;
|
|
line-height: 2.1818181818;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked) + label .wpr-radio-ui:before {
|
|
content: attr(data-l10n-inactive);
|
|
left: 27px;
|
|
color: #666666;
|
|
}
|
|
.wpr-radio [type=checkbox]:checked + label .wpr-radio-ui:after {
|
|
content: attr(data-l10n-active);
|
|
color: #02707F;
|
|
}
|
|
.wpr-radio--reverse {
|
|
padding-right: 72px;
|
|
padding-left: 0;
|
|
}
|
|
.wpr-radio--reverse [type=checkbox]:not(:checked) + label:before,
|
|
.wpr-radio--reverse [type=checkbox]:checked + label:before {
|
|
right: 0;
|
|
left: inherit;
|
|
}
|
|
.wpr-radio--reverse [type=checkbox]:not(:checked) + label:after,
|
|
.wpr-radio--reverse [type=checkbox]:checked + label:after {
|
|
right: 33px;
|
|
left: inherit;
|
|
}
|
|
.wpr-radio--reverse [type=checkbox]:checked + label:after {
|
|
right: 3px;
|
|
left: inherit;
|
|
}
|
|
.wpr-radio--reverse [type=checkbox]:checked + label .wpr-radio-ui,
|
|
.wpr-radio--reverse [type=checkbox]:not(:checked) + label .wpr-radio-ui:before,
|
|
.wpr-radio--reverse [type=checkbox]:checked + label .wpr-radio-ui:after {
|
|
right: -2px;
|
|
left: inherit;
|
|
}
|
|
.wpr-radio--reverse [type=checkbox]:not(:checked) + label .wpr-radio-ui:before {
|
|
right: -25px;
|
|
left: inherit;
|
|
}
|
|
.wpr-radio [type=checkbox]:not(:checked):focus + label:before {
|
|
border: 1px dashed #444444;
|
|
}
|
|
.wpr-radio [type=checkbox]:checked:focus + label:before {
|
|
border: 1px dashed #1EADBF;
|
|
}
|
|
.wpr-radio--tips [type=checkbox]:checked + label:before {
|
|
border-color: #3ECE9D;
|
|
}
|
|
.wpr-radio--tips [type=checkbox]:checked + label:after {
|
|
background: #3ECE9D;
|
|
}
|
|
.wpr-radio--tips [type=checkbox]:checked + label .wpr-radio-ui:after {
|
|
color: #00A66B;
|
|
}
|
|
.wpr-radio--tips [type=checkbox]:checked:focus + label:before {
|
|
border: 1px dashed #3ECE9D;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Type = select
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-select {
|
|
position: relative;
|
|
}
|
|
.wpr-select select {
|
|
margin: 0;
|
|
padding: 0 8px;
|
|
height: 36px;
|
|
border: 1px solid #E0E4E9;
|
|
background: #F2F3F6;
|
|
color: #121116;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
letter-spacing: 0.011em;
|
|
}
|
|
.wpr-select select:focus {
|
|
outline: none;
|
|
border-color: #444444;
|
|
box-shadow: none;
|
|
}
|
|
.wpr-select select:disabled {
|
|
background-image: none;
|
|
}
|
|
.wpr-select label {
|
|
font-weight: bold;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Type = textearea
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-textarea {
|
|
margin-top: 8px;
|
|
}
|
|
.wpr-textarea textarea {
|
|
padding: 8px;
|
|
width: 100%;
|
|
height: 100px;
|
|
font-family: Monaco;
|
|
color: #121116;
|
|
background: #fff;
|
|
border: 2px solid #c2cad4;
|
|
border-radius: 3px;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.2307692308;
|
|
transition: border 200ms ease-out;
|
|
-webkit-transition: border 200ms ease-out;
|
|
}
|
|
.wpr-textarea textarea:focus {
|
|
outline: none;
|
|
border-color: #444444;
|
|
box-shadow: none;
|
|
}
|
|
.wpr-textarea + .wpr-field-description {
|
|
color: #00A66B;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Type = text
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-text label {
|
|
color: #666666;
|
|
}
|
|
.wpr-text input[type=text],
|
|
.wpr-text input[type=number] {
|
|
margin-top: 8px;
|
|
padding: 0 8px;
|
|
width: 100%;
|
|
height: 32px;
|
|
color: #121116;
|
|
background: #fff;
|
|
border: 2px solid #c2cad4;
|
|
border-radius: 3px;
|
|
font-family: Monaco;
|
|
font-size: 0.75rem;
|
|
line-height: 1.3333333333;
|
|
transition: border 200ms ease-out;
|
|
-webkit-transition: border 200ms ease-out;
|
|
}
|
|
.wpr-text input[type=text]:focus,
|
|
.wpr-text input[type=number]:focus {
|
|
outline: none;
|
|
border-color: #444444;
|
|
box-shadow: none;
|
|
}
|
|
.wpr-text input[type=text].wpr-isError,
|
|
.wpr-text input[type=number].wpr-isError {
|
|
border-color: #D33F49;
|
|
}
|
|
.wpr-text input[type=number] {
|
|
width: 80px;
|
|
}
|
|
.wpr-text--number label {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Type = File
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-upload input[type=file] {
|
|
display: block;
|
|
width: 252px;
|
|
margin: 8px 8px 8px 0;
|
|
padding: 8px;
|
|
border: 1px solid #E0E4E9;
|
|
background: #F2F3F6;
|
|
color: #121116;
|
|
font-size: 0.6875rem;
|
|
line-height: 1.4545454545;
|
|
}
|
|
.wpr-upload input[type=file]:focus {
|
|
outline: none;
|
|
border-color: #444444;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*-----------------------------------------------*\
|
|
|
|
Multiple field
|
|
|
|
\*-----------------------------------------------*/
|
|
.wpr-multiple {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-multiple {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.wpr-multiple .wpr-text {
|
|
flex: 1 1 auto;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-multiple .wpr-text {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.wpr-multiple .wpr-button {
|
|
margin-left: 16px;
|
|
width: auto;
|
|
min-width: inherit;
|
|
padding-right: 30px;
|
|
}
|
|
@media (max-width: 783px) {
|
|
.wpr-multiple .wpr-button {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.wpr-multiple input[type=text] {
|
|
flex-grow: 2;
|
|
}
|
|
.wpr-multiple select {
|
|
height: 30px;
|
|
}
|
|
.wpr-multiple-default {
|
|
margin-right: 20px;
|
|
}
|
|
.wpr-multiple-list {
|
|
display: none;
|
|
padding: 8px 0;
|
|
margin: 16px 0 0;
|
|
background: #F2F3F6;
|
|
border-radius: 2px;
|
|
}
|
|
.wpr-multiple-list li {
|
|
margin-bottom: 0;
|
|
padding: 4px 16px;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.2307692308;
|
|
font-family: Monaco;
|
|
}
|
|
.wpr-multiple-list li span {
|
|
display: inline-block;
|
|
transition: all 150ms ease-out;
|
|
-webkit-transition: all 150ms ease-out;
|
|
}
|
|
.wpr-multiple-close {
|
|
position: relative;
|
|
top: 3px;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
transition: color 200ms ease-out;
|
|
-webkit-transition: color 200ms ease-out;
|
|
}
|
|
.wpr-multiple-close:focus {
|
|
outline: none;
|
|
}
|
|
.wpr-multiple-close:hover, .wpr-multiple-close:focus {
|
|
color: #D33F49;
|
|
}
|
|
.wpr-multiple-close:hover + span, .wpr-multiple-close:focus + span {
|
|
color: #D33F49;
|
|
} |