diff --git a/client/css/navbar.css b/client/css/navbar.css index cdbc2e7be1e26b759c07f4c871c1e47c1073fb4d..a2c2bd119ff8bc22d6ecc549ddc42dc8be983ec5 100644 --- a/client/css/navbar.css +++ b/client/css/navbar.css @@ -1,33 +1,30 @@ -.navbar-container { - display: flex; - justify-content: space-evenly; - background-color: #AA1E1E; - border: none; - outline: none; - color: #eaeaea; - /* float: left; */ - font-size: 17px; - width: 100%; - height: 8%; -} img{ - /* float: left; */ - margin: 5px; + float: left; + margin: 10px; min-width: 100px; min-height: 50px; } +.tabgroup{ + background-color: #AA1E1E; + color: #eaeaea; + outline: none; + font-size: 17px; + width: 100%; + height: 8%; + position: relative; +} .searchbar { - /* float: left; */ + float: left; padding: 6px; background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67)); margin-top: 15px; margin-left: 10%; border-radius: 10px; display: flex; - /* align-items: center; */ + align-items: center; max-height: 35px; transition: max-height 0.5s; overflow: hidden; @@ -36,28 +33,32 @@ img{ .searchbar input{ - background: transparent; background-color: transparent; border: none; - outline: none; font-size: 20px; margin-left: 10px; width: 100%; - border: 0; +} +input{ + width: 100%; + background: transparent; + border: 0; + outline: 0; } + .tabexpand{ - + background-color: #AA1E1E; color: #eaeaea; float: left; border: none; - + outline: none; text-decoration: none; text-align: center; cursor: pointer; - font-size: 5vh; - padding: 10px 14px; + font-size: 30px; + padding: 14px 14px; width: 5%; height: 100%; } @@ -66,74 +67,73 @@ img{ background-color: transparent; color: #eaeaea; border: none; - + outline: none; cursor: pointer; font-size: 17px; - /* padding: 17px 0px; */ + padding: 17px 0px; width: 10%; text-align: center; border-radius: 10px; height: 100%; } -/* .tabbutton{ - +.tabbutton{ + background-color: #AA1E1E; color: #eaeaea; float: left; border: none; - + outline: none; cursor: pointer; font-size: 17px; padding: 14px 16px; width: 13%; -} */ +} .tabright{ - + background-color: #AA1E1E; color: #eaeaea; float: right; border: none; - + outline: none; text-decoration: none; text-align: center; cursor: pointer; - font-size: 3vh; + font-size: 30px; padding: 17px 14px; width: 13%; - /* height: 100%; */ + height: 100%; } -/* .tabaccount{ - +.tabaccount{ + background-color: #AA1E1E; color: #eaeaea; float: right; border: none; - + outline: none; cursor: pointer; text-align: center; font-size: 30px; padding: 14px 16px; width: 5%; margin-left: 50px; -} */ +} @media screen and (max-width: 850px){ .tabaccount, .tabright{ - font-size: 3vh; + font-size: 8px; width: 17%; height: 100%; } .tabexpand{ - font-size: 3vh; + font-size: 15px; width: 10%; } .searchbar{ margin-left: 5%; width: 50%; - margin-top: 3.5px; - margin-bottom: 3.5px; + margin-top: 7px; } img{ display: none; @@ -142,16 +142,10 @@ img{ @media screen and (max-width: 1350px) and (min-width: 851px) { .tabaccount, .tabright{ - font-size: 3.5vh; + font-size: 25px; } .tabexpand{ - font-size: 3.5vh; - } - .searchbar{ - margin: 5px; - } - img{ - margin: 5px; + font-size: 25px; } }