More accurate navbar hovers.
Replaces the background gradient with accurate hovers roblox used at the time, also made the submenu a bit more accurate as well as fixing the text alignment.
This commit is contained in:
tersiswilvin
parent
9a5582f953
commit
053458916d
|
|
@ -69,14 +69,13 @@ body {
|
|||
color: #191919;
|
||||
display: flex;
|
||||
margin: 3px;
|
||||
padding: 2px 5px;
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.92857;
|
||||
height: 28px;
|
||||
}
|
||||
.Redesign .smallnavbarbutton:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#alert, #success {
|
||||
top: 40px;
|
||||
|
|
@ -165,10 +164,6 @@ body {
|
|||
background-position: -28px -475px;
|
||||
}
|
||||
|
||||
.navbarbuttoncontainer li:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.smallnavbarbutton:nth-child(6):before {
|
||||
content: '';
|
||||
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
|
||||
|
|
@ -203,7 +198,7 @@ body {
|
|||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.subbar {
|
||||
.mySubmenuFixed.Redesign {
|
||||
top: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
|
@ -290,7 +285,7 @@ body {
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
#logo_full img {
|
||||
#logo_full .btn-logo {
|
||||
padding: 5px 0;
|
||||
max-width: 120px;
|
||||
height: 30px;
|
||||
|
|
@ -308,12 +303,16 @@ body {
|
|||
height: 30px;
|
||||
float: left;
|
||||
}
|
||||
.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
|
||||
background-image: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#NavigationRedesignBannerContainer p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#logo_full, #logo_full img {
|
||||
#logo_full, #logo_full .btn-logo {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -537,7 +536,7 @@ iframe {
|
|||
#smallnav_open {
|
||||
display: none;
|
||||
}
|
||||
.subbar {
|
||||
.mySubmenuFixed {
|
||||
display: block;
|
||||
}
|
||||
#logo_full img, #logo_full {
|
||||
|
|
|
|||
|
|
@ -77,10 +77,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.navbarbuttoncontainer li:hover {
|
||||
background: linear-gradient(180deg, rgb(255,255,255,.3), transparent);
|
||||
}
|
||||
|
||||
#alert {
|
||||
background: linear-gradient(#f07575 10%, #de2323 100%);
|
||||
}
|
||||
|
|
@ -101,7 +97,7 @@
|
|||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
#logo_full, #logo_full img {
|
||||
#logo_full, #logo_full .btn-logo {
|
||||
width: 200px;
|
||||
Height: 35px;
|
||||
}
|
||||
|
|
@ -177,7 +173,7 @@
|
|||
.BannerRedesign {
|
||||
height: 35px;
|
||||
background: #114081;
|
||||
background: linear-gradient(#1951A5 0%, #114081);
|
||||
background-image: url(/images/RevisedHeader/bg-rbx_header.png);
|
||||
border-bottom: 1px solid #0A2246;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
|
@ -185,13 +181,31 @@
|
|||
top: 0;
|
||||
display: inline-flex;
|
||||
}
|
||||
.subbar {
|
||||
display: block;
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
top: 36px;
|
||||
.btn-logo:hover, .navbarbuttoncontainer li:hover {
|
||||
background-image: url(/images/RevisedHeader/bg-main_menu_hover.png);
|
||||
background-size: auto 35px;
|
||||
}
|
||||
.smallnavbarbutton:hover {
|
||||
background-image: url(/images/RevisedHeader/bg-sub_menu_hover.png);
|
||||
}
|
||||
div.mySubmenuFixed {
|
||||
position: fixed;
|
||||
top: 68px;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
div.mySubmenuFixed {
|
||||
top: 36px;
|
||||
background: linear-gradient(#000 10%, #191919 100%);
|
||||
height: 25px;
|
||||
}
|
||||
.mySubmenuFixed.Redesign {
|
||||
position: fixed;
|
||||
top: 35px;
|
||||
}
|
||||
.mySubmenuFixed.Redesign {
|
||||
position: fixed;
|
||||
top: 35px;
|
||||
}
|
||||
.subMenu {
|
||||
background: #A3514F;
|
||||
|
|
@ -248,6 +262,38 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
#HeaderSignUp {
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
top: -8px;
|
||||
position: relative;
|
||||
*top: -6px;
|
||||
}
|
||||
#HeaderOr {
|
||||
font-family: Arial;
|
||||
font-weight: normal;
|
||||
color: #9Ec3E7;
|
||||
font-size: 13px;
|
||||
top: -8px;
|
||||
*top: -6px;
|
||||
position: relative;
|
||||
margin: 0 6px;
|
||||
}
|
||||
#headerLogin {
|
||||
color: white;
|
||||
background: url(/images/btn-login_dropdown.png) no-repeat;
|
||||
display: inline-block;
|
||||
height: 27px;
|
||||
width: 62px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
#headerLogin:hover {
|
||||
background-position: 0 -54px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 2000px;
|
||||
|
|
@ -390,7 +436,7 @@ iframe {
|
|||
position: relative;
|
||||
}
|
||||
#navbarlogincontainer {
|
||||
margin-top: 9px;
|
||||
margin-top: 5px;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -416,10 +462,7 @@ iframe {
|
|||
.Redesign .smallnavbarbutton {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.Redesign .smallnavbarbutton:hover {
|
||||
background: linear-gradient(0deg,#191919 10%, #474747 100%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.invisible,
|
||||
|
|
@ -493,8 +536,13 @@ body {
|
|||
/* Fallback for IE 11*/
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.content_signup a[href="https://discord.gg/nudzQ7hkWY"]{
|
||||
.content_signup .hyperlink{
|
||||
display: block;
|
||||
color: #0074bd;
|
||||
transition: .25s all ease-in-out;
|
||||
}
|
||||
.content_signup .hyperlink:hover {
|
||||
color: #32cfff;
|
||||
}
|
||||
.content_signup h1, .content_signup a, .content_signup p {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -40,9 +40,10 @@ html {
|
|||
Height: 40px;
|
||||
}
|
||||
|
||||
.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
|
||||
.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
|
||||
background-image: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.BannerRedesign {
|
||||
height: 40px;
|
||||
|
|
@ -112,6 +113,13 @@ html {
|
|||
padding-right: 5px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
float: none;
|
||||
}
|
||||
.mySubmenuFixed.Redesign {
|
||||
background: none;
|
||||
height: 29px;
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
@media (min-width: 1688px) {
|
||||
|
|
|
|||
|
|
@ -40,9 +40,10 @@ html {
|
|||
Height: 40px;
|
||||
}
|
||||
|
||||
.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
|
||||
.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
|
||||
background-image: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.BannerRedesign {
|
||||
height: 40px;
|
||||
|
|
@ -112,6 +113,13 @@ html {
|
|||
padding-right: 5px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
float: none;
|
||||
}
|
||||
.mySubmenuFixed.Redesign {
|
||||
background: none;
|
||||
height: 29px;
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
@media (min-width: 1688px) {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 95 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 108 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -14,5 +14,5 @@
|
|||
<br>
|
||||
<p><a alt="Sign Up button" href="{{ route('register') }}" >Sign Up</a> or <a alt="Log In button" href="{{ route('login') }}">Login</a></p>
|
||||
<br>
|
||||
<a href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
|
||||
<a class="hyperlink" href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
|
||||
@endsection
|
||||
|
|
@ -89,14 +89,14 @@
|
|||
|
||||
<body>
|
||||
<div class="BannerRedesign">
|
||||
<div ID="NavigationRedesignBannerContainer" class="BannerCenterContainer">
|
||||
<div id="NavigationRedesignBannerContainer" class="BannerCenterContainer">
|
||||
@auth
|
||||
@switch (Auth::user()->settings->theme)
|
||||
@case(2)
|
||||
<a id="smallnav_open"></a>
|
||||
<script>
|
||||
function third() {
|
||||
document.querySelector('.subbar.Redesign').classList.toggle('invisible_navbar');
|
||||
document.querySelector('.mySubmenuFixed.Redesign').classList.toggle('invisible_navbar');
|
||||
}
|
||||
document.querySelector('#smallnav_open').addEventListener('click', third);
|
||||
</script>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
@default
|
||||
@endswitch
|
||||
@endauth
|
||||
<a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
|
||||
<a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" class = "btn-logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
|
||||
<a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
|
||||
src="{{ asset('img/MORBLOXlogoshort.png') }}"/></a>
|
||||
<div class="navbarbuttoncontainer">
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
</div>
|
||||
@guest
|
||||
<div id="navbarlogincontainer">
|
||||
<p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Login</a></p>
|
||||
<p><a id="HeaderSignUp" href="{{ route('register') }}">Sign Up</a><span id="HeaderOr">or</span><span id="loginSpan"><a id="headerLogin" href="{{ route('login') }}"></a></span></p>
|
||||
</div>
|
||||
@else
|
||||
<div id="HeaderLoginButton" class="RightNav">
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subbar Redesign invisible_navbar">
|
||||
<div class="mySubmenuFixed Redesign invisible_navbar">
|
||||
<div class="subMenu">
|
||||
<a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() &&
|
||||
count(Auth::user()->getFriendRequests()))
|
||||
|
|
|
|||
Loading…
Reference in New Issue