/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
/*PANEL */
.about-wrap {
margin: 70px 10% 70px 10% !important;
max-width: 1200px;
}
.about-wrap .intro h2 {
margin-top: 0px;
text-align: left;
font-weight: 600;
margin-bottom: 5px;
}
.about-wrap .intro {
width: 65%;
}
.about-wrap .intro p {
font-size: 18px;
line-height: 28px;
margin-top: 5px;
margin-bottom: 35px;
}
p.no-license-found {
border: 1px solid #1890ff;
background: #ebf5fe;
padding: 20px 30px;
border-radius: 45px;
max-width: fit-content;
}
.theme-infos span {
border: 1px solid #dcdcde;
padding: 10px 25px;
border-radius: 30px;
margin-right: 10px;
}
.theme-image {
width: 25%;
padding-top: 20px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
padding-left: 20px !important;
background-color: #ffffff !important;
border-radius: 10px !important;
box-shadow: 20px 37px 102px rgb(0 0 0 / 10%);
border-radius: 11px;
transition: all 250ms ease;
-ms-transition: all 250ms ease;
-webkit-transition: all 250ms ease;
}
.theme-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.toplevel_page_modeltheme-sites #wpcontent {
padding-left: 0;
background: #fff;
background: linear-gradient(197deg, #40DBBB -30.26%,#fff 22.13%)!important;
}
.modeltheme-panel-wrapper .form-table th {
padding: 15px 0px;
width: 30%;
}
.modeltheme-panel-wrapper .form-table td {
padding: 10px 10px;
}
.modeltheme-panel-wrapper li.customizer-links {
list-style: none;
text-align: center;
display: inline-flex;
align-items: center;
width: fit-content;
margin: 8px 6px;
border: 1px solid #e1e1e4;
border-radius: 20px;
padding: 10px 20px;
transition: all 250ms ease-in-out 0s;
-webkit-transition: all 250ms ease-in-out 0s;
}
.modeltheme-panel-wrapper li.customizer-links:hover {
box-shadow: 0 0 25px rgb(0 0 0 / 10%);
border: 1px solid #fff;
}
.modeltheme-panel-wrapper li.customizer-links img {
width: 25px;
margin-right: 10px;
height: 25px;
filter: hue-rotate(73deg);
}
.modeltheme-panel-wrapper li.customizer-links a {
text-decoration: none !important;
font-size: 15px;
font-weight: 600;
color: #222;
}
.modeltheme-panel-wrapper li.customizer-links:hover a {
text-decoration: underline;
}
#wpbody-content .modeltheme-panel-wrapper .metabox-holder {
background: #fff;
padding: 1px 35px 30px;
}
#wpbody-content .metabox-holder p.submit {
margin: 25px 0px 0px;
padding-bottom: 15px;
margin-left: -10px;
}
.nmcps-image-preview img {
height: auto;
max-width: 70px;
}
.nmcps-settings-separator {
background: #ccc;
border: 0;
color: #ccc;
height: 1px;
position: absolute;
left: 0;
width: 99%;
}
.quick-links {
margin-top: 70px;
}
.quick-links h2 {
font-size: 30px;
text-align: left;
font-weight: 600;
}
.group .form-table input.color-picker {
max-width: 100px;
}
.group h2 {
text-align: left;
font-size: 25px;
font-weight: bold;
}
.modeltheme-panel-wrapper .general-tab-wrapper {
margin: 0px;
margin-bottom: 55px;
}
.modeltheme-panel-wrapper .about-title{
margin-right:0;
margin-bottom: 30px;
padding: 0px 20px;
}
.modeltheme-panel-wrapper .general-tab-wrapper a {
border: none !important;
margin-left: 0px;
margin-right: 10px;
background: #fff;
border-bottom: none;
padding: 10px 30px;
border-radius: 5px;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
box-shadow: none;
}
.modeltheme-panel-wrapper .general-tab-wrapper a.nav-tab-active {
background: linear-gradient(to right, #647ECB,#D01498);
color: #fff;
}
.modeltheme-panel-wrapper .form-table p.description {
color: #222;
}
div#settings .links-panel-blocks {
background: #fff;
padding: 0px 30px;
width: 94%;
}
div#settings p.submit {
background: #fff;
padding-left: 30px;
padding-bottom: 35px;
}
.clickable-box {
background: #FFFFFF;
border-radius: 15px;
margin-right: 15px;
text-align: center;
padding: 25px 35px;
width: 33.3%;
border: 1px solid #dcdcde;
}
.clickable-box img {
width: 80px;
margin-bottom: 15px;
}
.clickable-box a {
text-decoration: none !important;
outline: none !important;
box-shadow: none !important;
display: block;
padding: 10px 0px;
}
.clickable-box h3 {
margin: 0;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 25px;
}
.clickable-box p {
width: 100%;
margin-bottom: 5px;
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin-top: 16px;
}
.clickable-box span.dashicons {
font-size: 60px;
display: inherit;
color: #D01498;
}
.modeltheme-panel-wrapper .clickable-box img.about-logo {
width: 55px!important;
margin-right: 0px;
}
.panel-update-wrapper {
position: absolute;
bottom: 0;
padding: 25px 25px;
right: 0;
}
.modeltheme-panel-wrapper .about-title sup{
background:#fff;
color:#666;
font-size:33.333%;
font-weight:700;
padding:5px 10px;
white-space:nowrap
}
.modeltheme-panel-wrapper .about-title+p{
font-size:1.2em
}
.modeltheme-panel-wrapper img.about-logo{
width:140px!important;
margin-right:5px
}
.modeltheme-panel-wrapper .nav-tab-wrapper{
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
border-bottom: 1px solid #e1e1e4;
}
.col h1.about-title {
display: none;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab{
text-align: left;
font-weight: 600;
margin-bottom: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 30px;
text-transform: uppercase;
margin-right: 10px;
text-decoration: none;
color: #222;
box-shadow: none !important;
border: none;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab.nav-tab-active {
color: #1890ff;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab.nav-tab-active {
background: #fff;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab span {
transition: none;
margin-top: 3px;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab.hidden{
display:none;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .nav-tab-active{
position:relative;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab img.tabs-icons {
width: 15px;
margin-right: 10px;
filter: brightness(0);
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab.nav-tab-active img.tabs-icons{
filter: brightness(1);
}
.modeltheme-panel-wrapper .nav-tab-wrapper .nav-tab-active:after{
content: "";
display: block;
position: absolute;
width: 100%;
bottom: -4px;
height: 1px;
left: 0;
background: #1890ff;
}
.modeltheme-panel-wrapper .notice:not(.hidden){
display:block!important;
margin-top:15px;
margin-bottom:0;
width:100%;
box-sizing:border-box;
}
.modeltheme-panel-wrapper .last-feature{
margin-right:0!important;
}
.modeltheme-panel-wrapper .panel{
border-radius: 5px;
border-bottom: none;
display: none;
width: 1200px;
padding-right: 0px;
}
.modeltheme-panel-wrapper .panel:first-child{
display:block;
}
.js .modeltheme-panel-wrapper .panel{
display:none;
}
.modeltheme-panel-wrapper .panel .submit{
clear:both;
}
.modeltheme-panel-wrapper .links-panel-blocks{
display:flex;
}
.panel-update-wrapper a {
color: #fff;
}
.modeltheme-panel-wrapper .screenshot-image{
text-align:right;
}
.modeltheme-panel-wrapper .screenshot-image img{
max-width:100%;
height:auto;
}
.nav-tab-container {
margin: 0 auto;
max-width: 1105px;
padding-bottom: 10px;
width: 90%;
}
.modeltheme-panel-wrapper .screenshot-image span{
background:#0074a2;
color:#fff;
font-size:.618em;
text-transform:uppercase;
padding:.53em 1em;
position:absolute;
top:0;
right:0;
}
.modeltheme-panel-wrapper .plugin-card{
width:100%;
}
.modeltheme-panel-wrapper .plugin-card .plugin-action-buttons{
font-size:13px;
}
@-webkit-keyframes rotation{
0%{
-webkit-transform:rotate(0);
transform:rotate(0);
}
100%{
-webkit-transform:rotate(359deg);
transform:rotate(359deg);
}
}
@keyframes rotation{
0%{
-webkit-transform:rotate(0);
transform:rotate(0);
}
100%{
-webkit-transform:rotate(359deg);
transform:rotate(359deg);
}
}
@media screen and (min-width:783px){
.modeltheme-panel-wrapper #settings .form-table td,
.modeltheme-panel-wrapper #settings .form-table th{
float:left;
display:block;
width:100%;
}
.modeltheme-panel-wrapper #settings .form-table th{
padding-bottom:0;
}
.modeltheme-panel-wrapper #settings .form-table td{
padding-left:0;
padding-right:0;
}
.modeltheme-panel-wrapper p.submit{
margin-top:0;
padding-top:0;
}
}
@media screen and (max-width:767px){
.theme-infos span {
display: none;
}
.theme-header {
display: block;
}
.theme-image {
width: 100%;
}
.modeltheme-panel-wrapper .links-panel-blocks {
display: block !important;
}
.modeltheme-panel-wrapper .clickable-box{
width: 100% !important;
height: auto !important;
}
}
@media screen and (max-width:782px){
.modeltheme-panel-wrapper .nav-tab-wrapper{
border:none;
padding: 0px 0px 15px;
}
.modeltheme-panel-wrapper .about-title{
margin-bottom: 25px !important;
}
.modeltheme-panel-wrapper .general-tab-wrapper {
margin-bottom: 120px;
}
.modeltheme-panel-wrapper .form-table td{
padding: 0px !important;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .panel-tab{
text-align:left;
margin:0 0 1% 0;
padding: 10px 20px;
width:100%;
box-sizing:border-box;
}
.modeltheme-panel-wrapper .nav-tab-wrapper .nav-tab-active:after,
.modeltheme-panel-wrapper .nav-tab-wrapper .nav-tab-active:hover:after{
display:none;
}
.modeltheme-panel-wrapper #plugins>div:first-child,
.modeltheme-panel-wrapper #themes>div:first-child{
margin-top:0!important;
}
.modeltheme-panel-wrapper p.submit{
margin-top:1.25em;
width:100%;
}
.modeltheme-panel-wrapper .panel-update-wrapper {
padding: 20px 20px;
right: 110px;
}
.modeltheme-panel-wrapper .clickable-box {
margin-right: 0px;
margin-bottom: 20px;
height: 160px;
}
.modeltheme-panel-wrapper .group h2 {
padding: 0px;
margin-bottom: 0px;
}
.modeltheme-panel-wrapper .form-table h3 {
margin: 15px 0px 0px;
}
.modeltheme-panel-wrapper .form-table th {
width: 100% !important;
}
.modeltheme-panel-wrapper .screenshot-image{
text-align:left;
}
.modeltheme-panel-wrapper .screenshot-image img{
max-width:100%;
}
.modeltheme-panel-wrapper .button-delete{
font-size:15px;
}
.modeltheme-panel-wrapper .panel-theme-name .description{
max-height:none!important;
overflow:visible!important;
}
.modeltheme-panel-wrapper .panel-theme-name a.read-more{
display:none!important;
}
body .modeltheme-panel-wrapper {
display: block;
}
.modeltheme-panel-wrapper .nav-tab-wrapper {
width: 100%;
height: fit-content;
}
.modeltheme-panel-wrapper .panel {
width: 100% !important;
float: left;
padding: 0px !important;
}
}
.healthcheck-error,
.healthcheck-item,
.healthcheck-ok{
padding:0 0 14px 25px;
position:relative;
}
.healthcheck-error::before,
.healthcheck-item::before,
.healthcheck-ok::before{
position:absolute;
opacity:.7;
font-family:dashicons;
font-size:16px;
vertical-align:bottom;
left:0;
}
.healthcheck-ok::before{
content:'\f12a';
color:#80b341;
}
.healthcheck-error::before{
content:'\f153';
color:#ef3962;
}
.healthcheck-error .limitTitle{
color:#ef3962;
}
.healthcheck-item-title{
font-weight:500;
white-space:nowrap;
}
.healthcheck-item-message{
margin-left:5px;
}
#modeltheme-sites-filter {
display: none;
}
/* Swtich Checkbox */
.swtich-checkbox {
color:#fff;
}
.swtich-checkbox > input + .toggle:before {
content:'ON';
}
.swtich-checkbox > input + .toggle:after {
content:'OFF';
}
.swtich-checkbox > input + .toggle > .switch {
background:#fff;
}
.swtich-checkbox > input + .toggle + .label {
color:#000;
}
.swtich-checkbox > input:checked + .toggle {
background:#3498db;
}
.swtich-checkbox > input:not(:checked) + .toggle {
background:#ccc;
}
.swtich-checkbox > input:checked + .toggle > .switch {
border:3px solid #3498db;
}
.swtich-checkbox > input:not(:checked) + .toggle > .switch {
border:3px solid #ccc;
}
.swtich-checkbox > input + .toggle {
border-radius:4px;
}
.swtich-checkbox > input + .toggle .switch {
border-radius:6px;
}
.swtich-checkbox {
display:inline-flex !important;
align-items:center;
user-select:none;
position:relative;
vertical-align:middle;
margin-bottom:0;
}
.swtich-checkbox:hover {
cursor:pointer;
}
.swtich-checkbox > input {
position:absolute;
opacity:0;
}
.swtich-checkbox > input + .toggle {
align-items:center;
position:relative;
}
.swtich-checkbox > input + .toggle {
overflow:hidden;
position:relative;
flex-shrink:0;
}
.swtich-checkbox > input[disabled] + .toggle {
opacity:0.5;
}
.swtich-checkbox > input[disabled] + .toggle:hover {
cursor:not-allowed;
}
.swtich-checkbox > input + .toggle {
width:100%;
height:100%;
margin:0;
cursor:pointer;
}
.swtich-checkbox > input + .toggle > .switch {
display:block;
height:100%;
position:absolute;
right:0;
z-index:3;
box-sizing:border-box;
}
.swtich-checkbox > input + .toggle:before,
.swtich-checkbox > input + .toggle:after {
display:flex;
align-items:center;
position:absolute;
z-index:2;
height:100%;
}
.swtich-checkbox > input + .toggle:before {
right:55%;
}
.swtich-checkbox > input + .toggle:after {
left:50%;
}
.swtich-checkbox > input + .toggle + .label {
margin-left:10px;
}
.swtich-checkbox[data-label='left'] > input + .toggle {
order:2;
}
.swtich-checkbox[data-label='left'] > input + .toggle + .label {
order:1;
margin-left:0;
margin-right:10px;
}
.swtich-checkbox > input + .toggle:before {
opacity:0;
}
.swtich-checkbox > input:checked + .toggle:before {
opacity:1;
}
.swtich-checkbox > input:checked + .toggle:after {
opacity:0;
}
.swtich-checkbox > input + .toggle {
transition:background 200ms linear, box-shadow 200ms linear;
}
.swtich-checkbox > input + .toggle:before,
.swtich-checkbox > input + .toggle:after {
transition:all 200ms linear;
}
.swtich-checkbox > input + .toggle > .switch {
transition:right 200ms linear, border-color 200ms linear;
}
.swtich-checkbox > input + .toggle {
width:65px;
height:30px;
}
.swtich-checkbox > input + .toggle > .switch {
width:30px;
}
.swtich-checkbox > input + .toggle:before,
.swtich-checkbox > input + .toggle:after {
font-size:0.8rem;
}
.swtich-checkbox > input:not(:checked) + .toggle > .switch {
right:calc(100% - 30px);
}
.swtich-checkbox[data-style='rounded'] > input + .toggle,
.swtich-checkbox[data-style='rounded'] > input + .toggle > .switch{
border-radius:50px;
}
.swtich-checkbox[data-style='rounded'] > input + .toggle:before {
right:50%;
}
.swtich-checkbox[data-style='rounded'] > input + .toggle:after {
left:50%;
}
.circle-loader {
margin: 0px;
border: 2px solid rgba(0, 0, 0, 0.2);
position: relative;
display: inline-block;
vertical-align: top;
}
.circle-loader.circle-loading {
-webkit-animation-name: loader-spin;
animation-name: loader-spin;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
border-left-color: #5cb85c;
}
.circle-loader,
.circle-loader:after {
border-radius: 50%;
width: 20px;
height: 20px;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
-webkit-transition: border 500ms ease-out;
transition: border 500ms ease-out;
}
.load-complete .checkmark {
display: block;
}
.checkmark.draw:after {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: checkmark;
animation-name: checkmark;
-webkit-transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
-ms-transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
}
.checkmark:after {
opacity: 1;
height: 50%;
width: 25%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 50%;
top: 50%;
position: absolute;
}
@-webkit-keyframes loader-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 0.4em;
opacity: 1;
}
40% {
height: 0.8em;
width: 0.4em;
opacity: 1;
}
100% {
height: 0.8em;
width: 0.4em;
opacity: 1;
}
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 0.4em;
opacity: 1;
}
40% {
height: 0.8em;
width: 0.4em;
opacity: 1;
}
100% {
height: 0.8em;
width: 0.4em;
opacity: 1;
}
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes scale {
0%,
100% {
-webkit-transform: none;
transform: none;
}
50% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes scale {
0%,
100% {
-webkit-transform: none;
transform: none;
}
50% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
}
@-webkit-keyframes fill {
100% {
box-shadow: inset 0 0 0 100px #46b450;
}
}
@keyframes fill {
100% {
box-shadow: inset 0 0 0 100px #46b450;
}
}
.icon--checkmark {
-webkit-animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
border-radius: 50%;
box-shadow: inset 0 0 0 #46b450;
display: block;
height: 110px;
left: calc( 50% - 55px);
position: absolute;
top: 20px;
width: 110px;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: 2;
}
.icon {
margin-bottom: 2.8em;
max-width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.icon--checkmark__circle {
-webkit-animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
fill: none;
stroke: #46b450;
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-miterlimit: 10;
stroke-width: 2;
}
.icon--checkmark__check {
-webkit-animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
}
.cs-btn-circle-btn {
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
position: relative;
background: #0085ba;
border-color: #0073aa #006799 #006799;
box-shadow: 0 1px 0 #006799;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
border-radius: 3px;
white-space: nowrap;
box-sizing: border-box;
}
.cs-btn-circle-btn:hover {
color: inherit;
}
.cs-btn-circle-btn.circle-loading .cs-btn-circle-text {
opacity: 0;
}
.cs-btn-circle-btn:hover {
background: #008ec2;
border-color: #006799;
color: #fff;
}
.cs-btn-circle-text {
display: inline-block;
color: #fff;
padding: 5px 10px;
}
.cs-btn-circle:after {
border-radius: 50%;
width: 18px;
height: 18px;
content: "";
display: inline-block;
}
.cs-btn-circle {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: 0px auto;
opacity: 0;
-webkit-transform: translate(-50%, -50%) translateZ(0);
transform: translate(-50%, -50%) translateZ(0);
}
.cs-btn-circle:after {
border-top: 3px solid rgba(255, 255, 255, 0.2);
border-right: 3px solid rgba(255, 255, 255, 0.2);
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
border-left: 3px solid #ffffff;
}
.circle-loading .cs-btn-circle {
opacity: 1;
}
.circle-loading .cs-btn-circle:after {
-webkit-animation: circle_load 1.1s infinite linear;
animation: circle_load 1.1s infinite linear;
}
@-webkit-keyframes circle_load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circle_load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.cs-hide {
visibility: hidden;
height: 0px;
overflow: hidden;
display: block;
}
.cs-clear {
clear: both;
}
.wp-filter {
display: inline-block;
position: relative;
margin: 12px 0 25px;
padding: 0 10px;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
border: 1px solid #e5e5e5;
background: #fff;
color: #555;
font-size: 13px;
box-sizing: border-box;
}
.filter-count {
display: inline-block;
vertical-align: middle;
min-width: 4em;
}
.filter-count .count {
display: inline-block;
position: relative;
top: -1px;
padding: 4px 10px;
border-radius: 30px;
background: #72777c;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.filter-links {
display: inline-block;
margin: 0;
}
.filter-links li {
display: inline-block;
margin: 0;
}
.filter-links li > a {
margin: 0 10px;
padding: 15px 0;
border-bottom: 4px solid #fff;
color: #666;
cursor: pointer;
}
.wp-filter .search-form {
float: right;
margin: 10px 0;
}
.wp-filter .search-form input[type=search] {
margin: 0;
padding: 3px 5px;
width: 280px;
max-width: 100%;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
-webkit-appearance: textfield;
}
.theme-browser .themes {
clear: both;
}
.theme-browser .theme {
cursor: pointer;
float: left;
transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
overflow: hidden;
border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: #e5e5e5 0 0 16px;
-webkit-box-shadow: #e5e5e5 0 0 16px;
border: none;
background: #fff;
}
.theme-browser .theme:hover {
box-shadow: #bfbfbf 0 0 16px;
-webkit-box-shadow: #bfbfbf 0 0 16px;
}
.theme-browser.rendered .theme.focus .theme-screenshot img, .theme-browser.rendered .theme:hover .theme-screenshot img {
opacity: 1;
}
.theme-browser .theme .theme-screenshot {
display: block;
overflow: hidden;
position: relative;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.theme-browser .theme .theme-screenshot:after {
content: "";
display: block;
padding-top: 110%;
}
.theme-browser .theme .theme-id-container {
position: relative;
height: 55px;
}
.theme-browser .theme .theme-name {
font-size: 16px;
font-weight: 600;
margin: 0;
text-align: left;
padding: 16px 15px 20px;
background: #fff;
box-shadow: none;
}
.theme-browser .theme .theme-desc {
background: #fff;
margin: 0px;
padding: 0px 15px 15px;
font-size: 12px;
}
.theme-browser .theme .theme-actions {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
padding: 10px 15px;
box-shadow: none;
opacity: 1;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
height: auto;
background: #fff;
border: none;
}
.theme-browser .theme .theme-actions .button {
float: none;
margin-left: 3px;
}
.theme-browser .theme .theme-actions .button-primary {
margin-right: 3px;
}
.theme-browser .theme .button-primary {
background: #fff;
border-color: #ccc;
color: #7f7f7f;
font-weight: 700;
font-size: 14px;
}
.theme-browser .theme .theme-actions .button-primary:hover {
color: #000;
}
.theme-browser .theme .button-secondary {
color: #555;
border-color: #ccc;
background: #f7f7f7;
box-shadow: 0 1px 0 #ccc;
vertical-align: top;
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 26px;
height: 28px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
border-radius: 3px;
white-space: nowrap;
}
.modeltheme-sites-show-modal #modeltheme-sites-filter, .modeltheme-sites-show-modal #modeltheme-sites-listing-wrapper, .modeltheme-sites-show-modal .wrap {
opacity: 0;
height: 0px;
visibility: hidden;
display: none;
}
.cs-left {
float: left;
}
.cs-right {
float: right;
}
.cs-50 {
width: 50%;
}
.spinner {
display: none;
}
.modeltheme-sites-modal-wrapper {
position: relative;
height: 0px;
overflow: hidden;
visibility: visible;
width: 99%;
display: block;
}
.modeltheme-sites-modal-wrapper.cs-show {
display: block;
z-index: 999;
height: auto;
visibility: visible;
overflow: initial;
}
.modeltheme-sites-modal-wrapper img {
max-width: 100%;
}
.modeltheme-sites-modal-wrapper .cs-modal-outer {
max-width: 960px;
margin: 6em auto 3em;
}
.modeltheme-sites-modal-wrapper .cs-modal-outer * {
box-sizing: border-box;
}
.modeltheme-sites-modal-wrapper .cs-modal {
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
border-radius: 5px;
overflow: hidden;
}
.modeltheme-sites-modal-wrapper .cs-modal:after {
clear: both;
content: "";
display: block;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-info {
width: 40%;
padding: 15px;
border-right: 1px solid #e5e5e5;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-thumbnail {
display: block;
overflow: hidden;
position: relative;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-thumbnail img {
height: auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-thumbnail:after {
content: '';
display: block;
padding-top: 100%;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-name {
font-size: 18px;
font-weight: 600;
padding: 20px 0 10px;
display: inline-block;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-desc {
clear: both;
margin-top: 10px;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-open-preview {
float: right;
margin-top: 16px;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-main {
width: 60%;
position: relative;
padding: 60px 15px;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-breadcrumb {
top: 0px;
left: 0px;
width: 100%;
position: absolute;
padding: 15px;
background: #fff;
margin: 0px;
list-style: none;
border-bottom: 1px solid #e5e5e5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-breadcrumb li {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
margin-bottom: 0px;
font-weight: 600;
line-height: 1;
color: #cccccc;
cursor: default;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-breadcrumb li.cs-clickable {
cursor: pointer;
color: #444444;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-actions {
bottom: 0px;
left: 0px;
width: 100%;
position: absolute;
padding: 15px;
border-top: 1px solid #e5e5e5;
background: #fff;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-actions:after {
clear: both;
content: "";
display: block;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-steps {
overflow: hidden;
position: relative;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step .cs-step-img {
width: 50%;
max-width: 250px;
margin: 12px auto;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step .cs-installing-plugins, .modeltheme-sites-modal-wrapper .cs-modal .cs-step .cs-list-plugins {
max-width: 280px;
margin: 0 auto;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step .cs-plugin-name {
line-height: 1.6;
margin-left: 5px;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step .icon {
display: none;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step.completed .icon {
display: block;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step.completed .cs-step-img img {
visibility: hidden;
opacity: 0;
}
.modeltheme-sites-modal-wrapper .cs-modal .cs-step:after {
clear: both;
content: "";
display: block;
}
.modeltheme-sites-modal-wrapper .cs-action-buttons a {
display: none;
}
.modeltheme-sites-modal-wrapper .cs-action-buttons a.disabled {
opacity: 0.6;
}
.modeltheme-sites-modal-wrapper .cs-action-buttons a.disabled.pro-only {
background: #f96455;
border-color: #b64a40;
box-shadow: 0 1px 0 #b64a40;
text-transform: uppercase;
text-shadow: 0 -1px 1px #b64a40, 1px 0 1px #b64a40, 0 1px 1px #b64a40, -1px 0 1px #b64a40;
cursor: not-allowed;
}
.modeltheme-sites-modal-wrapper .cs-action-buttons a.current {
display: inline-block;
}
.cs-text-center {
text-align: center;
}
.cs-error {
background-color: #fcf8e3;
color: #8a6d3b;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid #faf2cc;
border-radius: .25rem;
}
body.cs-previewing-site {
overflow: hidden !important;
}
#modeltheme-site-preview {
position: fixed;
z-index: 99999999;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: block;
-webkit-transition: width .4s linear;
transition: width .4s linear;
background: #fff;
}
#modeltheme-site-preview.cs-hide {
display: none;
z-index: -1;
height: 0px;
}
#modeltheme-site-preview * {
box-sizing: border-box;
}
#modeltheme-site-preview .cs-iframe-outer {
position: absolute;
top: 0px;
width: 100%;
bottom: 50px;
display: block;
background: #e5e5e5;
}
#modeltheme-site-preview .cs-iframe-outer .cs-iframe {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
display: block;
overflow-x: hidden;
-webkit-transition-property: left,right,top,bottom,width,margin, background;
transition-property: left,right,top,bottom,width,margin, background;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
#modeltheme-site-preview .cs-iframe-outer .cs-iframe[data-device="tablet"] {
margin: auto 0 auto -360px;
width: 720px;
height: 1080px;
max-height: 100%;
max-width: 100%;
left: 50%;
right: auto;
}
#modeltheme-site-preview .cs-iframe-outer .cs-iframe[data-device="phone"] {
margin: auto 0 auto -207px;
width: 414px;
height: 736px;
max-height: 100%;
max-width: 100%;
left: 50%;
right: auto;
}
#modeltheme-site-preview .cs-iframe-outer iframe {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
border: 0px none;
box-shadow: none;
position: absolute;
}
#modeltheme-site-preview .cs-preview-bar {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: block;
padding: 20px;
height: 60px;
background: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
font-size: 24px;
}
#modeltheme-site-preview .cs-preview-bar:after {
clear: both;
content: "";
display: block;
}
#modeltheme-site-preview .cs-preview-bar a {
text-decoration: none;
box-shadow: none !important;
}
#modeltheme-site-preview .cs-preview-bar .dashicons {
width: 30px;
text-align: center;
display: inline-block;
}
#modeltheme-site-preview .cs-preview-bar .dashicons:before {
display: inline-block;
text-align: center;
}
#modeltheme-site-preview .cs-preview-bar .cs-preview-import {
margin-left: 10px;
padding: 3px 8px;
position: relative;
top: 0px;
text-decoration: none;
border: none;
border: 1px solid #ccc;
border-radius: 2px;
background: #f7f7f7;
text-shadow: none;
font-weight: 600;
font-size: 13px;
line-height: normal;
color: #0073aa;
cursor: pointer;
outline: 0;
}
#modeltheme-site-preview .cs-preview-bar a {
color: #333;
}
#modeltheme-site-preview .cs-preview-bar a.current {
color: #cccccc;
}
#modeltheme-site-preview .cs-demo-name {
float: left;
font-weight: 600;
line-height: 1;
}
#modeltheme-site-preview .cs-view-ports, #modeltheme-site-preview .cs-preview-close {
float: right;
}
#modeltheme-site-preview .cs-preview-loading {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9999;
}
#modeltheme-site-preview.cs-iframe-loaded .cs-preview-loading {
z-index: -1;
display: none;
}
.theme-pro-bubble {
position: absolute;
top: 5px;
right: 5px;
background: #f95434;
padding: 5px 10px;
border-radius: 3px;
display: block;
cursor: pointer;
text-transform: uppercase;
font-size: 11px;
color: #fff;
}
#modeltheme-sites-listing.themes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: -1em;
}
@media screen and (max-width: 80em) {
#modeltheme-sites-listing.themes {
margin: 0px;
}
}
#modeltheme-sites-listing.themes .theme {
-ms-flex-preferred-size: calc( 33.3333333% - 2em );
flex-basis: calc( 33.3333333% - 2em );
width: calc( 33.3333333% - 2em );
margin: 1em;
}
@media screen and (max-width: 80em) {
#modeltheme-sites-listing.themes .theme {
-ms-flex-preferred-size: calc( 50% - 2em );
flex-basis: calc( 50% - 2em );
width: calc( 50% - 2em );
margin: 1em 0px;
}
}
@media screen and (max-width: 560px) {
#modeltheme-sites-listing.themes .theme {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
}
}