Navbar revamp

design/privateheader.php

@@ -138,151 +138,129 @@ if ($NotificationsManager->is_skipped(NotificationsManager::SUBSCRIPTIONS)) {
       <div id="logo">
         <a href="index.php"></a>
       </div>
-<?
-if (isset(G::$LoggedUser['SearchType']) && G::$LoggedUser['SearchType']) { // Advanced search
-  $UseAdvancedSearch = true;
-} else {
-  $UseAdvancedSearch = false;
-}
-?>
-      <div id="searchbars">
-        <ul>
-          <li id="searchbar_torrents">
-            <span class="hidden">Torrents: </span>
-            <form class="search_form" name="torrents" action="torrents.php" method="get">
-<?  if ($UseAdvancedSearch) { ?>
-              <input type="hidden" name="action" value="advanced" />
-<?  } ?>
-              <input id="torrentssearch" accesskey="t" spellcheck="false"
-                  onfocus="if (this.value == 'Torrents') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Torrents'; }"
-                  value="Torrents" placeholder="Torrents" type="text" name="<?=$UseAdvancedSearch ? 'groupname' : 'searchstr' ?>" size="17" />
-            </form>
-          </li>
-          <li id="searchbar_artists">
-            <span class="hidden">Artist: </span>
-            <form class="search_form" name="artists" action="artist.php" method="get">
-              <input id="artistsearch"<?=Users::has_autocomplete_enabled('search');
-                  ?> accesskey="a"
-                  spellcheck="false" autocomplete="off"
-                  onfocus="if (this.value == 'Artists') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Artists'; }"
-                  value="Artists" placeholder="Artists" type="text" name="artistname" size="17" />
-            </form>
-          </li>
-          <li id="searchbar_requests">
-            <span class="hidden">Requests: </span>
-            <form class="search_form" name="requests" action="requests.php" method="get">
-              <input id="requestssearch" spellcheck="false"
-                  onfocus="if (this.value == 'Requests') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Requests'; }"
-                  value="Requests" placeholder="Requests" type="text" name="search" size="17" />
-            </form>
-          </li>
-          <li id="searchbar_forums">
-            <span class="hidden">Forums: </span>
-            <form class="search_form" name="forums" action="forums.php" method="get">
-              <input value="search" type="hidden" name="action" />
-              <input id="forumssearch"
-                  onfocus="if (this.value == 'Forums') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Forums'; }"
-                  value="Forums" placeholder="Forums" type="text" name="search" size="17" />
-            </form>
-          </li>
-<!--
-          <li id="searchbar_wiki">
-            <span class="hidden">Wiki: </span>
-            <form class="search_form" name="wiki" action="wiki.php" method="get">
-              <input type="hidden" name="action" value="search" />
-              <input
-                  onfocus="if (this.value == 'Wiki') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Wiki'; }"
-                  value="Wiki" placeholder="Wiki" type="text" name="search" size="17" />
-            </form>
-          </li>
--->
-          <li id="searchbar_log">
-            <span class="hidden">Log: </span>
-            <form class="search_form" name="log" action="log.php" method="get">
-              <input id="logsearch"
-                  onfocus="if (this.value == 'Log') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Log'; }"
-                  value="Log" placeholder="Log" type="text" name="search" size="17" />
-            </form>
-          </li>
-          <li id="searchbar_users">
-            <span class="hidden">Users: </span>
-            <form class="search_form" name="users" action="user.php" method="get">
-              <input type="hidden" name="action" value="search" />
-              <input
-                  id="userssearch"
-                  onfocus="if (this.value == 'Users') { this.value = ''; }"
-                  onblur="if (this.value == '') { this.value = 'Users'; }"
-                  value="Users" placeholder="Users" type="text" name="search" size="20" />
-            </form>
-          </li>
-        </ul>
-      </div>
       <div id="menu">
-        <h4 class="hidden">Site Menu</h4>
         <ul>
-          <li id="nav_index"<?=
-            Format::add_class($PageID, array('index'), 'active', true)?>>
-            <a href="index.php">Home</a>
-          </li>
           <li id="nav_torrents"<?=
-            Format::add_class($PageID, array('torrents', false, false), 'active', true)?>>
+            Format::add_class($PageID, ['torrents', false, false], 'active', true)?>>
             <a href="torrents.php">Torrents</a>
           </li>
           <li id="nav_collages"<?=
-            Format::add_class($PageID, array('collages'), 'active', true)?>>
+            Format::add_class($PageID, ['collages'], 'active', true)?>>
             <a href="collages.php">Collections</a>
           </li>
           <li id="nav_requests"<?=
-            Format::add_class($PageID, array('requests'), 'active', true)?>>
+            Format::add_class($PageID, ['requests'], 'active', true)?>>
             <a href="requests.php">Requests</a>
           </li>
           <li id="nav_forums"<?=
-            Format::add_class($PageID, array('forums'), 'active', true)?>>
+            Format::add_class($PageID, ['forums'], 'active', true)?>>
             <a href="forums.php">Forums</a>
           </li>
           <li id="nav_irc"<?=
-            Format::add_class($PageID, array('chat'), 'active', true)?>>
+            Format::add_class($PageID, ['chat'], 'active', true)?>>
             <a href="chat.php">IRC</a>
           </li>
           <li id="nav_top10"<?=
-            Format::add_class($PageID, array('top10'), 'active', true)?>>
+            Format::add_class($PageID, ['top10'], 'active', true)?>>
             <a href="top10.php">Top 10</a>
           </li>
           <li id="nav_rules"<?=
-            Format::add_class($PageID, array('rules'), 'active', true)?>>
+            Format::add_class($PageID, ['rules'], 'active', true)?>>
             <a href="rules.php">Rules</a>
           </li>
           <li id="nav_wiki"<?=
-            Format::add_class($PageID, array('wiki'), 'active', true)?>>
+            Format::add_class($PageID, ['wiki'], 'active', true)?>>
             <a href="wiki.php">Wiki</a>
           </li>
-          <li id="nav_staff"<?=
-            Format::add_class($PageID, array('staff'), 'active', true)?>>
-            <a href="staff.php">Staff</a>
+          <li id="nav_user" class="nav_dropdown" <?=Format::add_class($PageID, ['user', false, false], 'active', true, 'id')?>>
+            <a href="user.php?id=<?=G::$LoggedUser['ID']?>" class="username"><?=G::$LoggedUser['Username']?></a>
+            <div id="user_menu">
+              <a href="user.php?action=edit&amp;userid=<?=G::$LoggedUser['ID']?>">Edit</a>
+              <a href="logout.php?auth=<?=G::$LoggedUser['AuthKey']?>">Logout</a>
+            </div>
+          </li>
+          <li id="nav_links" class="nav_dropdown<?=$NewSubscriptions ? ' highlite' : ''?>">
+            <a>▾</a>
+            <div id="links_menu">
+              <a href="<?=Inbox::get_inbox_link(); ?>">Inbox</a>
+              <a href="staffpm.php">Staff Inbox</a>
+              <a href="torrents.php?type=uploaded&amp;userid=<?=G::$LoggedUser['ID']?>">Uploads</a>
+              <a href="bookmarks.php?type=torrents">Bookmarks</a>
+<?  if (check_perms('site_torrents_notify')) { ?>
+              <a href="user.php?action=notify">Notifications</a>
+<?  } ?>
+              <a href="userhistory.php?action=subscriptions">Subscriptions</a>
+              <a href="comments.php">Comments</a>
+              <a href="friends.php">Friends</a>
+              <a href="better.php">Better</a>
+            </div>
           </li>
         </ul>
+        </ul>
+      </div>
+<?
+if (isset(G::$LoggedUser['SearchType']) && G::$LoggedUser['SearchType']) { // Advanced search
+  $UseAdvancedSearch = true;
+} else {
+  $UseAdvancedSearch = false;
+}
+?>
+      <div id="searchbars">
+        <form class="search_form" name="torrents" action="torrents.php" method="get">
+<?  if ($UseAdvancedSearch) { ?>
+          <input type="hidden" name="action" value="advanced" />
+<?  } ?>
+          <input id="torrentssearch" accesskey="t" spellcheck="false"
+              onfocus="if (this.value == 'Torrents') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Torrents'; }"
+              value="Torrents" placeholder="Torrents" type="text" name="<?=$UseAdvancedSearch ? 'groupname' : 'searchstr' ?>" size="17" />
+        </form>
+        <form class="search_form" name="artists" action="artist.php" method="get">
+          <input id="artistsearch"<?=Users::has_autocomplete_enabled('search');
+              ?> accesskey="a"
+              spellcheck="false" autocomplete="off"
+              onfocus="if (this.value == 'Artists') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Artists'; }"
+              value="Artists" placeholder="Artists" type="text" name="artistname" size="17" />
+        </form>
+        <form class="search_form" name="requests" action="requests.php" method="get">
+          <input id="requestssearch" spellcheck="false"
+              onfocus="if (this.value == 'Requests') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Requests'; }"
+              value="Requests" placeholder="Requests" type="text" name="search" size="17" />
+        </form>
+        <form class="search_form" name="forums" action="forums.php" method="get">
+          <input value="search" type="hidden" name="action" />
+          <input id="forumssearch"
+              onfocus="if (this.value == 'Forums') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Forums'; }"
+              value="Forums" placeholder="Forums" type="text" name="search" size="17" />
+        </form>
+<!--
+        <form class="search_form" name="wiki" action="wiki.php" method="get">
+          <input type="hidden" name="action" value="search" />
+          <input
+              onfocus="if (this.value == 'Wiki') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Wiki'; }"
+              value="Wiki" placeholder="Wiki" type="text" name="search" size="17" />
+        </form>
+-->
+        <form class="search_form" name="log" action="log.php" method="get">
+          <input id="logsearch"
+              onfocus="if (this.value == 'Log') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Log'; }"
+              value="Log" placeholder="Log" type="text" name="search" size="17" />
+        </form>
+        <form class="search_form" name="users" action="user.php" method="get">
+          <input type="hidden" name="action" value="search" />
+          <input
+              id="userssearch"
+              onfocus="if (this.value == 'Users') { this.value = ''; }"
+              onblur="if (this.value == '') { this.value = 'Users'; }"
+              value="Users" placeholder="Users" type="text" name="search" size="20" />
+        </form>
       </div>
       <div id="userinfo">
-        <ul id="userinfo_username">
-          <li id="nav_userinfo" <?=Format::add_class($PageID, array('user', false, false), 'active', true, 'id')?>>
-            <a href="user.php?id=<?=G::$LoggedUser['ID']?>" class="username"><?=G::$LoggedUser['Username']?></a>
-          </li>
-          <li id="nav_userclass">
-            <span class="hidden userclass"><?=$ClassLevels[G::$LoggedUser['Class']]['Name']?></span>
-          </li>
-          <li id="nav_useredit" class="brackets<?=Format::add_class($PageID, array('user','edit'), 'active', false)?>">
-            <a href="user.php?action=edit&amp;userid=<?=G::$LoggedUser['ID']?>">Edit</a>
-          </li>
-          <li id="nav_logout" class="brackets">
-            <a href="logout.php?auth=<?=G::$LoggedUser['AuthKey']?>">Logout</a>
-          </li>
-        </ul>
         <ul id="userinfo_major">
           <li id="nav_upload" class="brackets<?=Format::add_class($PageID, array('upload'), 'active', false)?>">
             <a href="upload.php">Upload</a>
@@ -302,6 +280,9 @@ if (check_perms('site_send_unlimited_invites')) {
           <li id="nav_donate" class="brackets<?=Format::add_class($PageID, array('donate'), 'active', false)?>">
             <a href="donate.php">Donate</a>
           </li>
+          <li id="nav_staff" class="brackets<?=Format::add_class($PageID, array('staff'), 'active', false)?>">
+            <a href="staff.php">Staff</a>
+          </li>
         </ul>
         <ul id="userinfo_stats">
           <li id="stats_seeding">
@@ -347,47 +328,6 @@ if (check_perms('site_send_unlimited_invites')) {
 <?  }
 ?>
         </ul>
-        <ul id="userinfo_minor"<?=$NewSubscriptions ? ' class="highlite"' : ''?>>
-          <li>
-            <span id="header_links_menu" class="brackets">Links ▾</span>
-            <ul>
-              <li id="nav_inbox"<?=
-                Format::add_class($PageID, array('inbox'), 'active', true)?>>
-                <a href="<?=Inbox::get_inbox_link(); ?>">Inbox</a>
-              </li>
-              <li id="nav_staffinbox"<?=
-                Format::add_class($PageID, array('staffpm'), 'active', true)?>>
-                <a href="staffpm.php">Staff Inbox</a>
-              </li>
-              <li id="nav_uploaded"<?=
-                Format::add_class($PageID, array('torrents', false, 'uploaded'), 'active', true, 'userid')?>>
-                <a href="torrents.php?type=uploaded&amp;userid=<?=G::$LoggedUser['ID']?>">Uploads</a>
-              </li>
-              <li id="nav_bookmarks"<?=
-                Format::add_class($PageID, array('bookmarks'), 'active', true)?>>
-                <a href="bookmarks.php?type=torrents">Bookmarks</a>
-              </li>
-<?  if (check_perms('site_torrents_notify')) { ?>
-              <li id="nav_notifications"<?=
-                Format::add_class($PageID, array(array('torrents', 'notify'), array('user', 'notify')), 'active', true, 'userid')?>>
-                <a href="user.php?action=notify">Notifications</a>
-              </li>
-<?  }
-  $ClassNames = $NewSubscriptions ? 'new-subscriptions' : '';
-  $ClassNames = trim($ClassNames.Format::add_class($PageID, array('userhistory', 'subscriptions'), 'active', false));
-?>
-              <li id="nav_subscriptions"<?=$ClassNames ? " class=\"$ClassNames\"" : ''?>>
-                <a href="userhistory.php?action=subscriptions">Subscriptions</a>
-              </li>
-              <li id="nav_comments"<?=
-                Format::add_class($PageID, array('comments'), 'active', true, 'userid')?>>
-                <a href="comments.php">Comments</a></li>
-              <li id="nav_friends"<?=
-                Format::add_class($PageID, array('friends'), 'active', true)?>>
-                <a href="friends.php">Friends</a></li>
-            </ul>
-          </li>
-        </ul>
       </div>
     </div>
 <?

static/functions/global.js

@@ -161,14 +161,6 @@ function select_all(el) {
   }
 }
 
-function toggle_header_links(event) {
-  event.stopPropagation()
-  $('#userinfo_minor > li > ul').raw().style.display = ($('#userinfo_minor > li > ul').raw().style.display == 'block') ? 'none' : 'block'
-}
-function hide_header_links() {
-  $('#userinfo_minor > li > ul').raw().style.display = 'none'
-}
-
 function preload(image) {
   var img = document.createElement('img')
   img.style.display = 'none'
@@ -208,10 +200,6 @@ if (typeof NodeList.prototype.forEach !== 'function') {
 }
 
 $(function() {
-  if ($('#header_links_menu').length > 0) {
-    $('#header_links_menu')[0].addEventListener('click', toggle_header_links)
-    $('body')[0].addEventListener('click', hide_header_links)
-  }
   if ($('.request_table').length > 0) {
     var a = $('[cover]')[0]
     if (a) preload(a.attributes.cover.value)

static/styles/beluga/style.css

@@ -311,15 +311,57 @@ p.min_padding {
   content: "Oppaitime";
   font-size: 40px;
   line-height: 56px;
-  font-weight: bold;
+  font-weight: 100;
   font-family: sans-serif;
 }
 
+.nav_dropdown > div {
+  position: absolute;
+  width: 135.56px;
+  text-align: center;
+  background: #509599;
+  margin-top: 50px;
+  z-index: 99999;
+}
+
+#menu > ul > .nav_dropdown:hover {
+  background-color: #509599;
+}
+
+#menu > ul > .nav_dropdown > div > a:hover {
+  color: #E9E9E9;
+}
+
+#nav_links {
+  max-width: 40px;
+}
+
+.nav_dropdown > div > a {
+  display: none;
+  color: white;
+  height: 50px;
+  line-height: 50px;
+}
+
+#nav_links > #links_menu {
+  margin-left: -95.56px;
+}
+
+.nav_dropdown:hover > div > a {
+  display: block;
+}
+
+#menu > ul > li > a:hover,
+.nav_dropdown:hover > div > a:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+
 #userinfo {
   position: absolute;
-  top: 0;
+  top: 10px;
   right: 0;
   z-index: 50;
+  text-align: right;
 }
 
 #userinfo > ul {
@@ -334,10 +376,6 @@ p.min_padding {
   padding: 2px
 }
 
-#userinfo_username, #userinfo_major {
-  display: inline-block
-}
-
 #userinfo_minor > li, #userinfo_minor > li > span {
   float: right;
 }
@@ -373,8 +411,8 @@ p.min_padding {
 }
 
 #menu {
-  margin-bottom: 2px;
   height: 50px;
+  border-radius: 5px 5px 0 0;
 }
 
 #menu > ul {
@@ -403,39 +441,48 @@ p.min_padding {
   white-space: nowrap;
 }
 
+#menu > ul > li:nth-of-type(1),
 #menu > ul > li:nth-of-type(1) > a {
-  background-color: #0d5968
+  border-radius: 5px 0 0 0;
 }
-#menu > ul > li:nth-of-type(2) > a {
-  background-color: #20717c
+#menu > ul > li:nth-of-type(10),
+#menu > ul > li:nth-of-type(10) > a {
+  border-radius: 0 5px 0 0;
 }
-#menu > ul > li:nth-of-type(3) > a {
-  background-color: #1d818e
+#menu > ul > li:nth-of-type(1) {
+  background-color: #80af8a;
 }
-#menu > ul > li:nth-of-type(4) > a {
-  background-color: #278E98
+#menu > ul > li:nth-of-type(2) {
+  background-color: #78aa86;
 }
-#menu > ul > li:nth-of-type(5) > a {
-  background-color: #3eaca7
+#menu > ul > li:nth-of-type(3) {
+  background-color: #6fa585;
 }
-#menu > ul > li:nth-of-type(6) > a {
-  background-color: #47B39A
+#menu > ul > li:nth-of-type(4) {
+  background-color: #659f82;
 }
-#menu > ul > li:nth-of-type(7) > a {
-  background-color: #47bc97
+#menu > ul > li:nth-of-type(5) {
+  background-color: #58977f;
 }
-#menu > ul > li:nth-of-type(8) > a {
-  background-color: #4DC593
+#menu > ul > li:nth-of-type(6) {
+  background-color: #4b907f;
 }
-#menu > ul > li:nth-of-type(9) > a {
-  background-color: #74c796
+#menu > ul > li:nth-of-type(7) {
+  background-color: #3d8a81;
 }
-#menu > ul > li:nth-of-type(10) > a {
-  background-color: #88C796
+#menu > ul > li:nth-of-type(8) {
+  background-color: #2e8180;
+}
+#menu > ul > li:nth-of-type(9) {
+  background-color: #247a80;
+}
+#menu > ul > li:nth-of-type(10) {
+  background-color: #1e7682;
+  border-radius: 0 5px 0 0;
 }
 
 .alertbar {
-  background-color: #186c77;
+  background-color: #4b907f;
   text-align: center;
   color: #fff;
   font-size: 10pt;
@@ -493,26 +540,26 @@ p.min_padding {
   width: 900px;
   height: 50px;
   padding: 8px 0;
-  background: url(images/search.png) no-repeat #373a42;
+  background: #3b3f47;
   margin-bottom: 2px;
+  display: flex;
+}
+
+#searchbars > .search_form {
+  flex: 1 1 auto;
+  text-align: center;
 }
 
 #searchbars input {
   box-sizing: border-box;
   width: 135px;
   height: 34px;
-  margin: 0;
-  border: 1px solid #5b5e64;
+  border: none;
+  border-radius: 2.5px;
+  background-color: #2B2D33;
   padding: 7px 11px 7px 8px;
-  color: #bdbec0;
-}
-
-#searchbars input:hover {
-  border: 1px solid #8e9198;
-}
-
-#searchbars input:focus {
-  border: 1px solid #fff;
+  color: #c6c9c9;
+  font-size: 12px;
 }
 
 #searchbars ul {
@@ -2099,16 +2146,20 @@ body.style_pink input[type=submit]:focus {
   background-color: #78467f;
 }
 body.style_pink #userinfo_stats { color: #db7bc7; }
-body.style_pink #menu > ul > li:nth-of-type(1) > a { background-color: #3b2655; }
-body.style_pink #menu > ul > li:nth-of-type(2) > a { background-color: #4f3063; }
-body.style_pink #menu > ul > li:nth-of-type(3) > a { background-color: #643c72; }
-body.style_pink #menu > ul > li:nth-of-type(4) > a { background-color: #78467f; }
-body.style_pink #menu > ul > li:nth-of-type(5) > a { background-color: #8b518e; }
-body.style_pink #menu > ul > li:nth-of-type(6) > a { background-color: #9f5c9c; }
-body.style_pink #menu > ul > li:nth-of-type(7) > a { background-color: #b367aa; }
-body.style_pink #menu > ul > li:nth-of-type(8) > a { background-color: #c871b9; }
-body.style_pink #menu > ul > li:nth-of-type(9) > a { background-color: #db7bc7; }
-body.style_pink #menu > ul > li:nth-of-type(10) > a { background-color: #ef86d5; }
+body.style_pink #menu > ul > li:nth-of-type(1) { background-color: #3b2655; }
+body.style_pink #menu > ul > li:nth-of-type(2) { background-color: #4f3063; }
+body.style_pink #menu > ul > li:nth-of-type(3) { background-color: #643c72; }
+body.style_pink #menu > ul > li:nth-of-type(4) { background-color: #78467f; }
+body.style_pink #menu > ul > li:nth-of-type(5) { background-color: #8b518e; }
+body.style_pink #menu > ul > li:nth-of-type(6) { background-color: #9f5c9c; }
+body.style_pink #menu > ul > li:nth-of-type(7) { background-color: #b367aa; }
+body.style_pink #menu > ul > li:nth-of-type(8) { background-color: #c871b9; }
+body.style_pink #menu > ul > li:nth-of-type(9) { background-color: #db7bc7; }
+body.style_pink #menu > ul > li:nth-of-type(10) { background-color: #ef86d5; }
+body.style_pink #menu > ul > .nav_dropdown:hover,
+body.style_pink .nav_dropdown > div {
+  background-color: #e295d2;
+}
 body.style_pink .alertbar { background-color: #4f3063; }
 body.style_pink .hide_torrents > .show_torrents_link:after,
 body.style_pink .show_torrents > .show_torrents_link:after,
@@ -2156,17 +2207,18 @@ body.style_haze #searchbars input {
   background: rgba(24,32,41,0.3);
   border: none;
 }
-body.style_haze #menu li:nth-child(1) a { background: rgba(24,32,41,0.7); }
-body.style_haze #menu li:nth-child(2) a { background: rgba(24,32,41,0.65); }
-body.style_haze #menu li:nth-child(3) a { background: rgba(24,32,41,0.6); }
-body.style_haze #menu li:nth-child(4) a { background: rgba(24,32,41,0.55); }
-body.style_haze #menu li:nth-child(5) a { background: rgba(24,32,41,0.5); }
-body.style_haze #menu li:nth-child(6) a { background: rgba(24,32,41,0.45); }
-body.style_haze #menu li:nth-child(7) a { background: rgba(24,32,41,0.4); }
-body.style_haze #menu li:nth-child(8) a { background: rgba(24,32,41,0.35); }
-body.style_haze #menu li:nth-child(9) a { background: rgba(24,32,41,0.3); }
-body.style_haze #menu li:nth-child(10) a { background: rgba(24,32,41,0.25); }
+body.style_haze #menu li:nth-child(1) { background: rgba(24,32,41,0.7); }
+body.style_haze #menu li:nth-child(2) { background: rgba(24,32,41,0.65); }
+body.style_haze #menu li:nth-child(3) { background: rgba(24,32,41,0.6); }
+body.style_haze #menu li:nth-child(4) { background: rgba(24,32,41,0.55); }
+body.style_haze #menu li:nth-child(5) { background: rgba(24,32,41,0.5); }
+body.style_haze #menu li:nth-child(6) { background: rgba(24,32,41,0.45); }
+body.style_haze #menu li:nth-child(7) { background: rgba(24,32,41,0.4); }
+body.style_haze #menu li:nth-child(8) { background: rgba(24,32,41,0.35); }
+body.style_haze #menu li:nth-child(9) { background: rgba(24,32,41,0.3); }
+body.style_haze #menu li:nth-child(10) { background: rgba(24,32,41,0.25); }
 body.style_haze #menu li a:hover { background: white; color: black; }
+body.style_haze .nav_dropdown > div { background: rgba(24,32,41,0.3); }
 body.style_haze #userinfo_minor > li > ul { background: white; color: black; }
 body.style_haze #alerts .alertbar {background: rgba(24,32,41,0.4);}
 body.style_haze .colhead, body.style_haze .head {background: rgba(24,32,41,0.4);}

static/styles/genaviv/style.css

@@ -1187,13 +1187,49 @@ td {
   background:#1a1a1a
 }
 #menu {
-  background:#1d1d1d;background:rgba(0,0,0,0.6);border:1px solid transparent
+  background: #1d1d1d;
+  background: rgba(0,0,0,0.6);
+  border: 1px solid transparent;
+
+}
+#menu > ul {
+  display: flex;
+  width: 850px;
+  margin: 0 auto;
+}
+#menu > ul > li {
+  position: relative;
+  flex: 1 1 auto;
+}
+.nav_dropdown > div {
+  position: absolute;
+  background-color: rgba(0,0,0,0.6);
+  width: 100%;
+  z-index: 99999;
+  margin-top: 14px;
 }
+#nav_links > #links_menu {
+  width: 120px;
+  margin-left: -68px;
+}
+.nav_dropdown > div > a {
+  display: none;
+  height: 32px;
+  line-height: 32px;
+}
+.nav_dropdown:hover > div > a {
+  display: block;
+}
+
 #userinfo_minor a,#menu ul>li>a {
   color:#fff
 }
 #header div#searchbars {
-  background:#131313;padding:4.5px 0
+  background: #131313;
+  padding: 4.5px 0;
+  display: flex;
+  width: 850px;
+  margin: 0 auto;
 }
 div#ft_container {
   background:#D0D0D0

static/styles/oppai/style.css

@@ -162,26 +162,37 @@ ul.thin li { margin:0px 0px; padding:0px; }
 }
 
 #menu {
-/*  position: absolute;
-  top: 226px; */
   width: 100%;
-  padding: 0.6em 0;
   text-align: center;
   background-color: #461640;
   font-size: 10pt;
 }
 
-#menu ul li {
+#menu > ul {
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+}
+
+#menu > ul > li {
   position: relative;
-  display: inline;
+  display: flex;
+  margin: 0;
+  flex: 1 1 auto;
 }
 
-#menu ul li a {
-  padding: 0.6em 1.1%;
+#menu ul > li > a {
+  padding: 0.6em 0;
+  display: inline-block;
+  width: 100%;
   color: #fbc2e5;
   transition: ease-in-out 0.1s;
 }
 
+#nav_links {
+  max-width: 40px;
+}
+
 #menu ul li a.active {
   background-color: #565656;
 }
@@ -191,6 +202,35 @@ ul.thin li { margin:0px 0px; padding:0px; }
   text-decoration: none;
 }
 
+#menu .nav_dropdown {
+  background: #461640;
+  margin-top: 0;
+}
+
+.nav_dropdown > div {
+  position: absolute;
+  background-color: #461640;
+  width: 100%;
+  z-index: 99999;
+  margin-top: 32px;
+}
+
+#nav_links > #links_menu {
+  width: 120px;
+  margin-left: -80px;
+}
+
+.nav_dropdown > div > a {
+  display: none;
+  color: #fbc2e5;
+  height: 32px;
+  line-height: 32px;
+}
+
+.nav_dropdown:hover > div > a {
+  display: block;
+}
+
 #userinfo {
 /*  position: absolute;
   top: 258px; */
@@ -234,21 +274,28 @@ ul.thin li { margin:0px 0px; padding:0px; }
 }
 
 #searchbars {
-/*  position: absolute;
-  top: 199px; */
-  width: 100%;
   text-align: center;
   background-color: #7A3572;
-  padding: 4px 0px;
+  box-sizing: content-box;
+  padding: 4px 10%;
   border-bottom: 2px solid #FBC2E5;
+  display: flex;
+}
+
+#searchbars > .search_form {
+  flex: 1 1 auto;
+  text-align: center;
+  margin: 0 3px;
 }
 
 #searchbars input {
   position: relative;
   border: 1px solid transparent;
+  box-sizing: border-box;
   padding: 2px 2px 2px 4px;
   font-size: 0.9em;
   background-color: #e0e0e0;
+  width: 100%;
   color: #444;
 }