/* ==================================== Sesli Yorumlar Eklentisi Stil Dosyası Version: 2.8 ==================================== */ /* Not: Renk ve font ailesi gibi ana değişkenler (--sly-primary-color, --sly-font-family vb.), eklentinin PHP dosyası tarafından sitenizin bölümüne dinamik olarak eklenir. Bu dosya, bu değişkenleri kullanarak genel yapıyı ve düzeni oluşturur. */ /* -- Genel Form ve Yorum Listesi Konteyneri -- */ div#sesli-yorum-form-wrapper, .sesli-yorumlar-listesi { font-family: var(--sly-font-family, sans-serif); /* Panelden gelen font veya varsayılan */ max-width: 700px; margin: 30px auto; box-sizing: border-box; } div#sesli-yorum-form-wrapper { background: var(--sly-bg-white, #ffffff); padding: 25px 30px; border-radius: 8px; /* Sabit değer veya değişken olabilir */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid var(--sly-border-color, #ddd); } div#sesli-yorum-form-wrapper h3 { margin-top: 0; margin-bottom: 20px; color: var(--sly-dark-text, #333); text-align: center; font-size: 1.5em; } /* -- Form Elemanları (Input, Textarea) -- */ form#sesli-yorum-formu input[type="text"], form#sesli-yorum-formu input[type="email"], form#sesli-yorum-formu textarea { width: 100%; padding: 12px; border: 1px solid var(--sly-border-color, #ddd); border-radius: 8px; font-size: 1em; color: var(--sly-dark-text, #333); background-color: var(--sly-bg-white, #ffffff); transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } form#sesli-yorum-formu input[type="text"]:focus, form#sesli-yorum-formu input[type="email"]:focus, form#sesli-yorum-formu textarea:focus { outline: none; border-color: var(--sly-primary-color, #4a90e2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sly-primary-color, #4a90e2) 20%, transparent); } form#sesli-yorum-formu label { font-weight: bold; margin-bottom: 8px; display: inline-block !important; visibility: visible !important; color: var(--sly-dark-text, #333); padding: 0; height: auto; opacity: 1; } form#sesli-yorum-formu p { margin-bottom: 20px; } /* Gizlilik notları için stil */ .sly-privacy-note { display: block; font-size: 0.8em; color: #777; font-weight: normal; margin-top: 5px; } /* Gönder butonu altı uyarı mesajı */ .sly-submit-warning { font-size: 0.8em; color: #777; text-align: center; margin-top: -10px; line-height: 1.4; } .sly-submit-warning a { color: var(--sly-primary-color, #4a90e2); text-decoration: underline; } .sly-submit-warning a:hover { text-decoration: none; } /* YENİ: Onay kutusu için sarmalayıcı */ .sly-checkbox-wrapper { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; } .sly-checkbox-wrapper input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; } .sly-checkbox-wrapper label { font-size: 0.9em; font-weight: normal; color: #555; line-height: 1.5; } .sly-checkbox-wrapper label a { color: var(--sly-primary-color, #4a90e2); text-decoration: underline; } .sly-checkbox-wrapper label a:hover { text-decoration: none; } /* -- Butonlar -- */ form#sesli-yorum-formu button { padding: 12px 20px; border: none; border-radius: 8px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; color: var(--sly-light-text, #ffffff); } form#sesli-yorum-formu button:hover:not(:disabled) { transform: translateY(-2px); } form#sesli-yorum-formu #sly-kayit-baslat { background-color: var(--sly-secondary-color, #50e3c2); } form#sesli-yorum-formu #sly-kayit-durdur { background-color: var(--sly-danger-color, #e74c3c); } form#sesli-yorum-formu #sly-kayit-yenile { background-color: var(--sly-warning-color, #f39c12); } form#sesli-yorum-formu #sly-gonder { background-color: var(--sly-primary-color, #4a90e2); width: 100%; } form#sesli-yorum-formu button:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.7; transform: none; } /* -- Ses Çalar ve Mesaj Alanı -- */ div#sly-audio-playback-area { margin-top: 20px; padding: 15px; background-color: var(--sly-bg-light, #f9f9f9); border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; } div#sly-audio-playback-area p { margin: 0; flex-basis: 100%; } audio#sly-audio-playback { flex-grow: 1; min-width: 200px; } div#sly-form-mesaj { margin-top: 15px; padding: 10px; border-radius: 8px; text-align: center; font-weight: bold; } /* -- Onaylanmış Yorumlar Listesi -- */ .sesli-yorumlar-listesi { padding-top: 20px; border-top: 1px solid var(--sly-border-color, #ddd); } .sesli-yorumlar-listesi h3 { text-align: center; margin-bottom: 30px; color: var(--sly-dark-text, #333); } .tek-yorum { background: var(--sly-bg-white, #ffffff); padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid var(--sly-border-color, #ddd); } .tek-yorum .yorum-icerik { margin-bottom: 15px; color: #555; line-height: 1.6; } .tek-yorum audio { width: 100%; margin-top: 10px; } /* -- Yorum Bilgisi ve Aksiyonları -- */ .yorum-ust-bilgi { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; } .yorum-ust-bilgi strong { font-size: 1.2em; color: var(--sly-primary-color, #4a90e2); } .yorum-tarihi { font-size: 0.9em; color: #666; font-weight: normal; white-space: nowrap; } .yorum-actions { margin-top: 15px; text-align: right; } /* -- Beğeni Butonu -- */ .sly-like-button { background: none; border: 1px solid var(--sly-border-color, #ddd); border-radius: 20px; padding: 5px 12px; display: inline-flex; align-items: center; cursor: pointer; color: var(--sly-dark-text, #333); /* Buton içindeki yazı rengi */ transition: all 0.3s ease; } .sly-like-button:hover:not(.liked) { border-color: var(--sly-primary-color, #4a90e2); background-color: color-mix(in srgb, var(--sly-primary-color, #4a90e2) 10%, transparent); } .sly-like-button .heart-icon { width: 18px; height: 18px; margin-right: 6px; fill: #aaa; transition: all 0.3s ease; } .sly-like-button:hover:not(.liked) .heart-icon { fill: var(--sly-danger-color, #e74c3c); transform: scale(1.1); } .sly-like-button .like-count { font-size: 0.95em; font-weight: bold; } .sly-like-button.liked { cursor: default; border-color: var(--sly-danger-color, #e74c3c); background-color: color-mix(in srgb, var(--sly-danger-color, #e74c3c) 10%, transparent); } .sly-like-button.liked .heart-icon { fill: var(--sly-danger-color, #e74c3c); } /* ==================================== Responsive Tasarım (Mobil Cihazlar İçin) ==================================== */ @media (max-width: 768px) { div#sesli-yorum-form-wrapper { padding: 20px; margin: 20px 10px; } div#sesli-yorum-form-wrapper h3 { font-size: 1.3em; } form#sesli-yorum-formu p:has(#sly-kayit-baslat) { display: flex; gap: 10px; flex-wrap: wrap; } form#sesli-yorum-formu p:has(#sly-kayit-baslat) button { flex-grow: 1; } }