/* ========================================================== ATOSY ERP BROWSER WORKSPACE V1 STEP 2C — LIQUID GLASS SYSTEM ========================================================== */ /* ========================================================== ROOT WORKSPACE ========================================================== */ #atosy-browser-workspace { position: fixed !important; /* * Left rail của ATOSY */ left: 0 !important; /* * Main header nằm phía trên. */ top: 95px !important; right: 0 !important; bottom: 0 !important; z-index: 600 !important; display: block; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; color: #ffffff; background: radial-gradient( circle at 78% 14%, rgba(62,130,255,.30), transparent 33% ), radial-gradient( circle at 16% 88%, rgba(15,74,176,.36), transparent 37% ), linear-gradient( 135deg, #031a43 0%, #05347c 42%, #0756cf 100% ); } #atosy-browser-workspace.hidden { display: none !important; } /* ========================================================== SHELL ========================================================== */ #atosy-browser-workspace .atosy-browser-shell { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } /* * Liquid light behind toolbar. */ #atosy-browser-workspace .atosy-browser-shell::before { content: ""; position: absolute; width: 620px; height: 620px; top: -370px; right: 3%; z-index: 0; pointer-events: none; border-radius: 999px; background: rgba(105,176,255,.20); filter: blur(75px); } /* ========================================================== TAB BAR ========================================================== */ #atosy-browser-workspace .atosy-browser-tabs { position: relative; z-index: 2; flex: 0 0 48px; display: flex; align-items: flex-end; gap: 8px; padding: 7px 16px 0; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(2,27,68,.58); -webkit-backdrop-filter: blur(28px) saturate(165%); backdrop-filter: blur(28px) saturate(165%); } #atosy-browser-workspace .atosy-browser-tab { appearance: none; -webkit-appearance: none; position: relative; height: 40px; width: min(260px, 28vw); min-width: 170px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(255,255,255,.12); border-bottom-color: transparent; border-radius: 16px 16px 0 0; outline: none; box-sizing: border-box; color: rgba(255,255,255,.88); background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.11); font: inherit; font-size: 13px; font-weight: 650; cursor: default; transition: background .18s ease, border-color .18s ease; } #atosy-browser-workspace .atosy-browser-tab.is-active { color: #0a326f; border-color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.96); background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(234,244,255,.94) ); box-shadow: 0 -4px 22px rgba(36,113,238,.12), inset 0 1px 0 rgba(255,255,255,1); } #atosy-browser-workspace .atosy-browser-tab-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 8px; color: #ffffff; background: linear-gradient( 135deg, #23a3ff, #1558ee ); box-shadow: 0 3px 9px rgba(0,95,255,.26); } #atosy-browser-workspace .atosy-browser-tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } #atosy-browser-workspace .atosy-browser-tab-close { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 17px; line-height: 1; opacity: .58; } #atosy-browser-workspace .atosy-browser-tab-close:hover { background: rgba(15,61,126,.09); opacity: 1; } #atosy-browser-workspace .atosy-browser-new-tab { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; margin-bottom: 2px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 11px; outline: none; color: rgba(255,255,255,.88); background: transparent; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: .16s ease; } #atosy-browser-workspace .atosy-browser-new-tab:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.11); } /* ========================================================== TOOLBAR ========================================================== */ #atosy-browser-workspace .atosy-browser-toolbar { position: relative; z-index: 3; flex: 0 0 66px; min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(7,42,96,.56); -webkit-backdrop-filter: blur(34px) saturate(175%); backdrop-filter: blur(34px) saturate(175%); box-shadow: 0 12px 36px rgba(0,14,49,.16); } /* ========================================================== NAV BUTTONS ========================================================== */ #atosy-browser-workspace .atosy-browser-nav-actions { display: flex; align-items: center; gap: 6px; } #atosy-browser-workspace .atosy-browser-nav-button { appearance: none; -webkit-appearance: none; width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; outline: none; color: rgba(255,255,255,.91); background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.11); font: inherit; font-size: 19px; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; } #atosy-browser-workspace .atosy-browser-nav-button:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.14); } #atosy-browser-workspace .atosy-browser-nav-button:active { transform: scale(.94); } /* ========================================================== ADDRESS BAR — LIQUID PILL ========================================================== */ #atosy-browser-workspace .atosy-browser-address-wrap { flex: 1 1 auto; min-width: 150px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 17px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.22); border-radius: 23px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 22px rgba(0,18,56,.12); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } #atosy-browser-workspace .atosy-browser-address-wrap:focus-within { border-color: rgba(114,190,255,.90); background: rgba(255,255,255,.19); box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 0 0 3px rgba(62,157,255,.15), 0 8px 28px rgba(0,18,56,.14); } #atosy-browser-workspace .atosy-browser-security { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #89d3ff; font-size: 9px; background: rgba(75,176,255,.13); } #atosy-browser-workspace .atosy-browser-address { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; width: 100%; padding: 0; border: 0 !important; outline: none !important; color: #ffffff; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 14px; font-weight: 540; } #atosy-browser-workspace .atosy-browser-address::placeholder { color: rgba(222,237,255,.58); } /* ========================================================== OPEN OUTSIDE ========================================================== */ #atosy-browser-workspace #atosy-browser-workspace .atosy-browser-open-external:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.16); } /* ========================================================== CONTENT — MAXIMUM AVAILABLE AREA ========================================================== */ #atosy-browser-workspace .atosy-browser-content { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 10px 12px 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: rgba(247,251,255,.96); box-shadow: 0 18px 55px rgba(0,16,54,.26), inset 0 1px 0 rgba(255,255,255,.82); } /* ========================================================== EMPTY / NEW TAB VIEW ========================================================== */ #atosy-browser-workspace .atosy-browser-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 40px; box-sizing: border-box; text-align: center; color: #0d3a78; background: radial-gradient( circle at 50% 38%, rgba(70,151,255,.11), transparent 28% ), linear-gradient( 145deg, rgba(255,255,255,.98), rgba(237,246,255,.98) ); } #atosy-browser-workspace .atosy-browser-empty-mark { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.85); border-radius: 23px; color: #ffffff; font-size: 18px; background: linear-gradient( 145deg, #42a3ff 0%, #166ee8 55%, #174ed1 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 18px 38px rgba(22,94,208,.30); } #atosy-browser-workspace .atosy-browser-empty h1 { margin: 0 0 9px; color: #073474; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.7px; } #atosy-browser-workspace .atosy-browser-empty p { margin: 0; color: #71849c; font-size: 14px; font-weight: 520; } /* ========================================================== WHEN BROWSER ACTIVE ========================================================== */ html.atosy-browser-active, html.atosy-browser-active body { overflow: hidden !important; } body.atosy-view-browser #atosy-dashboard-v2, body.atosy-view-browser #subject-full-page, body.atosy-view-browser #information-full-page, body.atosy-view-browser #module-grid { display: none !important; } /* * Footer không được chiếm Browser workspace. */ body.atosy-view-browser footer, body.atosy-view-browser .app-footer, body.atosy-view-browser #app-footer { display: none !important; } /* ========================================================== MOBILE / SMALL DESKTOP ========================================================== */ @media (max-width: 1000px) { #atosy-browser-workspace #atosy-browser-workspace } @media (max-width: 760px) { #atosy-browser-workspace { left: 0 !important; } #atosy-browser-workspace .atosy-browser-toolbar { gap: 6px; padding-left: 8px; padding-right: 8px; } #atosy-browser-workspace .atosy-browser-nav-button { width: 36px; height: 36px; flex-basis: 36px; } } /* ========================================================== END STEP 2C ========================================================== */ /* ========================================================== STEP 2D — BROWSER STACKING / HEADER SAFETY ========================================================== */ /* * Browser nằm dưới top navigation system. */ #atosy-browser-workspace { z-index: 300 !important; } /* * Main header luôn ở trên Browser. */ .top-navigation, #atosy-top-navigation, .app-header, header { position: relative; z-index: 1000; } /* * SVOA popover luôn ở trên Browser nếu xuất hiện * trong cùng frame trước khi Browser đóng. */ #atosy-svoa-popover { z-index: 1200 !important; } /* * Khi Browser active thì không để dashboard/footer xuyên lên. */ body.atosy-view-browser #atosy-dashboard-v2, body.atosy-view-browser .dashboard, body.atosy-view-browser .app-footer, body.atosy-view-browser footer { visibility: hidden !important; } /* STEP 2D END */ /* ========================================================== STEP 2E — RIGHT SIDE TAB RAIL COLLAPSED -> HOVER EXPAND ========================================================== */ /* * Không còn dành chiều cao cho tab bar phía trên. */ #atosy-browser-workspace .atosy-browser-shell { position: relative; } /* ---------------------------------------------------------- RIGHT RAIL ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-tab-rail { position: absolute; top: 12px; right: 0; bottom: 12px; z-index: 40; width: 52px; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16); border-right: 0; border-radius: 22px 0 0 22px; overflow: hidden; color: #ffffff; background: rgba(5,34,81,.55); box-shadow: -12px 0 36px rgba(0,20,62,.14), inset 1px 0 0 rgba(255,255,255,.10); -webkit-backdrop-filter: blur(30px) saturate(175%); backdrop-filter: blur(30px) saturate(175%); transition: width .26s cubic-bezier(.2,.8,.2,1), background .22s ease, box-shadow .22s ease; } /* * Hover vào mép phải -> bung panel. */ #atosy-browser-workspace .atosy-browser-tab-rail:hover, #atosy-browser-workspace .atosy-browser-tab-rail:focus-within { width: 286px; background: rgba(5,34,81,.82); box-shadow: -22px 0 55px rgba(0,20,62,.24), inset 1px 0 0 rgba(255,255,255,.13); } /* ---------------------------------------------------------- COLLAPSED HANDLE ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-tab-rail-handle { position: absolute; top: 50%; left: 9px; width: 32px; height: 62px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); opacity: 1; transition: opacity .15s ease; } #atosy-browser-workspace .atosy-browser-tab-rail-handle span { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.80); } #atosy-browser-workspace .atosy-browser-tab-rail:hover .atosy-browser-tab-rail-handle, #atosy-browser-workspace .atosy-browser-tab-rail:focus-within .atosy-browser-tab-rail-handle { opacity: 0; pointer-events: none; } /* ---------------------------------------------------------- TAB LIST ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-tabs { position: absolute; inset: 0; z-index: 2; width: 286px; height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 14px; box-sizing: border-box; border: 0; background: transparent; opacity: 0; transform: translateX(26px); pointer-events: none; transition: opacity .16s ease, transform .26s cubic-bezier(.2,.8,.2,1); } #atosy-browser-workspace .atosy-browser-tab-rail:hover .atosy-browser-tabs, #atosy-browser-workspace .atosy-browser-tab-rail:focus-within .atosy-browser-tabs { opacity: 1; transform: translateX(0); pointer-events: auto; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-tabs-heading { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 6px; color: rgba(255,255,255,.88); } #atosy-browser-workspace .atosy-browser-tabs-heading strong { font-size: 14px; font-weight: 760; letter-spacing: .01em; } /* ---------------------------------------------------------- VERTICAL TAB ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-tab { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; max-width: none; height: 50px; flex: 0 0 50px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; box-sizing: border-box; color: rgba(255,255,255,.86); background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); } #atosy-browser-workspace .atosy-browser-tab.is-active { color: #ffffff; border-color: rgba(121,183,255,.42); background: linear-gradient( 135deg, rgba(51,132,255,.38), rgba(83,93,255,.22) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 24px rgba(0,41,115,.18); } #atosy-browser-workspace .atosy-browser-tab-title { color: inherit; } #atosy-browser-workspace .atosy-browser-tab-close { color: inherit; } /* ---------------------------------------------------------- NEW TAB ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-new-tab { width: 34px; height: 34px; flex: 0 0 34px; margin: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #ffffff; background: rgba(255,255,255,.08); } /* ---------------------------------------------------------- TOOLBAR NOW STARTS AT TOP ---------------------------------------------------------- */ #atosy-browser-workspace .atosy-browser-toolbar { flex: 0 0 66px; margin-top: 0; } /* * Chừa nhẹ khoảng ở bên phải để collapsed rail * không che nội dung. */ #atosy-browser-workspace .atosy-browser-content { margin-right: 62px; transition: margin-right .26s cubic-bezier(.2,.8,.2,1); } /* * Khi hover rail, panel nổi đè lên web content. * Không co website lại -> giữ diện tích tối đa. */ #atosy-browser-workspace .atosy-browser-tab-rail:hover ~ .atosy-browser-content { margin-right: 62px; } /* * Disable old horizontal tab appearance. */ #atosy-browser-workspace > .atosy-browser-shell > .atosy-browser-tabs { flex: none; } /* STEP 2E END */ /* ========================================================== STEP 2F — LEFT EDGE ALIGNMENT ========================================================== */ /* * Browser dùng toàn bộ chiều ngang. * ATOSY left rail vẫn nằm phía trên Browser. */ #atosy-browser-workspace { left: 0 !important; } .sidebar, .app-sidebar, .left-sidebar, #sidebar { position: relative; z-index: 1500; } /* * Nội dung Browser không cần chừa khoảng trái riêng. */ #atosy-browser-workspace .atosy-browser-toolbar, #atosy-browser-workspace .atosy-browser-content { margin-left: 0 !important; } /* STEP 2F END */ /* ========================================================== STEP 2H — STATIC NON-OVERLAP DESIGN RULES ========================================================== */ /* * Toolbar always owns its own row. * No control may overlap another in the static state. */ #atosy-browser-workspace .atosy-browser-toolbar { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* * Navigation group stays fixed-size. */ #atosy-browser-workspace .atosy-browser-nav-actions { flex: 0 0 auto !important; } /* * Address bar consumes all remaining toolbar width. */ #atosy-browser-workspace .atosy-browser-address-wrap { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin-right: 0 !important; } /* * Right tab rail may overlay only on explicit hover/focus. * In collapsed static state it stays in its own 52px rail. */ #atosy-browser-workspace .atosy-browser-tab-rail { width: 52px; } /* * Reserve rail space so static content never sits underneath it. */ #atosy-browser-workspace .atosy-browser-toolbar { padding-right: 68px !important; } #atosy-browser-workspace .atosy-browser-content { margin-right: 62px !important; } /* * When expanded by hover/focus, the rail may intentionally overlay * the browser content. This is an interactive state, not static. */ #atosy-browser-workspace .atosy-browser-tab-rail:hover, #atosy-browser-workspace .atosy-browser-tab-rail:focus-within { width: 286px; } /* STEP 2H END */ /* ========================================================== BROWSER CONTRAST BOOST Improve readability for text on blue / liquid surfaces ========================================================== */ /* 1) Main address text */ #atosy-browser-workspace .atosy-browser-address-input, #atosy-browser-workspace .atosy-browser-address-bar input, #atosy-browser-workspace .atosy-browser-address-wrap input { color: #F7FBFF !important; -webkit-text-fill-color: #F7FBFF !important; font-weight: 600 !important; opacity: 1 !important; } /* 2) Placeholder text */ #atosy-browser-workspace .atosy-browser-address-input::placeholder, #atosy-browser-workspace .atosy-browser-address-bar input::placeholder, #atosy-browser-workspace .atosy-browser-address-wrap input::placeholder { color: #D8E8FF !important; -webkit-text-fill-color: #D8E8FF !important; opacity: 0.92 !important; font-weight: 500 !important; } /* 3) Search / globe / leading icon inside address bar */ #atosy-browser-workspace .atosy-browser-address-wrap svg, #atosy-browser-workspace .atosy-browser-address-wrap .icon, #atosy-browser-workspace .atosy-browser-address-wrap i { color: #DCEBFF !important; fill: #DCEBFF !important; stroke: #DCEBFF !important; opacity: 0.95 !important; } /* 4) Toolbar button text / icon */ #atosy-browser-workspace .atosy-browser-toolbar button, #atosy-browser-workspace .atosy-browser-toolbar button span { color: #F4F8FF !important; } #atosy-browser-workspace .atosy-browser-toolbar button svg, #atosy-browser-workspace .atosy-browser-toolbar button i { color: #F4F8FF !important; fill: #F4F8FF !important; stroke: #F4F8FF !important; } /* 5) Tab labels on right rail */ #atosy-browser-workspace .atosy-browser-tab-title, #atosy-browser-workspace .atosy-browser-tab-item, #atosy-browser-workspace .atosy-browser-tab-item * { color: #F5F9FF !important; } /* 6) Empty state title + subtitle */ #atosy-browser-workspace .atosy-browser-empty-title, #atosy-browser-workspace .atosy-browser-empty-title * { color: #163C7A !important; } #atosy-browser-workspace .atosy-browser-empty-subtitle, #atosy-browser-workspace .atosy-browser-empty-subtitle * { color: #5C6F91 !important; } /* 7) Slightly brighten address bar inner surface for contrast */ #atosy-browser-workspace .atosy-browser-address-wrap, #atosy-browser-workspace .atosy-browser-address-bar { background: rgba(121, 149, 211, 0.42) !important; border-color: rgba(176, 214, 255, 0.42) !important; } /* 8) Focus state = strongest readability */ #atosy-browser-workspace .atosy-browser-address-input:focus, #atosy-browser-workspace .atosy-browser-address-bar input:focus, #atosy-browser-workspace .atosy-browser-address-wrap input:focus { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ========================================================== BROWSER STEP 3A REAL WEB CONTENT FRAME ========================================================== */ #atosy-browser-workspace .atosy-browser-content { padding: 0 !important; } #atosy-browser-workspace .atosy-browser-frame-v1 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 0; margin: 0; border: 0; border-radius: inherit; background: #ffffff; } /* * Disabled nav button. */ #atosy-browser-workspace .atosy-browser-nav-button:disabled { opacity: .34; cursor: default; pointer-events: none; } /* STEP 3A END */