transition delete after i open the navbar. what happen? - javascript

I have a navbar opening div when i hover on it, it shows a tip(something like that) and when i hover on tip it will disappear.
the tip has got a transition But when i open and close the navbar the transition will deleted and when i hover on tip it wont disappear.
its the code:
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
document.getElementById("menu-icon-tip").style.opacity = "0";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
what can i do?
it is the video

you are overriding the transition.
use .active class and toggle this class
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.add('active');
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.remove('active');
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip.active {
opacity: 1;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>

You are overriding your css transition with your javascript
You should remove any style modification you're applying on .menu-icon-tip
document.getElementById("menu-icon-tip").style.opacity = "0";
And
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
They're useless and are messing with your animations.

Related

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?
Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash
For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

card shadow effect not working (due to hover not working)

I'm trying to get the cards ('.card', '.card p' and '.card p:hover' classes) to darken their shadow after hovering over them with the cursor, sadly nothing is happening. The navigation bar's hover function works fine though. The javascript code is used to make the navigation bar follow you down as you scroll.If anyone has enough free time to help me fix this problem, then thanks.
Also there is another problem: If you run the code in chrome and maximise the window, you can't scroll to the very bottom (using windows 10). If you can fix this problem too, then thanks.
$(function() {
// Stick the #nav to the top of the window
var navigation = $('.navigation');
var navigationHomeY = navigation.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navigationHomeY;
if (shouldBeFixed && !isFixed) {
navigation.css({
position: 'fixed',
top: 0,
left: 0,
marginright: 0
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
navigation.css({
position: 'relative',
left: 0,
marginright: 0
});
isFixed = false;
}
});
});
{
-webkit-font-smoothing: antialiased;
}
body {
margin: 0%;
font-family: Helvetica;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: #cccccc;
color: white;
z-index: 1;
}
.card {
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
z-index: -2;
}
.card p {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card:hover p {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
color: blue;
}
.navigation {
list-style-type: none;
position: relative;
left: 0px;
margin-right: 0px;
width: 100%;
top: 7.2%;
background-color: #cccccc;
box-shadow: 0px 3px 25px grey;
z-index: 0;
}
.wrap {
margin: 10px auto;
background: #cccccc;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.navWrap {
height: 30px;
width: 100%;
z-index: 0;
}
.li a {
float: left;
display: block;
text-align: center;
padding: 1%;
color: white;
text-decoration: none;
transition: 0.5s;
}
.li a:hover:not(.active) {
background-color: #e6e6e6;
}
.active {
background-color: #3399ff;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
br.clearLeft {
clear: left;
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>
<div class="navwrap">
<div class="navigation" ;>
<div class="li a" ;>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<br class="clearLeft" />
</div>
</div>
</div>
<div class="card" ;>
<div class="card p" ;>
<p>
Example text
</p>
<p>
Example text 2
</p>
<p>
Example text 3
</p>
<p>
Example text 4
</p>
</div>
</div>
Your :hover is not working because you are applying z-index:-2 on .card...so better to remove it...
Also I has changed some of your css and html part to clean the code...
Stack Snippet
//<![CDATA[
$(function() {
// Stick the #nav to the top of the window
var navigation = $('.navigation');
var navigationHomeY = navigation.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navigationHomeY;
if (shouldBeFixed && !isFixed) {
navigation.css({
position: 'fixed',
top: 0,
left: 0,
marginright: 0
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
navigation.css({
position: 'relative',
left: 0,
marginright: 0
});
isFixed = false;
}
});
});
{
-webkit-font-smoothing: antialiased;
}
body {
margin: 0%;
font-family: Helvetica;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: #cccccc;
color: white;
z-index: 1;
}
.card {
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.card p {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card p:hover {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
color: blue;
}
.navigation {
list-style-type: none;
position: relative;
left: 0px;
margin-right: 0px;
width: 100%;
top: 7.2%;
background-color: #cccccc;
box-shadow: 0px 3px 25px grey;
z-index: 0;
}
.wrap {
margin: 10px auto;
background: #cccccc;
padding: 10px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.navWrap {
height: 30px;
width: 100%;
z-index: 0;
}
.li a {
float: left;
display: block;
text-align: center;
padding: 1%;
color: white;
text-decoration: none;
transition: 0.5s;
}
.li a:hover:not(.active) {
background-color: #e6e6e6;
}
.active {
background-color: #3399ff;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
br.clearLeft {
clear: left;
}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>
<div class="navwrap">
<div class="navigation">
<div class="li a">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<br class="clearLeft" />
</div>
</div>
</div>
<div class="card">
<p>
Example text
</p>
<p>
Example text 2
</p>
<p>
Example text 3
</p>
<p>
Example text 4
</p>
</div>

Height attribute messing with frontend visibility?

I am trying to create a list of notes on my website.
I currently have a problem where I have a gradient background color when you hover over the different note titles. This for some reason requires a height.
If I do not have this height attribute (the height attribute for .blur-container), the background won't switch colors when I hover. However, the note text is shown as expected:
Before clicking the title:
https://gyazo.com/4619429746b1de039987be48a7480917
After clicking the title:
https://gyazo.com/999277ba3939bfd875ca4562c935ac3c
If I DO have the height attribute, The background goes a little white as expected, however when I click on the title, the note text does not show.
When hovering over title:
https://gyazo.com/b70eddd96e45836296e20a21c329754a
What is the issue here and how can I fix it? I pasted my html and CSS below:
HTML:
<div class="task-notes-container">
<input type="text" value="" class="form-control task-notes" placeholder="Title" (keyup)="addNotesItem($event)" [(ngModel)]="newNotesTitle"/>
<i (click)="addNotesItem($event)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="notes-list">
<li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
(mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
<div class="blur-container" [ngClass]="{'changeHeight': item.expand}"><div class="blur-box"></div></div>
<div class="note-title" (click)="expandItem(item);">
<i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
<label>
<span class="cut-with-dots"><b>{{ item.title }}</b></span>
</label>
<i class="remove-notes ion-ios-close-empty" (click)="item.deleted = true"></i>
</div>
<div [hidden]="!item.expand">
<p [hidden]="item.hide || item.text == ''" (click)="noteTextClick(item, focusable);" [innerHTML]="item.text"></p>
<div [hidden]="!item.hide && item.text != ''">
<textarea placeholder="haha" [(ngModel)]="item.text" (blur)="onTextBlur(item);" (focus)="onTextFocus(item);" placeholder="Default Input" class="form-control" id="textarea01" #focusable></textarea>
</div>
</div>
</li>
</ul>
</div>
CSS:
#import '../../../theme/sass/conf/conf';
input.task-notes {
margin-bottom: 8px;
}
ul.notes-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
div.note-title {
height: 42px;
}
i.remove-notes {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
&:hover {
i.remove-notes {
visibility: visible;
}
}
&.checked {
.notes-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.notes-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
}
}
label.notes-checkbox > input:checked + span:before {
content: '\f00c';
}
}
}
}
label.notes-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}
.add-item-icon {
display: none;
}
.ng2, .blur {
.task-notes-container {
.notes-panel.panel {
color: white;
opacity: 0.9;
}
input.task-notes {
color: white;
width: calc(100% - 25px);
border-radius: 0;
border: none;
background: transparent;
&:focus {
outline: none;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
}
.add-item-icon {
display: block;
float: right;
margin-top: -45px;
margin-right: 5px;
font-size: 25px;
cursor: pointer;
}
ul.notes-list {
li {
margin: 0;
border: none;
font-weight: $font-light;
.blur-container {
height: 40px;
position: absolute;
width: calc(100% + 40px);;
top: 0;
left: -25px;
overflow-y: hidden;
}
.changeHeight {
height: auto;
}
&:hover {
.blur-container {
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.blur-box {
cursor: pointer;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-filter: blur(3px);
}
}
i.remove-notes {
color: white;
opacity: 0.4;
&:hover {
color: white;
opacity: 0.95;
}
}
i.mark {
min-width: 40px;
display: none;
}
label.notes-checkbox > span {
&:before {
position: absolute;
color: $content-text;
content: '\f10c';
float: none;
margin-right: 6px;
transition: none;
}
}
&.checked {
label.notes-checkbox > span {
&:before {
content: '\f00c';
}
}
}
}
}
.box-shadow-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
width: calc(100% + 44px);
margin-left: -22px;
}
}
}

CSS or JS conflict?

I'm a novice so this may seem like a rather basic problem.
A html page has 4 html embedded audio players which looked as styled and worked fine.
I then added a slide player called Fancy Box. The CSS and JS files are linked to separate folders than the CSS and JS files of the audio player.
The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.
Is there a CSS or JS conflict of some sort?
Any advice is much appreciated in solving my dilemma.
(Sorry for all my incompetence.)
Here is the HTML and Both CSS.
/** audio player styles **/
.audio-player,
.audio-player div,
.audio-player h2,
.audio-player a,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.audio-player {
position: relative;
width: 300px;
height: 70px;
margin: 0 auto;
}
.audio-player h2 {
position: absolute;
top: 7px;
left: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* play/pause control */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 34px;
height: 34px;
top: 32px;
left: 7px;
background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -35px;
}
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 23px;
right: 85px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 85px;
height: 11px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 9px;
top: 1px;
left: 1px;
background: #c82530;
background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);
background: linear-gradient(top, #c82530 0%, #c82530 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
width: 160px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 160px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #565860;
width: 160px !important;
/* fixes display bug using jQuery 1.8+ */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #7b7d82;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #00873d;
background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: linear-gradient(top, #00873d 0%, #83bb63 100%);
}
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 20px;
height: 22px;
top: -6px;
background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -1px;
background: url('handle-sm.png') no-repeat;
}
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
z-index: 9999;
background: url('time-box.png');
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666;
text-align: center;
z-index: 9999;
}
/** clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Paul Minotto: Music</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
a:link {
color: #00873d;
text-decoration: none;
}
a:visited {
color: #cc3333;
text-decoration: none;
}
a {
font-size: 14px;
}
a:hover {
color: #cc3333;
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 36px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.green {color: #11772E;
}
.red {color: #cc3333;
}
#rcorners { border-radius: 45%;
border: 5px solid #000000;
padding: 0px;
width: 700px;
height: 130px;
}
.color {
color: #FFF;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
<title>slideShow</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>
<link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
</head>
CSS for slide show player.
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #FFF;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 0px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}

Categories