1234 lines
23 KiB
Plaintext
1234 lines
23 KiB
Plaintext
// out: wizard.css, sourcemap: false, compress: false
|
|
@import '../../../../assets/css/variables.less';
|
|
@brand-primary: @rsp-yellow;
|
|
@brand-secondary: #61ce70;
|
|
@brand-tertiary: #29B6F6;
|
|
@border-radius: 25px;
|
|
@input-background-color: #F1F1F1;
|
|
@input-border-color: #dadada;
|
|
@gray-light: #dadada;
|
|
@gray: #c6c6c6;
|
|
@gray-dark: #888;
|
|
@red-gap: 15px;
|
|
@green-gap: 20px;
|
|
@color-disabled: #F2F2F2;
|
|
|
|
.rsssl-certificate-data {
|
|
right:10000px;
|
|
position:absolute;
|
|
background-color:#fff;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.rsssl-copied-feedback-container{
|
|
padding:@default-padding;
|
|
color:@rsp-green;
|
|
}
|
|
.rsssl-section .rsssl_letsencrypt_container {
|
|
a.button {
|
|
margin-top:15px;
|
|
}
|
|
}
|
|
/**
|
|
* class to add a triangle pointer to each div
|
|
*/
|
|
.rsssl-pointer {
|
|
position:relative;
|
|
&: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;
|
|
//grid-gap: @red-gap;
|
|
|
|
h1 {
|
|
padding: 0;
|
|
}
|
|
|
|
.rsssl-wizard-title {
|
|
padding: @green-gap;
|
|
border-bottom: 1px solid #eeeeee;
|
|
display: flex;
|
|
|
|
h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
|
|
&.rsssl-section-content-notifications-header {
|
|
border-bottom: 1px solid #e6e6e6;
|
|
|
|
h1 {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rsssl-wizard-subtitle h2 {
|
|
margin: @green-gap @green-gap 0 @green-gap;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rsssl-wizard-progress-bar {
|
|
background: #eeeeee;
|
|
height: 15px;
|
|
margin: @green-gap 0 0 0;
|
|
|
|
.rsssl-wizard-progress-bar-value {
|
|
transition: width 0.5s;
|
|
-webkit-transition: width 0.5s;
|
|
height: 100%;
|
|
background: @rsp-green;
|
|
border-radius: 4px;
|
|
&.rsssl-error {
|
|
background-color: @rsp-red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rsssl-priority {
|
|
background-color: #000;
|
|
color:#fff;
|
|
border-color:#000;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.rsssl-wizard-menu {
|
|
background-color: white;
|
|
margin: 0.5 * @green-gap;
|
|
margin-bottom: 0;
|
|
padding-bottom: @green-gap;
|
|
box-shadow: 0 0 5px 5px rgba(222, 222, 222, 0.2);
|
|
|
|
.rsssl-wizard-menu h1 {
|
|
font-weight: bold;
|
|
}
|
|
.rsssl-wizard-progress-bar {
|
|
margin: @green-gap;
|
|
}
|
|
|
|
.rsssl-icon {
|
|
margin:4px 0 0 0;
|
|
}
|
|
|
|
|
|
.rsssl-step {
|
|
.rsssl-step-header {
|
|
&.incomplete a h2 {
|
|
color: @gray;
|
|
}
|
|
|
|
text-decoration: none;
|
|
|
|
a {
|
|
display: inline-block;
|
|
padding: 5px @green-gap;
|
|
text-decoration: none;
|
|
width: calc(100% - (@green-gap + @green-gap));
|
|
|
|
h2 {
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.active a h2 {
|
|
color: @gray !important;
|
|
}
|
|
|
|
&:hover a {
|
|
h2 {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&.active:hover a {
|
|
background: white;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.rsssl-section {
|
|
display: grid;
|
|
grid-template-columns: @green-gap 1fr;
|
|
|
|
span {
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
margin: 0 @green-gap;
|
|
|
|
a {
|
|
h3 {
|
|
color: @gray;
|
|
}
|
|
|
|
&:visited h3 {
|
|
color: initial;
|
|
}
|
|
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
padding: 3px 5px;
|
|
|
|
h3 {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.active a h3 {
|
|
color: grey;
|
|
}
|
|
|
|
&:hover a {
|
|
h3 {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&.active:hover a {
|
|
background: white;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.rsssl-section-content {
|
|
margin: 0.5 * @green-gap;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
p:not(:first-child) {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
form {
|
|
display: grid;
|
|
grid-template-columns: auto 325px;
|
|
grid-column-gap: @red-gap;
|
|
|
|
.rsssl-section-content-title-header {
|
|
background-color: white;
|
|
}
|
|
|
|
.rsssl-wizard-intro, .rsssl-template-intro
|
|
.rsssl-master-label {
|
|
grid-column-start: 1;
|
|
background-color: white;
|
|
padding: @green-gap @green-gap 0 @green-gap;
|
|
}
|
|
|
|
//if an intro is nested in a field, we don't need the padding, as the field already has padding
|
|
.rsssl-field .rsssl-wizard-intro {
|
|
padding: 0 0 @green-gap 0;
|
|
}
|
|
|
|
.rsssl-button {
|
|
background-color: white;
|
|
grid-column-start: 1;
|
|
padding: @green-gap @green-gap 0 @green-gap;
|
|
}
|
|
|
|
.field-group {
|
|
grid-column: span 2;
|
|
display: grid;
|
|
grid-template-columns: auto 325px;
|
|
grid-column-gap: @red-gap;
|
|
|
|
.rsssl-field {
|
|
grid-column-start: 1;
|
|
}
|
|
.rsssl-help-warning-wrap {
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
|
|
.rsssl-section-footer {
|
|
grid-column-start: 1;
|
|
background-color: white;
|
|
padding: @green-gap;
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
|
|
.rsssl-buttons-container {
|
|
grid-column-start: 2;
|
|
|
|
input +input {
|
|
margin-left: @green-gap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#rsssl-wizard {
|
|
|
|
/* ----------- Icons ----------- */
|
|
|
|
.rsssl-icon {
|
|
margin:0 5px;
|
|
width:initial;
|
|
border-radius: 50%;
|
|
&.rsssl-empty {
|
|
visibility:hidden;
|
|
}
|
|
&.rsssl-success {
|
|
color: @brand-primary;
|
|
svg {
|
|
fill: @brand-primary;
|
|
stroke: @brand-primary;
|
|
}
|
|
}
|
|
|
|
&.rsssl-green {
|
|
color: #61ce70;
|
|
svg {
|
|
fill: #61ce70;
|
|
stroke: #61ce70;
|
|
}
|
|
}
|
|
|
|
&.rsssl-disabled {
|
|
color: #ababab;
|
|
svg {
|
|
fill: #ababab;
|
|
stroke: #ababab;
|
|
}
|
|
}
|
|
|
|
&.rsssl-error {
|
|
color: #d7263d;
|
|
svg {
|
|
fill: #d7263d;
|
|
stroke: #d7263d;
|
|
}
|
|
}
|
|
|
|
&.arrow-right-alt2::before {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.rsssl-circle-green {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 12px;
|
|
background-color: #61ce70;
|
|
}
|
|
.rsssl-circle-red {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 12px;
|
|
background-color: #d7263d;
|
|
}
|
|
|
|
/* ----------- Fields ----------- */
|
|
|
|
/* Checkbox */
|
|
|
|
/* Disabled option */
|
|
.rsssl-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.rsssl-checkbox {
|
|
.rsssl-field {
|
|
display: flex;
|
|
align-items: center;
|
|
.rsssl-wizard-settings-text {
|
|
margin-left: 20px;
|
|
margin-top:5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Customize the label (the container) */
|
|
.rsssl-checkbox-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.checkmark {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid @gray-light;
|
|
}
|
|
|
|
/* Checkmark (hidden when not checked) */
|
|
.checkmark svg {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
input:checked ~ .checkmark svg {
|
|
display: block;
|
|
fill: @brand-primary;
|
|
stroke: @brand-primary;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.checkmark svg {
|
|
left: 2.5px;
|
|
top: 2px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* Show the default checkmark when default */
|
|
.checkmark.rsssl-default svg {
|
|
display: block;
|
|
fill: #eee;
|
|
stroke: #eee;
|
|
}
|
|
|
|
/* Disabled option */
|
|
&.rsssl-disabled {
|
|
pointer-events: none;
|
|
.checkmark {
|
|
background-color: #eee;
|
|
svg {
|
|
stroke: #eee !important;
|
|
fill: #eee !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Radio */
|
|
|
|
/* Customize the label (the container) */
|
|
.rsssl-radio-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* Create a custom radio */
|
|
.radiobtn {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 20px;
|
|
border: 1px solid @input-border-color;
|
|
}
|
|
|
|
/* Check icon (hidden when not checked) */
|
|
.radiobtn div {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show check icon when checked */
|
|
input:checked ~ .radiobtn .rsssl-icon {
|
|
display: block;
|
|
background-color: @brand-primary;
|
|
}
|
|
|
|
/* Style the check icon */
|
|
.radiobtn .rsssl-icon {
|
|
left: 5px;
|
|
top: 3px;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Show the default checkmark when default */
|
|
.radiobtn.rsssl-default .rsssl-icon {
|
|
display: block;
|
|
background-color: #eee;
|
|
}
|
|
|
|
/* Disabled option */
|
|
&.rsssl-disabled {
|
|
pointer-events: none;
|
|
.radiobtn {
|
|
background-color: #eee;
|
|
.rsssl-icon {
|
|
background-color: #eee !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Text & Email Validation */
|
|
textarea.validation,
|
|
input[type="text"].validation,
|
|
input[type="password"].validation,
|
|
input[type="email"].validation,
|
|
input[type="text"].rsssl-valid-page,
|
|
input[type="text"].rsssl-deleted-page {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
~ span .rsssl-icon {
|
|
display: block;
|
|
position: absolute;
|
|
padding-left: 7px;
|
|
margin-top: -25px;
|
|
z-index: 1;
|
|
svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea.validation {
|
|
&:invalid ~ span .rsssl-icon,
|
|
&:valid ~ span .rsssl-icon {
|
|
margin-top:-143px;
|
|
}
|
|
}
|
|
|
|
textarea.validation,
|
|
input[type="text"].validation,
|
|
input[type="password"].validation,
|
|
input[type="email"].validation {
|
|
&:valid ~ span .rsssl-failed {
|
|
display: none;
|
|
}
|
|
&:invalid ~ span .rsssl-success {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
input:disabled {
|
|
background-color: @color-disabled;
|
|
}
|
|
|
|
/* Text, Email, Select(2), Textarea Style */
|
|
|
|
input[type="text"], input[type="password"], input[type="email"], select, .select2, textarea, input[type="number"] {
|
|
margin-bottom: 2px;
|
|
}
|
|
textarea {
|
|
padding:10px;
|
|
width:100%;
|
|
height: 100px;
|
|
margin: 20px 0;
|
|
}
|
|
/* Placeholders */
|
|
::placeholder {
|
|
color: @gray-light;
|
|
}
|
|
::placeholder/* Chrome/Opera/Safari */ {
|
|
color: @gray-light;
|
|
}
|
|
|
|
::-moz-placeholder /* Firefox 19+ */ {
|
|
color: @gray-light;
|
|
}
|
|
|
|
:-ms-input-placeholder /* IE 10+ */ {
|
|
color: @gray-light;
|
|
}
|
|
:-moz-placeholder /* Firefox 18- */ {
|
|
color: @gray-light;
|
|
}
|
|
|
|
/* Labels */
|
|
.rsssl-master-label h2 {
|
|
padding: @green-gap @green-gap 0 @green-gap !important;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
}
|
|
|
|
.rsssl-multiple-field-button-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
.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: .3ch;
|
|
box-shadow: 0 1em 2em -.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%, -.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%, .5em);
|
|
}
|
|
|
|
/* FLOW: LEFT */
|
|
[rsssl-tooltip][flow^="left"]::before {
|
|
top: 50%;
|
|
border-right-width: 0;
|
|
border-left-color: #333;
|
|
left: calc(0em - 5px);
|
|
transform: translate(-.5em, -50%);
|
|
}
|
|
|
|
[rsssl-tooltip][flow^="left"]::after {
|
|
top: 50%;
|
|
right: calc(100% + 5px);
|
|
transform: translate(-.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(.5em, -50%);
|
|
}
|
|
|
|
[rsssl-tooltip][flow^="right"]::after {
|
|
top: 50%;
|
|
left: calc(100% + 19px);
|
|
transform: translate(.5em, -50%);
|
|
min-width:300px;
|
|
}
|
|
|
|
/* KEYFRAMES */
|
|
@keyframes tooltips-vert {
|
|
to {
|
|
opacity: .9;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes tooltips-horz {
|
|
to {
|
|
opacity: .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 {
|
|
h2 {
|
|
margin-top:-5px;
|
|
}
|
|
.rsssl-pointer;
|
|
position:absolute;
|
|
z-index:99;
|
|
|
|
&.rsssl-notice {
|
|
background-color: @brand-primary;
|
|
&:after {
|
|
border-right: 15px solid @brand-primary;
|
|
top: calc(50% - 15px);
|
|
}
|
|
color: black;
|
|
padding: @green-gap;
|
|
}
|
|
|
|
&.rsssl-success {
|
|
background-color: white;
|
|
color: #61ce70;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
&.rsssl-warning {
|
|
&:after {
|
|
border-right: 15px solid #f8be2e;
|
|
}
|
|
color: #333333;
|
|
background-color: #f8be2e;
|
|
border-color: #f8be2e;
|
|
}
|
|
|
|
margin: 0 0 0 @green-gap;
|
|
padding: 10px 15px;
|
|
color: #fff;
|
|
background-color: @brand-primary;
|
|
text-align: left;
|
|
|
|
&:empty {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
a {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
a:active, a:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.multiple-field {
|
|
div {
|
|
margin-top: 8px;
|
|
&:last-child {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rsssl-panel {
|
|
&.rsssl-toggle-disabled {
|
|
color: #aca5a5;
|
|
}
|
|
|
|
&.rsssl-deleted {
|
|
background-color: #FFa5aa;
|
|
}
|
|
|
|
.rsssl-panel-title {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rsssl-field > div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.rsssl-multiple-field-validation {
|
|
float: right;
|
|
}
|
|
|
|
&.rsssl-slide-panel,
|
|
&.rsssl-link-panel {
|
|
padding: 0;
|
|
|
|
.rsssl-panel-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.rsssl-panel-title {
|
|
display: grid;
|
|
grid-template-columns: 50% 10% 40%;
|
|
align-items: center;
|
|
|
|
span {
|
|
&.rsssl-panel-toggle {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&:last-of-type {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: flex-end;
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
padding-top: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
padding: 10px 15px 8px 0;
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: 22px;
|
|
}
|
|
font-size: 13px !important;
|
|
p {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
color: #383d41;
|
|
background-color: #F2F2F2;
|
|
border: 1px solid #d6d8db;
|
|
padding: 10px 15px;
|
|
border-radius: 0px;
|
|
margin: 0;
|
|
|
|
&.rsssl-notice {
|
|
background-color: #fff;
|
|
border: 0;
|
|
color: black;
|
|
padding: @green-gap @green-gap 0 @green-gap;
|
|
}
|
|
|
|
&.rsssl-success {
|
|
background-color: white;
|
|
color: #61ce70;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
&.rsssl-warning {
|
|
.rsssl-pointer;
|
|
&:after {
|
|
border-right: 15px solid #f8be2e;
|
|
}
|
|
color: #333333;
|
|
background-color: #f8be2e;
|
|
border-color: #f8be2e;
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
|
|
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 {
|
|
h1, h2, h3, h4, .rsssl-menu-item, .rsssl-step-title, .rsssl-button {
|
|
font-variant: normal;
|
|
}
|
|
h2, h3 {
|
|
font-size:15px;
|
|
}
|
|
h3 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.field-group {
|
|
position: relative;
|
|
|
|
.rsssl-field {
|
|
padding: 0 @green-gap 0 @green-gap;
|
|
background-color: white;
|
|
.rsssl-template-intro {
|
|
margin-top: @red-gap;
|
|
}
|
|
}
|
|
|
|
.rsssl-title-wrap {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
padding-top: @red-gap;
|
|
}
|
|
|
|
.rsssl-label {
|
|
margin-bottom: 10px;
|
|
label {
|
|
display:flex;
|
|
flex-direction: column;
|
|
font-size:15px;
|
|
cursor: default;
|
|
.rsssl-label-wrap {
|
|
display: flex;
|
|
margin-top: @red-gap;
|
|
font-weight: 700;
|
|
}
|
|
.rsssl-subtitle-wrap {
|
|
font-size: 0.9em;
|
|
margin: 5px 5px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
//less margin when it's the editor
|
|
&.rsssl-editor .rsssl-label {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.rsssl-field {
|
|
.field-group {
|
|
grid-column:1;
|
|
display:block;
|
|
}
|
|
.rsssl-field {
|
|
padding:0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*body */
|
|
.rsssl-body, #rsssl-content-area {
|
|
input[type="text"].rsssl-document-custom-url {
|
|
width: 250px;
|
|
}
|
|
|
|
.rsssl-document-custom-url, .rsssl-document-custom-page {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
input.button {
|
|
min-width: 100px;
|
|
&.button-red {
|
|
background-color: red;
|
|
color: white;
|
|
border-color: red;
|
|
}
|
|
&.button-black {
|
|
background-color: black;
|
|
color: white;
|
|
border-color: black;
|
|
}
|
|
&.button-link {
|
|
text-align: center;
|
|
min-width:initial;
|
|
&:hover {
|
|
background-color:initial;
|
|
text-decoration: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
button {
|
|
&.button-red {
|
|
background-color: red;
|
|
color: white;
|
|
border-color: red;
|
|
}
|
|
}
|
|
|
|
/* Styling for the previous and next buttons */
|
|
.rsssl-master-label h2 {
|
|
margin: 0;
|
|
padding: @green-gap @green-gap 0 0;
|
|
font-size: 18px;
|
|
background-color: white;
|
|
}
|
|
|
|
//Add some styling to the remove, rescan and add new cookie buttons to override the default WordPress button styling
|
|
.rsssl-remove {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* CSS for the sections menu */
|
|
.rsssl-menu-item.active {
|
|
i {
|
|
color: black;
|
|
font-size: 1.35em;
|
|
float: left;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
font-weight: 900;
|
|
padding-left: 7px;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.rsssl-done a {
|
|
text-decoration: none;
|
|
color: white;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.rsssl-to-do a {
|
|
color: white;
|
|
font-size: 15px;
|
|
text-decoration: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
//Reset the vertical-align: middle that WordPress applies. The vertical-align middle presses the next and previous icons downwards
|
|
@media screen and (max-width: 782px) {
|
|
input {
|
|
vertical-align: top !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
//Dashboard
|
|
|
|
.rsssl-field {
|
|
/* Define the styling of the text input fields */
|
|
|
|
label {
|
|
font-weight: normal;
|
|
margin: 10px 0 2px;
|
|
}
|
|
.rsssl-color-picker.wp-color-picker {
|
|
margin-top: -11px !important;
|
|
}
|
|
input[type="text"], input[type="email"], input[type="number"] {
|
|
//max-width: 500px;
|
|
border-color: @input-border-color;
|
|
}
|
|
|
|
select {
|
|
border-color: @input-background-color;
|
|
vertical-align: initial;
|
|
}
|
|
|
|
textarea.validation:invalid, textarea.validation:valid {
|
|
background-position: 0.5% 1.5%;
|
|
border-color: @input-border-color;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 150px;
|
|
width:100%;
|
|
}
|
|
|
|
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-panel {
|
|
&.rsssl-notice {
|
|
padding: 0 0 10px 0;
|
|
}
|
|
}
|
|
|
|
.rsssl-buttons-row-left {
|
|
display: flex;
|
|
align-items: center;
|
|
height: auto;
|
|
input, select, div {
|
|
margin-right: 20px;
|
|
}
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button[name=rsssl_add_multiple] {
|
|
margin-top: @green-gap;
|
|
}
|
|
|
|
}
|
|
|
|
//Button styling
|
|
a.rsssl.button, button.rsssl.button, input.rsssl.button {
|
|
margin-left:15px;
|
|
box-shadow: 0 0 0 #fff;
|
|
background-color: @brand-primary;
|
|
color: #fff;
|
|
padding-right: 20px;
|
|
border: 0;
|
|
border-radius: 50px;
|
|
padding-top: 2px;
|
|
|
|
&:hover {
|
|
background-color: lighten(@brand-primary, 10%);
|
|
color: white;
|
|
}
|
|
|
|
.fa-angle-right {
|
|
font-weight: 900;
|
|
position: absolute;
|
|
font-size: 1.8em;
|
|
margin-top: 1px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
//Icon override
|
|
#rsssl-wizard .dashboard {
|
|
.fa-times {
|
|
color: black;
|
|
}
|
|
.fa-check {
|
|
color: @brand-primary;
|
|
}
|
|
}
|
|
|
|
.rsssl-wizard-menu-menus {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#wpbody-content {
|
|
padding-bottom: 0;
|
|
.update-nag {
|
|
display: none;
|
|
}
|
|
.subsubsub {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.rsssl-wizard-wrap {
|
|
margin: 0;
|
|
}
|
|
|
|
|