#mask { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .4); display: none; visibility: hidden; &.open { display: block; visibility: visible; z-index: 250; } } .tux { position: absolute; top: 12px; left:50%; transform: translateX(-50%); h1 { font-weight: 300 !important; color: $blue-grey-900; font-size: 20px; line-height: 28px; margin-bottom: 0; strong { font-weight: 700 !important; } } h1:before { content: ""; height: 32px; width: 25px; background-image: url('../img/ipfire-tux.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; display: inline-block; position: relative; } } .menu-text { transition: opacity .25s ease-in-out; } .menu-text.hidden { opacity: 0; transition: opacity .35s ease-in-out; } .fixed-top { transition: background-color .25s linear; height: 56px; @include media-breakpoint-up(sm) { height: 72px; } @include media-breakpoint-up(lg) { height: 96px; } .navbar { width: 100%; z-index: 500; a { color: $blue-grey-900; @include media-breakpoint-up(sm) { margin-top: 8px; } } .navbar-toggler-left { left: -12px; top: 8px; @include media-breakpoint-up(sm) { top: 17px; } } .btn { margin-top: .15rem; } } } .navbar-brand { font-size: 20px; font-weight: 300; opacity: 0; margin: 0; transition: opacity .7s linear; @include media-breakpoint-up(lg) { opacity: 1; font-size: 36px; } strong { font-weight: 900; } img { margin-right: 4px; transform: translateY(-5px); height: 32px; width: auto; @include media-breakpoint-up(lg) { height: 40px; } } } .scrolled { background-color: rgba(255, 255, 255, .96); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25); height: 56px; @include media-breakpoint-up(sm) { height: 72px; } @include media-breakpoint-up(lg) { height: 96px; } .navbar-brand { opacity: 1; } } .scrolled.fadeout { background-color: rgba(100, 100, 100, .5); a.btn-donate { opacity: .5; } a.navbar-brand { opacity: .5; } } #navbarSupportedContent { width: 100%; @include media-breakpoint-down(md) { background: white; position: fixed; top: 0; left: 0; width: 256px; height: 100vh; padding-top: 64px; transform: translateX(-256px); transition: all .15s ease-in-out; &.open { transform: translateX(0); transition: all .15s ease-in-out; box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); } } } .navbar-nav { @include media-breakpoint-up(lg) { padding-top: 2px; } } .navbar-nav .nav-link { color: $blue-grey-900; padding: 16px !important; display: block; position: relative; @include media-breakpoint-up(lg) { margin-right: 16px; display: block; position: relative; &:after { content: ""; border-bottom: 2px solid $red_900; position: absolute; transform: scaleX(0); width: 100%; left: 0; top: 44px; padding: inherit; transition: transform .3s ease-out, color .3s ease-out; } } } .navbar-nav .nav-link:active { @include media-breakpoint-down(lg) { color: $red_900 } } .navbar-nav .nav-link:active:before { @include media-breakpoint-down(lg) { content: ""; border-left: 2px solid $red_900; position: absolute; left: 0; height: 36px; transform: translateY(-4px); } } .navbar-nav .nav-link:hover { @include media-breakpoint-up(lg) { color: $red_900; } } .navbar-nav .nav-link:hover:after { @include media-breakpoint-up(lg) { transform: scaleX(1); } } body.About li.nav-item a.about, body.Download li.nav-item a.download, body.Support li.nav-item a.support, body.Involved li.nav-item a.community { @include media-breakpoint-up(lg) { color: $red_900; &:after { content: ""; border-bottom: 2px solid $red_900; position: absolute; width: 100%; left: 0; top: 44px; padding: inherit; transform: scale(1); } } } #sidebar { padding: 0; @include media-breakpoint-down(sm) { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); position: fixed; top: 52px; z-index: 200; background-color: white; } ul { list-style: none; &.features_nav { padding: 0 0 24px 0; overflow-x: auto; &.fixed { position: fixed; top: 100px; outline: 1px solid grey; } } ul { margin: 0; padding-left: 0; li:last-child { margin-bottom: 0; } } li { padding: 0 16px; margin: 8px 0; a.nav-link { padding: inherit; color: $blue-grey-900; height: 32px; padding: 0 8px; line-height: 2; &.active { color: $red_900; border-left: 2px solid $red_900; padding: 0 8px 0 6px; } } } } } // Feature mobile Menu /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; } nav[role="dropdown"] { label { display: none; } } @media screen and (max-width: 44em) { nav[role="dropdown"] { ul { height: 48px; overflow: hidden; } label { position: relative; display: block; width: 100%; } label:after { font-family: FontAwesome; font-size: 24px; content: "\f107"; position: absolute; top: 0; right: 0; z-index: 9999; width: 100%; height: 56px; padding: 12px 12px 0; text-align: right; } input:checked ~ label:after { content: "\f106"; } input:checked ~ ul { display: block; height: 40vh; overflow-y: scroll; } } }