1146 lines
29 KiB
CSS
1146 lines
29 KiB
CSS
/**
|
|
*
|
|
* Prefix everything
|
|
* Name descriptively
|
|
* Structure radically
|
|
*
|
|
* CSS Structure
|
|
* css/
|
|
* ├─ admin/
|
|
* │ ├─ base.less
|
|
* │ ├─ layout.less
|
|
* │ ├─ modules/
|
|
* │ │ ├─ button.less
|
|
* │ │ ├─ modal.less
|
|
* │ │ ├─ notices.less
|
|
* │ │ ├─ tips-and-tricks.less
|
|
* │ │ ├─ etc.....
|
|
* │ ├─ states.less
|
|
* │ ├─ theme.less
|
|
* ├─ admin.less
|
|
* ├─ admin.min.css
|
|
* ├─ admin.css
|
|
* ├─ variables.less
|
|
*
|
|
*/
|
|
@gridblock _height_big: calc(auto + 20px);
|
|
:root {
|
|
--rsp-spacing-xxs: 5px;
|
|
--rsp-spacing-xs: 10px;
|
|
--rsp-spacing-s: 15px;
|
|
--rsp-spacing-m: 20px;
|
|
--rsp-spacing-l: 30px;
|
|
--rsp-spacing-xl: 40px;
|
|
--rsp-grid-margin: var(--rsp-spacing-xs);
|
|
--rsp-grid-gap: var(--rsp-spacing-m);
|
|
--rsp-border-radius: 12px;
|
|
--rsp-border-radius-s: 8px;
|
|
--rsp-border: 1px solid var(--rsp-border-color);
|
|
--rsp-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
|
--rsp-border-color: #dfdfdf;
|
|
--rsp-black: #333;
|
|
--rsp-white: #fff;
|
|
--rsp-yellow: #f4bf3e;
|
|
--rsp-blue: #009fff;
|
|
--rsp-dark-blue: #1E73BE;
|
|
--rsp-green: #2e8a37;
|
|
--rsp-red: #D7263D;
|
|
--rsp-pink: #E35899;
|
|
--rsp-orange: #f39c12;
|
|
--rsp-wp-blue: #007cba;
|
|
--rsp-yellow-faded: #f2e6c9;
|
|
--rsp-blue-faded: #ecf8fe;
|
|
--rsp-dark-blue-faded: #ebf2f9;
|
|
--rsp-green-faded: #ecf4ed;
|
|
--rsp-red-faded: #fbebed;
|
|
--rsp-pink-faded: #fceff5;
|
|
--rsp-orange-faded: #fef5ea;
|
|
--rsp-wp-blue-faded: #c6e0ef;
|
|
--rsp-background-block-color: var(--rsp-white);
|
|
--rsp-background-color: #f0f0f1;
|
|
--rsp-input-background-color: #fff;
|
|
--rsp-input-text-color: var(--rsp-text-color);
|
|
--rsp-input-border-color: var(--rsp-grey-400);
|
|
--rsp-text-color: rgba(26, 26, 26, 0.9);
|
|
--rsp-text-color-invert: rgba(255, 255, 255, 0.9);
|
|
--rsp-text-color-white: rgba(255, 255, 255, 0.9);
|
|
--rsp-text-color-light: rgba(69, 69, 82, 0.9);
|
|
--rsp-grey-100: #fafafa;
|
|
--rsp-grey-200: #f9f9f9;
|
|
--rsp-grey-300: #ededed;
|
|
--rsp-grey-400: #c6c6c6;
|
|
--rsp-grey-500: #737373;
|
|
--rsp-grey-600: #696969;
|
|
--rsp-color-success: var(--rsp-green);
|
|
--rsp-color-error: var(--rsp-red);
|
|
--rsp-color-warning: var(--rsp-red);
|
|
--rsp-color-open: var(--rsp-yellow);
|
|
--rsp-color-disabled: var(--rsp-grey-300);
|
|
--rsp-fs-100: 0.6875rem;
|
|
--rsp-fs-200: 0.75rem;
|
|
--rsp-fs-300: 0.8125rem;
|
|
--rsp-fs-400: 0.875rem;
|
|
--rsp-fs-500: 1rem;
|
|
--rsp-fs-600: 1.125rem;
|
|
--rsp-fs-700: 1.25rem;
|
|
--rsp-fs-800: 1.5rem;
|
|
--rsp-fs-900: 2.5rem;
|
|
--rsp-brand-primary: var(--rsp-blue);
|
|
--rsp-brand-secondary: var(--rsp-yellow);
|
|
--rsp-brand-primary-faded: var(--rsp-blue-faded);
|
|
}
|
|
.cmplz-block {
|
|
background: var(--rsp-background-block-color);
|
|
box-shadow: var(--rsp-box-shadow);
|
|
border-radius: var(--rsp-border-radius);
|
|
}
|
|
.cmplz {
|
|
font-size: var(--rsp-fs-300);
|
|
box-sizing: border-box;
|
|
line-height: 1.5;
|
|
}
|
|
.cmplz *,
|
|
.cmplz *:before,
|
|
.cmplz *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
.cmplz body,
|
|
.cmplz h1,
|
|
.cmplz h2,
|
|
.cmplz h3,
|
|
.cmplz h4,
|
|
.cmplz h5,
|
|
.cmplz h6,
|
|
.cmplz p,
|
|
.cmplz ol,
|
|
.cmplz ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.cmplz img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.cmplz h1,
|
|
.cmplz h2,
|
|
.cmplz h3,
|
|
.cmplz h4,
|
|
.cmplz h5,
|
|
.cmplz h6 {
|
|
color: var(--rsp-text-color);
|
|
line-height: 1.5;
|
|
}
|
|
.cmplz .h0 {
|
|
font-size: var(--rsp-fs-900);
|
|
font-weight: 700;
|
|
letter-spacing: 0.025rem;
|
|
}
|
|
.cmplz h1,
|
|
.cmplz .h1 {
|
|
font-size: var(--rsp-fs-800);
|
|
line-height: 1.5;
|
|
font-weight: 500;
|
|
letter-spacing: 0.025rem;
|
|
}
|
|
.cmplz h2,
|
|
.cmplz .h2 {
|
|
font-size: var(--rsp-fs-700);
|
|
font-weight: 700;
|
|
letter-spacing: 0.025rem;
|
|
}
|
|
.cmplz h3,
|
|
.cmplz .h3 {
|
|
font-size: var(--rsp-fs-600);
|
|
font-weight: 600;
|
|
letter-spacing: 0.0125rem;
|
|
}
|
|
.cmplz h4,
|
|
.cmplz .h4 {
|
|
font-size: var(--rsp-fs-500);
|
|
font-weight: 600;
|
|
letter-spacing: 0.0125rem;
|
|
}
|
|
.cmplz h5,
|
|
.cmplz .h5 {
|
|
font-size: var(--rsp-fs-400);
|
|
font-weight: 400;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
.cmplz h6,
|
|
.cmplz .h6 {
|
|
font-size: var(--rsp-fs-300);
|
|
letter-spacing: 0.1px;
|
|
}
|
|
.cmplz p {
|
|
color: var(--rsp-text-color);
|
|
font-weight: 400;
|
|
font-size: var(--rsp-fs-400);
|
|
line-height: 1.5;
|
|
}
|
|
.cmplz .small-text {
|
|
font-size: var(--rsp-fs-200);
|
|
line-height: 1.5;
|
|
color: var(--rsp-text-color-light);
|
|
}
|
|
.cmplz a {
|
|
font-size: 1em;
|
|
}
|
|
.cmplz .cmplz-notice-hook-element {
|
|
display: none !important;
|
|
}
|
|
.cmplz .error:not(.really-simple-plugins),
|
|
.cmplz .notice:not(.really-simple-plugins),
|
|
.cmplz .update-nag:not(.really-simple-plugins),
|
|
.cmplz .notice-info:not(.really-simple-plugins) {
|
|
display: none !important;
|
|
}
|
|
/* Grid */
|
|
.cmplz.wrap {
|
|
padding-bottom: 20px;
|
|
margin: 0 0 0 -20px;
|
|
}
|
|
.cmplz .cmplz-header,
|
|
.cmplz .cmplz-content-area {
|
|
max-width: calc(100% - var(--rsp-spacing-xl) * 4);
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 1599px) {
|
|
.cmplz .cmplz-header,
|
|
.cmplz .cmplz-content-area {
|
|
max-width: calc(100% - var(--rsp-spacing-xl) * 1);
|
|
}
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.cmplz .cmplz-header,
|
|
.cmplz .cmplz-content-area {
|
|
max-width: calc(100% - var(--rsp-spacing-xl) * 2);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cmplz .cmplz-header,
|
|
.cmplz .cmplz-content-area {
|
|
max-width: calc(100% - var(--rsp-spacing-xl) * 1);
|
|
}
|
|
}
|
|
.cmplz .cmplz-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
height: 70px;
|
|
box-sizing: border-box;
|
|
background-color: var(--rsp-background-block-color);
|
|
}
|
|
@media (max-width: 1279px) {
|
|
.cmplz .cmplz-header {
|
|
height: auto;
|
|
}
|
|
}
|
|
.cmplz .cmplz-header img {
|
|
margin: var(--rsp-spacing-m) 0;
|
|
}
|
|
.cmplz .cmplz-header-left {
|
|
display: flex;
|
|
font-size: var(--rsp-fs-400);
|
|
}
|
|
@media (max-width: 1279px) {
|
|
.cmplz .cmplz-header-left {
|
|
justify-content: center;
|
|
margin: var(--rsp-spacing-xs) 0;
|
|
order: 3;
|
|
width: 100%;
|
|
background-color: var(--rsp-background-block-color);
|
|
}
|
|
}
|
|
.cmplz .cmplz-header-left .cmplz-header-menu {
|
|
margin: auto 15px;
|
|
}
|
|
.cmplz .cmplz-header-left .cmplz-header-menu ul {
|
|
display: flex;
|
|
}
|
|
.cmplz .cmplz-header-left .cmplz-header-menu a {
|
|
padding: 23px 15px;
|
|
text-decoration: none;
|
|
color: var(--rsp-text-color);
|
|
height: 100%;
|
|
border-bottom: 4px solid transparent;
|
|
transition: border 0.3s ease-out;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
@media (max-width: 1279px) {
|
|
.cmplz .cmplz-header-left .cmplz-header-menu a {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
.cmplz .cmplz-header-left .cmplz-header-menu a.active {
|
|
border-bottom: 4px solid var(--rsp-brand-primary);
|
|
}
|
|
.cmplz .cmplz-header-left .cmplz-header-menu a:hover {
|
|
color: var(--rsp-brand-primary);
|
|
}
|
|
.cmplz .cmplz-header-right {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
gap: var(--rsp-spacing-s);
|
|
}
|
|
.cmplz .cmplz-header-right select {
|
|
max-width: 60ch;
|
|
}
|
|
@media (max-width: 576px) {
|
|
.cmplz .cmplz-header-right .button {
|
|
display: none;
|
|
}
|
|
}
|
|
.cmplz .cmplz-content-area {
|
|
margin-top: calc(var(--rsp-grid-margin) * 2);
|
|
}
|
|
.cmplz .cmplz-header-container {
|
|
background: var(--rsp-background-block-color);
|
|
}
|
|
.cmplz .cmplz-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, calc(25% - var(--rsp-spacing-s)) [col-start]);
|
|
grid-auto-rows: max-content;
|
|
gap: var(--rsp-grid-gap);
|
|
min-height: calc(100vh - 32px - 80px - 20px - var(--rsp-grid-gap));
|
|
}
|
|
.cmplz .cmplz-grid-container {
|
|
background: var(--rsp-background-block-color);
|
|
box-shadow: var(--rsp-box-shadow);
|
|
border-radius: var(--rsp-border-radius);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
flex-basis: 100%;
|
|
min-height: 100%;
|
|
grid-column: span 1;
|
|
grid-row: span 1;
|
|
}
|
|
.cmplz .cmplz-grid-container p {
|
|
font-size: var(--rsp-fs-300);
|
|
}
|
|
.cmplz .cmplz-grid-container.no-background {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
.cmplz .cmplz-grid-container.column-2 {
|
|
grid-column: span 2;
|
|
}
|
|
.cmplz .cmplz-grid-container.row-2 {
|
|
grid-row: span 2;
|
|
}
|
|
@media (max-width: 1599px) {
|
|
.cmplz .cmplz-grid-container {
|
|
grid-column: span 2;
|
|
}
|
|
.cmplz .cmplz-grid-container.cmplz-progress,
|
|
.cmplz .cmplz-grid-container.cmplz-overview {
|
|
grid-column: span 4;
|
|
}
|
|
}
|
|
@media (max-width: 992px) {
|
|
.cmplz .cmplz-grid-container {
|
|
grid-column: span 2;
|
|
}
|
|
.cmplz .cmplz-grid-container.column-2 {
|
|
grid-column: span 4;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cmplz .cmplz-grid-container {
|
|
grid-column: span 4;
|
|
}
|
|
}
|
|
.cmplz .cmplz-grid-header {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.cmplz .cmplz-grid-header {
|
|
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
|
}
|
|
}
|
|
.cmplz .cmplz-grid-title,
|
|
.cmplz .cmplz-wizard-title .h4 {
|
|
margin: 4px 0 4px 0;
|
|
}
|
|
.cmplz .cmplz-grid-controls {
|
|
font-size: var(--rsp-fs-300);
|
|
display: flex;
|
|
gap: var(--rsp-spacing-s);
|
|
}
|
|
.cmplz .cmplz-grid-content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 var(--rsp-spacing-l);
|
|
flex-grow: 100;
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.cmplz .cmplz-grid-content {
|
|
padding: 0 var(--rsp-spacing-m);
|
|
}
|
|
}
|
|
.cmplz .cmplz-grid-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--rsp-grid-margin);
|
|
width: 100%;
|
|
min-height: calc(30px + var(--rsp-spacing-s) * 2);
|
|
box-sizing: border-box;
|
|
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
|
|
align-self: flex-end;
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.cmplz .cmplz-grid-footer {
|
|
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
|
}
|
|
}
|
|
.cmplz .cmplz-grid-footer .cmplz-legend {
|
|
display: flex;
|
|
}
|
|
.cmplz .cmplz-grid-footer .cmplz-legend span {
|
|
padding-left: 5px;
|
|
}
|
|
.cmplz .cmplz-flex-push-right {
|
|
margin-left: auto;
|
|
}
|
|
.cmplz .cmplz-flex-push-left {
|
|
margin-right: auto;
|
|
}
|
|
.cmplz a.button,
|
|
.cmplz button.button,
|
|
.cmplz input.button {
|
|
font-size: var(--rsp-fs-300);
|
|
font-weight: 300;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.cmplz a.button.button-black,
|
|
.cmplz button.button.button-black,
|
|
.cmplz input.button.button-black {
|
|
border: 0 solid transparent;
|
|
background: var(--rsp-black);
|
|
color: var(--rsp-text-color-white);
|
|
}
|
|
.cmplz a.button.button-black:hover,
|
|
.cmplz button.button.button-black:hover,
|
|
.cmplz input.button.button-black:hover,
|
|
.cmplz a.button.button-black:focus,
|
|
.cmplz button.button.button-black:focus,
|
|
.cmplz input.button.button-black:focus,
|
|
.cmplz a.button.button-black:active,
|
|
.cmplz button.button.button-black:active,
|
|
.cmplz input.button.button-black:active {
|
|
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--rsp-black);
|
|
}
|
|
.cmplz a.button.button-tertiary,
|
|
.cmplz button.button.button-tertiary,
|
|
.cmplz input.button.button-tertiary,
|
|
.cmplz a.button.button-red,
|
|
.cmplz button.button.button-red,
|
|
.cmplz input.button.button-red {
|
|
border: 0 solid transparent;
|
|
background: var(--rsp-red);
|
|
color: var(--rsp-text-color-white);
|
|
}
|
|
.cmplz a.button.button-tertiary:hover,
|
|
.cmplz button.button.button-tertiary:hover,
|
|
.cmplz input.button.button-tertiary:hover,
|
|
.cmplz a.button.button-red:hover,
|
|
.cmplz button.button.button-red:hover,
|
|
.cmplz input.button.button-red:hover,
|
|
.cmplz a.button.button-tertiary:focus,
|
|
.cmplz button.button.button-tertiary:focus,
|
|
.cmplz input.button.button-tertiary:focus,
|
|
.cmplz a.button.button-red:focus,
|
|
.cmplz button.button.button-red:focus,
|
|
.cmplz input.button.button-red:focus,
|
|
.cmplz a.button.button-tertiary:active,
|
|
.cmplz button.button.button-tertiary:active,
|
|
.cmplz input.button.button-tertiary:active,
|
|
.cmplz a.button.button-red:active,
|
|
.cmplz button.button.button-red:active,
|
|
.cmplz input.button.button-red:active {
|
|
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--rsp-red);
|
|
background: var(--rsp-red);
|
|
color: var(--rsp-text-color-white);
|
|
}
|
|
/* Documents overview */
|
|
.cmplz-shortcode {
|
|
right: 10000px;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.shortcode {
|
|
cursor: pointer;
|
|
}
|
|
.cmplz-icon,
|
|
.cmplz-icon-tooltip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.cmplz-icon svg,
|
|
.cmplz-icon-tooltip svg {
|
|
fill: currentColor;
|
|
}
|
|
.cmplz-copy-shortcode {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: transform 0.1s ease-in;
|
|
}
|
|
.cmplz-copy-shortcode.cmplz-click-animation .cmplz-icon {
|
|
animation: beat 0.4s ease-out;
|
|
}
|
|
@keyframes beat {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(0.8);
|
|
}
|
|
95% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.cmplz-copy-shortcode-text {
|
|
right: 10000px;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
}
|
|
/**
|
|
Admin notice
|
|
*/
|
|
.cmplz-admin-notice .cmplz-admin-notice-container {
|
|
display: flex;
|
|
padding: 12px;
|
|
align-items: center;
|
|
}
|
|
.cmplz-admin-notice .cmplz-admin-notice-container .cmplz-logo img {
|
|
margin-top: 0.5em;
|
|
}
|
|
.cmplz-admin-notice .cmplz-admin-notice-container .dashicons {
|
|
margin-left: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
/* field styles */
|
|
.cmplz {
|
|
/*
|
|
cool checkbox sliders
|
|
*/
|
|
}
|
|
.cmplz input {
|
|
background: var(--rsp-input-background-color);
|
|
color: var(--rsp-input-text-color);
|
|
border-color: var(--rsp-input-border-color);
|
|
}
|
|
.cmplz input[type=checkbox]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.cmplz input:disabled + .cmplz-slider {
|
|
cursor: not-allowed;
|
|
}
|
|
.cmplz input[type=text]:disabled {
|
|
background-color: #eee;
|
|
color: #ababab;
|
|
}
|
|
.cmplz select {
|
|
background: var(--rsp-input-background-color) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
|
|
color: var(--rsp-input-text-color);
|
|
border-color: var(--rsp-input-border-color);
|
|
}
|
|
.cmplz .field-group .cmplz-label {
|
|
text-align: left;
|
|
margin: 0 var(--rsp-spacing-xs) 0 0;
|
|
}
|
|
.cmplz .field-group.first .cmplz-label {
|
|
padding-top: 0;
|
|
}
|
|
.cmplz .field-group .cmplz-checkbox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.cmplz .cmplz-switch {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 21px;
|
|
}
|
|
.cmplz .cmplz-switch input {
|
|
display: none !important;
|
|
}
|
|
.cmplz .cmplz-switch:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.cmplz .cmplz-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
.cmplz .cmplz-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 15px;
|
|
width: 15px;
|
|
left: 4px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
.cmplz .cmplz-slider.cmplz-round {
|
|
border-radius: 20px;
|
|
}
|
|
.cmplz .cmplz-slider.cmplz-round:before {
|
|
border-radius: 50%;
|
|
}
|
|
.cmplz .cmplz-slider-na {
|
|
padding: 2px 8px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
.cmplz .cmplz-slider-na:before {
|
|
position: absolute;
|
|
content: "N/A";
|
|
color: white;
|
|
}
|
|
.cmplz .cmplz-slider-na.cmplz-round {
|
|
border-radius: 20px;
|
|
}
|
|
.cmplz input:checked + .cmplz-slider {
|
|
background-color: var(--rsp-wp-blue);
|
|
}
|
|
.cmplz input:checked + .cmplz-slider:before {
|
|
-webkit-transform: translateX(17px);
|
|
-ms-transform: translateX(17px);
|
|
transform: translateX(17px);
|
|
}
|
|
.cmplz input:checked:disabled + .cmplz-slider {
|
|
background-color: var(--rsp-wp-blue-faded);
|
|
}
|
|
.cmplz input:focus + .cmplz-slider {
|
|
box-shadow: 0 0 1px var(--rsp-wp-blue);
|
|
}
|
|
.cmplz .cmplz-bullet {
|
|
height: 13px;
|
|
width: 13px;
|
|
flex: 0 0 13px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-yellow {
|
|
background-color: var(--rsp-yellow);
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-blue {
|
|
background-color: var(--rsp-blue);
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-pink {
|
|
background-color: var(--rsp-pink);
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-red {
|
|
background-color: var(--rsp-red);
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-green {
|
|
background-color: var(--rsp-green);
|
|
}
|
|
.cmplz .cmplz-bullet.rsp-blue-yellow {
|
|
background: var(--rsp-blue);
|
|
background: linear-gradient(77deg, rgba(0, 159, 255) 0%, #009fff 30%, #f4bf3e 70%, #f4bf3e 100%);
|
|
animation: gradient 2s ease infinite;
|
|
background-size: 200% 200%;
|
|
}
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
.cmplz-header-container .cmplz-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 70px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
.cmplz-header-container .cmplz-header img {
|
|
margin: auto 0;
|
|
height: 25px;
|
|
}
|
|
.cmplz-header-container .cmplz-header .cmplz-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
gap: var(--rsp-spacing-s);
|
|
}
|
|
.cmplz-header-container .cmplz-header .cmplz-header-right select {
|
|
max-width: 60ch;
|
|
}
|
|
#complianz *:focus-visible {
|
|
outline-offset: 4px;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast {
|
|
/* Disabled option */
|
|
/* Placeholders */
|
|
/* License */
|
|
/* Ending */
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-grid-controls {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-grid-controls a {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast button .cmplz-close-warning-x {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-progress-status.cmplz-completed {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-step-header.incomplete a h2 {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
margin: 0 20px;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section span {
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section a {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
padding: 3px 5px;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section a h3 {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section.cmplz-done a h3 {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-step .cmplz-section.active a h3 {
|
|
color: var(--rsp-black) !important;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal {
|
|
z-index: 1;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal.cmplz-notice {
|
|
background-color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal.cmplz-notice:after {
|
|
border-right: 15px solid var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal.cmplz-warning a {
|
|
color: var(--rsp-black) !important;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal.cmplz-warning {
|
|
color: var(--rsp-black) !important;
|
|
background-color: var(--rsp-yellow);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal.cmplz-warning:after {
|
|
border-right: 15px solid var(--rsp-yellow);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-help-warning-wrap .cmplz-help-modal a {
|
|
color: #fff;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-panel.cmplz-toggle-disabled {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast input:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-sublabel label {
|
|
color: var(--rsp-black);
|
|
font-size: 13px;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast ::placeholder {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast ::placeholder {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast ::-moz-placeholder {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast :-ms-input-placeholder {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast :-moz-placeholder {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info {
|
|
display: flex;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info > div {
|
|
padding: 10px 10px 10px 0;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info .cmplz-license-status-container .cmplz-license-status {
|
|
display: block;
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info .cmplz-license-status-container .cmplz-license-status.cmplz-premium {
|
|
background-color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info .cmplz-license-status-container .cmplz-license-status.cmplz-success {
|
|
color: var(--rsp-black);
|
|
}
|
|
#complianz.wrap.cmplz-high-contrast .cmplz-status-info .cmplz-license-status-container .cmplz-license-status.cmplz-warning {
|
|
color: var(--rsp-black);
|
|
}
|
|
/* START TOOLTIP STYLES */
|
|
[cmplz-tooltip] {
|
|
position: relative;
|
|
/* opinion 1 */
|
|
cursor: pointer;
|
|
}
|
|
/* Applies to all tooltips */
|
|
[cmplz-tooltip]::before,
|
|
[cmplz-tooltip]::after {
|
|
text-transform: none;
|
|
font-size: 13px;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
[cmplz-tooltip]::before {
|
|
content: '';
|
|
border: 5px solid transparent;
|
|
/* opinion 4 */
|
|
z-index: 1001;
|
|
/* absurdity 1 */
|
|
}
|
|
[cmplz-tooltip]::after {
|
|
content: attr(cmplz-tooltip);
|
|
/* magic! */
|
|
font-weight: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 1ch 1.5ch;
|
|
border-radius: 0.3ch;
|
|
box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
|
|
background: #333;
|
|
color: #fff;
|
|
z-index: 1000;
|
|
/* absurdity 2 */
|
|
width: min(100vw, 45ch);
|
|
text-align: left;
|
|
}
|
|
/* Make the tooltips respond to hover */
|
|
[cmplz-tooltip]:hover::before,
|
|
[cmplz-tooltip]:hover::after {
|
|
display: block;
|
|
}
|
|
/* Make the tooltips respond to focus */
|
|
[cmplz-tooltip]:focus::before,
|
|
[cmplz-tooltip]:focus::after {
|
|
display: block;
|
|
}
|
|
/* don't show empty tooltips */
|
|
[cmplz-tooltip='']::before,
|
|
[cmplz-tooltip='']::after {
|
|
display: none !important;
|
|
}
|
|
/* FLOW: UP */
|
|
[cmplz-tooltip]:not([flow])::before,
|
|
[cmplz-tooltip][flow^="up"]::before {
|
|
bottom: calc(100% + 5px);
|
|
border-bottom-width: 0;
|
|
border-top-color: #333;
|
|
}
|
|
[cmplz-tooltip]:not([flow])::after,
|
|
[cmplz-tooltip][flow^="up"]::after {
|
|
bottom: calc(100% + 10px);
|
|
}
|
|
[cmplz-tooltip]:not([flow])::before,
|
|
[cmplz-tooltip]:not([flow])::after,
|
|
[cmplz-tooltip][flow^="up"]::before,
|
|
[cmplz-tooltip][flow^="up"]::after {
|
|
left: 50%;
|
|
transform: translate(-50%, -0.5em);
|
|
}
|
|
/* FLOW: DOWN */
|
|
[cmplz-tooltip][flow^="down"]::before {
|
|
top: 17px;
|
|
border-top-width: 0;
|
|
}
|
|
[cmplz-tooltip][flow^="down"]::after {
|
|
top: calc(100% + 5px);
|
|
}
|
|
[cmplz-tooltip][flow^="down"]::before,
|
|
[cmplz-tooltip][flow^="down"]::after {
|
|
left: 50%;
|
|
transform: translate(-50%, 0.5em);
|
|
}
|
|
/* FLOW: LEFT */
|
|
[cmplz-tooltip][flow^="left"]::before {
|
|
top: 50%;
|
|
border-right-width: 0;
|
|
border-left-color: #333;
|
|
left: calc(0em - 5px);
|
|
transform: translate(-0.5em, -50%);
|
|
}
|
|
[cmplz-tooltip][flow^="left"]::after {
|
|
top: 50%;
|
|
right: calc(100% + 5px);
|
|
transform: translate(-0.5em, -50%);
|
|
}
|
|
/* FLOW: RIGHT */
|
|
[cmplz-tooltip][flow^="right"]::before {
|
|
top: 10px;
|
|
border-left-width: 0;
|
|
border-right-color: #333;
|
|
right: calc(0em - 23px);
|
|
transform: translate(0.5em, -50%);
|
|
}
|
|
[cmplz-tooltip][flow^="right"]::after {
|
|
top: 10px;
|
|
left: calc(100% + 23px);
|
|
transform: translate(0.5em, -50%);
|
|
min-width: 150px;
|
|
}
|
|
/* KEYFRAMES */
|
|
@keyframes tooltips-vert {
|
|
to {
|
|
opacity: 0.9;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
@keyframes tooltips-horz {
|
|
to {
|
|
opacity: 0.9;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
/* FX All The Things */
|
|
[cmplz-tooltip]:not([flow]):hover::before,
|
|
[cmplz-tooltip]:not([flow]):focus::before,
|
|
[cmplz-tooltip]:not([flow]):hover::after,
|
|
[cmplz-tooltip]:not([flow]):focus::after,
|
|
[cmplz-tooltip][flow^="up"]:hover::before,
|
|
[cmplz-tooltip][flow^="up"]:focus::before,
|
|
[cmplz-tooltip][flow^="up"]:hover::after,
|
|
[cmplz-tooltip][flow^="up"]:focus::after,
|
|
[cmplz-tooltip][flow^="down"]:hover::before,
|
|
[cmplz-tooltip][flow^="down"]:focus::before,
|
|
[cmplz-tooltip][flow^="down"]:hover::after,
|
|
[cmplz-tooltip][flow^="down"]:focus::after {
|
|
animation: tooltips-vert 300ms ease-out forwards;
|
|
}
|
|
[cmplz-tooltip][flow^="left"]:hover::before,
|
|
[cmplz-tooltip][flow^="left"]:focus::before,
|
|
[cmplz-tooltip][flow^="left"]:hover::after,
|
|
[cmplz-tooltip][flow^="left"]:focus::after,
|
|
[cmplz-tooltip][flow^="right"]:hover::before,
|
|
[cmplz-tooltip][flow^="right"]:focus::before,
|
|
[cmplz-tooltip][flow^="right"]:hover::after,
|
|
[cmplz-tooltip][flow^="right"]:focus::after {
|
|
animation: tooltips-horz 300ms ease-out forwards;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container {
|
|
grid-column: 1 / span 2;
|
|
justify-self: center;
|
|
max-width: 50%;
|
|
margin-top: var(--rsp-spacing-xs);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .rsp-logo img {
|
|
height: 28px;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container {
|
|
display: flex !important;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
font-size: var(--rsp-fs-300);
|
|
line-height: 1.7;
|
|
gap: var(--rsp-spacing-xxs);
|
|
}
|
|
@media screen and (max-width: 992px) {
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container {
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element {
|
|
padding: 0 var(--rsp-spacing-l);
|
|
width: 100%;
|
|
display: flex;
|
|
align-content: space-between;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
--rsp-other-plugins-color: var(---rsp-brand-primary);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element.cmplz-zip {
|
|
--rsp-other-plugins-color: var(--rsp-pink);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element.cmplz-burst {
|
|
--rsp-other-plugins-color: var(--rsp-green);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element.cmplz-complianz,
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element.cmplz-complianztc {
|
|
--rsp-other-plugins-color: var(--rsp-blue);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element.cmplz-rsssl {
|
|
--rsp-other-plugins-color: var(--rsp-yellow);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element a {
|
|
width: max-content;
|
|
color: var(--rsp-text-color-light);
|
|
transition: color 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: var(--rsp-spacing-xs);
|
|
text-decoration: none;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element a:hover {
|
|
color: var(--rsp-other-plugins-color);
|
|
text-decoration: underline;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element a:hover .cmplz-bullet {
|
|
background-color: var(--rsp-other-plugins-color);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element a:hover .cmplz-other-plugins-content {
|
|
text-decoration: underline;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element .cmplz-bullet {
|
|
transition: background-color 0.3s ease;
|
|
background-color: var(--rsp-other-plugins-color);
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element .cmplz-other-plugins-content {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.cmplz-terms-conditions .cmplz-other-plugins-container .cmplz-other-plugins-element .cmplz-other-plugin-status {
|
|
min-width: fit-content;
|
|
}
|
|
.cmplz {
|
|
/*skeleton*/
|
|
/*loader*/
|
|
}
|
|
.cmplz .cmplz-skeleton:empty {
|
|
margin: auto;
|
|
margin-bottom: 25px;
|
|
width: 100%;
|
|
height: 235px;
|
|
/* change height to see repeat-y behavior */
|
|
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 15%), linear-gradient(#f2f2f2 38px, transparent 0), linear-gradient(#f2f2f2 38px, transparent 0), linear-gradient(#f2f2f2 38px, transparent 0), linear-gradient(#f2f2f2 38px, transparent 0);
|
|
background-repeat: repeat-y;
|
|
background-size: 50px 200px, /* highlight */ 100% 117px, 100% 117px, 100% 117px, 100% 117px;
|
|
background-position: 0 0, /* highlight */ 1px 1px, 1px 40px, 1px 79px, 1px 118px;
|
|
background-color: #d6d8db;
|
|
border-right: 1px solid #d6d8db;
|
|
animation: shine 2.5s infinite;
|
|
}
|
|
@keyframes shine {
|
|
to {
|
|
background-position: 100% 0, /* move highlight to right */ 1px 1px, 1px 40px, 1px 79px, 1px 118px;
|
|
}
|
|
}
|
|
.cmplz .cmplz-loader {
|
|
margin: 0;
|
|
width: 50px;
|
|
height: 15px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
}
|
|
.cmplz .cmplz-loader > div {
|
|
margin: 1px;
|
|
background-color: #333;
|
|
height: 100%;
|
|
width: 3px;
|
|
display: inline-block;
|
|
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
}
|
|
.cmplz .cmplz-loader.cmplz-loader-white > div {
|
|
background-color: #fff;
|
|
}
|
|
.cmplz .cmplz-loader .rect2 {
|
|
-webkit-animation-delay: -1.1s;
|
|
animation-delay: -1.1s;
|
|
}
|
|
.cmplz .cmplz-loader .rect3 {
|
|
-webkit-animation-delay: -1s;
|
|
animation-delay: -1s;
|
|
}
|
|
.cmplz .cmplz-loader .rect4 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s;
|
|
}
|
|
.cmplz .cmplz-loader .rect5 {
|
|
-webkit-animation-delay: -0.8s;
|
|
animation-delay: -0.8s;
|
|
}
|
|
.cmplz .button-primary .cmplz-loader div {
|
|
background-color: #fff;
|
|
}
|
|
@-webkit-keyframes sk-stretchdelay {
|
|
0%,
|
|
40%,
|
|
100% {
|
|
-webkit-transform: scaleY(0.4);
|
|
}
|
|
20% {
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes sk-stretchdelay {
|
|
0%,
|
|
40%,
|
|
100% {
|
|
transform: scaleY(0.4);
|
|
-webkit-transform: scaleY(0.4);
|
|
}
|
|
20% {
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
}
|
|
:root {
|
|
--rsp-brand-primary: var(--rsp-blue);
|
|
--rsp-brand-secondary: var(--rsp-yellow);
|
|
--rsp-brand-primary-faded: var(--rsp-blue-faded);
|
|
}
|
|
/*# sourceMappingURL=admin.css.map */ |