Bu bir örnek mesaj içerik bilgisidir. Kullanıcıya gönderilen ya da alınan mesajın metni burada yer alır.
12:45 ✔✔
/* * 1. Tarayıcı Varsayılanlarını Sıfırlama/Normalleştirme * Basit bir sıfırlama ile başlayalım: */ * { margin: 0; padding: 0; box-sizing: border-box; /* Tüm elementlerde kutu modelinin kolay yönetimi */ } /* * 2. Genel Tipografi (Yazı Tipi) Ayarları * Projenin varsayılan fontunu ve temel satır yüksekliğini belirler. */ body { font-family: Arial, Helvetica, sans-serif; /* Proje fontunuzu buraya yazın */ line-height: 1.6; /* Okunabilirliği artırır */ color: #333; /* Varsayılan metin rengi */ background-color: #f4f4f4; /* Varsayılan arka plan rengi */ } /* * 3. Bağlantı Stilleri */ a { text-decoration: none; /* Bağlantı alt çizgilerini kaldırır */ color: #007bff; /* Mavi, standart bağlantı rengi */ } a:hover { text-decoration: underline; /* Mouse üzerine gelince alt çizgi ekler */ } /* =============================== */ /* 2. NAVIGASYON ÇUBUĞU (NAVBAR) STİLLERİ */ /* =============================== */ .main-header { background-color: #34495e; /* Koyu Gri/Mavi, kontrast için ideal */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hafif gölge ekleyerek 3D görünüm verir */ width: 100%; position: sticky; /* Veya fixed: sayfanın üstünde sabit kalmasını sağlar */ top: 0; z-index: 1000; /* Diğer içeriklerin üzerinde kalmasını sağlar */ } .navbar { display: flex; /* İçindeki öğeleri yatay hizalamak için Flexbox kullanılır */ justify-content: space-between; /* Marka solda, menü sağda olsun */ align-items: center; /* Öğeleri dikeyde ortalar */ max-width: 1200px; /* Sabit bir genişlikte ortalama (proje boyutunuza göre değişir) */ margin: 0 auto; /* Sayfayı ortalar */ padding: 15px 20px; /* İç boşluk ekler (üst/alt: 15px, sağ/sol: 20px) */ } .navbar-brand { font-size: 1.8em; /* Büyük font boyutu */ font-weight: bold; color: #ecf0f1; /* Açık Gri/Beyaz, koyu arka plan üzerinde net görünür */ } .nav-list { list-style: none; /* Liste işaretlerini (noktaları) kaldırır */ display: flex; /* Liste öğelerini (li) yatay hizalar */ } .nav-item { margin-left: 25px; /* Menü öğeleri arasında boşluk bırakır */ } .nav-link { color: #bdc3c7; /* Yumuşak beyaz/gri bir renk */ font-size: 1.1em; padding: 5px 0; /* Tıklama alanını genişletmek için küçük boşluk */ transition: color 0.3s ease; /* Yumuşak geçiş efekti ekler */ } /* Mouse üzerine gelme (Hover) efekti */ .nav-link:hover, .nav-link.active { /* Aktif sayfadaki linki vurgulamak için 'active' sınıfı */ color: #e67e22; /* Turuncu tonu, vurgu rengi */ } /* Mobil Buton Stilleri */ .menu-toggle { display: none; /* Varsayılan olarak masaüstü görünümünde gizle */ background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; /* Navigasyon çubuğundan bir tık yukarıda olsun */ } /* Basit bir Hamburger İkonu Çizimi */ .hamburger { display: block; width: 25px; height: 3px; background-color: #ecf0f1; /* Beyaz renk */ position: relative; transition: background-color 0.3s; } .hamburger::before, .hamburger::after { content: ''; display: block; width: 25px; height: 3px; background-color: #ecf0f1; position: absolute; transition: transform 0.3s, top 0.3s; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } /* =============================== */ /* 3. MOBİL UYUMLULUK (MEDIA QUERY) */ /* =============================== */ @media (max-width: 768px) { /* 1. Navbar Düzenini Değiştirme */ .navbar { padding: 10px 20px; /* Daha az dikey boşluk */ } /* 2. Hamburger İkonunu Gösterme */ .menu-toggle { display: block; /* Mobil cihazlarda butonu göster */ } /* 3. Menü Listesini Gizleme ve Dikey Yapma */ .nav-list { display: none; /* Varsayılan olarak menüyü gizle */ flex-direction: column; /* Öğeleri alt alta sırala */ position: absolute; top: 60px; /* Navbar yüksekliğinin altına yerleştir */ left: 0; width: 100%; background-color: #2c3e50; /* Menü açılınca farklı arka plan rengi */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 10px 0; } /* 4. Menü Açıkken Listeyi Gösterme */ /* **NOT:** Bu sınıf (nav-list-open), JavaScript ile eklenecektir. */ .nav-list.nav-list-open { display: flex; /* JavaScript bu sınıfı eklediğinde menüyü göster */ } /* 5. Menü Öğeleri ve Linklerinin Yeni Stili */ .nav-item { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-link { display: block; /* Tüm satırı kaplamasını sağla */ padding: 15px 20px; text-align: center; color: #ecf0f1; } } /* =============================== */ /* 4. DÜĞMELER (BUTTONS) STİLLERİ */ /* =============================== */ .btn { display: inline-block; /* Margin ve padding için */ padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; /* Köşeleri hafif yuvarlak */ cursor: pointer; font-size: 1em; font-weight: 600; text-align: center; text-decoration: none; /* Link düğmelerinde alt çizgiyi kaldırır */ transition: background-color 0.3s ease, transform 0.1s ease; /* Yumuşak geçişler */ } /* Birincil Düğme (En Önemli Eylemler) */ .btn-primary { background-color: #e67e22; /* Turuncu Vurgu Rengi */ color: #ffffff; } .btn-primary:hover { background-color: #d35400; /* Daha koyu bir turuncu */ transform: translateY(-1px); /* Hafif yukarı kayma efekti */ } /* İkincil Düğme (Yardımcı Eylemler) */ .btn-secondary { background-color: #bdc3c7; /* Açık gri */ color: #34495e; /* Koyu metin rengi */ } .btn-secondary:hover { background-color: #95a5a6; /* Daha koyu gri */ transform: translateY(-1px); } /* Outline Düğme (Şeffaf Arka Plan) */ .btn-outline { background-color: transparent; color: #e67e22; border: 2px solid #e67e22; } .btn-outline:hover { background-color: #e67e22; /* Hover'da arka planı doldurur */ color: #ffffff; transform: translateY(-1px); } /* =============================== */ /* 5. KART BİLEŞENLERİ (CARDS) STİLLERİ */ /* =============================== */ /* Kart Kapsayıcı (Izgara Düzeni) */ .card-container { display: grid; /* 3 sütunlu bir düzen (ihtiyaca göre 2 veya 4 olabilir) */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; /* Kartlar arasındaki boşluk */ padding: 30px; max-width: 1200px; margin: 30px auto; } /* Tekil Kart Stili */ .card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */ overflow: hidden; /* Resmin dışarı taşmasını engeller */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); /* Hover'da hafifçe yukarı kalkma */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Daha belirgin gölge */ } /* Kart Resmi */ .card-img { width: 100%; height: 200px; /* Sabit bir yükseklik */ object-fit: cover; /* Resmin bozulmadan doldurmasını sağlar */ } /* Kart İçerik Alanı */ .card-body { padding: 20px; } .card-title { font-size: 1.5em; color: #34495e; margin-bottom: 10px; } .card-text { color: #7f8c8d; margin-bottom: 20px; } /* Ana Çatının Tanımlanması */ .chat-container { width: 100%; max-width: 400px; /* Sohbet pencereleri genellikle dardır */ height: 600px; margin: 50px auto; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; /* İç öğeleri dikey olarak sırala */ overflow: hidden; background-color: #fff; } /* Başlık Alanı */ .chat-header { padding: 15px; background-color: #34495e; /* Koyu Mavi */ color: white; font-size: 1.2em; font-weight: bold; text-align: center; } /* Mesaj Alanı */ .chat-messages { flex-grow: 1; /* Mesajların tüm kalan alanı kaplamasını sağlar */ padding: 15px; overflow-y: auto; /* Dikey kaydırmayı sağlar */ background-color: #f7f7f7; } /* Tekil Mesaj Stilleri */ .message { padding: 8px 12px; margin-bottom: 10px; border-radius: 18px; max-width: 80%; line-height: 1.4; } .message.user { background-color: #e67e22; /* Turuncu (Kullanıcı Mesajı) */ color: white; align-self: flex-end; /* Sağda hizala */ margin-left: auto; } .message.system { background-color: #ecf0f1; /* Açık Gri (Sistem/Diğer Kullanıcı Mesajı) */ color: #34495e; align-self: flex-start; /* Solda hizala */ margin-right: auto; } /* =============================== */ /* 6. CHAT GİRİŞ ALANI STİLLERİ */ /* =============================== */ /* Ana Giriş Alanı Kapsayıcısı */ .chat-input-area { padding: 10px; border-top: 1px solid #ddd; background-color: #ffffff; /* Flexbox kullanarak input ve butonu yan yana hizalama */ display: flex; align-items: center; /* Öğeleri dikeyde ortala */ } /* Mesaj Giriş Kutusu (UniEdit/UniMemo) */ /* UniGUI, bu bileşenleri genellikle 'x-form-text' gibi sınıflarla render eder. Ancak biz kendi sınıfımızı kullanalım ve temel alanlara stil verelim. Not: UniGUI bileşenlerinin içindeki input elementini hedeflemek için UniGUI'nin kendi sınıflarını da kullanmak gerekebilir. */ .message-input .x-form-text { /* Doğrudan UniGUI input elementini hedefleme */ flex-grow: 1; /* Mevcut tüm boşluğu doldurmasını sağla */ padding: 10px 15px; border: 1px solid #bdc3c7; border-radius: 20px; /* Daha yuvarlak kenarlar */ margin-right: 10px; font-size: 1em; } /* Gönder Butonu (UniButton) */ /* Daha önce tanımladığımız .btn ve .btn-primary sınıflarını kullanacak */ /* Eğer butonun boyutunu ayarlamak gerekirse: */ .chat-input-area .btn { min-width: 80px; /* Butonun minimum genişliği */ height: 40px; /* Giriş kutusuyla aynı yükseklik için ayar */ padding: 0 15px; border-radius: 20px; } /* =============================== */ /* 7. MESAJ DETAYLARI VE SİMGE STİLLERİ */ /* =============================== */ /* Mesaj İçindeki Detaylar Kapsayıcısı (Saat, Okundu Bilgisi) */ .message-details { display: flex; /* İçindeki öğeleri yan yana hizala */ align-items: center; /* Öğeleri dikeyde ortala */ justify-content: flex-end; /* Sağ tarafa yasla */ font-size: 0.8em; /* Küçük metin boyutu */ color: rgba(255, 255, 255, 0.7); /* Mesaj rengine göre daha soluk metin */ margin-top: 5px; position: absolute; /* Mesaj balonunun sağ alt köşesine konumlandırma için */ bottom: 0; right: 5px; } /* Saat Metni Stili */ .message-details .time { margin-right: 5px; } /* Okundu/Teslim Edildi Tık İşareti Stili (Örn: Font Awesome veya özel bir karakter kullanıyorsanız) */ .message-details .tick { /* Mavi Tıklar (Okundu Bilgisi) için */ color: #3498db; /* Mavi Vurgu */ font-weight: bold; } /* =============================== */ /* 8. KARŞI TARAF MESAJ (RECEIVER) STİLLERİ */ /* =============================== */ /* Karşıdan Gelen Mesaj (Alıcı Mesajı) */ .message.receiver { background-color: #ecf0f1; /* Açık, nötr bir gri/beyaz */ color: #34495e; /* Koyu metin rengi */ align-self: flex-start; /* Sola hizala */ margin-right: auto; /* Gönderen mesajından biraz farklı bir görsel imza */ border: 1px solid #ddd; } /* Karşı Taraf Mesaj Detayları */ .message.receiver .message-details { /* Açık arka plan üzerinde daha koyu ve net bir metin */ color: rgba(0, 0, 0, 0.5); } /* Gönderilen mesajdaki mavi tıklar, karşı tarafta görünmemeli (varsayım) Ancak görünürse, rengini ayarlayabiliriz: */ .message.receiver .tick { color: #95a5a6; /* Gri, nötr tık rengi */ } /* =============================== */ /* 9. KULLANICI LİSTESİ ÖĞE STİLLERİ */ /* =============================== */ /* Ana Kapsayıcı (UniLabel'ın ElementClassName'i) */ .user-list-item { width: 150px; display: flex; /* İç öğeleri yatay hizalar */ align-items: center; /* Öğeleri dikeyde ortalar */ padding: 10px 15px; border-bottom: 1px solid #eee; /* Öğeler arasında ayırıcı çizgi */ cursor: pointer; background-color: #fff; transition: background-color 0.2s ease; } .user-list-item:hover { background-color: #f4f4f4; /* Mouse üzerine gelince hafif gri arka plan */ } /* Sol Alan (Avatar - Varsayıyoruz) */ .user-avatar { width: 50px; height: 50px; border-radius: 50%; /* Daire şeklinde avatar */ background-color: #bdc3c7; /* Varsayılan gri renk */ margin-right: 10px; flex-shrink: 0; /* Küçülmesini engeller */ } /* Orta Alan (İsim ve Son İçerik) */ .user-info { flex-grow: 1; /* Mevcut alanı doldurmasını sağlar */ min-width: 0; /* İçerik taşmasını engellemek için */ } .user-name { font-weight: bold; color: #34495e; font-size: 1.1em; margin-bottom: 2px; } .user-last-content { color: #7f8c8d; font-size: 0.9em; white-space: nowrap; /* Tek satırda kalmasını sağlar */ overflow: hidden; text-overflow: ellipsis; /* Taşmayı üç nokta ile gösterir */ } /* Sağ Alan (Zaman, Okunmamış Adet) */ .user-meta { display: flex; flex-direction: column; /* Öğeleri alt alta sıralar */ align-items: flex-end; /* Sağ tarafa hizalar */ margin-left: 15px; flex-shrink: 0; } /* Saat Etiketi (Time Label) */ .meta-time { font-size: 0.8em; color: #7f8c8d; margin-bottom: 4px; } /* Okunmamış Adet Sayısı (Badge/Rozet) */ .meta-unread-count { background-color: #e67e22; /* Turuncu vurgu rengi */ color: white; font-size: 0.75em; font-weight: bold; border-radius: 12px; /* Oval şekil */ padding: 3px 8px; min-width: 25px; /* Tek haneli sayılar için bile düzgün görünüm */ text-align: center; } /* =============================== */ /* 16. UNIGUI ÖZEL BİLEŞEN STİLLERİ (WINDOW/MODAL) */ /* =============================== */ /* Modal Başlık Çubuğu Stili (UniWindow'un x-window-header sınıfını hedefleme) */ /* NOT: UniGUI bu kısımlara otomatik sınıf atar. Doğrudan özelleştirmek daha güvenlidir. */ .x-window-header { background-color: #34495e !important; /* Koyu Mavi/Gri */ color: white !important; border-color: #34495e !important; font-size: 1.2em; font-weight: bold; } /* Modal Gövdesi (İçerik) Stili (UniWindow'un x-window-body sınıfını hedefleme) */ .x-window-body { background-color: #fcfcfc !important; padding: 15px !important; } /* UniWindow Bileşenine özel bir gölge/kenarlık stili */ .custom-modal-window { border-radius: 8px !important; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } /* =============================== */ /* 17. PROFİL KARTI STİLİ */ /* =============================== */ /* Profil Kartı Kapsayıcısı (UniPanel) */ .profile-card { width: 300px; margin: 30px auto; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; } /* Profil Fotoğrafı Alanı */ .profile-avatar { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 15px; background-color: #e67e22; /* Vurgu Rengi */ border: 3px solid #fcfcfc; box-shadow: 0 0 0 3px #bdc3c7; /* Çerçeve efekti */ } /* Profil Bilgi Etiketleri */ .profile-info-label { font-weight: 600; color: #34495e; display: block; margin-top: 10px; } .profile-info-value { color: #7f8c8d; margin-bottom: 5px; }