/*
* ÇİZİM TEMASI — "Çizim Tuvali.dc.html" / "Çizimler.dc.html" /
* "Çizim Paylaş.dc.html" prototiplerinin Excalidraw'a giydirilmiş hâli.
* (Faz 2; ortak sözlük için bkz. TEMA REHBERİ/TEMA-REHBERI.md)
*
* Gateway (taiga-gateway/taiga.conf) bu dosyayı sub_filter ile Excalidraw'ın
* 'ine ekler; excalidraw imajına hiç dokunulmaz.
*
* TEK KURAL: yalnızca görünüm.
* - Hiçbir araç, hiçbir düğme gizlenmez. Tasarımda görünmeyen parçalar
* (kütüphane, ekstra araçlar, istatistikler, Çizimlerim paneli, ana menü)
* aynı dile çevrilerek yerinde bırakılır.
* - Yerleşim ve ölçüler Excalidraw'ın kendi hesabı: tuvalin boyu, araç
* adasının konumu, sol rayın kaydırmaları (bkz. excalidraw-app/index.scss)
* olduğu gibi kalır. Tek istisna üst şerit: #root aşağı itilir.
* - Tuvalin kendi zemini ("Tuval arka planı") çizimin verisi; tema ona
* karışmaz - beyaz kalır, dışa aktarım da bugünkü gibi dolu zeminli
* çıkar. Tasarımdaki pastel degrade cam panellerin arkasında ve üst
* şeritte görünür.
*
* Tasarımda olmayıp eklenen tek şeyler üst gezinme şeridi ile çizim adı
* kartıdır; ikisini de excalidraw-ui.js çizer, biçimleri burada.
*
* BÖLÜMLER
* 1. Ortak değişkenler (tasarım dili)
* 2. Yazı tipi — Manrope, gateway'den
* 3. Kabuk — pastel zemin ve üst şeride ayrılan yer
* 4. Üst gezinme şeridi (.x-nav)
* 5. Sol ray — ☰, Ana Sayfa, geri ve çizim adı kartı
* 6. Araç adası (üst orta)
* 7. Özellik paneli — Kontur / Arka plan / Kenarlar / Opaklık
* 8. Çizimlerim paneli
* 9. Sağ üst — ortak çalışanlar, kütüphane, Paylaş
* 10. Alt sol yakınlaştırma ve geri al/yinele — alt sağ ipucu
* 11. Ana menü, bağlam menüsü, açılır kutular
* 12. Modaller ve diyaloglar
* 13. Renk seçici
* 14. Kenar çubuğu (kütüphane) ve tuval araması
* 15. Küçük parçalar — bildirim, ipucu balonu, form öğeleri
* 16. Karşılama ekranı
* 17. Koyu tema ve azaltılmış hareket
*/
/* =====================================================================
* 1. ORTAK DEĞİŞKENLER
* Prototipteki paletin tek kaynağı. Aşağıdaki bütün bölümler buradan
* okur; bir rengi değiştirmek için tek yer burası. Taiga temasındaki
* (--k-*) ve Not Defteri temasındaki (--n-*) karşılıklarıyla aynı
* değerler - üç uygulama tek palet.
* ================================================================== */
:root {
--x-nav-h: 54px;
/* Değerler tema çekirdeğinden (tema.css). Yedekler bugünkü paletin
birebir aynısı; rengi değiştirmek için tema.css. */
--x-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--x-ink: var(--m-ink, #22303a); /* ana metin */
--x-ink-mid: var(--m-ink-mid, #55646e); /* ikincil metin, ikon çizgileri */
--x-ink-soft: var(--m-ink-soft, #7c8a94); /* açıklama satırları */
--x-ink-faint: var(--m-ink-faint, #93a1aa); /* ipuçları, kısayol harfleri */
--x-ink-label: var(--m-ink-label, #8a97a0); /* panel bölüm başlıkları */
--x-accent: var(--m-accent, oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)));
--x-accent-deep: var(--m-accent-deep, oklch(0.45 calc(0.1 * var(--m-c)) var(--m-h)));
--x-accent-soft: var(--m-accent-soft, var(--m-accent-wash, oklch(0.95 calc(0.02 * var(--m-c)) var(--m-h)))); /* hover zemini */
--x-accent-tint: var(--m-accent-tint, var(--m-accent-tint, oklch(0.93 calc(0.04 * var(--m-c)) var(--m-h)))); /* seçili hafif zemin */
--x-grad: var(--m-grad, linear-gradient(135deg, oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)), oklch(0.5 calc(0.1 * var(--m-c)) var(--m-h2))));
--x-grad-shadow: var(--m-grad-shadow, 0 6px 16px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3));
--x-brand: var(--m-brand, linear-gradient(135deg, oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)), oklch(0.65 calc(0.12 * var(--m-c)) var(--m-h3))));
--x-glass: var(--m-glass-solid, rgba(255, 255, 255, 0.9)); /* araç adası, paneller */
--x-glass-soft: var(--m-glass-strong, rgba(255, 255, 255, 0.85)); /* tekil düğmeler */
--x-edge: var(--m-edge, rgba(255, 255, 255, 0.95)); /* cam kenarı */
--x-sheet: var(--m-sheet, #ffffff); /* modal, açılır menü */
--x-btn-face: var(--m-sheet, #ffffff); /* panel ikon düğmelerinin yüzü */
--x-line: var(--m-line, #e6ebee); /* form kenarlıkları, ayraçlar */
--x-line-soft: var(--m-line-soft, #eef2f4);/* zayıf ayraç */
--x-field: var(--m-field, #fbfcfd); /* girdi zemini */
--x-danger: var(--m-danger, oklch(0.55 0.18 25));
--x-shadow-sm: var(--m-shadow-sm, 0 6px 16px rgba(30, 60, 75, 0.08));
--x-shadow-md: var(--m-shadow-md, 0 10px 28px rgba(30, 60, 75, 0.12));
--x-shadow-pop: var(--m-shadow-pop, 0 30px 80px rgba(20, 40, 55, 0.3));
/* Düğme köşeleri artık ortak çekirdekten (dugme.css): kişi düğme
biçimini değiştirince Çizim'in araç düğmeleri de birlikte dönüyor. */
--x-radius-btn: var(--dg-kose-ikon, 10px); /* küçük ikon düğmesi */
--x-radius-card: 12px; /* kart, girdi, düğme grubu */
--x-radius-island: 16px; /* araç adası */
--x-radius-panel: 18px; /* özellik paneli, çizim listesi */
--x-radius-sheet: 24px; /* modal */
--x-page-bg: var(--m-page-bg-duz);
/* --------------------------------------------------------------------
Excalidraw'ın kendi değişkenleri. Uygulama bunları yüzlerce kuralda
okuyor; özgüllük yarışına girmek yerine adı yerinde bırakıp arkasındaki
değeri değiştirmek hem kısa hem de Excalidraw güncellendiğinde
kendiliğinden çalışmaya devam eden yol. */
--color-primary: var(--m-accent, oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)));
--color-primary-darker: var(--m-accent-mid, oklch(0.5 calc(0.09 * var(--m-c)) var(--m-h)));
--color-primary-darkest: var(--m-accent-deep, oklch(0.45 calc(0.1 * var(--m-c)) var(--m-h)));
--color-primary-hover: var(--m-accent-mid, oklch(0.5 calc(0.09 * var(--m-c)) var(--m-h)));
--color-primary-light: var(--m-accent-tint, var(--m-accent-tint, oklch(0.94 calc(0.035 * var(--m-c)) var(--m-h))));
--color-primary-light-darker: var(--m-accent-edge, var(--m-accent-tint, oklch(0.91 calc(0.045 * var(--m-c)) var(--m-h))));
--color-primary-contrast-offset: var(--m-accent, oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)));
--color-selection: var(--m-accent, oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)));
--color-promo: var(--m-accent, oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h)));
--color-brand-hover: var(--m-accent-mid, oklch(0.5 calc(0.09 * var(--m-c)) var(--m-h)));
--color-brand-active: var(--m-accent-deep, oklch(0.45 calc(0.1 * var(--m-c)) var(--m-h)));
--color-surface-primary-container: var(--m-accent-tint, var(--m-accent-tint, oklch(0.93 calc(0.04 * var(--m-c)) var(--m-h))));
--color-on-primary-container: var(--m-accent-ink, oklch(0.42 calc(0.1 * var(--m-c)) var(--m-h)));
--color-surface-lowest: var(--m-sheet, #ffffff);
--color-surface-low: var(--m-surface-low, #f2f6f8);
--color-surface-mid: var(--m-surface-mid, #f7fafb);
--color-surface-high: var(--m-surface-high, #eaf1f4);
--color-on-surface: var(--x-ink);
--color-border-outline: var(--m-line-strong, #c4cfd5);
--color-border-outline-variant: var(--x-line);
--color-danger: var(--x-danger);
--color-danger-dark: var(--x-danger);
--color-danger-darker: var(--m-danger-deep, oklch(0.5 0.18 25));
--color-danger-darkest: var(--m-danger-deep, oklch(0.45 0.18 25));
--island-bg-color: var(--x-glass);
--island-bg-color-alt: var(--x-sheet);
--popup-bg-color: var(--x-sheet);
--popup-secondary-bg-color: var(--x-line-soft);
--default-bg-color: var(--m-sheet, #ffffff);
--dialog-border-color: var(--x-line-soft);
--default-border-color: var(--x-line);
--button-hover-bg: var(--x-accent-soft);
--button-active-bg: var(--x-accent-tint);
--button-active-border: var(--x-accent);
--button-gray-1: var(--x-line-soft);
--button-gray-2: var(--x-line);
--button-gray-3: var(--m-line-strong, #d7dee2);
--keybinding-color: var(--x-ink-faint);
--icon-fill-color: var(--x-ink-mid);
--text-primary-color: var(--x-ink);
--focus-highlight-color: var(--m-accent-edge, oklch(0.85 calc(0.05 * var(--m-c)) var(--m-h)));
/* Opaklık kaydıracının dolu kısmı. Rengi Excalidraw satır içi stille
yazıyor (Range.tsx), o yüzden tek yol bu değişken. */
--color-slider-track: var(--m-accent-bright, oklch(0.6 calc(0.11 * var(--m-c)) var(--m-h)));
--color-slider-thumb: var(--m-sheet, #ffffff);
--avatar-border-color: var(--m-sheet, #ffffff);
--scrollbar-thumb: var(--m-line-strong, #d7dee2);
--scrollbar-thumb-hover: var(--m-ink-faintest, #c4cfd5);
--border-radius-md: 8px;
--border-radius-lg: var(--dg-kose-ikon, 10px);
--shadow-island: var(--x-shadow-md);
--shadow-island-stronger: 0 14px 34px rgba(30, 60, 75, 0.18);
--modal-shadow: var(--x-shadow-pop);
--sidebar-shadow: var(--x-shadow-md);
--sidebar-bg-color: var(--x-glass);
--sidebar-border-color: var(--x-edge);
--library-dropdown-shadow: var(--x-shadow-md);
}
/* =====================================================================
* 2. YAZI TİPİ
*
* Manrope gateway'in kendi dizininden gelir (Taiga ve Not Defteri de aynı
* dosyaları kullanıyor), Google Fonts'a bağımlılık yok. Excalidraw'ın
* arayüz ailesi "Assistant"; --ui-font ile değiştirildi, birkaç yerde
* elle yazılmış olanlar da aşağıda toplandı.
*
* ÖNEMLİ: tuvalin kendi yazı tipleri (Excalifont, Nunito, Comic Shanns -
* .excalifont / .fonts / .excalidraw-wysiwyg) çizimin verisi, onlara
* dokunulmaz; yoksa yazılan metin ekranda başka, dışa aktarımda başka
* görünürdü.
* ================================================================== */
@font-face {
font-family: "Manrope";
src: url("/taiga-custom/Manrope-latin.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
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+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
src: url("/taiga-custom/Manrope-latin-ext.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* Ailesi kodda sabit yazılmış yerler. */
.excalidraw .Dialog__title,
.excalidraw .ShareableLinkDialog h3,
.excalidraw .ShareableLinkDialog__popover,
.excalidraw .RadioGroup__choice,
.excalidraw .ExcTextField,
.excalidraw .ExcTextField input,
.excalidraw .ImageExportModal h3,
.excalidraw .ImageExportModal__settings__setting__label,
.excalidraw .OverwriteConfirm,
.excalidraw .OverwriteConfirm h3,
.excalidraw .ShareDialog__picker__header,
.excalidraw .ShareDialog__picker__description,
.excalidraw .ShareDialog__active__header,
.excalidraw .ShareDialog__active__description {
font-family: var(--x-font);
}
/* Kısayol harfleri ve sayı rozetleri "Cascadia" ile yazılıyor; Manrope'un
rakamları yanlarında daha iyi duruyor, ama tek boşluklu görünüm kalsın
diye yalnızca aile değişti. */
.excalidraw .ToolIcon__keybinding,
.excalidraw .CollabButton-collaborators,
.excalidraw .dropdown-menu-item__shortcut {
font-family: var(--x-font);
font-weight: 700;
}
/* =====================================================================
* 3. KABUK
*
* Excalidraw tarayıcıyı baştan sona kaplar (html/body/#root: height 100%).
* Üst şerit için #root aşağı itiliyor - boy da aynı kadar kısalıyor, yoksa
* sayfa taşardı. Excalidraw tuvalin ekrandaki yerini kendi kabından
* (getBoundingClientRect) okuduğu için imleç ile çizginin arası açılmaz.
*
* Not: tuvalin üstündeki asıl zemin çizimin kendi "tuval arka planı"
* (varsayılan beyaz) ve ona dokunulmuyor; buradaki degrade cam panellerin
* arkasında, üst şeritte ve tuvalin taşmadığı kenarlarda görünür.
*
* Tasarımdaki nokta ızgarası bilerek eklenmedi: tuval örtücü olduğu için
* görünmeyecek, tuval şeffaf yapılsaydı da ızgara sayfaya sabit kalıp
* çizimle birlikte kaymayacaktı.
* ================================================================== */
html,
body {
background: var(--x-page-bg, var(--m-page-bg-duz));
}
#root {
height: calc(100% - var(--x-nav-h));
margin-top: var(--x-nav-h);
}
.excalidraw {
background: var(--x-page-bg);
color: var(--x-ink);
letter-spacing: -0.1px;
}
/* Cam panellerin ortak kenarı: Excalidraw adalarında kenarlık yok, gölge
var. Tasarımda ikisi birden. */
.excalidraw .Island {
border: 1px solid var(--x-edge);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
/* Kaydırma çubukları: pastel zeminde koyu gri şeritler ağır duruyordu. */
.excalidraw *::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.excalidraw *::-webkit-scrollbar-thumb {
border-radius: 999px;
background: var(--m-line-strong, #d7dee2);
}
.excalidraw *::-webkit-scrollbar-thumb:hover {
background: var(--m-line-strong, #c4cfd5);
}
.excalidraw *::-webkit-scrollbar-track {
background: transparent;
}
/* =====================================================================
* 4. ÜST GEZİNME ŞERİDİ
*
* Tasarımdaki cam şerit: solda marka işareti, hap sekmeler (Projeler · Proje
* Çizimleri · Not Defteri · Yönetim), sağda avatar. Taiga'nın navbar'ı
* ile Not Defteri'nin şeridinin (.n-nav) aynısı - üç uygulamada tek
* gezinme. Excalidraw'ın kendi arayüzünde böyle bir şey yok; şeridi
* excalidraw-ui.js çiziyor, biçimi burada.
* ================================================================== */
.x-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 40;
display: flex;
align-items: center;
gap: 6px;
height: var(--x-nav-h);
padding: 0 18px;
box-sizing: border-box;
background: var(--m-glass, rgba(255, 255, 255, 0.65));
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--m-edge, rgba(255, 255, 255, 0.9));
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
color: var(--m-ink-mid, #55646e);
user-select: none;
}
/* İşaret ("1e · Uygulama Izgarası") kendi renklerini taşıyor; altındaki
degrade karo ve gölge kaldırıldı, kutu yalnızca ölçü/hizalama veriyor. */
.x-nav__logo {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-right: 10px;
text-decoration: none;
transition: transform 0.18s ease;
}
.x-nav__logo:hover {
transform: translateY(-1px);
}
.x-nav__link {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 15px;
border: none;
border-radius: var(--dg-kose, 10px);
background: transparent;
color: var(--m-ink-mid, #55646e);
font-family: inherit;
font-size: 13.5px;
font-weight: var(--dg-agirlik, 650);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.x-nav__link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.x-nav__link:hover {
background: var(--m-glass-strong, rgba(255, 255, 255, 0.8));
color: var(--m-ink-mid, #55646e);
}
.x-nav__link.is-active {
background: var(--m-sheet, #ffffff);
color: oklch(0.45 calc(0.1 * var(--m-c)) var(--m-h));
font-weight: var(--dg-agirlik-us, 800);
box-shadow: 0 4px 12px rgba(30, 60, 75, 0.1);
}
.x-nav__spacer {
flex: 1;
}
.x-nav__avatar {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--m-brand);
color: var(--m-on-accent, #ffffff);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.2px;
}
/* Dar ekranda sekme yazıları düşer, ikonlar kalır - hiçbir düğme
kaybolmadan şerit sığar. */
@media (max-width: 900px) {
.x-nav__link {
padding: 9px 11px;
}
.x-nav__link span {
display: none;
}
}
/* =====================================================================
* 5. SOL RAY
*
* Üstte ☰ (ana menü) ve Ana Sayfa düğmesi duruyor; excalidraw-ui.js
* bunların sağına tasarımdaki geri okunu ve çizim adı kartını ekliyor.
* Hepsi tasarımdaki cam karo: 38px, 12px köşe, ince beyaz kenar.
* ================================================================== */
.excalidraw .dropdown-menu-button,
.excalidraw .app-home-button,
.excalidraw .x-doc__back {
width: 38px;
height: 38px;
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass-soft);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--x-ink-mid);
box-shadow: var(--x-shadow-sm);
transition: color 0.18s ease, background-color 0.18s ease,
transform 0.18s ease, box-shadow 0.18s ease;
}
.excalidraw .dropdown-menu-button:hover,
.excalidraw .app-home-button:hover,
.excalidraw .x-doc__back:hover {
background: var(--m-sheet, #ffffff);
color: var(--x-accent-deep);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(30, 60, 75, 0.12);
}
.excalidraw .dropdown-menu-button svg,
.excalidraw .app-home-button svg,
.excalidraw .x-doc__back svg {
width: 17px;
height: 17px;
}
/* Menü açıkken ☰ tasarımdaki etkin araç gibi dolu görünür. */
.excalidraw .dropdown-menu-button.dropdown-menu-button--opened {
background: var(--x-grad);
border-color: transparent;
color: var(--m-on-accent, #ffffff);
box-shadow: 0 5px 12px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3);
}
/* --- geri oku + çizim adı kartı (excalidraw-ui.js) --------------------- */
.excalidraw .x-doc {
display: flex;
align-items: center;
gap: 10px;
/* .excalidraw-ui-top-left bir flex satırı; ☰ ve Ana Sayfa'dan sonra
gelsin diye sıralanıyor (Ana Sayfa order: 2, bkz. index.scss). */
order: 3;
pointer-events: none;
}
.excalidraw .x-doc > * {
pointer-events: auto;
}
.excalidraw .x-doc__back {
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
text-decoration: none;
}
.excalidraw .x-doc__name {
display: flex;
align-items: baseline;
gap: 8px;
height: 38px;
padding: 0 16px;
box-sizing: border-box;
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass-soft);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--x-shadow-sm);
max-width: 320px;
}
.excalidraw .x-doc__title {
font-size: 13.5px;
font-weight: 800;
color: var(--x-ink);
line-height: 38px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.excalidraw .x-doc__state {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: var(--x-ink-faint);
white-space: nowrap;
}
/* Kaydediliyorken nokta canlanır: "kaydedildi" ile "kaydediliyor…"
arasındaki fark sessizce anlaşılsın. */
.excalidraw .x-doc__state--saving {
color: var(--x-accent);
}
/* Dar ekranda kart adı kısalır ama kaybolmaz. */
@media (max-width: 1100px) {
.excalidraw .x-doc__name {
max-width: 180px;
}
}
/* =====================================================================
* 6. ARAÇ ADASI (üst orta)
*
* Tasarımdaki ada: 6px iç boşluk, 16px köşe, cam zemin, aralarda ince
* ayraç; düğmeler 36px / 10px köşe; etkin araç teal degrade + beyaz ikon.
* Sıra Excalidraw'ın kendi sırası (kilit · el · seçim · dikdörtgen ·
* elmas · elips · ok · çizgi · kalem · yazı · resim · silgi) ve sonda
* tasarımda olmayan "diğer araçlar" düğmesi - o da kalıyor.
* ================================================================== */
.excalidraw .App-toolbar {
padding: 6px;
border-radius: var(--x-radius-island);
background: var(--x-glass);
box-shadow: var(--x-shadow-md);
}
.excalidraw .App-toolbar .ToolIcon__icon {
width: 36px;
height: 36px;
border-radius: var(--x-radius-btn);
color: var(--x-ink-mid);
transition: background-color 0.15s ease, color 0.15s ease,
box-shadow 0.15s ease;
}
.excalidraw .App-toolbar .ToolIcon__icon:hover {
background: var(--x-accent-soft);
}
/* Etkin araç. Çift sınıf, Excalidraw'ın kendi kuralını (aynı özgüllük)
geçmek için değil - okunurluk için ayrı yazıldı; dosya sonradan
yüklendiği için sıra zaten bizden yana. */
.excalidraw .App-toolbar .ToolIcon_type_toggle.ToolIcon--checked .ToolIcon__icon,
.excalidraw .App-toolbar .ToolIcon.ToolIcon--checked .ToolIcon__icon {
background: var(--x-grad);
box-shadow: 0 5px 12px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3);
}
.excalidraw .App-toolbar .ToolIcon_type_toggle.ToolIcon--checked .ToolIcon__icon svg,
.excalidraw .App-toolbar .ToolIcon.ToolIcon--checked .ToolIcon__icon svg {
color: var(--m-on-accent, #ffffff);
}
.excalidraw .App-toolbar .fillable.ToolIcon_type_toggle.ToolIcon--checked .ToolIcon__icon svg {
fill: var(--m-on-accent, #ffffff);
}
/* Silgi etkinken de aynı degrade - Excalidraw ona ayrı bir renk veriyor. */
.excalidraw .App-toolbar .eraser.ToolIcon--checked .ToolIcon__icon,
.excalidraw .App-toolbar .eraser.active {
background: var(--x-grad);
}
/* Kısayol harfleri: tasarımda yok ama işe yarıyor, bu yüzden kalıyor -
yalnızca soluklaşıyor. */
.excalidraw .App-toolbar .ToolIcon__keybinding {
font-size: 8px;
color: var(--x-ink-faint);
opacity: 0.75;
}
.excalidraw .App-toolbar .ToolIcon--checked .ToolIcon__keybinding {
color: var(--m-glass-strong, rgba(255, 255, 255, 0.75));
}
.excalidraw .App-toolbar__divider {
width: 1px;
height: 22px;
align-self: center;
background: var(--x-line);
}
/* "Diğer araçlar" (çerçeve, gömme, lazer, mermaid...) düğmesi. */
.excalidraw .App-toolbar__extra-tools-trigger {
width: 36px;
height: 36px;
border: none;
border-radius: var(--x-radius-btn);
background: transparent;
color: var(--x-ink-mid);
}
.excalidraw .App-toolbar__extra-tools-trigger:hover {
background: var(--x-accent-soft);
}
.excalidraw .App-toolbar__extra-tools-trigger--selected {
background: var(--x-grad);
color: var(--m-on-accent, #ffffff);
}
/* Ada üzerinde ayrı duran kalem modu düğmesi. */
.excalidraw .ToolIcon__penMode {
border-radius: var(--x-radius-card);
background: var(--x-glass-soft);
border: 1px solid var(--x-edge);
box-shadow: var(--x-shadow-sm);
}
/* =====================================================================
* 7. ÖZELLİK PANELİ (sol)
*
* Tasarımdaki panel: 200px, 18px köşe, cam zemin, bölümler arası 14px,
* bölüm başlıkları 11px/800/var(--m-ink-faint, #8a97a0). Excalidraw'ın .App-menu__left'i
* zaten 12.5rem (200px) - ölçüye dokunulmuyor, yalnızca boyanıyor.
* ================================================================== */
.excalidraw .App-menu__left {
padding: 16px;
border-radius: var(--x-radius-panel);
background: var(--x-glass);
box-shadow: var(--x-shadow-md);
}
.excalidraw .selected-shape-actions {
row-gap: 14px;
}
/* Bölüm başlıkları: "Kontur", "Arka plan", "Kontur genişliği"... */
.excalidraw .selected-shape-actions h3,
.excalidraw .selected-shape-actions legend,
.excalidraw .selected-shape-actions .control-label,
.excalidraw .compact-shape-actions .popover-section-title,
.excalidraw .picker-section-label {
margin-bottom: 7px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--x-ink-label);
}
.excalidraw .selected-shape-actions fieldset + fieldset,
.excalidraw .selected-shape-actions .panelRow {
margin: 0;
}
/* Renk kareleri: tasarımda 24px / 8px köşe. */
.excalidraw .App-menu__left .color-picker__button,
.excalidraw .compact-popover-content .color-picker__button {
--radius: 8px;
--size: 1.5rem;
}
.excalidraw .App-menu__left .color-picker__button.active-color {
width: 1.625rem;
height: 1.625rem;
}
/* Seçili renk: tasarımdaki 2px teal çerçeve. */
.excalidraw .color-picker__button.active:not(:active) .color-picker__button-outline {
box-shadow: 0 0 0 2px var(--x-accent);
}
/* Kontur genişliği / kenarlar / dolgu gibi ikon düğmeleri: beyaz kart,
seçiliyken teal degrade. */
.excalidraw .buttonList label,
.excalidraw .buttonList button,
.excalidraw .buttonList .zIndexButton,
.excalidraw button.standalone {
--button-bg: var(--x-btn-face);
--button-border: var(--x-line);
--button-hover-bg: var(--x-accent-soft);
--button-hover-border: var(--m-accent-edge, oklch(0.85 calc(0.05 * var(--m-c)) var(--m-h)));
--button-selected-bg: transparent;
--button-selected-border: transparent;
--button-selected-hover-bg: transparent;
border-radius: var(--border-radius-lg);
color: var(--x-ink-mid);
transition: background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
}
.excalidraw .buttonList label.active,
.excalidraw .buttonList button.active,
.excalidraw .buttonList label.ToolIcon--checked,
.excalidraw .buttonList button.ToolIcon--checked {
background: var(--x-grad);
border-color: transparent;
box-shadow: 0 4px 10px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.28);
}
.excalidraw .buttonList label.active svg,
.excalidraw .buttonList button.active svg,
.excalidraw .buttonList label.ToolIcon--checked svg,
.excalidraw .buttonList button.ToolIcon--checked svg {
color: var(--m-on-accent, #ffffff);
}
/* Opaklık kaydıracı: tasarımdaki 8px hap ray + teal degrade dolgu. */
/* Ray tasarımdaki 8px hap. Rengi buradan verilemiyor: Excalidraw dolu
kısmı satır içi bir degradeyle çiziyor - o degradenin durakları
yukarıdaki --color-slider-track ve --button-bg değişkenlerinden okunuyor. */
.excalidraw .range-input {
height: 8px;
border-radius: 999px;
accent-color: var(--x-accent);
}
.excalidraw .range-input::-webkit-slider-thumb {
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: var(--m-sheet, #ffffff);
box-shadow: 0 2px 6px rgba(20, 40, 55, 0.3);
}
.excalidraw .range-input::-moz-range-thumb {
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: var(--m-sheet, #ffffff);
box-shadow: 0 2px 6px rgba(20, 40, 55, 0.3);
}
.excalidraw .value-bubble {
color: var(--x-ink-label);
font-size: 11px;
font-weight: 800;
}
.excalidraw .zero-label {
color: var(--x-ink-faint);
}
/* Dar ekranda açılan derli toplu (compact) özellik menüsü aynı dilde. */
.excalidraw .compact-shape-actions-island,
.excalidraw .compact-popover-content,
.excalidraw .tool-popover-content {
border-radius: var(--x-radius-panel);
background: var(--x-glass);
box-shadow: var(--x-shadow-md);
}
.excalidraw .compact-action-button {
border-radius: var(--x-radius-btn);
}
/* =====================================================================
* 8. ÇİZİMLERİM PANELİ
*
* Tasarımda çizim listesi ayrı bir sayfa ("Proje Çizimleri" / cizimler.html);
* tuvalin solundaki bu panel çalışma alanının kendi eklentisi (bkz.
* excalidraw-app/components/AppDrawingsPanel.tsx) ve yerinde duruyor -
* çizim değiştirmek için sayfadan çıkmak gerekmesin diye. Boyası
* tasarımdaki çizim kartlarıyla aynı dilde.
* ================================================================== */
.excalidraw .app-drawings {
padding: 12px;
border-radius: var(--x-radius-panel);
background: var(--x-glass);
box-shadow: var(--x-shadow-md);
gap: 2px;
}
.excalidraw .app-drawings__title {
padding: 0 6px 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--m-ink-faintest, #a0acb4);
opacity: 1;
}
.excalidraw .app-drawings__item {
border-radius: var(--x-radius-btn);
transition: background-color 0.15s ease;
}
.excalidraw .app-drawings__item:hover,
.excalidraw .app-drawings__item:focus-within {
background: var(--x-accent-soft);
}
.excalidraw .app-drawings__item--active {
background: var(--x-grad);
box-shadow: 0 4px 10px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.28);
}
.excalidraw .app-drawings__item--active:hover {
background: var(--x-grad);
}
.excalidraw .app-drawings__open {
padding: 7px 8px;
color: var(--x-ink-mid);
}
.excalidraw .app-drawings__name {
font-size: 13px;
font-weight: 700;
}
.excalidraw .app-drawings__when {
font-size: 11px;
font-weight: 600;
color: var(--x-ink-faint);
opacity: 1;
}
.excalidraw .app-drawings__item--active .app-drawings__open,
.excalidraw .app-drawings__item--active .app-drawings__name,
.excalidraw .app-drawings__item--active .app-drawings__when,
.excalidraw .app-drawings__item--active .app-drawings__action {
color: var(--m-on-accent, #ffffff);
}
.excalidraw .app-drawings__item--active .app-drawings__when {
color: var(--m-glass-strong, rgba(255, 255, 255, 0.75));
}
.excalidraw .app-drawings__action {
border-radius: 8px;
}
.excalidraw .app-drawings__item--active .app-drawings__action:hover {
background: var(--m-tul, rgba(255, 255, 255, 0.2));
}
.excalidraw .app-drawings__action--danger:hover {
color: var(--x-danger);
}
.excalidraw .app-drawings__new {
margin-top: 6px;
padding: 8px;
border-radius: var(--x-radius-btn);
font-size: 13px;
font-weight: 800;
color: var(--x-accent-deep);
}
.excalidraw .app-drawings__new:hover {
background: var(--x-accent-soft);
}
.excalidraw .app-drawings__rename {
border-radius: 8px;
border: 1.5px solid var(--x-accent);
background: var(--x-btn-face);
font-size: 13px;
font-weight: 700;
}
/* =====================================================================
* 9. SAĞ ÜST — ORTAK ÇALIŞANLAR, KÜTÜPHANE, PAYLAŞ
*
* Tasarımdaki sıra: üst üste binen avatarlar, sonra teal degrade "Paylaş"
* hapı. Excalidraw ikisinin arasına kütüphane düğmesini koyuyor; o da
* aynı cam karo olarak kalıyor.
* ================================================================== */
.excalidraw .sidebar-trigger,
.excalidraw .layer-ui__wrapper__top-right .excalidraw-button:not(.collab-button) {
height: 38px;
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass-soft);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--x-ink-mid);
box-shadow: var(--x-shadow-sm);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0;
}
.excalidraw .sidebar-trigger:hover {
background: var(--m-sheet, #ffffff);
color: var(--x-accent-deep);
}
.excalidraw .sidebar-trigger.selected {
background: var(--x-grad);
border-color: transparent;
color: var(--m-on-accent, #ffffff);
box-shadow: 0 5px 12px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.3);
}
/* "Paylaş" - tasarımın birincil hapı. */
.excalidraw .collab-button {
--button-width: auto;
--button-height: 38px;
--button-bg: transparent;
--button-border: transparent;
--button-hover-bg: transparent;
--button-hover-border: transparent;
--button-active-bg: transparent;
min-width: 38px;
height: 38px;
padding: 0 18px;
border: none;
border-radius: var(--dg-kose, 10px);
background: var(--x-grad);
color: var(--m-on-accent, #ffffff);
font-size: 13px;
font-weight: var(--dg-agirlik-us, 800);
box-shadow: var(--x-grad-shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.excalidraw .collab-button:hover,
.excalidraw .collab-button:active {
background: var(--x-grad);
transform: translateY(-1px);
box-shadow: 0 8px 20px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.36);
}
.excalidraw .collab-button svg {
width: 17px;
height: 17px;
color: var(--m-on-accent, #ffffff);
}
/* Oturum açıkken: tasarımın "başarı" hue'su (150). */
.excalidraw .collab-button.active.active,
.excalidraw .collab-button.active.active:hover {
background: linear-gradient(135deg, oklch(0.62 0.12 150), oklch(0.54 0.11 165));
border-color: transparent;
box-shadow: 0 6px 16px oklch(0.6 0.12 150 / 0.32);
}
.excalidraw .CollabButton-collaborators {
background: oklch(0.93 0.05 150);
color: oklch(0.42 0.1 150);
font-size: 0.6rem;
font-weight: 800;
}
/* Ortak çalışan avatarları: tasarımdaki beyaz halkalı, üst üste binen
daireler. */
.excalidraw .UserList__collaborators {
gap: 0;
}
.excalidraw .UserList__collaborator .Avatar,
.excalidraw .Avatar {
border: 2px solid var(--m-edge, #ffffff);
box-shadow: 0 2px 6px rgba(30, 60, 75, 0.16);
font-family: var(--x-font);
font-weight: 800;
}
.excalidraw .UserList__collaborator + .UserList__collaborator {
margin-inline-start: -8px;
}
/* =====================================================================
* 10. ALT ÇUBUKLAR
*
* Solda yakınlaştırma ve geri al/yinele grupları: tasarımda tek parça
* cam kutu, içinde ayraçsız düğmeler. Sağda yardım düğmesi ve "içeriğe
* dön" - tasarımda yoklar ama işe yaradıkları için aynı dilde kalıyorlar.
* Araç adasının altındaki ipucu satırı da tasarımdaki cam etiket oluyor.
* ================================================================== */
.excalidraw .zoom-actions,
.excalidraw .undo-redo-buttons {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--x-shadow-sm);
overflow: hidden;
}
.excalidraw .zoom-button,
.excalidraw .undo-redo-buttons button {
background-color: transparent !important;
border-color: transparent !important;
color: var(--x-ink-mid);
height: 36px;
}
.excalidraw .zoom-button:hover,
.excalidraw .undo-redo-buttons button:hover {
background-color: var(--x-accent-soft) !important;
}
.excalidraw .zoom-button .ToolIcon__icon,
.excalidraw .undo-redo-buttons button .ToolIcon__icon {
background: transparent;
}
.excalidraw .reset-zoom-button {
font-size: 12.5px !important;
font-weight: 800;
color: var(--x-ink-mid);
}
.excalidraw .help-icon,
.excalidraw .scroll-back-to-content {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass-soft);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--x-ink-mid);
box-shadow: var(--x-shadow-sm);
font-weight: 700;
}
.excalidraw .help-icon:hover,
.excalidraw .scroll-back-to-content:hover {
background: var(--m-sheet, #ffffff);
color: var(--x-accent-deep);
}
/* Araç adasının altındaki bağlamsal ipucu ("sürüklemek için...").
Tasarımdaki cam etiketin biçimi; yeri Excalidraw'ın kendi yeri. */
.excalidraw .HintViewer {
color: var(--x-ink-label);
font-size: 12px;
font-weight: 700;
}
.excalidraw .HintViewer > span {
display: inline-block;
align-self: center;
padding: 8px 14px;
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--x-shadow-sm);
}
.excalidraw .HintViewer kbd {
border: 1px solid var(--x-line);
border-radius: 5px;
background: var(--x-field);
color: var(--x-ink-mid);
font-family: var(--x-font);
font-weight: 800;
}
/* Alt orta çubuk (mobilde araç çubuğu, seçim durumu şeridi). */
.excalidraw .App-bottom-bar > .Island,
.excalidraw .floating-status-stack > * {
border-radius: var(--x-radius-panel);
background: var(--x-glass);
box-shadow: var(--x-shadow-md);
}
/* =====================================================================
* 11. MENÜLER
*
* ☰ menüsü, bağlam menüsü ve açılır kutular: beyaz sayfa, 16px köşe,
* satırlar hap. Tasarımdaki modal dilinin küçük hâli.
* ================================================================== */
.excalidraw .dropdown-menu .dropdown-menu-container,
.excalidraw .context-menu,
.excalidraw .App-toolbar__extra-tools-dropdown,
.excalidraw .library-menu-dropdown-container,
.excalidraw .color-picker__context-menu,
.excalidraw .ttd-chat-history-menu {
padding: 6px;
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-island);
background: var(--x-sheet);
box-shadow: var(--x-shadow-md);
}
.excalidraw .dropdown-menu-item-base,
.excalidraw .context-menu-item {
border-radius: var(--x-radius-btn);
color: var(--x-ink-mid);
font-size: 13px;
font-weight: 700;
}
.excalidraw .dropdown-menu-item:hover,
.excalidraw .dropdown-menu-item--hovered,
.excalidraw .context-menu-item:hover,
.excalidraw .context-menu-item.focused {
background: var(--x-accent-soft);
color: var(--x-ink);
}
.excalidraw .dropdown-menu-item--selected {
background: var(--x-accent-tint);
color: var(--x-accent-deep);
font-weight: 800;
}
.excalidraw .dropdown-menu-item__icon svg,
.excalidraw .context-menu-item svg {
color: currentColor;
}
.excalidraw .dropdown-menu-group-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--m-ink-faintest, #a0acb4);
}
.excalidraw .dropdown-menu-item__shortcut,
.excalidraw .context-menu-item__shortcut {
color: var(--x-ink-faint);
font-size: 11px;
}
.excalidraw .context-menu-item-separator,
.excalidraw .layer-ui__divider {
background: var(--x-line-soft);
}
/* Karanlık kip / dil gibi satırların içindeki denetimler. */
.excalidraw .dropdown-menu-item-custom .dropdown-select,
.excalidraw .dropdown-select {
border: 1.5px solid var(--x-line);
border-radius: 8px;
background-color: var(--x-field);
color: var(--x-ink-mid);
font-family: var(--x-font);
font-weight: 700;
}
/* =====================================================================
* 12. MODALLER VE DİYALOGLAR
*
* Tasarım ("Çizim Paylaş"): beyaz sayfa, 24px köşe, 30px 80px gölge;
* arkası oklch(0.3 calc(0.04 * var(--m-c)) var(--m-h2) / 0.35) + blur(4px); açılırken pop.
* Excalidraw'ın bütün diyalogları (paylaş, dışa aktar, yardım, mermaid,
* kütüphane yayımlama) aynı kabı kullanıyor, hepsi tek yerden boyanıyor.
* ================================================================== */
.excalidraw .Modal__background {
background-color: oklch(0.3 calc(0.04 * var(--m-c)) var(--m-h2) / 0.35);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
@keyframes x-pop {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.excalidraw .Modal__content {
border: none;
border-radius: var(--x-radius-sheet);
background: var(--x-sheet);
box-shadow: var(--x-shadow-pop);
animation: x-pop 0.22s ease forwards;
}
.excalidraw .Modal .Island {
padding: 30px 32px;
border: none;
border-radius: var(--x-radius-sheet);
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.excalidraw .Dialog__title {
padding-bottom: 14px;
margin-bottom: 20px;
border-bottom: 1px solid var(--x-line-soft);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.3px;
color: var(--x-ink);
}
.excalidraw .Dialog__close {
display: grid;
place-items: center;
top: 22px;
right: 24px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--m-surface-low, #f1f5f7);
color: var(--x-ink-mid);
}
.excalidraw .Dialog__close:hover {
background: #e4ebee;
color: var(--x-ink);
}
.excalidraw .Dialog__close svg {
width: 16px;
height: 16px;
}
/* --- diyalog düğmeleri ------------------------------------------------ */
.excalidraw .ExcButton,
.excalidraw .Dialog__action-button {
border-radius: var(--dg-kose, 10px);
font-family: var(--x-font);
font-size: 13.5px;
font-weight: var(--dg-agirlik-us, 800);
letter-spacing: 0;
transition: transform 0.18s ease, box-shadow 0.18s ease,
background-color 0.18s ease;
}
.excalidraw .ExcButton.ExcButton--variant-filled,
.excalidraw .Dialog__action-button--primary {
border: none;
background: var(--x-grad);
color: var(--m-on-accent, #ffffff);
box-shadow: var(--x-grad-shadow);
}
.excalidraw .ExcButton.ExcButton--variant-filled:hover,
.excalidraw .Dialog__action-button--primary:hover {
background: var(--x-grad);
transform: translateY(-1px);
box-shadow: 0 8px 20px oklch(0.55 calc(0.1 * var(--m-c)) var(--m-hm) / 0.36);
}
.excalidraw .ExcButton.ExcButton--variant-outlined {
border: 1.5px solid var(--x-line);
background: var(--x-btn-face);
color: var(--x-ink-mid);
}
.excalidraw .ExcButton.ExcButton--variant-outlined:hover {
border-color: oklch(0.85 calc(0.05 * var(--m-c)) var(--m-h));
background: var(--x-accent-soft);
color: var(--x-accent-deep);
}
.excalidraw .Dialog__action-button--danger {
border: none;
background: var(--x-danger);
color: var(--m-on-accent, #ffffff);
}
/* --- girdiler --------------------------------------------------------- */
.excalidraw .ExcTextField,
.excalidraw .ttd-dialog-input,
.excalidraw .ProjectName input,
.excalidraw input[type="text"]:not(.color-picker-input),
.excalidraw input[type="search"] {
border: 1.5px solid var(--x-line);
border-radius: var(--x-radius-card);
background: var(--x-field);
color: var(--x-ink);
font-family: var(--x-font);
font-size: 13px;
font-weight: 600;
}
.excalidraw .ExcTextField:focus-within,
.excalidraw .ttd-dialog-input:focus,
.excalidraw input[type="text"]:focus:not(.color-picker-input),
.excalidraw input[type="search"]:focus {
border-color: var(--x-accent);
box-shadow: 0 0 0 3px oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h) / 0.12);
outline: none;
}
/* --- paylaşım diyaloğu ------------------------------------------------ */
.excalidraw .ShareDialog__picker__header {
color: var(--x-ink);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.3px;
}
.excalidraw .ShareDialog__picker__description {
color: var(--x-ink-soft);
font-size: 13px;
line-height: 1.6;
}
.excalidraw .ShareDialog__separator {
border-top-color: var(--x-line-soft);
}
.excalidraw .ShareDialog__separator span {
background: var(--x-sheet);
color: var(--x-ink-faint);
font-size: 12px;
font-weight: 700;
}
.excalidraw .ShareDialog__popover,
.excalidraw .ShareableLinkDialog__popover {
border-radius: 999px;
background: oklch(0.93 0.05 150);
color: oklch(0.4 0.1 150);
font-family: var(--x-font);
font-weight: 800;
}
/* Bağlantı satırı: tasarımdaki "girdi + Kopyala" ikilisi. */
.excalidraw .ShareDialog__active__linkRow,
.excalidraw .ShareableLinkDialog__linkRow {
gap: 8px;
}
.excalidraw .ShareDialog__active__description {
padding: 13px 15px;
border-radius: 14px;
background: var(--m-accent-wash, oklch(0.96 calc(0.02 * var(--m-c)) var(--m-h)));
color: var(--x-ink-mid);
font-size: 12.5px;
line-height: 1.5;
}
/* --- görsel dışa aktarma (PNG / SVG / panoya kopyala) ----------------- */
.excalidraw .ImageExportModal__settings__setting__label {
color: var(--x-ink-mid);
font-size: 13px;
font-weight: var(--dg-agirlik-us, 800);
}
.excalidraw .ImageExportModal__preview__canvas {
border: 1px solid var(--x-line);
border-radius: var(--x-radius-card);
background: var(--x-field);
}
/* PNG / SVG / pano düğmeleri: tasarımdaki hap sekmelerin karşılığı. */
.excalidraw .ImageExportModal__settings__buttons .ExcButton {
border-radius: var(--dg-kose, 10px);
}
.excalidraw .RadioGroup {
padding: 4px;
border: none;
border-radius: 999px;
background: var(--x-line-soft);
}
.excalidraw .RadioGroup__choice {
border-radius: 999px;
color: var(--x-ink-faint);
font-family: var(--x-font);
font-size: 13px;
font-weight: 700;
}
.excalidraw .RadioGroup__choice.active {
background: var(--m-sheet, #ffffff);
color: var(--x-accent-deep);
font-weight: 800;
box-shadow: 0 3px 8px rgba(30, 60, 75, 0.1);
}
/* Anahtar (açık/kapalı) - "arka planı da aktar" gibi ayarlar. */
.excalidraw .Switch input {
accent-color: var(--x-accent);
}
.excalidraw .Checkbox-box {
border-radius: 6px;
border-color: var(--x-line);
}
.excalidraw .Checkbox.is-checked .Checkbox-box {
background: var(--x-grad);
border-color: transparent;
}
/* --- yardım diyaloğu -------------------------------------------------- */
.excalidraw .HelpDialog__island {
border: 1px solid var(--x-line-soft);
border-radius: var(--x-radius-panel);
background: var(--x-field);
}
.excalidraw .HelpDialog__island-content h3,
.excalidraw .HelpDialog__header {
color: var(--x-ink);
font-weight: 800;
}
.excalidraw .HelpDialog__key {
border: 1px solid var(--x-line);
border-radius: 6px;
background: var(--x-btn-face);
color: var(--x-ink-mid);
font-family: var(--x-font);
font-weight: 800;
}
.excalidraw .HelpDialog__btn {
border: 1.5px solid var(--x-line);
border-radius: var(--dg-kose, 10px);
background: var(--x-btn-face);
color: var(--x-ink-mid);
font-weight: var(--dg-agirlik-us, 800);
}
.excalidraw .HelpDialog__btn:hover {
border-color: oklch(0.85 calc(0.05 * var(--m-c)) var(--m-h));
background: var(--x-accent-soft);
color: var(--x-accent-deep);
}
/* =====================================================================
* 13. RENK SEÇİCİ
*
* Kontur/arka plan karelerine tıklayınca açılan pencere. Tasarımda
* görünmüyor (orada yalnızca beş kare var) ama Excalidraw'ın asıl renk
* aracı burası; modallerle aynı dile çevrildi.
* ================================================================== */
.excalidraw .color-picker-content,
.excalidraw .color-picker-popover-container,
.excalidraw .picker-container,
.excalidraw .popover {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-panel);
background: var(--x-sheet);
box-shadow: var(--x-shadow-md);
}
.excalidraw .color-picker__heading,
.excalidraw .color-picker__title,
.excalidraw .picker-section-label,
.excalidraw .popover-section-title {
color: var(--x-ink-label);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
}
.excalidraw .color-picker__tip {
color: var(--x-ink-soft);
font-size: 11.5px;
}
.excalidraw .color-picker-input,
.excalidraw .color-picker__input-label {
border-radius: var(--border-radius-lg);
background: var(--x-field);
color: var(--x-ink);
font-family: var(--x-font);
font-weight: 700;
}
.excalidraw .color-picker__input-label:focus-within {
border-color: var(--x-accent);
box-shadow: 0 0 0 3px oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h) / 0.12);
}
.excalidraw .color-picker__button__hotkey-label {
color: var(--x-ink-faint);
font-family: var(--x-font);
font-weight: 800;
}
.excalidraw .color-picker__error-message {
color: var(--x-danger);
font-weight: 700;
}
/* =====================================================================
* 14. KENAR ÇUBUĞU (KÜTÜPHANE) VE TUVAL ARAMASI
*
* Tasarımda yok; Excalidraw'ın kendi şekil kütüphanesi ve tuval içi
* arama panelleri. Cam panel diline çevrildi ki sağda açıldıklarında
* tuvalin geri kalanıyla aynı yerden gelmiş görünsünler.
* ================================================================== */
.excalidraw .sidebar {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-panel);
background: var(--x-glass);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: var(--x-shadow-md);
}
.excalidraw .sidebar__header {
border-bottom: 1px solid var(--x-line-soft);
}
.excalidraw .sidebar-tab-trigger {
border-radius: 999px;
color: var(--x-ink-mid);
font-family: var(--x-font);
font-size: 12.5px;
font-weight: 700;
}
.excalidraw .sidebar-tab-trigger[data-state="active"] {
background: var(--m-sheet, #ffffff);
color: var(--x-accent-deep);
font-weight: 800;
box-shadow: 0 3px 8px rgba(30, 60, 75, 0.1);
}
.excalidraw .library-unit {
border-radius: var(--x-radius-card);
}
.excalidraw .library-unit--hover,
.excalidraw .library-unit:hover {
border-color: var(--x-accent);
}
.excalidraw .library-unit--selected,
.excalidraw .library-unit__active {
border-color: var(--x-accent);
box-shadow: 0 0 0 2px oklch(0.55 calc(0.09 * var(--m-c)) var(--m-h) / 0.25);
}
.excalidraw .library-menu-items-container__header {
color: var(--x-ink-label);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.excalidraw .library-menu-browse-button {
border-radius: var(--dg-kose, 10px);
background: var(--x-grad);
color: var(--m-on-accent, #ffffff);
font-family: var(--x-font);
font-weight: var(--dg-agirlik-us, 800);
box-shadow: var(--x-grad-shadow);
}
.excalidraw .layer-ui__search-header,
.excalidraw .QuickSearch__wrapper {
border-bottom: 1px solid var(--x-line-soft);
}
.excalidraw .layer-ui__search input,
.excalidraw .QuickSearch__input {
border: 1.5px solid var(--x-line);
border-radius: 999px;
background: var(--x-field);
font-family: var(--x-font);
font-size: 13px;
font-weight: 600;
}
.excalidraw .layer-ui__search-count {
color: var(--x-ink-soft);
font-size: 12px;
font-weight: 700;
}
.excalidraw .layer-ui__result-item {
border-radius: var(--x-radius-btn);
}
.excalidraw .layer-ui__result-item.active,
.excalidraw .layer-ui__result-item:hover {
background: var(--x-accent-soft);
}
/* =====================================================================
* 15. KÜÇÜK PARÇALAR
* ================================================================== */
.excalidraw .Toast {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: var(--x-shadow-md);
color: var(--x-ink);
font-family: var(--x-font);
font-size: 12.5px;
font-weight: 700;
}
.excalidraw .Toast__progress-bar-fill {
background: var(--x-grad);
}
.excalidraw .excalidraw-tooltip {
border-radius: var(--x-radius-btn);
background: var(--m-ink, #22303a);
color: var(--m-on-accent, #ffffff);
font-family: var(--x-font);
font-size: 11.5px;
font-weight: 700;
box-shadow: 0 8px 20px rgba(20, 40, 55, 0.25);
}
/* Tuval üstündeki öğe düğmeleri (bağlantı, çerçeve adı vs.). */
.excalidraw .excalidraw-canvas-buttons,
.excalidraw .excalidraw-hyperlinkContainer {
border: 1px solid var(--x-edge);
border-radius: var(--x-radius-card);
background: var(--x-glass);
box-shadow: var(--x-shadow-sm);
}
.excalidraw .excalidraw-hyperlinkContainer-input {
border-radius: 8px;
background: var(--x-field);
font-family: var(--x-font);
}
/* Bağlantılı öğe rengi. */
.excalidraw .excalidraw-link {
color: var(--x-accent);
}
/* =====================================================================
* 16. KARŞILAMA EKRANI
*
* Boş tuvalin ortasındaki blok (bkz. AppWelcomeScreen.tsx). Tasarımda
* karşılığı yok; kart dili tasarımın "Yeni çizim" kartından geliyor.
* ================================================================== */
.excalidraw .welcome-screen-center__heading {
color: var(--x-ink-soft);
font-family: var(--x-font);
font-size: 15px;
font-weight: 700;
line-height: 1.7;
}
.excalidraw .welcome-screen-center__logo .ExcalidrawLogo {
align-items: center;
display: inline-flex;
gap: 10px;
}
.excalidraw .ExcalidrawLogo-text {
display: none;
}
.excalidraw .welcome-screen-center__logo .ExcalidrawLogo::after {
color: var(--x-ink);
content: "Çizim";
font-family: var(--x-font);
font-size: 26px;
font-weight: 800;
letter-spacing: 0;
}
.excalidraw .welcome-screen-menu-item {
border-radius: var(--x-radius-card);
color: var(--x-ink-mid);
font-family: var(--x-font);
font-size: 13.5px;
font-weight: 700;
}
.excalidraw .welcome-screen-menu-item:hover {
background: var(--x-glass-soft);
color: var(--x-accent-deep);
box-shadow: var(--x-shadow-sm);
}
.excalidraw .welcome-screen-menu-item__shortcut {
color: var(--x-ink-faint);
font-family: var(--x-font);
font-size: 11px;
font-weight: 700;
}
.excalidraw .welcome-screen-decor-hint__label {
color: var(--x-ink-soft);
font-weight: 700;
}
/* =====================================================================
* 17. KOYU TEMA VE AZALTILMIŞ HAREKET
*
* Çalışma alanının teması aydınlık; Excalidraw'ın kendi karanlık kipi
* (☰ > Karanlık mod) yerinde duruyor ve orada da aynı biçimleri
* kullanabilsin diye tokenlar yeniden tanımlanıyor. Böylece kip
* değiştirince arayüz sönmüyor, sadece koyuya dönüyor.
* ================================================================== */
html.dark,
html.dark body {
background: #131a1f;
}
html.dark .x-nav {
background: rgba(24, 32, 38, 0.72);
border-bottom-color: var(--m-edge, rgba(255, 255, 255, 0.08));
color: #b3c1c9;
}
html.dark .x-nav__link {
color: #b3c1c9;
}
html.dark .x-nav__link:hover {
background: var(--m-tul, rgba(255, 255, 255, 0.08));
color: #e7eef2;
}
html.dark .x-nav__link.is-active {
background: var(--m-tul, rgba(255, 255, 255, 0.12));
color: #9fd6e4;
box-shadow: none;
}
.excalidraw.theme--dark {
--x-ink: #e7eef2;
--x-ink-mid: #b3c1c9;
--x-ink-soft: #93a3ac;
--x-ink-faint: #7c8b94;
--x-ink-label: #93a3ac;
--x-accent: oklch(0.72 calc(0.09 * var(--m-c)) var(--m-h));
--x-accent-deep: oklch(0.82 calc(0.08 * var(--m-c)) var(--m-h));
--x-accent-soft: var(--m-tul, rgba(255, 255, 255, 0.08));
--x-accent-tint: rgba(120, 200, 220, 0.16);
--x-glass: rgba(30, 39, 46, 0.9);
--x-glass-soft: rgba(30, 39, 46, 0.85);
--x-edge: var(--m-tul, rgba(255, 255, 255, 0.08));
--x-sheet: #1e272e;
--x-line: #33414a;
--x-line-soft: #2a353d;
--x-field: #202a31;
--x-btn-face: #273139;
/* Excalidraw koyu kipte kendi kaydıraç rengini yeniden tanımlıyor;
burada da teal'e çekiliyor. */
--color-slider-track: oklch(0.7 calc(0.1 * var(--m-c)) var(--m-h));
--color-slider-thumb: var(--m-sheet, #ffffff);
--x-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.35);
--x-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
--x-shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.6);
--x-page-bg: linear-gradient(160deg, #141c22 0%, #171f25 55%, #1a1f27 100%);
--color-on-surface: #e7eef2;
--text-primary-color: #e7eef2;
--icon-fill-color: #b3c1c9;
}
/* Koyu kipte beyaz metin isteyen yerler: degrade zeminler her iki kipte
de aynı, üstündeki yazı da öyle kalmalı. */
.excalidraw.theme--dark .app-drawings__item--active .app-drawings__name,
.excalidraw.theme--dark .app-drawings__item--active .app-drawings__open,
.excalidraw.theme--dark .collab-button,
.excalidraw.theme--dark .ExcButton.ExcButton--variant-filled {
color: var(--m-on-accent, #ffffff);
}
@media (prefers-reduced-motion: reduce) {
.excalidraw .Modal__content {
animation: none;
}
.excalidraw .x-nav__logo,
.excalidraw .collab-button,
.excalidraw .dropdown-menu-button,
.excalidraw .app-home-button,
.excalidraw .x-doc__back,
.excalidraw .ExcButton,
.excalidraw .Dialog__action-button {
transition: none;
}
.excalidraw .collab-button:hover,
.excalidraw .dropdown-menu-button:hover,
.excalidraw .app-home-button:hover,
.excalidraw .x-doc__back:hover,
.excalidraw .ExcButton.ExcButton--variant-filled:hover,
.excalidraw .Dialog__action-button--primary:hover {
transform: none;
}
}