1151 lines
29 KiB
CSS
1151 lines
29 KiB
CSS
/**move to css variables in time */
|
|
:root {
|
|
--rsp-break-xs: 400px;
|
|
--rsp-break-s: 576px;
|
|
--rsp-break-m: 768px;
|
|
--rsp-break-l: 992px;
|
|
--rsp-break-xl: 1200px;
|
|
--rsp-break-xxl: 1400px;
|
|
--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: 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: #29b6f6;
|
|
--rsp-dark-blue: #5A6FA5;
|
|
--rsp-green: #2e8a37;
|
|
--rsp-red: #D7263D;
|
|
--rsp-pink: #E35899;
|
|
--rsp-orange: #f39c12;
|
|
--rsp-yellow-faded: rgba(244, 191, 62, 0.1);
|
|
--rsp-blue-faded: rgba(41, 182, 246, 0.1);
|
|
--rsp-dark-blue-faded: rgba(41, 182, 246, 0.1);
|
|
--rsp-green-faded: rgba(46, 138, 55, 0.1);
|
|
--rsp-red-faded: rgba(215, 38, 61, 0.1);
|
|
--rsp-pink-faded: rgba(227, 88, 153, 0.1);
|
|
--rsp-orange-faded: rgba(243, 156, 18, 0.1);
|
|
--rsp-background-block-color: var(--rsp-white);
|
|
--rsp-background-color: #f0f0f1;
|
|
--rsp-input-background-color: #F1F1F1;
|
|
--rsp-input-text-color: var(--rsp-text-color);
|
|
--rsp-input-border-color: #8c8f94;
|
|
--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-200: #fafafa;
|
|
--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-orange);
|
|
--rsp-color-open: var(--rsp-yellow);
|
|
--rsp-fs-100: 0.6125rem;
|
|
--rsp-fs-200: 0.625rem;
|
|
--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-green);
|
|
--rsp-brand-secondary: var(--rsp-yellow);
|
|
--rsp-brand-primary-faded: var(--rsp-green-faded);
|
|
}
|
|
.rsssl-certificate-data {
|
|
right: 10000px;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.rsssl-copied-feedback-container {
|
|
padding: 20px;
|
|
color: #61ce70;
|
|
}
|
|
.rsssl-section .rsssl_letsencrypt_container a.button {
|
|
margin-top: 15px;
|
|
}
|
|
/**
|
|
* class to add a triangle pointer to each div
|
|
*/
|
|
.rsssl-pointer {
|
|
position: relative;
|
|
}
|
|
.rsssl-pointer:after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 15px;
|
|
border-top: 15px solid transparent;
|
|
border-right: 15px solid black;
|
|
border-left: none;
|
|
border-bottom: 15px solid transparent;
|
|
}
|
|
#rsssl-content-area {
|
|
display: grid;
|
|
grid-template-columns: 225px auto;
|
|
}
|
|
#rsssl-content-area h1 {
|
|
padding: 0;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-title {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eeeeee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-title h1 {
|
|
font-size: 18px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-title.rsssl-section-content-notifications-header {
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-title.rsssl-section-content-notifications-header h1 {
|
|
font-weight: normal;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-subtitle h2 {
|
|
margin: 20px 20px 0 20px;
|
|
font-size: 14px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-progress-bar {
|
|
background: #eeeeee;
|
|
height: 15px;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-progress-bar .rsssl-wizard-progress-bar-value {
|
|
transition: width 0.5s;
|
|
-webkit-transition: width 0.5s;
|
|
height: 100%;
|
|
background: #61ce70;
|
|
border-radius: 4px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-progress-bar .rsssl-wizard-progress-bar-value.rsssl-error {
|
|
background-color: #D7263D;
|
|
}
|
|
#rsssl-content-area .rsssl-priority {
|
|
background-color: #000;
|
|
color: #fff;
|
|
border-color: #000;
|
|
margin-top: 10px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu {
|
|
background-color: white;
|
|
margin: 10px;
|
|
margin-bottom: 0;
|
|
padding-bottom: 20px;
|
|
box-shadow: 0 0 5px 5px rgba(222, 222, 222, 0.2);
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-wizard-menu h1 {
|
|
font-weight: bold;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-wizard-progress-bar {
|
|
margin: 20px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-icon {
|
|
margin: 4px 0 0 0;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header {
|
|
text-decoration: none;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header.incomplete a h2 {
|
|
color: #c6c6c6;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header a {
|
|
display: inline-block;
|
|
padding: 5px 20px;
|
|
text-decoration: none;
|
|
width: calc(100% - (20px + 20px));
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header a h2 {
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header.active a h2 {
|
|
color: #c6c6c6 !important;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header:hover a h2 {
|
|
text-decoration: underline;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-step-header.active:hover a {
|
|
background: white;
|
|
pointer-events: none;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
margin: 0 20px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section span {
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section a {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
padding: 3px 5px;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section a h3 {
|
|
color: #c6c6c6;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section a:visited h3 {
|
|
color: initial;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section a h3 {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section.active a h3 {
|
|
color: grey;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section:hover a h3 {
|
|
text-decoration: underline;
|
|
}
|
|
#rsssl-content-area .rsssl-wizard-menu .rsssl-step .rsssl-section.active:hover a {
|
|
background: white;
|
|
pointer-events: none;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content {
|
|
margin: 10px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content p {
|
|
margin: 0;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content p:not(:first-child) {
|
|
margin-top: 1em;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form {
|
|
display: grid;
|
|
grid-template-columns: auto 325px;
|
|
grid-column-gap: 15px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-section-content-title-header {
|
|
background-color: white;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-wizard-intro,
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-template-intro .rsssl-master-label {
|
|
grid-column-start: 1;
|
|
background-color: white;
|
|
padding: 20px 20px 0 20px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-field .rsssl-wizard-intro {
|
|
padding: 0 0 20px 0;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-button {
|
|
background-color: white;
|
|
grid-column-start: 1;
|
|
padding: 20px 20px 0 20px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .field-group {
|
|
grid-column: span 2;
|
|
display: grid;
|
|
grid-template-columns: auto 325px;
|
|
grid-column-gap: 15px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .field-group .rsssl-field {
|
|
grid-column-start: 1;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .field-group .rsssl-help-warning-wrap {
|
|
margin-top: -20px;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-section-footer {
|
|
grid-column-start: 1;
|
|
background-color: white;
|
|
padding: 20px;
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-section-footer .rsssl-buttons-container {
|
|
grid-column-start: 2;
|
|
}
|
|
#rsssl-content-area .rsssl-section-content form .rsssl-section-footer .rsssl-buttons-container input + input {
|
|
margin-left: 20px;
|
|
}
|
|
#rsssl-wizard {
|
|
/* ----------- Icons ----------- */
|
|
/* ----------- Fields ----------- */
|
|
/* Checkbox */
|
|
/* Disabled option */
|
|
/* Customize the label (the container) */
|
|
/* Radio */
|
|
/* Customize the label (the container) */
|
|
/* Text & Email Validation */
|
|
/* Text, Email, Select(2), Textarea Style */
|
|
/* Placeholders */
|
|
/* Labels */
|
|
/* Firefox */
|
|
}
|
|
#rsssl-wizard .rsssl-icon {
|
|
margin: 0 5px;
|
|
width: initial;
|
|
border-radius: 50%;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-empty {
|
|
visibility: hidden;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-success {
|
|
color: #f8be2e;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-success svg {
|
|
fill: #f8be2e;
|
|
stroke: #f8be2e;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-green {
|
|
color: #61ce70;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-green svg {
|
|
fill: #61ce70;
|
|
stroke: #61ce70;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-disabled {
|
|
color: #ababab;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-disabled svg {
|
|
fill: #ababab;
|
|
stroke: #ababab;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-error {
|
|
color: #d7263d;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.rsssl-error svg {
|
|
fill: #d7263d;
|
|
stroke: #d7263d;
|
|
}
|
|
#rsssl-wizard .rsssl-icon.arrow-right-alt2::before {
|
|
font-size: 14px;
|
|
}
|
|
#rsssl-wizard .rsssl-circle-green {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 12px;
|
|
background-color: #61ce70;
|
|
}
|
|
#rsssl-wizard .rsssl-circle-red {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 12px;
|
|
background-color: #d7263d;
|
|
}
|
|
#rsssl-wizard .rsssl-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox .rsssl-field {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox .rsssl-field .rsssl-wizard-settings-text {
|
|
margin-left: 20px;
|
|
margin-top: 5px;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
/* Hide the browser's default checkbox */
|
|
/* Create a custom checkbox */
|
|
/* Checkmark (hidden when not checked) */
|
|
/* Show the checkmark when checked */
|
|
/* Style the checkmark/indicator */
|
|
/* Show the default checkmark when default */
|
|
/* Disabled option */
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container .checkmark {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid #dadada;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container .checkmark svg {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container input:checked ~ .checkmark svg {
|
|
display: block;
|
|
fill: #f8be2e;
|
|
stroke: #f8be2e;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container .checkmark svg {
|
|
left: 2.5px;
|
|
top: 2px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container .checkmark.rsssl-default svg {
|
|
display: block;
|
|
fill: #eee;
|
|
stroke: #eee;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container.rsssl-disabled {
|
|
pointer-events: none;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container.rsssl-disabled .checkmark {
|
|
background-color: #eee;
|
|
}
|
|
#rsssl-wizard .rsssl-checkbox-container.rsssl-disabled .checkmark svg {
|
|
stroke: #eee !important;
|
|
fill: #eee !important;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
/* Hide the browser's default checkbox */
|
|
/* Create a custom radio */
|
|
/* Check icon (hidden when not checked) */
|
|
/* Show check icon when checked */
|
|
/* Style the check icon */
|
|
/* Show the default checkmark when default */
|
|
/* Disabled option */
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container .radiobtn {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 20px;
|
|
border: 1px solid #dadada;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container .radiobtn div {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container input:checked ~ .radiobtn .rsssl-icon {
|
|
display: block;
|
|
background-color: #f8be2e;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container .radiobtn .rsssl-icon {
|
|
left: 5px;
|
|
top: 3px;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container .radiobtn.rsssl-default .rsssl-icon {
|
|
display: block;
|
|
background-color: #eee;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container.rsssl-disabled {
|
|
pointer-events: none;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container.rsssl-disabled .radiobtn {
|
|
background-color: #eee;
|
|
}
|
|
#rsssl-wizard .rsssl-radio-container.rsssl-disabled .radiobtn .rsssl-icon {
|
|
background-color: #eee !important;
|
|
}
|
|
#rsssl-wizard textarea.validation,
|
|
#rsssl-wizard input[type="text"].validation,
|
|
#rsssl-wizard input[type="password"].validation,
|
|
#rsssl-wizard input[type="email"].validation,
|
|
#rsssl-wizard input[type="text"].rsssl-valid-page,
|
|
#rsssl-wizard input[type="text"].rsssl-deleted-page {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
#rsssl-wizard textarea.validation ~ span .rsssl-icon,
|
|
#rsssl-wizard input[type="text"].validation ~ span .rsssl-icon,
|
|
#rsssl-wizard input[type="password"].validation ~ span .rsssl-icon,
|
|
#rsssl-wizard input[type="email"].validation ~ span .rsssl-icon,
|
|
#rsssl-wizard input[type="text"].rsssl-valid-page ~ span .rsssl-icon,
|
|
#rsssl-wizard input[type="text"].rsssl-deleted-page ~ span .rsssl-icon {
|
|
display: block;
|
|
position: absolute;
|
|
padding-left: 7px;
|
|
margin-top: -25px;
|
|
z-index: 1;
|
|
}
|
|
#rsssl-wizard textarea.validation ~ span .rsssl-icon svg,
|
|
#rsssl-wizard input[type="text"].validation ~ span .rsssl-icon svg,
|
|
#rsssl-wizard input[type="password"].validation ~ span .rsssl-icon svg,
|
|
#rsssl-wizard input[type="email"].validation ~ span .rsssl-icon svg,
|
|
#rsssl-wizard input[type="text"].rsssl-valid-page ~ span .rsssl-icon svg,
|
|
#rsssl-wizard input[type="text"].rsssl-deleted-page ~ span .rsssl-icon svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
#rsssl-wizard textarea.validation:invalid ~ span .rsssl-icon,
|
|
#rsssl-wizard textarea.validation:valid ~ span .rsssl-icon {
|
|
margin-top: -143px;
|
|
}
|
|
#rsssl-wizard textarea.validation:valid ~ span .rsssl-failed,
|
|
#rsssl-wizard input[type="text"].validation:valid ~ span .rsssl-failed,
|
|
#rsssl-wizard input[type="password"].validation:valid ~ span .rsssl-failed,
|
|
#rsssl-wizard input[type="email"].validation:valid ~ span .rsssl-failed {
|
|
display: none;
|
|
}
|
|
#rsssl-wizard textarea.validation:invalid ~ span .rsssl-success,
|
|
#rsssl-wizard input[type="text"].validation:invalid ~ span .rsssl-success,
|
|
#rsssl-wizard input[type="password"].validation:invalid ~ span .rsssl-success,
|
|
#rsssl-wizard input[type="email"].validation:invalid ~ span .rsssl-success {
|
|
display: none;
|
|
}
|
|
#rsssl-wizard input:disabled {
|
|
background-color: #F2F2F2;
|
|
}
|
|
#rsssl-wizard input[type="text"],
|
|
#rsssl-wizard input[type="password"],
|
|
#rsssl-wizard input[type="email"],
|
|
#rsssl-wizard select,
|
|
#rsssl-wizard .select2,
|
|
#rsssl-wizard textarea,
|
|
#rsssl-wizard input[type="number"] {
|
|
margin-bottom: 2px;
|
|
}
|
|
#rsssl-wizard textarea {
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: 100px;
|
|
margin: 20px 0;
|
|
}
|
|
#rsssl-wizard ::placeholder {
|
|
color: #dadada;
|
|
}
|
|
#rsssl-wizard ::placeholder {
|
|
color: #dadada;
|
|
}
|
|
#rsssl-wizard ::-moz-placeholder {
|
|
color: #dadada;
|
|
}
|
|
#rsssl-wizard :-ms-input-placeholder {
|
|
color: #dadada;
|
|
}
|
|
#rsssl-wizard :-moz-placeholder {
|
|
color: #dadada;
|
|
}
|
|
#rsssl-wizard .rsssl-master-label h2 {
|
|
padding: 20px 20px 0 20px !important;
|
|
}
|
|
#rsssl-wizard input::-webkit-outer-spin-button,
|
|
#rsssl-wizard input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
#rsssl-wizard input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
.rsssl-multiple-field-button-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rsssl-multiple-field-button-footer .rsssl-edit-item {
|
|
margin-right: 5px;
|
|
}
|
|
.rsssl-hidden {
|
|
display: none !important;
|
|
}
|
|
/* START TOOLTIP STYLES */
|
|
[rsssl-tooltip] {
|
|
position: relative;
|
|
/* opinion 1 */
|
|
margin-left: 5px;
|
|
}
|
|
/* Applies to all tooltips */
|
|
[rsssl-tooltip]::before,
|
|
[rsssl-tooltip]::after {
|
|
text-transform: none;
|
|
/* opinion 2 */
|
|
font-size: 1em;
|
|
/* opinion 3 */
|
|
line-height: 1;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
[rsssl-tooltip]::before {
|
|
content: '';
|
|
border: 5px solid transparent;
|
|
/* opinion 4 */
|
|
z-index: 1001;
|
|
/* absurdity 1 */
|
|
}
|
|
[rsssl-tooltip]::after {
|
|
content: attr(rsssl-tooltip);
|
|
/* magic! */
|
|
min-width: 3em;
|
|
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 */
|
|
}
|
|
/* Make the tooltips respond to hover */
|
|
[rsssl-tooltip]:hover::before,
|
|
[rsssl-tooltip]:hover::after {
|
|
display: block;
|
|
}
|
|
/* don't show empty tooltips */
|
|
[rsssl-tooltip='']::before,
|
|
[rsssl-tooltip='']::after {
|
|
display: none !important;
|
|
}
|
|
/* FLOW: UP */
|
|
[rsssl-tooltip]:not([flow])::before,
|
|
[rsssl-tooltip][flow^="up"]::before {
|
|
bottom: 100%;
|
|
border-bottom-width: 0;
|
|
border-top-color: #333;
|
|
}
|
|
[rsssl-tooltip]:not([flow])::after,
|
|
[rsssl-tooltip][flow^="up"]::after {
|
|
bottom: calc(100% + 5px);
|
|
}
|
|
[rsssl-tooltip]:not([flow])::before,
|
|
[rsssl-tooltip]:not([flow])::after,
|
|
[rsssl-tooltip][flow^="up"]::before,
|
|
[rsssl-tooltip][flow^="up"]::after {
|
|
left: 50%;
|
|
transform: translate(-50%, -0.5em);
|
|
}
|
|
/* FLOW: DOWN */
|
|
[rsssl-tooltip][flow^="down"]::before {
|
|
top: 100%;
|
|
border-top-width: 0;
|
|
border-bottom-color: #333;
|
|
}
|
|
[rsssl-tooltip][flow^="down"]::after {
|
|
top: calc(100% + 5px);
|
|
}
|
|
[rsssl-tooltip][flow^="down"]::before,
|
|
[rsssl-tooltip][flow^="down"]::after {
|
|
left: 50%;
|
|
transform: translate(-50%, 0.5em);
|
|
}
|
|
/* FLOW: LEFT */
|
|
[rsssl-tooltip][flow^="left"]::before {
|
|
top: 50%;
|
|
border-right-width: 0;
|
|
border-left-color: #333;
|
|
left: calc(0em - 5px);
|
|
transform: translate(-0.5em, -50%);
|
|
}
|
|
[rsssl-tooltip][flow^="left"]::after {
|
|
top: 50%;
|
|
right: calc(100% + 5px);
|
|
transform: translate(-0.5em, -50%);
|
|
}
|
|
/* FLOW: RIGHT */
|
|
[rsssl-tooltip][flow^="right"]::before {
|
|
top: 50%;
|
|
border-left-width: 0;
|
|
border-right-color: #333;
|
|
right: calc(0em - 19px);
|
|
transform: translate(0.5em, -50%);
|
|
}
|
|
[rsssl-tooltip][flow^="right"]::after {
|
|
top: 50%;
|
|
left: calc(100% + 19px);
|
|
transform: translate(0.5em, -50%);
|
|
min-width: 300px;
|
|
}
|
|
/* 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 */
|
|
[rsssl-tooltip]:not([flow]):hover::before,
|
|
[rsssl-tooltip]:not([flow]):hover::after,
|
|
[rsssl-tooltip][flow^="up"]:hover::before,
|
|
[rsssl-tooltip][flow^="up"]:hover::after,
|
|
[rsssl-tooltip][flow^="down"]:hover::before,
|
|
[rsssl-tooltip][flow^="down"]:hover::after {
|
|
animation: tooltips-vert 300ms ease-out forwards;
|
|
}
|
|
[rsssl-tooltip][flow^="left"]:hover::before,
|
|
[rsssl-tooltip][flow^="left"]:hover::after,
|
|
[rsssl-tooltip][flow^="right"]:hover::before,
|
|
[rsssl-tooltip][flow^="right"]:hover::after {
|
|
animation: tooltips-horz 300ms ease-out forwards;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal {
|
|
position: relative;
|
|
position: absolute;
|
|
z-index: 99;
|
|
margin: 0 0 0 20px;
|
|
padding: 10px 15px;
|
|
color: #fff;
|
|
background-color: #f8be2e;
|
|
text-align: left;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal h2 {
|
|
margin-top: -5px;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal:after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 15px;
|
|
border-top: 15px solid transparent;
|
|
border-right: 15px solid black;
|
|
border-left: none;
|
|
border-bottom: 15px solid transparent;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal.rsssl-notice {
|
|
background-color: #f8be2e;
|
|
color: black;
|
|
padding: 20px;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal.rsssl-notice:after {
|
|
border-right: 15px solid #f8be2e;
|
|
top: calc(50% - 15px);
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal.rsssl-success {
|
|
background-color: white;
|
|
color: #61ce70;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal.rsssl-warning {
|
|
color: #333333;
|
|
background-color: #f8be2e;
|
|
border-color: #f8be2e;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal.rsssl-warning:after {
|
|
border-right: 15px solid #f8be2e;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal:empty {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.rsssl-help-warning-wrap .rsssl-help-modal a {
|
|
color: #333;
|
|
}
|
|
a:active,
|
|
a:hover {
|
|
color: #333;
|
|
}
|
|
.multiple-field div {
|
|
margin-top: 8px;
|
|
}
|
|
.multiple-field div:last-child {
|
|
margin-bottom: 8px;
|
|
}
|
|
.rsssl-panel {
|
|
font-size: 13px !important;
|
|
color: #383d41;
|
|
background-color: #F2F2F2;
|
|
border: 1px solid #d6d8db;
|
|
padding: 10px 15px;
|
|
border-radius: 0px;
|
|
margin: 0;
|
|
}
|
|
.rsssl-panel.rsssl-toggle-disabled {
|
|
color: #aca5a5;
|
|
}
|
|
.rsssl-panel.rsssl-deleted {
|
|
background-color: #FFa5aa;
|
|
}
|
|
.rsssl-panel .rsssl-panel-title {
|
|
cursor: pointer;
|
|
}
|
|
.rsssl-panel .rsssl-field > div {
|
|
margin: 10px 0;
|
|
}
|
|
.rsssl-panel .rsssl-multiple-field-validation {
|
|
float: right;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel,
|
|
.rsssl-panel.rsssl-link-panel {
|
|
padding: 0;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-toggle,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-toggle span,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-toggle span {
|
|
padding-left: 10px;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-title,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-title {
|
|
display: grid;
|
|
grid-template-columns: 50% 10% 40%;
|
|
align-items: center;
|
|
padding: 10px 15px 8px 0;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-title span.rsssl-panel-toggle,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-title span.rsssl-panel-toggle {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-title span:last-of-type,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-title span:last-of-type {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.rsssl-panel.rsssl-slide-panel .rsssl-panel-title span:last-of-type svg,
|
|
.rsssl-panel.rsssl-link-panel .rsssl-panel-title span:last-of-type svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
padding-top: 1px;
|
|
}
|
|
.rsssl-panel h1 {
|
|
font-size: 22px;
|
|
}
|
|
.rsssl-panel p {
|
|
font-size: 13px !important;
|
|
}
|
|
.rsssl-panel.rsssl-notice {
|
|
background-color: #fff;
|
|
border: 0;
|
|
color: black;
|
|
padding: 20px 20px 0 20px;
|
|
}
|
|
.rsssl-panel.rsssl-success {
|
|
background-color: white;
|
|
color: #61ce70;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.rsssl-panel.rsssl-warning {
|
|
position: relative;
|
|
color: #333333;
|
|
background-color: #f8be2e;
|
|
border-color: #f8be2e;
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
.rsssl-panel.rsssl-warning:after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 15px;
|
|
border-top: 15px solid transparent;
|
|
border-right: 15px solid black;
|
|
border-left: none;
|
|
border-bottom: 15px solid transparent;
|
|
}
|
|
.rsssl-panel.rsssl-warning:after {
|
|
border-right: 15px solid #f8be2e;
|
|
}
|
|
.rsssl-panel ul {
|
|
list-style-type: disc;
|
|
margin-left: 22px;
|
|
}
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
}
|
|
.rsssl-comment {
|
|
font-size: 11px;
|
|
margin-top: 10px;
|
|
}
|
|
.rsssl-cookie-field .rsssl-cookie-header {
|
|
border-bottom: 1px solid #b6b7b8;
|
|
margin-bottom: 25px;
|
|
}
|
|
#rsssl-send-data input[type=text] {
|
|
width: 60%;
|
|
}
|
|
#rsssl-wizard {
|
|
/*body */
|
|
}
|
|
#rsssl-wizard h1,
|
|
#rsssl-wizard h2,
|
|
#rsssl-wizard h3,
|
|
#rsssl-wizard h4,
|
|
#rsssl-wizard .rsssl-menu-item,
|
|
#rsssl-wizard .rsssl-step-title,
|
|
#rsssl-wizard .rsssl-button {
|
|
font-variant: normal;
|
|
}
|
|
#rsssl-wizard h2,
|
|
#rsssl-wizard h3 {
|
|
font-size: 15px;
|
|
}
|
|
#rsssl-wizard h3 {
|
|
font-weight: 400;
|
|
}
|
|
#rsssl-wizard label {
|
|
font-size: 13px;
|
|
}
|
|
#rsssl-wizard .field-group {
|
|
position: relative;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-field {
|
|
padding: 0 20px 0 20px;
|
|
background-color: white;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-field .rsssl-template-intro {
|
|
margin-top: 15px;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-title-wrap {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
padding-top: 15px;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-label {
|
|
margin-bottom: 10px;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-label label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 15px;
|
|
cursor: default;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-label label .rsssl-label-wrap {
|
|
display: flex;
|
|
margin-top: 15px;
|
|
font-weight: 700;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-label label .rsssl-subtitle-wrap {
|
|
font-size: 0.9em;
|
|
margin: 5px 5px 0 0;
|
|
}
|
|
#rsssl-wizard .field-group.rsssl-editor .rsssl-label {
|
|
margin-bottom: 0;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-field .field-group {
|
|
grid-column: 1;
|
|
display: block;
|
|
}
|
|
#rsssl-wizard .field-group .rsssl-field .rsssl-field {
|
|
padding: 0;
|
|
}
|
|
#rsssl-wizard .rsssl-body,
|
|
#rsssl-wizard #rsssl-content-area {
|
|
/* Styling for the previous and next buttons */
|
|
/* CSS for the sections menu */
|
|
}
|
|
#rsssl-wizard .rsssl-body input[type="text"].rsssl-document-custom-url,
|
|
#rsssl-wizard #rsssl-content-area input[type="text"].rsssl-document-custom-url {
|
|
width: 250px;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-document-custom-url,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-document-custom-url,
|
|
#rsssl-wizard .rsssl-body .rsssl-document-custom-page,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-document-custom-page {
|
|
margin-top: 5px;
|
|
}
|
|
#rsssl-wizard .rsssl-body input.button,
|
|
#rsssl-wizard #rsssl-content-area input.button {
|
|
min-width: 100px;
|
|
}
|
|
#rsssl-wizard .rsssl-body input.button.button-red,
|
|
#rsssl-wizard #rsssl-content-area input.button.button-red {
|
|
background-color: red;
|
|
color: white;
|
|
border-color: red;
|
|
}
|
|
#rsssl-wizard .rsssl-body input.button.button-black,
|
|
#rsssl-wizard #rsssl-content-area input.button.button-black {
|
|
background-color: black;
|
|
color: white;
|
|
border-color: black;
|
|
}
|
|
#rsssl-wizard .rsssl-body input.button.button-link,
|
|
#rsssl-wizard #rsssl-content-area input.button.button-link {
|
|
text-align: center;
|
|
min-width: initial;
|
|
}
|
|
#rsssl-wizard .rsssl-body input.button.button-link:hover,
|
|
#rsssl-wizard #rsssl-content-area input.button.button-link:hover {
|
|
background-color: initial;
|
|
text-decoration: none;
|
|
}
|
|
#rsssl-wizard .rsssl-body button.button-red,
|
|
#rsssl-wizard #rsssl-content-area button.button-red {
|
|
background-color: red;
|
|
color: white;
|
|
border-color: red;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-master-label h2,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-master-label h2 {
|
|
margin: 0;
|
|
padding: 20px 20px 0 0;
|
|
font-size: 18px;
|
|
background-color: white;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-remove,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-remove {
|
|
margin-bottom: 12px;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-menu-item.active i,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-menu-item.active i {
|
|
color: black;
|
|
font-size: 1.35em;
|
|
float: left;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-menu-item.active a,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-menu-item.active a {
|
|
color: #000;
|
|
font-weight: 900;
|
|
padding-left: 7px;
|
|
text-decoration: underline;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-done a,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-done a {
|
|
text-decoration: none;
|
|
color: white;
|
|
font-size: 15px;
|
|
}
|
|
#rsssl-wizard .rsssl-body .rsssl-to-do a,
|
|
#rsssl-wizard #rsssl-content-area .rsssl-to-do a {
|
|
color: white;
|
|
font-size: 15px;
|
|
text-decoration: none;
|
|
opacity: 0.6;
|
|
}
|
|
@media screen and (max-width: 782px) {
|
|
#rsssl-wizard .rsssl-body input,
|
|
#rsssl-wizard #rsssl-content-area input {
|
|
vertical-align: top !important;
|
|
}
|
|
}
|
|
.rsssl-field {
|
|
/* Define the styling of the text input fields */
|
|
}
|
|
.rsssl-field label {
|
|
font-weight: normal;
|
|
margin: 10px 0 2px;
|
|
}
|
|
.rsssl-field .rsssl-color-picker.wp-color-picker {
|
|
margin-top: -11px !important;
|
|
}
|
|
.rsssl-field input[type="text"],
|
|
.rsssl-field input[type="email"],
|
|
.rsssl-field input[type="number"] {
|
|
border-color: #dadada;
|
|
}
|
|
.rsssl-field select {
|
|
border-color: #F1F1F1;
|
|
vertical-align: initial;
|
|
}
|
|
.rsssl-field textarea.validation:invalid,
|
|
.rsssl-field textarea.validation:valid {
|
|
background-position: 0.5% 1.5%;
|
|
border-color: #dadada;
|
|
}
|
|
.rsssl-field textarea {
|
|
min-height: 150px;
|
|
width: 100%;
|
|
}
|
|
.rsssl-field input[type=radio]:checked:before {
|
|
content: "\2022";
|
|
text-indent: -9999px;
|
|
border-radius: 50px;
|
|
font-size: 24px;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: 4px;
|
|
line-height: 16px;
|
|
background-color: #1e8cbe;
|
|
}
|
|
.rsssl-field .rsssl-panel.rsssl-notice {
|
|
padding: 0 0 10px 0;
|
|
}
|
|
.rsssl-field .rsssl-buttons-row-left {
|
|
display: flex;
|
|
align-items: center;
|
|
height: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
.rsssl-field .rsssl-buttons-row-left input,
|
|
.rsssl-field .rsssl-buttons-row-left select,
|
|
.rsssl-field .rsssl-buttons-row-left div {
|
|
margin-right: 20px;
|
|
}
|
|
.rsssl-field button[name=rsssl_add_multiple] {
|
|
margin-top: 20px;
|
|
}
|
|
a.rsssl.button,
|
|
button.rsssl.button,
|
|
input.rsssl.button {
|
|
margin-left: 15px;
|
|
box-shadow: 0 0 0 #fff;
|
|
background-color: #f8be2e;
|
|
color: #fff;
|
|
padding-right: 20px;
|
|
border: 0;
|
|
border-radius: 50px;
|
|
padding-top: 2px;
|
|
}
|
|
a.rsssl.button:hover,
|
|
button.rsssl.button:hover,
|
|
input.rsssl.button:hover {
|
|
background-color: #facd5f;
|
|
color: white;
|
|
}
|
|
a.rsssl.button .fa-angle-right,
|
|
button.rsssl.button .fa-angle-right,
|
|
input.rsssl.button .fa-angle-right {
|
|
font-weight: 900;
|
|
position: absolute;
|
|
font-size: 1.8em;
|
|
margin-top: 1px;
|
|
margin-left: 5px;
|
|
}
|
|
#rsssl-wizard .dashboard .fa-times {
|
|
color: black;
|
|
}
|
|
#rsssl-wizard .dashboard .fa-check {
|
|
color: #f8be2e;
|
|
}
|
|
.rsssl-wizard-menu-menus {
|
|
padding-top: 10px;
|
|
}
|
|
#wpbody-content {
|
|
padding-bottom: 0;
|
|
}
|
|
#wpbody-content .update-nag {
|
|
display: none;
|
|
}
|
|
#wpbody-content .subsubsub {
|
|
display: none;
|
|
}
|
|
.rsssl-wizard-wrap {
|
|
margin: 0;
|
|
}
|
|
/*# sourceMappingURL=wizard.css.map */ |