Overhauled Navbar, added searchbar.

UseInterstellar · Feb 12, 2024 · 1965275 · 1965275
1 parent 72f76de
commit 1965275
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/static/assets/styles/frame.css b/static/assets/styles/frame.css
@@ -10,10 +10,10 @@ iframe {
   height: 100vh;
   width: 100vw;
   position: absolute;
-  top: 8%;
   bottom: 0;
   left: 0;
   right: 0;
+  top: 2em;
   overflow-y: scroll;
   overflow-x: hidden;
 }
@@ -22,7 +22,7 @@ iframe {
   top: 0%;
   left: 0;
   right: 0;
-  min-height: 8%;
+  height: 2em;
   padding: 0 25px;
   background: var(--main);
   box-sizing: border-box;
@@ -35,20 +35,21 @@ iframe {
 .nav-button {
   border-radius: 10px;
   color: var(--text-primary);
-  width: 50px;
-  height: 50px;
+  background: none;
+  height: 2em;
   border: none;
   right: 10px;
   top: auto;
   box-sizing: border-box;
-  background: var(--accent-color);
   margin-right: 10px;
-  transition: 0.3s ease;
+  transition: 0.2s ease;
+  margin-top: 0 auto;
+  margin-bottom: 0 auto;
 }
 
 .nav-button:hover {
-  background: lighten(var(--accent-color), 10%);
   transform: scale(1.2);
+  cursor: pointer;
 }
 
 .nav-btn-left {
@@ -67,7 +68,7 @@ iframe {
 
 .nav-left {
   position: absolute;
-  top: 50%;
+  top: 75%;
   transform: translateY(-50%);
   left: 1%;
 }
@@ -110,3 +111,22 @@ iframe {
   width: 100%;
   height: 100%;
 }
+
+.navsearch {
+  height: 2em;
+  border: none;
+  background: none;
+  color: #fff;
+}
+
+.navsearch:focus {
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+
+.navpost {
+  padding: none;
+  float: right;
+  margin-top: 0em;
+}
diff --git a/static/go.html b/static/go.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="assets/styles/frame.css?v=3" />
     <link rel="stylesheet" href="/assets/styles/themes/default.css?v=2" />
     <script src="/assets/scripts/global.js?v=6"></script>
+    <script src="/assets/scripts/index.js"></script>
   </head>
   <body>
     <script>
@@ -29,6 +30,9 @@
           <button onclick="reload()" class="nav-button">
             <i class="fa-solid fa-rotate-right"></i>
           </button>
+          <form id="fs" class="navpost" method="POST">
+            <input id="is" class="navsearch" placeholder="Search or enter a new URL" type="text" />
+          </form>
         </div>
         <div class="nav-right">
           <button id="fullscreen-button" class="nav-button nav-btn-right">