Fixed CSS

howdoiplayagithubgame · Oct 23, 2023 · 3289ba1 · 3289ba1
1 parent 181ec6c
commit 3289ba1
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/static/css/tabinner.css b/static/css/tabinner.css
@@ -0,0 +1,70 @@
+body {
+    background-color: #222;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 95vh;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+    background-color: #333;
+    border-radius: 50px;
+    padding: 5px;
+    overflow: hidden;
+    width: 40px;
+    transition: width 0.5s;
+    overflow: hidden;
+}
+
+.search-container:hover,
+.search-container:focus-within {
+    width: 250px;
+}
+
+.search-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: #444;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+    z-index: 1;
+    position: relative;
+    transition: transform 0.5s;
+}
+
+.search-container:hover .search-icon,
+.search-container:focus-within .search-icon {
+    transform: translateX(200px);
+}
+
+.search-input {
+    opacity: 0;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    color: #fff;
+    padding: 0 10px;
+    font-size: 16px;
+    position: absolute;
+    overflow: hidden;
+    width: 0;
+    transition: opacity 0.5s, width 0.5s;
+}
+
+
+.search-container:hover .search-input,
+.search-container:focus-within .search-input {
+    opacity: 1;
+    width: 13%;
+}
+
+.search-form {
+    display: flex;
+    align-items: center;
+}
diff --git a/static/tabs.html b/static/tabs.html
@@ -7,6 +7,7 @@
       Solar System & Astronomy
     </title>
     <link rel="stylesheet" type="text/css" href="/css/tab.css" />
+    <link rel="stylesheet" href="/css/tabinner.css" />
     <script src="/scripts/tab.js"></script>
     <script
       src="https://kit.fontawesome.com/1237c86ba0.js"