diff options
Diffstat (limited to 'website4/public/assets/css/dialon.css')
| -rw-r--r-- | website4/public/assets/css/dialon.css | 313 |
1 files changed, 313 insertions, 0 deletions
diff --git a/website4/public/assets/css/dialon.css b/website4/public/assets/css/dialon.css new file mode 100644 index 0000000..96c1e85 --- /dev/null +++ b/website4/public/assets/css/dialon.css @@ -0,0 +1,313 @@ +/* Base Styles */ +:root { + --primary-color: #ff9900; + --secondary-color: #1a1a1a; + --background-color: #333; + --text-color: #e6e6e6; + --border-color: #444; + --navbar-color: #d88900; + --navbar-text-color: #fff; + --navbar-hover-color: #ffbb00; + --hover-color: #ffbb00; + --hover-text-color: #1a1a1a; +} + +@font-face { + font-family: 'default-512'; + font-style: normal; + font-weight: 400; + src: url('../fonts/default.ttf') format('truetype'); +} + +body { + background-color: var(--secondary-color); + color: var(--text-color); + margin: 0; + padding: 0; + font-family: Arial, comic-sans; /* ich bin so lustig */ +} + +header, .header-content { + background-color: var(--secondary-color); + color: var(--text-color); + text-align: center; /* Center the header content wenn mer kei bock uf navbar her */ +} + +header h1 { + color: var(--primary-color); + font-family: 'default-512', Arial, sans-serif; /* fonts sexi mache*/ +} + +h2 { + color: var(--primary-color); + font-family: 'default-512', Arial, sans-serif; /* nomal fonts sexi mache will us irgend nem grund die ganz site kappoot gaht wenn ich d'funt universal ahwände*/ +} + +.sidebar, .sidebar-right, .box, .chat-log, .chat-input .breadcrumbs { + background-color: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 10px; /* mmmm rundi ecke damit mer sich ned ritzt */ +} + +.breadcrumbs { + background-color: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + font-family: 'default-512', Arial, sans-serif; +} + +.breadcrumbs a { + color: var(--primary-color); + text-decoration: none; +} + +.breadcrumbs a:hover { + text-decoration: underline; +} + +.sidebar { + float: left; + width: 20%; + min-width: 200px; + max-width: 250px; + padding: 10px; + padding-bottom: 0px; + box-sizing: border-box; + padding-bottom: 0px; +} + +.sidebar-right { + float: right; + width: 20%; + min-width: 200px; + max-width: 250px; + padding: 10px; + padding-bottom: 0px; + box-sizing: border-box; +} + +.sidebar a, .sidebar-right a, .services a, .menu-overlay .menu-links a, .load-more-button, .mobile-navbar-menu button{ + display: block; + background-color: var(--background-color); + 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); + margin-bottom: 10px; + font-family: 'default-512', Arial, sans-serif; + border: none; +} + +.sidebar a:hover, .sidebar-right a:hover, .sidebar a.active, .sidebar-right a.active, .services a:hover, .menu-overlay .menu-links a:hover, .load-more-button:hover { + background-color: var(--hover-color); + color: var(--hover-text-color); +} + +.container { + flex: 1; + display: flex; + width: 100%; + min-width: 300px; + align-items: flex-start; + flex-wrap: wrap; + margin: 20px auto 0; + max-width: 1200px; +} + +.content { + width: 60%; + flex-grow: 1; + padding: 10px; + box-sizing: border-box; +} + +.box { + margin-bottom: 10px; + padding: 10px; +} + +.box h3 { + margin: 0 0 10px 0; + font-size: 16px; + color: var(--primary-color); + font-family: 'default-512', Arial, sans-serif; + +} + +.box p, .box a { + margin: 5px 0; + font-size: 14px; + color: var(--text-color); + font-family: 'default-512', Arial, sans-serif; +} + +.box a { + color: var(--primary-color); + text-decoration: none; +} + +.box a:hover { + text-decoration: underline; +} + +footer { + background-color: var(--border-color); + color: var(--text-color); + text-align: center; + padding: 10px 0; + font-size: 14px; + width: 100%; + flex-shrink: 0; +} + +hr { + border: 1px solid var(--border-color); + margin: 20px 0; +} + +.left-aligned-title { + text-align: left; + font-size: 48px; + font-weight: bold; + color: var(--primary-color); + margin-bottom: 15px; + text-decoration: none; + font-family: 'default-512', Arial, sans-serif; +} + +.navbar-title { + + text-decoration: none; +} + +.no-top-m { + margin-top: 0 !important; +} + +.ascii-box { + border: 2px solid #555; + border-radius: 10px; + padding: 20px; + color: var(--primary-color); + font-size: 18px; + font-family: 'default-512', Arial, sans-serif; +} + +.services { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin: 20px 0; +}.chat-container { + position: fixed; + bottom: 0; + right: 20px; + width: 90%; + max-width: 400px; + background-color: var(--secondary-color); + border: 2px solid var(--border-color); + border-radius: 10px; + padding: 20px; + z-index: 1001; + transform: translateY(100%); + opacity: 0; + transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; + visibility: hidden; +} + +.chat-container.open { + transform: translateY(0); + opacity: 1; + visibility: visible; +} + +.chat-header { + font-size: 20px; + font-weight: bold; + color: var(--secondary-color); + text-align: center; + margin-bottom: 10px; + position: relative; + font-family: 'default-512', Arial, sans-serif; +} + +.audio-track { + margin: 20px 0; + text-align: center; +} + +.complaints { + text-align: center; + margin-top: 40px; +} + +.complaints a { + color: #ffbb00; + text-decoration: none; + transition: color 0.3s ease; + font-family: 'default-512', Arial, sans-serif; +} + +.complaints a:hover { + color: #ff99cc; +} + +.mobile-only { + display: none; +} + +ul { + list-style-type: none; + padding: 0; +} + +ul li { + padding: 10px 15px; + margin-bottom: 10px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + font-family: 'default-512', Arial, sans-serif; +} + +ul li::before { + content: "•"; + color: var(--primary-color); + padding-right: 10px; +} + +ul li span { + font-weight: bold; + color: var(--primary-color); +} + + + +h4 { + text-decoration: underline; + size: 12px; + color: var(--primary-color); + font-family: 'default-512', Arial, sans-serif; +} + +@media screen and (max-width: 1280px) { + .sidebar, .sidebar-right { + display: none; + } +} + +@media screen and (min-width: 1281px) { + .hamburger-menu { + display: none; + } + + .chat-toggle-btn { + bottom: 20px; + } +} + |