/* GOGLIS SANS (2026-07-30) — markanın KENDİ yazı tipi; Public Sans'ın yerini aldı. Varlık paketinden DEĞİŞKEN sürüm alındı: tek dosya tüm ağırlıkları (300..800) taşır → altı ayrı statik dosya indirmeye gerek yok (roman 60 KB + italik 65 KB). Kendi origin'imizden (CDN YOK — LiveKit/emoji sprite ile aynı ilke). TÜRKÇE: fontun `locl` kuralları `i/ı/İ` için doğru glifleri seçiyor ama tarayıcı dili bilmezse devreye girmez → ŞART (App.razor:2'de var). Lisans: SIL OFL 1.1 (Nunito türevi) — fonts/GoglisSans-OFL.txt + NOTICE.md dağıtımda KALMALI. */ /* GOGLIS SANS v3 (2026-07-31, kullanıcı: "Manrope deneyelim bide") — gövde fontu MANROPE (OFL; değiştirilmemiş Google alt kümeleri, 'Goglis Sans' yalnız CSS takma adı). NOT: Manrope İTALİK BARINDIRMAZ — italik yüz yok, tarayıcı eğiği sentezler (mesajlardaki *italik* yine eğik görünür). v2 Figtree idi (dosyalar scratchpad'de — geri dönüş tek kopya). */ @font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/GoglisSans-Roman-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/GoglisSans-Roman-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Public Sans — GOGLIS SANS'a geçilene kadar yedek olarak duruyordu; artık yalnız font yüklenemezse devreye giren zincirin parçası değil, tamamen kaldırıldı. (Aşağıdaki iki blok Space Mono'dur — kod blokları için, korunur.) */ /* Space Mono — kod blokları / klavye tuşları için tek-aralıklı yazı tipi. KENDİ origin'imizden (CDN YOK). */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/SpaceMono-400-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/SpaceMono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/SpaceMono-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/SpaceMono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light dark; } /* ---- KAYDIRMA CUBUKLARI TEMAYA UYAR (2026-08-11, kullanici: "uygulamadaki tum scrollar temaya gore ozellesmiyor, standart hep, bu da profesyonelligi bozuyor") ---- Tarayicinin varsayilan cubugu isletim sistemi renginde ciziliyordu: koyu temada beyaz bir serit, acik temada gri bir serit. Renkler tema degiskenlerinden gelir, yani 18 temanin hepsinde kendiliginden dogru. IKI SOZDIZIMI birden: `scrollbar-*` standarttir (Firefox + Chrome 121+), `::-webkit-*` ise eski WebKit/Blink icin. Ikisini birden yazmak zorunlu — yalniz standardi yazmak Safari'de, yalniz webkit'i yazmak Firefox'ta ise yaramaz. `scrollbar-gutter: stable` YAZILMADI bilincli: dar panellerde (kanal listesi) icerik genisligini kalici daraltirdi. */ /* Renk METIN RENGINDEN turetilir (color-mix), tema basina degisken TANIMLANMAZ: uygulamada 18 tema var ve her birine ayri satir yazmak biri eklenince unutulacak bir bakim borcu olurdu. --q-text her temada tanimli oldugu icin cubuk koyu temada acik, acik temada koyu cikar. */ /* KAYDIRAC RENGI TEMADAN (2026-08-12, kullanici: "scrollarin renkleri temaya gore ayarlanamaz mi?"). Eskiden --q-text'in %30'uydu — teknik olarak temaliydi ama govde rengi her koyu temada ayni gri-beyaza yakinsadigi icin varsayilan tarayici cubugu gibi gorunuyordu. Artik --q-accent karisimi: okyanusta mavi, ormanda yesil, kahvede kahve... "Hakkimizda" popup'inin kaydiraci zaten bu desendeydi, genellestirildi. */ /* KAYDIRAC KURALLARI TEK KAYNAKTA (3580 civari, --q-scroll token'i) — buradaki eski kopya 2026-08-12'de kaldirildi: ayni ozgullukteki iki `*` blogu kaynak sirasiyla birbirini eziyordu ve buraya yapilan duzenlemeler SESSIZCE olu kaliyordu. */ html, body { margin: 0; height: 100%; } body { font-family: 'Goglis Sans', system-ui, sans-serif; background: #1a1b1e; overflow: hidden; } /* #mobil: iOS/Android kenar sektirmesi (rubber-band) uygulama dışını gösteriyordu — light temada body'nin sabit koyu rengi "siyahlık" olarak sızıyordu. Tema class'ı body'ye de yansıdığından (goglisTheme #9) arka plan temayla eşitlenir + sektirme tamamen kapatılır. */ html, body { overscroll-behavior: none; } /* `html[class*=]` DE eklendi (2026-08-11): tema artık ilk paint'ten önce 'e basılıyor; body'nin sınıfı ancak goglis.js çalışınca geliyor ve o ana kadar zemin sabit #1a1b1e kalıp temanın ambient gradyanına ATLIYORDU. İkisi birden yazılınca zemin de doğru doğuyor. */ body[class*="theme-"], html[class*="theme-"] body { background: var(--q-ambient, #1a1b1e); } /* ANDROID FONT BOOST KİLİDİ (#Y5, 2026-07-28 — kullanıcı bug'ı: "PiP'ten dönünce arayüz büyümüş gibi duruyor, uygulamayı kapatıp açınca düzeliyor"). Android WebView varsayılan olarak TEXT_AUTOSIZING ile çalışır: yazı boyutlarına, PENCERE GENİŞLİĞİNDEN hesaplanan bir "font boost" çarpanı uygular. PiP'in ~145 CSS px'lik penceresinde bu çarpan bozuluyor ve tam ekrana dönünce YENİDEN HESAPLANMIYOR → her şey devasa kalıyor. `width=device-width` viewport'umuzda çarpan normalde zaten 1.0 olduğundan bu kilit olağan görünümü DEĞİŞTİRMEZ, yalnız PiP'in bozduğu çarpanı imkânsız kılar. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Marka renkleri tema-bağımsız → :root (dialog portalları dahil her yerde tanımlı). #9 */ :root { --q-accent: #A9744C; --q-online: #23a55a; --q-danger: #f23f43; --q-danger-soft: #f07b7d; /* koyu zeminde okunur açık kırmızı (metin/ikon) */ --q-amber: #ef9f27; /* Modern yüzey kenarı (Fluent/Geist): yüzeyleri sadece dolguyla değil ince 1px hairline'la da ayır. Koyu-uyumlu varsayılan; .theme-light + açık renkli temalar siyah alpha'ya ezer. */ --q-border: rgba(255,255,255,0.08); } .q-root { /* vh zoom'dan etkilenmez → root zoom (goglisScale) altında 100vh fiziksel ekranı aşıyordu (alt "Ses bağlı" dock'u taşıyordu). Zoom'a bölerek tam otur. #4 mobil: 100vh adres çubuğunu SAYAR → composer ekran altında kalıyordu; dvh (dinamik viewport) GÖRÜNEN alanı ölçer. İki satır = eski tarayıcı fallback'i. */ height: calc(100vh / var(--q-zoom, 1)); height: calc(100dvh / var(--q-zoom, 1)); /* #2: uygulama kromu METİN DEĞİL — kanal adları, menüler, butonlar seçilemez (native-app hissi). Seçilebilir kalanlar aşağıda: mesajlar, girişler, kod. */ user-select: none; -webkit-user-select: none; display: flex; flex-direction: column; font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 14px; color: var(--q-text); background: var(--q-chat-bg); } /* #9: tema değişkenleri class-bazlı (.q-root'A DA body'ye de uygulanabilsin) — MudDialog portal'ı .q-root dışında; body'ye tema class'ı konunca dialoglar da değişkenleri miras alır. */ .theme-dark { /* Elevation merdiveni (Fluent: önemli yüzey = daha açık): rail(dış kabuk, en koyu) < panel < side < chat(ana içerik, en açık) < input. Discord-mavisi tonu nötrleştirildi + hafif derinleştirildi = premium. */ --q-rail-bg: #171719; --q-side-bg: #242529; --q-chat-bg: #2d2e33; --q-panel-bg: #1c1d20; --q-input-bg: #33353b; --q-code-bg: #191a1c; --q-code-text: #c9b6ff; --q-text: #dbdee3; --q-strong: #f2f3f5; --q-muted: #989da6; --q-faint: #7f838c; --q-border: rgba(255,255,255,0.085); /* hairline yüzey kenarı */ --q-divider: rgba(255,255,255,0.055); --q-hover: rgba(255,255,255,0.045); --q-selected: rgba(255,255,255,0.10); /* glassmorphism (#13) */ --q-glass: rgba(30,31,36,0.72); --q-glass-strong: rgba(20,21,25,0.82); --q-glass-border: rgba(255,255,255,0.09); --q-glass-menu: rgba(28,29,33,0.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(169,116,76,0.18), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(55,138,221,0.12), transparent 56%), linear-gradient(155deg, #191a1e 0%, #131315 100%); } .theme-light { /* Açık modda katmanlar dolgu-kontrastı düşük → yüzeyleri KENAR tanımlar (Windows 11/Geist açık teması). Saf beyaz kabuk yumuşatıldı, içerik beyaz kaldı; saf-siyah metin (#060607) yumuşatıldı. */ --q-rail-bg: #e7e9ec; --q-side-bg: #f3f4f6; --q-chat-bg: #ffffff; --q-panel-bg: #eceef1; --q-input-bg: #f0f1f4; --q-code-bg: #f0f1f4; --q-code-text: #7148c4; --q-text: #383a40; --q-strong: #14161a; --q-muted: #5f6570; --q-faint: #838791; --q-border: rgba(0,0,0,0.11); /* açık modda daha belirgin hairline (yüzey tanımı) */ --q-divider: rgba(0,0,0,0.065); --q-hover: rgba(0,0,0,0.045); --q-selected: rgba(0,0,0,0.06); /* glassmorphism (#13) */ --q-glass: rgba(255,255,255,0.72); --q-glass-strong: rgba(248,249,251,0.84); --q-glass-border: rgba(0,0,0,0.09); --q-glass-menu: rgba(250,251,253,0.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(169,116,76,0.14), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(55,138,221,0.08), transparent 56%), linear-gradient(155deg, #f0f1f5 0%, #e6e9ee 100%); } /* ============ GOGLIS EMOJİ SETİ (2026-07-30) ============ Emojiler artık sistem fontu değil, Goglis'in özgün SVG seti (sprite + ). Boyutlandırma BURADA: sprite'ın symbol'lerinde intrinsic genişlik yok (yalnız viewBox), CSS vermezsek emojiler görünmez/dev olur. `em` tabanlı → metinle birlikte ölçeklenir (kullanıcı arayüz ölçeği ve mesaj yoğunluğu ayarları kendiliğinden çalışır). */ .gg-emoji { width: 1.3em; height: 1.3em; vertical-align: -.28em; display: inline-block; flex: none; } /* Sprite inmezse (ağ hatası) `use` hedefi boş kalır → aria-label'daki GERÇEK emoji karakterini göster. Yedek yol KALDIRILMAZ: sette olmayan emoji (ülke bayrakları) de bu yolu kullanır. */ html.gg-nosprite .gg-emoji { width: auto; height: auto; } html.gg-nosprite .gg-emoji::after { content: attr(aria-label); font-size: 1em; } html.gg-nosprite .gg-emoji > use { display: none; } /* Tek başına duran büyük emoji (çıkartma mesajı) + seçici hücresi ayrı ölçülerde. */ .gg-emoji.big { width: 76px; height: 76px; vertical-align: middle; } .gg-emoji.cell { width: 26px; height: 26px; vertical-align: middle; } /* Sohbet gövdesinde bir tık büyük (2026-07-31 kullanıcı isteği): yazı boyutu 13-14px olunca 1.3em ≈ 17px kalıyor, cümle içinde siliniyordu. Composer aynası AYNI değeri kullanır — yoksa yazarkenki boy ile gönderilen mesajdaki boy farklı görünür. */ .q-md .gg-emoji { width: 1.7em; height: 1.7em; vertical-align: -.42em; } /* Salt-emoji mesaji (<=3): jumbo — yuz ifadeleri secilir (2026-08-15, kullanici istegi). */ .q-md .gg-emoji.gg-xl { width: 2.7em; height: 2.7em; vertical-align: -.55em; margin: 2px 1px; } .q-msgmirror .gg-in > .gg-emoji { width: 1.45em; height: 1.45em; } /* GOGLIS ARAYÜZ İKONLARI — emojiden farklı: `currentColor` ile metin rengini izler (hover/aktif/devre dışı için ayrı dosya yok). Boyut `em` tabanlı → metinle ölçeklenir. */ .gg-icon { width: 1.2em; height: 1.2em; vertical-align: -.22em; display: inline-block; flex: none; color: inherit; } /* SEVİYE ATLAMA KUTLAMASI (2026-07-30) — konfeti canvas'ı + ortada rozet kartı. Perde TIKLAMAYI GEÇİRİR (pointer-events:none): kutlama sırasında kullanıcı yazmaya devam edebilmeli; yalnız kartın kendisi tıklanabilir (erken kapatma). */ .q-lvlup { position: fixed; inset: 0; z-index: 30500; pointer-events: none; display: flex; align-items: center; justify-content: center; } .q-lvlup.out { animation: q-lvlup-out .4s ease forwards; } @keyframes q-lvlup-out { to { opacity: 0; } } .q-lvlup-cv { position: absolute; inset: 0; width: 100%; height: 100%; } .q-lvlup-card { position: relative; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 34px 24px; border-radius: 20px; background: var(--q-glass-strong, rgba(24,26,32,.92)); border: 1px solid var(--q-glass-border, rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 46px color-mix(in srgb, var(--q-accent) 35%, transparent); animation: q-lvlup-in .5s cubic-bezier(.2,1.3,.35,1) both; } @keyframes q-lvlup-in { from { opacity: 0; transform: translateY(18px) scale(.86); } to { opacity: 1; transform: none; } } /* Rozet: dönen ışık halkası (conic-gradient) + içte sayı. Dönen kısım ::before, sayı sabit. */ .q-lvlup-ring { position: relative; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--q-accent), var(--q-accent-2, var(--q-accent))); box-shadow: 0 10px 30px color-mix(in srgb, var(--q-accent) 45%, transparent); } .q-lvlup-ring::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, #fff 70%, transparent 85% 100%); opacity: .55; animation: q-lvlup-spin 1.8s linear infinite; z-index: -1; } @keyframes q-lvlup-spin { to { transform: rotate(360deg); } } .q-lvlup-num { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.3); } .q-lvlup-title { font-size: 20px; font-weight: 700; color: var(--q-strong); } .q-lvlup-sub { font-size: 13px; color: var(--q-muted); } @media (prefers-reduced-motion: reduce) { .q-lvlup-card { animation: none; } .q-lvlup-ring::before { animation: none; } } /* Gönder düğmesi — MudIconButton yerine sade buton (Goglis ikon setiyle aynı dil). */ .q-send-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--q-accent); cursor: pointer; flex: none; transition: background .12s, color .12s, opacity .12s; } .q-send-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--q-accent) 16%, transparent); } .q-send-btn:disabled { color: var(--q-faint); opacity: .55; cursor: default; } /* Emoji seçici arama kutusu + boş sonuç (2026-07-30) */ .q-emoji-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--q-divider); color: var(--q-muted); } .q-emoji-search .mud-icon-root { font-size: 17px; flex: none; } .q-emoji-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--q-strong); font-size: 13.5px; font-family: inherit; } .q-emoji-search input::placeholder { color: var(--q-faint); } .q-emoji-clear { display: inline-flex; background: none; border: none; padding: 2px; cursor: pointer; color: var(--q-muted); border-radius: 6px; } .q-emoji-clear:hover { color: var(--q-strong); background: var(--q-hover); } .q-emoji-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--q-muted); } /* ---- top bar ---- */ /* (2026-07-31, kullanici: "header cok sade, temaya gore iki renkli gecis") Duz rail rengi yerine temanin aksan ciftiyle YUMUSAK degrade — yuzde dusuk tutuldu (%10-14 karisim): renk kimligi hissedilir ama metin/ikon kontrasti bozulmaz; accent-2'si olmayan temalar accent'e duser. */ .q-topbar { height: 52px; display: flex; align-items: flex-end; gap: 6px; padding: 0 12px; flex: none; background: linear-gradient(90deg, var(--q-rail-bg) 0%, color-mix(in srgb, var(--q-accent) 10%, var(--q-rail-bg)) 52%, color-mix(in srgb, var(--q-accent-2, var(--q-accent)) 14%, var(--q-rail-bg)) 100%); } /* #titlebar (2026-07-26 → 2026-07-30 DÜZELTİLDİ): ELECTRON kabuğunda üst bar = PENCERE BAŞLIK ÇUBUĞU (renk native titleBarOverlay'e main.js'ten boyanır). Boş alan SÜRÜKLE-taşı; etkileşimliler no-drag. Native min/max/close düğmeleri sayfanın ÜSTÜNDE durur → o şeride hiçbir şey konmaz. 2026-07-30 KÖK NEDEN: bu kurallar `html.q-electron` ile yazılmıştı ama O SINIF HİÇBİR YERDE ATANMIYORDU (grep: yalnız bu dosyada) → kurallar hiç uygulanmadı; kullanıcı Electron'da hem ayar diyaloğunun düğmelerini hem yönetim panelinin ✕'ini native düğmelerin altında buldu. Artık sınıf `q-wco` ve gerçek API'den (navigator.windowControlsOverlay) ATANIYOR + geometri ÖLÇÜLÜYOR: --q-wco-h (şerit yüksekliği), --q-wco-r / --q-wco-l (kontrollerin sağ/sol inseti). Fallback değerleri Windows Electron'un bilinen ölçüleri (52px / 148px). */ html.q-wco .q-topbar { -webkit-app-region: drag; padding-right: calc(var(--q-wco-r, 148px) + 6px); padding-left: calc(12px + var(--q-wco-l, 0px)); /* macOS: trafik ışıkları SOLDA */ } html.q-wco .q-topbar button, html.q-wco .q-topbar a, html.q-wco .q-topbar input, html.q-wco .q-topbar .q-brand, html.q-wco .q-topbar .q-tab, html.q-wco .q-topbar .q-mini, html.q-wco .q-topbar .q-menu, html.q-wco .q-topbar .mud-icon-button, html.q-wco .q-topbar .q-dmadd, html.q-wco .q-topbar [role="button"] { -webkit-app-region: no-drag; } /* (2026-07-31, kullanici bug'i: "arkadasimin sesini artirirken uygulamayi suruklyorum") Yuzen paneller (menu/sag-tik/tepki secici/profil popover/diyalog) pencere ust seridiyle CAKISABILIR (fixed konum + yukari acilan menu) — app-region:drag GEOMETRIKTIR, ustune cizilen eleman otomatik muaf olmaz. Hepsi acikca no-drag. Kaydiraclar da (ses/kazanc) her yerde no-drag. */ html.q-wco .q-menu-panel, html.q-wco .q-ctx-panel, html.q-wco .q-reactpick, html.q-wco .q-pp, html.q-wco .mud-dialog, html.q-wco .mud-popover, html.q-wco input[type="range"] { -webkit-app-region: no-drag; } /* Menu icinde metin secimi de olmasin: buyuk bir secim varken kaydiraca basmak tarayicida SECIMIN hayalet kopyasini surukletebiliyor — menuler zaten metin secilecek yer degil. */ .q-menu-panel, .q-ctx-panel, .q-menu-vol { user-select: none; -webkit-user-select: none; } .q-brand { display: flex; align-items: center; gap: 9px; padding: 8px 6px 8px 0; cursor: pointer; } /* #9 Renkli temalar — koyu tabanlı, tonlu yüzeyler + renkli ambient. Metin/divider ortak. */ .theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight { --q-text: #dbdee1; --q-strong: #f2f3f5; --q-muted: #9aa0ad; --q-faint: #7d818c; --q-code-text: #d9c9ff; --q-divider: rgba(255,255,255,0.07); --q-hover: rgba(255,255,255,0.05); --q-selected: rgba(255,255,255,0.10); --q-glass-border: rgba(255,255,255,0.08); /* Renkli tema = kendi imza aksanı (full temalar gibi): var(--q-accent) kullanan hover/kenar/aktif durumlar artık temayla EŞLEŞİR — eski kahve aksan sızıntısı bitti. MudBlazor primary'i de eşitle. */ --mud-palette-primary: var(--q-accent); --q-state-primary: color-mix(in srgb, var(--q-accent) 14%, transparent); --q-state-primary-strong: color-mix(in srgb, var(--q-accent) 22%, transparent); } .theme-ocean { --q-accent:#33a8f2 !important; --q-accent-2:#1c72bd !important; --q-rail-bg:#0d1a26; --q-side-bg:#14283a; --q-chat-bg:#182f41; --q-panel-bg:#102232; --q-input-bg:#1d3d52; --q-code-bg:#0c1a26; --q-glass:rgba(16,34,50,.78); --q-glass-strong:rgba(10,24,36,.86); --q-glass-menu:rgba(16,34,50,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(40,150,220,.22), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(30,90,150,.18), transparent 56%), linear-gradient(155deg,#0e1f2c,#0a1620); } .theme-grape { --q-accent:#a875f7 !important; --q-accent-2:#6a3fd0 !important; --q-rail-bg:#181026; --q-side-bg:#241a3a; --q-chat-bg:#281d40; --q-panel-bg:#1d1531; --q-input-bg:#312348; --q-code-bg:#150e22; --q-glass:rgba(34,26,54,.78); --q-glass-strong:rgba(24,18,40,.86); --q-glass-menu:rgba(34,26,54,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(140,80,240,.24), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(90,50,180,.18), transparent 56%), linear-gradient(155deg,#1c1230,#120a22); } .theme-forest { --q-accent:#2fc27e !important; --q-accent-2:#1a8f5c !important; --q-rail-bg:#0e1e17; --q-side-bg:#153026; --q-chat-bg:#17352a; --q-panel-bg:#11281f; --q-input-bg:#1d3d31; --q-code-bg:#0b1a13; --q-glass:rgba(18,40,31,.78); --q-glass-strong:rgba(12,28,22,.86); --q-glass-menu:rgba(18,40,31,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(40,190,120,.20), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(30,130,90,.16), transparent 56%), linear-gradient(155deg,#0f2219,#0a1610); } .theme-sunset { --q-accent:#f2893f !important; --q-accent-2:#cf5a24 !important; --q-rail-bg:#26140e; --q-side-bg:#3a2018; --q-chat-bg:#3d241b; --q-panel-bg:#2d1914; --q-input-bg:#48291e; --q-code-bg:#1e0f0a; --q-glass:rgba(58,34,26,.78); --q-glass-strong:rgba(40,22,16,.86); --q-glass-menu:rgba(58,34,26,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(240,120,50,.22), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(200,70,60,.18), transparent 56%), linear-gradient(155deg,#2a160f,#1c0e0a); } .theme-rose { --q-accent:#ee5f96 !important; --q-accent-2:#cf3d72 !important; --q-rail-bg:#26121b; --q-side-bg:#3a1e2b; --q-chat-bg:#3d2131; --q-panel-bg:#2d1623; --q-input-bg:#48283b; --q-code-bg:#1e0f16; --q-glass:rgba(58,30,43,.78); --q-glass-strong:rgba(40,20,30,.86); --q-glass-menu:rgba(58,30,43,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(230,80,140,.22), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(150,50,110,.18), transparent 56%), linear-gradient(155deg,#2a1420,#1c0d15); } .theme-midnight { --q-accent:#7f8bef !important; --q-accent-2:#4a56cc !important; --q-rail-bg:#0b0d18; --q-side-bg:#131529; --q-chat-bg:#171a30; --q-panel-bg:#0f1226; --q-input-bg:#1e2140; --q-code-bg:#090b15; --q-glass:rgba(19,21,41,.80); --q-glass-strong:rgba(12,14,28,.88); --q-glass-menu:rgba(19,21,41,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(90,100,220,.20), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(60,70,180,.16), transparent 56%), linear-gradient(155deg,#101228,#0a0b1a); } /* Renkli temaların AÇIK varyantları — açık tema metin/divider seti + renk-tintli açık yüzeyler. Baz "Açık" + renk seçilince kullanılır (theme-grape-light vb.). */ .theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light { --q-text: #313338; --q-strong: #14161a; --q-muted: #5c5e66; --q-faint: #80848e; --q-code-text: #7148c4; --q-divider: rgba(0,0,0,0.07); --q-hover: rgba(0,0,0,0.045); --q-selected: rgba(0,0,0,0.06); --q-border: rgba(0,0,0,0.10); --q-glass-border: rgba(0,0,0,0.08); --mud-palette-primary: var(--q-accent); --q-state-primary: color-mix(in srgb, var(--q-accent) 12%, transparent); --q-state-primary-strong: color-mix(in srgb, var(--q-accent) 20%, transparent); } .theme-ocean-light { --q-accent:#1187d6 !important; --q-accent-2:#0e5fa0 !important; --q-rail-bg:#d3e2ee; --q-side-bg:#e4eef6; --q-chat-bg:#f6fafd; --q-panel-bg:#dbe8f2; --q-input-bg:#e0ebf4; --q-code-bg:#e0ebf4; --q-glass:rgba(240,247,252,.72); --q-glass-strong:rgba(228,238,246,.84); --q-glass-menu:rgba(246,250,253,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(40,150,220,.16), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(30,90,150,.10), transparent 56%), linear-gradient(155deg,#e8f1f8,#dbe8f2); } .theme-grape-light { --q-accent:#7b3ff2 !important; --q-accent-2:#5a2ec0 !important; --q-rail-bg:#e0d8ee; --q-side-bg:#ece6f6; --q-chat-bg:#faf8fd; --q-panel-bg:#e4dcf1; --q-input-bg:#e9e2f4; --q-code-bg:#e9e2f4; --q-glass:rgba(248,245,253,.72); --q-glass-strong:rgba(236,230,246,.84); --q-glass-menu:rgba(250,248,253,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(140,80,240,.16), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(90,50,180,.10), transparent 56%), linear-gradient(155deg,#f0eaf9,#e4dcf1); } .theme-forest-light { --q-accent:#159862 !important; --q-accent-2:#0f7048 !important; --q-rail-bg:#d4e6dc; --q-side-bg:#e3f0e9; --q-chat-bg:#f5faf7; --q-panel-bg:#dbeae2; --q-input-bg:#e0ede6; --q-code-bg:#e0ede6; --q-glass:rgba(241,249,244,.72); --q-glass-strong:rgba(227,240,233,.84); --q-glass-menu:rgba(245,250,247,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(40,190,120,.14), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(30,130,90,.09), transparent 56%), linear-gradient(155deg,#e9f4ee,#dbeae2); } .theme-sunset-light { --q-accent:#d9641c !important; --q-accent-2:#b34a12 !important; --q-rail-bg:#f2ddd2; --q-side-bg:#f8eae2; --q-chat-bg:#fdf8f5; --q-panel-bg:#f4e2d7; --q-input-bg:#f6e7dd; --q-code-bg:#f6e7dd; --q-glass:rgba(252,246,241,.72); --q-glass-strong:rgba(248,234,226,.84); --q-glass-menu:rgba(253,248,245,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(240,120,50,.15), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(200,70,60,.09), transparent 56%), linear-gradient(155deg,#f9eee6,#f4e2d7); } .theme-rose-light { --q-accent:#d43d76 !important; --q-accent-2:#b02a5c !important; --q-rail-bg:#f0d9e2; --q-side-bg:#f7e7ee; --q-chat-bg:#fdf7fa; --q-panel-bg:#f2dde6; --q-input-bg:#f5e3ea; --q-code-bg:#f5e3ea; --q-glass:rgba(252,244,248,.72); --q-glass-strong:rgba(247,231,238,.84); --q-glass-menu:rgba(253,247,250,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(230,80,140,.15), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(150,50,110,.09), transparent 56%), linear-gradient(155deg,#f8ecf1,#f2dde6); } .theme-midnight-light { --q-accent:#4c56cc !important; --q-accent-2:#363fa0 !important; --q-rail-bg:#d9dcec; --q-side-bg:#e7e9f4; --q-chat-bg:#f7f8fc; --q-panel-bg:#dfe2ef; --q-input-bg:#e4e7f2; --q-code-bg:#e4e7f2; --q-glass:rgba(244,246,251,.72); --q-glass-strong:rgba(231,233,244,.84); --q-glass-menu:rgba(247,248,252,.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(90,100,220,.14), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(60,70,180,.09), transparent 56%), linear-gradient(155deg,#eceef7,#dfe2ef); } /* ============================================================================ #12-16: TAM ÖZEL TEMALAR (standalone — alt-ton YOK, kendi imza aksanı). Accent'i !important ile basar → kişisel vurgu rengini (inline :root) EZER, çünkü tema kimliği aksanın kendisidir. dark/light'a dönünce kişisel aksan geri gelir. ============================================================================ */ /* CYBERPUNK — neon magenta/cyan, kara-mor zemin, ızgara ışıltısı */ .theme-cyberpunk { --q-accent: #ff2e97 !important; --q-accent-2: #16e0ff !important; --q-rail-bg:#0a0510; --q-side-bg:#120a1f; --q-chat-bg:#0e0818; --q-panel-bg:#0c0716; --q-input-bg:#1a1030; --q-code-bg:#070310; --q-code-text:#16e0ff; --q-text:#e6d9ff; --q-strong:#ffffff; --q-muted:#a98fd6; --q-faint:#7d68a8; --q-divider:rgba(255,46,151,0.18); --q-hover:rgba(22,224,255,0.06); --q-selected:rgba(255,46,151,0.14); --q-glass:rgba(18,10,31,0.80); --q-glass-strong:rgba(10,5,16,0.90); --q-glass-border:rgba(255,46,151,0.28); --q-glass-menu:rgba(16,8,24,0.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(255,46,151,0.24), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(22,224,255,0.20), transparent 56%), linear-gradient(155deg,#0d0618 0%,#080410 100%); } /* STEAMPUNK — pirinç/bakır/bronz, koyu deri-kahve zemin */ .theme-steampunk { --q-accent: #c68a3e !important; --q-accent-2: #8a5a2b !important; --q-rail-bg:#1c140c; --q-side-bg:#291d12; --q-chat-bg:#241a10; --q-panel-bg:#1e150d; --q-input-bg:#352615; --q-code-bg:#150e07; --q-code-text:#e0b878; --q-text:#e8d7bd; --q-strong:#fbeed6; --q-muted:#b09a78; --q-faint:#8a7658; --q-divider:rgba(198,138,62,0.20); --q-hover:rgba(198,138,62,0.07); --q-selected:rgba(198,138,62,0.16); --q-glass:rgba(41,29,18,0.82); --q-glass-strong:rgba(28,20,12,0.90); --q-glass-border:rgba(198,138,62,0.30); --q-glass-menu:rgba(36,26,16,0.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(198,138,62,0.22), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(138,90,43,0.20), transparent 56%), linear-gradient(155deg,#20170e 0%,#160f08 100%); } /* ANİME — pastel sakura/lavanta, aydınlık */ .theme-anime { --q-accent: #ff77aa !important; --q-accent-2: #9b8cff !important; --q-rail-bg:#f6e3ee; --q-side-bg:#fdeef6; --q-chat-bg:#fffafd; --q-panel-bg:#fbe8f2; --q-input-bg:#fdeaf3; --q-code-bg:#f3e6fb; --q-code-text:#8a5cd0; --q-text:#5a4a57; --q-strong:#3a2f38; --q-muted:#9a7f92; --q-faint:#b9a3b3; --q-divider:rgba(255,119,170,0.20); --q-hover:rgba(155,140,255,0.08); --q-selected:rgba(255,119,170,0.16); --q-glass:rgba(255,250,253,0.78); --q-glass-strong:rgba(251,232,242,0.88); --q-glass-border:rgba(255,119,170,0.22); --q-glass-menu:rgba(255,248,252,0.97); --q-ambient: radial-gradient(1000px 680px at 8% -8%, rgba(255,119,170,0.18), transparent 60%), radial-gradient(900px 680px at 104% 112%, rgba(155,140,255,0.16), transparent 56%), linear-gradient(155deg,#fdeef6 0%,#f3e9fb 100%); } /* (2026-07-26: KEDİLER teması KALDIRILDI — kullanıcı isteği. _full + picker'lardan da çıkarıldı, mevcut kullanıcılar goglisTheme.get()'te dark'a göç eder.) */ /* MEYVE — sulu karpuz/limon/çilek, ferah aydınlık */ .theme-fruit { --q-accent: #ff5470 !important; --q-accent-2: #78c850 !important; --q-rail-bg:#eef7e6; --q-side-bg:#f7fdef; --q-chat-bg:#fffdf6; --q-panel-bg:#f2fae8; --q-input-bg:#f6fbeb; --q-code-bg:#fdeef0; --q-code-text:#d14a63; --q-text:#4a5240; --q-strong:#2f3a2a; --q-muted:#7f8a72; --q-faint:#a3ad96; --q-divider:rgba(255,84,112,0.18); --q-hover:rgba(120,200,80,0.09); --q-selected:rgba(255,84,112,0.14); --q-glass:rgba(255,253,246,0.80); --q-glass-strong:rgba(242,250,232,0.88); --q-glass-border:rgba(255,84,112,0.20); --q-glass-menu:rgba(253,255,248,0.97); --q-ambient: radial-gradient(900px 620px at 6% -8%, rgba(255,84,112,0.18), transparent 58%), radial-gradient(820px 620px at 104% 110%, rgba(120,200,80,0.18), transparent 56%), radial-gradient(700px 560px at 60% 120%, rgba(255,203,71,0.16), transparent 60%), linear-gradient(155deg,#f5fbec 0%,#fdf2ef 100%); } /* TATLI (2026-07-30, kullanıcı isteği: "şu resme bak çok tatlı bir arkaplan, bu tatlılıkta bir tema istiyorum" — pastel kawaii sahne: gökyüzü mavisi → lavanta, nane yeşili, şeker pembesi, şeftali, krem). TAM tema olarak eklendi (anime/meyve gibi): alt-ton/aksan seçilmez, kendi kimliği var — referans zaten AYDINLIK ve pastel, koyu varyantı "tatlı"lığı öldürürdü. Metin rengi soğuk-lavanta grisi (#4B4A5E): pastel zeminde saf siyah sert durur. */ .theme-candy { --q-accent: #f2789f !important; --q-accent-2: #7fc4ee !important; --q-rail-bg:#e7f0fb; --q-side-bg:#f2f7fe; --q-chat-bg:#fbfcff; --q-panel-bg:#ecf3fd; --q-input-bg:#f5f9fe; --q-code-bg:#f6eefb; --q-code-text:#8b5fbf; --q-text:#4b4a5e; --q-strong:#2f2e42; --q-muted:#8a88a0; --q-faint:#a9a7bc; --q-divider:rgba(150,140,215,0.18); --q-hover:rgba(127,196,238,0.10); --q-selected:rgba(242,120,159,0.15); --q-glass:rgba(251,252,255,0.80); --q-glass-strong:rgba(236,243,253,0.90); --q-glass-border:rgba(150,140,215,0.20); --q-glass-menu:rgba(252,253,255,0.97); /* Ambient = referans görselin gökyüzü: sol üstte güneş sıcaklığı, sağ altta lavanta akşamı, ortada nane yeşili çayır sızıntısı. */ --q-ambient: radial-gradient(1000px 660px at 6% -10%, rgba(255,214,153,0.24), transparent 58%), radial-gradient(900px 660px at 104% 110%, rgba(190,175,240,0.26), transparent 56%), radial-gradient(760px 560px at 52% 118%, rgba(180,225,165,0.22), transparent 60%), linear-gradient(158deg,#e9f3fd 0%,#f1ecfb 55%,#fdf1f6 100%); } /* Tatlı: bulut/kalp/yıldız motifli soluk tekrar deseni (fruit.svg deseniyle aynı rol). */ .theme-candy .q-online, .theme-candy .q-channels, .theme-candy .q-center { background-image: url('/img/themes/candy.svg'); background-repeat: repeat; background-size: 155px; } /* #12-16: TAM temaların (anime/kediler/meyve) panel arkaplanı — temaya özgü SOLUK, TRANSPARAN tekrarlı desen. Yalnız kanal listesi (.q-channels), üyeler (.q-online) ve sohbet (.q-center) arkasına biner; renk bozulmaz (desenin kendi opaklığı düşük). Desen SVG'leri /img/themes/. */ /* Meyve: küçük motif deseni (tekrarlı, soluk). (Kediler kaldırıldı.) */ /* Meyve: kawaii meyve illüstrasyonu (kullanıcının görseli, 2026-07-31) — AYDINLIK tema olduğu için katman da açık renk (anime-bg deseni); svg motif deseninin yerini aldı. */ .theme-fruit .q-online, .theme-fruit .q-channels, .theme-fruit .q-center { background-image: linear-gradient(rgba(255,253,246,0.80), rgba(247,253,239,0.86)), url('/img/themes/fruit-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Anime: tam anime MANZARA fotoğrafı — SOLUK (üstte tema-rengi katmanı okunurluğu korur), fixed → kanal listesi + sohbet + üyeler panelinde tek SÜREKLİ sahne (viewport'a sabit). */ .theme-anime .q-online, .theme-anime .q-channels, .theme-anime .q-center { background-image: linear-gradient(rgba(253,240,247,0.84), rgba(251,235,244,0.88)), url('/img/themes/anime-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Cyberpunk: neon şehir fotoğrafı (kullanıcının görseli, 2026-07-31) — anime-bg ile AYNI desen: fixed tek sürekli sahne; üstteki koyu tema-rengi katmanı metin okunurluğunu korur (fotoğraf %16-22 kadar sızar — neon tabelalar seçilir ama sohbet rahat okunur). */ .theme-cyberpunk .q-online, .theme-cyberpunk .q-channels, .theme-cyberpunk .q-center { background-image: linear-gradient(rgba(10,5,16,0.80), rgba(14,8,24,0.86)), url('/img/themes/cyberpunk-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Steampunk: pirinç şehir illüstrasyonu (kullanıcının görseli, 2026-07-31) — cyberpunk-bg ile aynı desen; koyu deri-kahve katman fotoğrafı %14-20 sızdırır. */ .theme-steampunk .q-online, .theme-steampunk .q-channels, .theme-steampunk .q-center { background-image: linear-gradient(rgba(28,20,12,0.80), rgba(30,21,13,0.86)), url('/img/themes/steampunk-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* renkli tema buton swatch'ı */ .q-ctbtn-swatch { width: 16px; height: 16px; border-radius: 5px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; } /* #12-16: tam özel tema kartları — imza degrade önizlemesi + emoji */ .q-fulltheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .q-fulltheme-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; font-family: inherit; color: #fff; background: var(--ft-swatch); text-shadow: 0 1px 3px rgba(0,0,0,.45); transition: transform .12s ease, box-shadow .12s ease; } .q-fulltheme-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.28); } .q-fulltheme-btn.on { border-color: #fff; box-shadow: 0 0 0 2px var(--q-accent), 0 6px 16px rgba(0,0,0,.3); } .q-fulltheme-emoji { font-size: 26px; text-shadow: none; line-height: 1; } .q-fulltheme-name { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; } /* #12-17: tema SVG ikonu — beyaz currentColor, gradyan üstünde okunur (hafif gölge) */ .q-themeicon { display: inline-flex; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .q-themeicon svg { display: block; } .q-themeicon-fallback { line-height: 1; } /* #17: ilk giriş tema seçici overlay */ .q-tpick-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); } .q-tpick-card { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--q-glass-menu, #21232a); border: 1px solid var(--q-glass-border, rgba(255,255,255,.1)); border-radius: 20px; padding: 30px 26px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .q-tpick-logo { color: var(--q-accent); display: flex; justify-content: center; margin-bottom: 10px; } .q-tpick-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--q-strong); } .q-tpick-sub { margin: 0 0 22px; font-size: 14px; color: var(--q-muted); } .q-tpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; } .q-tpick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 10px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; font-family: inherit; color: #fff; background: var(--tp-swatch); text-shadow: 0 1px 3px rgba(0,0,0,.45); transition: transform .12s ease, box-shadow .12s ease; } .q-tpick-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.32); border-color: #fff; } .q-tpick-emoji { font-size: 32px; text-shadow: none; line-height: 1; } .q-tpick-name { font-size: 13.5px; font-weight: 700; } .q-tpick-skip { margin-top: 22px; background: none; border: 0; color: var(--q-muted); font-family: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; } .q-tpick-skip:hover { color: var(--q-text); } /* #2/#3 Alt panel profil kartı (Discord-vari) */ .q-userpanel-me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; border-radius: 8px; padding: 3px 5px; margin: -3px -5px; transition: background .12s ease; } .q-userpanel-me:hover { background: var(--q-hover); } /* yalnız İLK menü (profil kartı) genişlesin — Tune (ses ayarları) menüsü sağda sabit kalsın (genel .q-menu kuralı ikisine de flex:1 verip sağda boşluk bırakıyordu). */ .q-userpanel > .q-menu:first-of-type { flex: 1; min-width: 0; } /* (2026-07-31, kullanıcı bug'ı "üst üste biniyor oynuyor ekranıyla") min-width:0 ŞART. .q-menu-act bir flex ÖĞESİ ve varsayılan `min-width:auto` onu min-content'ten (yani ad + "🎮 X oynuyor 7:20" metninin TAM genişliğinden) daha dar yapmıyordu → kutu 166px'lik yuvasında 259px'e taşıp mikrofon/kulaklık/dişli butonlarının altına giriyordu (ölçüldü). Sıfırlanınca zincir kapanıyor ve alt satır beklendiği gibi "…" ile kırpılıyor. */ .q-userpanel > .q-menu:first-of-type .q-menu-act { display: block; flex: 1; min-width: 0; } .q-mecard { min-width: 230px; } .q-mecard-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 6px; } .q-mecard-sub { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } /* #5 Gelişmiş arama filtre çubuğu */ /* Arama diyaloğu içeriği YATAYDA KAYMAZ (2026-08-21): çocuklar kaba sığar, taşan varsa kırpılır. */ .q-srch-content { overflow-x: hidden !important; } .q-srch-content > *, .q-srch-content .mud-input-control { max-width: 100%; } .q-srch-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; min-width: 0; } .q-srch-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--q-divider); color: var(--q-muted); cursor: pointer; user-select: none; transition: border-color .12s ease, background .12s ease, color .12s ease; } .q-srch-chip:hover { border-color: var(--q-accent); } .q-srch-chip.on { background: color-mix(in srgb, var(--q-accent) 16%, transparent); border-color: var(--q-accent); color: var(--q-accent); } .q-srch-sep { width: 1px; height: 20px; background: var(--q-divider); margin: 0 2px; } .q-srch-sel { width: auto; max-width: 150px; padding: 4px 8px; font-size: 12px; } /* #4 Birleşik ifade paneli — üst sekmeler + composer ikon vurgusu */ .q-expr { min-width: 340px; } .q-expr-tabs { display: flex; gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--q-divider); margin-bottom: 6px; } .q-expr-tab { font-size: 13px; font-weight: 600; color: var(--q-muted); padding: 5px 12px; border-radius: 8px; cursor: pointer; user-select: none; transition: background .12s ease, color .12s ease; } .q-expr-tab:hover { color: var(--q-strong); background: var(--q-hover); } .q-expr-tab.on { color: #fff; background: var(--q-accent); } /* Panel içindeki scroll çubukları panelin TAM SAĞ kenarına yaslansın: body, panelin 6px padding'ini negatif margin'le doldurur; picker'ların sabit genişliği kaldırılır; içerik-scrollbar arası 6px iç boşlukla korunur. */ .q-expr-body { margin-right: -6px; } .q-expr .q-stickers, .q-expr .q-emoji { width: auto; } .q-expr-icons { display: inline-flex; align-items: center; gap: 8px; } /* İfade/efekt/GIF/anket araç grubu — masaüstünde input ile gönder arasında satır içi. Mobilde (aşağıda) input'un altına tam-genişlik ikinci satıra düşer. */ .q-composer-tools { display: inline-flex; align-items: center; gap: 6px; } .q-composer-tools:empty { display: none; } .q-expr-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--q-muted); cursor: pointer; border-radius: 7px; padding: 3px; transition: color .12s ease, background .12s ease; } .q-expr-ic:hover { color: var(--q-strong); } .q-expr-ic.on { color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 16%, transparent); } /* ÜST BANT DİLİ (2026-08-11, kullanıcı isteği: "yeniden bağlanıyor ekranı üstte badge şeklinde olsun... tekrar eposta gönder bandı gibi" + "loading ekranı yerine gene üst bantta olsun; amaç bağlanana kadar ekranda kalan mesajlarımı görmek"). Hem PRELOAD hem YENİDEN BAĞLANMA artık ekranı kaplamıyor: ince, üstte duran, camsı bir şerit. Ortak sınıf `.q-topbanner` — ikisi de aynı yükseklikte ve aynı yerde belirir, üst üste gelseler bile hizalı görünürler. NOT: yeniden bağlanma 'u artık show() ile açılıyor (showModal DEĞİL), yoksa sayfa inert olur ve "arkadaki mesajları görebilme" amacı boşa çıkardı. */ /* BANT ARTIK ALTTA (2026-08-12, kullanici: "madem ust banner Electron'da maximize/minimize/close dugmelerinin ustune cikamiyor, o halde ust banner yerine altta olsun"). Sebep teknik bir sinirdi: Windows Controls Overlay'de o dugmeleri ISLETIM SISTEMI cizer ve her zaman web iceriginin ustundedir; z-index ile asilamaz. Ustte kalip onlarin altindan gecmek yerine bandi hic o bolgeye sokmayan bir yere aldik. SINIF ADI `q-topbanner` BILEREK KORUNDU: App.razor, ReconnectModal ve goglis.js bu adi kullaniyor; yeniden adlandirmak uc dosyada eszamanli degisiklik ister ve hicbir sey kazandirmaz. ADI "ust" ama YERI alt — burasi tek dogruluk kaynagi. */ .q-topbanner { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; margin: 0; z-index: 20000; box-sizing: border-box; /* DİKEY ORTALAMA — TEK MEKANİZMA (2026-08-11, üçüncü tur; kullanıcı: "yazı gene dikey ortalı değil, mobilde çirkin görünüyor, profesyonelce hallet"). Önceki iki tur `height` + `align-items:center` + piksel düzeltmeleriyle uğraştı ve her seferinde başka bir şey kaydı (alt kenarlık, font metrikleri, animasyon takılması). Kalıcı çözüm SABİT YÜKSEKLİĞİ BIRAKMAK: yükseklik artık DOLGUDAN doğuyor. Üst ve alt dolgu birbirinin AYNISI olduğu için içerik, font metriklerinden BAĞIMSIZ olarak tam ortada durur — ölçülecek bir sapma kalmaz, düzeltme pikseli de gerekmez. Alt kenarlık da dengelenir: `border-bottom` kadar fazladan üst dolgu verilir. */ display: flex; align-items: center; justify-content: center; gap: 10px; /* Cenkti/gesture payi ARTIK ALTTAN: safe-area-inset-BOTTOM (eskiden top'ti). */ padding: 9px 14px calc(8px + env(safe-area-inset-bottom, 0px)); /* ÇENTİK PAYI: telefonlarda bant durum çubuğunun ALTINA giriyordu (kullanıcı: "mobilde çirkin"). safe-area kadar yukarıdan nefes bırakılır; masaüstünde değer 0'dır. */ border: 0; border-top: 1px solid color-mix(in srgb, var(--q-accent, #22A6FF) 45%, transparent); /* RENKLER TEMADAN (2026-08-11): eskiden `rgba(16,22,32,.94)` ve `#e6e7ef` SABİT yazılıydı — 18 temanın 17'sinde yabancı duruyordu, açık temalarda ise koyu bir şerit olarak sırıtıyordu. Cam yüzey uygulamanın menüleriyle aynı değişkenden gelir. */ background: var(--q-glass-menu, var(--q-side-bg)); backdrop-filter: blur(14px); color: var(--q-text); font: 700 13px/1.25 'Goglis Sans', system-ui, sans-serif; letter-spacing: .2px; box-shadow: 0 -6px 20px rgba(0,0,0,.28); /* golge YUKARI dogru (bant altta) */ /* GİRİŞ ANİMASYONU YOK — bilinçli, iki tur bug ürettikten sonra kaldırıldı (2026-08-11). Önce `both` fill'liydi: animasyon hiç koşmazsa eleman translateY(-100%)'te, ekran dışında donuyordu. Fill kaldırıldı ve kayma 8px'e indirildi; bu sefer de ÖLÇÜLDÜ ki animasyon KOŞARKEN (arka plan sekmesinde animasyon saati ilerlemez) eleman 0% karesinde takılıyor ve bant kalıcı olarak 8px yukarıda duruyor — getBoundingClientRect().top = -8. Kullanıcının "dikeylemesine ortalı değil" dediği şey buydu: bandın üst 8px'i ekranın dışında kalınca içerik alta yaslanmış görünüyor. Bu bandın çıktığı AN zaten sekmenin arka planda olduğu (bağlantı koptu) an; yani en kötü koşul, tipik koşul. Konum HİÇBİR zaman animasyonun koşmasına bağlı olmamalı → süsleme atıldı, bant olduğu yerde belirir. */ } /* NOT: bir onceki turda eklenen WCO inset kurali KALDIRILDI — bant artik altta ve orada pencere dugmesi yok, dolayisiyla insete gerek kalmadi. */ .q-topbanner .gp-dots span { width: 6px; height: 6px; } /* Metin kutuları + OPTİK HİZA. Kutu artık simetrik dolguyla tam ortada (ölçüldü: üst 9 / alt 9). Geriye yazı tipinin kendi asimetrisi kalıyor: harflerin GÖVDESİ (cap-height) kutu merkezinin 1px ÜSTÜNDE oturuyor. ÖLÇÜT BİLİNÇLİ SEÇİLDİ — "mürekkep kutusu" değil "cap-height": mürekkep kutusu metne göre değişir (inen harfleri olan bir cümle ile olmayan farklı çıkar) ve ona göre hizalarsak yazı DEĞİŞTİKÇE dikeyde ZIPLAR. Cap-height ölçütü yazı tipine bağlıdır, metne değil — nitekim "Bağlanıyor…" ve "Sunucuya yeniden bağlanılıyor…" için sapma AYNI çıktı (-1,0px), yani bu düzeltme her mesajda doğru kalır. */ .q-topbanner > span, .q-topbanner p { margin: 0; line-height: 1.25; transform: translateY(1px); } /* MOBİLDE DAHA OKUNUR (2026-08-11, kullanıcı: "mobilde çirkin görünüyor"): 13px yazı küçük ekranda sıkışık duruyordu; bant biraz daha nefes alır ve yazı büyür. */ /* MOBILDE USTTE, MASAUSTU/WEB'DE ALTTA (2026-08-12, kullanici karari). Gerekce farkli iki platformda farkli: MASAUSTUNDE bant ustte olamiyor cunku Electron'un native pencere dugmeleri her zaman web iceriginin ustunde ve bandin sag ucunu ortuyor. MOBILDE oyle bir dugme yok; orada dogal yer ust — alt bolge zaten navigasyon cubugunun ve sistem gesture alaninin. */ @media (max-width: 700px) { .q-topbanner { top: 0; bottom: auto; padding: calc(11px + env(safe-area-inset-top, 0px)) 12px 10px; /* centik payi USTTEN */ font-size: 13.5px; gap: 9px; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--q-accent, #22A6FF) 45%, transparent); box-shadow: 0 6px 20px rgba(0,0,0,.28); /* golge asagi dogru */ } /* Kopma bandinin kirmizi kenarligi mobilde de dogru kenarda olsun. */ #components-reconnect-modal.q-topbanner { border-bottom-color: color-mix(in srgb, var(--q-danger, #E24B4A) 60%, transparent); } } /* Preload bandı üç dili de basar (statik HTML, devre yok → Loc çağrılamaz); goglis.js kayıtlı ya da tarayıcı diline göre 'e sınıf koyar, gösterilecek olan seçilir. Varsayılan TR DEĞİL: dil işareti yoksa İngilizce (Loc.Normalize ile aynı kural). */ .q-pl-t { display: none; } .q-pl-en { display: inline; } html.q-lang-tr .q-pl-en, html.q-lang-de .q-pl-en { display: none; } html.q-lang-tr .q-pl-tr { display: inline; } html.q-lang-de .q-pl-de { display: inline; } #goglis-preload { opacity: 1; transition: opacity .3s ease; } #goglis-preload.done { opacity: 0; pointer-events: none; } /* AŞAMA 1 — TAM EKRAN markalı yükleme (2026-08-11). Kullanıcının kayıtlı arayüz ayarları uygulanana kadar burada durulur; goglis.js ayarları uygulayınca sınıf `q-topbanner`a döner ve ince şeride iner ("Bağlanıyor…"). Zemin TEMA değişkeninden gelir — tema artık ilk paint'ten önce 'e basıldığı için doğru renkle doğar (eski kahve flaşı bu yüzden yoktu sanılmasın: FOUC ayrı düzeltildi, burası onun devamı). */ #goglis-preload.gp-full { position: fixed; inset: 0; z-index: 20000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--q-ambient, #1a1b1e); background-attachment: fixed; } #goglis-preload.gp-full .q-pl-t { display: none !important; } /* bant yazısı yalnız 2. aşamada */ .gp-card { display: flex; flex-direction: column; align-items: center; gap: 14px; } /* 2. aşamada (bant) marka kartı yok — yalnız yazı + noktalar. */ #goglis-preload.q-topbanner .gp-card { display: none; } /* AÇILIŞ BANDI TEMA RENGİNDE (2026-08-20, kullanıcı: "Bağlanıyor bandı tema rengine uygun olsun — şu an hep okyanus mavisi"). Önceki karar (--q-logo sabiti) bilinçliydi ama kullanıcı temaya uymayı seçti: kaynak artık --q-accent (tema/kişisel vurgu). Kırmızı accent seçen birinde hata bandına benzeme riski kabul edildi — hata bandı NABIZLI, bu değil; ayrım orada. Yedek zincir accent -> logo mavisi (tema-dışı bağlamda değişken çözülmezse bant düşmesin). */ #goglis-preload.q-topbanner { background: color-mix(in srgb, var(--q-accent, var(--q-logo, #22A6FF)) 22%, var(--q-glass-menu, var(--q-side-bg))); border-bottom-color: color-mix(in srgb, var(--q-accent, var(--q-logo, #22A6FF)) 60%, transparent); } .gp-badge { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); box-shadow: 0 16px 46px rgba(89,131,177,.45), 0 0 0 1px rgba(255,255,255,.08) inset; animation: gp-bob 2.6s ease-in-out infinite; } .gp-brand { font-size: 19px; font-weight: 700; letter-spacing: .6px; color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif; } /* kabuk spirali kendini çiziyor — "yükleniyor" hissi */ .gp-ring1 { stroke-dasharray: 51.5; animation: gp-draw1 1.8s ease-in-out infinite; } .gp-ring2 { stroke-dasharray: 28.9; animation: gp-draw2 1.8s ease-in-out infinite; } @keyframes gp-draw1 { 0% { stroke-dashoffset: 51.5; } 55%, 100% { stroke-dashoffset: 0; } } @keyframes gp-draw2 { 0%, 18% { stroke-dashoffset: 28.9; } 70%, 100% { stroke-dashoffset: 0; } } @keyframes gp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .gp-dots { display: flex; gap: 7px; } .gp-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--q-logo, #22A6FF); animation: gp-dot 1.2s ease-in-out infinite; } /* #4 (2026-07-26): yükleme noktaları da NEON mavi (relogin+preload); eski kahve gitti. */ .gp-dots span:nth-child(2) { animation-delay: .18s; } .gp-dots span:nth-child(3) { animation-delay: .36s; } /* Kopma bandinda noktalar da KIRMIZI (2026-08-12): marka mavisi kirmizi bandin icinde yabanci duruyordu. Acilis bandinda mavi KALIR — oradaki mesaj "her sey yolunda, baglaniyoruz". */ #components-reconnect-modal .gp-dots span { background: var(--q-danger, #E24B4A); } @keyframes gp-dot { 0%, 100% { opacity: .3; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.15); } } /* ---- ÇIKIŞ (veda) ekranı — 2026-07-30 ---- Preload'ın kardeşi: aynı rozet/marka dili, ters yön. Uygulama BULANIKLAŞARAK geri çekilir (kullanıcı gerçekten "kapandığını" görür), veda kartı öne gelir. z-index preload'ın (20000) ve MudBlazor portallarının üstünde. GÖRÜNÜRLÜK ANİMASYONA BAĞLI DEĞİL (skeleton dersi): taban durum görünür, `.on` yalnız yumuşatır — animasyon koşmazsa ekran boş kalmaz. */ #q-bye { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 600px at 50% 35%, rgba(40,150,220,.20), transparent 62%), linear-gradient(160deg, rgba(14,26,39,.93), rgba(10,16,23,.97)); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); /* GÖRÜNÜRLÜK ANİMASYONA BAĞLI DEĞİL (2026-07-30, doğrulamada yakalandı): ilk yazımda `opacity:0` + JS'te requestAnimationFrame ile `.on` sınıfı vardı — rAF ARKA PLAN SEKMESİNDE HİÇ TETİKLENMEZ, overlay kalıcı görünmez kalıyordu. Taban durum GÖRÜNÜR; giriş yumuşatması `animation`la yapılır (eleman eklenince kendiliğinden koşar) ve animasyonlar kapalıysa (q-instant / reduced-motion) ekran ANINDA görünür. */ opacity: 1; animation: q-bye-in .22s ease both; } @keyframes q-bye-in { from { opacity: 0; } to { opacity: 1; } } .q-bye-card { display: flex; flex-direction: column; align-items: center; gap: 15px; animation: q-bye-card-in .34s cubic-bezier(.2,.9,.25,1) both; } @keyframes q-bye-card-in { from { transform: translateY(8px) scale(.97); } to { transform: none; } } .q-bye-badge { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); box-shadow: 0 16px 46px rgba(89,131,177,.45), 0 0 0 1px rgba(255,255,255,.08) inset; } /* Kabuk GERİ sarılır (preload'da çiziliyordu) — "kapanıyor" hissi buradan gelir. Yalnız KISMEN (51.5'in ~⅓'ü): tamamen sıfırlansa logo yok olur ve ekran bozuk görünürdü. */ .q-bye-ring { stroke-dasharray: 51.5; animation: q-bye-unwind 1.05s ease-in-out forwards; } @keyframes q-bye-unwind { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 18; } } .q-bye-bye { font-size: 19px; font-weight: 700; letter-spacing: .3px; color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif; } .q-bye-out { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.62); } .q-bye-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--q-logo, #22A6FF); animation: q-bye-spin .8s linear infinite; } @keyframes q-bye-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* Ekran GÖRÜNÜR kalır (bilgi taşıyor), yalnız hareket durur. */ #q-bye, .q-bye-card, .q-bye-ring, .q-bye-spin { animation: none; } } /* #2 Mesaj yanıtlama */ .q-replybar { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 7px 12px; border-radius: 9px 9px 0 0; background: var(--q-panel-bg); border: 1px solid var(--q-divider); border-bottom: none; font-size: 12.5px; color: var(--q-muted); } .q-replybar-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-replybar-prev { margin-left: 6px; color: var(--q-faint); font-style: italic; } .q-replybar-x { display: inline-flex; cursor: pointer; color: var(--q-muted); border-radius: 6px; padding: 2px; } .q-replybar-x:hover { color: var(--q-strong); background: var(--q-hover); } .q-reply-ref { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--q-muted); margin-bottom: 1px; padding-left: 2px; border-left: 2px solid var(--q-accent); padding-left: 8px; } .q-reply-ref b { color: var(--q-accent); font-weight: 600; } .q-reply-ref-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; opacity: .85; } /* #9 Şikayet dialogu + panosu */ .q-report { display: flex; flex-direction: column; gap: 6px; min-width: 380px; max-width: 460px; } /* #3: not alanı sebep butonlarıyla AYNI genişlikte (q-settings-select'in 420px sınırı burada geçersiz) */ .q-report .q-settings-select { max-width: none; width: 100%; box-sizing: border-box; } /* #2: üye satırı ⋮ menü butonu */ .q-member-more { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; color: var(--q-muted); cursor: pointer; } .q-member-more:hover { background: var(--q-hover); color: var(--q-strong); } .q-report-sub { font-size: 13px; color: var(--q-muted); margin-bottom: 8px; } .q-report-msg { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--q-input-bg); color: var(--q-text); font-size: 13px; font-style: italic; } .q-report-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 9px; background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-strong); font-size: 14px; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .q-report-opt:hover { border-color: var(--q-accent); } .q-report-opt.on { border-color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 14%, transparent); } .q-report-card { padding: 12px 14px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); margin-bottom: 10px; max-width: 640px; } .q-report-card.resolved { opacity: .55; } .q-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--q-strong); } .q-report-reason { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 8px; background: color-mix(in srgb, var(--q-danger) 18%, transparent); color: var(--q-danger); } .q-report-note { margin-top: 6px; font-size: 13px; color: var(--q-text); } .q-report-snap { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--q-panel-bg); font-size: 12.5px; font-style: italic; color: var(--q-muted); } .q-report-meta { margin-top: 6px; font-size: 11.5px; color: var(--q-faint); display: flex; align-items: center; gap: 10px; } /* #1 Klavye kısayolları listesi + kbd çipleri */ .q-hk-list { display: flex; flex-direction: column; gap: 8px; max-width: 580px; } .q-hk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); } .q-hk-info { display: flex; align-items: center; gap: 11px; min-width: 0; } .q-hk-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--q-accent) 18%, transparent); color: var(--q-accent); flex-shrink: 0; } .q-hk-label { font-size: 14px; color: var(--q-text); font-weight: 500; } .q-hk-bind { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; min-width: 104px; justify-content: center; padding: 4px 10px; border-radius: 9px; background: var(--q-panel-bg); border: 1px solid var(--q-divider); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .q-hk-bind:hover { border-color: var(--q-accent); } .q-hk-bind.capturing { border-color: var(--q-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 26%, transparent); } .q-hk-rec { font-size: 12.5px; color: var(--q-accent); font-weight: 600; white-space: nowrap; } .q-hk-empty { font-size: 12.5px; color: var(--q-faint); font-style: italic; } .q-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 24px; padding: 0 7px; border-radius: 6px; background: linear-gradient(180deg, var(--q-side-bg), var(--q-rail-bg)); border: 1px solid var(--q-divider); border-bottom-width: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--q-strong); line-height: 1; } /* #3: modern logo kutusu — degrade + yumuşak parlama */ /* LOGO tonu: kahve ile mavinin karışımı petrol-mavi — accent (kahve) UI'da kalır, logo yüzeyleri bu üçlüyü kullanır. */ /* #5: logo NEON elektrik-mavisi (eski soluk #5983B1 → canlı) + ışıltı (glow). */ :root { --q-logo: #22A6FF; --q-logo-hi: #6FE6FF; --q-logo-lo: #0A66DB; --q-logo-glow: rgba(34,166,255,.55); } /* ÜST ŞERİT YÜKSEKLİĞİ TEK KAYNAK (2026-08-21 akşam): mobil tam-alan panelleri şeridin ALTINDAN başlar ve bunu ayrı ayrı `52px` yazarak yapıyorlardı — alçak ekranda şerit 46px'e inince (aşağıdaki max-height:520px bloğu) o sabitler yalan oluyor, panellerin üstünde 6px'lik boşluk kalıyordu. Artık hepsi bu değişkeni okur. */ :root { --q-topbar-h: 52px; } .q-logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--q-logo-hi), var(--q-logo) 45%, var(--q-logo-lo)); box-shadow: 0 2px 8px color-mix(in srgb, var(--q-logo) 45%, transparent), 0 0 16px var(--q-logo-glow), 0 0 0 1px rgba(255,255,255,.14) inset; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; } /* #5: büyük logo rozetlerinde neon mavi ışıltı (welcome/login/preloader/about) — sonraki tanımları ezer. */ .q-welcome-badge, .q-login-logo, .gp-badge, .q-about-logo { box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 30px var(--q-logo-glow), inset 0 0 0 1px rgba(255,255,255,.16) !important; } /* #C1 (2026-07-26): SOL ÜST mini logo — welcome rozeti gibi neon glow + ÇOK YAVAŞ nefes (box-shadow büyü/küçül, 8s) + 10 sn'de bir shimmer sweep. Nefes animasyonunun box-shadow keyframe'i statik gölgeyi (1847'deki --q-elev-1) ezer → glow geri gelir. Yalnız .q-brand içindeki logo (login/preloader etkilenmez). */ /* Logo animasyonu MASAUSTUNE ozel (2026-08-17): dar ekranda surekli parlayan kare dikkat dagitiyordu; mobilde sabit durur. */ .q-brand .q-logo { overflow: hidden; animation: q-logo-breathe 8s ease-in-out infinite; } @media (max-width: 1000px) { .q-brand .q-logo, .q-brand .q-logo::after { animation: none; } } @keyframes q-logo-breathe { 0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--q-logo) 42%, transparent), 0 0 14px var(--q-logo-glow), 0 0 0 1px rgba(255,255,255,.14) inset; } 50% { box-shadow: 0 3px 12px color-mix(in srgb, var(--q-logo) 55%, transparent), 0 0 30px var(--q-logo-glow), 0 0 0 1px rgba(255,255,255,.20) inset; } } .q-brand .q-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-140%); animation: q-logo-sheen 10s ease-in-out infinite; } @keyframes q-logo-sheen { 0% { transform: translateX(-140%); } 7% { transform: translateX(140%); } 100% { transform: translateX(140%); } } @media (prefers-reduced-motion: reduce) { .q-brand .q-logo, .q-brand .q-logo::after { animation: none; } } .q-brandname { font-size: 16px; font-weight: 500; color: var(--q-strong); } .q-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--q-danger); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; } .q-divider-v { width: 1px; height: 24px; background: var(--q-divider); margin: 0 4px 12px; } /* overflow-x clip: sekme taşma güvenliği; overflow-y visible: sekme menüleri (klasör/sunucu ▾/...) aşağı açılabilsin (clip, hidden'ın aksine diğer ekseni auto'ya zorlamaz). */ /* overflow-clip-margin: seçili sunucunun neon glow'u SOL/SAĞ kenarda kesilmesin (overflow-x:clip taşma sekmelerini "..."e taşımak için gerekli ama ilk sekmenin sol glow'unu kırpıyordu) — 26px pay glow'a yeter. */ .q-tabs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex: 1; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 26px; } /* #tabalign (2026-07-26): sunucu sırası VARSAYILAN ORTALI; ayardan sol/sağ seçilebilir (body sınıfı). */ body.q-tabalign-left .q-tabs { justify-content: flex-start; } body.q-tabalign-right .q-tabs { justify-content: flex-end; } .q-tab { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px 9px 0 0; font-size: 14px; font-weight: 500; color: var(--q-muted); cursor: pointer; border-top: 2px solid transparent; white-space: nowrap; } /* Seçili sekme — kahve tint gradyanı + üst gloss (liquid glass) + aksan üst çizgisi = premium/branded. */ .q-tab.sel { background: linear-gradient(180deg, var(--q-state-primary), transparent 90%), var(--q-side-bg); color: var(--q-strong); border-top: 2px solid var(--q-accent); box-shadow: inset 0 1px 0 var(--q-gloss); } .q-tab:hover:not(.sel) { background: var(--q-hover); color: var(--q-text); } .q-tab.q-add { color: var(--q-online); padding: 7px 9px; } /* ===== #14: Sunucu nav VARSAYILAN = Discord-vari yatay İKON pill'leri. Ad gizli → hover title'da. Chrome-sekmesi görünümü (kapatma hissi) gitti. Ayardan (body.q-nav-names) klasik "ad yanında" döner. Ölçüm sözde-barı (.q-tabs-measure) da aynı boyutta → taşma mantığı DOĞRU sayar. Seçili sekme caret için otomatik-genişler. ===== */ .q-tabs { align-items: center; gap: 6px; } :is(.q-tabs, .q-tabs-measure) .q-tab { padding: 3px; border-radius: 13px; border-top: 0; min-height: 42px; min-width: 42px; justify-content: center; } :is(.q-tabs, .q-tabs-measure) .q-tab .q-tab-name { display: none; } /* tam YUVARLAK sunucu ikonları + sunucular arası geçişte halka/glow YUMUŞAK animasyon (kütük değil). */ :is(.q-tabs, .q-tabs-measure) .q-tab .q-mini { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; transition: transform .16s var(--q-ease); } /* #12: box-shadow ANİMASYONU kaldırıldı — gölge her karede yeniden boyama yaptırıyordu (pahalı); transform GPU'da ücretsiz */ .q-tabs .q-tab:active .q-mini { transform: scale(.9); } .q-tabs .q-tab { margin-bottom: 5px; } /* #14-fix: pill'ler topbar alt kenarına yapışmasın (yuvarlak alttan tamamlansın) */ .q-tabs .q-tab.sel { background: transparent; border-top: 0; box-shadow: none; width: auto; padding-right: 5px; } /* #14-fix: seçili sunucu = yuvarlak + ABARTISIZ neon glow; ALT ÇİZGİ YOK (kullanıcı isteği). */ /* seçili sunucu halkası rengi TEMAYA GÖRE (--q-tabring): koyu/açık = LOGO neon mavisi (marka kimliği; eski kahve halka istenmedi), özel temalar = kendi imza rengi (cyberpunk magenta, kediler turuncu…). --q-tabring HALKANIN KENDİ elementinde tanımlı (var-içinde-var kalıtım belirsizliği yok): varsayılan accent; dark/light override'ı --q-logo'ya çevirir. */ /* SAKIN SECIM HALKASI (2026-08-17, kullanici: "kosedeki border cirkin, profesyonel durmuyor"): yanip sonen neon + genis glow yerine iki katmanli ince halka — once zemin renginde bir bosluk, sonra vurgu rengi. Discord/Slack deseni; acik temada da yumusak. */ .q-tabs .q-tab.sel .q-mini { --q-tabring: var(--q-accent); box-shadow: 0 0 0 2px var(--q-topbar-bg, var(--q-rail-bg)), 0 0 0 4px var(--q-tabring); transition: box-shadow .18s ease; } .theme-dark .q-tabs .q-tab.sel .q-mini, .theme-light .q-tabs .q-tab.sel .q-mini { --q-tabring: var(--q-logo); } .q-tabs .q-tab:hover:not(.sel) { background: transparent; } .q-tabs .q-tab:hover:not(.sel) .q-mini { box-shadow: 0 0 0 2px var(--q-border); } /* ---- Ayar açık: klasik sunucu adı görünümü ---- */ body.q-nav-names .q-tabs { align-items: flex-end; gap: 4px; } body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab { padding: 7px 12px; border-radius: 9px 9px 0 0; border-top: 2px solid transparent; min-height: 0; min-width: 0; justify-content: flex-start; margin-bottom: 0; } body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab .q-tab-name { display: inline; } body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab .q-mini { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; box-shadow: none; } body.q-nav-names .q-tabs .q-tab.sel { background: linear-gradient(180deg, var(--q-state-primary), transparent 90%), var(--q-side-bg); border-top: 2px solid var(--q-accent); box-shadow: inset 0 1px 0 var(--q-gloss); } body.q-nav-names .q-tabs .q-tab.sel .q-mini { box-shadow: none; animation: none; } body.q-nav-names .q-tabs .q-tab.sel::after { display: none; } /* #7: "+" (yeni sunucu) YUVARLAK + açık yeşil zemin → "sekme oluştur" hissi gitti. */ .q-tabs .q-tab.q-add { color: var(--q-online); background: rgba(35,165,90,.15); border-radius: 50%; min-width: 42px; padding: 0; } .q-tabs .q-tab.q-add:hover { background: rgba(35,165,90,.30); } /* #6: sunucu ikonuna hover'da tek geçişli ışıltı (shimmer) — canlılık, abartısız. Yalnız yaprak ::after (güvenli). */ .q-tabs .q-tab .q-mini { position: relative; overflow: hidden; } .q-tabs .q-tab:hover:not(.q-add) .q-mini::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-120%); animation: q-shimmer .75s ease; } @keyframes q-shimmer { to { transform: translateX(120%); } } /* Sürükle-bırak bölgeleri: orta = klasörle (kesikli çerçeve), kenar = araya sırala (dikey çizgi) */ .q-tab.drop-center { background: var(--q-selected); outline: 2px dashed var(--q-accent); outline-offset: -2px; } .q-tab { position: relative; } .q-tab.drop-left::before, .q-tab.drop-right::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--q-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--q-accent) 60%, transparent); } .q-tab.drop-left::before { left: -4px; } .q-tab.drop-right::after { right: -4px; } .q-mini { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: #fff; flex: none; } .q-count { font-size: 11px; color: var(--q-faint); } .q-topactions { display: flex; align-items: center; gap: 4px; padding-bottom: 7px; flex: none; color: var(--q-muted); } /* Ust serit ikon butonu (2026-07-30): MudIconButton yalniz Material yolunu basabildigi icin arama/geri bildirim Goglis cizgisine gecerken sade butona donustu - gorunum MudIconButton ile ayni (dairesel hover, 34px dokunma alani). */ .q-topico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--q-muted); cursor: pointer; } .q-topico:hover { background: var(--q-hover); color: var(--q-strong); } /* ---- avatars ---- */ .q-av { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; font-weight: 500; font-size: 13px; } .q-statuswrap { position: relative; display: inline-flex; } .q-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--q-online); border: 2px solid var(--q-side-bg); } .q-dot.idle { background: var(--q-amber); } .q-dot.dnd { background: var(--q-danger); } .q-dot.invisible { background: var(--q-faint); } .q-dot.off { background: var(--q-faint); } /* çevrimdışı — gri (görünmezle aynı; ayırt edilemez = sızıntı yok) */ /* durum seçici menüsündeki küçük renk noktası */ .q-sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--q-faint); } .q-sdot.on { background: var(--q-online); } .q-sdot.idle { background: var(--q-amber); } .q-sdot.dnd { background: var(--q-danger); } /* Görünmez = içi boş halka. Sınıf 'ghost' — 'invisible' MudBlazor'un visibility:hidden utility'siyle çakışıyor, nokta hiç çizilmiyordu. */ .q-sdot.ghost { background: transparent; border: 2.5px solid var(--q-muted); box-sizing: border-box; } /* Masaüstü ayarları dialogu — anahtar satırları. */ .q-dset { display: flex; flex-direction: column; gap: 4px; } .q-dset-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--q-divider); cursor: pointer; } .q-dset-row:last-child { border-bottom: 0; } .q-dset-row.off { opacity: .55; } .q-dset-t { font-size: 14px; font-weight: 600; color: var(--q-strong); } .q-dset-h { font-size: 12px; color: var(--q-muted); margin-top: 2px; } /* #2 GİZLİ önizleme (2026-07-20 — artık ANA arayüzde): amber band + amber çerçeveli sekme. */ .q-preview-band { display: flex; align-items: center; gap: 9px; padding: 9px 13px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--q-amber); background: rgba(240,178,50,0.12); color: var(--q-amber); font-size: 13.5px; } .q-tab-preview { border: 1px dashed var(--q-amber); background: rgba(240,178,50,0.07); } .q-tab-preview .q-tab-name { color: var(--q-amber); } .q-tab-preview.sel { background: rgba(240,178,50,0.16); } /* Başka sekme/cihazda sesteyken bu sekmenin profil panelinin üstünde pasif bilgi bandı. */ .q-voice-elsewhere { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--q-amber); background: rgba(240,178,50,0.10); border-top: 1px solid var(--q-divider); } /* ---- main ---- */ .q-main { flex: 1; display: flex; min-height: 0; } /* KOLON TAKASI (2026-07-31, kullanıcı isteği): varsayılan yerleşim DEĞİŞMEZ (üyeler solda, kanallar sağda); ayardan açılınca ikisi yer değiştirir. `order` kullanılıyor çünkü DOM sırasına dokunmuyor: Blazor ağacı, klavye gezinme sırası ve ekran okuyucu düzeni korunur. Kenarlıklar da yön değiştirir, yoksa iki çizgi aynı tarafta kalırdı. */ html.q-sideswap .q-main.q-srv > .q-online { order: 3; border-right: 0; border-left: 1px solid var(--q-border); } html.q-sideswap .q-main.q-srv > .q-center { order: 2; } html.q-sideswap .q-main.q-srv > .q-channels { order: 1; border-left: 0; border-right: 1px solid var(--q-border); } html.q-sideswap .q-main.q-srv > .q-online { border-left-color: var(--q-glass-border); } html.q-sideswap .q-main.q-srv > .q-channels { border-right-color: var(--q-glass-border); } /* AMFI DUZENI (2026-08-14): solda metin kanallari + SECILI kanalin altinda o kanali gorebilen uyeler (akordeon), sagda yalniz medya (ses+video) kanallari. Kolon sirasi Arena'yla ayni (sol/orta/sag) — yalniz icerik dagilimi degisir (Razor _amfi dali). */ html.q-layout-amfi .q-amfi-mem { margin: 2px 4px 10px 16px; padding-left: 10px; border-left: 2px solid var(--q-divider); } html.q-layout-amfi .q-amfi-mem .q-cat { padding-top: 4px; } /* solda kanal satirlari mevcut .q-chrow stilini kullanir; secili satirin akordeonla butunlesmesi icin alt bosluk sifirlanir */ html.q-layout-amfi .q-online .q-chrow { margin: 1px 4px; } /* A ONERISI (2026-08-14): sag kolon Amfi'de TAMAMEN gizli — kanallar solda tek listede, sohbet genisler. Dock + kullanici paneli sol kolonun dibinde (sticky) yasar. */ html.q-layout-amfi .q-main.q-srv > .q-channels { display: none; } html.q-layout-amfi .q-main.q-srv > .q-online { flex: 0 0 var(--q-amfi-w, 300px); width: var(--q-amfi-w, 300px); } /* Surukle-genislet tutamaci (2026-08-15): SAG IC kenar — kolon overflow:hidden, dis tasma kirpilirdi. */ .q-amfiresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; } .q-amfiresize:hover, .q-amfiresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); } html.q-layout-amfi .q-online { display: flex; flex-direction: column; } /* PANEL/LISTE UST USTE BINME FIXI (2026-08-15, kullanici canli acik-tema goruntusu): sticky bottom, aside'in padding/zemin kosullarinda listeyle ceakisebiliyordu. Yapisal cozum: aside sutun, LISTE kendi scroll kabi (flex:1 + overflow), panel AKISTA en altta — icerik panelin altindan fiziksel olarak gecemez, zemin degiskenine de ihtiyac kalmaz. */ html.q-layout-amfi .q-main.q-srv > .q-online { overflow: hidden; } /* FORUM ORTA ALAN (2026-08-15): akis TERS (yeni ustte) — column-reverse DOM sirasini KORUR (gun ayraci/@key/lazy-load/canli ekleme mantigi hic degismedi), yalniz gorsel ters doner. Sentinel DOM basinda = gorselde EN ALTTA: asagi kaydirdikca eskiler yuklenir. Composer + arac cubugu CSS order ile basliğin altina tasinir. */ .q-forumchat .q-chathead { order: -3; } .q-forumchat .q-fmd-bar { order: -2; } .q-forumchat .q-fprev { order: -2; } .q-forumchat .q-composer { order: -1; margin-bottom: 2px; } /* BEKLEYEN DOSYA KARTLARI FORUMDA INPUT'UN ALTINDA (2026-08-18, kullanıcı: "forumda input yukarıda olduğu için ekleyeceğim dosya da yukarıda görünmeli"). Forum kolonu CSS order ile diziliyor; q-stagebar'ın order'ı yoktu (0) ve mesaj listesiyle birlikte EN ALTA düşüyordu. Mesajlara açık order verilir, kartlar composer(-1) ile mesajlar(1) arasına oturur. */ .q-forumchat .q-stagebar { order: 0; margin: 0 16px 6px; } .q-forumchat .q-messages { order: 1; } /* Forum listesi NORMAL akis: sira Razor'da cevrilir (column-reverse tasan icerigi kaydirilamaz yapiyordu — olculdu). Boylece kaydirma/gun ayraci/lazy-load aynen calisir. */ .q-messages.q-forum { overflow-y: auto; flex: 1 1 auto; min-height: 0; } .q-messages.q-forum > .q-msg { background: var(--q-panel-bg, rgba(255,255,255,0.03)); border: 1px solid var(--q-divider); border-radius: 10px; margin: 5px 10px; padding: 10px 12px !important; } .q-messages.q-forum > .q-msg.q-menu-host, .q-messages.q-forum > .q-msg:hover { background: var(--q-hover); } .q-fmd-bar { display: flex; align-items: center; gap: 2px; padding: 4px 10px 0; } .q-fmd-b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 5px; border-radius: 6px; cursor: pointer; color: var(--q-muted); font-size: 13px; user-select: none; } .q-fmd-b:hover { background: var(--q-hover); color: var(--q-text); } .q-fmd-sep { width: 1px; height: 14px; background: var(--q-divider); margin: 0 4px; } .q-fmd-prev { margin-left: auto; font-size: 12px; color: var(--q-muted); cursor: pointer; padding: 3px 8px; border-radius: 6px; user-select: none; } .q-fmd-prev:hover, .q-fmd-prev.on { background: var(--q-hover); color: var(--q-text); } /* WYSIWYG kutusu: gizli textarea'nin gorunur ikizi. Bicimler gercek etiketlerle cizilir. */ .q-forumchat .q-composer textarea#q-fta, .q-forumchat .q-msgmirror { display: none !important; } .q-fed { flex: 1; min-width: 0; min-height: 22px; max-height: 200px; overflow-y: auto; outline: none; font-size: var(--q-msg-size, 14px); line-height: 1.45; color: var(--q-text); padding: 2px 0; } .q-fed:empty::before { content: attr(data-ph); color: var(--q-faint); pointer-events: none; } .q-fed b, .q-fed strong { font-weight: 700; } .q-fed h2 { font-size: 17px; font-weight: 700; margin: 2px 0; } .q-fed ul { margin: 2px 0 2px 18px; } .q-fed code { background: var(--q-hover); border-radius: 4px; padding: 0 4px; font-family: var(--q-mono, monospace); font-size: 12.5px; } .q-fed a { color: var(--q-accent); } .q-fed-emo { display: inline-block; vertical-align: -5px; } .q-fed-emo svg { width: 22px; height: 22px; display: block; } /* DIALOG RENKLERI TEMADAN (2026-08-17, kullanici: "beyaz temada beyaz yazilar var"). MudBlazor dialog zemini/metnini KENDI paletinden alir; o palet (IsDarkMode) ile bizim tema degiskenlerimiz iki ayri yerden turedigi icin ayrisabiliyordu. Artik dialog yuzeyi ve metni DOGRUDAN tema degiskenlerinden gelir — body tema sinifini tasidigi icin bunlar ekranda gorulen temayla HER ZAMAN ayni. Renkli butonlar (Error/Primary filled) muaf. */ .mud-dialog { background: var(--q-panel-bg) !important; color: var(--q-text) !important; } .mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-title * { color: var(--q-strong) !important; } .mud-dialog .mud-dialog-content { color: var(--q-text); } .mud-dialog .mud-button-root.mud-button-text:not(.mud-button-filled):not(.mud-error-text):not(.mud-primary-text) { color: var(--q-text); } .mud-dialog .mud-input, .mud-dialog .mud-input-root, .mud-dialog .mud-input-label { color: var(--q-text); } /* Perde tema-bagimsiz KOYU: acik palette beyaz perde tum uygulamayi soluklastiriyordu. */ .mud-overlay .mud-overlay-scrim, .mud-overlay-dialog { background: rgba(0, 0, 0, 0.55) !important; } /* MOBIL IZIN LISTESI (2026-08-17): durum cipleri + iste dugmesi. */ .q-dset-sep { height: 1px; background: var(--q-divider); margin: 10px 0 6px; } .q-permlist { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; } .q-permrow { display: flex; align-items: center; gap: 8px; } .q-permrow-n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--q-text); } .q-permchip { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .q-permchip.ok { background: color-mix(in srgb, var(--q-online, #23a55a) 22%, transparent); color: var(--q-online, #23a55a); } .q-permchip.no { background: color-mix(in srgb, var(--q-danger, #ed4245) 20%, transparent); color: var(--q-danger, #ed4245); } .q-permchip.warn { background: var(--q-hover); color: var(--q-muted); } .q-permchip.na { background: transparent; color: var(--q-faint); } .q-permask { flex: none; font-size: 12px; padding: 3px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--q-divider); color: var(--q-text); } .q-permask:hover { background: var(--q-hover); } /* SABITLENMIS MESAJLAR PANELI (2026-08-15): baslikta raptiye dugmesi + kart listesi. */ .q-pinbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; color: var(--q-muted); cursor: pointer; } .q-pinbtn:hover { background: var(--q-hover); color: var(--q-text); } .q-pinbtn-n { font-size: 11px; font-weight: 700; color: var(--q-strong); background: var(--q-hover); border-radius: 999px; padding: 1px 6px; line-height: 1.5; } .q-pinpanel { width: 340px; max-width: 86vw; padding: 4px; } .q-pinpanel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; font-size: 15px; font-weight: 700; color: var(--q-strong); } .q-pinpanel-head .gg-icon { color: var(--q-accent); } .q-pinpanel-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px; } .q-pincard { position: relative; display: flex; gap: 9px; padding: 9px 10px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); cursor: pointer; } .q-pincard:hover { background: var(--q-hover); } .q-pincard-av { width: 32px !important; height: 32px !important; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; } .q-pincard-b { flex: 1; min-width: 0; } .q-pincard-h { display: flex; align-items: baseline; gap: 7px; } .q-pincard-nm { font-size: 13.5px; font-weight: 600; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-pincard-h time { font-size: 11px; color: var(--q-faint); flex: none; } .q-pincard-t { font-size: 13px; color: var(--q-text); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .q-pincard-x { position: absolute; top: 5px; right: 5px; display: none; padding: 2px; border-radius: 6px; color: var(--q-muted); } .q-pincard:hover .q-pincard-x { display: inline-flex; } .q-pincard-x:hover { background: var(--q-danger, #ed4245); color: #fff; } /* SAYILI okunmamis rozetleri (2026-08-15): kanal satiri + topluluk sekmesi. */ .q-ch-badge { flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--q-danger, #ed4245); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Rozet topluluk IKONUNUN sag-ust kosesine biner (Discord deseni). */ .q-tab-icw { position: relative; display: inline-flex; flex: none; } .q-tab-badge { position: absolute; top: -5px; right: -6px; z-index: 2; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--q-danger, #ed4245); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--q-topbar-bg, #10151f); box-sizing: content-box; } .q-tab-unread.on-ic { position: absolute; top: -2px; right: -2px; } .q-ftabs { display: flex; gap: 14px; padding: 6px 14px 0; order: -2; } .q-ftab { font-size: 13px; color: var(--q-muted); cursor: pointer; padding: 3px 2px 5px; border-bottom: 2px solid transparent; user-select: none; } .q-ftab:hover { color: var(--q-text); } .q-ftab.on { color: var(--q-accent); border-bottom-color: var(--q-accent); } .q-fhide .q-messages, .q-fhide .q-composer, .q-fhide .q-fmd-bar, .q-fhide .q-fprev, .q-fhide .q-pinbar, .q-fhide .q-msgcount { display: none !important; } .q-fpanel { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; } .q-fphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .q-fphotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; } .q-frow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--q-text); text-decoration: none; } .q-frow:hover { background: var(--q-hover); } .q-frow-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .q-frow-m { font-size: 12px; color: var(--q-muted); flex: none; } .q-ev-cal { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; } .q-ev-calbtn { font-size: 12px; padding: 3px 9px; border: 1px solid var(--q-divider); border-radius: 7px; color: var(--q-muted); text-decoration: none; } .q-ev-calbtn:hover { background: var(--q-hover); color: var(--q-text); } .q-fprev { margin: 4px 10px 0; padding: 8px 12px; border: 1px dashed var(--q-divider); border-radius: 8px; max-height: 220px; overflow-y: auto; } /* UYE KOLONU AC/KAPA (2026-08-15): Arena/Klasik'te basliktaki kisiler ikonu kolonu gizler. Amfi/Forum muaf (:not — orada ayni eleman KANAL listesi). Yalniz masaustu: mobilde .q-online tam-ekran cekmece, gizlemek cekmeceyi oldururdu. */ @media (min-width: 1001px) { html.q-memcol-off:not(.q-layout-amfi) .q-main.q-srv > .q-online { display: none !important; } } /* Arena/Klasik uye toggle'i mobilde gizli — kolon orada zaten cekmece, dugme anlamsiz. Forum'un q-fmemtoggle'i mobilde KALIR (sag cekmeceyi acar). */ @media (max-width: 1000px) { .q-memtoggle { display: none !important; } } /* FORUM (2026-08-15): tek-kolon iskeleti q-layout-amfi sinifindan miras. Sag kolon forumda UYE PANELI olur: varsayilan gizli (amfi kurali), q-fmem-on ile acilir; icindeki kanal agaci/banner her durumda gizli, yalniz .q-fmem gorunur. */ html.q-layout-forum.q-fmem-on .q-main.q-srv > .q-channels { display: flex; } html.q-layout-forum .q-main.q-srv > .q-channels .q-srvheader, html.q-layout-forum .q-main.q-srv > .q-channels .q-chlist { display: none; } html.q-layout-forum .q-fmem { display: flex; flex-direction: column; min-height: 0; flex: 1; } html.q-layout-forum .q-fmem-list { overflow-y: auto; min-height: 0; flex: 1; padding: 0 6px; } /* Sunucu banner'i Amfi solunda kenardan kenara (aside'in 12/10px padding'i geri alinir). */ html.q-layout-amfi .q-online .q-srvheader { margin: -12px -10px 8px; } /* ===== LANDING CESARET PAKETI (2026-08-15, kullanici: "Discord'a gore acemi duruyor, elden gecir"): dev baslik, derin zemin, perspektifli urun gorseli, iri CTA'lar. Mevcut .q-land kurallarinin UZERINE override — kaynak sirasi kazanir. ===== */ .q-land-hero.split { position: relative; padding-top: 40px; } .q-land-hero.split::before { content: ""; position: absolute; inset: -120px -20% auto; height: 620px; pointer-events: none; z-index: 0; background: radial-gradient(560px 380px at 22% 30%, color-mix(in srgb, var(--q-accent, #22A6FF) 26%, transparent), transparent 70%), radial-gradient(640px 420px at 78% 18%, rgba(127, 119, 221, 0.20), transparent 72%); } .q-land-heroin { position: relative; z-index: 1; } /* Baslik tipografisi ESKI halinde (kullanici: 'fontu degistirmeni istemedim'). */ .q-land-hero.split .q-land-sub { font-size: 17.5px; line-height: 1.65; max-width: 470px; } .q-land-btn.primary { padding: 15px 30px; font-size: 16.5px; font-weight: 700; border-radius: 14px; box-shadow: 0 10px 28px color-mix(in srgb, var(--q-accent, #22A6FF) 42%, transparent); transition: transform .15s ease, box-shadow .15s ease; } .q-land-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); } .q-land-btn.ghost { padding: 15px 24px; font-size: 15.5px; border-radius: 14px; } .q-land-btn.primary.sm, .q-land-btn.ghost.sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; box-shadow: none; } .q-land-pill { font-size: 13.5px; padding: 7px 14px; } /* Urun gorseli: buyuk, hafif perspektif, katmanli golge — "kocaman monitor" hissi. */ .q-land-shot { transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg) scale(1.06); transform-origin: left center; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07); transition: transform .4s ease; } .q-land-heroart:hover .q-land-shot { transform: perspective(1400px) rotateY(-3.5deg) rotateX(1deg) scale(1.07); } .q-land-desk { border-radius: 14px; display: block; } .q-land-ph { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); } .q-land-prop { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4)); animation: q-prop-float 7s ease-in-out infinite; } .q-land-prop.p2 { animation-delay: -2.2s; } .q-land-prop.p3 { animation-delay: -4.1s; } .q-land-prop.p4 { animation-delay: -5.6s; } @keyframes q-prop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @media (prefers-reduced-motion: reduce) { .q-land-prop { animation: none; } } /* Bolum basliklari + mock kartlari iri ve derin. */ .q-land-band h3 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -1px; font-weight: 800; } .q-land-band p { font-size: 16.5px; line-height: 1.7; } .q-band-chip { font-size: 13px; padding: 6px 13px; font-weight: 700; } .q-mock { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); border-radius: 16px; } /* Ust nav: kayarken cam zemin (sayfaya yapisik hissi gitsin). */ /* ── HERO SAHNESI (2026-08-15, gercek tasarim turu): CSS monitor mockup'i + one tasan telefon + BUYUK salyangoz karakterler + zemin isiklari + bolum gecis dalgasi. ── */ /* Sahne genişliği KOLONA bağlı olmalı, viewport'a değil (2026-08-21): `56vw` metin kolonu daralınca sahnenin küçülmesini engelliyor, mockup kolondan taşıp sağdaki telefonu ekran dışına itiyordu. `100%` = grid kolonunun kendisi; 780px tavanı geniş ekranlarda korunur. */ .q-scene { position: relative; width: min(100%, 780px); margin-left: auto; } .q-mon { position: relative; background: #0b0f17; border-radius: 20px; padding: 12px 12px 30px; box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 2px rgba(0, 0, 0, 0.6); } .q-mon-scr { display: block; width: 100%; height: auto; border-radius: 10px; } .q-mon-cam { position: absolute; left: 50%; bottom: 11px; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: #1d2634; } .q-mon-neck { width: 84px; height: 46px; margin: 0 auto; background: linear-gradient(#131a26, #0a0e16); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); } .q-mon-base { width: 260px; height: 12px; margin: 0 auto; border-radius: 999px; background: linear-gradient(#1a2333, #0c1119); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); } .q-scene-ph { position: absolute; right: -14px; bottom: 44px; width: 14%; height: auto; border-radius: 14px; box-shadow: 0 26px 54px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.09); z-index: 3; transform: rotate(5deg); } /* Karakterler: buyuk salyangozlar sahneye YASLANIR (Discord'un 3B karakter karsiligi). */ .q-char { position: absolute; z-index: 4; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); animation: q-prop-float 8s ease-in-out infinite; } .q-char.c1 { width: 128px; left: -48px; bottom: -14px; animation-delay: -1.5s; } .q-char.c2 { width: 96px; left: -26px; top: -48px; animation-delay: -4s; } .q-char.c3 { width: 82px; right: 24%; top: -50px; animation-delay: -6s; } /* Sahne zemini: buyuk glow halkasi monitorun arkasinda. */ .q-scene::before { content: ""; position: absolute; inset: -12% -16%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--q-accent, #22A6FF) 30%, transparent), transparent 72%); } /* Hero alt gecis dalgasi: sonraki bolume yumusak baglanti. */ .q-land-wave { display: block; width: 100%; height: 90px; margin: 26px 0 -8px; color: rgba(255, 255, 255, 0.035); } @media (max-width: 860px) { .q-scene { width: 100%; margin: 26px 0 0; } .q-scene-ph { right: 4px; width: 18%; } .q-char.c1 { left: -10px; width: 96px; } .q-char.c2 { left: -4px; width: 74px; } .q-char.c3 { display: none; } } .q-land-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--q-ambient, #0c111c) 62%, transparent); border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin: 0; padding: 0; } @media (max-width: 860px) { .q-land-shot { transform: none; } .q-land-heroart:hover .q-land-shot { transform: none; } } html.q-layout-amfi .q-amfi-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* PANEL TAM OTURSUN (2026-08-15, kullanici: "profil kismi tam oturmamis"): .q-online'in 12px/10px ic padding'i paneli kolon icinde yuzen kopuk bir blok yapiyordu (panel 279px, kolon 300px, altta 12px bosluk). Negatif margin padding'i geri alir — panel Arena'daki gibi kolonun gercek kenarlarina tam genislik oturur (dock da ayni sarmalayicida). */ html.q-layout-amfi .q-amfi-bottom { flex: none; margin: 0 -10px -12px; } /* .q-mbtn-right gizlemesi Razor kosuluna tasindi (2026-08-15): ev modunda buton gerekli. */ /* AKORDEON UYELERI KOMPAKT (2026-08-14, kullanici: "uye avatari adi biraz daha kucuk gorunsun, cok fazla kiside goruntu kirliligi olusturur"): avatar 30->20px (inline style'i ezmek icin !important — kompakt mesaj modundaki desenle ayni), yazi 12.5px, satir sikilastirildi. */ html.q-layout-amfi .q-amfi-mem { font-size: 12.5px; } html.q-layout-amfi .q-amfi-mem .q-av { width: 20px !important; height: 20px !important; font-size: 9px !important; } html.q-layout-amfi .q-amfi-mem .q-member { padding: 2px 6px; gap: 7px; } html.q-layout-amfi .q-amfi-mem .q-dot { width: 8px; height: 8px; } html.q-layout-amfi .q-amfi-mem .q-cat { font-size: 10px; padding: 3px 6px 1px; } html.q-layout-amfi .q-amfi-mem .q-lvl { transform: scale(0.85); } /* AMFI MINI PROFIL KARTI (2026-08-15, kullanici: "kompakt listede kart da minik olsun") */ html.q-layout-amfi .q-pp { width: 292px; } html.q-layout-amfi .q-pcard2-banner { height: 72px; } html.q-layout-amfi .q-pcard2-avwrap { width: 68px; height: 68px; margin: -34px 0 0 16px; } html.q-layout-amfi .q-pcard2-av { width: 68px; height: 68px; font-size: 27px; border-width: 4px; } html.q-layout-amfi .q-pcard2-name { font-size: 18px; } html.q-layout-amfi .q-pcard2-body { padding: 8px 14px 4px; } html.q-layout-amfi .q-pca-icon { width: 34px; height: 34px; } /* Akordeon rol-gruplama anahtari (2026-08-15; kullanici: "ayri satir acmasin, oraya 2 kisi sigardi") — akistan cikarilip ILK grup basliginin hizasina, sag koseye bindirilir: listeye dikey maliyeti SIFIR. Grup basligi ("SAHIP — 1") kisa, sag kose hep bos. */ .q-amfi-mem { position: relative; } .q-amfi-memhead { position: absolute; top: 0; right: 4px; z-index: 2; padding: 0; } .q-amfi-memhead { display: flex; gap: 2px; } .q-amfi-memhead .q-sort-toggle { padding: 1px 3px; } .q-amfi-memfold { font-size: 11px; color: var(--q-faint); padding: 2px 8px 5px; cursor: pointer; } .q-amfi-memfold:hover { color: var(--q-text); } /* TARIH/SAAT INPUT IKONU (2026-08-14, kullanici: "takvim ikonu koyu temada siyah, acik renk olmali"): color-scheme tarayicinin native picker gostergesini temaya uydurur (WebKit'te beyaz ikon + koyu takvim paneli). Acik temalarda light'a geri doner. */ input[type="datetime-local"], input[type="date"], input[type="time"], input[type="month"], input[type="week"] { color-scheme: dark; } html.theme-light input[type="datetime-local"], html[class*="-light"] input[type="datetime-local"], html.theme-light input[type="date"], html[class*="-light"] input[type="date"], html.theme-light input[type="time"], html[class*="-light"] input[type="time"], html.theme-light input[type="month"], html[class*="-light"] input[type="month"], html.theme-light input[type="week"], html[class*="-light"] input[type="week"] { color-scheme: light; } /* DND HEDEF VURGUSU (2026-08-14): satir = ust kenarda accent cizgi ("onune birakilir"); kategori basligi = cerceve ("icine"); liste boslugu = kesikli cerceve ("kategorisize"). */ /* SATIR HEDEFI = YERLESTIRME CIZGISI (2026-08-14 v2, kullanici: "kutu vurgusu icine sokacakmisim gibi hissettirdi"): satir boyanmaz; ust kenarda uclu ince cizgi 'ONUNE girer' der (Discord deseni). Kutu vurgusu yalniz GERCEKTEN icine birakilan hedeflerde (kategori basligi) kalir. */ div[draggable="true"].q-dropping { position: relative; } div[draggable="true"].q-dropping::before { content: ""; position: absolute; left: 10px; right: 8px; top: -1px; height: 2px; border-radius: 2px; background: var(--q-accent, #22A6FF); pointer-events: none; z-index: 2; } div[draggable="true"].q-dropping::after { content: ""; position: absolute; left: 3px; top: -4px; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--q-accent, #22A6FF); background: var(--q-side-bg, #10151f); pointer-events: none; z-index: 2; } /* Kategori hedefi (v6): baslik hafif tonlanir; GRUBUN tamamini JS'in yerlestirdigi TEK PARCA .q-drop-frame overlay'i cerceveler — kardes-bazli kenar cizgileri akordeon girintisinde hizalanamiyordu, tek dikdortgen her zaman duzgun. */ .q-cathdr.q-dropping { background: color-mix(in srgb, var(--q-accent, #22A6FF) 14%, transparent); border-radius: 6px; } .q-amfi-list, .q-chlist { position: relative; } .q-drop-frame { position: absolute; left: 2px; right: 2px; border: 2px solid var(--q-accent, #22A6FF); border-radius: 8px; pointer-events: none; z-index: 5; } .q-chlist.q-dropping, .q-amfi-list.q-dropping { outline: 2px dashed color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); outline-offset: -4px; border-radius: 8px; } /* DUZEN STILI KARTLARI (ayarlar + ilk-giris): 3 kolonlu mini sema — soldaki/ortadaki/sagdaki bloklari kolonlari temsil eder; stil sinifi (marena/mklasik/mamfi) vurgulanan kolonu boyar. */ .q-lay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .q-lay-grid.big { margin: 6px 0 14px; } .q-lay-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg); color: var(--q-text); cursor: pointer; text-align: center; position: relative; } .q-lay-card:hover { border-color: var(--q-accent); } .q-lay-card.on { border-color: var(--q-accent); box-shadow: 0 0 0 1px var(--q-accent); } .q-lay-name { font-weight: 700; font-size: 13.5px; } .q-lay-hint { font-size: 11px; color: var(--q-muted); line-height: 1.35; } .q-lay-new { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #fff; background: var(--q-accent, #22A6FF); border-radius: 999px; padding: 3px 9px; } .q-lay-mini { display: flex; gap: 3px; width: 74px; height: 44px; } .q-lay-mini i { border-radius: 3px; background: color-mix(in srgb, var(--q-text, #dde) 18%, transparent); } .q-lay-mini i:nth-child(1), .q-lay-mini i:nth-child(3) { width: 16px; } .q-lay-mini i:nth-child(2) { flex: 1; } /* vurgulu kolonlar: arena = sol uyeler + sag kanallar; klasik tersi; amfi sol kalin + sag ince */ .q-lay-mini.marena i:nth-child(1), .q-lay-mini.marena i:nth-child(3), .q-lay-mini.mklasik i:nth-child(1), .q-lay-mini.mklasik i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); } .q-lay-mini.mamfi i:nth-child(1) { width: 24px; background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); } .q-lay-mini.mamfi i:nth-child(3) { display: none; } /* Forum mini semasi: sol dar kolon + ortada YATAY kart cizgileri (gonderi akisi hissi). */ .q-lay-mini.mforum i:nth-child(1) { width: 16px; background: color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); } .q-lay-mini.mforum i:nth-child(2) { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--q-accent, #22A6FF) 60%, transparent) 0 8px, transparent 8px 12px); } .q-lay-mini.mforum i:nth-child(3) { display: none; } .q-lay-mini.mamfi i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 35%, transparent); } .q-lay-mini.mklasik i:nth-child(1) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); } .q-lay-mini.marena i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); } /* Dar ekran: 3 kart yan yana sigmaz -> tek kolon, kart ici YATAY (sema solda, metin sagda). */ @media (max-width: 720px) { .q-lay-grid { grid-template-columns: 1fr; } .q-lay-card { flex-direction: row; text-align: left; align-items: center; gap: 12px; padding: 10px 12px; } .q-lay-card .q-lay-mini { flex: none; width: 58px; height: 36px; } .q-lay-card .q-lay-name { min-width: 52px; } .q-lay-card .q-lay-hint { flex: 1; } } /* Mobilde kolonlar zaten drawer (fixed) — sıralamaya karışma. */ @media (max-width: 700px), (max-height: 520px) { html.q-sideswap .q-main.q-srv > .q-online, html.q-sideswap .q-main.q-srv > .q-center, html.q-sideswap .q-main.q-srv > .q-channels { order: 0; } } /* #2: seçilebilir istisnalar — mesaj içerikleri, tüm girişler, kod blokları, kanal konusu. */ .q-messages, .q-msgbox, .q-root input, .q-root textarea, .q-root [contenteditable], .q-root pre, .q-root code, .q-chtopic, .q-report-msg { user-select: text; -webkit-user-select: text; } /* EV MODUNDA GENİŞLETİLEBİLİR (2026-08-04): sol kolon burada DM/arkadaş panelidir; sunucudaki .q-dmrail gibi sürüklenebilir. `position:relative` tutamacı konumlandırmak için ŞART. Genişlik değişkeni AYRI (--q-home-dm-w): sunucu modunda aynı eleman ÜYE listesidir ve onun 220px'i sabit kalmalı — tek değişken paylaşılsaydı biri diğerini bozardı. */ .q-online { width: 220px; background: var(--q-side-bg); flex: none; padding: 12px 10px; overflow-y: auto; border-right: 1px solid var(--q-border); position: relative; } .q-main:not(.q-srv) .q-online { width: var(--q-home-dm-w, 220px); } /* Sunucu modunda UYE kolonu genisligi (2026-08-15, surukle-genislet): --q-mem-w. Amfi'nin html.q-layout-amfi kurali daha ozgul, kendi --q-amfi-w'sunu kullanmaya devam eder. */ .q-main.q-srv > .q-online { width: var(--q-mem-w, 220px); } .q-memresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; } .q-memresize:hover, .q-memresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); } html.q-sideswap .q-main.q-srv > .q-online .q-memresize { right: auto; left: 0; } .q-channels { width: 248px; background: var(--q-side-bg); flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--q-border); position: relative; } /* kanallar kolonu yeniden-boyutlandırma tutamacı (sol kenar) — sürükle: genişlet/daralt */ .q-chresize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; } .q-chresize:hover, .q-chresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); } /* Takas modunda kanal kolonu SOLDA → tutamaç da karşı kenara geçer (sağ kenar). */ html.q-sideswap .q-main.q-srv .q-chresize { left: auto; right: -3px; } /* #3 (2026-07-26): SUNUCUDAYKEN soldaki kalıcı DM/arkadaş rayı — genişletilebilir (goglisDmResize .q-dmresize'ı sürükler, genişlik localStorage'da). Masaüstü-özel: ≤1180px'te GİZLİ (dar ekranda sohbet nefesi korunur; DM'e logo→ev ile ulaşılır). Mobilde zaten .q-online drawer'ı DM'i taşır. */ .q-dmrail { width: var(--q-dmrail-w, 216px); background: var(--q-side-bg); flex: none; border-right: 1px solid var(--q-border); position: relative; display: flex; flex-direction: column; overflow: hidden; transition: width .18s var(--q-ease); /* #12: width animasyonu yerleşim hesaplatır (pahalı) — süre kısaltıldı */ } .q-dmrail-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; } .q-dmresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; } .q-dmresize:hover, .q-dmresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); } /* MENÜ/DİYALOG AÇIKKEN KOLON TUTAMAÇLARI ÖLÜ (2026-08-18, kullanıcı: "ses ayarlarını açmışken soldaki kolonu genişletme çizgisine dokunuyormuş gibi oluyor, ne sağda ne solda olmalı"). Tutamaçlar z-index 6 ile menülerin (1200+) ALTINDA kalıyor ama yine de imleç hedefi olabiliyorlar: menü panelleri position:fixed ve arayüz ölçeği (goglisScale → kök zoom) 1 değilken tarayıcının vuruş testi ile boyanan yer ayrışıyor (bu dosyada bilinen tuzak). Sonuç: fare menünün üstündeyken alttaki tutamaç vurgulanıp "Sürükleyerek genişlet/daralt" ipucunu gösteriyordu. Ölçek matematiğiyle uğraşmak yerine kural basit: menü açıkken tutamaç imleç almaz — vurgu da ipucu da sürükleme de mümkün olmaz. Dört tutamaç da (kanal, üye, amfi, DM) aynı kurala girer. */ html.q-menuopen :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize), html:has(.q-menu-backdrop) :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize), html:has(.mud-overlay) :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize) { pointer-events: none; background: transparent !important; /* açılmadan önce kalmış vurgu da sönsün */ } /* (2026-07-26: DM rayı hover shimmer'ı KALDIRILDI — "fazla shimmer koyduk" (kullanıcı). Yumuşak daral/genişle kalır.) */ @media (prefers-reduced-motion: reduce) { .q-dmrail { transition: none; } } @media (max-width: 1180px) { .q-dmrail { display: none; } } /* #3 (2026-07-26): DARALT/GENİŞLET butonu — panelin ALT kısmında, ince ayraçlı; ‹ (genişken) / › (darken). */ .q-dmrail-toggle { flex: none; height: 34px; display: flex; align-items: center; justify-content: center; margin: 4px 8px 8px; border: 1px solid var(--q-border); border-radius: 9px; background: transparent; color: var(--q-muted); cursor: pointer; transition: background var(--q-dur) var(--q-ease), color var(--q-dur) var(--q-ease); } .q-dmrail-toggle:hover { background: var(--q-hover); color: var(--q-strong); } .q-dmrail-toggle .mud-icon-root { font-size: 20px; } .q-dmc-r { display: none; } /* DARALMIŞ RAY (body.q-dmrail-min): 64px + yalnız ikonlar (isim/başlık/eylemler gizli). */ body.q-dmrail-min .q-dmrail { width: 64px !important; } body.q-dmrail-min .q-dmrail .q-dmresize { display: none; } body.q-dmrail-min .q-dmrail .q-dm-cat, body.q-dmrail-min .q-dmrail .q-fb-label, body.q-dmrail-min .q-dmrail .q-dmrow-name, body.q-dmrail-min .q-dmrail .q-friends-badge, body.q-dmrail-min .q-dmrail .q-dmpin, body.q-dmrail-min .q-dmrail .q-dmclose, body.q-dmrail-min .q-dmrail .q-dmrow-nf, body.q-dmrail-min .q-dmrail .q-dm-empty { display: none !important; } /* !important: .q-dm-cat inline style="display:flex" ezilecek */ body.q-dmrail-min .q-dmrail .q-friends-btn { justify-content: center; padding: 8px 0; } body.q-dmrail-min .q-dmrail .q-dmrow { position: relative; justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* #(2026-07-30, kullanıcı bug'ı: "badge varken kayıyor") DARALMIŞ RAYDA rozet avatarın YANINDA yer kaplıyordu → avatar sola kayıp sütun hizası bozuluyordu. Artık çevrimiçi noktası gibi avatarın SAĞ ÜST KÖŞESİNE biner (akıştan çıkar), avatar tam ortada kalır. Ray 64px, avatar 30px, iç dolgu 6px → avatarın sağ kenarı ≈ %50 + 15px. */ body.q-dmrail-min .q-dmrail .q-dmrow .q-dm-count, body.q-dmrail-min .q-dmrail .q-dmrow .q-unread { position: absolute; top: 2px; right: calc(50% - 21px); margin: 0; z-index: 1; box-shadow: 0 0 0 2px var(--q-rail-bg); } body.q-dmrail-min .q-dmrail .q-dmrow .q-dm-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; border-radius: 8px; } body.q-dmrail-min .q-dmrail-scroll { padding: 10px 6px; } body.q-dmrail-min .q-dmc-l { display: none; } body.q-dmrail-min .q-dmc-r { display: inline-flex; } .q-center { flex: 1; display: flex; min-width: 0; background: var(--q-chat-bg); } .q-cat { font-size: 11px; color: var(--q-faint); margin: 14px 8px 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; } .q-member { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; color: var(--q-text); border-radius: 7px; cursor: pointer; } .q-member:hover { background: var(--q-hover); } /* #1: sunucu/klasör sekmesinde okunmamış noktası */ .q-tab-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--q-accent); margin-left: 2px; flex: none; box-shadow: 0 0 0 2px var(--q-panel-bg); } /* #13 (2026-07-25): sekmede "bu sunucuda sesteyim" yeşil ses ikonu */ .q-tab-voice { display: inline-flex; align-items: center; color: var(--q-online, #23a55a); margin-left: 3px; flex: none; } /* SESSIZ/BEKLEYEN ARAMA: hoparlor YANIP SONER (2026-08-12). Normal aramada sabit yesil yanar; burada "seni bekleyen bir arama var" demek istiyoruz. Yalnizca OPAKLIK animasyonlanir — konum/boyut degismez, cunku bu isaret listede baska satirlari kaydirmamali. */ @keyframes q-ring-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .q-tab-voice.ringing { animation: q-ring-blink 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .q-tab-voice.ringing { animation: none; opacity: .7; } } /* DAR RAYDA SES ROZETI AVATARIN USTUNE (2026-08-12, kullanici: "aramadayken arama ikonu profilin ustunde olsun"). Genis rayda isimden sonra akar; dar rayda isim gizli oldugu icin rozet avatarin YANINA itiliyor ve satiri tasiriyordu. Satir zaten position:relative. */ body.q-dmrail-min .q-dmrail .q-tab-voice { position: absolute; right: 3px; bottom: 3px; margin: 0; background: var(--q-side-bg); border-radius: 50%; box-shadow: 0 0 0 2px var(--q-side-bg); /* avatardan ayrilsin */ } /* #3: üye-listesi gruplama anahtarı başlığı */ .q-online-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--q-faint); } /* Basliktaki + menusunun paneli basligin tipografi mirasini (11px uppercase) almasin — diger menulerle ayni gorunum (2026-08-14, Amfi + menusu). */ .q-online-head .q-menu-panel, .q-cat .q-menu-panel { text-transform: none; letter-spacing: normal; font-size: 13.5px; font-weight: 500; color: var(--q-text); } .q-sort-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--q-muted); cursor: pointer; } .q-sort-toggle:hover { background: var(--q-hover); color: var(--q-text); } .q-member.off { opacity: 0.4; } /* Steam canlı oyun aktivitesi — üye satırında isim altı ince satır */ .q-member-act { display: block; font-size: 11px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* B: oyun üstü overlay (/overlay — masaüstü kabuk şeffaf pencerede açar) */ html:has(.q-ov-root), body:has(.q-ov-root) { background: transparent !important; } /* Tam-ekran ŞEFFAF overlay (kabuk WinUI DWM-cam ile pencereyi saydam yapar). Zemin şeffaf — yalnız kişi çipleri (kendi koyu zeminleri var) + kısayol ipucu görünür, oyun altta akar. */ .q-ov-root { position: fixed; inset: 0; background: transparent; pointer-events: none; -webkit-user-select: none; user-select: none; } /* Overlay öğeleri BAĞIMSIZ konumlanır (saat / ses paneli / kısayol ipucu) — JS localStorage'dan 9-konum sınıfını (pos-*) veya display:none uygular; ayarlardan konumlandırılıp kapatılabilir. */ .q-ov-clock, .q-ov-voice { position: fixed; pointer-events: none; } .q-ov-voice { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 240px; } .q-ov-voice.pos-tc, .q-ov-voice.pos-c, .q-ov-voice.pos-bc { align-items: center; } .q-ov-voice.pos-tr, .q-ov-voice.pos-mr, .q-ov-voice.pos-br { align-items: flex-end; } .q-ov-clock { font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.75); background: rgba(0,0,0,.36); padding: 4px 14px; border-radius: 12px; backdrop-filter: blur(4px); letter-spacing: 1px; line-height: 1.15; white-space: nowrap; } /* 9 konum (kenar payı 16px; orta hizalar transform ile) */ .q-ov-root .pos-tl { top: 16px; left: 16px; } .q-ov-root .pos-tc { top: 16px; left: 50%; transform: translateX(-50%); } .q-ov-root .pos-tr { top: 16px; right: 16px; } .q-ov-root .pos-ml { top: 50%; left: 16px; transform: translateY(-50%); } .q-ov-root .pos-c { top: 50%; left: 50%; transform: translate(-50%, -50%); } .q-ov-root .pos-mr { top: 50%; right: 16px; transform: translateY(-50%); } .q-ov-root .pos-bl { bottom: 16px; left: 16px; } .q-ov-root .pos-bc { bottom: 16px; left: 50%; transform: translateX(-50%); } .q-ov-root .pos-br { bottom: 16px; right: 16px; } /* #4: overlay kısayol ipucu — sağ üstte, hafif, tıklama-geçirgen (görünürlüğü JS ayardan) */ .q-ov-hint { position: fixed; top: 8px; right: 10px; font-size: 11px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.42); padding: 3px 9px; border-radius: 20px; pointer-events: none; backdrop-filter: blur(3px); } /* Ayarlar → Overlay: 3x3 konum seçici ızgarası */ .q-ov-posgrid { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; margin: 8px 0 6px; } .q-ov-poscell { width: 34px; height: 30px; border-radius: 7px; border: 1px solid rgba(128,128,128,.35); background: var(--q-input-bg); color: var(--q-muted); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .q-ov-poscell:hover { color: var(--q-text); } .q-ov-poscell.on { background: var(--q-accent, #A9744C); color: #fff; border-color: transparent; } /* PiP CSS'i KALDIRILDI (2026-07-29): Android resim-içinde-resim özelliği kullanıcı testinde başarısız oldu, istek üzerine tamamen kaldırıldı (panel + JS modülü + MAUI zinciri dahil). */ .q-ov-user { display: flex; align-items: center; gap: 8px; background: rgba(20,18,24,.72); backdrop-filter: blur(6px); border-radius: 20px; padding: 4px 12px 4px 4px; box-shadow: 0 2px 8px rgba(0,0,0,.35); max-width: 220px; } .q-ov-user.speaking { box-shadow: 0 0 0 2px #23c552, 0 2px 8px rgba(0,0,0,.35); } .q-ov-av { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; } .q-ov-badge { position: absolute; right: -3px; bottom: -3px; font-size: 10px; line-height: 1; background: rgba(20,18,24,.9); border-radius: 50%; padding: 1px; } .q-ov-name { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); } /* D7b: seviye rozeti (üye listesi + profil) + XP çubuğu */ .q-lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--q-accent), var(--q-accent-2, #C08A5C)); box-shadow: 0 1px 3px rgba(0,0,0,.18); letter-spacing: .2px; } .q-lvl::before { content: "Lv"; font-size: 8px; font-weight: 700; opacity: .8; margin-right: 2px; } /* (2026-08-05) Profil kartı seviye rozeti: hap yerine yumuşak dikdörtgen + tema "waxed" motifiyle uyumlu üst parıltı — sticker gibi duran eski görünümün cilası. */ .q-lvl-lg { min-width: 34px; height: 24px; font-size: 13px; border-radius: 7px; padding: 0 7px; box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28); } .q-lvl-lg::before { font-size: 9px; } .q-lvl-row { display: flex; align-items: center; gap: 9px; } /* (2026-08-05) Çubuk KENARLIKSIZ: kenarlı hali boş input gibi okunuyordu. Zemin, ray/kart fark etmeksizin görünen karışım — diyalog rayının zemini --q-input-bg olduğu için eski `background: var(--q-input-bg)` çubuğu ORADA GÖRÜNMEZ yapıyordu (ekran görüntüsüyle geldi). */ .q-xpbar { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--q-strong) 11%, transparent); overflow: hidden; } .q-xpbar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--q-accent), var(--q-accent-2, #C08A5C)); transition: width .4s ease; } .q-xp-num { font-size: 11px; color: var(--q-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Seviye bölümü başlık satırı: etiket solda, XP sayısı sağda — çubuk alt satırda tam genişlik. */ .q-lvlsec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .q-lvlsec-h .q-pcard2-h { margin-bottom: 0; } .q-lvlsec .q-lvl-row { margin-top: 7px; } /* #18: küresel seviye rozeti — altın degrade (sunucu seviyesinden ayırt) + XP yardım tooltip'i */ .q-lvl-global { background: linear-gradient(135deg, #E6B450, #C8912E); } .q-lvl-global::before { content: "Lv"; } /* (2026-08-05) "?" sadeleşti: kenarlıklı kabarcık başlığın yanında gürültüydü. */ .q-xp-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--q-strong) 10%, transparent); color: var(--q-muted); font-size: 9.5px; font-weight: 700; cursor: help; vertical-align: middle; margin-left: 3px; } /* ---- channels ---- */ .q-chlist { flex: 1; padding: 6px 8px; overflow-y: auto; } .q-chrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--q-muted); font-size: 14px; cursor: pointer; } .q-chrow:hover { background: var(--q-hover); color: var(--q-text); } .q-chrow.sel { background: var(--q-selected); color: var(--q-strong); } .q-voiceusers { padding: 2px 0 4px 26px; display: flex; flex-direction: column; gap: 2px; } .q-vuser { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--q-muted); white-space: nowrap; padding: 3px 6px; border-radius: 6px; cursor: pointer; } .q-vuser:hover { background: var(--q-hover); color: var(--q-text); } .q-vuav { width: 22px; height: 22px; font-size: 9px; border: 2px solid transparent; } img.q-vuav { object-fit: cover; } /* profil fotoğrafı kare kırpılır (baş harf yerine gerçek avatar) */ /* #33/#2 konuşma dalgası: yeşil halka + nabız animasyonu (konuşurken belli olsun) */ .q-vuav.speaking { border-color: var(--q-online); animation: q-speak-pulse 1.1s ease-out infinite; } .q-speakring { border: 2px solid var(--q-online); animation: q-speak-pulse 1.1s ease-out infinite; } @keyframes q-speak-pulse { 0% { box-shadow: 0 0 0 0 rgba(35,165,90,0.55); } 70% { box-shadow: 0 0 0 5px rgba(35,165,90,0); } 100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); } } /* dock'ta kendi konuşma göstergesi (canlı ses barları) */ .q-voicedock.speaking .q-voicedock-on { color: var(--q-online); } .q-speakbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; } .q-speakbars i { width: 3px; background: var(--q-online); border-radius: 1px; height: 30%; animation: q-speakbar 0.7s ease-in-out infinite; } .q-speakbars i:nth-child(2) { animation-delay: 0.15s; } .q-speakbars i:nth-child(3) { animation-delay: 0.3s; } @keyframes q-speakbar { 0%,100% { height: 25%; } 50% { height: 100%; } } /* #8 (2026-07-25): konuşurken ses çubukları YERİNE Goglis salyangozu zıplayıp sallanır (tatlı). */ /* #5: konuşurken kabuk "yükleniyor" ekranındaki gibi KENDİNİ ÇİZER (eski wobble yerine — kullanıcı isteği). SnailLogo halka yarıçapları (r=8.2 → çevre 51.5, r=4.6 → 28.9) preloader gp-draw'larıyla birebir uyar → aynı keyframe'ler yeniden kullanılır. circle sırası: 1 disk · 2 dış halka · 3 iç halka · 4 merkez nokta. */ .q-speaksnail { display: inline-flex; align-items: center; justify-content: center; } .q-speaksnail svg circle:nth-of-type(2) { stroke-dasharray: 51.5; } .q-speaksnail svg circle:nth-of-type(3) { stroke-dasharray: 28.9; } /* animasyon YALNIZ konuşurken (.on); sessizken salyangoz SABİT durur (kütük gibi ikon değişimi yerine — daha tatlı). */ .q-speaksnail.on { animation: q-snailbob 2s ease-in-out infinite; } .q-speaksnail.on svg circle:nth-of-type(2) { animation: gp-draw1 1.6s ease-in-out infinite; } .q-speaksnail.on svg circle:nth-of-type(3) { animation: gp-draw2 1.6s ease-in-out infinite; } @keyframes q-snailbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .q-speaksnail.on, .q-speaksnail.on svg circle { animation: none !important; } } /* ---- ses dock'u (#34): kanallar kolonunun altında mic/deafen/çık ---- */ /* İki satırlı dock: üstte durum+ping, altta 5 buton (tek satıra sığmıyordu) */ .q-voicedock { display: flex; flex-direction: column; gap: 7px; padding: 8px 10px; background: var(--q-glass-strong); border-top: 1px solid var(--q-glass-border); flex: none; } .q-voicedock-top { display: flex; align-items: center; gap: 8px; min-width: 0; } .q-voicedock-btns { display: flex; gap: 6px; justify-content: space-between; } .q-voicedock-btns .q-vctl.sm { flex: 1; border-radius: 10px; } /* #4: dock cihaz-değiştir caret'i — mic/hoparlör/kamera butonunun köşesinde küçük "^", cihaz menüsü açar. */ .q-voicedock-btns .q-vctl-wrap { flex: 1; position: relative; display: flex; } .q-vctl-wrap > .q-vctl.sm { flex: 1; } .q-vctl-wrap > .q-menu { position: absolute; top: -4px; right: -4px; z-index: 4; } .q-vctl-caret { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--q-side-bg); border: 1px solid var(--q-divider); color: var(--q-strong); cursor: pointer; box-shadow: var(--q-elev-1); } .q-vctl-caret:hover { color: var(--q-accent); border-color: var(--q-accent); } .q-devmenu { min-width: 210px; max-width: 300px; padding: 6px; } .q-devmenu-title { font-size: 11px; font-weight: 700; color: var(--q-muted); text-transform: uppercase; padding: 4px 8px 6px; } .q-devmenu-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border: 0; background: none; color: var(--q-text); font-size: 13px; text-align: left; cursor: pointer; border-radius: 7px; } .q-devmenu-item:hover { background: color-mix(in srgb, currentColor 12%, transparent); } .q-devmenu-item.on { color: var(--q-accent); font-weight: 600; } /* #8-A birlikte izle partisi kartı (composer) — LFG kartı deseniyle uyumlu */ .q-watchcard { background: var(--q-panel-bg); border-radius: 12px; padding: 12px 14px; max-width: 480px; box-shadow: var(--q-elev-1); } .q-watchcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .q-watchcard-title { font-weight: 600; color: var(--q-strong); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-watchcard-sub { font-size: 12px; color: var(--q-muted); } .q-watchcard-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; cursor: pointer; background: #000; } .q-watchcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .q-watchcard-player { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; } .q-watchcard-player > div { width: 100%; height: 100%; } .q-watchcard-members { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; } .q-watchcard-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .q-watchcard-hosttag { font-size: 12px; color: var(--q-accent); font-weight: 600; } /* #17 DM başlığı arkadaş belirteci — arkadaş / istek gönderildi / arkadaş ekle */ .q-dmfriend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--q-divider); color: var(--q-muted); background: none; white-space: nowrap; flex: none; } .q-dmfriend.on { color: var(--q-online); border-color: color-mix(in srgb, var(--q-online) 40%, transparent); } .q-dmfriend.add { cursor: pointer; color: var(--q-accent); border-color: color-mix(in srgb, var(--q-accent) 40%, transparent); } .q-dmfriend.add:hover { background: color-mix(in srgb, var(--q-accent) 12%, transparent); } /* #18 arkadaş bul — sonuç satırı etiketi + arama ipucu */ .q-friend-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--q-muted); padding: 4px 10px; white-space: nowrap; } .q-friends-searchhint { color: var(--q-muted); font-size: 13px; padding: 14px 2px; } .q-voicedock-on { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--q-online); } .q-voicedock-ch { font-size: 11px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #1 (2026-07-21): seste geçen KİŞİSEL süre — içeriği goglisTimers (saf JS) yazar. q-voicedock-top satırında ping rozetinin solunda, ikisi aynı hizada (flex align-center). */ .q-vtime-wrap { position: relative; margin-left: auto; cursor: default; display: inline-flex; align-items: center; } .q-vtime { font-size: 11px; font-weight: 600; color: var(--q-online); font-variant-numeric: tabular-nums; } .q-vtime:empty::before { content: "0:00"; opacity: .55; } .q-tipbub { position: absolute; bottom: calc(100% + 7px); right: -4px; background: var(--q-input-bg, #26221f); color: var(--q-strong); font-size: 11.5px; font-weight: 500; line-height: 1.35; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--q-border, rgba(128,128,128,.25)); white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; z-index: 60; } .q-vtime-wrap:hover .q-tipbub { opacity: 1; transform: none; } /* #2: oyun aktivitesinde geçen süre — "🎮 X oynuyor" yanındaki canlı sayaç (JS doldurur). margin-left: markup boşluğuna güvenme — Blazor inline boşluğunu yutabiliyor (alt panelde yaşandı) */ .q-actdur { font-variant-numeric: tabular-nums; opacity: .8; font-size: .93em; margin-left: 3px; } .q-actdur:empty { display: none; } .q-vctl.sm { width: 32px; height: 32px; flex: none; } .q-userpanel { height: 52px; background: var(--q-panel-bg); display: flex; align-items: center; gap: 8px; padding: 0 10px; flex: none; cursor: default; user-select: none; } .q-userpanel .q-dot { border-color: var(--q-panel-bg); } /* Alt panel hızlı ses ayarları ⚙ butonu + popup */ .q-userpanel-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: var(--q-muted); cursor: pointer; flex: none; } .q-userpanel-btn:hover { background: var(--q-hover); color: var(--q-text); } .q-vqs { width: 264px; padding: 10px; } .q-vqs-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--q-faint); padding: 2px 4px 8px; } .q-vqs-field { margin-bottom: 12px; } .q-vqs-field > label { display: block; font-size: 11px; font-weight: 600; color: var(--q-muted); margin-bottom: 5px; } .q-vqs-meterwrap { display: flex; align-items: center; gap: 8px; } .q-vqs-testbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; border: 1px solid var(--q-divider); border-radius: 7px; background: var(--q-input-bg); color: var(--q-muted); cursor: pointer; flex: none; } .q-vqs-testbtn.on { border-color: var(--q-accent); color: var(--q-accent); } .q-vqs-slider { width: 100%; accent-color: var(--q-accent); cursor: pointer; } .q-vqs-full { display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px; font-size: 13px; color: var(--q-text); cursor: pointer; border-radius: 7px; } .q-vqs-full:hover { background: var(--q-hover); color: var(--q-strong); } /* ---- chat ---- */ .q-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } .q-chathead { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 0.5px solid var(--q-divider); flex: none; color: var(--q-muted); } .q-chtitle { font-size: 15px; font-weight: 500; color: var(--q-strong); } .q-chtopic { font-size: 12px; color: var(--q-muted); border-left: 1px solid var(--q-divider); padding-left: 10px; } .q-spacer { flex: 1; } .q-messages { flex: 1; padding: 10px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; } /* GAP DEGIL MARGIN (2026-08-13, gruplama): flex gap HER cocugun arasina girer ve satir bazinda kapatilamaz — grup ici bitisiklik icin bosluk grup BASININ margin'ine tasindi (eski gap'le ayni 14px: gruplar arasi gorunum degismedi, yalniz ayni yazarin pes pese satirlari bitisti). */ .q-msg { display: flex; gap: 12px; } /* DISCORD-VARI GRUPLAMA (2026-08-13): grup BASI ustten nefes alir, devam satirlari (.cont) sikisik. Gutter avatar genisligini korur ki metinler alt alta hizali kalsin; icindeki mini saat yalniz satir hover'inda belirir (Discord davranisi). */ .q-msg:not(.cont) { margin-top: 14px; } .q-msg.cont { margin-top: 0; } /* grup ICI satirlar Discord kadar bitisik: metin marji sifir (kullanici: "boyle boslugu fazla") */ .q-msg.cont .q-msg-text { margin-top: 0; } .q-msg-gut { flex: none; width: 38px; display: flex; justify-content: flex-end; padding-top: 3px; } .q-msg-gut time { font-size: 10px; color: var(--q-faint); opacity: 0; white-space: nowrap; } .q-msg.cont:hover .q-msg-gut time { opacity: 1; } body.msg-compact .q-msg:not(.cont) { margin-top: 6px; } /* kompakt avatar 20px — saat sigmaz, gutter dar kalir, saat gizli */ body.msg-compact .q-msg-gut { width: 20px; } body.msg-compact .q-msg-gut time { display: none; } /* WhatsApp-vari gün ayracı: ortada hap etiket, iki yanda ince çizgi (tema değişkenli). */ .q-day-sep { display: flex; align-items: center; gap: 10px; margin: 14px 10px 6px; color: var(--q-muted); } /* --q-border her temada tanımlı değil → currentColor + düşük opaklık her temada görünür ince çizgi verir. */ .q-day-sep::before, .q-day-sep::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .22; } .q-day-sep span { font-size: 11.5px; font-weight: 600; color: var(--q-muted); background: var(--q-input-bg); padding: 3px 11px; border-radius: 999px; white-space: nowrap; } .q-msg-body { min-width: 0; } .q-msg-head { display: flex; align-items: baseline; gap: 8px; } .q-msg-name { font-size: 15px; font-weight: 500; color: var(--q-strong); } .q-clickav { cursor: pointer; } .q-clickname { cursor: pointer; } .q-clickname:hover { text-decoration: underline; } .q-msg-time { font-size: 11px; color: var(--q-faint); } .q-msg-text { font-size: 14px; line-height: 1.5; margin-top: 2px; color: var(--q-text); } .q-msg-text strong { color: var(--q-strong); font-weight: 500; } .q-code { background: var(--q-code-bg); color: var(--q-code-text); padding: 1px 5px; border-radius: 4px; font-family: 'Space Mono', monospace; font-size: 12px; } .q-codeblock { background: var(--q-code-bg); border: 0.5px solid var(--q-divider); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--q-text); white-space: pre-wrap; } .q-reactions { display: flex; gap: 6px; margin-top: 6px; } .q-react { display: flex; align-items: center; gap: 4px; background: var(--q-side-bg); border: 0.5px solid var(--q-divider); border-radius: 10px; padding: 1px 8px; font-size: 12px; color: var(--q-text); cursor: pointer; } .q-react.on { border-color: var(--q-accent); } /* #17: "yazıyor…" göstergesi — yumuşak pill + zıplayan noktalar */ /* Yatay konum COMPOSER ile aynı (2026-08-08, kullanıcı bildirdi): .q-composer'ın margin'i `6px 16px 14px`, buranınki ise `padding: 0 2px`'ti → "yazıyor…" satırı mesaj kutusunun 14px SOLUNDAN başlıyor, hizasız duruyordu. Aynı 16px verilir; değişirse ikisi birlikte değişmeli. */ .q-typing { display: flex; align-items: center; gap: 7px; height: 22px; font-size: 12px; color: var(--q-muted); margin: 0 16px; padding: 0; opacity: 0; transition: opacity .15s; cursor: default; } .q-typing.on { opacity: 1; } .q-typing-dots { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 999px; background: var(--q-hover); } .q-typing .d { width: 5px; height: 5px; border-radius: 50%; background: var(--q-muted); display: inline-block; animation: q-typing-bounce 1.3s infinite ease-in-out; } .q-typing .d:nth-child(2) { animation-delay: .18s; } .q-typing .d:nth-child(3) { animation-delay: .36s; } @keyframes q-typing-bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-4px); opacity: 1; } } .q-composer { margin: 6px 16px 14px; background: var(--q-input-bg); border-radius: 10px; display: flex; align-items: flex-end; padding: 7px 12px; min-height: 46px; gap: 10px; flex: none; color: var(--q-muted); box-sizing: border-box; } /* Çok satırlı composer: kap textarea ile büyür; ikonlar/butonlar alt kenara hizalı kalır. */ /* (2026-07-30, kullanici: "padding-top fazla, tam ortalanmali") Composer TEK SATIRDA tam simetrikti degildi: yukseklik en uzun cocuktan (34px gonder butonu) geliyor, metin kutusu ise flex-end ile dibe yapisiyordu -> ustte ~7px fazla bosluk. Artik tum cocuklar metin satiriyla AYNI yukseklikte (30px) ve 3px'lik alt-bosluk hilesi kalkti; kutu 30 + 2x7 dolgu + 2x1 kenarlik = 46px, yazi tam ortada. Cok satirda flex-end yine dogru is gorur (ikonlar altta kalir). */ .q-composer > :not(.q-msgbox):not(.q-msgwrap) { margin-bottom: 0; } .q-composer > .q-attach, .q-composer > .q-composer-tools, .q-composer > .q-send-btn, .q-composer > .mud-icon-root { height: 30px; } .q-composer > .q-send-btn { width: 30px; } .q-composer > .q-attach, .q-composer > .q-composer-tools { display: inline-flex; align-items: center; } .q-composer-input { flex: 1; color: var(--q-faint); font-size: 14px; } /* ---- login ---- */ /* Süslü zemin (2026-07-22): derin kahve-gece degrade + aurora küreleri + yıldız tozu + ince ızgara. Tümü saf CSS (statik SSR) — animasyonlar yalnız transform/opacity, reduced-motion'da durur. */ .q-login-bg { position: relative; overflow: hidden; min-height: calc(100vh / var(--q-zoom, 1)); min-height: calc(100dvh / var(--q-zoom, 1)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--q-accent, #33a8f2) 22%, transparent), transparent 60%), radial-gradient(900px 560px at 108% 14%, rgba(126,151,172,0.16), transparent 62%), radial-gradient(1000px 700px at 50% 118%, rgba(138,90,56,0.20), transparent 64%), linear-gradient(160deg, #17181c 0%, #101114 52%, #15130f 100%); font-family: 'Goglis Sans', system-ui, sans-serif; } .q-login-fx { position: absolute; inset: 0; pointer-events: none; } .q-login-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; } .q-login-orb.o1 { width: 460px; height: 460px; left: -140px; top: -120px; background: radial-gradient(circle at 35% 35%, var(--q-accent, #33a8f2), transparent 70%); animation: q-orb-a 24s ease-in-out infinite; } .q-login-orb.o2 { width: 380px; height: 380px; right: -110px; top: 16%; background: radial-gradient(circle at 40% 40%, var(--q-logo-hi, #6FE6FF), transparent 70%); opacity: .34; animation: q-orb-b 30s ease-in-out infinite; } .q-login-orb.o3 { width: 520px; height: 520px; left: 32%; bottom: -240px; background: radial-gradient(circle at 45% 35%, var(--q-accent-2, #1c72bd), transparent 70%); opacity: .42; animation: q-orb-c 27s ease-in-out infinite; } /* Yıldız tozu: iki katman minik nokta (parallax hissi için farklı yoğunluk), çok düşük parlaklık. */ .q-login-stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1.3px 1.3px at 22px 34px, rgba(255,255,255,.55), transparent 55%), radial-gradient(1px 1px at 128px 92px, rgba(255,235,214,.4), transparent 55%), radial-gradient(1.6px 1.6px at 214px 156px, rgba(255,255,255,.35), transparent 55%), radial-gradient(1px 1px at 300px 58px, rgba(255,255,255,.3), transparent 55%), radial-gradient(1.2px 1.2px at 82px 208px, rgba(255,224,196,.35), transparent 55%), radial-gradient(1px 1px at 258px 250px, rgba(255,255,255,.28), transparent 55%); background-size: 340px 300px; animation: q-stars 90s linear infinite; } /* İnce teknik ızgara — zemine derinlik verir, neredeyse görünmez. */ .q-login-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 25%, transparent 78%); } @keyframes q-orb-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 44px) scale(1.12); } } @keyframes q-orb-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-56px, 60px) scale(0.92); } } @keyframes q-orb-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(48px, -52px) scale(1.08); } } @keyframes q-stars { from { background-position: 0 0; } to { background-position: -340px 300px; } } @media (prefers-reduced-motion: reduce) { .q-login-orb, .q-login-stars { animation: none; } } /* Kart: buzlu cam — zemin ışıltıları arkasından süzülür; üstte ince kahve vurgu çizgisi. */ .q-login-card { position: relative; z-index: 1; width: 360px; max-width: 100%; background: var(--q-glass-strong, rgba(34, 36, 41, 0.72)); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); padding: 34px 30px; text-align: center; box-sizing: border-box; box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); } .q-login-card::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, var(--q-logo-hi, #6FE6FF), transparent); } .q-login-logo { width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(135deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); color: #fff; font-size: 30px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .q-login-title { font-size: 26px; font-weight: 500; color: #f2f3f5; } .q-login-sub { font-size: 14px; color: #a7a9ad; margin-top: 8px; } /* #1 (2026-07-26): "Diğer seçenekler" chevron + katlanır ek-sağlayıcı bloğu (Google+Steam+Apple hep açık, kalanı ardında). Login STATİK → native onclick class'ı toggle eder; max-height geçişiyle yumuşak açılır. */ .q-login-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 14px; background: transparent; border: 0; color: #9a9ba3; font-size: 13px; font-weight: 500; padding: 6px; cursor: pointer; font-family: inherit; } .q-login-more:hover { color: #d8d9e0; } .q-login-more-chev { transition: transform .25s ease; } .q-login-more.open .q-login-more-chev { transform: rotate(180deg); } .q-login-morewrap { max-height: 0; overflow: hidden; transition: max-height .32s ease; } .q-login-morewrap.open { max-height: 340px; } /* #3: "Google şart değil" bilgi notu */ .q-login-any { font-size: 12px; color: #8a8b93; margin-top: 14px; line-height: 1.5; } /* Kayıt sayfasındaki sözleşme bağlantıları (gizlilik / çocuk güvenliği) düz metne benziyordu. */ .q-login-any a { color: var(--q-accent, #33a8f2); text-decoration: none; } .q-login-any a:hover { text-decoration: underline; } /* Web'den girene platform İNDİRME ikonları — kartın altında. Kabukta gizleme .q-shell sınıfıyla (App.razor head inline script'i basar; html Blazor yeniden render'ından etkilenmez — hidden attribute yaklaşımı circuit bağlanınca ikonları söndürüyordu). Hazır platformlar tıklayınca indirir; iOS/Android saf-CSS tooltip'te "Pek yakında" der (data-tip). */ .q-login-apps { position: relative; z-index: 1; display: flex; gap: 12px; margin-top: 24px; } html.q-shell .q-login-apps { display: none !important; } .q-app-ic { position: relative; width: 46px; height: 46px; border-radius: 14px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #cfd8e0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .12s; } .q-app-ic svg { width: 21px; height: 21px; } a.q-app-ic:hover, button.q-app-ic:hover { color: #fff; background: color-mix(in srgb, var(--q-accent, #33a8f2) 32%, transparent); border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 60%, transparent); transform: translateY(-2px); text-decoration: none; } .q-app-ic.off { opacity: .42; cursor: default; } .q-app-ic[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px); white-space: nowrap; background: rgba(24,22,26,.96); border: 1px solid rgba(255,255,255,.14); color: #efe9e4; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 3; } .q-app-ic[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Linux seçim balonu: ikona tıklayınca üstte AppImage/.deb menüsü (`.open` inline onclick toggle; dışarı/seçim tıklamasını goglis.js delegation'ı kapatır — Blazor re-render'ından bağımsız). */ .q-app-linux { position: relative; display: flex; } .q-app-linux.open .q-app-ic { color: #fff; background: color-mix(in srgb, var(--q-accent, #33a8f2) 32%, transparent); border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 60%, transparent); } .q-app-linux.open .q-app-ic::after { display: none; } /* açıkken hover tooltip'i sussun */ .q-app-pop { position: absolute; bottom: calc(100% + 11px); left: 50%; transform: translateX(-50%) translateY(5px); min-width: 196px; padding: 6px; border-radius: 13px; background: rgba(26,24,29,.97); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 36px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; z-index: 4; } .q-app-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: rgba(26,24,29,.97); border-bottom-width: 0; } .q-app-linux.open .q-app-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .q-app-pop a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background .12s; } .q-app-pop a:hover { background: color-mix(in srgb, var(--q-accent, #33a8f2) 24%, transparent); text-decoration: none; } .q-app-pop .t { display: block; font-size: 13px; font-weight: 700; color: #f0eae5; } .q-app-pop .s { display: block; font-size: 11px; color: #a89f98; margin-top: 1px; } /* Sign in with Apple — HIG: siyah zemin, beyaz metin */ /* margin-top 10px: Google primary değil — tüm giriş butonları EŞİT aralıkta (varsayılan 26px Google'la Apple arasını açıyordu, kullanıcı geri bildirimi 2026-07-22). */ .q-login-btn.apple { background: #000; color: #fff; border-color: #000; margin-top: 10px; } .q-login-btn.apple:hover { background: #1c1c1e; } /* Uygulama içi Welcome'daki indirme daveti — tema değişkenli (açık/koyu ikisinde de okunur). */ .q-welcome-dl { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--q-strong); text-decoration: none; background: color-mix(in srgb, var(--q-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--q-accent) 40%, transparent); transition: background .15s, transform .1s; } .q-welcome-dl:hover { background: color-mix(in srgb, var(--q-accent) 26%, transparent); transform: translateY(-1px); text-decoration: none; } .q-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 26px; height: 48px; background: #fff; color: #1a1b1e; border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: none; } .q-login-btn:hover { background: #f1f1f1; } /* ---- #1 (2026-07-29): e-posta/parola formu (login + kayıt + sıfırlama) ---- EmptyLayout'ta MudBlazor sağlayıcıları YOK (onlar MainLayout'ta) → alanlar elle yazıldı. Kart 360px olduğundan her şey tek sütun; renkler login kartının koyu paletine sabit (bu sayfalar tema değişkenlerinden bağımsız — girişten önce tema bilinmiyor). */ .q-auth-form { display: flex; flex-direction: column; gap: 13px; margin-top: 22px; text-align: left; } .q-auth-field { display: flex; flex-direction: column; gap: 6px; } .q-auth-field > label { font-size: 12px; font-weight: 600; color: #a7a9ad; letter-spacing: .2px; } .q-auth-input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 13px; background: rgba(0,0,0,.28); color: #f2f3f5; font-size: 14.5px; font-family: inherit; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: none; transition: border-color .15s, background .15s; } .q-auth-input::placeholder { color: #6e7077; } .q-auth-input:focus { border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 85%, transparent); background: rgba(0,0,0,.36); } /* Chrome otomatik doldurma beyaz zemin basıyordu — koyu kartta okunmaz oluyordu. */ .q-auth-input:-webkit-autofill, .q-auth-input:-webkit-autofill:focus { -webkit-text-fill-color: #f2f3f5; -webkit-box-shadow: 0 0 0 1000px #24262b inset; caret-color: #f2f3f5; } /* Parola alanı + göster/gizle gözü */ .q-auth-pwd { position: relative; display: flex; } .q-auth-pwd .q-auth-input { padding-right: 42px; } .q-auth-eye { position: absolute; right: 4px; top: 0; height: 44px; width: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: #8a8b93; } .q-auth-eye:hover { color: #d8d9e0; } .q-auth-eye .off { display: none; } .q-auth-eye.on .off { display: block; } .q-auth-eye.on .on { display: none; } .q-auth-hint { font-size: 11.5px; color: #7d7f87; } /* 13+ onayı — zorunlu (sunucu tarafında da doğrulanır) */ .q-auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #b8bac1; line-height: 1.45; cursor: pointer; } .q-auth-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--q-accent, #33a8f2); cursor: pointer; flex: none; } .q-auth-submit { width: 100%; height: 46px; margin-top: 4px; border: 0; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, var(--q-accent, #33a8f2), var(--q-accent-2, #1c72bd)); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; transition: filter .15s, transform .1s; } /* GONDERILIYOR DURUMU (2026-08-11, kullanici: "login ve register butonlarina bastiktan sonra loading statusuna girsin"). Canlida bir kullanici Kayit Ol'a hizlica iki kez basip ayni e-postayla iki hesap acti. Bu katman kullaniciya "bir sey oluyor" der ve ikinci dokunusu emer; ASIL guvence veritabanindaki kismi benzersiz indekstir. Buton `disabled` YAPILMAZ (devre disi submit'in degeri forma girmez) — tiklama JS'te yutulur, burada yalniz gorunum degisir. */ .q-auth-sending .q-auth-submit { pointer-events: none; color: transparent; /* etiket gizlenir, yerini donen halka alir */ position: relative; } .q-auth-sending .q-auth-submit::after { content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: q-auth-spin .7s linear infinite; } @keyframes q-auth-spin { to { transform: rotate(360deg); } } /* Animasyon kosmazsa (arka plan sekmesi / hareket azaltma) halka DURUR ama GORUNUR kalir — gorunurluk animasyona bagli degildir (bu repoda daha once yanan ders). */ @media (prefers-reduced-motion: reduce) { .q-auth-sending .q-auth-submit::after { animation: none; } } /* Gonderilirken alanlar da kilitlenir: kullanici yaziyi degistirip "gonderdigim bu muydu?" sorusuna dusmesin. */ .q-auth-sending .q-auth-input, .q-auth-sending .q-auth-eye { pointer-events: none; opacity: .7; } .q-auth-submit:hover { filter: brightness(1.08); } .q-auth-submit:active { transform: translateY(1px); } /* "ya da" ayracı — sağlayıcı butonlarıyla form arasında */ .q-auth-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 -8px; color: #74767d; font-size: 12px; } .q-auth-sep::before, .q-auth-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.11); } /* Alt bağlantı satırı (kayıt ol / parolamı unuttum) */ .q-auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; color: #8a8b93; flex-wrap: wrap; } .q-auth-links a, .q-auth-inline { color: var(--q-accent, #33a8f2); text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; font-size: inherit; font-family: inherit; cursor: pointer; } .q-auth-links a:hover, .q-auth-inline:hover { text-decoration: underline; } /* Bildirim şeritleri: hata kırmızı, başarı yeşil (login'deki #f0997b tonuyla uyumlu) */ .q-auth-msg { margin-top: 16px; font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; text-align: left; } .q-auth-msg.err { color: #f0997b; background: rgba(240,153,123,.1); border: 1px solid rgba(240,153,123,.25); } .q-auth-msg.ok { color: #86d99f; background: rgba(134,217,159,.1); border: 1px solid rgba(134,217,159,.25); } /* Şerit içindeki eylem (ör. "doğrulamayı tekrar gönder") tıklanabilir GÖRÜNMELİ — düz metne benziyordu; şeridin kendi rengini miras alıp altı çizili durur. */ .q-auth-msg form { display: block; margin-top: 8px; } .q-auth-msg .q-auth-inline { color: inherit; text-decoration: underline; font-weight: 600; } .q-auth-back { display: inline-block; margin-top: 18px; font-size: 13px; color: #8a8b93; text-decoration: none; } .q-auth-back:hover { color: #d8d9e0; } /* ---- #3: davet ONAY kartı (otomatik katılma yerine) ---- */ .q-invite-card { text-align: center; } .q-invite-server { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; } .q-invite-icon { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .q-invite-icon-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); color: #fff; font-size: 30px; font-weight: 700; } .q-invite-name { font-size: 22px; font-weight: 700; color: #fff; } .q-invite-stats { font-size: 13px; color: #a7a9ad; display: flex; align-items: center; gap: 6px; } .q-invite-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .q-invite-dot.online { background: #3ba55d; } .q-invite-sep { color: #6b6d71; } .q-invite-invited { margin-top: 16px; font-size: 15px; color: #d6d7db; line-height: 1.5; } .q-invite-invited b { color: #fff; } .q-login-btn.q-invite-accept { background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); color: #fff; border: 0; margin-top: 16px; } .q-login-btn.q-invite-accept:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); } .q-login-btn.q-invite-accept:disabled { opacity: 0.6; cursor: default; } .q-login-btn.q-invite-cancel { background: rgba(255,255,255,0.06); color: #c9cace; border: 0.5px solid rgba(255,255,255,0.12); } .q-login-btn.q-invite-cancel:hover { background: rgba(255,255,255,0.1); } /* ---- login alt linkleri: Gizlilik · Çocuk Güvenliği · Sürüm Notları ("Biz kimiz" kalktı 2026-07-22) ---- */ .q-login-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding-top: 12px; border-top: 0.5px solid rgba(255,255,255,0.08); font-size: 12px; } .q-login-links a, .q-login-links button { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; color: #a7a9ad; cursor: pointer; text-decoration: none; } .q-login-links a:hover, .q-login-links button:hover { color: var(--q-accent); text-decoration: underline; } .q-login-links span { color: #6b6d71; } /* Davet HAM LİNKİ mesaj gövdesinde gizli (kullanıcı isteği 2026-07-22): davet zaten Discord-vari KART olarak basılıyor ve Katıl butonu UYGULAMA İÇİNDE katıyor — ham linke tıklayan web'e/yeni pencereye düşüyordu (kabukta hiç açılmıyordu). Kart tek arayüz; eski mesajlar da düzelir. */ .q-md a[href*="/invite/"] { display: none; } /* Yasal sayfa iframe popup'ı — kabukta (WebView) yeni pencere açılamadığından uygulama içi gösterim */ .q-legal-pop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 14px; } .q-legal-box { position: relative; width: min(860px, 96vw); height: min(760px, 92vh); background: var(--q-side-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .q-legal-box iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--q-chat-bg); } .q-legal-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; z-index: 1; } .q-legal-x:hover { background: rgba(255,255,255,.25); } .q-about { margin: auto; border: 0; border-radius: 18px; padding: 0; background: transparent; width: 30rem; max-width: 92vw; } .q-about::backdrop { background: rgba(10, 11, 15, 0.72); backdrop-filter: blur(3px); } /* Tema takipli: uygulama içinde açık/koyu temaya uyar; login'de (tema class'ı yok) koyu fallback'ler geçerli. */ .q-about-in { position: relative; background: var(--q-side-bg, #2b2d31); border: 1px solid color-mix(in srgb, var(--q-accent) 40%, transparent); border-radius: 18px; padding: 24px 26px; color: var(--q-text, #e6e7ef); font-family: 'Goglis Sans', system-ui, sans-serif; max-height: calc(84vh / var(--q-zoom, 1)); overflow: auto; } /* Popup scrollbar'ı: tarayıcı varsayılanı kartın yuvarlak köşesinde kaba duruyordu — ince, marka-kahvesi tonunda ve raydan boşluklu (login'in statik SSR'ında da geçerli). */ .q-about-in { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--q-accent) 45%, transparent) transparent; } .q-about-in::-webkit-scrollbar { width: 8px; } .q-about-in::-webkit-scrollbar-track { background: transparent; margin: 16px 0; } .q-about-in::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--q-accent) 40%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .q-about-in::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--q-accent) 65%, transparent); background-clip: padding-box; } .q-about-in::-webkit-scrollbar-corner { background: transparent; } .q-about-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--q-faint, #80848e); font-size: 15px; cursor: pointer; } .q-about-x:hover { background: var(--q-hover, rgba(255,255,255,0.07)); color: var(--q-strong, #fff); } .q-about-head { display: flex; align-items: center; gap: 12px; } .q-about-logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .q-about-title { font-size: 19px; font-weight: 700; color: var(--q-strong, #f2f3f5); } .q-about-ver { font-size: 12.5px; color: var(--q-muted, #a7a9ad); margin-top: 2px; } .q-about-ver b { color: var(--q-accent, #C08A5C); } .q-about-log { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .q-about-rel { background: var(--q-hover, rgba(255,255,255,0.03)); border: 0.5px solid var(--q-divider, rgba(255,255,255,0.06)); border-radius: 11px; overflow: hidden; } .q-about-rel summary { display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer; font-size: 13.5px; color: var(--q-text, #e6e7ef); list-style: none; user-select: none; } .q-about-rel summary::-webkit-details-marker { display: none; } .q-about-rel summary::before { content: "▸"; color: var(--q-accent, #C08A5C); font-size: 12px; transition: transform 0.15s ease; } .q-about-rel[open] summary::before { transform: rotate(90deg); } .q-about-rel summary b { color: var(--q-accent, #C08A5C); } .q-about-reltitle { color: var(--q-text, #cfd1dc); } .q-about-relcount { margin-left: auto; background: color-mix(in srgb, var(--q-accent) 18%, transparent); color: var(--q-accent, #d8b294); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .q-about-rel ul { margin: 0; padding: 2px 16px 12px 34px; display: flex; flex-direction: column; gap: 5px; } .q-about-rel li { font-size: 12.5px; color: var(--q-muted, #b9bbcc); line-height: 1.55; } /* Uygulama içi MudDialog kabuğu: kendi beyaz yüzeyi/padding'i görünmesin — tek yüzey q-about-in (köşe taşması düzeltmesi) */ .q-about-host { background: transparent !important; box-shadow: none !important; overflow: visible !important; } .q-about-dlgc { padding: 0 !important; } /* ---- sunucu kurma isteği popup'ı (yetkisiz '+' akışı) ---- */ .q-srvreq { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 4px 2px; } .q-srvreq-badge { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(169,116,76,0.35); } .q-srvreq-title { font-size: 16.5px; font-weight: 700; color: var(--q-strong); } .q-srvreq-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; } .q-srvreq-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--q-strong); } .q-srvreq-ico { font-size: 17px !important; color: var(--q-accent); flex: none; margin-top: 2px; } .q-srvreq-pending { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--q-amber, #d8a03c); background: rgba(216,160,60,0.12); padding: 7px 12px; border-radius: 10px; } .q-srvreq-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #3ad17e; background: rgba(35,165,90,0.12); padding: 10px 14px; border-radius: 11px; line-height: 1.5; } /* Responsive login (dar ekran/telefon): kart daralır, popup içi sıkılaşır, damga alta sarabilir. */ @media (max-width: 430px) { .q-login-bg { padding: 14px; } .q-login-card { padding: 26px 18px; border-radius: 14px; } .q-login-logo { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 14px; } .q-login-title { font-size: 22px; } .q-login-btn { height: 44px; font-size: 14px; } .q-about-in { padding: 18px 16px; } .q-about-logo { width: 40px; height: 40px; border-radius: 12px; } .q-about-title { font-size: 17px; } } /* Alçak pencereler (yatay telefon): dikey boşlukları kıs. */ @media (max-height: 560px) { .q-login-card { padding: 18px 22px; } .q-login-logo { width: 44px; height: 44px; margin-bottom: 8px; } .q-login-btn { margin-top: 14px; height: 42px; } } /* ---- empty / placeholder ---- */ .q-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .q-empty-title { font-size: 18px; font-weight: 500; color: var(--q-strong); } .q-empty-sub { font-size: 13px; color: var(--q-muted); line-height: 1.7; } /* GOGLIS DUVAR KÂĞIDI (2026-07-31): ev ekranının boş orta alanı. Kap position:relative olur, SVG mutlak katman olarak arkaya serilir; içerik z-index ile üstte kalır. Renk currentColor'dan gelir → temaya kendiliğinden uyar. Opaklıklar bilerek ÇOK düşük: desen "farkedilir" değil "sezilir" olmalı, metin okunurluğunu bozmamalı. */ .q-empty-wall { position: relative; overflow: hidden; } .q-empty-wall > *:not(.q-wall) { position: relative; z-index: 1; } .q-wall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--q-strong); } .q-wall-big { opacity: .055; } .q-wall-small { opacity: .085; } /* Açık temalarda aynı opaklık daha soluk kalıyor (koyu yazı, açık zemin) — bir tık artır. */ .q-root[class*="light"] .q-wall-big, .theme-candy .q-wall-big { opacity: .07; } .q-root[class*="light"] .q-wall-small, .theme-candy .q-wall-small { opacity: .1; } /* Duvar kağıtlı temalarda (cyberpunk/steampunk/meyve) desen üstüne desen olmasın. */ .q-root[style*="--q-wallpaper"] .q-wall, body.q-haswall .q-wall { display: none; } @media (max-width: 700px) { .q-wall-small { display: none; } } .q-welcome-badge { width: 124px; height: 124px; border-radius: 34px; background: linear-gradient(145deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 14px 44px rgba(89,131,177,0.45); margin-bottom: 8px; } .q-empty-hints { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } /* #2 (2026-07-26 düzeltme): SAĞ panel (kanallar kolonu) ev modunda boşken kendi profil kartın — "Bir sunucu seç" yerine. Dikey kaydırmalı zarf + ince kart kabuğu (kabuk YALNIZ bu bağlamda: .q-selfcard-wrap .q-pcard2 → popover/dialog .q-pcard2'sine dokunmaz). 2026-07-26 (Fatih): DM yan panelindeki (.q-peer) gibi DÜZ görünsün — kutucuk-üstüne-kutucuk ("arka arkaya border") profesyonel durmuyordu. Banner tam yayılır, bölümler kutusuz/düz, kart hafif iç boşluklu (margin) + panel arka planı; sığmazsa zarf zaten kaydırır. */ .q-selfcard-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; } /* PROFİL KARTI — A DÜZENİ (2026-07-31): kısa bilgiler ikişerli ızgarada. Sadece BU sarmalayıcının çocukları eşleşir; seviye çubukları/listeler ızgaranın dışında kaldığı için tam satır olmaya devam eder. Dar kartta (mobil/popover) tek sütuna düşer — iki sütun 150px'in altında okunmaz hâle geliyordu. */ .q-pcard2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .q-pcard2-grid > .q-pcard2-section { margin-top: 0; min-width: 0; } .q-pcard2-grid > .q-pcard2-section .q-pcard2-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 400px) { .q-pcard2-grid { grid-template-columns: 1fr; } } /* ==== "ŞU AN AKTİF" panosu (2026-07-31) — ev ekranının sağ sütunu ==== Satırlar KART DEĞİL, liste: kutucuk-üstüne-kutucuk yığını sütunu ağırlaştırıyordu. Zemin yalnız hover'da beliriyor (Discord/Slack yan-liste deseni). Seste olan satır solda ince aksan şeridiyle ayrılıyor — o satır tıklanabilir bir EYLEM barındırıyor, diğerleri sadece bilgi. */ /* #kanal etiketi — @mention ile aynı hap görünümü, farklı ton (kişi mor/aksan, kanal nötr-vurgu). Tıklanabilir olduğu imleçten de belli olsun diye pointer. */ /* Yanıt alıntısında minik görsel önizlemesi (satır yüksekliğini bozmayacak boyut). */ /* Alıntı satırı tıklanınca hedefe atlar → tıklanabilir olduğu belli olsun. */ .q-reply-ref.clickable { cursor: pointer; border-radius: 5px; } .q-reply-ref.clickable:hover { background: var(--q-hover); } .q-reply-ref.clickable:hover .q-reply-ref-txt { color: var(--q-strong); } .q-reply-thumb { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; vertical-align: -4px; } .q-chanref { color: var(--q-accent); background: var(--q-state-primary, rgba(127,119,221,.14)); border-radius: 4px; padding: 0 3px; cursor: pointer; font-weight: 500; } .q-chanref:hover { background: var(--q-accent); color: #fff; } /* MİNİ PROFİL KARTI — @etiketin üzerine gelince. Tam kartın (q-pp) küçük kardeşi: yalnız kimlik + o anki durum; ayrıntı için tıklanır. Üst katmana alınmaz (popover) çünkü fare takibi gerekiyor ve mesaj listesi artık yığın bağlamı yaratmıyor. */ .q-minipp { position: fixed; z-index: 1250; width: 232px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 12px; padding: 11px 12px; box-shadow: var(--q-elev-3); animation: q-menu-in .06s var(--q-ease); } /* yarıya indirildi */ .q-minipp-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .q-minipp-name { font-size: 14px; font-weight: 600; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-minipp-sub { font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-minipp-act { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--q-online); margin-top: 8px; } .q-minipp-status { font-size: 12px; color: var(--q-text); margin-top: 8px; overflow-wrap: break-word; } .q-minipp-hint { font-size: 11px; color: var(--q-faint); margin-top: 9px; border-top: 1px solid var(--q-divider); padding-top: 7px; } .q-active { padding: 10px 8px 14px; } .q-active-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--q-faint); padding: 2px 6px 8px; } .q-active-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--q-input-bg); color: var(--q-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; } .q-active-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; transition: background var(--q-dur) var(--q-ease); } .q-active-row:hover { background: var(--q-hover); } .q-active-row.voice { box-shadow: inset 2px 0 0 var(--q-accent); } .q-active-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .q-active-name { font-size: 13.5px; font-weight: 500; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-active-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--q-muted); min-width: 0; } .q-active-sub.game { color: var(--q-online); } .q-active-sub.voice { color: var(--q-accent); } .q-active-subtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-active-join { flex: none; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-strong); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 14px; cursor: pointer; } .q-active-join:hover { background: var(--q-accent); border-color: var(--q-accent); color: #fff; } .q-active-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 18px; opacity: .85; } .q-active-empty-t { font-size: 14px; font-weight: 500; color: var(--q-strong); } .q-active-empty-d { font-size: 12.5px; color: var(--q-muted); line-height: 1.65; } /* (2026-07-31) .q-selfcard-flat kuralları SİLİNDİ: o sınıfı basan tek yer ev sütunundaki öz-profil kartıydı, artık orada "Şu an aktif" panosu var. 320px genişlik kuralı da kalktı — liste dar sütunda zaten rahat okunuyor (kart bölümleri geniş sütun istiyordu, satırlar istemiyor). */ /* Hoş geldin alt linkleri: Gizlilik · Çocuk Güvenliği · Sürüm Notları (tema takipli) */ .q-welcome-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12.5px; } .q-welcome-links a { color: var(--q-muted); cursor: pointer; text-decoration: none; } .q-welcome-links a:hover { color: var(--q-accent); text-decoration: underline; } .q-welcome-links span { color: var(--q-faint); } /* #13: hoş geldin ipucu satırları hover'da "kütük gibi" zıplıyordu — transition YOKTU. Yumuşak geçiş + hafif zemin. */ .q-empty-hint { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--q-strong); background: var(--q-side-bg); padding: 9px 15px; border-radius: 11px; transition: box-shadow var(--q-dur) var(--q-ease), transform var(--q-dur) var(--q-ease), background var(--q-dur) var(--q-ease); } /* ---- server tab caret (sunucu menüsü sekmede) + channel delete ---- */ .q-tab-caret { display: inline-flex; align-items: center; margin-left: -2px; color: var(--q-muted); border-radius: 5px; } .q-tab-caret:hover { color: var(--q-strong); background: var(--q-hover); } .q-iconupload { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--q-divider); border-radius: 9px; font-size: 13px; color: var(--q-text); cursor: pointer; } /* kategori ikonu (12×12) — başlıkta adın solunda */ .q-cat-ico { width: 12px; height: 12px; border-radius: 3px; object-fit: cover; flex: none; } .q-iconupload:hover { background: var(--q-hover); } .q-cathdr { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--q-faint); margin: 14px 6px 4px; font-weight: 600; text-transform: uppercase; cursor: pointer; user-select: none; } .q-cathdr:hover { color: var(--q-muted); } .q-chrow .q-chdel { opacity: 0; color: var(--q-muted); } .q-chrow:hover .q-chdel { opacity: 0.65; } .q-chrow .q-chdel:hover { opacity: 1; color: var(--q-danger); } /* ---- admin ---- */ /* #2: tamamen tam ekran overlay (app kabuğunu kaplar; X → "/"). Tema korunur (.q-root içinde). */ .q-admin { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; padding: 32px 40px; background: var(--q-ambient); } /* #1: sekmeli panel varyantı — .q-settings (sol nav + gövde) tüm sayfayı kaplar */ .q-admin.tabbed { padding: 0; overflow: hidden; } .q-admin.tabbed .q-settings { height: 100%; } /* POPUP MODU (2026-07-30, kullanıcı isteği: "yönetim panelinde de popupa küçült/büyült olsun"). Panel routed bir SAYFA (position:fixed inset:0) olduğundan diyalog gibi MudBlazor seçeneğiyle değil, kabın kendi inset'iyle küçülür. Kabukta üstten pay şerit yüksekliği kadar artar. */ .q-admin.popup { inset: 28px clamp(16px, 5vw, 90px); border-radius: 16px; border: 1px solid var(--q-divider); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3); overflow: hidden; } html.q-wco .q-admin.popup { inset: calc(var(--q-wco-h, 52px) + 10px) clamp(16px, 5vw, 90px) 28px; } /* Popup modunda arkayı karart — MudBlazor'ın diyalog overlay'iyle aynı koyuluk (kullanıcı isteği: "ayarlarda kararıyor, panelde kararmıyor"). Panelin z-index'i 1000 → perde bir altında. */ /* DOSYA BIRAKMA GÖSTERGESİ (2026-07-30) — sürüklenen dosya sohbetin üstündeyken kesikli çerçeve. Doküman düzeyinde `html.q-dropping` sınıfıyla; sohbet alanı görsel hedefi işaret eder. pointer-events: none ŞART — perde `drop` olayını yutarsa dosya hiç düşmez. */ html.q-dropping .q-center::after { content: ""; position: absolute; inset: 8px; z-index: 40; pointer-events: none; border: 2px dashed var(--q-accent); border-radius: 14px; background: color-mix(in srgb, var(--q-accent) 8%, transparent); } html.q-dropping .q-center { position: relative; } /* ALT BAŞLIKLAR (2026-07-30) — Discord ayarlar deseni: kategori altında girintili, ince sol raylı liste; tıklanınca içerik o bölüme kayar. Aktif olan aksan rengiyle işaretlenir. */ .q-settings-subs { display: flex; flex-direction: column; margin: 2px 0 6px 30px; border-left: 1px solid var(--q-divider); } .q-settings-subitem { padding: 5px 10px; font-size: 13px; color: var(--q-muted); cursor: pointer; border-left: 2px solid transparent; margin-left: -1px; border-radius: 0 6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-settings-subitem:hover { color: var(--q-strong); background: var(--q-hover); } .q-settings-subitem.on { color: var(--q-accent); border-left-color: var(--q-accent); font-weight: 500; } /* Çapa: yüksekliksiz işaret (akışı bozmaz). Yapışkan başlık altında kalmasın diye kaydırma hesabı JS'te yapılır — burada scroll-margin ile ikinci bir güvence. */ .q-settings-sec { height: 0; scroll-margin-top: 16px; } .q-settings-anch { scroll-margin-top: 16px; } /* Bölüm ara başlığı (Discord'daki "Şifre ve Güvenlik" gibi) */ .q-settings-h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--q-muted); margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--q-divider); } /* Kullanıcı satırında e-posta doğrulama durumu (2026-07-30) — e-postanın hemen sağında. */ .q-adm-vic { font-size: 13px !important; vertical-align: -2px; margin-left: 4px; flex: none; } .q-adm-vic.ok { color: var(--q-online); } .q-adm-vic.no { color: var(--q-amber); } .q-adm-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.55); animation: q-adm-scrim-in .2s ease both; } @keyframes q-adm-scrim-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .q-adm-scrim { animation: none; } } /* TAM pencere modunda ✕ ve ⛶ native pencere kontrollerinin altında kalıyordu (panel hiç kapatılamıyordu) → onların soluna kaydır. Popup modunda kart zaten şeridin altında. */ html.q-wco .q-admin:not(.popup) .q-settings-close { right: calc(var(--q-wco-r, 148px) + 12px); top: 8px; } html.q-wco .q-admin:not(.popup) .q-settings-expand { right: calc(var(--q-wco-r, 148px) + 56px); top: 8px; } /* Mobilde popup modu anlamsız (ekran zaten kart kadar) — düğme gizli, kap tam ekran. */ @media (max-width: 560px) { .q-admin.popup { inset: 0; border-radius: 0; border: none; } .q-admin .q-settings-expand { display: none !important; } } .q-admin-inner { max-width: 860px; margin: 0 auto; } .q-admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .q-admin-title { font-size: 18px; font-weight: 500; color: var(--q-strong); } .q-admin-sub { font-size: 12px; color: var(--q-muted); } .q-admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .q-stat { background: var(--q-side-bg); border-radius: 10px; padding: 12px 14px; } .q-stat-label { font-size: 12px; color: var(--q-muted); } .q-stat-val { font-size: 24px; font-weight: 500; color: var(--q-strong); } .q-admin-section-title { font-size: 14px; font-weight: 500; color: var(--q-strong); margin: 18px 0 10px; } /* #3: gelen arama kartı — EKRAN ORTASINDA (üstten %18), zil sesiyle birlikte titreşir (#6) */ .q-callring { position: fixed; top: 18%; left: 50%; z-index: 1400; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--q-panel-bg); border: 0.5px solid var(--q-divider); border-radius: 16px; box-shadow: var(--q-elev-4, 0 14px 38px rgba(0,0,0,0.42)); animation: q-ring-shake 2s ease-in-out infinite; } .q-callring-av { width: 52px; height: 52px; font-size: 18px; flex: none; } .q-callring-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 240px; } .q-callring-txt b { font-size: 15px; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-callring-txt span { font-size: 12.5px; color: var(--q-muted); } .q-callring-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex: none; } .q-callring-btn.ok { background: var(--q-online); } .q-callring-btn.no { background: var(--q-danger); } .q-callring-btn:hover { filter: brightness(1.1); } @keyframes q-ring-shake { 0%, 86%, 100% { transform: translateX(-50%) rotate(0); } 88% { transform: translateX(-50%) rotate(-1.2deg); } 92% { transform: translateX(-50%) rotate(1.2deg); } 96% { transform: translateX(-50%) rotate(-0.8deg); } } /* #1: profil kartı aksiyon butonları tek satır kalsın (dar popover'da 'ARKADAŞ EKLE' sarıp devleşiyordu) */ /* #15: profil kartı eylem satırı — mesaj metinli genişleyen, diğerleri sabit kare ikon */ .q-pcard2-actions .mud-button-root { white-space: nowrap; } .q-pca-msg { flex: 0 1 auto; } .q-pca-icon { flex: none; width: 40px; height: 40px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .q-pca-icon:hover:not(:disabled) { color: var(--q-strong); background: var(--q-hover); } .q-pca-icon:disabled { opacity: 0.4; cursor: not-allowed; } /* Birincil eylem (Mesaj) — aynı ikon kutusu, vurgulu renk. */ .q-pca-icon.primary { background: var(--q-accent); border-color: var(--q-accent); color: #fff; } .q-pca-icon.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--q-accent); color: #fff; } /* #10: kapasite dolu — bekleme sırası tam ekran kapağı (bilinçli koyu, preload ailesi) */ .q-capqueue { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #101116; color: #e6e6ea; text-align: center; padding: 24px; } .q-capqueue-title { font-size: 22px; font-weight: 700; margin-top: 8px; } .q-capqueue-pos { font-size: 16px; color: var(--q-accent); font-weight: 600; } .q-capqueue-hint { font-size: 13px; color: #9a9aa3; max-width: 340px; } /* #8: Steam ile giriş butonu — Steam'in koyu laciverti */ .q-login-btn.steam { background: #171a21; color: #e6eaf0; margin-top: 10px; border: 1px solid rgba(255,255,255,0.12); } .q-login-btn.steam:hover { background: #232734; } /* Gizlilik politikası (/privacy) — girişsiz, sabit koyu tema (dış portallar bot ile bakar). GOTCHA: uygulama body'si overflow:hidden — tam-sayfa statik sayfa KENDİ scroll konteynerini getirir. Flex+overflow alt padding'i yutuyordu → blok konteyner + kartta margin:auto kalıbı. */ /* HUKUKİ/GİRİŞSİZ SAYFALAR (/privacy, /child-safety, /download, /error). TEMA DEĞİŞKENLERİNE ÇEVRİLDİ (2026-07-30, kullanıcı isteği: "eski temada kalmış"): eskiden sabit renkler yazıyordu (#131417/#1b1c20) ve accent'i ESKİ KAHVE MARKAYDI (#A9744C/#C08A5C) — uygulama neon/ocean markaya geçtiğinde bu sayfalar geride kalmıştı. Sayfalar theme-ocean sınıfını taşır (auth ekranlarıyla aynı desen: EmptyLayout + theme-ocean, SABİT RENK YAZMA); böylece marka bir daha değişirse burası kendiliğinden takip eder. */ .q-legal { height: 100vh; height: 100dvh; overflow-y: auto; background: var(--q-chat-bg); color: var(--q-text); padding: 40px 16px; font-size: 14.5px; line-height: 1.65; scrollbar-width: thin; scrollbar-color: var(--q-scroll, rgba(255,255,255,0.16)) transparent; } .q-legal::-webkit-scrollbar { width: 8px; } .q-legal::-webkit-scrollbar-track { background: transparent; } .q-legal::-webkit-scrollbar-thumb { background: var(--q-scroll, rgba(255,255,255,0.14)); border-radius: 8px; } .q-legal::-webkit-scrollbar-thumb:hover { background: var(--q-scroll-hover, rgba(255,255,255,0.24)); } .q-legal-card { max-width: 760px; margin: 0 auto 48px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 14px; padding: 36px 40px 28px; } .q-legal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .q-legal-brand { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--q-accent); } .q-legal h1 { font-size: 26px; font-weight: 700; color: var(--q-strong); margin: 2px 0 0; } .q-legal h2 { font-size: 17px; font-weight: 600; color: var(--q-strong); margin: 26px 0 8px; } .q-legal-date { font-size: 12px; color: var(--q-muted); margin: 6px 0 18px; } .q-legal p { margin: 8px 0; } .q-legal ul { margin: 8px 0; padding-left: 22px; } .q-legal li { margin: 6px 0; } .q-legal a { color: var(--q-link, var(--q-accent)); text-decoration: none; } .q-legal a:hover { text-decoration: underline; } .q-legal-back { display: inline-block; margin-top: 26px; font-size: 13px; } /* #1: gizlilik sayfası TR/EN geçişi — varsayılan EN; .tr class'ı Türkçe içeriği gösterir. Başlıktaki 'lar inline, gövde blokları block olarak açılır. */ .q-legal-lang { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; } .q-legal-lbtn { font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--q-divider); background: transparent; color: var(--q-muted); cursor: pointer; } .q-legal-lbtn:hover { color: var(--q-text); border-color: var(--q-border, var(--q-divider)); } .q-legal-lbtn.on { background: var(--q-accent); border-color: var(--q-accent); color: #fff; } .q-legal .lang-tr, .q-legal .lang-de { display: none; } .q-legal.tr div.lang-tr { display: block; } .q-legal.tr h1 .lang-tr { display: inline; } .q-legal.tr span.lang-tr { display: inline; } /* /download gibi span tabanlı ikili metinler */ .q-legal.tr .lang-en { display: none; } /* Almanca (yalnız data-langs'ında de olan sayfalar — /download) */ .q-legal.de div.lang-de { display: block; } .q-legal.de h1 .lang-de { display: inline; } .q-legal.de span.lang-de { display: inline; } .q-legal.de .lang-en { display: none; } /* Epic logosu beyaz "knockout" — açık temalarda görünmez olur → invert (beyaz→koyu, şeffaflık korunur). Login/privacy sabit koyu ve tema class'sız olduğundan etkilenmez. MudDialog'lar .q-root DIŞINDA portal'da yaşar → body'deki tema yansıması (goglisTheme #9) üzerinden de eşleşmeli, yoksa sağ-tık profil popup'ında light modda beyaz kalırdı. */ .q-root[class*="light"] .q-brand-epic, body[class*="light"] .q-brand-epic { filter: invert(1); } /* BETA rozeti — marka adının sağ üstüne biner (üst şerit + login başlığı). */ .q-beta { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--q-accent) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--q-accent) 14%, transparent); color: var(--q-accent); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.5; vertical-align: super; text-transform: uppercase; } /* OAuth platform girişleri (yalnız ClientId/Secret yapılandırılmışsa render edilir) — marka tonları. */ .q-login-btn.ext { margin-top: 10px; border: 1px solid rgba(255,255,255,0.12); } .q-login-btn.epic { background: #2a2a2a; color: #f3f3f3; } .q-login-btn.epic:hover { background: #3a3a3a; } .q-login-btn.battlenet { background: #0e5aa7; color: #eaf3fc; } .q-login-btn.battlenet:hover { background: #1268c3; } .q-login-btn.riot { background: #d13639; color: #fff2f2; } .q-login-btn.riot:hover { background: #e04a4d; } /* #6: ekran paylaşan katılımcının kırmızı YAYINDA rozeti (kanal listesi ses satırı) */ .q-live-badge { flex: none; background: var(--q-danger); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; padding: 1px 5px; border-radius: 4px; line-height: 1.6; border: 0; font-family: inherit; } /* #0: kamerası açık — mavi VİDEODA rozeti */ .q-live-badge.video { background: #3b7fc4; } /* #1 (2026-08-07): rozetin yanındaki KATIL/AYRIL hap butonu — yayına katılmalı izleme */ .q-live-join { flex: none; border: 1px solid var(--q-accent); background: transparent; color: var(--q-accent); border-radius: 999px; font-size: 8.5px; font-weight: 800; letter-spacing: .4px; padding: 1px 6px; line-height: 1.6; cursor: pointer; font-family: inherit; } .q-live-join:hover { background: var(--q-accent); color: #fff; } /* C4: geçici oda ⏳ rozeti (kanal adının yanında; boşalınca kapanır anlamı) */ .q-temp-badge { flex: none; font-size: 11px; opacity: .7; line-height: 1; } /* #2: yavaş mod rozeti (chathead) — kanalın hız sınırı herkese görünür */ .q-slow-badge { flex: none; background: color-mix(in srgb, var(--q-accent) 16%, transparent); color: var(--q-accent); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; line-height: 1.4; white-space: nowrap; } /* Dock video kalite seçici (metin butonu) */ .q-vctl.q-vq { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; width: auto; min-width: 42px; padding: 0 8px; } /* Admin → Kapasite sekmesi */ .q-cap-cl { font-size: 12px; color: var(--q-muted); margin-bottom: 4px; } .q-cap-srv { border: 1px solid var(--q-divider); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .q-cap-srv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .q-cap-fields { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; } .q-cap-fields > div { display: flex; flex-direction: column; gap: 3px; } .q-cap-fields span { font-size: 11.5px; color: var(--q-muted); } .q-cap-fields input { max-width: 120px; } .q-cap-fields em { font-size: 11px; color: var(--q-accent); font-style: normal; font-variant-numeric: tabular-nums; } .q-cap-use { justify-content: flex-end !important; min-width: 180px; font-size: 12px; color: var(--q-muted); font-variant-numeric: tabular-nums; } .q-cap-bar { width: 100%; height: 6px; background: var(--q-divider); border-radius: 3px; overflow: hidden; margin-top: 4px; } .q-cap-bar > div { height: 100%; background: var(--q-accent); border-radius: 3px; transition: width .3s; } .q-cap-live { border: 1px solid var(--q-divider); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; } .q-cap-live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; } .q-cap-tags { display: flex; gap: 12px; font-size: 12px; color: var(--q-muted); font-variant-numeric: tabular-nums; } .q-cap-spark { width: 100%; height: 44px; display: block; opacity: .9; } /* #3 (2026-07-20): Genel Bakış tarihsel grafikler — zaman ekseni etiketli büyük çizim. */ .q-hist-chart { width: 100%; height: 120px; display: block; opacity: .95; touch-action: manipulation; } .q-hist-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--q-faint); padding-top: 3px; } /* #1 (2026-07-21): dokunma/hover baloncuğu + aralık butonları + özel tarih satırı. */ /* Tema-uyumlu baloncuk (2026-07-21): sabit koyu zemin light modda sırıtıyordu — --q-input-bg iki temada da doğru zemini verir; gölge light'ta hafifletilir. */ .q-hist-tip { position: absolute; top: 34px; transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 7px 11px; border-radius: 9px; background: var(--q-input-bg); border: 1px solid var(--q-divider); box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 12px; color: var(--q-strong); white-space: nowrap; } .theme-light .q-hist-tip { box-shadow: 0 4px 14px rgba(0,0,0,.14); } .q-hist-tip time { font-size: 10.5px; color: var(--q-muted); } .q-hist-rbtn { padding: 6px 11px; font-size: 12.5px; } .q-hist-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .q-hist-custom input[type="date"] { background: var(--q-input-bg); color: var(--q-text); border: 1px solid var(--q-divider); border-radius: 8px; padding: 6px 9px; font-size: 13px; color-scheme: dark; } .theme-light .q-hist-custom input[type="date"] { color-scheme: light; } /* #1: "+ Kategori oluştur" satırı — sönük, hover'da belirginleşir */ .q-cat-add { opacity: 0.55; cursor: pointer; } .q-cat-add:hover { opacity: 1; color: var(--q-accent); } /* Duyurular — zilde CİDDİ ton: kırmızı nokta (görülmemiş) + kırmızı şeritli kart */ .q-ann-dot { position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--q-danger, #ed4245); border: 2px solid var(--q-side-bg); animation: q-ann-pulse 1.6s ease-in-out infinite; } @keyframes q-ann-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } } .q-ann-card { margin: 6px 6px 4px; padding: 8px 10px; border-left: 3px solid var(--q-danger, #ed4245); border-radius: 8px; background: rgba(237, 66, 69, 0.10); } .q-ann-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--q-danger, #ed4245); } .q-ann-head span { margin-left: auto; font-weight: 500; color: var(--q-muted); } .q-ann-body { margin-top: 4px; font-size: 12.5px; color: var(--q-strong); } /* "Okudum" — basınca kart bu cihazda zilden düşer. */ .q-ann-read { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 10px; border: 1px solid var(--q-divider); border-radius: 7px; background: var(--q-input-bg); color: var(--q-strong); font-size: 12px; font-weight: 600; cursor: pointer; } .q-ann-read:hover { border-color: var(--q-accent); color: var(--q-accent); } /* Duyuru markdown gövdesi (zil kartı + admin listesi): paragraf boşlukları sohbetteki gibi sıkı. */ .q-ann-body p, .q-ann-md p { margin: 0 0 4px; } .q-ann-body p:last-child, .q-ann-md p:last-child { margin-bottom: 0; } .q-ann-body code, .q-ann-md code { background: var(--q-input-bg); border-radius: 4px; padding: 1px 4px; font-size: 11.5px; } /* Mini markdown editörü (duyuru formu): B/I/U/S/kod butonları. */ .q-md-toolbar { display: flex; gap: 4px; margin-bottom: 6px; } .q-md-toolbar button { width: 30px; height: 26px; border: 1px solid var(--q-divider); border-radius: 6px; background: var(--q-input-bg); color: var(--q-strong); font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .q-md-toolbar button:hover { background: var(--q-hover); border-color: var(--q-accent); } /* Yonetim paneli sunucu/bolge kartlari (medya sekmesi redesign). */ .q-srv-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg); margin-bottom: 8px; } .q-srv-card.off { opacity: .55; } /* Blok varyant: kart icinde form (Kapasite SFU kartlari) — ust satir ikon+ad. */ .q-srv-card.block { display: block; } .q-srv-card.block .q-srv-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .q-srv-ico { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--q-accent) 15%, transparent); color: var(--q-accent); display: flex; align-items: center; justify-content: center; flex: none; } .q-srv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .q-srv-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .q-srv-url { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-srv-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .q-srv-load { font-size: 11.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; } .q-srv-loadbar { display: inline-block; width: 84px; height: 5px; border-radius: 4px; background: var(--q-divider); overflow: hidden; vertical-align: middle; } .q-srv-loadbar > span { display: block; height: 100%; background: var(--q-accent); border-radius: 4px; } .q-srv-actions { display: flex; align-items: center; gap: 2px; flex: none; } .q-role-chip { font-size: 11px; padding: 2.5px 10px; border-radius: 999px; border: 1px solid var(--q-divider); background: transparent; color: var(--q-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; } .q-role-chip:hover { border-color: var(--q-accent); } .q-role-chip.on { background: color-mix(in srgb, var(--q-accent) 15%, transparent); border-color: var(--q-accent); color: var(--q-accent); font-weight: 600; } .q-role-chip.static { cursor: default; } .q-role-chip.static:hover { border-color: var(--q-divider); } .q-role-chip.static.on:hover { border-color: var(--q-accent); } /* Panel formu: cerceveli kutu + baslik + saga yasli eylem butonlari. */ .q-form-panel { border: 1px solid var(--q-divider); border-radius: 12px; padding: 14px; background: var(--q-input-bg); } .q-form-panel > h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--q-strong); } .q-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } /* #mobil admin nav: masaustunde gizli hamburger; dar ekranda nav drawer'a doner (asagidaki media). */ .q-adm-burger { display: none; } /* Kurulum rehberi diyalogu (LiveKit/MinIO): numarali adimlar + kopyalanabilir kod bloklari. */ .q-guide { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 8px; } /* Rehber platform sekmeleri (Docker Compose / Kubernetes). */ .q-guide-tabs { display: flex; gap: 8px; } .q-guide-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--q-divider); border-radius: 10px; background: var(--q-input-bg); color: var(--q-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; } .q-guide-tabs button:hover { border-color: var(--q-accent); } .q-guide-tabs button.on { background: color-mix(in srgb, var(--q-accent) 15%, transparent); border-color: var(--q-accent); color: var(--q-accent); } .q-guide-intro { font-size: 13px; color: var(--q-muted); line-height: 1.55; border-left: 3px solid var(--q-accent); padding: 2px 0 2px 12px; } .q-guide-step { display: flex; flex-direction: column; gap: 6px; } .q-guide-h { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--q-strong); } .q-guide-no { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--q-accent) 16%, transparent); color: var(--q-accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; } .q-guide-body { font-size: 13px; color: var(--q-text); line-height: 1.55; padding-left: 31px; } .q-guide-links { display: flex; gap: 14px; flex-wrap: wrap; padding-left: 31px; } .q-guide-links a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--q-accent); text-decoration: none; } .q-guide-links a:hover { text-decoration: underline; } .q-guide-codewrap { position: relative; margin-left: 31px; } .q-guide-code { background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 10px; padding: 12px 14px; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; color: var(--q-strong); margin: 0; } .q-guide-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--q-divider); background: var(--q-panel-bg); color: var(--q-muted); cursor: pointer; } .q-guide-copy:hover { color: var(--q-accent); border-color: var(--q-accent); } /* #5/#6: erişim editörü (roller/kişiler kutuları) + kalıtım bilgi notu. Modern satırlar: özel yuvarlak işaret + avatar + hover; kişiler kutusu ARAMALI. */ .q-acc-modes { display: flex; gap: 8px; flex-wrap: wrap; } .q-acc-cols { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } /* Kutular dialog genişliğini EŞİT paylaşır (eski sabit max-width 280px dar dialogda yamuk dururdu). */ .q-acc-box { flex: 1 1 210px; min-width: 0; height: 288px; display: flex; flex-direction: column; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 12px; padding: 10px 8px 8px; } .q-acc-h { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--q-muted); margin: 0 4px 6px; } .q-acc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--q-accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0; } .q-acc-hint { font-size: 12px; color: var(--q-muted); margin-top: 6px; } /* Kutu boyu SABİT (aramada/az öğede küçülmez) — yalnız listenin içi kayar. */ .q-acc-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; align-content: flex-start; } .q-acc-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; color: var(--q-strong); cursor: pointer; user-select: none; transition: background .1s ease; } .q-acc-row:hover { background: color-mix(in srgb, var(--q-accent) 10%, transparent); } .q-acc-row.on { background: color-mix(in srgb, var(--q-accent) 16%, transparent); } .q-acc-check { flex: none; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border: 1.6px solid var(--q-faint); border-radius: 6px; color: #fff; transition: background .1s ease, border-color .1s ease; } .q-acc-row.on .q-acc-check { background: var(--q-accent); border-color: var(--q-accent); } .q-acc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; } .q-acc-av { flex: none; width: 21px; height: 21px; border-radius: 50%; object-fit: cover; } .q-acc-avtxt { display: inline-flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-size: 10.5px; font-weight: 700; } .q-acc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-acc-empty { padding: 10px 8px; font-size: 12.5px; color: var(--q-faint); } .q-acc-search { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 4px 8px; padding: 5px 9px; background: var(--q-chat-bg); border: 1px solid var(--q-divider); border-radius: 8px; color: var(--q-muted); } .q-acc-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--q-text); font-family: inherit; font-size: 13px; } .q-acc-search button { display: inline-flex; border: 0; background: none; color: var(--q-muted); cursor: pointer; padding: 0; } .q-acc-search:focus-within { border-color: var(--q-accent); } .q-acc-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--q-muted); background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; max-width: 560px; } /* #1/#2: yayına KATIL / ÇIK butonu (YAYINDA rozetinin veya kamera ikonunun yanında) */ .q-join-btn { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 0; border-radius: 5px; background: var(--q-online); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; cursor: pointer; font-family: inherit; line-height: 1.6; } .q-join-btn:hover { filter: brightness(1.1); } .q-join-btn.leave { background: var(--q-danger); } .q-join-btn.cam { background: var(--q-accent); } .q-join-btn.cam.leave { background: var(--q-danger); } /* video tile altında izleyici isimleri (#1/#2) */ /* #1 (2026-08-07, saha): izleyici listesi İSMİN ÜSTÜNDE ayrı satır — ikisi de bottom:8'deyken üst üste biniyordu */ .q-vidviewers { position: absolute; left: 8px; bottom: 36px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,0.55); color: #e8e8ec; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #1: ses kullanıcısı sağ-tık menüsünde kişi bazlı ses şeridi */ .q-menu-vol { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; min-width: 200px; } .q-menu-vol input[type=range] { flex: 1; accent-color: var(--q-accent); min-width: 110px; } .q-menu-vol-val { font-size: 11px; color: var(--q-muted); width: 36px; text-align: right; flex: none; } /* #1: webhook — APP rozeti (mesaj başlığı + webhook listesi) ve oluşturma formu */ .q-app-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 5px; background: var(--q-accent); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; line-height: 1.5; flex: none; } .q-wh-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } /* Durum chip'leri (yeşil onay / kırmızı uyarı) */ .q-chip-ok { background: color-mix(in srgb, var(--q-online) 18%, transparent); color: #3ad17e; } .q-chip-danger { background: rgba(237,66,69,0.15); color: var(--q-danger-soft); } /* Sunucu kurma yetkisi chip'i: ver (soluk +) / geri al (✕'li yeşil) — tıklanabilir */ .q-chip-revoke { cursor: pointer; display: inline-flex; align-items: center; } .q-chip-revoke:hover { background: rgba(237,66,69,0.16) !important; color: var(--q-danger-soft) !important; } .q-chip-grant { cursor: pointer; background: var(--q-hover); color: var(--q-muted); } .q-chip-grant:hover { background: var(--q-state-primary, rgba(169,116,76,.14)); color: var(--q-accent); } /* #2/#3 LiveKit havuzu (bölge başlığı + ekleme formu) */ .q-admin-lkregion { display: flex; align-items: center; gap: 7px; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--q-muted); } .q-admin-lkregion .cnt { background: var(--q-state-primary, rgba(169,116,76,.14)); color: var(--q-accent); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; } .q-admin-lkform { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px 12px; align-items: start; margin-top: 14px; padding: 14px; background: var(--q-side-bg); border: 0.5px solid var(--q-divider); border-radius: 12px; } .q-admin-lkform .mud-input-control { margin: 0; } .q-admin-lkform > .mud-button-root { align-self: center; justify-self: end; min-width: 120px; } /* Admin satırı: kayıt platformu ikonu (e-posta/kimliğin solunda, metinle aynı hizada). */ .q-adm-prov { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 5px; opacity: .85; } .q-admin-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--q-side-bg); border-radius: 10px; margin-bottom: 8px; } .q-admin-row .nm { font-size: 14px; font-weight: 500; color: var(--q-strong); } .q-admin-row .em { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; } .q-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; white-space: nowrap; } /* ---- message composer input + markdown ---- */ .q-msgbox { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--q-text); font-size: 14px; font-family: inherit; resize: none; overflow-y: hidden; max-height: 150px; line-height: 1.45; padding: 5px 0; box-sizing: border-box; height: 31px; } /* Büyüyen kutu cilası: çubuk yalnız 150px tavana dayanınca (fit aç/kapar) ve İNCE görünür. */ /* BEKLEYEN DOSYA KARTLARI (2026-07-31, Discord modeli) — composer'in ustunde, ayni yatay hizada bir raf: kucuk onizleme + ad + ✕. Veri tarayicida bekledigi icin kartlar aninda gelir. */ .q-stagebar { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 16px 0; padding: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 12px; } /* BEKLEYEN DOSYA KARTI "HAZIR" GORUNUR (2026-08-18, kullanici: "inputta gorunen dosyalar canli renkte olsun, gri olunca sanki yuklenecek gibi bekleme hissi oluşturuyor"). Eskiden kart komple sonuk cizilyordu: ad ve ikon --q-muted, cerceve --q-divider, kucuk resmin altinda gri zemin. Uc sonuk sinyal ust uste binince kart "yukleniyor" gibi okunuyordu, oysa dosya coktan hazir ve yalniz GONDER'i bekliyor. Artik kart vurgu rengine calan cercevesi, net yazisi ve renkli ikonuyla etkin duruyor. */ .q-stagecard { position: relative; width: 148px; background: var(--q-chat-bg); border: 1px solid color-mix(in srgb, var(--q-accent) 45%, var(--q-divider)); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.16); } .q-stagethumb { width: 100%; height: 88px; object-fit: cover; border-radius: 7px; background: transparent; } .q-stageico { display: flex; align-items: center; justify-content: center; color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 12%, transparent); } .q-stagename { font-size: 11.5px; color: var(--q-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kart üzerindeki "tek görüntülük" düğmesi (yalnız DM + görsel). Kapalıyken sessiz, açıkken vurgu renginde dolu — hangi görselin bir kez açılacağı karta bakınca anlaşılsın. */ .q-stageeph { position: absolute; top: -7px; right: 20px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--q-divider); border-radius: 50%; background: var(--q-side-bg); color: var(--q-muted); cursor: pointer; padding: 0; } .q-stageeph:hover { color: var(--q-text); } .q-stageeph.on { background: var(--q-accent); border-color: var(--q-accent); color: #fff; } .q-stageeph:disabled { opacity: .5; cursor: default; } .q-stagex { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--q-divider); border-radius: 50%; background: var(--q-side-bg); color: var(--q-muted); cursor: pointer; padding: 0; } .q-stagex:hover { color: var(--q-danger); border-color: var(--q-danger); } .q-stageload { display: flex; align-items: center; padding: 0 6px; } /* Composer emoji aynasi (bkz. goglis.js goglisComposer.mirror) - sarmalayici textarea'nin esneme gorevini devralir; ayna mutlak, tiklama gecirgen ve textarea'nin USTUNDE. */ .q-msgwrap { position: relative; flex: 1; min-width: 0; display: flex; } .q-msgwrap > .q-msgbox { flex: 1; } /* KALAN KARAKTER SAYACI (2026-08-12): yalniz son 100 karakterde cizilir, dolunca kirmiziya doner. `pointer-events:none` SART - kutunun ustunde duruyor, tiklamayi yutup imleci kacirmamali. Aynanin (`q-msgmirror`) ustunde kalsin diye z-index verildi. */ .q-msgcount { position: absolute; right: 6px; bottom: 2px; z-index: 2; pointer-events: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--q-faint); opacity: .85; } .q-msgcount.full { color: var(--q-danger); opacity: 1; font-weight: 600; } .q-msgmirror { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; color: var(--q-text); } .q-msgwrap.gg-on > .q-msgmirror { display: block; } /* Yazi SEFFAF ama imlec gorunur - sinif yalniz JS eslesme bulunca eklenir (fail-safe). */ .q-msgwrap.gg-on > .q-msgbox { color: transparent; caret-color: var(--q-text); } .q-msgwrap.gg-on > .q-msgbox::selection { color: transparent; } .gg-in { position: relative; display: inline-block; } .gg-in > .c { visibility: hidden; } .gg-in > .gg-emoji { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1.3em; height: 1.3em; } .q-msgbox { scrollbar-width: thin; scrollbar-color: var(--q-divider) transparent; } .q-msgbox::-webkit-scrollbar { width: 6px; } .q-msgbox::-webkit-scrollbar-thumb { background: var(--q-divider); border-radius: 3px; } .q-msgbox::-webkit-scrollbar-track { background: transparent; } /* #mobil: uzun placeholder ("#kanal kanalına mesaj yaz…") dar ekranda sarmasın — tek satır + üç nokta. */ .q-msgbox::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-msgbox::placeholder { color: var(--q-faint); } /* SOHBET YAZI BOYUTU (2026-07-31, kullanıcı isteği: "font size ayarı getir"). Görünüm ÖLÇEĞİ (zoom) her şeyi büyütür — ikonlar, paneller dahil; bu ayar YALNIZ okunan metni etkiler (Discord'un "Chat Font Scale"i ile aynı ayrım). Değişken 'de yaşar: goglisFontSize. */ .q-md { font-size: var(--q-msg-size, 14px); line-height: 1.5; color: var(--q-text); overflow-wrap: anywhere; } .q-md > :first-child { margin-top: 0; } .q-md > :last-child { margin-bottom: 0; } .q-md p { margin: 0 0 2px; } .q-md strong { color: var(--q-strong); font-weight: 600; } .q-md a { color: var(--q-link, #7aa6ff); text-decoration: none; } .q-md a:hover { text-decoration: underline; } .q-md code { background: var(--q-code-bg); color: var(--q-code-text); padding: 1px 5px; border-radius: 4px; font-family: 'Space Mono', monospace; font-size: 12px; } .q-md pre { background: var(--q-code-bg); border: 0.5px solid var(--q-divider); border-radius: 6px; padding: 8px 10px; margin: 4px 0; overflow: auto; } .q-md pre code { background: none; padding: 0; color: var(--q-text); } .q-md ul, .q-md ol { margin: 4px 0; padding-left: 22px; } .q-md blockquote { border-left: 3px solid var(--q-divider); margin: 4px 0; padding-left: 8px; color: var(--q-muted); } .q-md h1, .q-md h2, .q-md h3 { font-size: 15px; font-weight: 600; color: var(--q-strong); margin: 6px 0 2px; } .q-md img { max-width: 360px; max-height: 280px; border-radius: 8px; display: block; margin-top: 4px; cursor: zoom-in; } /* #5: görsel lightbox — tam ekran popup (zoom + pan + indir). body'ye eklenir (root zoom'dan bağımsız). */ .q-lightbox { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); } .q-lightbox.open { display: flex; } .q-lb-img { max-width: 92vw; max-height: 90vh; user-select: none; touch-action: none; transition: transform 0.08s ease-out; border-radius: 4px; } .q-lb-tools { position: absolute; top: 14px; right: 16px; display: flex; gap: 8px; z-index: 1; } .q-lb-btn { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.14); color: #fff; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; text-decoration: none; } .q-lb-btn:hover { background: rgba(255,255,255,0.26); } /* ---- dosya ekleme (#17) ---- */ .q-attach { display: inline-flex; align-items: center; cursor: pointer; color: var(--q-muted); } .q-attach:hover { color: var(--q-strong); } /* SABITLENEN MESAJ SERIDI (2026-07-30, kullanici istegi: "sabitleyince chat'in ustune fixed sekilde hakketten sabitlesin"). Mesaj listesinin KARDESI olarak akar - position:fixed ile ustune bindirmek yerine yer kaplar; boylece kaydirma alanini ortmez ve z-index savasi cikmaz. */ /* "Su ana don" (gecmis penceresi) — pinbar ile ayni raf dili, aksan vurgulu. */ .q-histbar { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 16px 0; padding: 8px 10px; background: color-mix(in srgb, var(--q-accent) 14%, var(--q-input-bg)); border: 1px solid color-mix(in srgb, var(--q-accent) 35%, transparent); border-radius: 10px; color: var(--q-strong); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .q-histbar:hover { background: color-mix(in srgb, var(--q-accent) 22%, var(--q-input-bg)); } /* Serit tiklanınca hedef mesaj kisa sure vurgulanir. */ .q-msg.q-flash { animation: q-flash 1.8s ease; } @keyframes q-flash { 0%, 55% { background: color-mix(in srgb, var(--q-accent) 24%, transparent); } 100% { background: transparent; } } /* ---- message hover tools + inline edit ---- */ .q-msg { position: relative; border-radius: 6px; } .q-msg:hover { background: var(--q-hover); } /* #12: hover araç çubuğu mesaja/ikonlara çok yanaşıktı — daha yukarı + daha ferah iç boşluk. */ .q-msg-tools { position: absolute; top: -15px; right: 10px; display: flex; gap: 3px; background: var(--q-side-bg); border: 1px solid var(--q-border); border-radius: 10px; padding: 4px 6px; opacity: 0; } .q-msg:hover .q-msg-tools { opacity: 1; } /* TEPKİ SEÇİCİ — BAŞTAN TASARIM (2026-07-31, kullanıcı: "tek çare baştan tasarlamak"). Eski model: seçici, HER mesajın hover'la görünen araç çubuğunun İÇİNDE bir QMenu idi. Dört turluk bug ailesi hep bu bağdan doğdu (hover kayınca kaybolma, hayalet çubuk, panelin mesajların altında kalması, açılışsız yorumun kuralı yutması). Yeni model: TEK seçici, mesaj ağacının tamamen DIŞINDA (Home kökünde) + tam-ekran backdrop. Backdrop bütün imleç olaylarını yuttuğu için arkada hover fiziksel olarak olmaz; panelin hiçbir mesaj atası olmadığı için stacking-context/hover/opacity tuzaklarına giremez. q-menuopen/q-menu-host makinesi mesajlar için gereksizleşti ve kaldırıldı (goglisMenu.sync composer menüleri için genel yaşar). */ .q-msg-tools:focus-within { opacity: 1; } .q-reactpick-bd { position: fixed; inset: 0; z-index: 1200; } .q-reactpick { position: fixed; z-index: 1201; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 11px; padding: 6px; box-shadow: 0 14px 38px rgba(0,0,0,0.42); } /* pointer-events (2026-07-30, kullanici: "iconumu secemiyorum bu yuzden"): opacity:0 bir elemani GORUNMEZ yapar ama TIKLANABILIR birakir - hayalet arac cubugu emoji panelinin ustune binip tiklamalari yutuyordu, kullanici emoji secemiyordu. Gorunmez olan tiklanamaz da olmali. Ayrica mesajin kendi hover zemini de sussun: panel acikken imlec panele giderken yol uzerindeki mesajlar yanip soner, ekran kirli gorunurdu. */ .q-msg-tools .t { color: var(--q-muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 7px; } .q-msg-tools .t:hover { background: var(--q-hover); } .q-msg-tools .t:hover { color: var(--q-strong); } .q-msg-tools .t.del:hover { color: var(--q-danger); } .q-msg-tools .t.on { color: var(--q-amber); } /* ---- bildirim sekmeleri (#19) ---- */ .q-inbox-tabs { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--q-divider); margin-bottom: 4px; } .q-inbox-tab { flex: 1; text-align: center; font-size: 12px; padding: 6px 4px; border-radius: 7px; cursor: pointer; color: var(--q-muted); white-space: nowrap; } .q-inbox-tab:hover { background: var(--q-hover); color: var(--q-text); } .q-inbox-tab.on { background: var(--q-selected); color: var(--q-strong); font-weight: 600; } .q-inbox-empty { font-size: 12px; color: var(--q-faint); padding: 12px 10px; text-align: center; } .q-inbox-list { max-height: 340px; overflow-y: auto; } .q-editbox { width: 100%; background: var(--q-input-bg); border: none; outline: none; border-radius: 8px; padding: 8px 10px; color: var(--q-text); font-size: 14px; font-family: inherit; margin-top: 2px; } .q-edit-hint { font-size: 11px; color: var(--q-faint); margin-top: 3px; } /* ---- DM list ---- */ .q-dmrow { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; color: var(--q-muted); font-size: 14px; cursor: pointer; } .q-dmrow:hover { background: var(--q-hover); color: var(--q-text); } .q-dmrow.sel { background: var(--q-selected); color: var(--q-strong); } .q-dmrow .q-dmpin { opacity: 0; color: var(--q-muted); display: inline-flex; flex: none; border-radius: 5px; } .q-dmrow:hover .q-dmpin { opacity: 0.6; } .q-dmrow .q-dmpin:hover { opacity: 1; color: var(--q-accent); } .q-dmrow .q-dmpin.on { opacity: 1; color: var(--q-accent); } /* #17b: DM listesinde "arkadaş değil" belirteci — üstü çizili kişi ikonu (hep hafif görünür, üzerine gelince kırmızılaşır + title "Arkadaş Değilsiniz"). Arkadaşsa ikon hiç çizilmez. */ .q-dmrow .q-dmrow-nf { opacity: .65; color: var(--q-muted); display: inline-flex; flex: none; cursor: default; } .q-dmrow .q-dmrow-nf:hover { opacity: 1; color: var(--q-danger); } /* KAPAT (X) — pin gibi hover'da belirir; kırmızıya döner. */ .q-dmrow .q-dmclose { opacity: 0; color: var(--q-muted); display: inline-flex; flex: none; border-radius: 5px; cursor: pointer; } .q-dmrow:hover .q-dmclose { opacity: 0.6; } .q-dmrow .q-dmclose:hover { opacity: 1; color: var(--q-danger); } /* Dokunmatikte hover yok — pin + kapat HEP hafif görünür (review bulgusu: mobilde erişilemezdi). */ @media (hover: none) { .q-dmrow .q-dmpin, .q-dmrow .q-dmclose { opacity: 0.55; } } .q-dmadd { display: inline-flex; cursor: pointer; color: var(--q-faint); border-radius: 5px; padding: 1px; } .q-dmadd:hover { color: var(--q-strong); background: var(--q-hover); } /* ---- arkadaşlar (#30) ---- */ .q-friends-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--q-text); font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 2px; } .q-friends-btn:hover { background: var(--q-hover); } .q-friends-btn.on { background: var(--q-selected); color: var(--q-strong); } /* #1: Arkadaşlar merkez içerikte (inline panel) */ .q-friends-page { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 26px 24px; } .q-friends-page-inner { width: 100%; max-width: 720px; } .q-friends-page-inner .q-friends-body { max-height: none; overflow: visible; } .q-friends-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--q-danger); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .q-friend-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; } .q-friend-row:hover { background: var(--q-hover); } /* ---- tab overflow measurer (hidden) ---- */ .q-tabs-measure { position: absolute; top: 0; left: -9999px; display: flex; align-items: flex-end; gap: 4px; visibility: hidden; pointer-events: none; white-space: nowrap; } /* ---- voice ---- */ .q-voicestage { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 16px; align-content: start; overflow-y: auto; } .q-vtile { background: var(--q-rail-bg); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 10px; border: 2px solid transparent; } .q-vtile.speaking { border-color: var(--q-online); } .q-vav { width: 56px; height: 56px; font-size: 20px; } .q-vname { font-size: 13px; color: var(--q-strong); display: flex; align-items: center; gap: 5px; } .q-voicebar { height: 64px; display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; border-top: 0.5px solid var(--q-divider); } .q-vctl { width: 46px; height: 46px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--q-input-bg); color: var(--q-strong); cursor: pointer; } /* Izgara dugmesindeki "3x3" etiketi: ikonun altinda minik yazi (2026-08-11). Dugme dairesel oldugu icin dikey yigin + kucuk punto; boyut degismesin diye satir yuksekligi kilitli. */ .q-vctl:has(.q-vctl-sub) { flex-direction: column; gap: 1px; } .q-vctl-sub { font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .2px; color: var(--q-muted); } .q-vctl:disabled { opacity: 0.4; cursor: default; } /* #3: uzak-sekme modunda medya kontrolleri pasif */ .q-vctl.off { background: var(--q-danger); color: #fff; } .q-vctl.leave { background: var(--q-danger); color: #fff; } .q-vctl.cam { background: var(--q-online); color: #fff; } /* #1: kamera açıkken yeşil */ /* Herkesi sustur AKTIF: turuncu susturmanin karo rozetiyle ayni renk ailesi (2026-08-12). */ .q-vctl.orange { background: rgba(230,140,30,.95); color: #1b1206; } /* DM BASLIGINDAKI ARAMA KUMANDALARI (2026-08-12): kapatma dugmesinin solunda kucuk bir grup. Dar ekranda baslik tasmasin diye ekran-paylas 560px altinda gizlenir — mobilde getDisplayMedia zaten yok, yani orada buton kosulla da cizilmiyor; bu kural tabletlerdeki ara genislikler icin. */ /* SISTEM SATIRI (2026-08-12): cevapsiz arama gibi OLAY kayitlari. Avatar/baslik/rozet yok — Discord'daki arama satirinin esi. Mesaj satirlariyla ayni sol hizada dursun diye avatar genisligi kadar (38px + bosluk) girinti verilir; boylece sohbet kolonu "kayik" gorunmez. */ .q-sysmsg { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px 3px 52px; font-size: 13px; color: var(--q-muted); margin-top: 10px; } .q-sysmsg-t { min-width: 0; } .q-sysmsg-t .gg-emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; } .q-sysmsg-time { font-size: 11px; color: var(--q-faint); flex: none; } /* EL KALDIRAN KARO (2026-08-12): rozet sol USTTE — sag ust zoom/pin/sustur dugmelerinin yeri, turuncu susturma rozeti de solda ama ALTTA degil USTTE oldugundan cakismasin diye el biraz asagi kaydirilir kural gerekirse. Cerceve amber: konusan (yesil) ve odaklanan (accent) durumlarindan ayirt edilebilsin. */ .q-vidtile.hand { border-color: #e5a13a; } /* EKRAN SESI SUSTURMA — paylasan kisinin karosunda, kirmizi "durdur"un YANINDA (2026-08-12). `.own` ALT-ORTADA duruyor (bottom:10px; left:50%; translateX(-50%)), dikey ortali DEGIL — bu yuzden ses dugmesi ayni alt hizada ve merkezden 40px saga kaydirilir (durdur 48px genis, yarisi 24 + 16px bosluk). `transform` hover'da da YENIDEN yazilmali: `.own:hover` kendi translateX(-50%)'ini geri getirip dugmeyi ortaya atardi. */ .q-vidstop.own.audio { left: 50%; right: auto; bottom: 10px; top: auto; width: 40px; height: 40px; background: rgba(0,0,0,.55); transform: translateX(40px); } .q-vidstop.own.audio:hover { background: rgba(0,0,0,.78); transform: translateX(40px) scale(1.06); } .q-vidstop.own.audio.off { background: var(--q-danger); } /* Kendi avatar karosunda KAMERAYI AC — yesil, "durdur"un kirmizisiyla karismasin (2026-08-12). */ .q-vidstop.own.camon { background: var(--q-online); } .q-vidstop.own.camon:hover { background: color-mix(in srgb, var(--q-online) 85%, #fff); } /* Ses HIC yoksa (pencere paylasimi / tarayici vermedi): dugme durur ama PASIF — gorunmez bir dugme sebebi anlatmaz, pasif olan tooltip'le anlatir. */ .q-vidstop.own.audio.none { opacity: .45; cursor: default; } .q-vidstop.own.audio.none:hover { background: rgba(0,0,0,.55); transform: translateX(40px); } /* El kuyrugundaki sira numarasi (2026-08-12): "1 - fatih". */ .q-handq-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-right: 6px; padding: 0 4px; border-radius: 6px; background: var(--q-accent); color: #fff; font-size: 11px; font-weight: 800; } .q-vidhand { position: absolute; left: 6px; top: 6px; z-index: 6; pointer-events: none; width: 26px; height: 26px; border-radius: 50%; background: #e5a13a; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.45); } .q-vidhand .gg-emoji { width: 17px; height: 17px; } /* EL KALKINCA UCU YAN YANA (2026-08-12, kullanici: "el kaldirinca sabitle butonunun ustune biniyor, el kalkinca 3u de yan yana olsun"). Sol ust kosede uc oge var ve ikisi ayni noktadaydi: el (6px) ile sabitle (6px) ust uste biniyordu, sustur ise 36px'teydi. El VARKEN digerleri birer slot saga kayar; el yokken yerlesim aynen eskisi gibi kalir (kural yalniz `.hand` altinda kosuyor). Slot genisligi 30px = 26px dugme + 4px bosluk. */ .q-vidtile.hand .q-vidpin { left: 36px; } .q-vidtile.hand .q-vidmute { left: 66px; } /* ---- EL KALKIKKEN GOGLIS'LER SACILIR (2026-08-12, kullanici: widget'ta A varyanti + 16 parcacik + "goglisler azicik daha belli olsun") ---- TASARIM: cerceve YERINDE kalir, salyangozlar kosELERDE dogup ICERI dogru suzulur. YON ICERIDIR CUNKU `.q-vidtile` `overflow:hidden` — disari ucan parcacik karonun kenarinda KIRPILIYOR ve efekt gorunmez oluyordu (ilk denemede olculdu). Iceri suzulmek hem tam gorunur hem de karoyu/komsulari hic oynatmaz. DONGU TAMAMEN CSS: her parcacigin kendi suresi ve gecikmesi var, `infinite` ile doner. JS zamanlayici ve DOM uretimi YOK — 9 karo x 16 parcacik ayni anda donse bile is yalnizca transform+opacity, ikisi de kompozitorde kosar (layout/paint tetiklemez). DEGERLER SABIT (sunucuda rastgele uretilseydi her render'da animasyon bastan baslardi; el kalkikken Home presence degisimlerinde sik ciziliyor). */ .q-hfx { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .q-hfx > i { position: absolute; width: 14px; height: 14px; opacity: 0; will-change: transform, opacity; animation-name: q-hfx-fly; animation-timing-function: cubic-bezier(.15,.7,.3,1); animation-iteration-count: infinite; /* SARI SALYANGOZ (2026-08-12, kullanici: "goglislerde sari renkte olsun") — cerceveyle ayni amber ailesinde dursun diye. NEDEN FILTRE, YENI CIZIM DEGIL: maskot salyangoz sprite'ta marka mavisi #1263E6'da KILITLI (2026-07-30 emoji renk turu karari) ve o renk sprite'a KALICI basili, yani `fill`/`currentColor` ile disaridan degistirilemez. Kendi salyangozumuzu cizmek gercek Goglis sanatindan kopmak olurdu; hue-rotate ise CIZIMI aynen korur, yalnizca rengi cevirir. Mavi ~217deg -> amber ~36deg, yani +179deg. Koyu kontur/mürekkep neredeyse doygunluksuz oldugu icin donusten etkilenmez. Filtre YALNIZ bu parcaciklara uygulanir; sohbetteki, secicideki ve reaction'daki salyangoz mavi kalir. */ filter: hue-rotate(179deg) saturate(1.08) brightness(1.06); } .q-hfx > i .gg-emoji { width: 100%; height: 100%; display: block; } @keyframes q-hfx-fly { 0% { opacity: 0; transform: translate(0,0) scale(.25) rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); } } /* Cerceve de ayni ritimde nefes alir (widget'taki "breathe"). */ .q-hfx > i:nth-child(1) { left: 0%; top: 0%; --dx: 23.1px; --dy: 28.9px; --rot: -64deg; animation-duration: 2.19s; animation-delay: 0.88s; } .q-hfx > i:nth-child(2) { left: 100%; top: 0%; --dx: -24.4px; --dy: 13.1px; --rot: -9deg; animation-duration: 1.68s; animation-delay: 0.22s; } .q-hfx > i:nth-child(3) { left: 0%; top: 100%; --dx: 42.1px; --dy: -20.1px; --rot: -41deg; animation-duration: 2.29s; animation-delay: 2.27s; } .q-hfx > i:nth-child(4) { left: 100%; top: 100%; --dx: -35.0px; --dy: -42.7px; --rot: -68deg; animation-duration: 2.54s; animation-delay: 0.70s; } .q-hfx > i:nth-child(5) { left: 0%; top: 0%; --dx: 19.0px; --dy: 18.8px; --rot: 47deg; animation-duration: 1.80s; animation-delay: 1.40s; } .q-hfx > i:nth-child(6) { left: 100%; top: 0%; --dx: -35.8px; --dy: 33.9px; --rot: -65deg; animation-duration: 1.67s; animation-delay: 0.49s; } .q-hfx > i:nth-child(7) { left: 0%; top: 100%; --dx: 38.4px; --dy: -28.9px; --rot: 12deg; animation-duration: 2.10s; animation-delay: 0.72s; } .q-hfx > i:nth-child(8) { left: 100%; top: 100%; --dx: -50.0px; --dy: -29.1px; --rot: 11deg; animation-duration: 2.18s; animation-delay: 2.10s; } .q-hfx > i:nth-child(9) { left: 0%; top: 0%; --dx: 35.3px; --dy: 47.4px; --rot: -57deg; animation-duration: 2.06s; animation-delay: 1.82s; } .q-hfx > i:nth-child(10) { left: 100%; top: 0%; --dx: -26.5px; --dy: 14.4px; --rot: 25deg; animation-duration: 2.44s; animation-delay: 1.38s; } .q-hfx > i:nth-child(11) { left: 0%; top: 100%; --dx: 39.4px; --dy: -43.5px; --rot: 14deg; animation-duration: 2.24s; animation-delay: 1.09s; } .q-hfx > i:nth-child(12) { left: 100%; top: 100%; --dx: -59.6px; --dy: -36.4px; --rot: 24deg; animation-duration: 1.67s; animation-delay: 1.68s; } .q-hfx > i:nth-child(13) { left: 0%; top: 0%; --dx: 54.3px; --dy: 41.0px; --rot: -32deg; animation-duration: 2.02s; animation-delay: 1.60s; } .q-hfx > i:nth-child(14) { left: 100%; top: 0%; --dx: -22.7px; --dy: 14.5px; --rot: -57deg; animation-duration: 1.66s; animation-delay: 1.84s; } .q-hfx > i:nth-child(15) { left: 0%; top: 100%; --dx: 21.2px; --dy: -19.9px; --rot: 55deg; animation-duration: 1.69s; animation-delay: 1.08s; } .q-hfx > i:nth-child(16) { left: 100%; top: 100%; --dx: -47.8px; --dy: -38.3px; --rot: 54deg; animation-duration: 1.91s; animation-delay: 1.00s; } @keyframes q-hand-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,161,58,0); } 50% { box-shadow: 0 0 0 4px rgba(229,161,58,.20); } } .q-vidtile.hand { animation: q-hand-breathe 2.4s ease-in-out infinite; } /* Hareket duyarliligi: sonsuz donen hareket rahatsiz edici olabilir. Cerceve SARI KALIR, yani bilgi kaybolmaz — yalnizca hareket durur. */ @media (prefers-reduced-motion: reduce) { .q-hfx { display: none; } .q-vidtile.hand { animation: none; } } @keyframes q-hand-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .q-vidhand { animation: q-hand-pop .28s ease-out; } .q-callctl { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; } .q-callctl .q-vctl.sm { width: 30px; height: 30px; } @media (max-width: 560px) { .q-callctl .q-vctl.sm:nth-child(3) { display: none; } } /* ---- Davet kartı (Discord-vari embed) ---- */ .q-invcard { max-width: 340px; margin-top: 6px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; overflow: hidden; } .q-invcard-banner { height: 92px; background-size: cover; background-position: center; } .q-invcard-banner-fallback { display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--q-logo-hi, #6FE6FF), var(--q-logo-lo, #0A66DB)); } .q-invcard-body { padding: 12px 14px 14px; } .q-invcard-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; } .q-invcard-ico { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; } .q-invcard-ico-txt { display: flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-weight: 700; font-size: 16px; } .q-invcard-name { font-size: 15px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-invcard-stats { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--q-muted); margin-top: 3px; } .q-invcard-on, .q-invcard-off { width: 8px; height: 8px; border-radius: 50%; flex: none; } .q-invcard-on { background: var(--q-online); } .q-invcard-off { background: var(--q-faint); margin-left: 8px; } .q-invcard-created { font-size: 11.5px; color: var(--q-faint); margin-top: 2px; } .q-invcard-join { width: 100%; padding: 9px 0; border: 0; border-radius: 9px; background: var(--q-online); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .q-invcard-join:hover { background: color-mix(in srgb, var(--q-online) 85%, #000); } /* ---- Anketler (Discord-vari) ---- */ /* C6 LFG "Takım Arkadaşı Aranıyor" kartı */ .q-lfg { max-width: 420px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; padding: 12px 14px; margin-top: 2px; } .q-lfg.full { border-color: rgba(74,169,96,.55); background: linear-gradient(180deg, rgba(74,169,96,.10), transparent); } .q-lfg-head { display: flex; align-items: center; gap: 10px; } .q-lfg-game { font-size: 15px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-lfg-sub { font-size: 12px; color: var(--q-muted); } .q-lfg-fulltag { flex: none; background: #4aa960; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; } .q-lfg-note { font-size: 12.5px; color: var(--q-text); margin-top: 8px; background: var(--q-input-bg); border-radius: 8px; padding: 6px 9px; } .q-lfg-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .q-lfg-slot { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-size: 12px; font-weight: 700; } .q-lfg-slot img { width: 100%; height: 100%; object-fit: cover; } .q-lfg-slot.empty { background: transparent; border: 1.5px dashed var(--q-divider); color: var(--q-muted); } .q-lfg-ini { line-height: 1; } .q-lfg-foot { margin-top: 11px; } .q-lfg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 9px; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--q-accent); color: #fff; transition: filter .15s; } .q-lfg-btn:hover { filter: brightness(1.08); } .q-lfg-btn.leave { background: var(--q-input-bg); color: var(--q-text); } .q-lfg-btn.go { background: #4aa960; } .q-lfg-btn[disabled] { background: var(--q-input-bg); color: var(--q-muted); cursor: default; filter: none; } /* Süre sayacı çipi (canlı geri sayım, goglisTimers) + süresi dolan kartın soluk hâli. */ .q-lfg-timer { font-variant-numeric: tabular-nums; color: var(--q-muted); white-space: nowrap; } .q-lfg-timer.over { color: var(--q-danger-soft); font-weight: 600; } .q-lfg.expired { opacity: .62; filter: saturate(.7); } .q-lfg.expired .q-lfg-slots, .q-lfg.expired .q-lfg-note { opacity: .9; } /* E-POSTA DOĞRULAMA BANDI (2026-07-30): boydan boya, üst şeridin ÜSTÜNDE. .q-root grid/flex kolonu olduğundan bant satır olarak akar — üst şerit aşağı kayar, hiçbir şeyin üstünü kapatmaz (position:fixed kullanılsa dock/menü z-index'leriyle uğraşmak gerekirdi). Uyarı tonu accent DEĞİL amber: "hata" değil "eksik iş" sinyali. */ .q-verifybar { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 14px; font-size: 13px; line-height: 1.35; background: #6b4a12; color: #ffe9b8; border-bottom: 1px solid rgba(0, 0, 0, .25); } .q-verifybar-txt { flex: 1; min-width: 0; } .q-verifybar-btn { flex: none; padding: 5px 13px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; background: #ffd479; color: #3a2705; border: 0; transition: filter .15s; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; } .q-verifybar-btn:hover:not([disabled]) { filter: brightness(1.08); } .q-verifybar-btn[disabled] { opacity: .65; cursor: default; } /* VPN/PROXY BİLGİ BANDI (2026-08-04) — q-verifybar'ın kardeşi, aynı akış (.q-root flex kolonu), ama MAVİ: amber "eksik iş" demek, bu ise yalnız bilgi. Kapatma düğmesi var çünkü tespit bir SEZGİ; yanlış pozitifte kullanıcıyı bandın altında bırakmayız. */ .q-vpnbar { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 14px; font-size: 13px; line-height: 1.35; background: #123a5e; color: #cfe6ff; border-bottom: 1px solid rgba(0, 0, 0, .25); } .q-vpnbar-txt { flex: 1; min-width: 0; } .q-vpnbar-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: inherit; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; } .q-vpnbar-x:hover { background: rgba(255, 255, 255, .14); } @media (max-width: 620px) { .q-vpnbar { font-size: 12px; padding: 7px 10px; } } /* Dar ekran: metin sarsın, buton alta düşmesin (tek satırda sıkışmaktan iyidir). */ @media (max-width: 620px) { .q-verifybar { flex-wrap: wrap; gap: 6px; font-size: 12px; } .q-verifybar-txt { flex: 1 1 100%; } } /* #6 SKELETON (2026-07-30): yükleme sırasında "boş" göstermek yanlış bilgiydi ("Henüz mesaj yok" → sonra mesajlar patlıyordu). Yalnız transform/opacity animasyonu (layout tetiklemez). .q-sk-wrap 160ms GECİKMEYLE açılır: yerelde/hızlı bağlantıda iskelet HİÇ görünmez, yavaş bağlantıda devreye girer. prefers-reduced-motion'da parıltı durur, iskelet durur (kaybolmaz). */ /* DİKKAT — taban durum GÖRÜNÜR, gecikme animasyonun `both` fill'inden gelir. `opacity:0` + `forwards` yazımı da aynı görüntüyü verir AMA animasyonlar hiç koşmazsa (kullanıcı/eklenti stil dosyası `animation:none`, ya da arka plan sekmesinde donmuş saat) iskelet KALICI görünmez kalır → sohbet paneli bomboş görünür. Böyle yazılınca en kötü senaryo "iskelet hemen görünür" (kısa parlama) olur; bozulma güvenli tarafa düşer. */ .q-sk-wrap { animation: q-sk-in .14s ease-out 160ms both; } @keyframes q-sk-in { from { opacity: 0; } to { opacity: 1; } } .q-sk { background: var(--q-input-bg); border-radius: 6px; position: relative; overflow: hidden; } .q-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); animation: q-sk-sweep 1.3s ease-in-out infinite; } @keyframes q-sk-sweep { to { transform: translateX(100%); } } /* GÖRSEL İSKELETİ (2026-08-06, kullanıcı: "yüklenen yerde skeleton olsun"): görsel inene dek kutusunda parıltı. IMG pseudo-element TAŞIMAZ → parıltı background animasyonuyla; goglis.js yüklenince .q-imgok basar, animasyon durur. YALNIZ opak (cover/foto) görseller listede — şeffaf PNG'lerde (çıkartma) zemin kalıcı sızardı. Yük olayı kaçarsa bile zarar yok: opak görsel zemini zaten tamamen örter. */ img.q-av:not(.q-imgok), img.q-mini:not(.q-imgok), img.q-pcard2-av:not(.q-imgok), .q-gifpick-grid img:not(.q-imgok), img.q-gifmsg:not(.q-imgok), img.q-embed-img:not(.q-imgok), /* NOT: q-stagethumb bu listeden CIKARILDI (2026-08-18) — bekleyen dosyanin kucuk resmi CIHAZDAN gelir (blob), aginda inecek bir sey yoktur; parildayan gri iskelet orada yalnizca "bir seyler yukleniyor" yanilgisi uretiyordu. */ img.q-reply-thumb:not(.q-imgok) { background: linear-gradient(100deg, var(--q-input-bg) 40%, var(--q-hover) 50%, var(--q-input-bg) 60%) 0 0 / 200% 100%; animation: q-imgsk 1.3s ease-in-out infinite; } @keyframes q-imgsk { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { img:not(.q-imgok) { animation: none; } } @media (prefers-reduced-motion: reduce) { .q-sk-wrap { animation-duration: .01s; } .q-sk::after { animation: none; } } .q-sk-msg { display: flex; gap: 12px; padding: 9px 18px; } .q-sk-av { width: 38px; height: 38px; border-radius: 50%; flex: none; } .q-sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; } .q-sk-line { height: 10px; } .q-sk-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; } .q-sk-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; } /* #7 Mesaj içi ROL BUTONLARI — rolün rengi --q-rbc ile satır içi gelir (rol rengi kullanıcı verisi; sunucu ^#rrggbb doğrular, bkz. UpdateServerRoleAsync). "on" = bu rol bende var (✓). */ .q-rolebtns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .q-rolebtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--q-input-bg); color: var(--q-strong); border: 1px solid var(--q-divider); transition: background .15s, border-color .15s, filter .15s; } .q-rolebtn:hover { border-color: var(--q-rbc, var(--q-accent)); filter: brightness(1.06); } .q-rolebtn .q-rb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--q-rbc, var(--q-accent)); flex: none; } .q-rolebtn.on { background: color-mix(in srgb, var(--q-rbc, var(--q-accent)) 20%, transparent); border-color: var(--q-rbc, var(--q-accent)); } .q-rolebtn.stale { opacity: .5; cursor: default; text-decoration: line-through; } .q-rolebtn.stale:hover { filter: none; border-color: var(--q-divider); } /* Kart kurma diyaloğu: rol seçim satırları + buton etiketi girişi. */ .q-rb-pick { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .q-rb-pickrow { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 8px; } .q-rb-pickrow.on { background: var(--q-input-bg); } .q-rb-pickrow .q-rb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .q-rb-label { max-width: 170px; margin-left: auto; } .q-rb-hint { margin-top: 12px; font-size: 12px; color: var(--q-muted); line-height: 1.45; } .q-poll { max-width: 460px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; padding: 12px 14px; margin-top: 2px; } .q-poll-q { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--q-strong); margin-bottom: 10px; } .q-poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 5px 0; padding: 8px 11px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-strong); font-size: 13.5px; cursor: pointer; overflow: hidden; font-family: inherit; text-align: left; } .q-poll-opt:hover:not(.ended) { border-color: var(--q-accent); } .q-poll-opt.mine { border-color: var(--q-accent); } .q-poll-opt.ended { cursor: default; opacity: 0.85; } .q-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--q-accent) 20%, transparent); transition: width 0.35s ease; pointer-events: none; } .q-poll-optlabel { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; } .q-poll-opt.mine .q-poll-optlabel { color: var(--q-accent); font-weight: 600; } .q-poll-cnt { position: relative; font-size: 12px; font-weight: 700; color: var(--q-muted); flex: none; } .q-poll-foot { margin-top: 8px; font-size: 11.5px; color: var(--q-muted); } .q-poll-create .q-poll-optrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .q-poll-multi { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--q-strong); cursor: pointer; } /* Grup DM sağ paneli: sesli arama butonu + aramadayım bandı */ .q-group-call { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 8px); margin: 4px 4px 10px; padding: 9px 0; border: 0; border-radius: 10px; background: var(--q-online); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .q-group-call:hover { background: color-mix(in srgb, var(--q-online) 85%, #000); } .q-group-incall { display: flex; align-items: center; gap: 8px; margin: 4px 4px 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--q-online) 12%, transparent); color: var(--q-online); font-size: 12.5px; font-weight: 600; } /* Birebir DM sağ paneli: arkadaşın profil kartı (aksi halde boş duran kanallar kolonu) */ /* (2026-07-31, kullanıcı: "sanki oraya yapıştırılmış gibi") Kart artık sütunun İÇİNDEN çıkıyor: kendi zemini yok (sütunun zeminini kullanır), kenar boşluğu/köşe yuvarlaması yok → kapak görseli kolonun kenarlarına dayanır. Eskiden --q-panel-bg ile sütundan bir ton koyuydu ve dikdörtgen bir blok gibi duruyordu. Avatar halkası da sütun zeminiyle aynı renge çevrildi, yoksa halka "eski kart zemini" rengiyle kalır ve yama gibi görünürdü. */ .q-peer { display: flex; flex-direction: column; margin: 0; border-radius: 0; background: transparent; overflow: hidden; } .q-peer-banner { height: 64px; flex: none; } .q-peer-avwrap { position: relative; width: 72px; height: 72px; margin: -34px 0 0 12px; flex: none; } .q-peer-av { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--q-side-bg); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: #fff; object-fit: cover; } .q-peer-avwrap .q-dot { width: 14px; height: 14px; right: 2px; bottom: 2px; border-width: 3px; } .q-peer-body { padding: 8px 14px 14px; min-width: 0; } .q-peer-name { font-size: 16px; font-weight: 600; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; } .q-peer-presence { font-size: 12px; color: var(--q-muted); margin-top: 1px; } .q-peer-statustext { font-size: 12.5px; color: var(--q-text); margin-top: 6px; white-space: pre-wrap; overflow-wrap: break-word; } .q-peer-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--q-faint); margin: 12px 0 4px; } .q-peer-val { font-size: 12.5px; color: var(--q-text); } .q-peer-mutual { display: flex; align-items: center; gap: 7px; padding: 4px 6px; margin: 0 -6px; border-radius: 7px; font-size: 12.5px; color: var(--q-text); cursor: pointer; } .q-peer-mutual:hover { background: var(--q-hover); } /* #22: DM yan panel eylem satırı — Ara (kare ikon) + Profil (genişleyen) */ .q-peer-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; } .q-peer-view { flex: 1; padding: 8px 0; border: 0; border-radius: 9px; background: var(--q-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .q-peer-view:hover { filter: brightness(1.08); } .q-peer-call { flex: none; width: 42px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-online); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .q-peer-call:hover:not(:disabled) { background: var(--q-hover); } .q-peer-call:disabled { opacity: 0.4; cursor: not-allowed; color: var(--q-muted); } /* ---- DM ARAMASI DUZENI (2026-08-12) ---- q-dmc-on = bir DM aramasindayim. Sohbet varsayilan ACIK ama KUCUK: mesaj listesi ~%10 (--q-dmchat-h ayracla degisir), sahne kalan her seyi alir ve karolar ortalanir. q-dmc-nochat = sohbet kapali: mesajlar/composer gizli, sahne tam ekran, karolar buyuk (iki sutun = "mantiksal 2x2") ve dikey+yatay ortali. */ html.q-dmc-on:not(.q-dmc-nochat) .q-chat.q-dmcallchat .q-messages { /* %30 sohbet / %70 sahne (2026-08-12 — ilk istek 90/10'du, ayni gun 70/30'a cevrildi). SHRINK SIFIR (ayni gun saha hatasi: "cizgiye basinca yukari atiyor, mouse farkli yerde kaliyor"). `flex: 0 1` idi: buyuk ekran karosu sahnenin flex-basis'ini (auto=icerik) sisirince toplam tasiyor, flex kucultme payini BASIS'e orantili dagitiyor ve mesaj listesi yazdigimiz yukseklikten DAHA KISA ciziliyordu. Sonuc: basista ani ziplama (basis %30'dan px'e donunce pay yeniden dagitiliyor) + suruklerken imlecin ayractan kopmasi (1px fare = 1px basis ama ~0.6px gercek yukseklik). Shrink 0 = yazilan deger OTORITE; sahne zaten flex:1 + min-height:0, kalani o emer. */ flex: 0 0 var(--q-dmchat-h, 30%); min-height: 56px; } html.q-dmc-on .q-chat.q-dmcallchat .q-videostage { flex: 1 1 auto; max-height: none; min-height: 0; /* SAFE center: tasan sarmali flex'te duz `center` icerigi kaydirma alaninin DISINA iter ve ust karolara ulasilamaz (taban kuralin 2026-08-10 dersi — burada da gecerli). */ align-content: safe center; justify-content: center; } html.q-dmc-on.q-dmc-nochat .q-chat.q-dmcallchat .q-messages, html.q-dmc-on.q-dmc-nochat .q-chat.q-dmcallchat .q-composer, /* Sohbet kapaliyken karolar BUYUK, iki sutun: genis odada 2x2 dizilir (DM zaten en cok 5 kisi). */ html.q-dmc-on.q-dmc-nochat .q-videostage.call .q-vidtile { width: min(44%, 640px); } /* Ayrac cizgisi — yalniz DM aramasi + sohbet ACIKKEN cizilir (markup kosullu). */ /* Kanal ayracı: sahne tavana uyar, taşan karolar sahnenin İÇİNDE kayar (2026-08-18). */ .q-chat:not(.q-dmcallchat) .q-videostage { max-height: var(--q-stageh, none); overflow-y: auto; } /* Video odasında sohbet GÖRÜNÜRKEN de tavan geçerli — sohbet-gizli modunun `max-height:none` kuralı (0,4,1) genel kuralı eziyordu (ölçüldü); aynı özgüllükte, kaynakça sonra = kazanır. */ html.q-vroom-on.q-vroom-chat .q-chat .q-videostage { max-height: var(--q-stageh, calc(85dvh / var(--q-zoom, 1))); overflow-y: auto; } /* Sohbet gizliyken altta sohbet yok — ayraç anlamsız, çizilmez. */ html.q-vroom-on:not(.q-vroom-chat) .q-dmsep { display: none; } .q-dmsep { height: 9px; flex: none; cursor: row-resize; position: relative; background: transparent; touch-action: none; } .q-dmsep::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--q-divider); } .q-dmsep:hover::after, .q-dmsep:active::after { background: var(--q-accent); height: 2px; top: 3.5px; } /* ---- VIDEO ODASI YERLESIMI (2026-08-12) ---- q-vroom-on = bir video odasina bagliyim (Home JS'e yazar). Varsayilan: SOHBET GIZLI, sahne ortali; uye/kanal listeleri ACIK. Uc tercih de localStorage'da kalici (goglisVRoom). display:none KULLANILIYOR, unload degil: paneller kapaliyken de Blazor agacinda canli kalir — acildiklarinda hicbir sey yeniden yuklenmez. */ html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-messages, html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-composer, html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-pinbar { display: none; } /* Sohbet gizliyken sahne kalan alani DOLDURUR ve karolar dikey+yatay ORTALANIR (kullanici: "tam dikey ve yatay ortali contentte gormek isteyebilir"). */ html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-videostage { flex: 1 1 auto; max-height: none; align-content: center; justify-content: center; } /* Panel gizleme — yalniz sunucu modunun uc kolonu. */ html.q-vroom-on.q-vroom-nomem .q-main.q-srv > .q-online { display: none; } html.q-vroom-on.q-vroom-noch .q-main.q-srv > .q-channels { display: none; } /* Baslik ucundaki toggle'lar: uye dugmesi uyelerin OLDUGU tarafta durur (varsayilan SOL), kanal dugmesi kanallarin tarafinda (SAG). Kolon takasinda (q-sideswap) dugmeler de takas olur — flex `order` ile: diger baslik cocuklari 0'da kalir, -1 en basa, 100 en sona gider. */ .q-vt { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--q-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .q-vt:hover { background: var(--q-hover); color: var(--q-text); } .q-vt.off { color: var(--q-faint); } .q-vt-mem { order: -1; margin-right: 4px; } .q-vt-ch { order: 100; margin-left: 4px; } html.q-sideswap .q-vt-mem { order: 100; margin: 0 0 0 4px; } html.q-sideswap .q-vt-ch { order: -1; margin: 0 4px 0 0; } /* Uye kolonu toggle'i KOLONUN OLDUGU UCTA durur (2026-08-15, kullanici: "sagda tikliyorum sol kapaniyor, ne alaka"): Arena'da uyeler solda -> dugme sol ucta, Klasik'te (sideswap) sagda -> sag ucta. vr-mem/vr-ch ile ayni desen. */ .q-memtoggle { order: -1; margin-right: 4px; } html.q-sideswap .q-memtoggle { order: 100; margin: 0 0 0 4px; } /* SOHBET IPUCU — SPOT ISIGI (2026-08-12, kullanici: "ekran koyulassin, o ikona odaklasin ve ok gostersin"). Ilk surum yalniz baloncuktu; kullanici sahada denedi ve yeterince dikkat cekmedigini soyledi. Simdi: tam ekran karartma (z-1300) + dugme sarmali z-1302'ye cikar (perde herkesi karartir, yalniz dugme + ok + baloncuk aydinlik kalir) + halka isiltisi. Perde GORUNUR ve tiklanabilir (tikla = kapat) + 6 sn'de kendini kapatir — "asili gorunmez perde" hata sinifina BILEREK girmiyor. */ .q-vr-coach { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.62); cursor: pointer; animation: q-coach-in .25s ease-out; } @keyframes q-coach-in { from { opacity: 0; } to { opacity: 1; } } .q-vr-wrap { position: relative; display: inline-flex; } .q-vr-spot { z-index: 1302; } .q-vr-spot .q-vctl { background: var(--q-hover); color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent), 0 0 24px 8px rgba(229,161,58,.45); animation: q-spot-ring 1.2s ease-in-out infinite; } @keyframes q-spot-ring { 0%,100% { box-shadow: 0 0 0 3px var(--q-accent), 0 0 24px 8px rgba(229,161,58,.45); } 50% { box-shadow: 0 0 0 6px var(--q-accent), 0 0 34px 12px rgba(229,161,58,.6); } } /* Baloncuk dugmenin ALTINDA ortali; ustundeki ucgen OK dugmeyi isaret eder. */ .q-vt-tip { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 1302; white-space: nowrap; background: var(--q-side-bg); border: 1px solid var(--q-accent); color: var(--q-text); font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5); } .q-vt-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-bottom-color: var(--q-accent); } @media (prefers-reduced-motion: reduce) { .q-vr-spot .q-vctl { animation: none; } } /* Ping rozeti (ses dock'u + DM bandı) — tıklanır; yeşil/amber/kırmızı gecikmeye göre */ .q-ping { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--q-online) 15%, transparent); color: var(--q-online); white-space: nowrap; flex: none; } .q-ping.warn { background: rgba(216,160,60,0.15); color: #d8a03c; } .q-ping.bad { background: rgba(237,66,69,0.15); color: var(--q-danger-soft); } .q-ping-info { padding: 6px 12px 8px; font-size: 12.5px; color: var(--q-strong); max-width: 260px; } .q-ping-srv { font-weight: 600; } .q-ping-url { color: var(--q-muted); font-size: 11px; word-break: break-all; margin-top: 2px; } .q-ping-ms { margin-top: 6px; color: var(--q-muted); font-size: 12px; } .q-ping-ms b { color: var(--q-accent); } /* ---- #1 görüntülü konuşma: video sahnesi ---- */ /* ORTALI sahne (2026-07-13): kaç video olursa olsun yatayda ortalanir; tile'a tıkla = büyüt/küçült */ /* align-content: SAFE center — taşan sarmalı flex satırlarında düz `center` içeriği kaydırma alanının DIŞINA itiyor ve üstteki karolara hiç ulaşılamıyor (klasik flex tuzağı). Karo boyutu artık tutamaçla büyüyebildiği için bu durum kolayca oluşuyor. `safe` sığdığı sürece ortalar, taşınca başa hizalar. (2026-08-10, 9. tur adayı.) */ .q-videostage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: safe center; gap: 10px; padding: 10px 12px 6px; background: #101116; overflow: auto; max-height: calc(85vh / var(--q-zoom, 1)); max-height: calc(85dvh / var(--q-zoom, 1)); } /* ── MOBİL TAM EKRAN SAHNE (#3, 2026-08-20: "Android'deki video ekranı iPhone'da da olsun"). Mevcut sahne 'mfull' ile tam ekrana terfi eder — Android native sahneyle aynı dil: koyu zemin, yuvarlatılmış karolar, üstte başlık+kapat, altta yuvarlak kumandalar. Karo ölçüleri: 1-2 kişi TAM GENİŞLİK alt alta, 3+ (cols2) ikili ızgara; ekran paylaşımı hep tam satır. *@ */ .q-videostage.mfull { position: fixed; inset: 0; z-index: 1290; margin: 0; border-radius: 0; background: #0F1216; padding: calc(58px + env(safe-area-inset-top, 0px)) 10px calc(104px + env(safe-area-inset-bottom, 0px)); max-height: none; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: center; align-items: stretch; overflow-y: auto; } .q-videostage.mfull.cols2 { grid-template-columns: 1fr 1fr; } .q-videostage.mfull .q-vidtile { width: 100%; aspect-ratio: auto; min-height: 240px; height: 100%; border-radius: 16px; background: #161A20; border: 1px solid rgba(255,255,255,.12); } .q-videostage.mfull.cols2 .q-vidtile { min-height: 200px; } .q-videostage.mfull .q-vidtile.screen { grid-column: 1 / -1; min-height: 220px; } /* İçerik sahneden azsa karolar dikeyde eşit büyür: 1 kişi ≈ tam sahne, 2 kişi yarı yarıya. */ .q-videostage.mfull { grid-auto-rows: minmax(240px, 1fr); } .q-videostage.mfull.cols2 { grid-auto-rows: minmax(200px, 1fr); } .q-mstage-head { position: fixed; top: 0; left: 0; right: 0; z-index: 1291; display: flex; align-items: center; gap: 9px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: #0F1216; color: #fff; } .q-mstage-t { font-size: 16px; font-weight: 600; } .q-mstage-dot { width: 8px; height: 8px; border-radius: 50%; background: #34C77B; flex: 0 0 auto; } .q-mstage-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.09); color: #C6CBD4; display: flex; align-items: center; justify-content: center; cursor: pointer; } .q-mstage-ctl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1291; display: flex; justify-content: center; gap: 16px; padding: 12px 0 calc(18px + env(safe-area-inset-bottom, 0px)); background: #0F1216; } .q-mstage-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: #2A2F38; color: #fff; cursor: pointer; } .q-mstage-btn.warn { background: #fff; color: #E5484D; } .q-mstage-btn.leave { background: #E5484D; color: #fff; } .q-mstage-btn:disabled { opacity: .45; } .q-mstage-pill { position: fixed; right: 12px; bottom: 84px; z-index: 1250; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: #161A20; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4); } /* SUNUCU VIDEO KANALINDA DA SAHNE ICERIGE YAPISIR (2026-08-12, kullanici ekran goruntusuyle: "video kanalina giris yapinca videoya gore olceklendirmedi; DM'de bu sorunu halletmistik"). ONCEKI HAL: bu kural `height: var(--q-vstage, 320px)` ile SABIT yukseklik veriyordu. Deger tutamactan geliyordu; tutamac ayni gun kaldirilinca degiskeni yazan KIMSE kalmadi ve sahne kalici olarak 320px'e kilitlendi — iki karolu bir odada karolarin altinda kapatilamayan bos bir siyah alan kaliyordu. SIMDI `height: auto`: yukseklik iceriktan gelir (DM'deki `.q-videostage.call` ile ayni davranis). Karo BOYUTU etkilenmez — o hala `--q-vstage`ten (varsayilan 320) ve sutun sayisindan turuyor, yani "konusan buyuk / digerleri kucuk" hiyerarsisi korunur; degisen tek sey KABIN bos yer kaplamamasi. Sigmayan karolar taban kuraldaki `overflow:auto` ile kayar, tavan yine %85. */ .q-videostage[style*="--q-vgrid"] { height: auto; max-height: calc(85dvh / var(--q-zoom, 1)); align-content: safe start; } /* SAHNE TUTAMACI KALDIRILDI (2026-08-12): yukseklik artik icerikten geliyor, elle boyutlandirma yok. `.q-dmresize` / `.q-chresize` (kolon tutamaclari) DURUYOR. */ /* MENU ACIKKEN ARKADAKI SURUKLEME TUTAMACLARI OLU (2026-08-12, kullanici: "ses ayarlari yaparken elim arkadaki genisletme daraltmaya dokunuyor, dokunmamasi lazim"). Fare kaydiraca giderken tutamacin uzerinden geciyor: hem `title` baloncugu aciliyor hem de yanlislikla surukleme baslayabiliyor. Perdenin z-index'ine GUVENMIYORUZ — tutamaclar farkli yigin baglamlarinda yasiyor ve biri perdenin ustune cikabiliyor. `pointer-events: none` elemani hit-test'ten TAMAMEN cikarir, yani stacking ne olursa olsun sonuc ayni. `q-menuopen` isaretini goglisMenu.sync zaten koyuyor (acik panel sayisina gore). */ html.q-menuopen .q-dmresize, html.q-menuopen .q-dmsep, html.q-menuopen .q-chresize { pointer-events: none; } /* #14 DM görüntülü aramada Discord-vari bölünme: video sahnesi ÜST yarı, mesajlar ALT yarı (YALNIZ DM+video; server voice kanalları etkilenmez, 85dvh davranışı korunur). */ /* TUTAMAC DM ARAMASINDA DA CALISIR (2026-08-12, kullanici: "o araddan tutup asagiya genisletemiyorum, dm aramasindayken oluyor ... ekran paylasimi acinca oluyor"). ONCEKI HAL: sahne `flex: 1 1 0` ile mesajlarla 50/50 bolusuyordu, dolayisiyla tutamacin yazdigi `--q-vstage` hicbir seyi surmuyordu ve tutamac `display:none` ile GIZLENMISTI — yani sorun "tutamac calismiyor" degil "bu duzende tutamac YOK"tu. SIMDI: sahne yuksekligini `--q-vstage`ten alir (sunucu ses kanallarindaki davranisin AYNISI), mesajlar kalani doldurur. Boylece tek bir davranis kalir, iki ayri duzen degil. Alt/ust sinir: mesajlar sifira ezilmesin, sahne de kaybolmasin. */ /* EKRAN PAYLASIMI ACILINCA SAHNE KENDILIGINDEN BUYUR (2026-08-12, kullanici: "ekran paylastigimda otomatik ayarlamiyor, elimde ayarliyorum, bunu otomatik yapmasi gerekiyor"). KOK NEDEN: `.q-dmsplit` (kamera/ekran acilinca devreye girer) sahneye SABIT bir flex-basis veriyordu (--q-vstage). Iki avatar karosuna gore ayarlanmis kucuk bir deger, ekran karosu geldiginde de aynen kaliyor ve genis 16:9 karo kirpiliyordu; kullanici her seferinde elle tutamaci cekmek zorunda kaliyordu. SIMDI: yukseklik ICERIKTEN gelir (`flex: 0 1 auto`), yani ekran karosu eklenince sahne kendiliginden uzar. Kullanicinin surukleyerek verdigi deger ALT SINIR olarak yasar (--q-vstage-min), ust sinir %70 — kalan yer sohbete kalir. */ .q-dmsplit .q-videostage { flex: 0 1 auto; /* `min-height` KALKTI: onu yalniz tutamac yaziyordu (--q-vstage-min), tutamac da kalkti. Yukseklik tamamen icerikten gelir; tavan asagida. */ max-height: 70dvh; align-content: start; } .q-dmsplit .q-messages { flex: 1 1 0; min-height: 0; } /* Karo genişliği TUTAMAĞA bağlı (2026-08-10, kullanıcı: "sürükleyerek boyutlandır videolarda çalışmıyor"). Tutamaç --q-vstage'i yazıyordu ama YALNIZ ekran paylaşımı (.screen) ve odaklanmış (.big) karolar onu okuyordu; normal KAMERA karolarının genişliği sabit 300px'ti, dolayısıyla video odasında sürüklemek gözle hiçbir şey değiştirmiyordu. 0.9375 katsayısı varsayılanı korur: 320px × 0.9375 = 300px (eski görünüm birebir aynı), sürükleyince artık karolar da büyür/küçülür. */ .q-vidtile { position: relative; aspect-ratio: 16 / 9; background: #17181f; border-radius: 12px; overflow: hidden; border: 2px solid transparent; width: min(100%, calc(var(--q-vstage, 320px) * 0.9375)); flex: 0 0 auto; cursor: zoom-in; } .q-vidtile.big { width: min(100%, calc(var(--q-vstage, 320px) * 1.7778)); cursor: zoom-out; } /* Konuşan çerçevesi İÇE çizilir (2026-08-18): border zaten 2px sabit ama yeşili inset gölgeyle basmak kutu ölçüsünü hiçbir durumda etkilemez ve daha belirgin durur. */ .q-vidtile.speaking { border-color: var(--q-online); box-shadow: inset 0 0 0 2px var(--q-online); } /* KONUŞAN BÜYÜR (2026-08-11, kullanıcı isteği) — yalnız VİDEO KANALINDA (`vroom`); iki kişilik DM aramasında büyüme karşı tarafı alt satıra iterdi. Sıra değişimi CSS `order` ile yapılıyor (bkz. Home.CamOrder) — DOM'da karo taşınmadığı için