Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/mets.corals.io/wp-content/plugins/ultimate-blocks/admin/css/src/ |
@import "./base/common";
@import "./base/themes/admin-menu-theme";
.ub-admin-menu-wrapper {
@extend %size-full;
font-family: $font-family;
font-size: $font-size;
position: absolute;
background-color: $gray-300;
color: $text-color;
z-index: 10;
.ub-admin-menu-container {
@extend %size-full;
background-color: $white;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
& > div {
padding: 0 100px 0 100px;
@include screen-max($screen-2xl) {
padding: 0 50px 0 50px;
}
}
.menu-header {
padding-top: 10px;
padding-bottom: 10px;
@extend %box-shadow-lg;
display: flex;
align-items: center;
justify-content: space-between;
background-color: $gray-100;
.logo-container {
height: $logo-height;
img {
height: 100%;
}
}
.right-container {
@extend %flex-center-all-row;
height: 100%;
.right-container-item {
@extend %flex-center-all;
height: 100%;
padding: 0 10px;
&:not(.right-container-item:last-of-type) {
border-right: 2px solid $gray-300;
}
}
.version-control-container {
@extend %flex-center-all-row;
& > div {
padding: 0 5px;
}
.version-control-text {
@extend %unselectable;
}
.version-control-status-indicator {
@include size(15);
border-radius: 100%;
padding: 0 !important;
&[data-level='none'] {
background-color: $green-500;
}
&[data-level='medium'] {
background-color: $yellow-500;
}
&[data-level='high'] {
background-color: $red-500;
}
}
.version-control-button {
@extend %pointer;
&[data-disabled='true'] {
color: $gray-300;
cursor: default;
pointer-events: none;
}
}
}
.blog-info-toggle {
@extend %default-transition;
@extend %pointer;
padding: 5px;
color: $gray-300;
&[data-light-it-up='true'] {
color: $yellow-500;
}
& svg {
@include size(25);
}
}
}
}
.menu-content {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
justify-content: center;
justify-items: center;
overflow: auto;
.content-phrase {
@extend %flex-center-all;
@extend %unselectable;
flex-direction: column;
font-size: $phrase-font-size;
margin: 60px 0;
.line-wrapper {
margin: 15px 0;
font-weight: 400;
}
.text-indicate {
color: $red-500;
font-weight: 500;
}
}
.block-status-filter-control {
@extend %default-border;
@extend %pill;
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
padding: 5px;
justify-content: center;
align-items: center;
.active-indicator {
@extend %default-transition;
@extend %pill;
position: absolute;
width: 10px;
height: 30px;
background-color: $red-500;
z-index: 9;
}
.filter-control-item {
@extend %flex-center-all;
@extend %default-transition;
@extend %unselectable;
cursor: pointer;
padding: 5px 20px;
text-transform: capitalize;
z-index: 10;
&[data-active="true"] {
color: $white;
}
}
}
.controls-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
height: fit-content;
margin: 30px 0;
border-radius: 5px;
&[data-show-info="false"] .block-control {
& > div:not(.block-title) {
display: none;
}
}
.block-control {
@extend %box-shadow-md;
@extend %default-transition;
@extend %default-border;
overflow: hidden;
width: $block-control-width;
max-width: $block-control-width;
height: $block-control-height;
border-radius: $block-control-border-radius;
margin: $block-control-y-margin $block-control-x-margin;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "title" "info" "howTo";
&[data-initial-animation="true"] {
transition: none;
}
&[data-enabled='false'] {
border-color: $gray-500;
}
&[data-enabled='false'] .block-title {
background-color: $gray-400;
color: $gray-500;
}
&[data-enabled='false'] .title-icon {
fill: $gray-500;
svg {
fill: $gray-500;
* {
fill: $gray-500;
}
}
}
&[data-enabled='false'] .block-info {
color: $gray-500;
}
.block-info {
@extend %flex-center-all;
grid-area: info;
padding: 10px;
overflow: auto;
.info-line {
//@extend %flex-center-all;
text-align: center;
}
}
.block-title {
@extend %default-transition;
@extend %unselectable;
grid-area: title;
display: flex;
justify-content: space-between;
align-items: center;
padding: $block-control-padding;
background-color: $block-title-bg;
font-size: $block-title-font-size;
color: $block-title-color;
.block-title-left-container {
display: flex;
justify-content: flex-start;
align-items: center;
.title-icon {
@extend %default-transition;
width: $block-title-icon-size;
height: $block-title-icon-size;
margin-right: 10px;
svg {
@extend %default-transition;
width: $block-title-icon-size;
height: $block-title-icon-size;
* {
@extend %default-transition;
}
}
}
}
}
.block-howto {
@extend %flex-center-all;
padding: $block-control-padding;
grid-area: howTo;
}
}
}
}
}
.ub-toggle-control {
@extend %default-transition;
@extend %pill;
position: relative;
width: 42px;
height: 20px;
background-color: $red-500;
border: 2px solid $red-500;
cursor: pointer;
&[data-enabled='false'] {
background-color: $gray-500;
border: 2px solid $gray-500;
}
.knob {
@extend %default-transition;
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: $white;
}
&[data-enabled='true'] .knob {
left: calc(100% - 20px);
}
}
}
.block-control-transition-enter {
opacity: 0
}
.block-control-transition-enter-active {
opacity: 1;
transition: opacity 0.5s ease-out;
}
.block-control-transition-exit {
opacity: 1;
}
.block-control-transition-exit-active {
opacity: 0;
transition: opacity 0.5s ease-out;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes disappear {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.visibility-wrapper {
&[data-visible='true'] {
display: block !important;
animation: appear 0.2s ease-out forwards;
}
&[data-visible='false'] {
animation: disappear 0.2s ease-out forwards;
}
}
.version-control-popup {
@extend %flex-center-all;
position: fixed;
inset: 0;
background-color: $version-control-popup-bg;
z-index: 10000;
font-family: $font-family;
font-size: $version-control-general-font-size;
.modal-container {
@extend %default-border;
background-color: $white;
border-radius: $block-control-border-radius;
overflow: hidden;
padding: 20px 60px;
& > div {
margin: 10px 0;
}
.version-content {
@extend %flex-center-all;
margin-top: 30px;
& > div {
margin-top: 20px;
& > div:not(div:first-child) {
margin-top: 20px;
}
& > div {
@extend %flex-center-all;
}
}
.operation-finished-wrapper {
.version-control-response {
font-weight: bold;
color: $positive;
&[data-resp-type='error'] {
@extend .ub-negative-color;
}
}
}
.version-warning {
@extend %flex-center-all;
flex-direction: column;
@extend %unselectable;
}
.version-rollback-button-container {
@extend %flex-center-all-row;
}
}
.rollback-versions {
@extend %flex-center-all;
.version-id {
@extend %unselectable;
font-size: $versions-font-size;
font-weight: bold;
margin: 0 40px;
}
.version-icon {
@extend %flex-center-all;
width: fit-content;
height: fit-content;
overflow: hidden;
&[data-in-progress='true'] .version-icon-inner-wrapper {
@extend %default-transition;
animation: stay-a-while-and-listen 2s ease-out infinite;
}
.version-icon-inner-wrapper {
padding: 0 10px;
}
svg {
width: 2.5rem;
height: 2.5rem;
}
}
}
}
}
@keyframes stay-a-while-and-listen {
0% {
transform: translateX(-100%);
}
40% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.ub-menu-button {
@extend %flex-center-all;
@extend %default-transition;
@extend %unselectable;
padding: 10px 20px;
background-color: $red-500;
color: $white;
font-size: 0.8rem;
cursor: pointer;
border-radius: 5px;
margin: 10px 20px;
&[data-enabled='false'] {
background-color: $gray-800 !important;
cursor: default;
}
&[data-enabled='true']:active {
transform: scale(0.8);
}
}