/* * LALA paneli teması — AdminJS'in üstüne, Sneat (ThemeSelection) görünümü: * açık zemin, çerçevesiz gölgeli kartlar, Public Sans. Ana renk LALA'nın * yeşili (#315556: mobil uygulama, logo ve mağaza sayfalarıyla aynı). * Sneat'in dosyaları kullanılmadı; renkler ve ölçüler burada yeniden yazıldı. * Seçiciler AdminJS'in data-css adları ve adminjs_* sınıfları ile kendi * bileşenlerimizin lala-* sınıfları (admin/components). * * Ana renk --lala-* jetonlarında. Değişirse AdminJS'in kendi renkleri de * değişir: options.mjs → theme ve components/tema.js → KOYU. */ :root { --lala-500: #5A8384; /* grafik sütunları, açık ton */ --lala-600: #315556; /* ana renk */ --lala-700: #294747; /* üzerine gelince */ --lala-50: #F2F7F7; --lala-100: #E6EFEF; /* seçili menü, yumuşak rozet */ --lala-200: #CFE0E0; --lala-yazi: #315556; /* ana renk yazı olarak (koyuda açık ton) */ --zemin: #F4F6F6; --kart: #FFFFFF; --kart-2: #FAFBFB; /* pasif kutu, sayı okları */ --vurgu: #F4F7F7; /* üzerine gelince */ --ipucu-zemin: #FBFCFC; --kenar: #E4E7E8; --kenar-acik: #EEF1F1; --kenar-kutu: #D7DEDF; /* form kutuları, düğmeler */ --kenar-ic: #E4E7E8; /* kutu içi ayraç, kapalı anahtar */ --baslik: #33403F; /* başlıklar, büyük sayılar */ --yazi: #33403F; --yazi-2: #5F6B6C; --soluk: #869293; --soluk-2: #A3ADAE; --ana-yazi: #FFFFFF; /* ana renkli düğmenin yazısı */ --kirmizi: #FF3E1D; --kirmizi-zemin: #FFF1EE; --evet: #56CA00; --hayir: #C3CBCC; --top: #FFFFFF; /* anahtar ve çalar topu */ --calar-ray: #DCE6E6; --calar-tampon: #C2D2D2; --odak: rgba(49, 85, 86, 0.15); --odak-2: rgba(49, 85, 86, 0.25); --yari-kart: rgba(255, 255, 255, 0.92); --golge: 0 1px 2px rgba(40, 60, 61, 0.06); --golge-kart: 0 2px 6px 0 rgba(40, 60, 61, 0.12); --golge-dugme: 0 2px 4px 0 rgba(49, 85, 86, 0.35); --golge-ust: 0 -4px 16px rgba(40, 60, 61, 0.08); --yuvarlak: 8px; --pano-sayi: #33403F; /* Rozetler ve renkli ikon zeminleri (components/ortak.js → TONLAR, pano.jsx) */ --ton-success-bg: #E8FADF; --ton-success-fg: #4CAF1B; --ton-warning-bg: #FFF2D6; --ton-warning-fg: #D18F00; --ton-danger-bg: #FFE0DB; --ton-danger-fg: #E8331A; --ton-info-bg: #D7F5FC; --ton-info-fg: #03A5C8; --ton-grey-bg: #ECEFEF; --ton-grey-fg: #5F6B6C; --ton-primary-bg: #E6EFEF; --ton-primary-fg: #315556; --ton-varsayilan-bg: #E6EFEF; --ton-varsayilan-fg: #294747; } /* * Koyu tema: üst çubuktaki seçimle konur * (components/tema.js; AdminJS'in kendi parçalarının koyu paleti de orada, * değerler bununla aynı). Sneat'in koyu düzeni, yeşile uygun hafif yeşil * tonlu gri zeminle; ana renk koyu zeminde okunacak kadar açık. Ana renkli * düğmelerin yazısı koyu (AdminJS "white"ı yüzey rengi yapıyor). */ :root[data-tema="koyu"] { color-scheme: dark; --lala-500: #6FA5A6; --lala-600: #6FA5A6; --lala-700: #86B9BA; --lala-50: #1F2B2C; --lala-100: #243A3B; --lala-200: #2F4A4B; --lala-yazi: #8CC3C4; --zemin: #1C2222; --kart: #242B2C; --kart-2: #293132; --vurgu: #2B3435; --ipucu-zemin: #273031; --kenar: #354041; --kenar-acik: #2F3839; --kenar-kutu: #445051; --kenar-ic: #3A4546; --baslik: #DDE5E5; --yazi: #D3DCDC; --yazi-2: #B0BDBD; --soluk: #8B9A9A; --soluk-2: #6B7A7A; --ana-yazi: #1C2222; --kirmizi: #FF6B52; --kirmizi-zemin: #3E2A2A; --evet: #71DD37; --hayir: #4E5A5B; --calar-ray: #334041; --calar-tampon: #405051; --odak: rgba(140, 195, 196, 0.2); --odak-2: rgba(140, 195, 196, 0.3); --yari-kart: rgba(36, 43, 44, 0.92); --golge: 0 1px 2px rgba(0, 0, 0, 0.3); --golge-kart: 0 2px 8px 0 rgba(0, 0, 0, 0.35); --golge-dugme: 0 2px 4px 0 rgba(111, 165, 166, 0.3); --golge-ust: 0 -4px 16px rgba(0, 0, 0, 0.35); --pano-sayi: #DDE5E5; --ton-success-bg: #2C4127; --ton-success-fg: #71DD37; --ton-warning-bg: #45391F; --ton-warning-fg: #FFAB00; --ton-danger-bg: #4A2A2A; --ton-danger-fg: #FF6B52; --ton-info-bg: #1F3E4A; --ton-info-fg: #34D1F2; --ton-grey-bg: #303A3B; --ton-grey-fg: #B0BDBD; --ton-primary-bg: #243A3B; --ton-primary-fg: #8CC3C4; --ton-varsayilan-bg: #243A3B; --ton-varsayilan-fg: #8CC3C4; } :root[data-tema="koyu"] body { background: var(--zemin); } :root[data-tema="koyu"] { scrollbar-color: var(--kenar-kutu) transparent; } /* Yazı logosu açık zemin için teal'e boyalı; koyuda açık renge çevrilir. */ :root[data-tema="koyu"] img[src*="lala-logo-light"] { filter: brightness(0) invert(0.9); } /* Tablodaki ve detaydaki bağlantılar (kitap, yazar…) koyu zeminde daha açık. */ :root[data-tema="koyu"] :is(.adminjs_TableCell, .lala-detay, [data-css$="-show"]) a[variant] { color: var(--lala-yazi) !important; } /* Takvim: react-datepicker'ın gövde, gün ve "Bugün" renkleri temadan gelmiyor. */ :root[data-tema="koyu"] .react-datepicker { background: var(--kart); border-color: var(--kenar-kutu); color: var(--yazi); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } :root[data-tema="koyu"] .react-datepicker__header { background: var(--kart); border-bottom-color: var(--kenar); } :root[data-tema="koyu"] :is(.react-datepicker__current-month, .react-datepicker__day, .react-datepicker-time__header, .react-datepicker__time-name, .react-datepicker__input-time-container) { color: var(--yazi); } :root[data-tema="koyu"] .react-datepicker__day-name { color: var(--soluk); } :root[data-tema="koyu"] :is(.react-datepicker__day--outside-month, .react-datepicker__day--disabled) { color: var(--soluk-2); } :root[data-tema="koyu"] .react-datepicker__day:hover { background: var(--vurgu); } :root[data-tema="koyu"] :is(.react-datepicker__day--selected, .react-datepicker__day--today.react-datepicker__day--keyboard-selected) { background: var(--lala-600); color: var(--ana-yazi); } :root[data-tema="koyu"] .react-datepicker__today-button { background: var(--kart-2); border-top-color: var(--kenar); color: var(--yazi); } :root[data-tema="koyu"] .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { border-bottom-color: var(--kart); } :root[data-tema="koyu"] .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { border-bottom-color: var(--kenar-kutu); } :root[data-tema="koyu"] .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after { border-top-color: var(--kart); } :root[data-tema="koyu"] .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before { border-top-color: var(--kenar-kutu); } body, [data-css="app"] { font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--yazi); } body { background: var(--zemin); } [data-css="app-content"] { background: var(--zemin); } /* ── Menü (Sneat: beyaz, gölgeli; seçili öğe açık mor zeminli, sağ kenarında şerit) ── */ [data-css="sidebar"] { background: var(--kart); border-right: 0; box-shadow: var(--golge-kart); z-index: 3; } [data-css="sidebar-logo"] { padding: 24px 28px 16px !important; justify-content: flex-start !important; } [data-css="sidebar-logo"] img { max-height: 34px; width: auto; } .lala-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 16px 24px; } .lala-menu-grup { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; } .lala-menu-grup-ad { display: flex; align-items: center; gap: 10px; padding: 8px 14px 6px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--soluk-2); text-transform: uppercase; } .lala-menu-grup-ad::before { content: ''; width: 14px; height: 1px; background: currentColor; flex: none; } .lala-menu-oge { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 6px; color: var(--yazi-2); font-size: 15px; font-weight: 400; text-decoration: none; line-height: 22px; transition: background .15s, color .15s; } .lala-menu-oge .adminjs_Icon, .lala-menu-oge svg { color: currentColor; flex: none; } .lala-menu-oge svg { width: 20px; height: 20px; stroke: currentColor; } .lala-menu-oge:hover { background: var(--vurgu); color: var(--yazi); } .lala-menu-oge.aktif { background: var(--lala-100); color: var(--lala-yazi); font-weight: 500; } .lala-menu-oge.aktif::after { content: ''; position: absolute; right: -16px; top: 50%; width: 4px; height: 36px; transform: translateY(-50%); border-radius: 4px 0 0 4px; background: var(--lala-600); } .lala-rozet { margin-left: auto; min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center; background: var(--ton-danger-bg); color: var(--ton-danger-fg); font-size: 12px; font-weight: 600; line-height: 18px; } /* ── Üst çubuk ve başlık ──────────────────────────────────────────────── */ /* Tema seçimi: oturum kutusunun solunda (components/TemaSecici) */ .lala-ust-sag { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .lala-tema { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--kenar); border-radius: 999px; background: var(--kart-2); } .lala-tema button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--soluk); cursor: pointer; } .lala-tema button svg { stroke: currentColor; } .lala-tema button:hover { color: var(--yazi); } .lala-tema button.secili { background: var(--kart); color: var(--lala-yazi); box-shadow: var(--golge); } /* Sneat'teki ayrık üst çubuk: zeminden kopuk, yuvarlak köşeli, gölgeli kart. */ [data-css="topbar"] { background: var(--kart); border: 0; border-radius: var(--yuvarlak); box-shadow: var(--golge-kart); margin: 16px 32px 0; width: auto; } @media (max-width: 700px) { [data-css="topbar"] { margin: 12px 12px 0; padding-left: 8px; padding-right: 8px; } } .adminjs_ActionHeader .adminjs_H2, .lala-sayfa-basligi { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--baslik); margin: 0 0 6px; } .adminjs_Breadcrumbs, .adminjs_Breadcrumbs a { font-size: 13px; } /* Liste sayfasındaki "Yeni …" butonu dolu ana renk (Filament'teki birincil eylem) */ [data-css$="-new-button"] { background: var(--lala-600) !important; border-color: var(--lala-600) !important; color: var(--ana-yazi) !important; box-shadow: var(--golge-dugme); } [data-css$="-new-button"] svg { stroke: var(--ana-yazi) !important; } [data-css$="-new-button"]:hover { background: var(--lala-700) !important; } /* ── Genel form öğeleri ───────────────────────────────────────────────── */ .adminjs_Button { border-radius: 6px !important; font-weight: 500; } .adminjs_Label { font-size: 13px !important; font-weight: 500 !important; color: var(--yazi) !important; margin-bottom: 6px !important; letter-spacing: .01em; } .adminjs_Input, textarea.adminjs_Input, [data-css] textarea { border-radius: 6px !important; border-color: var(--kenar-kutu) !important; min-height: 38px; box-shadow: none; font-size: 15px !important; } .adminjs_Input:focus, [data-css] textarea:focus { border-color: var(--lala-600) !important; box-shadow: 0 0 0 3px var(--odak) !important; outline: none; } .adminjs_Input:disabled { background: var(--kart-2) !important; color: var(--soluk) !important; } .adminjs_Select [class*="-control"] { border-radius: 6px !important; border-color: var(--kenar-kutu) !important; min-height: 38px; box-shadow: none; } .adminjs_Select [class*="-control"]:focus-within { border-color: var(--lala-600) !important; box-shadow: 0 0 0 3px var(--odak) !important; } .adminjs_DatePicker input { border-radius: 6px !important; } /* Çoklu seçimdeki seçili öğeler (kategori, etiket…): Sneat'in yumuşak mor çipi. */ .adminjs_Select [class*="-multiValue"] { background: var(--lala-100) !important; border-radius: 4px !important; } .adminjs_Select [class*="-multiValue"] > div:first-child { color: var(--lala-yazi) !important; font-weight: 500; } .adminjs_Select [class*="-multiValue"] > div:last-child { color: var(--lala-yazi) !important; border-radius: 0 4px 4px 0; } .adminjs_Select [class*="-multiValue"] > div:last-child:hover { background: var(--lala-200) !important; } /* * react-datepicker kutunun içine ekran okuyucu için bir satır yazıyor * ("Selected date: …"). Kendi CSS'inde gizli ama AdminJS o kuralı almamış: * kutu iki satır oluyordu. Görünmez yapıyoruz, ekran okuyucuda kalıyor. */ .react-datepicker__aria-live { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } /* Bölümün sağ altındaki "Sıfırla" (ör. zamanlama tarihlerini birden boşaltır). */ .lala-kart-alt { display: flex !important; justify-content: flex-end !important; padding: 0 24px 18px; margin-top: -6px; } /* Düğmenin kendisi görünüm seçicinin düğmesiyle aynı (yukarıda), tek farkı kırmızı çerçevesi. */ .lala-kart-alt .lala-sifirla { border-color: var(--kirmizi); } .lala-kart-alt .lala-sifirla:hover { background: var(--kirmizi-zemin); } /* ── Kartlar (form ve detay bölümleri) ────────────────────────────────── */ .lala-form, .lala-detay { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; } .lala-kart { background: var(--kart); border: 0; border-radius: var(--yuvarlak); box-shadow: var(--golge-kart); } .lala-kart-baslik { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--kenar-acik); } .lala-kart-baslik.katlanir { cursor: pointer; user-select: none; } .lala-kart-baslik.katlanir:hover { background: var(--vurgu); border-radius: var(--yuvarlak) var(--yuvarlak) 0 0; } .lala-kart-ikon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 6px; background: var(--ton-primary-bg); color: var(--ton-primary-fg); } .lala-kart-ikon svg { width: 20px; height: 20px; stroke: currentColor; } .lala-kart-yazi { flex: 1; min-width: 0; } .lala-kart-yazi h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 24px; color: var(--baslik); } .lala-kart-yazi p { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--soluk); } .lala-kart-ok { color: var(--soluk-2); padding-top: 2px; } .lala-kart-ok svg { stroke: currentColor; } .lala-izgara { display: grid; grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr)); column-gap: 24px; row-gap: 4px; padding: 20px 24px 8px; } .lala-kart-yalin > .lala-izgara { padding-top: 20px; } .lala-alan { min-width: 0; } .lala-alan.tam { grid-column: 1 / -1; } .lala-ipucu { margin: -14px 0 18px; font-size: 13px; line-height: 18px; color: var(--soluk); } @media (max-width: 900px) { .lala-izgara { grid-template-columns: minmax(0, 1fr); } } /* Detay sayfasındaki değerler */ .lala-detay .lala-izgara { row-gap: 0; } .lala-teknik { font-size: 12px; color: var(--soluk-2); padding: 0 4px; } /* Kaydet çubuğu: uzun formda hep görünür */ .lala-form-alt { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 24px; margin-top: -8px; background: var(--yari-kart); backdrop-filter: blur(6px); border: 0; border-radius: var(--yuvarlak); box-shadow: var(--golge-kart); } .lala-form-alt > button[type="submit"] { order: -1; box-shadow: var(--golge-dugme); } .lala-ilerleme { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; color: var(--soluk); } .lala-ilerleme-cubuk { width: 180px; height: 6px; border-radius: 3px; background: var(--lala-100); overflow: hidden; } .lala-ilerleme-cubuk > div { height: 100%; background: var(--lala-600); transition: width .2s; } /* ── Sayı kutusu (oklu) ───────────────────────────────────────────────── */ .lala-sayi { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--kenar-kutu); border-radius: 8px; background: var(--kart); box-shadow: var(--golge); overflow: hidden; } .lala-sayi:focus-within { border-color: var(--lala-600); box-shadow: 0 0 0 3px var(--odak); } .lala-sayi input { width: 84px; border: 0; outline: 0; padding: 0 12px; font: inherit; font-size: 14px; color: var(--yazi); background: transparent; -moz-appearance: textfield; appearance: textfield; } .lala-sayi input::-webkit-outer-spin-button, .lala-sayi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lala-sayi-oklar { display: flex; flex-direction: column; border-left: 1px solid var(--kenar-ic); } .lala-sayi-oklar button { flex: 1; width: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--kart-2); color: var(--soluk); cursor: pointer; } .lala-sayi-oklar button + button { border-top: 1px solid var(--kenar-ic); } .lala-sayi-oklar button:hover { background: var(--lala-100); color: var(--lala-yazi); } .lala-sayi-oklar svg { stroke: currentColor; } .lala-birim { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--kenar-ic); background: var(--kart-2); color: var(--soluk); font-size: 14px; } .lala-sayi.pasif { opacity: .6; } /* ── Anahtar düğmesi ──────────────────────────────────────────────────── */ .lala-anahtar { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 26px 0 6px; user-select: none; } .lala-anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; } .lala-anahtar-ray { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--kenar-ic); transition: background .15s; flex: none; } .lala-anahtar-top { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--top); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; } .lala-anahtar input:checked + .lala-anahtar-ray { background: var(--lala-600); } .lala-anahtar input:checked + .lala-anahtar-ray .lala-anahtar-top { transform: translateX(20px); } .lala-anahtar input:focus-visible + .lala-anahtar-ray { box-shadow: 0 0 0 3px var(--odak-2); } .lala-anahtar-etiket { font-size: 14px; font-weight: 500; color: var(--yazi); } .lala-anahtar.pasif { opacity: .6; cursor: default; } /* Listede (sıralı liste sütunu): etiketsiz, boşluksuz, biraz küçük. */ .lala-anahtar.liste { padding: 0; } .lala-anahtar.liste .lala-anahtar-ray { width: 38px; height: 21px; } .lala-anahtar.liste .lala-anahtar-top { width: 17px; height: 17px; } .lala-anahtar.liste input:checked + .lala-anahtar-ray .lala-anahtar-top { transform: translateX(17px); } /* Kitap listesindeki yayın anahtarı (components/YayinAnahtari): yanında durumun adı. */ .lala-anahtar.lala-yayin { gap: 10px; } .lala-yayin-yazi { font-size: 13px; color: var(--soluk); white-space: nowrap; } .lala-yayin.acik .lala-yayin-yazi { color: var(--ton-success-fg); font-weight: 500; } /* Evet/hayır ikonu */ .lala-bool { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } .lala-bool svg { stroke: currentColor; } .lala-bool.evet { color: var(--evet); } .lala-bool.hayir { color: var(--hayir); } /* ── Görünüm seçici (anasayfa bloğu) ──────────────────────────────────── */ .lala-secici { display: flex; flex-wrap: wrap; gap: 8px; } .lala-secici button, .lala-sifirla, .lala-secim-dugme { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--kenar-kutu); background: var(--kart); color: var(--yazi-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--golge); } .lala-secici button svg, .lala-sifirla svg, .lala-secim-dugme svg { stroke: currentColor; } .lala-secici button:hover { background: var(--lala-50); } .lala-secici button.secili { background: var(--lala-600); border-color: var(--lala-600); color: var(--ana-yazi); } .lala-onizleme { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; } .lala-telefon { width: 174px; flex: none; border: 1px solid rgba(148, 163, 184, .4); border-radius: 16px; padding: 12px; background: rgba(148, 163, 184, .06); } .lala-onizleme-yazi { flex: 1; min-width: 200px; padding-top: 2px; } .lala-onizleme-yazi strong { display: block; font-weight: 600; margin-bottom: 4px; } .lala-onizleme-yazi p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soluk); } /* ── Ses çaları (components/Calar.jsx) ────────────────────────────────── */ .lala-calar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: var(--lala-50); border: 1px solid var(--kenar); border-radius: 10px; } .lala-calar.kompakt { padding: 0; gap: 10px; background: none; border: 0; min-width: 260px; } .lala-calar-dugme { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--lala-600); color: var(--ana-yazi); display: flex; align-items: center; justify-content: center; transition: background 120ms ease; } .lala-calar-dugme:hover { background: var(--lala-700); } .lala-calar-dugme svg { stroke: currentColor; fill: currentColor; margin-left: 1px; } .lala-calar.kompakt .lala-calar-dugme { width: 30px; height: 30px; } .lala-calar-cubuk { position: relative; flex: 1; min-width: 60px; height: 6px; border-radius: 999px; background: var(--calar-ray); cursor: pointer; } .lala-calar-cubuk:focus-visible { outline: 2px solid var(--lala-500); outline-offset: 5px; } .lala-calar-tampon, .lala-calar-dolu { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; } .lala-calar-tampon { background: var(--calar-tampon); } .lala-calar-dolu { background: var(--lala-600); } .lala-calar-nokta { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--top); border: 2px solid var(--lala-600); transform: translateY(-50%); box-shadow: var(--golge); } .lala-calar.kompakt .lala-calar-nokta { width: 11px; height: 11px; margin-left: -5px; } .lala-calar-zaman { flex: none; min-width: 96px; text-align: right; font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; } .lala-calar.kompakt .lala-calar-zaman { min-width: 82px; font-size: 12px; } .lala-calar.hatali .lala-calar-zaman { color: var(--kirmizi); } .lala-calar-ek { display: flex; align-items: center; gap: 6px; } .lala-calar-kucuk { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid var(--kenar); border-radius: 8px; background: var(--kart); color: var(--soluk); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; } .lala-calar-kucuk:hover { color: var(--yazi); border-color: var(--kenar-kutu); } .lala-calar-kucuk svg { width: 16px; height: 16px; stroke: currentColor; } .lala-calar-yok { color: var(--soluk-2); } /* ── Tablolar ─────────────────────────────────────────────────────────── */ [data-css$="-list-table-wrapper"], .lala-sirali { background: var(--kart) !important; border: 0; border-radius: var(--yuvarlak); box-shadow: var(--golge-kart); padding: 0 !important; overflow: hidden; } [data-css$="-list-table-wrapper"] > .adminjs_Text { padding: 12px 0 16px; } .adminjs_Table { width: 100%; border-collapse: collapse; } /* Sneat tablosu: beyaz, büyük harfli seyrek başlık, ince satır çizgileri. Başlık sütununun hücresinde AdminJS'in ortak sınıfı yok (td.main): td ile seçilir. */ .adminjs_TableHead td, .adminjs_TableHead .adminjs_TableCell { background: var(--kart) !important; color: var(--baslik) !important; font-size: 12.5px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .04em; padding: 14px 16px !important; border-bottom: 1px solid var(--kenar) !important; height: auto !important; white-space: nowrap; } .adminjs_TableHead td :is(a, button) { color: inherit !important; font-weight: inherit !important; font-size: inherit !important; text-transform: inherit; letter-spacing: inherit; } .adminjs_TableBody td, .adminjs_TableBody .adminjs_TableCell { font-size: 14.5px !important; padding: 12px 16px !important; border-bottom: 1px solid var(--kenar-acik) !important; color: var(--yazi-2); height: auto !important; } .adminjs_TableBody .adminjs_TableRow:last-child .adminjs_TableCell { border-bottom: 0 !important; } .adminjs_TableBody .adminjs_TableRow:hover .adminjs_TableCell { background: var(--vurgu); } .lala-satir-eylem { white-space: nowrap; width: 1%; text-align: right; } .lala-satir-eylem > * { display: inline-flex !important; vertical-align: middle; } .lala-satir-eylem .adminjs_Button { color: var(--soluk); } .lala-satir-eylem .adminjs_Button:hover { color: var(--lala-yazi); background: var(--lala-50); } /* Seçili kayıtlar çubuğu (components/SeciliKayitlar): tablonun başında, kartın içinde. AdminJS'inki tablonun üstüne taşıyordu, kartın overflow'u onu kesiyordu. */ .lala-secim { caption-side: top; text-align: left; } .lala-secim-ic { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; background: var(--lala-50); border-bottom: 1px solid var(--kenar); } .lala-secim-sayi { font-size: 14px; font-weight: 600; color: var(--lala-700); margin-right: 4px; } .lala-secim-eylemler { display: flex; flex-wrap: wrap; gap: 8px; } .lala-secim-dugme { padding: 6px 12px; font-size: 13px; text-decoration: none; } .lala-secim-dugme:hover { background: var(--lala-100); } .lala-secim-dugme.tehlike { border-color: var(--kirmizi); } .lala-secim-dugme.tehlike:hover { background: var(--kirmizi-zemin); } .lala-secim-kaldir { margin-left: auto; padding: 4px 2px; border: 0; background: none; cursor: pointer; color: var(--soluk); font: inherit; font-size: 13px; } .lala-secim-kaldir:hover { color: var(--yazi); text-decoration: underline; } /* Sürükle-bırak */ .lala-sirali-ipucu { display: flex !important; align-items: center; gap: 8px; padding: 12px 16px !important; font-size: 13px !important; color: var(--soluk) !important; border-bottom: 1px solid var(--kenar-acik); background: var(--ipucu-zemin); } .lala-sirali-ipucu svg { stroke: currentColor; } .lala-tutamac { cursor: grab; color: var(--soluk-2); width: 28px; } .lala-tutamac svg { stroke: currentColor; } .lala-surukle.suruklenen .adminjs_TableCell { opacity: .35; } .lala-surukle.hedef-ust .adminjs_TableCell { box-shadow: inset 0 2px 0 var(--lala-600); } .lala-surukle.hedef-alt .adminjs_TableCell { box-shadow: inset 0 -2px 0 var(--lala-600); } .lala-sira-no { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--lala-50); color: var(--lala-yazi); font-size: 12px; font-weight: 600; } /* Kayıt sayfasındaki bağlı liste (bölümler, sesler) */ .lala-bagli { padding: 4px 0 8px; } .lala-bagli .adminjs_Table { border: 1px solid var(--kenar-acik); border-radius: 10px; overflow: hidden; } /* ── Boş durum ────────────────────────────────────────────────────────── */ .lala-bos { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; } .lala-bos-ikon { width: 56px; height: 56px; border-radius: 50%; background: var(--lala-100); color: var(--lala-yazi); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .lala-bos-ikon svg { stroke: currentColor; } .lala-bos h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .lala-bos p { margin: 0 0 20px; font-size: 14px; color: var(--soluk); max-width: 420px; } .lala-bos-kucuk { padding: 28px 16px; border: 1px dashed var(--lala-200); border-radius: 10px; } .lala-bos-kucuk p { margin: 0; } /* ── Rötuşlar ─────────────────────────────────────────────────────────── */ /* Alanın altındaki hata satırı boşken yer kaplamasın (hata gelince görünür). */ .lala-alan .adminjs_Text:empty { display: none; } .lala-alan [data-css] > div { margin-bottom: 18px; } /* Tablo hücrelerinde kelime ortadan bölünmesin; referans bağlantısı sola yaslı. */ .adminjs_TableCell { word-break: normal !important; overflow-wrap: normal !important; } .adminjs_TableCell a[variant], .lala-detay a[variant], [data-css$="-show"] a[variant] { padding: 0 !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; text-align: left !important; white-space: normal !important; font-weight: 500; } .lala-baslik-hucre, [data-css$="-title-table-cell"] { min-width: 200px; font-weight: 500; } [data-css$="-list-table-wrapper"], .lala-sirali { overflow-x: auto; } .lala-yok { color: var(--soluk-2); } [data-css$="-key-table-cell"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px !important; color: var(--soluk) !important; } /* Pasif ikon butonları (ilk satırda "yukarı" gibi): gri kutu değil, soluk ikon */ .lala-satir-eylem .adminjs_Button:disabled { background: transparent !important; border-color: transparent !important; opacity: .3; } .adminjs_TableHead td, .adminjs_TableBody td { padding-left: 12px !important; padding-right: 12px !important; } /* Gezinti yolu (bölüm/ses sayfaları) */ .lala-yol { font-size: 13px; line-height: 20px; color: var(--yazi); } .lala-yol a { color: var(--soluk); text-decoration: none; } .lala-yol a:hover { color: var(--lala-yazi); } .lala-yol > *:not(:last-child)::after { content: '/'; padding: 0 8px; color: var(--soluk-2); } /* Kayıt sayfasındaki bağlı liste başlığı ve ekle butonu */ .lala-bagli .adminjs_H4, .lala-bagli h4 { font-size: 17px !important; font-weight: 600 !important; line-height: 24px !important; } .lala-ekle { background: var(--lala-600) !important; border-color: var(--lala-600) !important; color: var(--ana-yazi) !important; } .lala-ekle svg { stroke: var(--ana-yazi) !important; } .lala-ekle:hover { background: var(--lala-700) !important; } /* Uzun metin alanları (özet, biyografi…) */ .lala-alan textarea { min-height: 104px; resize: vertical; line-height: 1.5; } /* ── Pano: gösterge paneli ve Raporlar (components/pano.jsx, Sneat kartları) ── */ .lala-pano-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .lala-pano-izgara > .genis { grid-column: span 2; } .lala-pano-izgara > .tam { grid-column: 1 / -1; } @media (max-width: 1280px) { .lala-pano-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .lala-pano-izgara { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lala-pano-izgara > .genis { grid-column: auto; } } .lala-pano a[href] { color: inherit; text-decoration: none; } .lala-pano-kart { display: flex; flex-direction: column; min-width: 0; background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge-kart); padding: 24px; } .lala-pano-kart-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .lala-pano-kart-ust h5 { margin: 0; font-size: 18px; font-weight: 500; line-height: 26px; color: var(--baslik); } .lala-pano-kart-ust small { display: block; font-size: 13px; color: var(--soluk); } .lala-pano-tumu { color: var(--lala-yazi) !important; font-size: 14px; font-weight: 500; white-space: nowrap; } .lala-pano-tumu:hover { text-decoration: underline !important; } /* Renkli ikon kutusu (Sneat avatar) ve yumuşak rozet */ .lala-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 6px; } .lala-avatar svg { width: 22px; height: 22px; stroke: currentColor; } .ton-primary { background: var(--ton-primary-bg); color: var(--ton-primary-fg); } .ton-success { background: var(--ton-success-bg); color: var(--ton-success-fg); } .ton-info { background: var(--ton-info-bg); color: var(--ton-info-fg); } .ton-warning { background: var(--ton-warning-bg); color: var(--ton-warning-fg); } .ton-danger { background: var(--ton-danger-bg); color: var(--ton-danger-fg); } .ton-grey { background: var(--ton-grey-bg); color: var(--ton-grey-fg); } .lala-rozet-yumusak { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 4px; font-size: 12.5px; font-weight: 500; white-space: nowrap; } /* Anasayfa blokları listesi: kitapsız bloğun başlığının yanındaki işaret (components/BlokBasligi). */ .lala-blok-baslik { display: inline-flex; align-items: center; gap: 10px; } .lala-blok-baslik.isaretli > span:first-child { white-space: nowrap; } /* rozet gelince başlık bölünmesin, sütun genişlesin */ .lala-kitap-yok { flex: none; gap: 4px; padding: 2px 8px; font-size: 12px; line-height: 18px; cursor: help; } .lala-kitap-yok svg { width: 13px; height: 13px; stroke: currentColor; } /* Sayı kutusu */ .lala-sayi-kutu { gap: 2px; } .lala-sayi-kutu.tiklanir { cursor: pointer; transition: box-shadow .2s, transform .2s; } .lala-sayi-kutu.tiklanir:hover { box-shadow: 0 4px 14px 0 rgba(40, 60, 61, 0.18); transform: translateY(-2px); } .lala-sayi-kutu-ust { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .lala-sayi-kutu-git { color: var(--soluk-2); } .lala-sayi-kutu-git svg { width: 18px; height: 18px; stroke: currentColor; } .lala-sayi-kutu-baslik { font-size: 15px; font-weight: 500; color: var(--yazi-2); } .lala-sayi-kutu-deger { font-size: 26px; font-weight: 600; line-height: 36px; color: var(--baslik); margin: 2px 0 4px; font-variant-numeric: tabular-nums; } .lala-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; } .lala-trend svg { width: 14px; height: 14px; stroke: currentColor; } .lala-trend.artis { color: var(--ton-success-fg); } .lala-trend.azalis { color: var(--ton-danger-fg); } .lala-trend.ayni { color: var(--soluk); } .lala-sayi-kutu-aciklama { font-size: 13px; color: var(--soluk); margin-top: 2px; } /* Karşılama kartı */ .lala-hosgeldin { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; overflow: hidden; } .lala-hosgeldin-yazi h4 { margin: 0 0 8px; font-size: 20px; font-weight: 500; color: var(--lala-yazi); } .lala-hosgeldin-yazi p { margin: 0 0 20px; font-size: 15px; line-height: 24px; color: var(--yazi-2); max-width: 620px; } .lala-hosgeldin-yazi strong { color: var(--baslik); font-weight: 600; } .lala-hosgeldin-sekil { display: flex; align-items: center; gap: 22px; flex: none; margin-right: 18px; } /* Ses dalgası: yavaşça inip kalkan çubuklar (hareket azaltma açıksa durur). */ .lala-dalga { display: flex; align-items: center; gap: 6px; height: 72px; } .lala-dalga i { display: block; width: 7px; border-radius: 4px; background: linear-gradient(180deg, var(--lala-200), var(--lala-500)); animation: lala-dalga 1.4s ease-in-out infinite alternate; } @keyframes lala-dalga { from { transform: scaleY(.45); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .lala-dalga i { animation: none; } } .lala-daire { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: var(--lala-100); color: var(--lala-yazi); box-shadow: 0 0 0 10px var(--lala-50); } .lala-daire svg { stroke: currentColor; } @media (max-width: 700px) { .lala-hosgeldin-sekil { display: none; } .lala-hosgeldin { padding: 24px; } } .lala-dugme-cizgi { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--lala-600); border-radius: 6px; color: var(--lala-yazi) !important; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; } .lala-dugme-cizgi:hover { background: var(--lala-600); color: var(--ana-yazi) !important; } /* Kart içindeki listeler (kitaplar, türler, yorumlar, mesajlar) */ .lala-pano-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .lala-pano-liste li + li { border-top: 1px solid var(--kenar-acik); } .lala-pano-liste li > a, .lala-pano-liste li > div { display: flex; align-items: center; gap: 14px; padding: 11px 0; } .lala-pano-liste li:first-child > a, .lala-pano-liste li:first-child > div { padding-top: 0; } .lala-pano-liste li > a:hover strong { color: var(--lala-yazi); } .lala-pano-liste img { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; background: var(--kart-2); } .lala-pano-liste-yazi { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; } .lala-pano-liste-yazi strong { font-size: 14.5px; font-weight: 500; color: var(--baslik); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; } .lala-pano-liste-yazi > span { font-size: 13.5px; color: var(--yazi-2); overflow-wrap: anywhere; } .lala-pano-liste-yazi small { font-size: 12.5px; color: var(--soluk); } .lala-tur { width: 100%; } .lala-tur-nokta { width: 12px; height: 12px; flex: none; border-radius: 50%; } .lala-tur-cubuk { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--kenar-acik); overflow: hidden; } .lala-tur-cubuk > span { display: block; height: 100%; min-width: 4px; border-radius: 999px; } .lala-tur-sayi { display: flex; flex-direction: column; align-items: flex-end; min-width: 76px; } .lala-tur-sayi strong { font-size: 14.5px; font-weight: 600; color: var(--baslik); } .lala-tur-sayi small { font-size: 12.5px; color: var(--soluk); } /* Özel sayfalar (admin/sayfalar.mjs): Uygulama sürümü */ .lala-sayfa { padding: 32px 40px 24px; max-width: 960px; } .lala-sayfa .lala-sayfa-basligi { margin: 0 0 8px; } .lala-surum-hata { margin: 6px 0 12px; min-height: 18px; } .lala-surum-hata.var { color: var(--kirmizi); } @media (max-width: 900px) { .lala-sayfa { padding: 24px 16px; } } /* Filtre panelindeki seçim kutuları: react-select'in İngilizce "Select..." yer tutucusu yerine "Hepsi" (süzgeç yok). AdminJS'in filtre bileşenleri yer tutucuyu dışarıdan almıyor; sadece filtre panelinde, sadece yer tutucu. */ [data-css$="-filter-drawer"] div[class*="placeholder"] { font-size: 0 !important; } [data-css$="-filter-drawer"] div[class*="placeholder"]::after { content: 'Hepsi'; font-size: 14px; color: var(--soluk); } /* Raporlar (components/Raporlar): son 12 ayın sütunları, grafik kütüphanesi yok. */ .lala-sutunlar-kap { position: relative; } .lala-sutunlar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 200px; } .lala-sutun { display: flex; flex-direction: column; align-items: center; min-width: 0; } .lala-sutun-deger { font-size: 11px; line-height: 14px; height: 14px; color: var(--soluk); white-space: nowrap; overflow: visible; } .lala-sutun-alan { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding-top: 4px; } .lala-sutun-cubuk { display: block; width: 100%; max-width: 22px; min-height: 3px; background: var(--lala-500); border-radius: 6px; } .lala-sutun:hover .lala-sutun-cubuk { background: var(--lala-600); } .lala-sutun-ay { font-size: 11px; line-height: 14px; margin-top: 6px; color: var(--soluk); } .lala-rapor-liste { margin: 0; padding: 0; list-style: none; counter-reset: sira; } .lala-rapor-liste li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--kenar-acik); counter-increment: sira; } .lala-rapor-liste li::before { content: counter(sira) "."; min-width: 22px; color: var(--soluk); font-size: 13px; text-align: right; } .lala-rapor-liste li:first-child { border-top: 0; } .lala-rapor-liste li > :first-child { flex: 1; min-width: 0; } .lala-rapor-liste a { color: var(--yazi) !important; text-decoration: none; overflow-wrap: anywhere; } .lala-rapor-liste a:hover { color: var(--lala-yazi) !important; text-decoration: underline; } .lala-rapor-adet { color: var(--soluk); font-size: 13px; white-space: nowrap; } .lala-sutun-bos { position: absolute; left: 0; right: 0; top: 45%; text-align: center; } /* Sıralı çoklu seçim (components/MultiSelect, anasayfa bloğunun kitapları): seçilenler kutunun altında sürüklenebilir liste. */ .lala-coklu-sira { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--kenar-kutu); border-radius: 8px; overflow: hidden; } .lala-coklu-satir { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--kart); border-top: 1px solid var(--kenar-ic); cursor: grab; } .lala-coklu-satir:first-child { border-top: 0; } .lala-coklu-satir:hover { background: var(--vurgu); } .lala-coklu-satir.suruklenen { opacity: .35; } .lala-coklu-satir.hedef-ust { box-shadow: inset 0 2px 0 var(--lala-600); } .lala-coklu-satir.hedef-alt { box-shadow: inset 0 -2px 0 var(--lala-600); } .lala-coklu-tutamak { display: inline-flex; color: var(--soluk-2); } .lala-coklu-no { min-width: 24px; color: var(--soluk); font-size: 13px; text-align: right; } .lala-coklu-ad { flex: 1; min-width: 0; color: var(--yazi); overflow-wrap: anywhere; } .lala-coklu-satir button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--soluk); cursor: pointer; } .lala-coklu-satir button:hover:not(:disabled) { border-color: var(--kenar-kutu); color: var(--yazi); background: var(--kart-2); } .lala-coklu-satir button:disabled { opacity: .3; cursor: default; } .lala-coklu-satir button svg { width: 16px; height: 16px; stroke: currentColor; }