/* ========================================= 1. TEMEL DEĞİŞKENLER VE SIFIRLAMA ========================================= */ :root { --bg-dark: #1e1e24; --bg-sidebar: #17171c; --accent: #6b6bff; --text-main: #ffffff; --text-muted: #d1d5db; --border-color: rgba(255, 255, 255, 0.15); --hover-bg: rgba(255, 255, 255, 0.05); --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; transition: 0.2s; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); } /* ========================================= 2. ANA SAYFA VE ARKA PLAN ========================================= */ html, body { background-color: #121212; color: var(--text-main); } body { width: 100vw; height: 100vh; overflow: hidden; background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564'); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } #bg-dimmer { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: all 0.5s ease; z-index: 5; } body.search-focused #bg-dimmer { opacity: 1; pointer-events: all; } /* ========================================= 3. WIDGET IZGARA (GRID) YERLEŞİMİ (YENİ) ========================================= */ #dashboard { width: 90vw; height: 88vh; display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(24, 1fr); /* 12x12 Hassas Grid */ gap: 20px; position: relative; z-index: 10; opacity: 0; transition: opacity 0.15s ease; } .widget { position: relative; border-radius: 24px; display: flex; flex-direction: column; transition: all 0.4s ease; padding: 25px; } /* WIDGET TEMA SİSTEMİ */ body.w-theme-glass .widget { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.15); color: #fff; } body.w-theme-matte .widget { background: rgba(30, 30, 35, 0.95); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 4px 15px rgba(0,0,0,0.4); color: #fff; } body.w-theme-transparent .widget { background: transparent; border: none; box-shadow: none; color: #fff; padding: 10px; } body.w-theme-dark .widget { background: #121212; border: 1px solid #333; box-shadow: 0 5px 20px rgba(0,0,0,0.8); color: #fff; } body.w-theme-light .widget { background: rgba(255, 255, 255, 0.9); border: 1px solid #ddd; box-shadow: 0 5px 20px rgba(0,0,0,0.1); color: #121212; } body.w-theme-light .widget * { color: #121212; } body.w-theme-neon .widget { background: rgba(0,0,0,0.8); border: 1px solid var(--accent); box-shadow: 0 0 15px var(--accent), inset 0 0 10px var(--accent); color: #fff; } /* ARAMA ESNASINDA DİĞER WIDGETLERİ GİZLEME (YENİ ANİMASYON) */ body.search-focused .widget:not(#widget-search) { opacity: 0 !important; filter: blur(10px); pointer-events: none; transform: scale(0.95); } body[class*="w-theme-"] .search-widget { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } /* ========================================= 4. WIDGET İÇERİK TASARIMLARI VE YENİ KONUMLAR ========================================= */ /* Hava Durumu (Sol Üst) */ #widget-weather { grid-column: 4 / 10; grid-row: 4 / 10; align-items: flex-start; justify-content: center; } .w-top-text { font-size: 0.85rem; font-weight: 600; opacity: 0.8; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .w-time-display { font-size: 4rem; font-weight: 700; line-height: 1; margin-bottom: 15px; } .weather-info { display: flex; align-items: center; gap: 15px; } .w-icon { font-size: 2.5rem; } .w-details { display: flex; flex-direction: column; } .w-temp { font-size: 1.3rem; font-weight: bold; } .w-city { font-size: 0.9rem; opacity: 0.8; margin-top: 2px;} /* Haberler (Sol Alt) */ #widget-news { grid-column: 4 / 10; grid-row: 10 / 24; justify-content: flex-start; overflow-y: auto;} .widget-title { font-size: 0.9rem; font-weight: bold; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px;} .news-item { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; } .news-item:hover { color: var(--accent); transform: translateX(5px); } .news-icon { width: 28px; height: 28px; background: rgba(255,255,255,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } /* Ortadaki İkincil Saat */ #widget-clock { grid-column: 10 / 22; grid-row: 4 / 10; align-items: center; justify-content: center; } #centerTime { font-size: 5rem; font-weight: 700; line-height: 1; margin-bottom: 8px; } #centerDate { font-size: 1.2rem; opacity: 0.8; } /* Analog Saat Tasarımı */ #analogClockContainer { display: none; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px; } .analog-clock { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--text-main); position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); } .analog-center { position: absolute; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;} .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; border-radius: 4px; background: var(--text-main); } .hour-hand { width: 6px; height: 35px; margin-left: -3px; z-index: 2; } .min-hand { width: 4px; height: 45px; margin-left: -2px; z-index: 3; } .sec-hand { width: 2px; height: 50px; background: var(--accent); margin-left: -1px; z-index: 4; } /* Arama Çubuğu Widget (Merkez) */ #widget-search { grid-column: 10 / 22; grid-row: 10 / 12; display: flex; justify-content: center; align-items: center; z-index: 50; } .search-container { width: 100%; height: 64px; background: rgba(32, 35, 39, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--border-color); border-radius: 32px; display: flex; align-items: center; padding: 0 25px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); transition: all 0.5s var(--bounce); } /* YENİDEN KUSURSUZ FIRLAMA ANİMASYONU */ body.search-focused .search-container { transform: scale(1.08) translateY(-15vh); background: rgba(20, 20, 25, 0.98); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--accent); z-index: 100; position: relative; } .engine-logo { width: 26px; height: 26px; margin-right: 15px; } .engine-logo img { width: 100%; height: 100%; object-fit: contain; } #mainSearch { flex: 1; height: 100%; border: none; outline: none; background: transparent; color: var(--text-main); font-size: 1.15rem; } /* Kısayollar (Arama Çubuğunun Altında - YENİ KONUM) */ #widget-shortcuts { grid-column: 10 / 22; grid-row: 12 / 18; justify-content: center; padding: 20px;} .sc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; width: 100%; } .sc-box { background: rgba(255,255,255,0.08); border-radius: 16px; padding: 15px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); } .sc-box:hover { background: rgba(255,255,255,0.15); border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2);} .sc-box img { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 8px;} .sc-box span { font-size: 0.75rem; opacity: 0.9; font-weight: 500; text-align: center;} /* Yapılacaklar (Kısayolların Altında - YENİ KONUM) */ #widget-todo { grid-column: 10 / 22; grid-row: 18 / 24; justify-content: flex-start; } .todo-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; font-size: 1rem; opacity: 0.9; cursor: pointer; transition: 0.2s;} .todo-item:hover { opacity: 1; transform: translateX(5px); } .todo-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } /* ========================================= 5. AYARLAR MODAL VE UI ELEMANLARI ========================================= */ .open-settings-btn { position: fixed; top: 25px; right: 25px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 50%; width: 45px; height: 45px; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); z-index: 50; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .open-settings-btn img { width: 22px; height: 22px; opacity: 0.9; transition: 0.3s; filter: invert(1); } .open-settings-btn:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); } #settingsOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.4s; } #settingsOverlay.active { opacity: 1; pointer-events: all; } .settings-modal { width: 850px; height: 550px; background: var(--bg-dark); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); transform: scale(0.9); transition: 0.4s var(--bounce); box-shadow: 0 25px 50px rgba(0,0,0,0.5);} #settingsOverlay.active .settings-modal { transform: scale(1); } .modal-header { height: 50px; background: var(--bg-sidebar); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border-color); color: var(--text-main); } .close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: 0.2s; } .close-btn:hover { color: white; } .modal-body { display: flex; flex: 1; overflow: hidden; color: var(--text-main); } .sidebar { width: 220px; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); padding: 10px 0; overflow-y: auto; } .nav-item { padding: 12px 20px; cursor: pointer; color: var(--text-muted); font-size: 0.95rem; border-left: 3px solid transparent; transition: 0.2s; } .nav-item:hover { background: var(--hover-bg); color: white; padding-left: 25px; } .nav-item.active { background: rgba(107, 107, 255, 0.1); color: var(--accent); border-left-color: var(--accent); } .content-area { flex: 1; padding: 30px; overflow-y: auto; background: var(--bg-dark); color: var(--text-main); } .tab-pane { display: none; } .tab-pane.active { display: block; animation: tabReveal 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes tabReveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .setting-group { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin-bottom: 20px; } .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main); } .setting-row:last-child { border-bottom: none; padding-bottom: 0; } .setting-info h3 { font-size: 1rem; font-weight: 500; display: flex; align-items: center; margin-bottom: 4px; } .setting-info p { font-size: 0.85rem; color: var(--text-muted); } input[type="text"] { background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); color: white; padding: 8px 12px; border-radius: 6px; outline: none; transition: 0.2s; } input[type="text"]:focus { border-color: var(--accent); } .action-btn { background: rgba(255,255,255,0.1); border: none; color: white; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 0.95rem; } .action-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } .action-btn.primary { background: var(--accent); } .action-btn.danger { background: rgba(255, 77, 77, 0.1); color: #ff4d4d; } .switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: rgba(255,255,255,0.2); border-radius: 20px; cursor: pointer; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.4s var(--bounce); } input:checked + .slider { background: var(--accent); } input:checked + .slider:before { transform: translateX(18px); } .tooltip-container { position: relative; display: inline-flex; align-items: center; margin-left: 8px; cursor: help; } .info-icon { width: 16px; height: 16px; fill: currentColor; opacity: 0.5; transition: 0.2s; } .tooltip-container:hover .info-icon { opacity: 1; color: var(--accent); } .tooltip-text { visibility: hidden; width: 220px; background: #2c2c35; color: #fff; font-size: 0.85rem; padding: 10px; border-radius: 6px; position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%) scale(0.8); opacity: 0; transition: 0.3s var(--bounce); border: 1px solid var(--border-color); z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none;} .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #2c2c35 transparent transparent transparent; } .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateX(-50%) scale(1); } /* ========================================= 6. CUSTOM DROPDOWN (Karanlık Tema Açılır Menüler) ========================================= */ .custom-select { position: relative; user-select: none; min-width: 150px; } .cs-selected { background: rgba(0,0,0,0.3) url("data:image/svg+xml;utf8,") no-repeat right 10px center; border: 1px solid var(--border-color); color: white; padding: 8px 36px 8px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; transition: 0.2s; font-size: 0.95rem; position: relative; } .cs-selected:hover { border-color: var(--accent); } .cs-selected img { width: 20px; height: 15px; margin-right: 8px; border-radius: 2px; object-fit: cover; } .cs-items { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 6px; margin-top: 4px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s ease; z-index: 100; box-shadow: 0 5px 15px rgba(0,0,0,0.5); max-height: 200px; overflow-y: auto; } .custom-select.active .cs-items { opacity: 1; visibility: visible; transform: translateY(0); } .cs-item { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; font-size: 0.95rem; transition: 0.2s; color: var(--text-main); } .cs-item:hover { background: var(--accent); } .cs-item img { width: 20px; height: 15px; margin-right: 8px; border-radius: 2px; object-fit: cover; } /* ========================================= 7. ARAMA MOTORLARI VE ŞABLON POP-UP'LARI ========================================= */ #engineListContainer { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; } .engine-list-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; transition: 0.2s; } .engine-list-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } .engine-list-item.default { border-color: var(--accent); background: rgba(107, 107, 255, 0.05); } .engine-info-block { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; } .engine-info-block img { width: 24px; height: 24px; object-fit: contain; } .engine-name { font-size: 0.95rem; color: var(--text-main); font-weight: 500; } .engine-url { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .modal-box { width: 400px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); transform: scale(0.9); transition: 0.4s var(--bounce); position: fixed; top: 50%; left: 50%; z-index: 200; opacity: 0; pointer-events: none; margin-left: -200px; margin-top: -150px; } .modal-box.active { opacity: 1; pointer-events: all; transform: scale(1); } .modal-box h3 { margin-bottom: 20px; font-weight: 500; color: var(--text-main); } .input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; color: var(--text-main); } .input-group label { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; } .template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-height: 300px; overflow-y: auto; padding-right: 5px; } .template-card { background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px 10px; cursor: pointer; text-align: center; transition: 0.2s; font-size: 0.95rem; } .template-card:hover { border-color: var(--accent); background: rgba(107, 107, 255, 0.1); transform: translateY(-3px); } /* ========================================= 8. EK GELİŞMİŞ ARAMA, YÖNETİM VE LAYOUT ARAÇLARI ========================================= */ #widget-search { overflow: visible; } .search-container { position: relative; } .search-suggestions { position: absolute; top: calc(100% + 12px); left: 0; right: 0; background: rgba(20, 20, 25, 0.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; box-shadow: 0 22px 50px rgba(0,0,0,0.35); overflow: hidden; display: none; z-index: 120; } .search-suggestion-item { width: 100%; border: none; background: transparent; color: inherit; text-align: left; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; transition: background 0.18s ease; } .search-suggestion-item:hover, .search-suggestion-item.active { background: rgba(255,255,255,0.08); } .search-suggestion-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .search-suggestion-icon { width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .search-suggestion-text { font-size: 0.96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggestion-meta { font-size: 0.76rem; opacity: 0.62; flex-shrink: 0; } .manager-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .manager-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .manager-item-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .manager-item-title { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .manager-item-meta { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; } .manager-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .empty-state { border: 1px dashed rgba(255,255,255,0.16); border-radius: 12px; padding: 16px; color: var(--text-muted); background: rgba(255,255,255,0.02); } .widget-resize-handle { position: absolute; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,0.15), var(--accent)); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 8px 16px rgba(0,0,0,0.22); display: none; z-index: 40; opacity: 0.9; } /* Edge handles (window-like resizing) */ .widget-resize-handle[data-dir="n"], .widget-resize-handle[data-dir="s"]{ width: 52px; height: 14px; border-radius: 999px; } .widget-resize-handle[data-dir="e"], .widget-resize-handle[data-dir="w"]{ width: 14px; height: 52px; border-radius: 999px; } .widget-resize-handle[data-dir="se"]{ right: 10px; bottom: 10px; cursor: nwse-resize; } .widget-resize-handle[data-dir="nw"]{ left: 10px; top: 10px; cursor: nwse-resize; } .widget-resize-handle[data-dir="ne"]{ right: 10px; top: 10px; cursor: nesw-resize; } .widget-resize-handle[data-dir="sw"]{ left: 10px; bottom: 10px; cursor: nesw-resize; } .widget-resize-handle[data-dir="n"]{ left: 50%; top: 6px; transform: translateX(-50%); cursor: ns-resize; } .widget-resize-handle[data-dir="s"]{ left: 50%; bottom: 6px; transform: translateX(-50%); cursor: ns-resize; } .widget-resize-handle[data-dir="e"]{ right: 6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; } .widget-resize-handle[data-dir="w"]{ left: 6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; } .widget-resize-handle:hover{ opacity: 1; filter: brightness(1.08); } /* Close button in edit mode */ .widget-close-btn{ position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); box-shadow: 0 10px 22px rgba(0,0,0,0.22); display: none; z-index: 45; cursor: pointer; padding: 0; } .widget-close-btn img{ width: 14px; height: 14px; filter: invert(1); opacity: 0.9; } .widget-close-btn:hover{ background: rgba(255,77,77,0.15); border-color: rgba(255,77,77,0.35); } .widget-edit-chip { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); display: none; z-index: 35; } body.layout-edit-mode .widget { cursor: grab; outline: 1px dashed rgba(255,255,255,0.18); outline-offset: 0; overflow: visible; } body.layout-edit-mode .widget.drag-over { outline: 2px solid var(--accent); transform: scale(1.015); } body.layout-edit-mode .widget.dragging { opacity: 0.7; cursor: grabbing; } body.layout-edit-mode .widget-resize-handle, body.layout-edit-mode .widget-edit-chip, body.layout-edit-mode .widget-close-btn { display: block; } body.layout-edit-mode .widget a, body.layout-edit-mode .widget button, body.layout-edit-mode .widget input, body.layout-edit-mode .widget label { pointer-events: none !important; } body.layout-edit-mode .widget .widget-resize-handle, body.layout-edit-mode .widget .widget-close-btn, body.layout-edit-mode .widget .widget-settings-btn { pointer-events: auto !important; } /* Small-screen safety: prevent long text from breaking layout */ #widget-todo .todo-item span, #widget-news .news-item span, #widget-shortcuts .sc-box span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Corner buttons a bit smaller */ .open-settings-btn { width: 38px !important; height: 38px !important; transform: scale(var(--ui-scale, 1)) !important; transform-origin: top right !important; } .open-settings-btn img { width: 18px !important; height: 18px !important; } #layoutPencilBtn svg { width: 18px !important; height: 18px !important; } #layoutPencilBtn{ transform: scale(var(--ui-scale, 1)) !important; transform-origin: top right !important; } #bgCredit{ transform: scale(var(--ui-scale, 1)) !important; transform-origin: bottom left !important; } /* Background credit visibility */ body.bg-credit-hidden #bgCredit { display: none !important; } /* ========================================= 99. UX MICRO TUNING (OVERRIDES) ========================================= */ /* Slightly larger inputs for better usability */ input[type="text"], input[type="url"], input[type="search"], input[type="number"]{ padding: 10px 14px !important; border-radius: 10px !important; font-size: 0.98rem !important; } /* Search bar input a touch bigger */ #mainSearch{ font-size: calc(1.22rem * var(--ui-scale, 1)) !important; } /* Resize handle: easier to grab at corners (SE handle) */ .widget-resize-handle[data-dir="se"]{ width: 24px !important; height: 24px !important; border-radius: 8px !important; right: 8px !important; bottom: 8px !important; } /* Keyboard shortcut capture fields */ .kbd-capture{ cursor: pointer !important; } .kbd-capture:focus{ border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(107,107,255,0.18) !important; } /* ========================================= 100. RESPONSIVE SCALE + SEARCH CENTERING + SEARCH THEMING ========================================= */ /* Dashboard: allow placement up to the true corners */ #dashboard{ width: 100vw !important; height: 100vh !important; grid-template-columns: repeat(24, 1fr) !important; grid-template-rows: repeat(24, 1fr) !important; transform: scale(var(--ui-scale, 1)) !important; transform-origin: center !important; } /* Search focus: always animate towards the exact viewport center */ body.search-focused .search-container { transform: translate(var(--sf-dx, 0px), var(--sf-dy, -15vh)) scale(1.08) !important; } /* Search widget should inherit widget theme (glass/matte/etc.) */ body.w-theme-glass #widget-search .search-container{ background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255,255,255,0.20) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } body.w-theme-matte #widget-search .search-container{ background: rgba(30, 30, 35, 0.95) !important; border: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.w-theme-transparent #widget-search .search-container{ background: transparent !important; border: none !important; box-shadow: none !important; } body.w-theme-dark #widget-search .search-container{ background: #121212 !important; border: 1px solid #333 !important; } body.w-theme-light #widget-search .search-container{ background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #ddd !important; } body.w-theme-neon #widget-search .search-container{ background: rgba(0,0,0,0.80) !important; border: 1px solid var(--accent) !important; box-shadow: 0 0 15px var(--accent), inset 0 0 10px var(--accent) !important; } /* ========================================= 100. LAYOUT FIXES (v4.6) ========================================= */ /* Dashboard should be full viewport so widgets can reach real corners */ body { align-items: stretch !important; justify-content: stretch !important; } #dashboard { width: 100vw !important; height: 100vh !important; padding: 0 !important; margin: 0 !important; } /* Search suggestions should follow widget theme */ #widget-search .search-container { position: relative !important; } .search-suggestions{ position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: none; padding: 10px; border-radius: 18px; border: 1px solid var(--border-color); background: rgba(32, 35, 39, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 18px 55px rgba(0,0,0,0.45); z-index: 120; } body.search-focused .search-suggestions{ background: rgba(20, 20, 25, 0.98); } body.w-theme-matte .search-suggestions{ background: rgba(30, 30, 35, 0.95); border-color: rgba(255,255,255,0.05); } body.w-theme-transparent .search-suggestions{ background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.10); } body.w-theme-dark .search-suggestions{ background: rgba(18,18,18,0.96); border-color: #333; } body.w-theme-light .search-suggestions{ background: rgba(255,255,255,0.92); border-color: #ddd; } body.w-theme-neon .search-suggestions{ background: rgba(0,0,0,0.86); border-color: var(--accent); box-shadow: 0 0 22px var(--accent), 0 18px 55px rgba(0,0,0,0.55); } .search-suggestion-item{ width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); cursor: pointer; transition: 0.15s ease; color: var(--text-main); } body.w-theme-light .search-suggestion-item{ border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); color: #121212; } .search-suggestion-item:hover, .search-suggestion-item.selected{ border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); } body.w-theme-neon .search-suggestion-item.selected{ border-color: var(--accent); } /* Window-like resize: invisible edge/corner hit-zones (no visible buttons) */ .widget-resize-handle{ background: transparent !important; border: none !important; box-shadow: none !important; opacity: 0 !important; z-index: 30 !important; } .widget-close-btn{ z-index: 60 !important; } .widget-edit-chip{ z-index: 55 !important; } /* Edges */ .widget-resize-handle[data-dir="n"]{ left: 0 !important; top: -8px !important; width: 100% !important; height: 16px !important; transform: none !important; border-radius: 0 !important; cursor: ns-resize !important; } .widget-resize-handle[data-dir="s"]{ left: 0 !important; bottom: -8px !important; width: 100% !important; height: 16px !important; transform: none !important; border-radius: 0 !important; cursor: ns-resize !important; } .widget-resize-handle[data-dir="e"]{ right: -8px !important; top: 0 !important; width: 16px !important; height: 100% !important; transform: none !important; border-radius: 0 !important; cursor: ew-resize !important; } .widget-resize-handle[data-dir="w"]{ left: -8px !important; top: 0 !important; width: 16px !important; height: 100% !important; transform: none !important; border-radius: 0 !important; cursor: ew-resize !important; } /* Corners */ .widget-resize-handle[data-dir="nw"]{ left: -10px !important; top: -10px !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; cursor: nwse-resize !important; } .widget-resize-handle[data-dir="ne"]{ right: -10px !important; top: -10px !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; cursor: nesw-resize !important; } .widget-resize-handle[data-dir="sw"]{ left: -10px !important; bottom: -10px !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; cursor: nesw-resize !important; } .widget-resize-handle[data-dir="se"]{ right: -10px !important; bottom: -10px !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; cursor: nwse-resize !important; } /* ========================================= 98. LOGO + WIDGET SETTINGS BUTTON ========================================= */ #bntLogo{ position: fixed; top: 25px; left: 25px; z-index: 55; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.20); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.25s; } #bntLogo:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); } #bntLogo img{ width: 28px; height: 28px; object-fit: contain; } .widget-settings-btn{ position: absolute; top: 10px; right: 44px; width: 28px; height: 28px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); box-shadow: 0 10px 22px rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease, background .18s ease, border-color .18s ease; z-index: 46; cursor: pointer; padding: 0; } .widget-settings-btn img{ width: 14px; height: 14px; filter: invert(1); opacity: 0.92; } .widget-settings-btn:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); } body.layout-edit-mode .widget .widget-settings-btn, body.layout-edit-mode .widget:focus-within .widget-settings-btn, body.layout-edit-mode .widget:hover .widget-settings-btn{ opacity: 1; visibility: visible; pointer-events: auto; } /* Search suggestions should also follow the widget theme */ #searchSuggestions{ border-radius: 16px; overflow: hidden; } body.w-theme-glass #searchSuggestions{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } body.w-theme-matte #searchSuggestions{ background: rgba(30, 30, 35, 0.95); border: 1px solid rgba(255,255,255,0.06); } body.w-theme-dark #searchSuggestions{ background: rgba(18,18,18,0.98); border: 1px solid rgba(255,255,255,0.10); } body.w-theme-light #searchSuggestions{ background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.10); } body.w-theme-neon #searchSuggestions{ background: rgba(0,0,0,0.85); border: 1px solid var(--accent); box-shadow: 0 0 12px var(--accent); } .widget-generic-body{ flex: 1; display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 10px); min-height: 0; overflow: auto; padding-right: 2px; } .widget-generic-row{ display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 0.9vw, 12px); padding: clamp(7px, 0.8vw, 10px) clamp(8px, 1vw, 12px); border-radius: 14px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.10); min-width: 0; } .widget-generic-row > *{ min-width: 0; } .widget-generic-title{ font-weight: 700; font-size: clamp(0.82rem, 0.95vw, 1.05rem); line-height: 1.2; } .widget-generic-sub{ color: var(--text-muted); font-size: clamp(0.72rem, 0.78vw, 0.85rem); line-height: 1.2; } .widget-generic-btnbar{ display:flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .widget-mini-btn{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); color: inherit; border-radius: 12px; padding: clamp(7px, 0.8vw, 8px) clamp(10px, 1vw, 12px); cursor: pointer; transition: 0.2s; font-weight: 600; font-size: clamp(0.78rem, 0.9vw, 0.9rem); } .widget-mini-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); } .widget-mini-btn.primary{ background: var(--accent); border-color: rgba(255,255,255,0.0); color: #fff; } .widget-mini-input{ width: 100%; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14); color: inherit; border-radius: 12px; padding: clamp(8px, 0.8vw, 10px) clamp(10px, 1vw, 12px); outline: none; font-size: clamp(0.82rem, 0.9vw, 0.95rem); } .widget-mini-input:focus{ border-color: var(--accent); } .widget-notes-area{ width: 100%; height: 100%; min-height: 140px; resize: none; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 12px; color: inherit; outline: none; line-height: 1.45; } .widget-notes-area:focus{ border-color: var(--accent); } .widget.widget-compact .widget-title{ margin-bottom: 12px; font-size: 0.78rem; } .widget.widget-compact .widget-generic-row{ padding: 6px 8px; border-radius: 12px; } .widget.widget-compact .widget-generic-title{ font-size: 0.8rem; } .widget.widget-compact .widget-generic-sub{ font-size: 0.7rem; } .widget.widget-compact .widget-mini-btn{ padding: 6px 8px; font-size: 0.76rem; } .widget.widget-compact .widget-mini-input{ padding: 7px 9px; font-size: 0.8rem; } .calendar-widget-shell{ display:flex; flex-direction:column; gap:10px; height:100%; min-height:0; } .calendar-month{ text-align:center; font-weight:900; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.10); } .calendar-weekdays, .calendar-days{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .calendar-weekday{ text-align:center; opacity:0.78; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .calendar-cell{ display:flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); font-weight:800; min-width:0; } .calendar-cell-today{ background:rgba(107,107,255,0.22); } .calendar-cell-empty{ border-color:transparent; background:transparent; } /* ========================================= BNT PATCH: Anchor colors + Custom overflow sliders ========================================= */ #dashboard a, #dashboard a:visited { color: inherit !important; text-decoration: none !important; } #dashboard a:hover { color: var(--accent) !important; text-decoration: none !important; } /* Hide native scrollbars for custom scroll areas */ .bnt-scroll { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .bnt-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; } /* Custom vertical slider (appears only when needed) */ .bnt-vslider-wrap { position: absolute; top: 14px; bottom: 14px; right: 10px; width: 18px; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 10; } .bnt-vslider { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 10px; height: 100%; background: transparent; writing-mode: bt-lr; /* IE */ transform: rotate(180deg); /* aligns top/bottom */ } .bnt-vslider::-webkit-slider-runnable-track { width: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; } .bnt-vslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: var(--thumb-h, 44px); border-radius: 999px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 18px rgba(0,0,0,0.25); margin-top: -1px; } .bnt-vslider:focus { outline: none; } .bnt-vslider::-moz-range-track { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; } .bnt-vslider::-moz-range-thumb { width: 10px; height: var(--thumb-h, 44px); border-radius: 999px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 18px rgba(0,0,0,0.25); } /* Ensure widgets never visually overflow their own bounds */ .widget { overflow: hidden; } .plugin-update-row{ align-items:flex-start; } .plugin-update-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; } .plugin-version-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); font-size:0.82rem; font-weight:700; color:var(--accent); } .plugin-update-status{ font-size:0.9rem; color:var(--text-muted); } .plugin-update-notes{ margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); font-size:0.88rem; color:var(--text-main); line-height:1.5; } .plugin-update-actions{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; margin-left:18px; } @media (max-width: 720px){ .plugin-update-row{ flex-direction:column; align-items:stretch; } .plugin-update-actions{ margin-left:0; margin-top:14px; align-items:stretch; } } .widget.widget-compact .widget-title, .widget.widget-compact .widget-header h2, .widget.widget-compact .widget-header h3{ font-size:.95rem; } .widget.widget-compact button, .widget.widget-compact select, .widget.widget-compact input, .widget.widget-compact .action-btn{ min-height:34px; padding:6px 10px; font-size:.85rem; } .widget.widget-mini .widget-title, .widget.widget-mini .widget-header h2, .widget.widget-mini .widget-header h3{ font-size:.85rem; } .widget.widget-mini button, .widget.widget-mini select, .widget.widget-mini input, .widget.widget-mini .action-btn{ min-height:30px; padding:5px 8px; font-size:.78rem; } .widget.widget-mini .calendar-grid{ gap:6px; } .widget.widget-mini .calendar-grid > div, .widget.widget-mini .calendar-cell, .widget.widget-mini .calendar-day{ min-height:28px; font-size:.75rem; } .plugin-about-group{ margin-bottom:16px; } .plugin-about-row{ align-items:flex-start; } .plugin-about-info{ width:100%; } .plugin-about-desc{ margin:6px 0 0 0; color:var(--text-muted); line-height:1.6; white-space:pre-line; } .plugin-about-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; } .plugin-version-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); font-size:.82rem; font-weight:700; color:var(--accent); } .plugin-about-name{ font-size:.95rem; font-weight:600; color:var(--text-main); } .plugin-about-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } @media (max-width:720px){ .plugin-about-links{ flex-direction:column; align-items:stretch; } } #tab-widget .setting-group[data-widget-unified-group="true"]{ display:flex; flex-direction:column; gap:0; margin:0 0 18px 0; padding:0; border:1px solid rgba(255,255,255,0.10); border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.02); } #tab-widget .setting-group[data-widget-unified-group="true"] .setting-row{ margin:0; padding:18px 16px; border:0; border-radius:0; border-bottom:1px solid rgba(255,255,255,0.08); background:transparent; box-shadow:none; } #tab-widget .setting-group[data-widget-unified-group="true"] .setting-row:last-child{ border-bottom:none; } #tab-widget .setting-group[data-widget-unified-group="true"] .setting-row::before, #tab-widget .setting-group[data-widget-unified-group="true"] .setting-row::after, #tab-widget .setting-group[data-widget-unified-group="true"] hr, #tab-widget .setting-group[data-widget-unified-group="true"] .separator, #tab-widget .setting-group[data-widget-unified-group="true"] .settings-separator{ display:none !important; content:none !important; } /* ========================================= WIDGET SYSTEM RESPONSIVE PASS ========================================= */ .widget-module-mounted{min-width:0;min-height:0} .widget-generic-body--compact{gap:6px} .widget-generic-row--stack{align-items:flex-start;flex-direction:column} .widget-emphasis{font-weight:900;font-size:clamp(.92rem,1.2vw,1.15rem);text-align:right} .widget-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .widget-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;border:1px solid rgba(255,255,255,.10)} .widget-progress__bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#fff 35%))} .widget-countdown-shell{display:flex;flex-direction:column;gap:10px} .widget-countdown-value{font-size:clamp(1rem,1.45vw,1.5rem);font-weight:900;text-align:right;white-space:nowrap} .widget-countdown-meta{margin-top:6px} .widget-countdown-shell.is-compact .widget-countdown-row{align-items:flex-start;flex-direction:column} .widget-countdown-shell.is-compact .widget-countdown-value{text-align:left;font-size:clamp(.95rem,1.25vw,1.2rem)} .widget-music-row{gap:12px} .widget-music-row.is-light{background:rgba(255,255,255,.11)} .widget-music-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .widget-music-copy{min-width:0;flex:1} .widget-music-cover{width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.12);flex-shrink:0} .widget-music-row.is-compact{flex-direction:column;align-items:stretch} .widget-music-row.is-compact .widget-music-main{width:100%} .widget-notes-shell{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0} .widget-notes-shell .widget-notes-area{flex:1;min-height:0} .widget-notes-toolbar{justify-content:flex-end} .widget-currency-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr) auto;gap:10px} .widget-currency-form.is-compact{grid-template-columns:1fr 1fr;gap:8px} .widget-currency-form.is-compact .widget-mini-btn{grid-column:1/-1} .widget-worldclock-time{font-weight:900;font-size:clamp(.95rem,1.25vw,1.2rem);text-align:right;white-space:nowrap} .widget-habits-list{display:flex;flex-direction:column;gap:0} .widget-habit-item{display:flex;align-items:flex-start;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.06)} .widget-habit-item:last-child{border-bottom:none} .widget-habit-item input{margin-top:3px;flex-shrink:0} .widget-habit-copy{display:flex;flex-direction:column;gap:3px;min-width:0} .widget-habit-name{font-weight:700;line-height:1.25} .calendar-widget-shell.is-minimal{gap:6px} .calendar-widget-shell.is-minimal .calendar-days{margin-top:0} #widget-calendar.widget-mini .calendar-month{padding:6px 8px;border-radius:10px} #widget-calendar.widget-mini .calendar-cell{border-radius:9px} #widget-market .widget-generic-row,#widget-worldclocks .widget-generic-row,#widget-system .widget-generic-row,#widget-stats .widget-generic-row{padding:clamp(7px,.7vw,10px) clamp(8px,.9vw,12px)} #widget-quote .widget-generic-row{align-items:flex-start} #widget-quote .widget-generic-row>div{min-width:0} #widget-quote.widget-mini .widget-generic-row{padding:8px 10px} #widget-notes.widget-mini .widget-notes-toolbar,#widget-currency.widget-mini .widget-generic-btnbar{justify-content:stretch} #widget-notes.widget-mini .widget-mini-btn,#widget-currency.widget-mini .widget-mini-btn{width:100%} @media (max-width:1600px){ .widget-generic-body{gap:8px} .widget-generic-row{border-radius:12px} } @media (max-width:1366px){ .widget-countdown-value{font-size:1rem} .widget-worldclock-time{font-size:1rem} .widget-music-cover{width:40px;height:40px} } #customTabTitleInput{ min-width:0; width:100%; } #resetCustomTabTitleBtn{ order:-1; white-space:nowrap; } .setting-control:has(#customTabTitleInput){ display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; width:min(270px,100%); margin-left:auto; } @media (max-width: 720px){ .setting-control:has(#customTabTitleInput){ width:100%; } }