@import url('/_content/Scribbleo.Razor.Components/css/open-iconic/font/css/open-iconic-bootstrap.min.css'); @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); :root { --canvas-back: #262728; --menu: #4b5155; --nav-back: #323334; --nav-back-low: #2c2c2c; --nav-border: #3f4041; /**/ --white: #d9d9da !important; --white-high: #fff; --white-low: #d9d9dabf; /**/ --orange: #fc4912; --orange-high: #fc49127f; --orange-low: #fc4912bf; /**/ --grey: #616b70; --grey-high: #616b70; --grey-low: #50585c; /**/ --blue: #0c7ee9; --blue-high: #0c7ee97f; --blue-low: #0c7ee9bf; /**/ --green: #91cc29; --green-high: #91cc297f; --green-low: #91cc29bf; /**/ --yellow: #fcef12; --yellow-high: #fcef127f; --yellow-low: #fcef12bf; /**/ --red: #fc4912; --red-high: #fc49127f; --red-low: #fc4912bf; /**/ --highlight: #0c7ee920; --group-bar: #0c7ee940; --info-area: #f5f5f5; --translucent-grey: #616b70d8; } /* width */ ::-webkit-scrollbar { width: 6px; height: 6px; } /* Track */ ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track-piece { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } /* ---------------------------------------------------------------- Resize / drag overlay ---------------------------------------------------------------- While `body.resizing` is active we: - block text-selection so dragging doesn't accidentally select - disable pointer events globally so hover styles don't repaint - re-enable pointer events on the structural panel chrome so the resize handle and panels keep receiving the drag's mouseup The JS dispatcher in srcJsInterop.js also reads this class and suppresses the global MouseMove/MouseDown/MouseUp/Wheel fan-out into Blazor — so the entire C# side is quiet during a ghost drag. */ body.resizing { user-select: none !important; pointer-events: none !important; } body.resizing * { pointer-events: none !important; } body.resizing .panelView, body.resizing .resize, body.resizing .panel { pointer-events: auto !important; } /* ---------------------------------------------------------------- Ghost handle / ghost scrubber ---------------------------------------------------------------- These are short-lived (one drag) elements added to . We use `transform: translate3d(...)` from JS to move them, never `left/top`, so each move is a compositor-only repaint. `will-change: transform` is appropriate here because the lifetime is bounded — the element is removed on mouseup. `top: 0; left: 0` + a transform that places them where they should start avoids a one-frame paint at (0,0). */ .ghost-handle, .ghost-scrubber { position: fixed; top: 0; left: 0; z-index: 10000; background: var(--orange); box-shadow: 0 0 10px var(--orange-low); pointer-events: none; opacity: 0.8; will-change: transform; } .ghost-handle.h { width: 2px; height: 100vh; } .ghost-handle.v { height: 2px; width: 100vw; } .ghost-scrubber { width: 2px; /* height set inline from JS to match the timeline element */ } /* Note: the previous build had `will-change: width, height, transform` on .panelView / .panel / .view / .timelineFill / #scrubber / .scrub. That was counter-productive — width/height changes cause layout reflow, not compositor work, so `will-change: width, height` doesn't help, and keeping these elements permanently promoted to their own GPU layers wastes compositor memory. The hint is now applied only on the active ghost element (above) for the duration of the drag. */ /* Handle */ ::-webkit-scrollbar-thumb { background: var(--white-low); border-radius: 6px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: var(--white); } .file { opacity: 0; width: 0.1px; height: 0.1px; position: absolute; display: block; position: absolute; top: 0; overflow: hidden; } .content { padding-top: 1.1rem; } .list-group-item { background-color: transparent; border: none; padding: 0; } .list-group-item.active { z-index: 2; color: var(--orange); background-color: transparent; border-color: transparent; } .tm-sup { top: -1em; font-size: 15%; vertical-align: super; } .btn-outline-primary.focus, .btn-outline-primary:focus .btn.focus, .btn:focus { /*box-shadow: 0 0 0 .2rem #fc49127f;*/ } .form-control { background-color: var(--nav-back-low); padding: 2px; margin: 1px; border: none; border-radius: 0; color: var(--white); } .form-control:disabled { background-color: var(--nav-back-low); color: var(--white-low); opacity: 75%; } .form-control:focus { background-color: var(--nav-back); color: var(--white); padding: 2px; margin: 0; border: 1px solid var(--blue); box-shadow: none; transition: none; } .form-control[type="range"]:focus { box-shadow: none; } .form-control[type="range"] { padding: 0; } /* .form-control[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; outline: none; -webkit-transition: .2s; transition: opacity .2s; } .form-control[type="range"]::-webkit-slider-runnable-track { height: 10px; -webkit-appearance: none; color: var(--grey); } .form-control[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--white); cursor: pointer; margin-top: -3px; } .form-control[type="range"]:hover { opacity: 0.8; }*/ /* primary colours */ .progress-bar { background-color: var(--blue) !important; } .bg-success { background-color: var(--green) !important; } .bg-info { background-color: var(--grey) !important; } .bg-warning { background-color: var(--orange) !important; } .bg-danger { background-color: var(--red) !important; } a { color: var(--blue); text-decoration-line: none; } .btn-check:focus { outline: none; box-shadow: none; } .btn:focus { outline: none; box-shadow: none; } .btn-link, .btn-link:focus { color: var(--white); text-decoration-line: none; } .btn-link:hover { color: var(--white-high); } .btn-link:disabled { color: var(--white); } .btn-primary, .btn-primary:focus { color: var(--white); background-color: var(--orange-low); border-color: var(--orange); } .btn-primary:hover { color: var(--white-high); background-color: var(--orange); border-color: var(--orange-high); } .btn-primary:disabled { color: var(--white); background-color: var(--orange-low); border-color: var(--orange); } .btn-outline-primary, .btn-outline-primary:focus { color: var(--orange-low); border-color: var(--orange-low); } .btn-outline-primary:hover { color: var(--white); background-color: var(--orange); border-color: var(--orange-high); } .btn-outline-primary:disabled { color: var(--orange-low); background-color: inherit; border-color: var(--orange-low); } /* secondary colours */ .btn-secondary, .btn-secondary:focus { color: var(--white); background-color: var(--blue-low); border-color: var(--blue); } .btn-secondary:hover { color: var(--white-high); background-color: var(--blue); border-color: var(--blue-high); } .btn-secondary:disabled { color: var(--white); background-color: var(--blue-low); border-color: var(--blue); } .btn-outline-secondary, .btn-outline-secondary:focus { color: var(--blue-low); border-color: var(--blue-low); } .btn-outline-secondary:hover { color: var(--white); background-color: var(--blue); border-color: var(--blue-high); } .btn-outline-secondary:disabled { color: var(--blue-low); background-color: inherit; border-color: var(--blue-low); } /* success colours */ .btn-success, .btn-success:focus { color: var(--white); background-color: var(--green-low); border-color: var(--green); } .btn-success:hover { color: var(--white-high); background-color: var(--green); border-color: var(--green-high); } .btn-success:disabled { color: var(--white); background-color: var(--green-low); border-color: var(--green); } .btn-outline-success, .btn-outline-success:focus { color: var(--green-low); border-color: var(--green-low); } .btn-outline-success:hover { color: var(--white); background-color: var(--green); border-color: var(--green-high); } .btn-outline-success:disabled { color: var(--green-low); background-color: inherit; border-color: var(--green-low); } /* danger colours */ .btn-danger, .btn-danger:focus { color: var(--white); background-color: var(--red-low); border-color: var(--red); } .btn-danger:hover { color: var(--white-high); background-color: var(--red); border-color: var(--red-high); } .btn-danger:disabled { color: var(--white); background-color: var(--red-low); border-color: var(--red); } .btn-outline-danger, .btn-outline-danger:focus { color: var(--red-low); border-color: var(--red-low); } .btn-outline-danger:hover { color: var(--white); background-color: var(--red); border-color: var(--red-high); } .btn-outline-danger:disabled { color: var(--red-low); background-color: inherit; border-color: var(--red-low); } /* info colours */ .btn-info, .btn-info:focus { color: var(--white); background-color: var(--grey-low); border-color: var(--grey); } .btn-info:hover { color: var(--white-high); background-color: var(--grey); border-color: var(--grey-high); } .btn-info:disabled { color: var(--white); background-color: var(--grey-low); border-color: var(--grey); } .btn-outline-info, .btn-outline-info:focus { color: var(--white); border-color: var(--grey-low); } .btn-outline-info:hover { color: var(--white-high); background-color: var(--grey); border-color: var(--grey-high); } .btn-outline-info:disabled { color: var(--grey-low); background-color: inherit; border-color: var(--grey-low); } /* dark colours */ .btn-dark, .btn-dark:focus { color: var(--white); background-color: var(--grey-low); border-color: var(--grey); } .btn-dark:hover { color: var(--white-high); background-color: var(--grey); border-color: var(--grey-high); } .btn-dark:disabled { color: var(--white); background-color: var(--grey-low); border-color: var(--grey); } .btn-outline-dark, .btn-outline-dark:focus { color: var(--grey-low); border-color: var(--grey-low); } .btn-outline-dark:hover { color: var(--white); background-color: var(--grey); border-color: var(--grey-high); } .btn-outline-dark:disabled { color: var(--grey-low); background-color: inherit; border-color: var(--grey-low); } .btn-close { color: var(--white); } .btn-close:hover { color: var(--white-high); } .btn-close:disabled { color: var(--white-low); } .toast { background-color: var(--translucent-grey); color: var(--white); transition: opacity 0.33s; } .toast-header { background-color: var(--translucent-grey); color: var(--white); } .toast-body { color: var(--white); } .text-muted { color: var(--white-low) !important; } /* end colours */ .pop-right { position: absolute; top: 10px; right: 10px; } /* Premium Progress Bar */ .progress-panel { padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); } .progress-heading { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--white); } .progress { height: 12px; background-color: rgba(0, 0, 0, 0.3); border-radius: 6px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } .progress-bar { background: linear-gradient(90deg, var(--orange) 0%, #ff8c00 100%); box-shadow: 0 0 15px rgba(252, 73, 18, 0.4); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.7rem; line-height: 12px; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* ============================================================ SCRIBBLEO 2026 PRO - MODERN UI OVERHAUL ============================================================ */ :root { --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(12px); --accent-glow: 0 0 20px rgba(255, 133, 27, 0.15); } .glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 12px; } /* Premium Header */ .pro-input-group { display: flex; align-items: center; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0 4px; gap: 2px; transition: all 0.2s ease; } .navbar-2026 { background: rgba(10, 10, 12, 0.85) !important; backdrop-filter: blur(30px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0 1.5rem !important; height: 60px; transition: all 0.3s ease; } .navbar-brand-2026 { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.01em; color: var(--white) !important; cursor: pointer; padding: 0 !important; } .nav-link-2026 { position: relative; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700 !important; color: #ffffff !important; padding: 0 1.5rem !important; height: 60px; display: flex; align-items: center; transition: all 0.2s ease; opacity: 0.85; } .nav-link-2026:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.05); opacity: 1; } .nav-link-2026.active { color: var(--orange) !important; background: transparent; opacity: 1; } .nav-link-2026::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -2px 10px rgba(255, 133, 27, 0.3); } .nav-link-2026.active::after { transform: scaleX(1); } /* Pro Buttons */ .btn-pro { padding: 10px 24px !important; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 12px !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Fix for Audio button drawing too much attention */ .file-input label { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.7) !important; padding: 6px 12px !important; border-radius: 6px !important; font-size: 12px !important; cursor: pointer; transition: all 0.2s ease; } .file-input label:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } /* Off-white Preview Background */ .preview-bg-offwhite { background-color: #f0f0f2 !important; fill: #f0f0f2 !important; border-radius: 8px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; } /* Side Panel Padding */ .pro-side-panel { padding: 12px; } /* Marker Selection & Grid */ .border-orange { border: 2px solid var(--orange) !important; box-shadow: 0 0 15px rgba(255, 133, 27, 0.2) !important; } /* Align Pro Tabs with Nav Style */ .pro-tabs { border-bottom: 1px solid rgba(255,255,255,0.05) !important; padding-left: 8px; } .pro-tab { position: relative; padding: 10px 16px !important; font-size: 13px !important; /* Slightly larger for better readability */ text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700 !important; color: #ffffff !important; opacity: 0.7; transition: all 0.2s ease; } .pro-tab:hover { opacity: 1; color: #ffffff !important; } .pro-tab.active { opacity: 1; color: var(--orange) !important; } .pro-tab::after { content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform 0.2s ease; } .pro-tab.active::after { transform: scaleX(1); } .pro-tab-content { /* No fixed width — content fills the container's padded area naturally. The panel is 400px; pro-side-panel's 16px symmetric padding leaves 368px for content, which is enough for all property control rows. */ overflow: hidden; } /* Dashboard 2026 Features */ .feature-box { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; min-height: 180px; border: 1px solid rgba(255, 255, 255, 0.05) !important; } .feature-box:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.06); border-color: var(--orange) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 133, 27, 0.1); } .icon-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .bg-orange { background: linear-gradient(135deg, #ff851b, #ff4136); } .bg-blue { background: linear-gradient(135deg, #0074d9, #7fdbff); } .bg-purple { background: linear-gradient(135deg, #b10dc9, #f012be); } .bg-green { background: linear-gradient(135deg, #2ecc40, #01ff70); } .bg-orange { background: linear-gradient(135deg, #ff851b, #ff4136); } .bg-teal { background: linear-gradient(135deg, #39cccc, #3d9970); } .bg-indigo { background: linear-gradient(135deg, #6610f2, #6f42c1); } .bg-pink { background: linear-gradient(135deg, #e83e8c, #d63384); } .bg-secondary { background: linear-gradient(135deg, #4a4a4a, #2a2a2a); } /* Search Box 2026 */ .search-box-2026 { position: relative; width: 100%; min-width: 300px; max-width: 800px; } .search-icon-inside { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); pointer-events: none; z-index: 10; } .search-input { width: 100%; padding: 12px 20px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: white !important; font-size: 14px !important; transition: all 0.3s ease !important; } .pro-input-group input, .pro-input-group select { background: rgba(0, 0, 0, 0.2) !important; border: none !important; color: #fff !important; font-size: 11px !important; height: 28px !important; padding: 0 4px !important; width: 100% !important; min-width: 0 !important; } .search-input:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--orange) !important; box-shadow: 0 0 0 4px rgba(255, 133, 27, 0.1) !important; outline: none !important; } .search-input::placeholder { color: rgba(255, 255, 255, 0.3); } /* Project Header Bar */ .project-header-bar { border-radius: 16px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .bg-glass { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px); } .active-sort { background: var(--orange) !important; color: white !important; opacity: 1 !important; box-shadow: 0 4px 15px rgba(255, 133, 27, 0.3); } .control-group-2026 { display: flex; align-items: center; } .control-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; opacity: 0.4; } .feature-box h4 { font-weight: 700; letter-spacing: 0.02em; font-size: 1.1rem; margin-bottom: 0.5rem; } .cursor-pointer { cursor: pointer; } /* Project Card 2026 */ .project-card { transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px; overflow: visible; background: rgba(255, 255, 255, 0.03); } .project-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1) !important; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .folder-card .btn-more { opacity: 0.3; transition: opacity 0.2s ease; } .folder-card:hover .btn-more { opacity: 1; } .project-thumb-container { position: relative; aspect-ratio: 16/9; background: #ffffff; overflow: hidden; } .project-thumb-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover .project-thumb-container img { transform: scale(1.05); } .project-card-body { padding: 1.25rem; } .project-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-card-meta { font-size: 0.75rem; opacity: 0.5; } .project-card-actions { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: flex-end; } .btn-icon-only { width: 32px; height: 32px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border-radius: 6px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: white !important; } .btn-icon-only:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } .btn-icon-only.active { color: var(--orange) !important; background: rgba(255, 133, 27, 0.1) !important; border-color: rgba(255, 133, 27, 0.3) !important; }