src/components/molecules/NavBar/playa.scss
@import "scss/constants.scss";
$gradient: linear-gradient(-124deg, #e15ada 0%, #6f43ff 50%, #00f6d5 100%);
// @debt Refactor the relevant parts of this file into ./NavBar.scss
.navbar.navbar_playa {
position: fixed;
z-index: z(navbar);
top: 0;
left: 0;
width: 100%;
height: 66px;
border-bottom: 1px solid var(--accent--over-20a);
box-shadow: box-shadow--large(var(--content--under-10a));
backdrop-filter: blur(5px);
background-color: $content--under;
padding: 0 1rem;
.navbar-container {
display: flex;
justify-content: space-between;
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
.navbar-logo_container {
display: flex;
align-items: center;
}
.navbar-logo {
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
img {
width: 240px;
&.sparkle {
width: 180px;
}
}
}
.navbar-info {
padding: 4px 10px 0 10px;
}
.navbar-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
// @debt hack-fix to hide dropdown under navbar replacing transparent color by inherited black
// a better solution discussed here https://github.com/sparkletown/sparkle/pull/1350#discussion_r622895298
background-color: inherit;
.navbar-link-message,
.navbar-link-profile,
.navbar-link-menu,
.navbar-link-radio,
.navbar-link-schedule,
.navbar-link-gift {
display: block;
height: 40px;
width: 40px;
background-color: opaque-black(0.4);
border-radius: 20px;
margin-right: $margin-right--navbar-links;
&:hover {
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}
&.navbar-link-message {
background-image: url(/assets/icons/navbar-link-message.png);
background-size: 40px 40px;
}
&.navbar-link-profile {
background-size: 40px 40px;
}
&.navbar-link-menu {
background-image: url(/assets/icons/navbar-link-menu.png);
background-size: 40px 40px;
background-color: opaque-black(0);
&:hover {
background-color: opaque-black(0.3);
}
}
&.navbar-link-radio {
background-image: url(/assets/icons/navbar-link-radio.png);
background-size: 80px 40px;
animation: radioanim 2s steps(2) infinite;
&.off {
background-image: url(/assets/icons/navbar-link-radio-off.png);
background-size: 40px 40px;
animation: none;
}
}
&.navbar-link-schedule {
width: auto;
background-image: $gradient;
color: $content--over;
line-height: 42px;
padding: 0 10px;
font-size: 0.9rem;
font-weight: 500;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
&.navbar-link-gift {
background-image: url(/assets/icons/navbar-link-gift.png);
background-size: 40px 40px;
}
}
}
.venue-bar {
text-align: center;
.venue-name {
font-size: 1.8em;
font-weight: 700;
}
// .back-link {
// letter-spacing: 1.5px;
// font-size: 1.3em;
// cursor: pointer;
// &:hover {
// text-decoration: underline;
// }
// }
}
.navbar-dropdown-middle {
padding: 0 30px;
position: relative;
display: block;
height: 100%;
max-width: 500px;
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
&:after {
content: "";
position: absolute;
height: 16px;
width: 74px;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
background-image: url(/assets/icons/navbar-dropdown-middle-after.png);
background-size: 74px 64px;
}
&:hover {
background-color: rgba(0, 0, 0, 0.2);
&:after {
background-position: 0 -16px;
}
}
span,
// .back-link {
// display: block;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// line-height: 66px;
// text-shadow: 0 2px 4px rgba(0, 0, 0, 0.21);
// }
.search-icon {
margin-right: 10px;
}
}
}
&.nonplaya {
.navbar-container {
.navbar-dropdown-middle {
background-color: rgba(255, 255, 255, 0.1);
&:after {
content: none;
}
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
}
}
}
@media (max-width: $auth-container-max-width) {
.login-container {
border-radius: 0;
}
}
@keyframes radioanim {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: -80px 0;
}
}