Initial commit: Atomaste website
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1
Atomaste Reference/public_html/wp-content/plugins/really-simple-ssl/assets/css/admin.min.css
vendored
Normal file
1
Atomaste Reference/public_html/wp-content/plugins/really-simple-ssl/assets/css/admin.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
*
|
||||
* Prefix everything
|
||||
* Name descriptively
|
||||
* Structure radically
|
||||
*
|
||||
* CSS Structure
|
||||
* css/
|
||||
* ├─ admin/
|
||||
* │ ├─ base.scss
|
||||
* │ ├─ layout.scss
|
||||
* │ ├─ modules/
|
||||
* │ │ ├─ modal.scss
|
||||
* │ │ ├─ button.scss
|
||||
* │ │ ├─ modal.scss
|
||||
* │ │ ├─ notices.scss
|
||||
* │ │ ├─ tips-and-tricks.scss
|
||||
* │ │ ├─ etc.....
|
||||
* │ ├─ states.scss
|
||||
* │ ├─ theme.scss
|
||||
* ├─ admin.scss
|
||||
* ├─ admin.min.css
|
||||
* ├─ admin.css
|
||||
* ├─ variables.scss
|
||||
*
|
||||
*/
|
||||
|
||||
@import 'variables.scss';
|
||||
@import 'admin/base.scss';
|
||||
@import 'admin/layout.scss';
|
||||
//@import 'admin/modules/modal.scss';
|
||||
@import 'admin/modules/header.scss';
|
||||
@import 'admin/modules/dashboard.scss';
|
||||
@import 'admin/modules/buttons.scss';
|
||||
@import 'admin/modules/bullets.scss';
|
||||
@import 'admin/modules/icons.scss';
|
||||
@import 'admin/modules/badges.scss';
|
||||
@import 'admin/modules/file-change-detection.scss';
|
||||
@import 'admin/modules/toast/main.scss';
|
||||
@import 'admin/modules/onboarding.scss';
|
||||
@import 'admin/modules/progress.scss';
|
||||
@import 'admin/modules/ssltest.scss';
|
||||
@import "admin/modules/placeholder.scss";
|
||||
@import 'admin/modules/other-plugins.scss';
|
||||
@import 'admin/modules/tips-tricks.scss';
|
||||
@import 'admin/modules/wizard.scss';
|
||||
@import 'admin/modules/wizard/notice.scss';
|
||||
@import 'admin/modules/wizard/menu.scss';
|
||||
@import 'admin/modules/wizard/fields.scss';
|
||||
@import 'admin/modules/wizard/snackbar.scss';
|
||||
@import 'admin/modules/wizard/mixed-content-scan.scss';
|
||||
@import 'admin/modules/wizard/learning-mode.scss';
|
||||
@import 'admin/modules/wizard/letsencrypt.scss';
|
||||
@import 'admin/modules/wizard/permissions-policy.scss';
|
||||
@import 'admin/modules/wizard/vulnerabilities.scss';
|
||||
@import 'admin/modules/notices.scss';
|
||||
@import 'admin/modules/datatables.scss';
|
||||
@import 'admin/modules/new-features.scss';
|
||||
@import 'admin/modules/two-fa.scss';
|
||||
@import 'admin/modules/introcontainer.scss';
|
||||
@import "admin/modules/premium_overlay.scss";
|
||||
@import "admin/modules/xml-rpc.scss";
|
||||
|
||||
//@import 'admin/modules/dark-mode.scss';
|
||||
//@import 'admin/modules/icons.scss';
|
||||
|
||||
|
||||
@import 'admin/modules/animations.scss';
|
||||
@import 'admin/modules/tooltip.scss';
|
||||
//@import 'admin/modules/icons.scss';
|
||||
|
||||
//@import 'admin/modules/suggested-plugins.scss';
|
||||
|
||||
@import 'admin/states.scss';
|
||||
@import 'admin/theme.scss';
|
||||
@@ -0,0 +1,114 @@
|
||||
.rsssl {
|
||||
font-variant-numeric: tabular-nums; // https://css-tricks.com/almanac/properties/f/font-variant-numeric/
|
||||
margin: 0;
|
||||
margin-left: -20px;
|
||||
font-size: var(--rsp-fs-300);
|
||||
box-sizing: border-box;
|
||||
color: var(--rsp-text-color);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@media only screen and ( max-width: $rsp-break-xs) {
|
||||
margin-left: -9px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--rsp-text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rsssl-h0 {
|
||||
font-size: var(--rsp-fs-900);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h1, .rsssl-h1 {
|
||||
font-size: var(--rsp-fs-800);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h2, .rsssl-h2 {
|
||||
font-size: var(--rsp-fs-700);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h3, .rsssl-h3 {
|
||||
font-size: var(--rsp-fs-600);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.0125rem;
|
||||
}
|
||||
|
||||
h4, .rsssl-h4 {
|
||||
font-size: var(--rsp-fs-500);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.0125rem;
|
||||
}
|
||||
|
||||
h5, .rsssl-h5 {
|
||||
font-size: var(--rsp-fs-400);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
h6, .rsssl-h6 {
|
||||
font-size: var(--rsp-fs-300);
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--rsp-text-color);
|
||||
font-weight: 400;
|
||||
font-size: var(--rsp-fs-300);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rsssl-small-text {
|
||||
font-size: var(--rsp-fs-200);
|
||||
line-height: 1.5;
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
//wordpress inserts notices after the first h1 or h2. To prevent breaking layout we insert an empty h1 tag at the start of our page, where WP can insert the notice.
|
||||
.rsssl-notice-hook-element {
|
||||
display: none !important;
|
||||
}
|
||||
.rsssl-divider {
|
||||
width: 1px;
|
||||
height: 1.3rem;
|
||||
background-color: #cccccc;
|
||||
}
|
||||
}
|
||||
// Hide nags from other plugins
|
||||
.error, .notice, .update-nag, .notice-info {
|
||||
&:not(.really-simple-plugins) {
|
||||
display: none !important;
|
||||
}
|
||||
&.really-simple-plugins{
|
||||
margin: var(--rsp-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
.number_full input[type=number] {
|
||||
width: 100% !important;
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
// Silence is golden.
|
||||
@@ -0,0 +1,249 @@
|
||||
/* Grid */
|
||||
.rsssl {
|
||||
.rsssl-header, .rsssl-content-area {
|
||||
max-width: clamp(300px, calc(100% - var(--rsp-grid-gap) * 2), 1600px);
|
||||
margin: 0 auto;
|
||||
@media(max-width: $rsp-break-xxl) {
|
||||
--rsp-grid-gap: var(--rsp-spacing-m);
|
||||
}
|
||||
@media(max-width: $rsp-break-xl) { // 1440px
|
||||
--rsp-grid-gap: var(--rsp-spacing-s);
|
||||
}
|
||||
@media(max-width: $rsp-break-l) { // 1366px
|
||||
--rsp-grid-gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
@media(max-width: $rsp-break-m) { // 1280px
|
||||
}
|
||||
@media(max-width: $rsp-break-s) { // 1080px
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-header-container .rsssl-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: $rsp-break-s) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.rsssl-logo {
|
||||
@media(max-width: $rsp-break-xxs) {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.rsssl-header-left {
|
||||
display: flex;
|
||||
font-size: var(--rsp-fs-400);
|
||||
|
||||
@media(max-width: $rsp-break-s) {
|
||||
justify-content: center;
|
||||
margin: var(--rsp-spacing-xs) 0;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
background-color: var(--rsp-background-block-color);
|
||||
}
|
||||
|
||||
.rsssl-header-menu {
|
||||
margin: auto 15px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
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: $rsp-break-s) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
&.active {
|
||||
border-bottom: 4px solid var(--rsp-brand-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-brand-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-header-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
min-height: 52px;
|
||||
|
||||
select {
|
||||
max-width: 60ch;
|
||||
}
|
||||
@media(max-width: $rsp-break-xxs) {
|
||||
display:none;
|
||||
}
|
||||
@media(max-width: $rsp-break-xs) {
|
||||
.button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rsssl-content-area {
|
||||
margin-top: var(--rsp-grid-gap);
|
||||
}
|
||||
|
||||
.rsssl-header-container {
|
||||
background: var(--rsp-background-block-color);
|
||||
}
|
||||
|
||||
.rsssl-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: max-content;
|
||||
gap: var(--rsp-grid-gap);
|
||||
min-height: calc(100vh - 32px - 80px - 20px - var(--rsp-grid-gap)); //32px = wordpress bar, 80px = cmplz bar, 20px = margin-top, 20px is grid gap
|
||||
&.rsssl-settings, &.rsssl-letsencrypt{
|
||||
grid-template-columns: minmax(235px, max-content) 2fr minmax(min-content, 1fr);
|
||||
@media only screen and ( max-width: $rsp-break-s) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.rsssl-wizard-menu, .rsssl-wizard-settings, .rsssl-wizard-help {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and ( max-width: $rsp-break-m) {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: $rsp-break-s) {
|
||||
max-width:790px;
|
||||
width: calc(100% - var(--rsp-grid-gap) * 2)
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-grid-item {
|
||||
@include rsssl-block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
flex-basis: 100%;
|
||||
//min-height: 200px;//seems odd for blocks with only one item: lots of white space
|
||||
grid-column: span 1;
|
||||
grid-row: span 1;
|
||||
&.rsssl-disabled {
|
||||
min-height:320px;//add min height on disabled so the settings is visible behind the locked div.
|
||||
}
|
||||
&.rsssl-two_fa_users {
|
||||
.rsssl-grid-item-content {
|
||||
.rsssl-field-wrap {
|
||||
margin-top: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
&.no-background {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.rsssl-column-2 {
|
||||
grid-column: span 2;
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.rsssl-row-2 {
|
||||
grid-row: span 2;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: calc(30px + var(--rsp-spacing-s) * 2);
|
||||
@include rsssl-block-padding;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 4px 0 4px 0;
|
||||
}
|
||||
|
||||
&-controls {
|
||||
font-size: var(--rsp-fs-200);
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-s);
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex-grow: 100;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include rsssl-inline-block-padding;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-self: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--rsp-grid-margin);
|
||||
width: 100%;
|
||||
min-height: calc(30px + var(--rsp-spacing-s) * 2);
|
||||
box-sizing: border-box;
|
||||
@include rsssl-block-padding;
|
||||
.rsssl-legend {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-flex-push-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.rsssl-flex-push-left {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* Accordeon */
|
||||
|
||||
.rsssl-accordeon {
|
||||
/* Basic styling for the accordion container */
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__header {
|
||||
/* Styling for the accordion header */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__header__inner {
|
||||
/* Styling for the inner container of the header */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__header__icon {
|
||||
/* You can set a background-image or other styling here for the icon */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__header__title {
|
||||
/* Styling for the title text */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__header__button__inner {
|
||||
/* Styling for the button inside the header */
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rsssl-accordeon__content {
|
||||
/* By default, hide the content */
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.rsssl-accordeon--open .rsssl-accordeon__content {
|
||||
/* When the accordion is open, show the content */
|
||||
max-height: 300px; /* You may need to adjust this value */
|
||||
}
|
||||
|
||||
.rsssl-accordeon__content__inner {
|
||||
/* Basic styling for the inner content container */
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.rsssl {
|
||||
.rsssl-badge {
|
||||
--badge-height: 20px;
|
||||
height: var(--badge-height);
|
||||
line-height: var(--badge-height);
|
||||
padding-inline: 8px;
|
||||
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
color: var(--rsp-white);
|
||||
display: table;
|
||||
margin: auto auto;
|
||||
font-size: var(--rsp-fs-100);
|
||||
|
||||
&.rsp-dark {
|
||||
background-color: var(--rsp-black);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-low {
|
||||
background-color: var(--rsp-yellow-faded);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-medium {
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-high {
|
||||
background-color: var(--rsp-red-faded);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-critical {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-success {
|
||||
background-color: var(--rsp-color-success);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-default {
|
||||
background-color: var(--rsp-grey-200);
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-badge-large {
|
||||
--badge-height: 28px;
|
||||
height: var(--badge-height);
|
||||
line-height: var(--badge-height);
|
||||
padding: 0 10px;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
color: var(--rsp-white);
|
||||
display: table;
|
||||
margin: auto auto;
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 400;
|
||||
|
||||
&.rsp-dark {
|
||||
background-color: var(--rsp-black);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-risk-level-l {
|
||||
background-color: var(--rsp-yellow-faded);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-risk-level-m {
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-risk-level-h {
|
||||
background-color: var(--rsp-red-faded);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsp-risk-level-c {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-success {
|
||||
background-color: var(--rsp-color-success);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
&.rsp-default {
|
||||
background-color: var(--rsp-grey-200);
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.rsssl{
|
||||
// rsssl bullets
|
||||
.rsssl-bullet {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
flex: 0 0 13px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background-color: var(--rsp-grey-300);
|
||||
&.rsp-yellow {
|
||||
background-color: var(--rsp-yellow);
|
||||
}
|
||||
|
||||
&.rsp-blue {
|
||||
background-color: var(--rsp-blue);
|
||||
}
|
||||
|
||||
&.rsp-pink {
|
||||
background-color: var(--rsp-pink);
|
||||
}
|
||||
|
||||
&.rsp-red, &.rsssl-bullet-error {
|
||||
background-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
&.rsp-green, &.rsssl-bullet-success {
|
||||
background-color: var(--rsp-green);
|
||||
}
|
||||
&.rsp-blue-yellow {
|
||||
background: var(--rsp-blue);
|
||||
background: linear-gradient(77deg, rgba(0,159,255, 1) 0%, rgba(0,159,255, 1) 30%, rgba(244, 191, 62, 1) 70%, rgba(244, 191, 62, 1) 100%);
|
||||
animation: gradient 2s ease infinite;
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
}
|
||||
.rsssl-legend{
|
||||
display: flex;
|
||||
|
||||
width: max-content;
|
||||
color: var(--rsp-text-color-light);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
text-decoration: none;
|
||||
&:first-of-type{
|
||||
margin-left: auto;
|
||||
}
|
||||
.rsssl-progress-footer-link {
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
.rsssl {
|
||||
.rsssl-field-button {
|
||||
button.button {
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
a.button, button.button, input.button, span.button {
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 10px;
|
||||
|
||||
&.button-secondary, &.button-default {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rsssl-icon {
|
||||
padding-top: 7px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
&.button-black {
|
||||
border: 1px solid var(--rsp-black);
|
||||
background: var(--rsp-black);
|
||||
color: var(--rsp-text-color-white);
|
||||
|
||||
//&:hover, &:focus, &:active {
|
||||
// box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--rsp-black);
|
||||
//}
|
||||
}
|
||||
|
||||
&.button-tertiary, &.button-red {
|
||||
border: 0 solid transparent;
|
||||
background: var(--rsp-red);
|
||||
color: var(--rsp-text-color-white);
|
||||
|
||||
//&:hover, &:focus, &: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);
|
||||
//}
|
||||
}
|
||||
|
||||
&.button-primary {
|
||||
// We disable all hover effects for the primary button as wel as active and focus
|
||||
// This is to ensure that the primary button is always the same color
|
||||
// and does not change on hover, focus or active
|
||||
&:hover, &:focus, &:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
// We disable all hover effects for the secondary button as wel as active and focus
|
||||
// This is to ensure that the secondary button is always the same color
|
||||
// and does not change on hover, focus or active
|
||||
&:hover, &:focus, &:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl {
|
||||
a.rsssl-button-small, button.rsssl-button-small, input.rsssl-button-small {
|
||||
font-size: var(--rsp-fs-100);
|
||||
font-weight: 300;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
//on the dashboard, keep a minimum distance between two buttons
|
||||
.rsssl-button-small + .rsssl-button-small {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Documents overview */
|
||||
.rsssl-shortcode {
|
||||
right: 10000px;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shortcode {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rsssl-action-buttons {
|
||||
/* Making sure we use the full width of the container */
|
||||
//display: flex;
|
||||
//justify-content: flex-end;
|
||||
}
|
||||
|
||||
.rsssl-action-buttons__inner {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rsssl-action-buttons__button {
|
||||
//add some spacing between the buttons
|
||||
}
|
||||
|
||||
/* Remove margin for the last button to ensure clean alignment */
|
||||
.rsssl-action-buttons__inner:last-child {
|
||||
//margin-right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
For the mixed content scan we need to do some extra tweaking
|
||||
*/
|
||||
.rsssl-mixed-content-scan {
|
||||
.rsssl-grid-item-content-footer {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 25px;
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.components-toggle-control {
|
||||
margin-top: calc(12px);
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
.rsssl {
|
||||
&-grid{
|
||||
.border-to-border {
|
||||
.rsssl-grid-item-content {
|
||||
padding: 0;
|
||||
|
||||
& > * {
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-to-border.rsssl-ssllabs, .border-to-border.rsssl-wpvul {
|
||||
.rsssl-grid-item-content {
|
||||
|
||||
& > * {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-wpvul {
|
||||
.rsssl-icon {
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
.rsssl-ssl-labs, .rsssl-hardening {
|
||||
&-select {
|
||||
background: var(--rsp-grey-200);
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
padding-block: var(--rsp-spacing-m);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: calc(50% - var(--rsp-spacing-s) / 2) calc(50% - var(--rsp-spacing-s) / 2);
|
||||
gap: var(--rsp-spacing-s);
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
|
||||
&.rsssl-error {
|
||||
background: var(--rsp-red-faded);
|
||||
}
|
||||
|
||||
&.rsssl-warning {
|
||||
background: var(--rsp-yellow-faded);
|
||||
}
|
||||
|
||||
&.rsssl-success {
|
||||
background: var(--rsp-green-faded);
|
||||
}
|
||||
|
||||
&-item {
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-block: var(--rsp-spacing-s);
|
||||
justify-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--rsp-white);
|
||||
min-height: 118px;
|
||||
|
||||
&.active {
|
||||
box-shadow: inset 0 0 3px 2px var(--rsp-green-faded);
|
||||
border: 2px solid var(--rsp-green);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
font-weight: 800;
|
||||
&.big-number{
|
||||
font-size: var(--rsp-fs-850);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
justify-content: center;
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: flex-start;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
|
||||
&:nth-of-type(even) {
|
||||
background: var(--rsp-grey-200);
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&-number {
|
||||
font-weight: 600;
|
||||
}
|
||||
.rsssl-icon{
|
||||
align-items: start;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-ssl-labs {
|
||||
&-select {
|
||||
&-item{
|
||||
padding-inline: var(--rsp-spacing-s);
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
}
|
||||
.rsssl-score-snippet {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding-inline: var(--rsp-spacing-xxs);
|
||||
font-size: var(--rsp-fs-100);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
color: var(--rsp-text-color);
|
||||
text-align: left;
|
||||
&.rsssl-hover {
|
||||
height:initial;
|
||||
//white-space: nowrap;
|
||||
line-height:initial;
|
||||
}
|
||||
|
||||
&.rsssl-test-inactive {
|
||||
background-color: var(--rsp-grey-200);
|
||||
color: var(--rsp-color-disabled);
|
||||
}
|
||||
|
||||
&.rsssl-test-processing {
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsssl-test-success {
|
||||
background-color: var(--rsp-color-success);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
|
||||
&.rsssl-test-error {
|
||||
background-color: var(--rsp-brand-primary);
|
||||
color: var(--rsp-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-hardening {
|
||||
&-select {
|
||||
&-item {
|
||||
.rsssl-badge{
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-gridblock-progress-container {
|
||||
&.rsssl-error {
|
||||
.rsssl-gridblock-progress {
|
||||
background: var(--rsp-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.rsssl-inactive {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: var(--rsp-grey-300);
|
||||
|
||||
.rsssl-gridblock-progress {
|
||||
transition: width 1s ease-in-out;
|
||||
background: var(--rsp-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
.rsssl-404_blocking, .rsssl-user_agents,.rsssl-content_security_policy_source_directives,
|
||||
.rsssl-firewall_block_list_listing, .rsssl-vulnerabilities-measures-overview, .rsssl-two_fa_users,
|
||||
.rsssl-firewall_list_listing, .rsssl-vulnerabilities_overview, .rsssl-permissions_policy, .rsssl-firewall_white_list_listing,
|
||||
.rsssl-firewall_logs_content, .rsssl-limit_login_attempts_country, .rsssl-limit_login_attempts_users,
|
||||
.rsssl-limit_login_attempts_event_log, .rsssl-mixed-content-scan, .rsssl-limit_login_attempts_ip_address,
|
||||
.rsssl-content_security_policy, .rsssl-hardening-xml {
|
||||
|
||||
.rsssl-field-wrap {
|
||||
//wp-core also adds an svg for the select dropdown, so we hide the one from the react datatables component
|
||||
nav.rdt_Pagination > div > svg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rsssl-search-bar {
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rsssl-search-bar__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.rsssl-search-bar__inner:focus-within {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rsssl-search-bar__icon {
|
||||
/* Add styles for the search icon */
|
||||
}
|
||||
|
||||
.rsssl-search-bar__input {
|
||||
width: 150px; /* Adjust width as needed */
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.rsssl-search-bar__input:focus {
|
||||
width: 200px; /* Adjust width as needed */
|
||||
}
|
||||
|
||||
.rsssl-container {
|
||||
padding: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rsssl-multiselect-datatable-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
Justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 1em 2em;
|
||||
background: var(--rsp-blue-faded);
|
||||
}
|
||||
|
||||
.rdt_TableRow .rdt_TableCell:last-child {
|
||||
min-width: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.rdt_TableRow .rdt_TableCell:last-child button,
|
||||
.rdt_TableRow .rdt_TableCell:last-child span {
|
||||
min-width: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.rdt_TableCol, .rdt_TableCell, .rdt_TableCol_Sortable {
|
||||
//all text to the left
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#cell-2-force_update > div > select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#cell-2-quarantine > div > select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.rdt_TableCol:first-child, .rdt_TableCell:first-child {
|
||||
min-width: initial;
|
||||
}
|
||||
|
||||
.rdt_TableHeadRow {
|
||||
.rdt_TableCol:last-child {
|
||||
flex-grow: 0;
|
||||
flex-direction: row-reverse;
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.rdt_TableRow {
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--rsp-grey-200)
|
||||
}
|
||||
|
||||
padding: var(--rsp-spacing-xs) 0;
|
||||
|
||||
.rdt_TableCell:last-child {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
//.rsssl-status-allowed, .rsssl-status-revoked {
|
||||
// min-width: 110px;
|
||||
// margin-right: 10px;
|
||||
//}
|
||||
}
|
||||
|
||||
.rsssl-csp-revoked > div:nth-child(-n+3) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-content_security_policy, .rsssl-permissions_policy, .rsssl-field-wrap {
|
||||
.rdt_TableHeadRow {
|
||||
.rdt_TableCol:last-child {
|
||||
flex-grow: 0;
|
||||
min-width: initial;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rdt_TableRow {
|
||||
.rdt_TableCell:last-child {
|
||||
flex-grow: 0;
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-csp-revoked > div:nth-child(-n+3) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
|
||||
.rsssl-content_security_policy, .rsssl-xml_rpc {
|
||||
.rsssl-field-wrap > div > div {
|
||||
overflow-x: inherit;
|
||||
overflow-y: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-mixed-content-datatable {
|
||||
& > div > div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.rsssl-vulnerabilities_measures {
|
||||
.rdt_TableRow .rdt_TableCell:nth-child(3) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-vulnerabilities_measures, .rsssl-404_blocking, .rsssl-user_agents, .rsssl-firewall_logs, .rsssl-permissions_policy, .rsssl-two_fa_users,
|
||||
.rsssl-vulnerabilities-measures-overview, .rsssl-content_security_policy_source_directives,
|
||||
.rsssl-firewall_white_list_listing, .rsssl-firewall_block_list_listing, .rsssl-firewall_list_listing,
|
||||
.rsssl-vulnerabilities_overview, .rsssl-limit_login_attempts_country, .rsssl-limit_login_attempts_users,
|
||||
.rsssl-firewall_event_log_viewer, .rsssl-firewall_logs_content, .rsssl-limit_login_attempts_event_log,
|
||||
.rsssl-mixed-content-scan, .rsssl-limit_login_attempts_ip_address, .rsssl-content_security_policy, .rsssl-hardening-xml {
|
||||
.rsssl-field-wrap {
|
||||
margin-left: CALC(-1 * var(--rsp-spacing-l));
|
||||
margin-right: CALC(-1 * var(--rsp-spacing-l));
|
||||
@media(max-width: $rsp-break-m) { // 1280px
|
||||
margin-left: CALC(-1 * var(--rsp-spacing-m));
|
||||
margin-right: CALC(-1 * var(--rsp-spacing-m));
|
||||
}
|
||||
@media(max-width: $rsp-break-s) { // 1280px
|
||||
margin-left: CALC(-1 * var(--rsp-spacing-s));
|
||||
margin-right: CALC(-1 * var(--rsp-spacing-s));
|
||||
}
|
||||
//should be s on <1280px
|
||||
> .components-base-control, .rsssl-comment,
|
||||
//.rsssl-grid-item-content-footer,
|
||||
.rsssl-progress-container,
|
||||
> div > button,
|
||||
.rsssl-learning-mode-footer,
|
||||
.rsssl-mixed-content-description,
|
||||
.rsssl-current-scan-action {
|
||||
margin-left: var(--rsp-spacing-l);
|
||||
margin-right: var(--rsp-spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.rdt_TableCell, .rdt_TableCol {
|
||||
&:first-child {
|
||||
padding-left: var(--rsp-spacing-l);
|
||||
padding-right: var(--rsp-spacing-l);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: var(--rsp-spacing-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Section for EdgeCases and other specific styling */
|
||||
/* EdgeCase: EventLog */
|
||||
.rsssl-content_security_policy,
|
||||
.rsssl-permissions_policy,
|
||||
.rsssl-firewall_list_listing,
|
||||
.rsssl-user_agents,
|
||||
.rsssl-404_blocking,
|
||||
.rsssl-firewall_white_list_listing,
|
||||
.rsssl-firewall_block_list_listing,
|
||||
.rsssl-hardening-xml,
|
||||
.rsssl-vulnerabilities_overview,
|
||||
.rsssl-content_security_policy_source_directives,
|
||||
.rsssl-vulnerabilities-measures-overview,
|
||||
.rsssl-limit_login_attempts_ip_address,
|
||||
.rsssl-limit_login_attempts_users,
|
||||
.rsssl-limit_login_attempts_country,
|
||||
.rsssl-two_fa_users,
|
||||
.rsssl-firewall_logs,
|
||||
.rsssl-firewall_logs_content,
|
||||
.rsssl-limit_login_attempts_event_log {
|
||||
//first off we remove the min-width from table cell and table col
|
||||
.rdt_TableCell, .rdt_TableCol {
|
||||
min-width: initial;
|
||||
}
|
||||
|
||||
.rdt_Pagination {
|
||||
margin-top: 0;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.rdt_tableCell {
|
||||
&:has(div > .rsssl-action-buttons) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-container, .rdt_TableRow {
|
||||
//Horizontal padding;
|
||||
// padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
|
||||
}
|
||||
|
||||
.rsssl-field-wrap {
|
||||
padding: 0;
|
||||
|
||||
.rdt_TableHeadRow {
|
||||
// Somehow the default for the last child is to make it small, well we dont want that.
|
||||
.rdt_TableCol:last-child {
|
||||
//we calculate the remaining width of the table and set it to the last column
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rdt_TableHeadRow {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.rdt_Pagination {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.rdt_TableBody {
|
||||
.rdt_TableRow {
|
||||
border: none;
|
||||
.rdt_TableCell:last-child {
|
||||
//we calculate the remaining width of the table and set it to the last column
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//This is for the Expandable rows in the table
|
||||
.rdt_Expanding {
|
||||
.rdt_TableRow {
|
||||
.rdt_TableCell:first-child {
|
||||
//we remove all padding
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//This is for the multiselect table
|
||||
.rdt_TableRow {
|
||||
.rdt_TableCell:first-child {
|
||||
//we remove all padding
|
||||
padding: 0 25px;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-learning-mode-delete {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// in the tableCell we remove all previous styling of the last child
|
||||
.rdt_TableCell:last-child {
|
||||
div {
|
||||
width: 100%;
|
||||
|
||||
button, a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-limit_login_attempts_event_log, .rsssl-firewall_logs_content {
|
||||
// making sure the last child of the tablehead is positioned to the left
|
||||
.rdt_TableHeadRow {
|
||||
.rdt_TableCol:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-vulnerabilities-measures-overview {
|
||||
.allowRowEvents {
|
||||
overflow: visible !important;
|
||||
.wp-core-ui select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
white-space: initial !important;
|
||||
}
|
||||
|
||||
.rdt_TableCell {
|
||||
&:nth-child(2) {
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
///* EdgeCase: CountryTable */
|
||||
//.rsssl-vulnerabilities_measures {
|
||||
// .rdt_TableCell {
|
||||
// &:nth-child(2) {
|
||||
// select {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
///* EdgeCase: hardening-xml */
|
||||
//.rsssl-hardening-xml {
|
||||
//
|
||||
// .rdt_Table {
|
||||
// height: 300px;
|
||||
// align-items: initial;
|
||||
//
|
||||
// div:nth-child(2) {
|
||||
// align-items: baseline;
|
||||
// }
|
||||
//
|
||||
// }
|
||||
//
|
||||
// .rdt_TableHead {
|
||||
// padding-bottom: 10px;
|
||||
// }
|
||||
//
|
||||
// .rdt_TableCol:first-child {
|
||||
// padding: 0 25px !important;
|
||||
// }
|
||||
//
|
||||
// .rdt_TableCell:last-child {
|
||||
// padding: 0 25px !important;
|
||||
// }
|
||||
//
|
||||
// .rdt_TableRow .rdt_TableCell:last-child {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
// }
|
||||
//}
|
||||
|
||||
/* EdgeCase: Permission_Policy */
|
||||
.rsssl-content_security_policy, .rsssl-permissions_policy {
|
||||
.rdt_TableCol {
|
||||
&:last-child {
|
||||
//we calculate the remaining width of the table and set it to the last column
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rdt_TableCell {
|
||||
&:last-child {
|
||||
//we calculate the remaining width of the table and set it to the last column
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-vulnerabilities-measures-overview {
|
||||
.rdt_TableRow .rdt_TableCell:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
//For the shields
|
||||
.rsssl-content_security_policy_source_directives:has(.rsssl-shield-overlay) {
|
||||
min-height: 250px;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.dKzMcW, .fcbkgN {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.rsssl-exclude-button {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.rsssl-exclude-button {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.rsssl-header-container .rsssl-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
margin: auto 0;
|
||||
height: 26px;
|
||||
}
|
||||
.rsssl-header-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
.rsssl-header-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.rsssl-header-menu-item-active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
select {
|
||||
max-width: 60ch;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.rsssl-icon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> div {
|
||||
display:flex;
|
||||
}
|
||||
svg{
|
||||
fill: currentColor;
|
||||
}
|
||||
&-loading svg{
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
&.rsssl-click-animation{
|
||||
animation: beat 0.4s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
//loaders in buttons
|
||||
button.button .cmplz-icon.rsssl-icon-loading {
|
||||
padding-top: 6px;
|
||||
>div {line-height: inherit;}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.rsssl-modal {
|
||||
|
||||
//.rsssl-modal-header, .components-modal__header {
|
||||
// background-color: var(--rsp-yellow-faded);
|
||||
// padding: var(--rsp-spacing-m) var(--rsp-spacing-m)!important;
|
||||
// //no border radius on bottom
|
||||
// border-bottom-left-radius: 0;
|
||||
// border-bottom-right-radius: 0;
|
||||
// border-bottom: 0;
|
||||
//}
|
||||
//
|
||||
//.components-modal__content {
|
||||
// padding: 0;
|
||||
// &:before {
|
||||
// margin-bottom:initial;
|
||||
// }
|
||||
//}
|
||||
|
||||
//.rsssl-header-extension {
|
||||
// background-color: var(--rsp-yellow-faded);
|
||||
// margin: 0;
|
||||
// padding: 0 var(--rsp-spacing-m);
|
||||
// p {
|
||||
// margin: 0;
|
||||
// padding: var(--rsp-spacing-m) 0;
|
||||
// padding-top: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
.rsssl-intro-logo {
|
||||
width: 7em;
|
||||
position: absolute;
|
||||
right: 1.6em;
|
||||
height: auto;
|
||||
bottom: 0.15em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rsssl-intro-logo {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-ssl-intro-container {
|
||||
.rsssl-details {
|
||||
display:flex;
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-m);
|
||||
gap: var(--rsp-spacing-xs);
|
||||
.rsssl-icon {
|
||||
min-width:25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-modal-footer {
|
||||
padding: var(--rsp-spacing-m) var(--rsp-spacing-m);
|
||||
}
|
||||
|
||||
/* spinner for React Icons */
|
||||
.icon-spin {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
//.rsssl-modal-backdrop {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background-color: rgba(0, 0, 0, 0.6);
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// z-index: 12; //higher than rsssl-locked
|
||||
//}
|
||||
//
|
||||
//.rsssl-modal {
|
||||
// width: clamp(300px, 75ch, 100vw - 50px);
|
||||
// height: max-content;
|
||||
// position: absolute;
|
||||
// z-index: 9999;//ensure the modal is over the WP menu in the sidebar.
|
||||
// border-radius: var(--rsp-border-radius);
|
||||
// background-color: var(--rsp-white);
|
||||
// top: 25vh;
|
||||
// left: -20px;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// /* transform: translate(-50%, -50%); */
|
||||
// margin: 25px auto;
|
||||
//
|
||||
// &-header {
|
||||
// @include rsssl-block-padding;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
// border-radius: var(--rsp-border-radius);
|
||||
// .modal-title {
|
||||
// margin: 0;
|
||||
// }
|
||||
// .rsssl-modal-close {
|
||||
// cursor: pointer;
|
||||
// background: none;
|
||||
// border: none;
|
||||
// font-weight: 700;
|
||||
// }
|
||||
// button {
|
||||
// img {
|
||||
// height: 16px;
|
||||
// width: 16px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-content {
|
||||
// position: relative;
|
||||
// font-size: var(--rsp-fs-300);
|
||||
// line-height: 1.5;
|
||||
// @include rsssl-block-padding;
|
||||
// &-subtitle {
|
||||
// font-size: var(--rsp-fs-600);
|
||||
// font-weight: 600;
|
||||
// margin-bottom: var(--rsp-spacing-xs);
|
||||
// }
|
||||
// &-description {
|
||||
// overflow-wrap: anywhere;
|
||||
// margin-top: 0;
|
||||
// font-weight: 400;
|
||||
// line-height: 1.5;
|
||||
// margin-bottom: var(--rsp-spacing-s);
|
||||
// }
|
||||
// }
|
||||
// &-footer {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// @include rsssl-block-padding;
|
||||
// gap:10px;
|
||||
// // text-align: right;
|
||||
// .button {
|
||||
// display: flex;
|
||||
// align-items: flex-start;
|
||||
// justify-content: center;
|
||||
// min-width: 105px;
|
||||
//
|
||||
// //height: 45px;
|
||||
// //width: 100%;
|
||||
// text-align: center;
|
||||
// // margin-right: 20px;
|
||||
// border-radius: 6px;
|
||||
// }
|
||||
//
|
||||
// .rsssl-button-help {
|
||||
// background-color: #D7263D;
|
||||
// color: white;
|
||||
// border-color: #D7263D;
|
||||
// &:hover {
|
||||
// opacity: 0.9;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
////this has to apply both to modal and LE activation step
|
||||
//.rsssl-modal-content-step {
|
||||
//
|
||||
// ul{
|
||||
// margin-bottom: var(--rsp-spacing-m);
|
||||
// li {
|
||||
// display: flex;
|
||||
// align-items: flex-start;
|
||||
// margin-bottom: var(--rsp-spacing-xxs);
|
||||
// &.rsssl-is-plugin{
|
||||
// background-color: var(--rsp-grey-100);
|
||||
// border: none;
|
||||
// margin: 10px 0 0 0;
|
||||
// padding:2px 0;
|
||||
// position:relative;
|
||||
// a.button-default.rsssl-read-more{
|
||||
// position:absolute;
|
||||
// display:none;
|
||||
// top:17px;
|
||||
// right:20px;
|
||||
// z-index:5;
|
||||
// @media(max-width: 620px) {
|
||||
// position:relative;
|
||||
// margin-left:20px;
|
||||
// z-index:5;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .rsssl-icon{
|
||||
// margin-right:7px;
|
||||
// }
|
||||
//
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.components-modal__frame {
|
||||
// width: clamp(300px, 75ch, 100vw - 50px);
|
||||
//}
|
||||
@@ -0,0 +1,35 @@
|
||||
.rsssl{
|
||||
.rsssl-new-features-block{
|
||||
.rsssl-grid-item-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.rsssl-new-features{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
@media only screen and (max-width: $rsp-break-xxl) and (min-width: $rsp-break-m) {
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
}
|
||||
.rsssl-new-feature{
|
||||
width: 100%;
|
||||
color: var(--rsp-text-color-light);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
text-decoration: none;
|
||||
.rsssl-icon{
|
||||
margin-top: 2px;
|
||||
}
|
||||
.rsssl-new-feature-desc {
|
||||
p {
|
||||
font-size:var(--rsp-fs-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/**
|
||||
Admin notice
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
.rsssl-modal.rsssl-onboarding {
|
||||
width: clamp(300px, 100ch, 100vw );
|
||||
padding-top: var(--rsp-spacing-m);
|
||||
line-height: 2.2;
|
||||
min-height:295px;
|
||||
.rsssl-logo {
|
||||
height: 26px;
|
||||
}
|
||||
.rsssl-modal-content{
|
||||
display:flex;
|
||||
min-height:295px;
|
||||
.rsssl-onboarding-placeholder {
|
||||
flex-grow:1
|
||||
}
|
||||
&-step {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
}
|
||||
.rsssl-processing {
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
ul{
|
||||
li {
|
||||
.rsssl-icon{
|
||||
margin-top: 7px;
|
||||
}
|
||||
.components-button.is-link {
|
||||
padding:5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.rsssl {
|
||||
.rsssl-other-plugins {
|
||||
.rsssl-placeholder {
|
||||
background-color:transparent;
|
||||
}
|
||||
.rsp-logo img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-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) {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rsssl-other-plugins-element {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
--rsp-other-plugins-color: var(---rsp-brand-primary);
|
||||
|
||||
&.rsssl-zip-recipes {
|
||||
--rsp-other-plugins-color: var(--rsp-pink);
|
||||
}
|
||||
|
||||
&.rsssl-complianz-gdpr {
|
||||
--rsp-other-plugins-color: var(--rsp-blue);
|
||||
}
|
||||
|
||||
&.rsssl-complianz-terms-conditions {
|
||||
--rsp-other-plugins-color: var(--rsp-black);
|
||||
}
|
||||
|
||||
&.rsssl-really-simple-ssl {
|
||||
--rsp-other-plugins-color: var(--rsp-yellow);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-other-plugins-color);
|
||||
text-decoration: underline;
|
||||
|
||||
.rsssl-bullet {
|
||||
background-color: var(--rsp-other-plugins-color);
|
||||
}
|
||||
|
||||
.rsssl-other-plugins-content {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-bullet {
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--rsp-other-plugins-color);
|
||||
}
|
||||
|
||||
.rsssl-other-plugins-content {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rsssl-other-plugin-status {
|
||||
min-width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
@function randomNum($min, $max) {
|
||||
$rand: random();
|
||||
$randomNum: $min + floor($rand * (($max - $min) + 1));
|
||||
|
||||
@return $randomNum;
|
||||
}
|
||||
|
||||
$base-color: #ddd;
|
||||
$shine-color: #e8e8e8;
|
||||
$animation-duration: 1.6s;
|
||||
@mixin background-gradient {
|
||||
background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
|
||||
background-size: 600px;
|
||||
}
|
||||
.rsssl-datatable-placeholder {
|
||||
div {
|
||||
background-color:var(--rsp-grey-300);
|
||||
height:25px;
|
||||
&:nth-child(even) {
|
||||
background-color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-rest-error-message {
|
||||
margin:30px;
|
||||
ul {
|
||||
list-style:disc;
|
||||
margin:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-placeholder {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding-bottom: 24px;
|
||||
color: #1e1e1e;
|
||||
-moz-font-smoothing: subpixel-antialiased;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
border-radius: 2px;
|
||||
& {
|
||||
flex-grow: 100;
|
||||
}
|
||||
|
||||
.rsssl-placeholder-line {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: 12px;
|
||||
border-radius: 7px;
|
||||
&:last-of-type{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
animation: shine-lines $animation-duration infinite linear;
|
||||
@include background-gradient;
|
||||
@for $i from 1 through 20 {
|
||||
&:nth-of-type( #{$i} ) {
|
||||
width: ( random(40) + 60 ) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-placeholder-line ~ .rsssl-placeholder-line {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
}
|
||||
.rsssl-dashboard-placeholder {
|
||||
&.rsssl-grid-item.rsssl-row-2 {
|
||||
grid-row: span 1;
|
||||
}
|
||||
}
|
||||
.rsssl-settings-placeholder {
|
||||
.rsssl-grid-item{
|
||||
min-height:400px;
|
||||
}
|
||||
}
|
||||
.rsssl-menu-placeholder {
|
||||
min-height:400px;
|
||||
}
|
||||
|
||||
@keyframes shine-lines {
|
||||
0% {
|
||||
background-position:- 400px;
|
||||
}
|
||||
100% {
|
||||
background-position: 220px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.rsssl {
|
||||
.rsssl-locked {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
&.rsssl-locked-premium {
|
||||
.rsssl-locked-overlay {
|
||||
bottom: var(--rsp-spacing-s);
|
||||
flex-direction: column;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.rsssl-locked-overlay {
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
z-index: 0;
|
||||
|
||||
&.rsssl-premium {
|
||||
bottom: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rsssl-locked-header {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
|
||||
.rsssl-locked-header-title {
|
||||
font-weight: 600;
|
||||
color: var(--rsp-blue)
|
||||
}
|
||||
|
||||
.rsssl-locked-header-subtitle {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-locked-content {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.rsssl-locked-content-text {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-locked-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
// we want the a to be displayed on the left side
|
||||
a {
|
||||
position: relative;
|
||||
float: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-locked-footer::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//if a field is both disabled, and the group is premium, we don't want a duplicate opacity on the overlay.
|
||||
.rsssl-disabled .rsssl-field-wrap {
|
||||
.rsssl-locked {
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
.rsssl-grid-item.rsssl-progress {
|
||||
.rsssl-grid-item-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rsssl-placeholder {
|
||||
@include rsssl-block-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-progress-block {
|
||||
.rsssl-progress {
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.rsssl-bar {
|
||||
height: 100%;
|
||||
background-color: var(--rsp-color-success);
|
||||
transition: width 1s ease;
|
||||
|
||||
&.rsssl-orange {
|
||||
background-color: var(--rsp-color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-progress-bar {
|
||||
@include rsssl-block-padding;
|
||||
padding-block: 0;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.rsssl-progress-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include rsssl-block-padding;
|
||||
padding-block: var(--rsp-spacing-s);
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-m);
|
||||
|
||||
|
||||
.rsssl-progress-percentage {
|
||||
font-size: var(--rsp-fs-800);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rsssl-progress-text-span {
|
||||
font-weight: 500;
|
||||
font-size: var(--rsp-fs-600);
|
||||
a {
|
||||
margin-left: 3px;
|
||||
}
|
||||
@media only screen and (max-width: $rsp-break-l) and (min-width: $rsp-break-m) {
|
||||
font-size: var(--rsp-fs-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-header-html {
|
||||
display: flex;
|
||||
color: var(--rsp-text-color-light);
|
||||
|
||||
.rsssl-toggle-active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-task-switcher-container {
|
||||
display: flex;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
|
||||
.rsssl-task-switcher {
|
||||
&:first-of-type {
|
||||
border-right: 1px solid var(--rsp-grey-400);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-task-switcher {
|
||||
font-size: var(--rsp-fs-200);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-active-filter-remaining .rsssl-remaining-tasks, .rsssl-active-filter-all .rsssl-all-tasks {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Task element, list of tasks
|
||||
*/
|
||||
|
||||
.rsssl-task-element {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: var(--rsp-spacing-m);
|
||||
padding-bottom: var(--rsp-spacing-s);
|
||||
@media(max-width: $rsp-break-m) {
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
.rsssl-task-message {
|
||||
flex: 1;
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
|
||||
.rsssl-task-form {
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
.rsssl-task-enable {
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
.rsssl-icon.rsssl-icon-loading {
|
||||
padding:3px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-task-dismiss {
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
button {
|
||||
all: initial; //remove default button styles
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rsssl-scroll-container {
|
||||
@include rsssl-block-padding;
|
||||
//--rsp-scroll-bg-clr: var(--rsp-white);
|
||||
height: 230px;
|
||||
overflow-y: auto;
|
||||
padding-block: 0;
|
||||
padding-top: var(--rsp-spacing-s);
|
||||
border-radius: 0;
|
||||
//background-image: linear-gradient(to top, var(--rsp-scroll-bg-clr), var(--rsp-scroll-bg-clr)),
|
||||
//linear-gradient(to top, var(--rsp-scroll-bg-clr), var(--rsp-scroll-bg-clr)),
|
||||
//linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)),
|
||||
//linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
|
||||
//background-position: bottom center, top center, bottom center, top center;
|
||||
//background-color: var(--rsp-scroll-bg-clr);
|
||||
//background-repeat: no-repeat;
|
||||
//background-size: 100% 25px, 100% 25px, 100% 15px, 100% 15px;
|
||||
//background-attachment: local, local, scroll, scroll;
|
||||
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--rsp-grey-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--rsp-grey-400);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-progress-status-container {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.rsssl-task-status {
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
padding: 4px 8px;
|
||||
font-size: var(--rsp-fs-100);
|
||||
font-weight: 600;
|
||||
@media(max-width: $rsp-break-m) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&.rsssl-completed, &.rsssl-success {
|
||||
background-color: var(--rsp-color-success);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
|
||||
&.rsssl-open {
|
||||
background-color: var(--rsp-color-open);
|
||||
}
|
||||
|
||||
&.rsssl-warning {
|
||||
background-color: var(--rsp-color-error);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
|
||||
&.rsssl-premium {
|
||||
background-color: var(--rsp-blue);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
&.rsssl-loading {
|
||||
background-color: var(--rsp-grey-200);
|
||||
}
|
||||
}
|
||||
.rsssl-scroll-container .rsssl-task-status{
|
||||
@media(max-width: $rsp-break-s) {
|
||||
aspect-ratio: 1 / 1;
|
||||
min-width: 10px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
text-indent: -9999px; /* sends the text off-screen */
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.rsssl-plusone {
|
||||
min-width: 15px;
|
||||
height: 16px;
|
||||
font-size: var(--rsp-fs-100);
|
||||
line-height: 1.5;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0 -1px 2px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
background-color: #d63638;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $rsp-break-l) {
|
||||
.rsssl-footer-left {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
.rsssl-tips_tricks{
|
||||
.rsssl-grid-item-header{
|
||||
.rsssl-grid-item-controls{
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-tips-tricks-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) {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rsssl-tips-tricks-element {
|
||||
width: calc(50% - var(--rsp-spacing-xxs));
|
||||
@media( max-width: $rsp-break-xs ){
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
color: var(--rsp-text-color-light);
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
min-width: 0; /* or some value */
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-brand-primary);
|
||||
text-decoration: underline;
|
||||
|
||||
svg path{
|
||||
fill: var(--rsp-brand-primary);
|
||||
}
|
||||
|
||||
.rsssl-tips-tricks-content {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-bullet {
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--rsp-grey-300);
|
||||
}
|
||||
.rsssl-tips-tricks-content {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.#{$rt-namespace}__close-button {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: 0.3s ease;
|
||||
align-self: flex-start;
|
||||
|
||||
&--light {
|
||||
color: #000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
fill: currentColor;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.#{$rt-namespace}__spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-radius: 100%;
|
||||
border-color: var(--toastify-spinner-color-empty-area);
|
||||
border-right-color: var(--toastify-spinner-color);
|
||||
animation: #{$rt-namespace}__spin 0.65s linear infinite;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@keyframes #{$rt-namespace}__trackProgress {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
z-index: var(--toastify-z-index);
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
|
||||
&--animated {
|
||||
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
|
||||
}
|
||||
|
||||
&--controlled {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&--rtl {
|
||||
right: 0;
|
||||
left: initial;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.#{$rt-namespace}__toast {
|
||||
&-theme--dark {
|
||||
background: var(--toastify-color-dark);
|
||||
color: var(--toastify-text-color-dark);
|
||||
}
|
||||
&-theme--light {
|
||||
background: var(--toastify-color-light);
|
||||
color: var(--toastify-text-color-light);
|
||||
}
|
||||
&-theme--colored#{&}--default {
|
||||
background: var(--toastify-color-light);
|
||||
color: var(--toastify-text-color-light);
|
||||
}
|
||||
&-theme--colored#{&}--info {
|
||||
color: var(--toastify-text-color-info);
|
||||
background: var(--toastify-color-info);
|
||||
}
|
||||
&-theme--colored#{&}--success {
|
||||
color: var(--toastify-text-color-success);
|
||||
background: var(--rsp-green);
|
||||
}
|
||||
&-theme--colored#{&}--warning {
|
||||
color: var(--toastify-text-color-warning);
|
||||
background: var(--toastify-color-warning);
|
||||
}
|
||||
&-theme--colored#{&}--error {
|
||||
color: var(--toastify-text-color-error);
|
||||
background: var(--toastify-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
&-theme--light {
|
||||
background: var(--toastify-color-progress-light);
|
||||
}
|
||||
&-theme--dark {
|
||||
background: var(--toastify-color-progress-dark);
|
||||
}
|
||||
&--info {
|
||||
background: var(--toastify-color-progress-info);
|
||||
}
|
||||
&--success {
|
||||
background: var(--toastify-color-progress-success);
|
||||
}
|
||||
&--warning {
|
||||
background: var(--toastify-color-progress-warning);
|
||||
}
|
||||
&--error {
|
||||
background: var(--toastify-color-progress-error);
|
||||
}
|
||||
&-theme--colored#{&}--info,
|
||||
&-theme--colored#{&}--success,
|
||||
&-theme--colored#{&}--warning,
|
||||
&-theme--colored#{&}--error {
|
||||
background: var(--toastify-color-transparent);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.#{$rt-namespace}__toast {
|
||||
position: relative;
|
||||
min-height: var(--toastify-toast-min-height);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1rem;
|
||||
padding: 8px;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
border: 1px solid #eeeeee;
|
||||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-height: var(--toastify-toast-max-height);
|
||||
overflow: hidden;
|
||||
font-family: var(--toastify-font-family);
|
||||
cursor: default;
|
||||
direction: ltr;
|
||||
/* webkit only issue #791 */
|
||||
z-index: 0;
|
||||
&--rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
&--close-on-click {
|
||||
cursor: pointer;
|
||||
}
|
||||
&-body {
|
||||
margin: auto 0;
|
||||
flex: 1 1 auto;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
margin-inline-end: 10px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}--animate {
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.7s;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}--animate-icon {
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
@media #{$rt-mobile} {
|
||||
.#{$rt-namespace}__toast {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.#{$rt-namespace}__toast-container {
|
||||
z-index: var(--toastify-z-index);
|
||||
-webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
|
||||
position: fixed;
|
||||
padding: 4px;
|
||||
width: var(--toastify-toast-width);
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
&--top-left {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
&--top-center {
|
||||
top: calc( 2em + 32px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&--top-right {
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
&--bottom-left {
|
||||
bottom: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
&--bottom-center {
|
||||
bottom: 1em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&--bottom-right {
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$rt-mobile} {
|
||||
.#{$rt-namespace}__toast-container {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
&--top-left,
|
||||
&--top-center,
|
||||
&--top-right {
|
||||
top: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&--bottom-left,
|
||||
&--bottom-center,
|
||||
&--bottom-right {
|
||||
bottom: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&--rtl {
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
$rt-namespace: 'Toastify';
|
||||
$rt-mobile: 'only screen and (max-width : 480px)' !default;
|
||||
|
||||
:root {
|
||||
--toastify-color-light: var(--rsp-white);
|
||||
--toastify-color-dark: var(--rsp-black);
|
||||
--toastify-color-info: var(--rsp-yellow);
|
||||
--toastify-color-success: var(--rsp-green);
|
||||
--toastify-color-warning: var(--rsp-orange);
|
||||
--toastify-color-error: var(--rsp-red);
|
||||
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
|
||||
|
||||
--toastify-icon-color-info: var(--toastify-color-info);
|
||||
--toastify-icon-color-success: var(--rsp-green);
|
||||
--toastify-icon-color-warning: var(--toastify-color-warning);
|
||||
--toastify-icon-color-error: var(--toastify-color-error);
|
||||
|
||||
--toastify-toast-width: 320px;
|
||||
--toastify-toast-background: #fff;
|
||||
--toastify-toast-min-height: 42px;
|
||||
--toastify-toast-max-height: 800px;
|
||||
--toastify-font-family: sans-serif;
|
||||
--toastify-z-index: 999999;
|
||||
|
||||
--toastify-text-color-light: var(--rsp-text-color);
|
||||
--toastify-text-color-dark: var(--rsp-text-color-white);
|
||||
|
||||
//Used only for colored theme
|
||||
--toastify-text-color-info: #fff;
|
||||
--toastify-text-color-success: #fff;
|
||||
--toastify-text-color-warning: #fff;
|
||||
--toastify-text-color-error: #fff;
|
||||
|
||||
--toastify-spinner-color: #616161;
|
||||
--toastify-spinner-color-empty-area: #e0e0e0;
|
||||
|
||||
// Used when no type is provided
|
||||
--toastify-color-progress-light: linear-gradient(
|
||||
to right,
|
||||
var(--rsp-green),
|
||||
#5ac8fa,
|
||||
#007aff,
|
||||
#34aadc,
|
||||
#5856d6,
|
||||
#ff2d55
|
||||
);
|
||||
// Used when no type is provided
|
||||
--toastify-color-progress-dark: #bb86fc;
|
||||
--toastify-color-progress-info: var(--toastify-color-info);
|
||||
--toastify-color-progress-success: var(--rsp-green);
|
||||
--toastify-color-progress-warning: var(--toastify-color-warning);
|
||||
--toastify-color-progress-error: var(--toastify-color-error);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
@mixin timing-function {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutRight {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInLeft {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInUp {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 3000px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutUp {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInDown {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -3000px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutDown {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__bounce-enter {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__bounceInLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__bounceInRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__bounceInDown;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__bounceInUp;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__bounce-exit {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__bounceOutLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__bounceOutRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__bounceOutUp;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__bounceOutDown;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@keyframes #{$rt-namespace}__flipIn {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__flipOut {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__flip-enter {
|
||||
animation-name: #{$rt-namespace}__flipIn;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__flip-exit {
|
||||
animation-name: #{$rt-namespace}__flipOut;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@mixin transform {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInRight {
|
||||
from {
|
||||
transform: translate3d(110%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInLeft {
|
||||
from {
|
||||
transform: translate3d(-110%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 110%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -110%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutRight {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(110%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutLeft {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-110%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutDown {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 500px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutUp {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -500px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__slide-enter {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__slideInLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__slideInRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__slideInDown;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__slideInUp;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__slide-exit {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__slideOutLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__slideOutRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__slideOutUp;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__slideOutDown;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@keyframes #{$rt-namespace}__spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@keyframes #{$rt-namespace}__zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__zoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__zoom-enter {
|
||||
animation-name: #{$rt-namespace}__zoomIn;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__zoom-exit {
|
||||
animation-name: #{$rt-namespace}__zoomOut;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'toastContainer';
|
||||
@import 'toast';
|
||||
@import 'theme';
|
||||
@import 'closeButton';
|
||||
@import 'progressBar';
|
||||
@import 'icons';
|
||||
|
||||
// entrance and exit animations
|
||||
@import 'animations/bounce.scss';
|
||||
@import 'animations/zoom.scss';
|
||||
@import 'animations/flip.scss';
|
||||
@import 'animations/slide.scss';
|
||||
@import 'animations/spin.scss';
|
||||
@@ -0,0 +1,16 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
@keyframes #{$rt-namespace}__trackProgress {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.rsssl div[class^=rsssl-wizard-] {
|
||||
.rsssl-tooltip-icon .react-tooltip {
|
||||
max-width:300px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.rsssl-field-wrap {
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
|
||||
.cmplz-label-text {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
a.rsssl-skip-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 15px 0 20px;
|
||||
}
|
||||
|
||||
.rsssl-two_fa_users div[data-column-id="5"].rdt_TableCol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rsssl-two_fa_users .rdt_TableRow .rdt_TableCell:last-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.rsssl-two_fa_users .rdt_TableHeadRow .rdt_TableCol:last-child {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.rsssl-two_fa_general,
|
||||
.rsssl-two_fa_email,
|
||||
.rsssl-two_fa_totp,
|
||||
.rsssl-two_fa_users {
|
||||
.MuiPopper-root, .MuiPaper-root {
|
||||
max-height: 30px;
|
||||
z-index: 15;
|
||||
|
||||
div {
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-add-button__inner .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rsssl-add-button__inner .button .icon {
|
||||
margin-left: 8px; /* Adjust the spacing as needed */
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
.rsssl {
|
||||
div[class^="rsssl-wizard-"] { // starts with selector
|
||||
.rsssl-helplink {
|
||||
color: var(--rsp-text-color);
|
||||
}
|
||||
|
||||
.rsssl-grid-item {
|
||||
position: relative; //to ensure the rsssl-lock stays within the div
|
||||
margin-bottom: var(--rsp-grid-gap);
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
&.rsssl-column-2{
|
||||
grid-column: span 2;
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-locked {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
.rsssl-shield-overlay {
|
||||
position: absolute;
|
||||
top: 50%; /* Center vertically */
|
||||
left: 50%; /* Center horizontally */
|
||||
transform: translate(-50%, -50%); /* Offset for centering */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100px + 2 * var(--rsp-spacing-s)); /* Adjust shield height dynamically */
|
||||
width: calc(200px + 2 * var(--rsp-spacing-s)); /* Ensure consistent width for a square shield */
|
||||
z-index: 19; /* Place it below the overlay */
|
||||
}
|
||||
|
||||
.rsssl-locked:has(.rsssl-shield-overlay) {
|
||||
/* Apply dynamic styles when .rsssl-shield-overlay is present */
|
||||
min-height: calc(100px + 4 * var(--rsp-spacing-s)); /* Adjust to fit the shield and extra spacing */
|
||||
display: flex;
|
||||
align-items: center; /* Vertically center contents */
|
||||
justify-content: center; /* Horizontally center contents */
|
||||
position: relative; /* Context for absolutely positioned children */
|
||||
padding: var(--rsp-spacing-s); /* Add padding to avoid cutting off elements */
|
||||
}
|
||||
|
||||
.rsssl-locked-overlay {
|
||||
z-index: 20; /* Ensure this stays on top */
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
background-color: var(--rsp-white);
|
||||
margin: var(--rsp-spacing-s);
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
bottom: 0;
|
||||
width: calc(100% - (2 * var(--rsp-spacing-s)));
|
||||
@include rsssl-block-padding;
|
||||
|
||||
.rsssl-open {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.rsssl-progress-status {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.rsssl-grid-item-footer {
|
||||
// justify-content: flex-end;
|
||||
// padding: 0;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// gap: var(--rsp-grid-margin);
|
||||
// width: 100%;
|
||||
// min-height: 20px;
|
||||
// box-sizing: border-box;
|
||||
// align-self: flex-end;
|
||||
//
|
||||
// .rsssl-legend {
|
||||
// display: flex;
|
||||
// span {
|
||||
// padding-left: 5px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:empty {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
|
||||
& > div:nth-last-of-type(2) {
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--rsp-border-radius) var(--rsp-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.rsssl-grid-item-footer-container {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 20; //should be above 10, for the text editor, which has 10.
|
||||
|
||||
.rsssl-grid-item-footer-buttons {
|
||||
a.button, button {
|
||||
box-shadow: none !important;
|
||||
|
||||
&:focus, &:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.rsssl-grid-item-footer-scroll-progress-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--rsp-grey-300);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rsssl-grid-item-footer-scroll-progress {
|
||||
height: 100%;
|
||||
background-color: var(--rsp-blue);
|
||||
}
|
||||
.rsssl-grid-item-footer {
|
||||
background: var(--rsp-grey-100);
|
||||
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
|
||||
border-top: 1px solid var(--rsp-grey-300);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
@include rsssl-block-padding();
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
gap: var(--rsp-grid-margin);
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
justify-content: space-around;
|
||||
// last item within the footer
|
||||
& > div:last-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
&-buttons{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
}
|
||||
.rsssl-legend {
|
||||
display: flex;
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
&-upsell-bar {
|
||||
.button {
|
||||
display:inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.rsssl{
|
||||
div[class^="rsssl-wizard-"]{ // starts with selector
|
||||
.components-flex{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.components-flex-item label{
|
||||
margin: 0;
|
||||
}
|
||||
.rsssl-tooltip {
|
||||
flex-grow:1;
|
||||
}
|
||||
.components-input-control__container {
|
||||
max-width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-grid-item-content label{
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-transform: unset;
|
||||
box-sizing: border-box;
|
||||
display: inherit;
|
||||
max-width: 100%;
|
||||
//z-index: 1; => this conflicts with the tooltip z-index
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.components-base-control__field{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.components-toggle-control{
|
||||
.components-base-control__field, .components-flex{
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width:100%;
|
||||
.components-form-toggle{
|
||||
margin-right: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
select option {
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
.components-form-toggle.is-checked .components-form-toggle__track{
|
||||
background-color: var(--rsp-dark-blue);
|
||||
}
|
||||
input.components-form-toggle__input[type=checkbox]:disabled, {
|
||||
background: var(--rsp-grey-100);
|
||||
opacity:0.7
|
||||
}
|
||||
.rsssl-grid-item{
|
||||
.rsssl-grid-item-content{
|
||||
padding: var(--rsp-spacing-xs) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-field-wrap {
|
||||
.rsssl-comment {
|
||||
font-style:italic;
|
||||
}
|
||||
}
|
||||
.rsssl-field-wrap, .rsssl-settings-block-intro{
|
||||
padding-block: var(--rsp-spacing-s);
|
||||
@include rsssl-inline-block-padding;
|
||||
overflow: hidden;
|
||||
& > .rsssl-field-wrap{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.rsssl-field-button{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-highlight {
|
||||
background-color: transparent;
|
||||
border-left: 4px solid var(--rsp-green);
|
||||
-o-animation: fadeIt 3s ease-in-out;
|
||||
animation: fadeIt 3s ease-in-out;
|
||||
scroll-margin-top: 100px;
|
||||
scroll-padding-top:100px;
|
||||
}
|
||||
|
||||
.rsssl-block-highlight {
|
||||
border: 0;
|
||||
-o-animation: pulse 2s infinite;
|
||||
animation: pulse 2s infinite;}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0 0 var(--rsp-green);
|
||||
}
|
||||
70% {
|
||||
-webkit-box-shadow: 0 0 0 10px var(--rsp-green-faded);
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 0 0 var(--rsp-green-faded);;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-moz-box-shadow: 0 0 0 0 var(--rsp-green);
|
||||
box-shadow: 0 0 0 0 var(--rsp-green);
|
||||
}
|
||||
70% {
|
||||
-moz-box-shadow: 0 0 0 10px var(--rsp-green-faded);
|
||||
box-shadow: 0 0 0 10px var(--rsp-green-faded);
|
||||
}
|
||||
100% {
|
||||
-moz-box-shadow: 0 0 0 0 var(--rsp-green-faded);
|
||||
box-shadow: 0 0 0 0 var(--rsp-green-faded);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIt {
|
||||
0% { background-color: transparent; }
|
||||
30% { background-color: var(--rsp-green-faded); }
|
||||
100% {
|
||||
border-right: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
@keyframes fadeIt {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
border-right: 0;
|
||||
}
|
||||
30% { background-color: var(--rsp-green-faded); }
|
||||
100% { background-color: inherit; }
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-email-verified {
|
||||
position: absolute;
|
||||
bottom: 23px;
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
.rsssl-ip-verified {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
//switch padding to top, to prevent tasks from getting stuck to text field
|
||||
.rsssl-license {
|
||||
.rsssl-task-element {
|
||||
padding-top: var(--rsp-spacing-s);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.rsssl-license-field{
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input.rsssl-input {
|
||||
&.full {
|
||||
width: 100%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
&.rsssl-error {
|
||||
border: 2px solid var(--rsp-red);
|
||||
outline: none;
|
||||
&:focus {
|
||||
border-color: var(--rsp-red) !important;
|
||||
}
|
||||
}
|
||||
&.rsssl-success {
|
||||
border: 2px solid var(--rsp-green);
|
||||
outline: none;
|
||||
&:focus {
|
||||
border-color: var(--rsp-green) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wp-core-ui select {
|
||||
/* Your styles here */
|
||||
flex-grow: 1 !important;
|
||||
max-width: 33%;
|
||||
}
|
||||
.icon-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rsssl-group-filter {
|
||||
min-width: 25%;
|
||||
max-width: 100%!important;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.rsssl-learningmode-placeholder {
|
||||
height:150px;
|
||||
div {
|
||||
background-color:var(--rsp-grey-200);
|
||||
margin:10px 0;
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-learning-mode-delete {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rsssl-locked-overlay {
|
||||
.rsssl-open {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.rsssl-progress-status {
|
||||
@extend .rsssl-task-status;
|
||||
&.rsssl-learning-mode-completed, &.rsssl-learning-mode-enforced {
|
||||
background-color: var(--rsp-color-success);
|
||||
color:#fff;
|
||||
}
|
||||
&.rsssl-learning-mode {
|
||||
background-color: var(--rsp-color-open);
|
||||
|
||||
}
|
||||
&.rsssl-learning-mode-error {
|
||||
background-color: var(--rsp-color-error);
|
||||
color:#fff;
|
||||
|
||||
}
|
||||
&.rsssl-disabled, &.rsssl-learning-mode-disabled {
|
||||
background-color: var(--rsp-color-disabled);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-learning-mode-footer {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-s);
|
||||
select {
|
||||
margin-left:auto;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
.rsssl-lets-encrypt-tests {
|
||||
margin: var(--rsp-spacing-xs) var(--rsp-spacing-xl);
|
||||
|
||||
.rsssl-features {
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.rsssl-checkbox-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-right: var(--rsp-spacing-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-progress-bar {
|
||||
padding-block: 0;
|
||||
margin-bottom:var(--rsp-spacing-m);
|
||||
.rsssl-progress {
|
||||
overflow: hidden;
|
||||
height: var(--rsp-spacing-m);
|
||||
border-radius: 5px;
|
||||
background-color: var(--rsp-grey-200);
|
||||
|
||||
.rsssl-bar {
|
||||
height: 100%;
|
||||
background-color: var(--rsp-color-success);
|
||||
|
||||
&.rsssl-orange {
|
||||
background-color: var(--rsp-color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom:var(--rsp-spacing-m);
|
||||
}
|
||||
|
||||
.rsssl-progress-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include rsssl-block-padding;
|
||||
padding-block: 0;
|
||||
padding-top: var(--rsp-spacing-xs);
|
||||
|
||||
.rsssl-progress-percentage {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rsssl-progress-text-span {
|
||||
margin-left: 35px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
a {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display:flex;
|
||||
margin-bottom:15px;
|
||||
.rsssl-icon {
|
||||
margin-right:7px;
|
||||
}
|
||||
|
||||
/*Nested li */
|
||||
ul li:before {
|
||||
background-color: var(--rsp-grey-500);
|
||||
color: #fff;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-top: 7px;
|
||||
margin-left: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-test-results {
|
||||
ul {
|
||||
li {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin:var(--rsp-spacing-m) 0;
|
||||
}
|
||||
a+button {
|
||||
margin-left:var(--rsp-spacing-m);
|
||||
}
|
||||
.rsssl-certificate-data {
|
||||
display:none;
|
||||
}
|
||||
.rsssl-dns-text-records {
|
||||
|
||||
div {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
margin-right:20px;
|
||||
.rsssl-dns-domain, .rsssl-dns-field {
|
||||
margin-right:var(--rsp-spacing-m);
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-modal-subtitle {
|
||||
display:none;
|
||||
}
|
||||
.components-toggle-control {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
.rsssl-wizard-menu{
|
||||
height: fit-content;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
.rsssl-grid-item-header {
|
||||
padding-left: var(--rsp-spacing-xs);
|
||||
}
|
||||
.rsssl-grid-item-content{
|
||||
padding: 0;
|
||||
padding-bottom: var(--rsp-spacing-l);
|
||||
}
|
||||
}
|
||||
.rsssl-wizard-menu-items > .rsssl-menu-item > a {
|
||||
font-weight: 600 !important;
|
||||
padding-inline: var(--rsp-spacing-xs) !important;
|
||||
}
|
||||
|
||||
.rsssl-wizard-menu-items {
|
||||
.rsssl-main-menu {
|
||||
.rsssl-active {
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
background: var(--rsp-yellow-faded);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-menu-item {
|
||||
a {
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rsssl-menu-item{
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
text-decoration: none;
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
transition: all 0.2s ease-in-out;
|
||||
padding-left: var(--rsp-spacing-xs);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.rsssl-active{
|
||||
> a{
|
||||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rsssl-featured{
|
||||
|
||||
&.rsssl-active {
|
||||
.rsssl-menu-item-beta-pill {
|
||||
color: var(--rsp-dark-blue);
|
||||
}
|
||||
}
|
||||
a{
|
||||
flex-wrap: wrap;
|
||||
.rsssl-menu-item-featured-pill{
|
||||
background: var(--rsp-green);
|
||||
color: var(--rsp-text-color-white);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
.rsssl-menu-item-beta-pill{
|
||||
color: var(--rsp-dark-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rsssl-new{
|
||||
|
||||
.rsssl-menu-item-new-pill{
|
||||
background: var(--rsp-yellow);
|
||||
color: var(--rsp-text-color-dark);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
|
||||
&.rsssl-active {
|
||||
.rsssl-menu-item-new-pill {
|
||||
color: var(--rsp-text-color-dark);
|
||||
}
|
||||
}
|
||||
a{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.rsssl-premium{
|
||||
a{
|
||||
flex-wrap: wrap;
|
||||
.rsssl-menu-item-featured-pill{
|
||||
background: var(--rsp-dark-blue);
|
||||
color: var(--rsp-text-color-white);
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-submenu-item{
|
||||
a{
|
||||
padding-left: calc(var(--rsp-spacing-xs) + var(--rsp-spacing-s)) !important;
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
.rsssl-active {
|
||||
a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
span {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\2022';
|
||||
color: var(--rsp-dark-blue);
|
||||
font-size: 3em;
|
||||
position: absolute;
|
||||
left: var(--rsp-spacing-xxs) !important;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.rsssl-mixed-content-scan {
|
||||
.rsssl-mixed-content-placeholder {
|
||||
height:250px;
|
||||
div {
|
||||
background-color:var(--rsp-grey-200);
|
||||
margin:10px 0;
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
//.rsssl-shield-overlay {
|
||||
// height:250px;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// display:flex;
|
||||
//}
|
||||
|
||||
.rsssl-field-wrap {
|
||||
.rdt_TableCell[data-column-id="2"] {
|
||||
display:grid;
|
||||
}
|
||||
.rdt_TableCol, .rdt_TableCell {
|
||||
min-width: 110px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-progress-container {
|
||||
.rsssl-progress-bar {
|
||||
border-radius:5px;
|
||||
height:20px;
|
||||
background-color:var(--rsp-green);
|
||||
}
|
||||
}
|
||||
.rsssl-task-status{
|
||||
min-width: min-content;
|
||||
&.rsssl-warning {
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-text-color);
|
||||
}
|
||||
}
|
||||
button.button{
|
||||
line-height: 1.5;
|
||||
min-height: 10px;
|
||||
}
|
||||
.rsssl-grid-item-content-footer{
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-s);
|
||||
}
|
||||
.rsssl-current-scan-action, .rsssl-mixed-content-description {
|
||||
margin:10px 5px;
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.rsssl-wizard-help {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
details{
|
||||
font-size: var(--rsp-fs-200);
|
||||
.rsssl-help-more-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 12px;
|
||||
}
|
||||
summary {
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
justify-content: space-between;
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 600;
|
||||
cursor:pointer;
|
||||
&::-webkit-details-marker {
|
||||
display:none;
|
||||
}
|
||||
&:first-of-type {
|
||||
list-style-type: none;
|
||||
}
|
||||
.rsssl-icon{
|
||||
transition: all .3s ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
code{
|
||||
white-space: pre-line;
|
||||
display: block;
|
||||
}
|
||||
summary, p {
|
||||
font-size: var(--rsp-fs-200);
|
||||
}
|
||||
details[open]{
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
summary{
|
||||
padding: 0;
|
||||
padding-bottom: var(--rsp-spacing-xs);
|
||||
.rsssl-icon{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-wizard-help {
|
||||
.rsssl-help-header {
|
||||
width:100%;
|
||||
display:flex;
|
||||
padding:10px;
|
||||
.rsssl-help-title{
|
||||
font-size:18px;
|
||||
}
|
||||
.rsssl-help-control {
|
||||
margin-left:auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
}
|
||||
>div{
|
||||
flex-grow:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-wizard-help-notice {
|
||||
width: 100%;
|
||||
@include rsssl-block;
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
height: fit-content;
|
||||
background-color: var(--rsp-dark-blue-faded);
|
||||
&.rsssl-warning {
|
||||
background-color: var(--rsp-red-faded);
|
||||
}
|
||||
&.rsssl-open {
|
||||
background-color: var(--rsp-yellow-faded);
|
||||
}
|
||||
summary, p{
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
.rsssl div[class^=rsssl-wizard-] {
|
||||
.rsssl-permissions_policy {
|
||||
.rdt_TableCell , .rdt_TableCol{
|
||||
min-width:fit-content;
|
||||
}
|
||||
.rsssl-locked .rsssl-shield-overlay {
|
||||
top:calc(100% - 300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
.rsssl{
|
||||
.components-snackbar-list.edit-site-notices{
|
||||
width: max-content;
|
||||
position: fixed;
|
||||
bottom: var(--rsp-spacing-m);
|
||||
right: var(--rsp-spacing-l);
|
||||
& > div{
|
||||
margin-left: auto;
|
||||
}
|
||||
.components-snackbar{
|
||||
@include rsssl-block;
|
||||
color: var(--rsp-color-success);
|
||||
background-color: #fff;
|
||||
font-weight:700;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.rsssl-vulnerability-action {
|
||||
a.button {
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-processing {
|
||||
opacity:0.5;
|
||||
}
|
||||
.rsssl-vulnerabilities_measures-overview {
|
||||
.allowRowEvents {
|
||||
.wp-core-ui select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.rdt_TableCell {
|
||||
&:nth-child(2) {
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-vulnerabilities_measures {
|
||||
.rsssl-locked-overlay {
|
||||
input[type=checkbox] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.rsssl div[class^=rsssl-wizard-] .rsssl-hardening-xml {
|
||||
.rsssl-locked .rsssl-shield-overlay {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
.rsssl{
|
||||
/*skeleton*/
|
||||
$panelheight : 38px;
|
||||
$panelborder : 1px;
|
||||
$paneloffset : 3*($panelborder+$panelheight);
|
||||
$rows : 6;
|
||||
.rsssl-skeleton:empty {
|
||||
margin: auto;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
height: ($rows*$panelheight)+($rows+1)*$panelborder; /* 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 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 );
|
||||
|
||||
background-repeat: repeat-y;
|
||||
|
||||
background-size:
|
||||
50px 200px, /* highlight */
|
||||
100% $paneloffset,
|
||||
100% $paneloffset,
|
||||
100% $paneloffset,
|
||||
100% $paneloffset;
|
||||
|
||||
background-position:
|
||||
0 0, /* highlight */
|
||||
$panelborder $panelborder,
|
||||
$panelborder $panelheight+(2*$panelborder),
|
||||
$panelborder (2*$panelheight)+(3*$panelborder),
|
||||
$panelborder (3*$panelheight)+(4*$panelborder);
|
||||
|
||||
background-color:#d6d8db;
|
||||
border-right: $panelborder solid #d6d8db;
|
||||
animation: shine 2.5s infinite;
|
||||
}
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position:
|
||||
100% 0, /* move highlight to right */
|
||||
$panelborder $panelborder,
|
||||
$panelborder $panelheight+(2*$panelborder),
|
||||
$panelborder (2*$panelheight)+(3*$panelborder),
|
||||
$panelborder (3*$panelheight)+(4*$panelborder);
|
||||
}
|
||||
}
|
||||
|
||||
/*loader*/
|
||||
.rsssl-loader {
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
> 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;
|
||||
}
|
||||
|
||||
&.rsssl-loader-white >div {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.rect2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.rect3 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
.rect4 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.rect5 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary .rsssl-loader div {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
||||
20% { -webkit-transform: scaleY(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
} 20% {
|
||||
transform: scaleY(1.0);
|
||||
-webkit-transform: scaleY(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.rsssl{
|
||||
// Plugin specific variables down here please
|
||||
--rsp-brand-primary: var(--rsp-yellow);
|
||||
--rsp-brand-secondary: var(--rsp-blue);
|
||||
--rsp-brand-primary-faded: var(--rsp-yellow-faded);
|
||||
}
|
||||
//@media (prefers-color-scheme: dark) {
|
||||
// :root {
|
||||
// // Borders and stuff;
|
||||
// --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-box-shadow-dark: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 1px 0px 4px 1px;
|
||||
// --rsp-border-color: #dfdfdf;
|
||||
//
|
||||
// // RSP Brand Colors
|
||||
// --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-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-wp-blue-faded: #c6e0ef;
|
||||
//
|
||||
// --rsp-background-block-color: var(--rsp-black);
|
||||
// --rsp-background-color: var(--rsp-grey-600);
|
||||
//
|
||||
// //Input colors
|
||||
// --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(255, 255, 255, 0.95);
|
||||
// --rsp-text-color-invert: rgba(26, 26, 26, 0.95);
|
||||
// --rsp-text-color-white: rgba(255, 255, 255, 0.95);
|
||||
// --rsp-text-color-light: rgba(69, 69, 82, 0.95);
|
||||
//
|
||||
// --rsp-grey-100: #fafafa;
|
||||
// --rsp-grey-200: #f9f9f9;
|
||||
// --rsp-grey-300: #ededed;
|
||||
// --rsp-grey-400: #c6c6c6;
|
||||
// --rsp-grey-500: #737373;
|
||||
// --rsp-grey-600: #696969;
|
||||
//
|
||||
// // Notification colors
|
||||
// --rsp-color-success: var(--rsp-green);
|
||||
// --rsp-color-error: var(--rsp-red);
|
||||
// --rsp-color-open: var(--rsp-yellow);
|
||||
// --rsp-color-disabled: var(--rsp-grey-300);
|
||||
// }
|
||||
// .rsssl-header .rsssl-logo{
|
||||
// filter: brightness(0) invert(1);
|
||||
// }
|
||||
//}
|
||||
@@ -0,0 +1 @@
|
||||
<?php // You don't belong here. ?>
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
This was created for styling the plugin overview page for vulnerable plugins.
|
||||
*/
|
||||
:root {
|
||||
--rsp-spacing-xxs: 5px;
|
||||
--rsp-spacing-xs: 10px;
|
||||
--rsp-spacing-s: 15px;
|
||||
--rsp-spacing-m: 20px;
|
||||
--rsp-spacing-l: 25px;
|
||||
--rsp-spacing-xl: 30px;
|
||||
--rsp-grid-margin: var(--rsp-spacing-s);
|
||||
--rsp-grid-gap: var(--rsp-spacing-m);
|
||||
--rsp-border-radius: 12px;
|
||||
--rsp-border-radius-s: 8px;
|
||||
--rsp-border-radius-xs: 3px;
|
||||
--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-box-shadow-dark: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 1px 0px 4px 1px;
|
||||
--rsp-border-color: #dfdfdf;
|
||||
--rsp-black: #333;
|
||||
--rsp-white: #fff;
|
||||
--rsp-yellow: #fbc43e;
|
||||
--rsp-blue: #009fff;
|
||||
--rsp-dark-yellow: #e6a800;
|
||||
--rsp-dark-blue: #1E73BE;
|
||||
--rsp-green: #2e8a37;
|
||||
--rsp-red: #D7263D;
|
||||
--rsp-dark-red: #9b0212;
|
||||
--rsp-pink: #E35899;
|
||||
--rsp-wp-blue: #007cba;
|
||||
--rsp-yellow-faded: #fdf4df;
|
||||
--rsp-blue-faded: #ecf8fe;
|
||||
--rsp-dark-blue-faded: #ebf2f9;
|
||||
--rsp-green-faded: #ecf4ed;
|
||||
--rsp-red-faded: #fbebed;
|
||||
--rsp-pink-faded: #fceff5;
|
||||
--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-text-color-hover: var(--rsp-green);
|
||||
--rsp-grey-100: #fafafa;
|
||||
--rsp-grey-200: #f7f7f7;
|
||||
--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-yellow);
|
||||
--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-850: 2.8rem;
|
||||
--rsp-fs-900: 3.5rem;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rsssl-btn-vulnerable {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: var(--rsp-fs-100);
|
||||
line-height: 2.15384615;
|
||||
min-height: 30px;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
-webkit-appearance: none;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
border-color: var(--rsp-yellow);
|
||||
}
|
||||
|
||||
.rsssl-btn-vulnerable:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rsssl-btn-vulnerable.rsssl-critical {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
border-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
.rsssl-btn-vulnerable.rsssl-high {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
border-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
.rsssl-btn-vulnerable.rsssl-medium {
|
||||
border-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
background-color: var(--rsp-yellow);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
:root{--rsp-spacing-xxs:5px;--rsp-spacing-xs:10px;--rsp-spacing-s:15px;--rsp-spacing-m:20px;--rsp-spacing-l:25px;--rsp-spacing-xl:30px;--rsp-grid-margin:var(--rsp-spacing-s);--rsp-grid-gap:var(--rsp-spacing-m);--rsp-border-radius:12px;--rsp-border-radius-s:8px;--rsp-border-radius-xs:3px;--rsp-border:1px solid var(--rsp-border-color);--rsp-box-shadow:rgba(0,0,0,0.1) 0 4px 6px -1px,rgba(0,0,0,0.06) 0 2px 4px -1px;--rsp-box-shadow-dark:rgba(0,0,0,0.2) 0 4px 6px -1px,rgba(0,0,0,0.12) 1px 0 4px 1px;--rsp-border-color:#dfdfdf;--rsp-black:#333;--rsp-white:#fff;--rsp-yellow:#fbc43e;--rsp-blue:#009fff;--rsp-dark-yellow:#e6a800;--rsp-dark-blue:#1e73be;--rsp-green:#2e8a37;--rsp-red:#d7263d;--rsp-dark-red:#9b0212;--rsp-pink:#e35899;--rsp-wp-blue:#007cba;--rsp-yellow-faded:#fdf4df;--rsp-blue-faded:#ecf8fe;--rsp-dark-blue-faded:#ebf2f9;--rsp-green-faded:#ecf4ed;--rsp-red-faded:#fbebed;--rsp-pink-faded:#fceff5;--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-text-color-hover:var(--rsp-green);--rsp-grey-100:#fafafa;--rsp-grey-200:#f7f7f7;--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-yellow);--rsp-color-open:var(--rsp-yellow);--rsp-color-disabled:var(--rsp-grey-300);--rsp-fs-100:.6875rem;--rsp-fs-200:.75rem;--rsp-fs-300:.8125rem;--rsp-fs-400:.875rem;--rsp-fs-500:1rem;--rsp-fs-600:1.125rem;--rsp-fs-700:1.25rem;--rsp-fs-800:1.5rem;--rsp-fs-850:2.8rem;--rsp-fs-900:3.5rem}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.rsssl-btn-vulnerable{display:inline-block;text-decoration:none;font-size:var(--rsp-fs-100);line-height:2.15384615;min-height:30px;margin:0;padding:4px 8px;min-width:100px;text-align:center;cursor:pointer;font-weight:600;-webkit-appearance:none;border-radius:var(--rsp-border-radius-xs);white-space:nowrap;box-sizing:border-box;background-color:var(--rsp-yellow);color:var(--rsp-black);border-color:var(--rsp-yellow)}.rsssl-btn-vulnerable:hover{text-decoration:underline}.rsssl-btn-vulnerable.rsssl-critical{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-high{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-medium{border-color:var(--rsp-yellow);color:var(--rsp-black);background-color:var(--rsp-yellow)}
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
This was created for styling the plugin overview page for vulnerable plugins.
|
||||
*/
|
||||
@import "variables.scss";
|
||||
|
||||
.rsssl-btn-vulnerable {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: var(--rsp-fs-100);
|
||||
line-height: 2.15384615;
|
||||
min-height: 30px;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
-webkit-appearance: none;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
border-color: var(--rsp-yellow);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.rsssl-critical {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
border-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
&.rsssl-high {
|
||||
background-color: var(--rsp-red);
|
||||
color: var(--rsp-white);
|
||||
border-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
&.rsssl-medium {
|
||||
border-color: var(--rsp-yellow);
|
||||
color: var(--rsp-black);
|
||||
background-color: var(--rsp-yellow);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
:root{--rsp-spacing-xxs:5px;--rsp-spacing-xs:10px;--rsp-spacing-s:15px;--rsp-spacing-m:20px;--rsp-spacing-l:25px;--rsp-spacing-xl:30px;--rsp-grid-margin:var(--rsp-spacing-s);--rsp-grid-gap:var(--rsp-spacing-m);--rsp-border-radius:12px;--rsp-border-radius-s:8px;--rsp-border-radius-xs:3px;--rsp-border:1px solid var(--rsp-border-color);--rsp-box-shadow:rgba(0,0,0,0.1) 0 4px 6px -1px,rgba(0,0,0,0.06) 0 2px 4px -1px;--rsp-box-shadow-dark:rgba(0,0,0,0.2) 0 4px 6px -1px,rgba(0,0,0,0.12) 1px 0 4px 1px;--rsp-border-color:#dfdfdf;--rsp-black:#333;--rsp-white:#fff;--rsp-yellow:#fbc43e;--rsp-blue:#009fff;--rsp-dark-yellow:#e6a800;--rsp-dark-blue:#1e73be;--rsp-green:#2e8a37;--rsp-red:#d7263d;--rsp-dark-red:#9b0212;--rsp-pink:#e35899;--rsp-wp-blue:#007cba;--rsp-yellow-faded:#fdf4df;--rsp-blue-faded:#ecf8fe;--rsp-dark-blue-faded:#ebf2f9;--rsp-green-faded:#ecf4ed;--rsp-red-faded:#fbebed;--rsp-pink-faded:#fceff5;--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-text-color-hover:var(--rsp-green);--rsp-grey-100:#fafafa;--rsp-grey-200:#f7f7f7;--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-yellow);--rsp-color-open:var(--rsp-yellow);--rsp-color-disabled:var(--rsp-grey-300);--rsp-fs-100:.6875rem;--rsp-fs-200:.75rem;--rsp-fs-300:.8125rem;--rsp-fs-400:.875rem;--rsp-fs-500:1rem;--rsp-fs-600:1.125rem;--rsp-fs-700:1.25rem;--rsp-fs-800:1.5rem;--rsp-fs-850:2.8rem;--rsp-fs-900:3.5rem}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.rsssl-btn-vulnerable{display:inline-block;text-decoration:none;font-size:var(--rsp-fs-100);line-height:2.15384615;min-height:30px;margin:0;padding:4px 8px;min-width:100px;text-align:center;cursor:pointer;font-weight:600;-webkit-appearance:none;border-radius:var(--rsp-border-radius-xs);white-space:nowrap;box-sizing:border-box;background-color:var(--rsp-yellow);color:var(--rsp-black);border-color:var(--rsp-yellow)}.rsssl-btn-vulnerable:hover{text-decoration:underline}.rsssl-btn-vulnerable.rsssl-critical{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-high{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-medium{border-color:var(--rsp-yellow);color:var(--rsp-black);background-color:var(--rsp-yellow)}
|
||||
@@ -0,0 +1 @@
|
||||
:root{--rsp-spacing-xxs:5px;--rsp-spacing-xs:10px;--rsp-spacing-s:15px;--rsp-spacing-m:20px;--rsp-spacing-l:25px;--rsp-spacing-xl:30px;--rsp-grid-margin:var(--rsp-spacing-s);--rsp-grid-gap:var(--rsp-spacing-m);--rsp-border-radius:12px;--rsp-border-radius-s:8px;--rsp-border-radius-xs:3px;--rsp-border:1px solid var(--rsp-border-color);--rsp-box-shadow:rgba(0,0,0,0.1) 0 4px 6px -1px,rgba(0,0,0,0.06) 0 2px 4px -1px;--rsp-box-shadow-dark:rgba(0,0,0,0.2) 0 4px 6px -1px,rgba(0,0,0,0.12) 1px 0 4px 1px;--rsp-border-color:#dfdfdf;--rsp-black:#333;--rsp-white:#fff;--rsp-yellow:#fbc43e;--rsp-blue:#009fff;--rsp-dark-yellow:#e6a800;--rsp-dark-blue:#1e73be;--rsp-green:#2e8a37;--rsp-red:#d7263d;--rsp-dark-red:#9b0212;--rsp-pink:#e35899;--rsp-wp-blue:#007cba;--rsp-yellow-faded:#fdf4df;--rsp-blue-faded:#ecf8fe;--rsp-dark-blue-faded:#ebf2f9;--rsp-green-faded:#ecf4ed;--rsp-red-faded:#fbebed;--rsp-pink-faded:#fceff5;--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-text-color-hover:var(--rsp-green);--rsp-grey-100:#fafafa;--rsp-grey-200:#f7f7f7;--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-yellow);--rsp-color-open:var(--rsp-yellow);--rsp-color-disabled:var(--rsp-grey-300);--rsp-fs-100:.6875rem;--rsp-fs-200:.75rem;--rsp-fs-300:.8125rem;--rsp-fs-400:.875rem;--rsp-fs-500:1rem;--rsp-fs-600:1.125rem;--rsp-fs-700:1.25rem;--rsp-fs-800:1.5rem;--rsp-fs-850:2.8rem;--rsp-fs-900:3.5rem}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.rsssl-btn-vulnerable{display:inline-block;text-decoration:none;font-size:var(--rsp-fs-100);line-height:2.15384615;min-height:30px;margin:0;padding:4px 8px;min-width:100px;text-align:center;cursor:pointer;font-weight:600;-webkit-appearance:none;border-radius:var(--rsp-border-radius-xs);white-space:nowrap;box-sizing:border-box;background-color:var(--rsp-yellow);color:var(--rsp-black);border-color:var(--rsp-yellow)}.rsssl-btn-vulnerable:hover{text-decoration:underline}.rsssl-btn-vulnerable.rsssl-critical{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-high{background-color:var(--rsp-red);color:var(--rsp-white);border-color:var(--rsp-red)}.rsssl-btn-vulnerable.rsssl-medium{border-color:var(--rsp-yellow);color:var(--rsp-black);background-color:var(--rsp-yellow)}
|
||||
@@ -0,0 +1,158 @@
|
||||
// Break points
|
||||
$rsp-break-xxs: 576px;
|
||||
$rsp-break-xs: 768px;
|
||||
$rsp-break-s: 1080px;
|
||||
$rsp-break-m: 1280px;
|
||||
$rsp-break-l: 1366px;
|
||||
$rsp-break-xl: 1440px; // common 13 inch macbook pro width is 1425px
|
||||
$rsp-break-xxl: 1599px;
|
||||
|
||||
:root {
|
||||
// Margins, Paddings and Border Radius
|
||||
--rsp-spacing-xxs: 5px;
|
||||
--rsp-spacing-xs: 10px;
|
||||
--rsp-spacing-s: 15px;
|
||||
--rsp-spacing-m: 20px;
|
||||
--rsp-spacing-l: 25px;
|
||||
--rsp-spacing-xl: 30px;
|
||||
|
||||
// Grid settings
|
||||
--rsp-grid-margin: var(--rsp-spacing-s);
|
||||
--rsp-grid-gap: var(--rsp-spacing-m);
|
||||
|
||||
// Borders and stuff
|
||||
--rsp-border-radius: 12px;
|
||||
--rsp-border-radius-s: 8px;
|
||||
--rsp-border-radius-xs: 3px;
|
||||
--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-box-shadow-dark: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 1px 0px 4px 1px;
|
||||
--rsp-border-color: #dfdfdf;
|
||||
|
||||
// RSP Brand Colors
|
||||
--rsp-black: #333;
|
||||
--rsp-white: #fff;
|
||||
--rsp-yellow: #fbc43e;
|
||||
--rsp-blue: #009fff;
|
||||
--rsp-dark-yellow: #e6a800;
|
||||
--rsp-dark-blue: #1E73BE;
|
||||
--rsp-green: #2e8a37;
|
||||
--rsp-red: #D7263D;
|
||||
--rsp-dark-red: #9b0212;
|
||||
--rsp-pink: #E35899;
|
||||
--rsp-wp-blue: #007cba;
|
||||
|
||||
--rsp-yellow-faded: #fdf4df;
|
||||
--rsp-blue-faded: #ecf8fe;
|
||||
--rsp-dark-blue-faded: #ebf2f9;
|
||||
--rsp-green-faded: #ecf4ed;
|
||||
--rsp-red-faded: #fbebed;
|
||||
--rsp-pink-faded: #fceff5;
|
||||
--rsp-wp-blue-faded: #c6e0ef;
|
||||
|
||||
--rsp-background-block-color: var(--rsp-white);
|
||||
--rsp-background-color: #f0f0f1; //#f0f0f1 is the default wordpress bg color
|
||||
|
||||
//Input colors
|
||||
--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-text-color-hover: var(--rsp-green);
|
||||
|
||||
--rsp-grey-100: #fafafa;
|
||||
--rsp-grey-200: #f7f7f7;
|
||||
--rsp-grey-300: #ededed;
|
||||
--rsp-grey-400: #c6c6c6;
|
||||
--rsp-grey-500: #737373;
|
||||
--rsp-grey-600: #696969;
|
||||
|
||||
// Notification colors
|
||||
--rsp-color-success: var(--rsp-green);
|
||||
--rsp-color-error: var(--rsp-red);
|
||||
--rsp-color-warning: var(--rsp-yellow);
|
||||
--rsp-color-open: var(--rsp-yellow);
|
||||
--rsp-color-disabled: var(--rsp-grey-300);
|
||||
|
||||
// Font sizes
|
||||
// If browser font-size is 16px:
|
||||
--rsp-fs-100: 0.6875rem; // 11px
|
||||
--rsp-fs-200: 0.75rem; // 12px
|
||||
--rsp-fs-300: 0.8125rem; // 13px
|
||||
--rsp-fs-400: 0.875rem; // 14px
|
||||
--rsp-fs-500: 1rem; // 16px
|
||||
--rsp-fs-600: 1.125rem; // 18px
|
||||
--rsp-fs-700: 1.25rem; // 20px
|
||||
--rsp-fs-800: 1.5rem; // 24px
|
||||
--rsp-fs-850: 2.8rem; // 45px
|
||||
--rsp-fs-900: 3.5rem; // 56px
|
||||
}
|
||||
|
||||
@mixin rsssl-block {
|
||||
background: var(--rsp-background-block-color);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
}
|
||||
|
||||
@mixin rsssl-block-padding {
|
||||
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
|
||||
@media screen and (max-width: $rsp-break-m) {
|
||||
& {
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $rsp-break-s) {
|
||||
& {
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
//@media screen and (max-width: $rsp-break-xs) {
|
||||
// padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
//}
|
||||
}
|
||||
|
||||
@mixin rsssl-block-block-padding {
|
||||
padding-block: var(--rsp-spacing-m);
|
||||
|
||||
@media screen and (max-width: $rsp-break-m) {
|
||||
& {
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $rsp-break-s) {
|
||||
& {
|
||||
padding-block: var(--rsp-spacing-xxs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rsssl-inline-block-padding {
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
@media screen and (max-width: $rsp-break-m) {
|
||||
&{
|
||||
padding-inline: var(--rsp-spacing-m);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $rsp-break-s) {
|
||||
& {
|
||||
padding-inline: var(--rsp-spacing-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rsssl-fade-in {
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.4s;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
@keyframes fade-in{
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1 @@
|
||||
<?php // You don't belong here. ?>
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1 @@
|
||||
<?php // You don't belong here. ?>
|
||||
File diff suppressed because it is too large
Load Diff
1
Atomaste Reference/public_html/wp-content/plugins/really-simple-ssl/assets/js/qrcode.min.js
vendored
Normal file
1
Atomaste Reference/public_html/wp-content/plugins/really-simple-ssl/assets/js/qrcode.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
<?php login_header(); ?>
|
||||
<form class="login-form">
|
||||
<h3><?php echo esc_html__('Two-Factor Authentication', 'really-simple-ssl'); ?></h3>
|
||||
<br>
|
||||
<p>
|
||||
<?php echo esc_html($message) ?>
|
||||
</p>
|
||||
</form>
|
||||
<?php login_footer();
|
||||
@@ -0,0 +1,113 @@
|
||||
<?php
|
||||
login_header();
|
||||
|
||||
if ( ! empty( $error_msg ) ) {
|
||||
echo '<div id="login_error" class="notice notice-error"><strong>Error: </strong>' . esc_html( $error_msg ) . '<br /></div>';
|
||||
} else {
|
||||
\RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor::maybe_show_last_login_failure_notice( $user );
|
||||
}
|
||||
?>
|
||||
|
||||
<form name="rsssl_validate_2fa_form" id="loginform"
|
||||
action="<?php echo esc_url( \RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor::login_url( array( 'action' => 'validate_2fa' ), 'login_post' ) ); ?>"
|
||||
method="post" autocomplete="off">
|
||||
<input type="hidden" name="provider" id="provider" value="<?php echo esc_attr( $provider_class ); ?>"/>
|
||||
<input type="hidden" name="rsssl-wp-auth-id" id="rsssl-wp-auth-id"
|
||||
value="<?php echo esc_attr( $user->ID ); ?>"/>
|
||||
<input type="hidden" name="rsssl-wp-auth-nonce" id="rsssl-wp-auth-nonce"
|
||||
value="<?php echo esc_attr( $login_nonce ); ?>"/>
|
||||
<?php if ( $interim_login ) { ?>
|
||||
<input type="hidden" name="interim-login" value="1"/>
|
||||
<?php } else { ?>
|
||||
<input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>"/>
|
||||
<?php } ?>
|
||||
<input type="hidden" name="rememberme" id="rememberme" value="<?php echo esc_attr( $rememberme ); ?>"/>
|
||||
|
||||
<?php $provider->authentication_page( $user ); ?>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
if ( get_class($provider) === 'RSSSL\Pro\Security\WordPress\Two_Fa\Rsssl_Two_Factor_Totp') {
|
||||
?>
|
||||
<div class="backup-methods-wrap">
|
||||
<!-- <p class="backup-methods">-->
|
||||
<!-- <a>-->
|
||||
<!-- --><?php
|
||||
// echo esc_html__('Or, enter your backup code.', 'really-simple-ssl');
|
||||
// ?>
|
||||
<!-- </a>-->
|
||||
<!-- </p>-->
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<style>
|
||||
/* @todo: migrate to an external stylesheet. */
|
||||
.backup-methods-wrap {
|
||||
margin-top: 16px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.backup-methods-wrap a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.backup-methods {
|
||||
display: none;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
/* Prevent Jetpack from hiding our controls, see https://github.com/Automattic/jetpack/issues/3747 */
|
||||
.jetpack-sso-form-display #loginform > p,
|
||||
.jetpack-sso-form-display #loginform > div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#login form p.two-factor-prompt {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.input.rsssl-authcode {
|
||||
letter-spacing: .3em;
|
||||
}
|
||||
|
||||
.input.rsssl-authcode::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
// Enforce numeric-only input for numeric inputmode elements.
|
||||
const form = document.querySelector('#loginform'),
|
||||
inputEl = document.querySelector('input.rsssl-authcode[inputmode="numeric"]'),
|
||||
expectedLength = inputEl?.dataset.digits || 0;
|
||||
|
||||
if (inputEl) {
|
||||
let spaceInserted = false;
|
||||
inputEl.addEventListener(
|
||||
'input',
|
||||
function () {
|
||||
let value = this.value.replace(/[^0-9 ]/g, '').trimStart();
|
||||
|
||||
if (!spaceInserted && expectedLength && value.length === Math.floor(expectedLength / 2)) {
|
||||
value += ' ';
|
||||
spaceInserted = true;
|
||||
} else if (spaceInserted && !this.value) {
|
||||
spaceInserted = false;
|
||||
}
|
||||
|
||||
this.value = value;
|
||||
|
||||
// Auto-submit if it's the expected length.
|
||||
if (expectedLength && value.replace(/ /g, '').length == expectedLength) {
|
||||
if (undefined !== form.requestSubmit) {
|
||||
form.requestSubmit();
|
||||
form.submit.disabled = "disabled";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,161 @@
|
||||
<?php
|
||||
// first we validate the data variables
|
||||
use RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor_Email;
|
||||
use RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor_Totp;
|
||||
|
||||
/**
|
||||
* @param $variable
|
||||
* @param $default
|
||||
* @return void
|
||||
*/
|
||||
function rsssl_check_and_set(&$variable, $default = null)
|
||||
{
|
||||
if (!isset($variable)) {
|
||||
$variable = $default;
|
||||
}
|
||||
}
|
||||
|
||||
// Use the function for all your variables
|
||||
$variables_to_check = array(
|
||||
'available_providers',
|
||||
'selected_provider',
|
||||
'rememberme',
|
||||
'interim_login',
|
||||
'nonce',
|
||||
'login_nonce',
|
||||
'action',
|
||||
'redirect_to',
|
||||
'url',
|
||||
'minified_js',
|
||||
'minified_css',
|
||||
'interim_login',
|
||||
'backup_providers',
|
||||
'provider',
|
||||
'primary_provider',
|
||||
'$skip_two_fa_url',
|
||||
'is_today'
|
||||
);
|
||||
|
||||
foreach ($variables_to_check as $var) {
|
||||
rsssl_check_and_set($$var);
|
||||
}
|
||||
login_header();
|
||||
// We create the onboarding form.
|
||||
?>
|
||||
|
||||
<form id="two_fa_onboarding_form" class="login-form" method="post">
|
||||
<h3><?php echo esc_html__('Two-Factor Authentication', 'really-simple-ssl'); ?></h3>
|
||||
<p>
|
||||
<?php
|
||||
if ($is_forced) {
|
||||
echo esc_html__(
|
||||
'This site requires you to secure your account with a second authentication method.',
|
||||
'really-simple-ssl'
|
||||
);
|
||||
} else {
|
||||
echo sprintf(esc_html__(
|
||||
'You can protect your account with a second authentication layer. Please choose one of the following methods, or click %s if you don’t want to use Two-Factor Authentication.',
|
||||
'really-simple-ssl'
|
||||
), esc_html__('Don\'t ask again', 'really-simple-ssl'));
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
<?php
|
||||
if ($is_forced && $grace_period) {
|
||||
?>
|
||||
<br/>
|
||||
<p>
|
||||
<?php
|
||||
if (!$is_today) {
|
||||
echo sprintf(esc_html__(
|
||||
'Please make sure to configure a method, access to your account will be denied if no method is configured within the next %s days.',
|
||||
'really-simple-ssl'
|
||||
), $grace_period);
|
||||
} else {
|
||||
echo esc_html__('Please make sure to configure a method, access to your account will be denied if no method is configured today.', 'really-simple-ssl');
|
||||
}
|
||||
|
||||
?>
|
||||
</p>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<div id="rsssl_step_one_onboarding" class="rsssl_step_one_onboarding">
|
||||
<?php
|
||||
// We loop through the available providers and create a radio button for each but the first one if it is TOTP is checked
|
||||
foreach ($available_providers as $provider) {
|
||||
$checked = get_class($provider) === $primary_provider;
|
||||
$provider::get_selection_option($user, $checked);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div id="rsssl_step_two_onboarding" class="rsssl_step_two_onboarding">
|
||||
<p>
|
||||
<?php
|
||||
try {
|
||||
Rsssl_Two_Factor_Totp::display_onboarding_step_totp($user);
|
||||
} catch (Exception $e) {
|
||||
// We just continue to the redirected page
|
||||
wp_redirect($redirect_to);
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
<div id="rsssl_step_three_onboarding" class="rsssl_step_three_onboarding">
|
||||
<p class="two-factor-prompt"><?php echo esc_html__('A verification code has been sent to the email address associated with your account.', 'really-simple-ssl'); ?></p>
|
||||
<p>
|
||||
<label for="rsssl-authcode"><?php echo esc_html__('Verification Code:', 'really-simple-ssl'); ?></label>
|
||||
<input type="text" inputmode="numeric" name="rsssl-two-factor-email-code" id="rsssl-authcode"
|
||||
class="input rsssl-authcode" value="" size="20" pattern="[0-9 ]*" placeholder="1234 5678"
|
||||
data-digits="8"/>
|
||||
</p>
|
||||
<p class="rsssl-two-factor-email-resend">
|
||||
<button class="button"
|
||||
id="<?php echo esc_attr(Rsssl_Two_Factor_Email::RSSSL_INPUT_NAME_RESEND_CODE); ?>"
|
||||
name="<?php echo esc_attr(Rsssl_Two_Factor_Email::RSSSL_INPUT_NAME_RESEND_CODE); ?>"><?php esc_attr_e('Resend Code', 'really-simple-ssl'); ?></button>
|
||||
</p>
|
||||
</div>
|
||||
<p class="skip_container">
|
||||
<?php
|
||||
if (!$is_forced) {
|
||||
?>
|
||||
<a href="#" id="do_not_ask_again">
|
||||
<?php echo esc_html__('Don\'t ask again', 'really-simple-ssl'); ?>
|
||||
</a>
|
||||
<a href="#" id="skip_onboarding">
|
||||
<?php echo esc_html__('Skip', 'really-simple-ssl'); ?>
|
||||
</a>
|
||||
<?php
|
||||
} else {
|
||||
// We check if there is a grace period.
|
||||
if ($grace_period) {
|
||||
?>
|
||||
<a href="#" id="skip_onboarding">
|
||||
<?php
|
||||
if ($is_today) {
|
||||
echo esc_html__('Skip (Only today remaining)', 'really-simple-ssl');
|
||||
|
||||
} else {
|
||||
echo sprintf(
|
||||
esc_html__('Skip (%1$d %2$s remaining)', 'really-simple-ssl'),
|
||||
$grace_period,
|
||||
$grace_period > 1 ? esc_html__('days', 'really-simple-ssl') : esc_html__('day', 'really-simple-ssl')
|
||||
);
|
||||
}
|
||||
?>
|
||||
</a>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<span></span>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
<input type="submit" id="rsssl_continue_onboarding" name="onboarding_submit"
|
||||
class="button button-primary button-large"
|
||||
value="<?php echo esc_html__('Continue', 'really-simple-ssl'); ?>"/>
|
||||
</p>
|
||||
</form>
|
||||
<?php
|
||||
login_footer();
|
||||
@@ -0,0 +1,133 @@
|
||||
<?php
|
||||
/**
|
||||
* This file contains the profile settings for the Two-Factor Authentication.
|
||||
* It is used to display the Two-Factor Authentication settings on the user profile page.
|
||||
* It also contains the logic to save the Two-Factor Authentication settings.
|
||||
*
|
||||
* @package really-simple-ssl-pro
|
||||
* @since 4.0.0
|
||||
*
|
||||
*/
|
||||
|
||||
require_once rsssl_path . 'security/wordpress/two-fa/class-rsssl-two-factor-settings.php';
|
||||
use RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor_Email;
|
||||
use RSSSL\Security\WordPress\Two_Fa\Rsssl_Two_Factor_Settings;
|
||||
|
||||
?>
|
||||
<br>
|
||||
<p>
|
||||
<h2><?php esc_html__('Two-Factor Authentication', 'really-simple-ssl'); ?></h2>
|
||||
<p><?php esc_html__('Two-Factor Authentication adds an extra layer of security to your account. You can enable it here.', 'really-simple-ssl'); ?></p>
|
||||
<?php if ($forced && !$one_enabled) : ?>
|
||||
<p class="notice notice-warning">
|
||||
<?php esc_html_e('Two-Factor Authentication is mandatory for your account, so you need to make a selection.', 'really-simple-ssl'); ?>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<table class="form-table rsssl-table-two-fa">
|
||||
<!-- Two-Factor Authentication Selection -->
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label for="two-factor-authentication"><?php esc_html_e('Two-Factor Authentication', 'really-simple-ssl'); ?></label>
|
||||
</th>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend class="screen-reader-text">
|
||||
<span><?php esc_html_e('Two-Factor Authentication', 'really-simple-ssl'); ?></span>
|
||||
</legend>
|
||||
<label for="two-factor-authentication">
|
||||
<input type="hidden" name="two-factor-authentication" value="<?php echo $forced ?>" />
|
||||
<input type="checkbox" name="two-factor-authentication" id="two-factor-authentication"
|
||||
value="1" <?php checked($one_enabled || $forced);
|
||||
disabled($forced) ?> />
|
||||
<?php esc_html_e('Enable Two-Factor Authentication', 'really-simple-ssl'); ?>
|
||||
</label>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Two-Factor Authentication Selection -->
|
||||
<?php if (!empty($backup_codes) && $one_enabled) : ?>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label for="two-factor-backup-codes"><?php esc_html_e('Backup Codes', 'really-simple-ssl'); ?></label>
|
||||
</th>
|
||||
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend class="screen-reader-text">
|
||||
<span><?php esc_html_e('Backup Codes', 'really-simple-ssl'); ?></span>
|
||||
</legend>
|
||||
<!-- Displaying the download for the backup codes if Two-Factor Authentication is enabled -->
|
||||
<a href="#"
|
||||
id="download_codes"><?php esc_html_e('Download Backup Codes', 'really-simple-ssl'); ?></a>
|
||||
<span class="rsssl-backup-codes warning"><?php esc_html_e('Codes only available for 5 minutes') ?></span>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
<!-- Two-Factor Authentication Method Selection -->
|
||||
<tr id="selection_two_fa">
|
||||
<th scope="row">
|
||||
<label for="two-factor-method"><?php echo esc_html__('Selected provider', 'really-simple-ssl'); ?></label>
|
||||
</th>
|
||||
<td>
|
||||
<fieldset>
|
||||
<legend class="screen-reader-text">
|
||||
<span><?php esc_html_e('Preferred Method', 'really-simple-ssl'); ?></span>
|
||||
</legend>
|
||||
<?php foreach (!$one_enabled? $available_providers:$providers as $provider) : ?>
|
||||
<label for="two-factor-method-<?php echo esc_attr($provider); ?>">
|
||||
<input type="radio" name="preferred_method" class="preferred_method_selection" id="preferred_method_<?= $provider::METHOD ?>"
|
||||
value="<?= esc_attr($provider::METHOD) ?>" <?php checked(strtolower($provider::METHOD) === strtolower(Rsssl_Two_Factor_Settings::get_login_action( $user->ID ))); ?> />
|
||||
<?= esc_html($provider::NAME) ?>
|
||||
<br/>
|
||||
<?php endforeach; ?>
|
||||
</fieldset>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr class="totp-config">
|
||||
<td>
|
||||
<div id="qr-code-container">
|
||||
<p id="two-factor-qr-code">
|
||||
<a href="<?= esc_url($totp_url) ?>">
|
||||
Loading...
|
||||
<img src="<?= esc_url(admin_url('images/spinner.gif')) ?>" alt=""/>
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin-bottom: 10px;">
|
||||
<i id="totp-key">
|
||||
<?php
|
||||
echo esc_html(__('Copy setup key', 'really-simple-ssl'));
|
||||
?>
|
||||
</i>
|
||||
</p>
|
||||
<label for="two-factor-totp-authcode">
|
||||
<strong><?php esc_html_e('Authentication Code:', 'really-simple-ssl'); ?></strong>
|
||||
<?php
|
||||
/* translators: Example auth code. */
|
||||
$placeholder = sprintf(__('eg. %s', 'really-simple-ssl'), '123 456');
|
||||
?>
|
||||
<input type="tel" name="two-factor-totp-authcode" id="two-factor-totp-authcode" class="input"
|
||||
value=""
|
||||
size="20" pattern="[0-9 ]*" placeholder="<?= esc_attr($placeholder) ?>"/>
|
||||
</label>
|
||||
<!-- TOTP hidden fields -->
|
||||
<input type="hidden" name="two-factor-totp-key" id="two-factor-totp-key"
|
||||
value="<?= esc_attr($key) ?>"/>
|
||||
<input type="hidden" name="two-factor-totp-url" id="two-factor-totp-url"
|
||||
value="<?= esc_attr($totp_url) ?>"/>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="rsssl_verify_email" class="rsssl_verify_email">
|
||||
<td colspan="2">
|
||||
<label for="rsssl-two-factor-email-code"><?php esc_html_e('Verification Code:', 'really-simple-ssl'); ?></label>
|
||||
<input type="text" inputmode="numeric" name="rsssl-two-factor-email-code" id="rsssl-two-factor-email-code"
|
||||
class="input rsssl-authcode" value="" size="20" pattern="[0-9 ]*" placeholder="1234 5678"
|
||||
data-digits="8"/>
|
||||
<p class="two-factor-prompt"><i><?php esc_html_e('A verification code has been sent to the email address associated with your account to verify functionality.', 'really-simple-ssl'); ?> <a href="#" id="rsssl_resend_code_action"> <?php esc_attr_e('Resend Code', 'really-simple-ssl'); ?></a></i></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
if (!isset($user) || !$user instanceof WP_User) {
|
||||
// We throw an error here because the $user variable is required
|
||||
throw new RuntimeException('The $user variable is required.');
|
||||
}
|
||||
//checking all other variables
|
||||
if (!isset($badge_class, $enabled_text, $checked_attribute, $title, $description, $type, $forcible)) {
|
||||
return; // Return early if variables are not set
|
||||
}
|
||||
?>
|
||||
<p>
|
||||
<label class="radio-label">
|
||||
<strong><?php echo $title ?></strong>
|
||||
<input type="radio" name="preferred_method" value="<?php echo $type ?>"
|
||||
class="radio-input" <?php echo $checked_attribute; ?>/>
|
||||
</label>
|
||||
<br>
|
||||
<?php
|
||||
echo $description;
|
||||
// Get the user's role.
|
||||
$user_roles = $user->roles;
|
||||
// If this is in the forced roles, we do not show the "disable" link.
|
||||
?>
|
||||
</p>
|
||||
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
// Ensure the $user variable is available
|
||||
if (!isset($user) || !$user instanceof WP_User) {
|
||||
// We throw an error here because the $user variable is required
|
||||
throw new RuntimeException('The $user variable is required.');
|
||||
}
|
||||
|
||||
if (isset($_GET['error']) && $_GET['error'] === 1) {
|
||||
?>
|
||||
<p class="error">
|
||||
<?php echo esc_html__('Authentication code is incorrect.', 'really-simple-ssl'); ?>
|
||||
</p>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<br/>
|
||||
<p>
|
||||
<strong><?php echo esc_html__('Install Authentication app:', 'really-simple-ssl'); ?></strong><br/>
|
||||
<?php
|
||||
printf(
|
||||
// Translators: %s is the hyperlink for "Download"
|
||||
esc_html__('Use your authenticator app like Google Authenticator to scan the QR code below, then paste the provided Authentication code. %s', 'really-simple-ssl'),
|
||||
'<a id="download_codes" href="#">' . esc_html__('Download Backup Codes', 'really-simple-ssl') . '</a>'
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
<p id="two-factor-qr-code">
|
||||
<a href="#">
|
||||
Loading...
|
||||
<img src="<?php echo esc_url(admin_url('images/spinner.gif')); ?>" alt=""/>
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin-bottom: 10px;">
|
||||
<i id="totp-key">
|
||||
<?php
|
||||
echo esc_html__('Copy setup key', 'really-simple-ssl');
|
||||
?>
|
||||
</i>
|
||||
</p>
|
||||
<p>
|
||||
<label for="two-factor-totp-authcode">
|
||||
<strong><?php echo esc_html__('Authentication Code:', 'really-simple-ssl'); ?></strong>
|
||||
<?php
|
||||
/* translators: Example auth code. */
|
||||
$placeholder = sprintf(esc_html__('eg. %s', 'really-simple-ssl'), '123 456');
|
||||
?>
|
||||
<input type="tel" name="two-factor-totp-authcode" id="two-factor-totp-authcode" class="input" value=""
|
||||
size="20" pattern="[0-9 ]*" placeholder="<?php echo esc_attr($placeholder); ?>"/>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<input type="submit" class="button button-primary button-large totp-submit" name="two-factor-totp-submit"
|
||||
id="two-factor-totp-submit"
|
||||
value="<?php echo esc_html__('Submit', 'really-simple-ssl'); ?>"/>
|
||||
@@ -0,0 +1 @@
|
||||
#two-factor-qr-code{display:flex;justify-content:left;align-items:center;width:100%;min-height:100%}#qr-code-container{margin-bottom:20px;position:relative;text-align:center}#two-factor-totp-authcode{width:100%}tr.rsssl_verify_email{display:none}.error{color:red;margin-top:-5px}span.rsssl-backup-codes{padding:5px;background:#fbebed;border-radius:8px;box-shadow:rgba(0,0,0,0.1) 0 4px 6px -1px}.input{margin-bottom:5px !important}#totp-key{cursor:pointer;display:flex;justify-content:center;align-items:center}table.rsssl-table-two-fa{padding-bottom:20px}.rsssl-methods-tag{padding:2px 5px;border:1px solid #000;color:#000;margin-left:5px;background:dimgrey}.rsssl-methods-tag.active{background:darkgreen;color:#fff}.radio-input{position:absolute;right:0;margin-left:10px;vertical-align:middle;top:5px}.radio-label{display:inline-block;vertical-align:middle;width:100%;position:relative;margin:20px 0}.badge{margin-left:10px;padding:2px 4px}.badge-default{background-color:#e5e5e5;color:black}.badge-enabled{background-color:#fbc43e;color:black}#two_fa_onboarding_form{margin-top:20px}#two_fa_onboarding_form div{transition:height .5s}#skip_onboarding{margin-right:20px}.skip_container{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.skip_container a{text-decoration:none}.totp-submit{margin-top:10px}div.rsssl_step_one_onboarding{display:block}div.rsssl_step_two_onboarding{display:none}div.rsssl_step_three_onboarding{margin-top:10px;display:none}#two-factor-qr-code{display:flex;justify-content:center;align-items:center;min-width:205px;min-height:205px}.error{color:red;margin-top:-5px}.input{margin-bottom:5px !important}#totp-key{cursor:pointer;display:flex;justify-content:center;align-items:center}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,174 @@
|
||||
#two-factor-qr-code {
|
||||
display: flex;
|
||||
/* Enables Flexbox */
|
||||
justify-content: left;
|
||||
/* Centers horizontally */
|
||||
align-items: center;
|
||||
/* Centers vertically */
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#qr-code-container {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#two-factor-totp-authcode {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr.rsssl_verify_email {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
span.rsssl-backup-codes {
|
||||
padding: 5px;
|
||||
background: #fbebed;
|
||||
border-radius: 8px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
#totp-key {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
/* Enables Flexbox */
|
||||
justify-content: center;
|
||||
/* Centers horizontally */
|
||||
align-items: center;
|
||||
/* Centers vertically */
|
||||
}
|
||||
|
||||
table.rsssl-table-two-fa {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.rsssl-methods-tag {
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #000;
|
||||
color: #000;
|
||||
margin-left: 5px;
|
||||
background: dimgrey;
|
||||
}
|
||||
|
||||
.rsssl-methods-tag.active {
|
||||
background: darkgreen;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Style radio inputs */
|
||||
.radio-input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-left: 10px;
|
||||
/* Adjust this value to your preferred spacing */
|
||||
vertical-align: middle;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
/* Style radio labels */
|
||||
.radio-label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: 10px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
background-color: #e5e5e5;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.badge-enabled {
|
||||
background-color: #fbc43e;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/**
|
||||
* The following styles are for the onboarding form
|
||||
*/
|
||||
#two_fa_onboarding_form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#two_fa_onboarding_form div {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
|
||||
#skip_onboarding {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.skip_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.skip_container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.totp-submit {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.rsssl_step_one_onboarding {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.rsssl_step_two_onboarding {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.rsssl_step_three_onboarding {
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#two-factor-qr-code {
|
||||
display: flex;
|
||||
/* Enables Flexbox */
|
||||
justify-content: center;
|
||||
/* Centers horizontally */
|
||||
align-items: center;
|
||||
/* Centers vertically */
|
||||
min-width: 205px;
|
||||
min-height: 205px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
#totp-key {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
/* Enables Flexbox */
|
||||
justify-content: center;
|
||||
/* Centers horizontally */
|
||||
align-items: center;
|
||||
/* Centers vertically */
|
||||
}
|
||||
Reference in New Issue
Block a user