A CSS Blunder!

DreamStreetPortraits

Hello!

I have had a little CSS mishap.

At some point yesterday, as I was editing my site's CSS code, for some silly reason, I tried adding a loading message to the search page https://www.dreamstreetportraits.com/search.

I thought I deleted the HTML code and corresponding CSS before even publishing the edits. Not the case. Now it is somehow hiding in my HTML. The HTML block I added and pasted it into is missing. It makes me feel very uneasy.

I have the Unofficial SmugMug Chrome Extension, which allows me to backup and view my entire site. I have searched for the code and found it using this extension. However, it does not show up as an editable HTML content block on the Search Page, as it should.

I have tried editing the Search Page CSS to hide the ugly loading message box and nearly locked myself out of the page. Well, I did lock myself out. Then found a way to reverse the CSS that locked me out. It has been fun. Okay, not fun. But an adventure nonetheless. I have wisely decided to stop attempting to hide it and seek professional help.

Please help me remove this insidious and ill-mannered loading message box! I would recreate the page. But, this is the search page. Is replacing the page somehow possible? How can I remove this from my site? ☹

Below is how it shows up in my backup JSON FILE:

"UnsafeCSS": ".lmask{display:none}\n\n.sm-page-hasbackground .sm-page-background .sm-page-background-mask.sm-page-background-mask-opacity-low {\n opacity: .45;\n}\n\n/* Removes Breadcrumb /\n.sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-user-ui \n.sm-breadcrumbs-separator {\n display: none;}\n\n/ Changes Recent Galleries Font /\n.sm-user-ui .sm-page-widget-button .sm-button.sm-button-skin-accent {\n border-color: #4580F0;\n Border-width: 3px;\n font-weight: 350;\n}\n\n/ Changes Recent Galleries on Hover /\n.sm-user-ui .sm-page-widget-button .sm-button.sm-button-skin-accent:hover {\n \tbackground-color: rgba(255, 255, 255, .15);\n transition: background 1.0s ease 0s;\n}\n\n\n\n\n/ Changes Search Bar/\n.sm-user-ui .sm-search-input .sm-form-field-text-input {\n background-color: #99A3BD;\n border-color: #A3ADC4;\n border-radius: 5px;\n}\n\n/ Changes Search Bar/\n.sm-user-ui .sm-button.sm-button-skin-accent, \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled], \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled]:hover, \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled]:active {\n \tborder-radius: 5px;\n}",
"CSS": ".lmask{display:none}\n\n.sm-page-hasbackground .sm-page-background .sm-page-background-mask.sm-page-background-mask-opacity-low {\n opacity: .45;\n}\n\n/ Removes Breadcrumb /\n.sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-user-ui \n.sm-breadcrumbs-separator {\n display: none;}\n\n/ Changes Recent Galleries Font /\n.sm-user-ui .sm-page-widget-button .sm-button.sm-button-skin-accent {\n border-color: #4580F0;\n Border-width: 3px;\n font-weight: 350;\n}\n\n/ Changes Recent Galleries on Hover /\n.sm-user-ui .sm-page-widget-button .sm-button.sm-button-skin-accent:hover {\n \tbackground-color: rgba(255, 255, 255, .15);\n transition: background 1.0s ease 0s;\n}\n\n\n\n\n/ Changes Search Bar/\n.sm-user-ui .sm-search-input .sm-form-field-text-input {\n background-color: #99A3BD;\n border-color: #A3ADC4;\n border-radius: 5px;\n}\n\n/ Changes Search Bar*/\n.sm-user-ui .sm-button.sm-button-skin-accent, \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled], \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled]:hover, \n.sm-user-ui .sm-button.sm-button-skin-accent[disabled]:active {\n \tborder-radius: 5px;\n}",

And here is the original code I added used. It was found on https://codepen.io/bartezic/pen/ByqeNq (in case that helps).

HTML:

CSS:

.lmask {
position: absolute;
height: 100%;
width: 100%;
background-color: #000;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 9999;;
opacity: 0.4;
&.fixed {
position: fixed;
}
&:before {
content: '';
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;

margin: -25px 0 0 -25px;
position: absolute;
top: 50%;
left: 50%;

}
&:after {
content: '';
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;

margin: -15px 0 0 -15px;
position: absolute;
top: 50%;
left: 50%;

}
}

@-moz-keyframes spinPulse {
0% {
-moz-transform:rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
}
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

Any help will be greatly appreciated!

Kind regards,
Emrys

Hikin' Mike

Contact the help desk. Us members here can't reset your "goofs".

DreamStreetPortraits

I have sent it to them too. Goof is fitting :')
Thanks!