diff options
Diffstat (limited to 'website4/public/assets/css/navbar.css')
| -rw-r--r-- | website4/public/assets/css/navbar.css | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/website4/public/assets/css/navbar.css b/website4/public/assets/css/navbar.css new file mode 100644 index 0000000..6f63aa8 --- /dev/null +++ b/website4/public/assets/css/navbar.css @@ -0,0 +1,224 @@ +.navbar { + background-color: var(--secondary-color); + padding: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + font-family: 'default-512', Arial, sans-serif; + position: relative; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar-left, .navbar-center, .navbar-right { + display: flex; + align-items: center; +} + +.navbar-center { + justify-content: center; + flex-grow: 1; +} + +.navbar-mobile { + display: none; + justify-content: space-between; + align-items: center; + width: 100%; + background-color: var(--secondary-color); + padding: 10px; +} + +.navbar-mobile .navbar-left { + display: flex; + align-items: center; +} + +.navbar-logo { + height: 40px; + margin-right: 10px; +} + +.navbar-title { + font-size: 20px; + font-weight: bold; + color: var(--primary-color); + padding-right: 20px; +} + +.navbar, .navbar button, .navbar input[type="text"], .navbar input[type="search"] { + color: var(--navbar-text-color); + text-decoration: none; + padding-inline: 10px; + margin: 0 5px; + border: none; + background: none; + cursor: pointer; + transition: color 0.3s ease; + font-family: 'default-512', Arial, sans-serif; + font-size: 18px; +} + +.navbar-link { + color: var(--navbar-text-color); + text-decoration: none; + border: none; + background: none; + cursor: pointer; + transition: color 0.3s ease; + font-family: 'default-512', Arial, sans-serif; +} + +.dropdown-link { + color: var(--navbar-text-color); + text-decoration: none; + transition: color 0.3s ease; + font-family: 'default-512', Arial, sans-serif; + padding-top: 5px; +} + +.navbar a:hover, .navbar button:hover { + color: var(--navbar-hover-color); +} + +.navbar-dropdown { + position: relative; + display: inline-block; +} + +.navbar-dropbtn { + background-color: var(--navbar-color); + color: var(--navbar-text-color); + padding: 10px; + font-size: 16px; + border: none; + cursor: pointer; + border-radius: 10px; +} + +.navbar-dropdown-content { + display: none; + position: absolute; + background-color: var(--background-color); + min-width: 160px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + border-radius: 10px; +} + +.navbar-dropdown:hover .navbar-dropdown-content { + display: block; +} + +.navbar-dropdown-content a { + color: var(--text-color); + padding: 12px 16px; + text-decoration: none; + display: block; + border-bottom: 1px solid var(--border-color); +} + +.navbar-dropdown-content a:last-child { + border-bottom: none; +} + +.bruh-why { + padding-inline: 0px; +} + +.mobile-navbar-dropdown { + padding-top: 5px; +} + +.mobile-navbar-dropdown:hover { + color: var(--navbar-hover-color); +} + +.navbar-toggle { + display: none; + background: none; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: 24px; +} + +.mobile-navbar-menu { + display: flex; + flex-direction: column; + width: 100%; + background-color: var(--secondary-color); + border-radius: 10px; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-out, padding 0.4s ease-out; + padding-top: 0; + padding-bottom: 0; +} + +.mobile-navbar-menu.open { + padding-top: 10px; + padding-bottom: 10px; +} + +.mobile-navbar-menu input[type="text"], +.mobile-navbar-menu input[type="search"] { + padding: 10px; + margin: 5px 0; + border: none; + background: none; + cursor: pointer; + transition: color 0.3s ease; + font-family: 'default-512', Arial, sans-serif; + color: var(--navbar-text-color); + text-decoration: none; + display: block; + width: 100%; + box-sizing: border-box; +} + +.mobile-navbar-menu input[type="text"]:hover, +.mobile-navbar-menu input[type="search"]:hover, +.mobile-navbar-menu button:hover { + color: var(--navbar-hover-color); +} + +@media screen and (max-width: 768px) { + .navbar-container { + display: none; + } + + .navbar-mobile { + display: flex; + } + + .navbar-toggle { + display: block; + } +} + +@media screen and (min-width: 769px) { + .mobile-navbar-menu { + display: none !important; + } +} + +.navbar .buttonify{ + display: block; + background-color: var(--background-color); /* penis haha lol ja das isch psychose klass will buttons nei segged abunzdue*/ + color: var(--text-color); + padding: 12px 20px; + text-decoration: none; + border-radius: 10px; + transition: background-color 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + font-family: 'default-512', Arial, sans-serif; + border: none; +} + +.navbar .buttonify:hover { + background-color: var(--hover-color); + color: var(--hover-text-color); +} |