/* Fenix Desktop v1.7.0 native tools — scoped source styles */ .native-tool-window-content{padding:0!important;overflow:hidden!important} .native-network-tools{ --hue:275;--sat:80;--accent:var(--theme-accent,#9b6be8);--accent-hover:var(--theme-accent-alt,#cf65d7); --danger:#ef5d78;--green:#35d07f;--amber:#f6b94a;--cyan:#50c9df; --bg-window:rgba(10,7,15,.98);--bg-taskbar:rgba(21,13,30,.98);--border-color:rgba(255,255,255,.13); --text-primary:#f4eff8;--text-secondary:#aaa0b4;--purple-bright:#9b6be8; width:100%;height:100%;min-height:0;display:flex;position:relative;overflow:hidden;color:var(--text-primary);background:var(--bg-window); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; } .native-network-tools button,.native-network-tools input,.native-network-tools select,.native-network-tools textarea{font:inherit} .native-tool-sys-terminal .terminal-wrap{width:100%;height:100%;} .native-tool-sys-pwgen,.native-tool-p2p-chat,.native-tool-p2p-transfer{overflow:auto} .native-network-tools #p2p-app,.native-network-tools #chat-app{width:100%;min-height:100%;} .native-network-tools .pwd-wrap{width:100%;min-height:100%;} .native-network-tools{ --hue: 210; --bg-desktop: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 8%); --bg-taskbar: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 14%); --bg-window: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 16%); --bg-titlebar: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 20%); --text-primary: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 92%); --text-secondary: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 65%); --accent: hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%); --danger: hsl(0, 70%, 50%); --border-color: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 25%); } .native-network-tools *{ margin: 0; padding: 0; box-sizing: border-box; user-select: none; } .native-network-tools{ overflow: hidden; height: 100vh; width: 100vw; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-desktop); color: var(--text-primary); transition: background 0.6s ease, color 0.6s ease; } .native-network-tools #ps3-waves{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; } .native-network-tools.waves-off #ps3-waves{ display: none; } .native-network-tools #ps3-waves canvas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .native-network-tools #boot-screen{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99999; transition: opacity 0.8s ease; } .native-network-tools #boot-screen.hidden{ opacity: 0; pointer-events: none; } .native-network-tools .boot-logo-wrap{ position: relative; width: 156px; height: 156px; margin-bottom: 30px; } .native-network-tools .boot-hex{ width: 100%; height: 100%; overflow: visible; } .native-network-tools .boot-hex-outline{ stroke-dasharray: 300; stroke-dashoffset: 300; filter: drop-shadow(0 0 7px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 60%, 0.55)); animation: bootHexDraw 2.1s cubic-bezier(.65,0,.35,1) forwards; } .native-network-tools .boot-hex-fill{ opacity: 0; transform-origin: 50px 50px; transform: scale(0.85); animation: bootHexFillIn 1.2s ease-out 1.9s forwards, bootHexPulse 8s ease-in-out 3.1s infinite; } @keyframes bootHexDraw{to{ stroke-dashoffset: 0; }} @keyframes bootHexFillIn{to{ opacity: 1; transform: scale(1); }} @keyframes bootHexPulse{0%, 100%{ filter: drop-shadow(0 0 9px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 60%, .4)); transform: scale(1); } 50%{ filter: drop-shadow(0 0 20px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 60%, .75)); transform: scale(1.035); }} .native-network-tools .boot-logo{ font-size: 2.3rem; font-weight: 300; color: #fff; opacity: 0; letter-spacing: 22px; transform: translateY(8px); filter: blur(4px); animation: bootTextIn 1.4s cubic-bezier(.22,1,.36,1) 2.2s forwards; } @keyframes bootTextIn{to{ opacity: 1; letter-spacing: 4px; transform: translateY(0); filter: blur(0); }} .native-network-tools .boot-loading{ margin-top: 14px; font-size: 0.8rem; font-weight: 400; letter-spacing: 2px; color: var(--text-secondary); opacity: 0; animation: bootLoadingIn 0.8s ease-out 3.9s forwards, bootLoadingBreathe 4s ease-in-out 4.7s infinite; } @keyframes bootLoadingIn{to{ opacity: 0.7; }} @keyframes bootLoadingBreathe{0%, 100%{ opacity: 0.35; } 50%{ opacity: 0.85; }} .native-network-tools .boot-spinner{ margin-top: 16px; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.12); border-top: 3px solid var(--accent); border-radius: 50%; opacity: 0; animation: bootSpinnerIn 0.5s ease-out 4s forwards, spin 0.9s linear infinite; } @keyframes bootSpinnerIn{to{ opacity: 1; }} .native-network-tools .boot-footer{ position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 0.7rem; letter-spacing: .5px; color: hsl(var(--hue), calc(8% * var(--sat, 80) / 80), 38%); opacity: 0; animation: bootFooterIn 2s ease-out 0.6s forwards; } @keyframes bootFooterIn{to{ opacity: 1; }} @keyframes spin{100%{ transform: rotate(360deg); }} @keyframes pulse{0%, 100%{ opacity: 0.6; } 50%{ opacity: 1; }} .native-network-tools #desktop{ position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 52px); padding: 10px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 10px; z-index: 1; } .native-network-tools .desktop-icon{ width: 80px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; text-align: center; transition: background 0.2s; } .native-network-tools .desktop-icon:hover{ background: rgba(255,255,255,0.1); border-color: var(--accent); } .native-network-tools .desktop-icon span{ font-size: 11px; word-wrap: break-word; color: var(--text-primary); text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .native-network-tools .desktop-icon .icon{ font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .native-network-tools .desktop-icon .icon svg, .native-network-tools .start-app-item .icon svg{ width: 1em; height: 1em; display: block; } .native-network-tools .title-icon{ display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--text-secondary); } .native-network-tools .title-icon svg{ width: 100%; height: 100%; display: block; } .native-network-tools .taskbar-icon{ display: inline-flex; width: 16px; height: 16px; margin-right: 2px; } .native-network-tools .taskbar-icon svg{ width: 100%; height: 100%; display: block; } .native-network-tools #taskbar{ position: fixed; bottom: 0; left: 0; width: 100%; height: 52px; background: var(--bg-taskbar); border-top: 1px solid var(--border-color); display: flex; align-items: center; z-index: 9999; padding: 0 10px; backdrop-filter: blur(10px); transition: background 0.6s ease; } .native-network-tools #start-btn{ background: none; border: none; color: var(--text-primary); font-size: 35px; font-weight: bold; cursor: pointer; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; animation: startBtnPulse 3s ease-in-out infinite; } @keyframes startBtnPulse{0%, 100%{ opacity: 0.55; } 50%{ opacity: 1; }} .native-network-tools #start-btn:hover{ background: rgba(255,255,255,0.1); } .native-network-tools #taskbar-apps{ display: flex; flex: 1; height: 100%; margin-left: 10px; overflow-x: auto; } .native-network-tools .taskbar-app{ height: 100%; display: flex; align-items: stretch; background: transparent; color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s, background 0.2s; } .native-network-tools .taskbar-app.active{ color: var(--text-primary); border-bottom-color: var(--accent); background: rgba(255,255,255,0.05); } .native-network-tools .taskbar-app-main{ height: 100%; padding: 0 6px 0 15px; display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: inherit; cursor: pointer; font-size: 14px; font-family: inherit; } .native-network-tools .taskbar-app-close{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin: auto 10px auto 0; padding: 0; border: none; border-radius: 5px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 10px; line-height: 1; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .native-network-tools .taskbar-app-close:hover{ opacity: 1; background: hsla(0, 70%, 50%, 0.18); color: var(--danger); } .native-network-tools #taskbar-clock{ margin-left: auto; padding: 0 15px; text-align: right; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; color: var(--text-secondary); } .native-network-tools #clock-time{ font-size: 14px; } .native-network-tools #clock-date{ font-size: 11px; opacity: 0.8; } .native-network-tools #fullscreen-switcher{ position: relative; height: 100%; display: flex; align-items: center; flex-shrink: 0; } .native-network-tools #fullscreen-btn{ height: 34px; width: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .native-network-tools #fullscreen-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools #fullscreen-btn.active{ background: rgba(255,255,255,0.1); color: var(--text-primary); border-color: var(--border-color); } .native-network-tools #fullscreen-icon{ width: 16px; height: 16px; display: flex; } .native-network-tools #fullscreen-icon svg{ width: 100%; height: 100%; } .native-network-tools #fullscreen-menu{ position: absolute; bottom: 46px; right: 0; min-width: 210px; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px; box-shadow: 0 15px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); backdrop-filter: blur(16px); z-index: 99998; display: none; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.15s ease, transform 0.15s ease, background 0.6s ease; } .native-network-tools #fullscreen-menu.open{ display: flex; opacity: 1; transform: translateY(0) scale(1); } .native-network-tools .lang-menu-item .lm-icon{ width: 16px; height: 16px; flex-shrink: 0; display: flex; color: var(--text-primary); } .native-network-tools .lang-menu-item .lm-icon svg{ width: 100%; height: 100%; } .native-network-tools #lang-switcher{ position: relative; height: 100%; display: flex; align-items: center; flex-shrink: 0; } .native-network-tools #lang-btn{ height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .native-network-tools #lang-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools #lang-btn.active{ background: rgba(255,255,255,0.1); color: var(--text-primary); border-color: var(--border-color); } .native-network-tools #lang-flag{ font-size: 15px; line-height: 1; } .native-network-tools #lang-code{ min-width: 18px; text-align: left; } .native-network-tools #lang-menu{ position: absolute; bottom: 46px; right: 0; min-width: 190px; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px; box-shadow: 0 15px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); backdrop-filter: blur(16px); z-index: 99998; display: none; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.15s ease, transform 0.15s ease, background 0.6s ease; } .native-network-tools #lang-menu.open{ display: flex; opacity: 1; transform: translateY(0) scale(1); } .native-network-tools .lang-menu-item{ display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; color: var(--text-primary); font-size: 13px; transition: background 0.15s ease; } .native-network-tools .lang-menu-item:hover{ background: rgba(255,255,255,0.08); } .native-network-tools .lang-menu-item .lm-flag{ font-size: 17px; } .native-network-tools .lang-menu-item .lm-name{ flex: 1; } .native-network-tools .lang-menu-item .lm-check{ width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; visibility: hidden; } .native-network-tools .lang-menu-item.active .lm-check{ visibility: visible; } .native-network-tools .lang-menu-item.active{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, 0.1); } .native-network-tools #start-menu{ position: fixed; bottom: 62px; left: 10px; width: 340px; max-height: 560px; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; z-index: 99998; display: none; flex-direction: column; box-shadow: 0 15px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); overflow: hidden; backdrop-filter: blur(16px); transition: background 0.6s ease, opacity 0.18s ease, transform 0.18s ease; opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none; } .native-network-tools #start-menu.open{ display: flex; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .native-network-tools .start-menu-header{ flex-shrink: 0; padding: 16px 16px 12px; border-bottom: 1px solid var(--border-color); transition: border-color 0.6s ease; } .native-network-tools .start-menu-brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .native-network-tools .start-menu-brand-mark{ width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 58%), hsl(calc(var(--hue) + 25), 75%, 48%)); box-shadow: 0 4px 14px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 50%, 0.4); transition: background 0.6s ease; } .native-network-tools .start-menu-brand-text{ display: flex; flex-direction: column; line-height: 1.25; } .native-network-tools .start-menu-brand-title{ font-size: 15px; font-weight: 600; color: var(--text-primary); } .native-network-tools .start-menu-brand-sub{ font-size: 11px; color: var(--text-secondary); } .native-network-tools .start-menu-search{ display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; transition: border-color 0.15s ease, background 0.15s ease; } .native-network-tools .start-menu-search:focus-within{ border-color: var(--accent); background: rgba(255,255,255,0.07); } .native-network-tools .start-menu-search svg{ width: 15px; height: 15px; color: var(--text-secondary); flex-shrink: 0; } .native-network-tools .start-menu-search input{ flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: inherit; } .native-network-tools .start-menu-search input::placeholder{ color: var(--text-secondary); } .native-network-tools .start-menu-list{ flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; min-height: 60px; } .native-network-tools .start-menu-list::-webkit-scrollbar{ width: 6px; } .native-network-tools .start-menu-list::-webkit-scrollbar-track{ background: transparent; } .native-network-tools .start-menu-list::-webkit-scrollbar-thumb{ background: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 25%); border-radius: 3px; transition: background 0.6s ease; } .native-network-tools .start-menu-empty{ display: none; text-align: center; padding: 30px 10px; color: var(--text-secondary); font-size: 13px; } .native-network-tools .start-menu-empty.visible{ display: block; } .native-network-tools .start-app-item{ padding: 9px 12px; display: flex; align-items: center; gap: 13px; cursor: pointer; color: var(--text-primary); border-radius: 8px; border: 1px solid transparent; transition: background 0.15s ease, transform 0.1s ease; } .native-network-tools .start-app-item:hover{ background: rgba(255,255,255,0.08); } .native-network-tools .start-app-item:active{ transform: scale(0.98); } .native-network-tools .start-app-item .icon{ font-size: 18px; width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--accent); background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, 0.14); transition: background 0.6s ease, color 0.6s ease; } .native-network-tools .start-app-item span:not(.icon){ font-size: 13.5px; } .native-network-tools .start-app-item.hidden{ display: none; } .native-network-tools .start-menu-footer{ flex-shrink: 0; display: flex; border-top: 1px solid var(--border-color); transition: border-color 0.6s ease; } .native-network-tools .start-footer-btn{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 12px 8px; font-size: 12px; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .native-network-tools .start-footer-btn:first-child{ border-right: 1px solid var(--border-color); } .native-network-tools .start-footer-btn svg{ width: 15px; height: 15px; } .native-network-tools .start-footer-btn:hover{ background: rgba(255,255,255,0.06); color: var(--text-primary); } .native-network-tools .window{ position: absolute; background: var(--bg-window); border: 1px solid var(--border-color); box-shadow: 0 5px 20px rgba(0,0,0,0.5); display: flex; flex-direction: column; min-width: 300px; min-height: 200px; border-radius: 6px; transition: box-shadow 0.2s, background 0.6s ease; } .native-network-tools .window.focused{ box-shadow: 0 8px 30px rgba(0,0,0,0.8); z-index: auto; } .native-network-tools .window.maximized{ top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100vh - 52px) !important; transition: all 0.2s ease; border-radius: 0; } .native-network-tools .window.minimized{ transform: scale(0.8); opacity: 0; pointer-events: none; transition: all 0.2s ease; } .native-network-tools .title-bar{ height: 32px; background: var(--bg-titlebar); display: flex; align-items: center; justify-content: space-between; padding-left: 10px; flex-shrink: 0; cursor: default; touch-action: none; border-radius: 6px 6px 0 0; transition: background 0.6s ease; } .native-network-tools .title-bar .title{ font-size: 13px; color: var(--text-secondary); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .native-network-tools .window-controls{ display: flex; height: 100%; } .native-network-tools .window-controls button{ width: 46px; height: 100%; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .native-network-tools .window-controls button:hover{ background: rgba(255,255,255,0.1); color: white; } .native-network-tools .window-controls .close-btn:hover{ background: var(--danger); } .native-network-tools .window-content{ flex: 1; padding: 0; overflow: auto; background: var(--bg-desktop); color: var(--text-primary); display: flex; flex-direction: column; transition: background 0.6s ease; } .native-network-tools .resize-handle{ position: absolute; z-index: 10; } .native-network-tools .resize-handle.n{ top: -3px; left: 10px; right: 10px; height: 6px; cursor: n-resize; } .native-network-tools .resize-handle.s{ bottom: -3px; left: 10px; right: 10px; height: 6px; cursor: s-resize; } .native-network-tools .resize-handle.e{ right: -3px; top: 10px; bottom: 10px; width: 6px; cursor: e-resize; } .native-network-tools .resize-handle.w{ left: -3px; top: 10px; bottom: 10px; width: 6px; cursor: w-resize; } .native-network-tools .resize-handle.ne{ top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; } .native-network-tools .resize-handle.nw{ top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; } .native-network-tools .resize-handle.se{ bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; } .native-network-tools .resize-handle.sw{ bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; } .native-network-tools .notepad-menu-bar{ display: flex; background: var(--bg-taskbar); border-bottom: 1px solid var(--border-color); position: relative; z-index: 20; transition: background 0.6s ease; flex-shrink: 0; } .native-network-tools .notepad-menu-item{ padding: 4px 12px; font-size: 13px; cursor: pointer; position: relative; color: var(--text-secondary); user-select: none; } .native-network-tools .notepad-menu-item:hover, .native-network-tools .notepad-menu-item.active{ background: rgba(255,255,255,0.1); color: var(--text-primary); } .native-network-tools .notepad-dropdown{ display: none; position: absolute; top: 100%; left: 0; background: var(--bg-window); border: 1px solid var(--border-color); min-width: 220px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 50; padding: 4px 0; border-radius: 4px; } .native-network-tools .notepad-dropdown.show{ display: block; } .native-network-tools .notepad-dropdown-item{ padding: 7px 14px 7px 30px; font-size: 13px; cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 16px; white-space: nowrap; position: relative; } .native-network-tools .notepad-dropdown-item:hover{ background: var(--accent); color: #fff; } .native-network-tools .notepad-dropdown-item:hover .notepad-shortcut{ color: rgba(255,255,255,0.75); } .native-network-tools .notepad-dropdown-item .notepad-check{ position: absolute; left: 10px; opacity: 0; font-size: 12px; } .native-network-tools .notepad-dropdown-item.checked .notepad-check{ opacity: 1; } .native-network-tools .notepad-shortcut{ font-size: 11px; color: var(--text-secondary); } .native-network-tools .notepad-dropdown-sep{ height: 1px; background: var(--border-color); margin: 4px 8px; } .native-network-tools .notepad-findbar{ display: none; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-taskbar); border-bottom: 1px solid var(--border-color); flex-shrink: 0; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .notepad-findbar.show{ display: flex; } .native-network-tools .notepad-findbar input{ flex: 1; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; padding: 5px 10px; border-radius: 4px; outline: none; } .native-network-tools .notepad-findbar input:focus{ border-color: var(--accent); } .native-network-tools .notepad-find-count{ font-size: 11px; color: var(--text-secondary); min-width: 60px; text-align: center; white-space: nowrap; } .native-network-tools .notepad-find-btn{ background: none; border: 1px solid var(--border-color); color: var(--text-secondary); width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .native-network-tools .notepad-find-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .notepad-find-btn.close-find:hover{ color: var(--danger); } .native-network-tools .notepad-editor-wrap{ flex: 1; display: flex; overflow: hidden; background: rgba(0,0,0,0.2); } .native-network-tools .notepad-gutter{ flex-shrink: 0; overflow: hidden; background: rgba(0,0,0,0.18); border-right: 1px solid var(--border-color); padding: 10px 0; text-align: right; user-select: none; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .notepad-gutter{ font-size: 14px; } .native-network-tools .notepad-gutter .gutter-line{ padding: 0 10px; font-family: Consolas, monospace; font-size: inherit; line-height: 1.5; color: var(--text-secondary); opacity: 0.55; box-sizing: border-box; } .native-network-tools .notepad-gutter .gutter-line.current{ color: var(--accent); opacity: 1; font-weight: 700; } .native-network-tools .notepad-textarea{ flex: 1; background: transparent; color: #d4d4d4; border: none; padding: 10px 14px; resize: none; outline: none; font-family: Consolas, monospace; font-size: 14px; line-height: 1.5; overflow-y: auto; } .native-network-tools .notepad-textarea.nowrap{ white-space: pre; overflow-x: auto; } .native-network-tools .notepad-textarea:not(.nowrap){ white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; overflow-x: hidden; } .native-network-tools .notepad-mirror{ position: absolute; top: 0; left: -99999px; visibility: hidden; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; padding: 0; margin: 0; border: none; } .native-network-tools .notepad-status{ background: var(--bg-taskbar); padding: 4px 12px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 16px; flex-shrink: 0; transition: background 0.6s ease; } .native-network-tools .notepad-status .status-pos{ min-width: 90px; } .native-network-tools .notepad-status .status-fill{ flex: 1; } .native-network-tools .notepad-status span.dim{ opacity: 0.7; } .native-network-tools .settings-container{ padding: 20px; display: flex; flex-direction: column; gap: 25px; overflow-y: auto; } .native-network-tools .setting-group{ background: rgba(255,255,255,0.03); padding: 15px; border-radius: 6px; border: 1px solid var(--border-color); transition: all 0.6s ease; } .native-network-tools .setting-group h3{ margin-bottom: 15px; font-size: 16px; color: var(--accent); border-bottom: 1px solid var(--border-color); padding-bottom: 8px; transition: color 0.6s ease; } .native-network-tools .setting-row{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; } .native-network-tools .setting-row:last-child{ margin-bottom: 0; } .native-network-tools .setting-label{ font-size: 14px; color: var(--text-primary); } .native-network-tools .color-presets{ display: flex; gap: 10px; flex-wrap: wrap; } .native-network-tools .color-btn{ width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s; } .native-network-tools .color-btn:hover{ transform: scale(1.2); } .native-network-tools .color-btn.active{ border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); } .native-network-tools .wave-slider-row{ display: flex; flex-direction: column; gap: 8px; } .native-network-tools .wave-slider-row:not(:last-child){ margin-bottom: 4px; } .native-network-tools .wave-slider-head{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .native-network-tools .wave-slider-icon{ font-size: 15px; margin-right: 6px; opacity: 0.85; } .native-network-tools .wave-slider-value{ font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; background: hsla(var(--hue), calc(40% * var(--sat, 80) / 80), 50%, 0.15); padding: 2px 9px; border-radius: 20px; min-width: 42px; text-align: center; transition: background 0.6s ease, color 0.6s ease; } .native-network-tools input[type="range"].wave-slider{ -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient(to right, hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%) 0%, hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%) var(--range-progress, 50%), hsla(var(--hue), calc(15% * var(--sat, 80) / 80), 40%, 0.35) var(--range-progress, 50%), hsla(var(--hue), calc(15% * var(--sat, 80) / 80), 40%, 0.35) 100%); transition: background-color 0.6s ease; } .native-network-tools input[type="range"].wave-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%); box-shadow: 0 0 0 4px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.18), 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; } .native-network-tools input[type="range"].wave-slider::-webkit-slider-thumb:hover{ transform: scale(1.15); } .native-network-tools input[type="range"].wave-slider::-webkit-slider-thumb:active{ transform: scale(1.3); box-shadow: 0 0 0 7px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.25), 0 2px 8px rgba(0,0,0,0.6); } .native-network-tools input[type="range"].wave-slider::-moz-range-track{ height: 8px; border-radius: 999px; background: hsla(var(--hue), calc(15% * var(--sat, 80) / 80), 40%, 0.35); } .native-network-tools input[type="range"].wave-slider::-moz-range-progress{ height: 8px; border-radius: 999px; background: hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%); } .native-network-tools input[type="range"].wave-slider::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--hue), calc(80% * var(--sat, 80) / 80), 55%); box-shadow: 0 0 0 4px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.18), 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.15s ease; } .native-network-tools input[type="range"].wave-slider::-moz-range-thumb:hover{ transform: scale(1.15); } .native-network-tools .wave-slider-ticks{ display: flex; justify-content: space-between; padding: 0 2px; font-size: 10px; color: var(--text-secondary); opacity: 0.7; } .native-network-tools .toggle-switch{ position: relative; display: inline-block; width: 50px; height: 24px; } .native-network-tools .toggle-switch input{ opacity: 0; width: 0; height: 0; } .native-network-tools .toggle-slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .4s; border-radius: 24px; } .native-network-tools .toggle-slider:before{ position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } .native-network-tools input:checked + .toggle-slider{ background-color: var(--accent); } .native-network-tools input:checked + .toggle-slider:before{ transform: translateX(26px); } .native-network-tools .settings-shell{ flex: 1; display: flex; min-height: 0; } .native-network-tools .settings-sidebar{ width: 190px; flex-shrink: 0; background: var(--bg-titlebar); border-right: 1px solid var(--border-color); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .settings-tab-btn{ display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); font-size: 13px; background: transparent; border: none; text-align: left; width: 100%; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .native-network-tools .settings-tab-btn svg{ width: 17px; height: 17px; flex-shrink: 0; } .native-network-tools .settings-tab-btn span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .settings-tab-btn:hover{ background: rgba(255,255,255,0.06); color: var(--text-primary); } .native-network-tools .settings-tab-btn.active{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, 0.18); color: var(--accent); } .native-network-tools .settings-shell > .settings-container{ flex: 1; min-width: 0; } .native-network-tools.theme-3d .settings-sidebar{ box-shadow: inset -1px 0 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); } .native-network-tools.theme-3d .settings-tab-btn.active{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.25), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); } .native-network-tools .files-shell{ flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg-window); transition: background 0.6s ease; } .native-network-tools .files-toolbar{ display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; transition: border-color 0.6s ease; } .native-network-tools .files-tool-btn{ display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .native-network-tools .files-tool-btn svg{ width: 16px; height: 16px; flex-shrink: 0; } .native-network-tools .files-tool-btn:hover:not(:disabled){ background: rgba(255,255,255,0.07); color: var(--text-primary); } .native-network-tools .files-tool-btn:disabled{ opacity: 0.35; cursor: default; } .native-network-tools .files-tool-btn.files-tool-danger:hover:not(:disabled){ color: var(--danger); background: hsla(0, 70%, 50%, 0.12); } .native-network-tools .files-tool-sep{ width: 1px; height: 20px; background: var(--border-color); margin: 0 4px; } .native-network-tools .files-tool-fill{ flex: 1; } .native-network-tools .files-breadcrumb{ display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; font-size: 12px; overflow-x: auto; transition: border-color 0.6s ease; } .native-network-tools .files-crumb{ display: flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: 12px; padding: 3px 7px; border-radius: 5px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .native-network-tools .files-crumb svg{ width: 14px; height: 14px; } .native-network-tools .files-crumb:hover{ background: rgba(255,255,255,0.06); color: var(--text-primary); } .native-network-tools .files-crumb.active{ color: var(--accent); font-weight: 600; } .native-network-tools .files-crumb-sep{ color: var(--text-secondary); opacity: 0.5; } .native-network-tools .files-list{ flex: 1; overflow-y: auto; padding: 4px 6px; } .native-network-tools .files-row{ display: grid; grid-template-columns: 22px 1fr 70px 90px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: default; font-size: 13px; color: var(--text-primary); transition: background 0.12s ease; } .native-network-tools .files-row:hover{ background: rgba(255,255,255,0.04); } .native-network-tools .files-row.selected{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, 0.18); } .native-network-tools .files-row-icon{ display: flex; color: var(--text-secondary); } .native-network-tools .files-row-icon svg{ width: 18px; height: 18px; } .native-network-tools .files-row-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .native-network-tools .files-row-size, .native-network-tools .files-row-date{ font-size: 11px; color: var(--text-secondary); text-align: right; white-space: nowrap; } .native-network-tools .files-empty{ padding: 30px 10px; text-align: center; color: var(--text-secondary); font-size: 13px; } .native-network-tools .files-footer{ display: flex; align-items: center; padding: 6px 12px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-secondary); flex-shrink: 0; transition: border-color 0.6s ease; } .native-network-tools.theme-3d .files-toolbar, .native-network-tools.theme-3d .files-breadcrumb, .native-network-tools.theme-3d .files-footer{ box-shadow: inset 0 -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.4); border-color: transparent; } .native-network-tools.theme-3d .files-row.selected{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.25), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); } .native-network-tools .sticky-note-window{ border-radius: 2px 16px 2px 2px !important; border: none !important; box-shadow: 3px 6px 16px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2) !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .native-network-tools .sticky-note-window:hover{ transform: rotate(0deg) !important; box-shadow: 4px 10px 24px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.22) !important; } .native-network-tools .sticky-note-window .title-bar{ height: 22px; background: rgba(0,0,0,0.08) !important; border-radius: 0 !important; padding: 0 4px; cursor: grab; box-shadow: none !important; } .native-network-tools .sticky-note-window .title-bar:active{ cursor: grabbing; } .native-network-tools .sticky-note-window .title{ display: none; } .native-network-tools .sticky-note-window .min-btn, .native-network-tools .sticky-note-window .max-btn{ display: none; } .native-network-tools .sticky-note-window .close-btn{ opacity: 0; transition: opacity 0.15s ease; background: rgba(0,0,0,0.2) !important; color: rgba(255,255,255,0.95) !important; font-size: 11px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; } .native-network-tools .sticky-note-window:hover .close-btn{ opacity: 1; } .native-network-tools .sticky-note-window .close-btn:hover{ background: rgba(0,0,0,0.4) !important; } .native-network-tools .sticky-note-window .window-content{ background: var(--note-color, #fff3a0); position: relative; overflow: hidden; } .native-network-tools .sticky-note-window::after{ content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 16px 16px; border-color: transparent transparent rgba(0,0,0,0.13) transparent; pointer-events: none; z-index: 2; } .native-network-tools .sn-palette{ display: flex; align-items: center; gap: 4px; padding: 0 4px; opacity: 0; transition: opacity 0.15s ease; } .native-network-tools .sticky-note-window:hover .sn-palette{ opacity: 1; } .native-network-tools .sn-swatch{ width: 11px; height: 11px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; transition: transform 0.1s ease; } .native-network-tools .sn-swatch:hover{ transform: scale(1.25); } .native-network-tools .sn-textarea{ width: 100%; height: 100%; border: none; outline: none; resize: none; background: transparent; padding: 10px 12px; box-sizing: border-box; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive, sans-serif; font-size: 14.5px; line-height: 1.4; color: rgba(0,0,0,0.78); } .native-network-tools .sn-textarea::placeholder{ color: rgba(0,0,0,0.35); } .native-network-tools .uc-shell{ flex: 1; display: flex; min-height: 0; background: var(--bg-window); } .native-network-tools .uc-main{ flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .native-network-tools .uc-row{ display: flex; gap: 8px; } .native-network-tools .uc-input{ flex: 1; padding: 10px 12px; font-size: 18px; background: var(--bg-desktop); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: inherit; } .native-network-tools .uc-input:focus{ outline: none; border-color: var(--accent); } .native-network-tools .uc-select{ width: 110px; padding: 10px 8px; background: var(--bg-desktop); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 14px; cursor: pointer; } .native-network-tools .uc-swap-btn{ align-self: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-desktop); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .native-network-tools .uc-swap-btn:hover{ background: var(--accent); color: #fff; transform: rotate(180deg); } .native-network-tools .uc-table-title{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-top: 10px; } .native-network-tools .uc-table{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .native-network-tools .uc-table-row{ display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; font-size: 13px; } .native-network-tools .uc-table-unit{ color: var(--text-secondary); } .native-network-tools .uc-table-value{ color: var(--text-primary); font-weight: 600; } .native-network-tools .imgv-shell{ flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg-window); transition: background 0.6s ease; } .native-network-tools .imgv-toolbar{ display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .native-network-tools .imgv-zoom-level{ font-size: 12px; color: var(--text-secondary); min-width: 42px; text-align: center; user-select: none; } .native-network-tools .imgv-canvas{ flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; background-image: repeating-conic-gradient(hsl(var(--hue), 8%, 14%) 0% 25%, hsl(var(--hue), 8%, 11%) 0% 50%); background-size: 20px 20px; } .native-network-tools .imgv-canvas.panning{ cursor: grabbing; } .native-network-tools .imgv-canvas.dragover{ outline: 2px dashed var(--accent); outline-offset: -8px; } .native-network-tools .imgv-canvas img{ user-select: none; -webkit-user-drag: none; will-change: transform; } .native-network-tools .imgv-empty{ color: var(--text-secondary); font-size: 13px; text-align: center; padding: 20px; pointer-events: none; max-width: 260px; } .native-network-tools .imgv-footer{ display: flex; align-items: center; padding: 6px 12px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-secondary); flex-shrink: 0; } .native-network-tools #ui-notify-stack{ position: fixed; right: 16px; bottom: 64px; display: flex; flex-direction: column; gap: 10px; z-index: 99960; pointer-events: none; max-width: 340px; } .native-network-tools .ui-notify{ pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 10px; align-items: flex-start; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 34px 12px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateX(24px); transition: opacity 0.25s ease, transform 0.25s ease; cursor: default; } .native-network-tools .ui-notify.show{ opacity: 1; transform: translateX(0); } .native-network-tools .ui-notify.hide{ opacity: 0; transform: translateX(24px); } .native-network-tools .ui-notify-icon{ flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } .native-network-tools .ui-notify-icon svg{ width: 100%; height: 100%; } .native-network-tools .ui-notify-info .ui-notify-icon{ color: var(--accent); } .native-network-tools .ui-notify-success .ui-notify-icon{ color: hsl(140, 65%, 50%); } .native-network-tools .ui-notify-warning .ui-notify-icon{ color: hsl(calc(var(--hue) + 40), 70%, 62%); } .native-network-tools .ui-notify-error .ui-notify-icon{ color: var(--danger); } .native-network-tools .ui-notify-body{ flex: 1; min-width: 0; } .native-network-tools .ui-notify-title{ font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .native-network-tools .ui-notify-message{ font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .native-network-tools .ui-notify-actions{ display: flex; gap: 8px; margin-top: 8px; } .native-network-tools .ui-notify-action-btn{ padding: 4px 10px; font-size: 11px; border-radius: 5px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; font-family: inherit; } .native-network-tools .ui-notify-action-btn:hover{ background: rgba(255,255,255,0.08); } .native-network-tools .ui-notify-close{ position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 10px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .native-network-tools .ui-notify-close:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .ui-notify-progress{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.08); } .native-network-tools .ui-notify-progress-bar{ height: 100%; background: var(--accent); animation-name: ui-notify-shrink; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes ui-notify-shrink{from{ width: 100%; } to{ width: 0%; }} .native-network-tools .ui-requester-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99950; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; } .native-network-tools .ui-requester-overlay.show{ opacity: 1; } .native-network-tools .ui-requester-box{ display: flex; gap: 16px; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; padding: 22px; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.2s ease; } .native-network-tools .ui-requester-overlay.show .ui-requester-box{ transform: scale(1); } .native-network-tools .ui-requester-icon{ flex-shrink: 0; width: 28px; height: 28px; color: var(--accent); } .native-network-tools .ui-requester-icon svg{ width: 100%; height: 100%; } .native-network-tools .ui-requester-warning .ui-requester-icon{ color: hsl(calc(var(--hue) + 40), 70%, 62%); } .native-network-tools .ui-requester-error .ui-requester-icon{ color: var(--danger); } .native-network-tools .ui-requester-success .ui-requester-icon{ color: hsl(140, 65%, 50%); } .native-network-tools .ui-requester-content{ flex: 1; min-width: 0; } .native-network-tools .ui-requester-title{ font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .native-network-tools .ui-requester-message{ font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; white-space: pre-wrap; } .native-network-tools .ui-requester-buttons{ display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .native-network-tools .ui-requester-input{ width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 6px; background: var(--bg-desktop); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 13px; outline: none; transition: border-color 0.15s ease; } .native-network-tools .ui-requester-input:focus{ border-color: var(--accent); } .native-network-tools .ui-requester-error{ min-height: 15px; font-size: 11.5px; color: var(--danger); margin-bottom: 8px; } .native-network-tools .ui-requester-btn{ padding: 7px 16px; border-radius: 6px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; font-family: inherit; font-size: 13px; } .native-network-tools .ui-requester-btn:hover{ background: rgba(255,255,255,0.08); } .native-network-tools .ui-requester-btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; } .native-network-tools .ui-requester-btn.primary:hover{ filter: brightness(1.1); } .native-network-tools .ui-requester-btn.danger{ color: var(--danger); border-color: var(--danger); } .native-network-tools .ui-requester-btn.danger:hover{ background: hsla(0,70%,50%,0.12); } .native-network-tools.theme-3d .ui-notify, .native-network-tools.theme-3d .ui-requester-box{ border: none; border-radius: 0; box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.25), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5), 0 10px 30px rgba(0,0,0,0.6); } .native-network-tools .notepad-vfs-breadcrumb{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 10px 0 8px; font-size: 12px; } .native-network-tools .notepad-vfs-list{ max-height: 260px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; margin-bottom: 4px; } .native-network-tools .notepad-vfs-row{ cursor: pointer; } .native-network-tools .notepad-vfs-row.disabled{ opacity: 0.4; cursor: not-allowed; } .native-network-tools .ui-filepicker-box{ display: flex; flex-direction: column; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; width: 420px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.2s ease; } .native-network-tools .ui-requester-overlay.show .ui-filepicker-box{ transform: scale(1); } .native-network-tools .ui-filepicker-breadcrumb{ display: flex; align-items: center; gap: 4px; margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); font-size: 12px; overflow-x: auto; } .native-network-tools .ui-filepicker-crumb{ background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: 12px; padding: 3px 7px; border-radius: 5px; white-space: nowrap; } .native-network-tools .ui-filepicker-crumb:hover{ background: rgba(255,255,255,0.06); color: var(--text-primary); } .native-network-tools .ui-filepicker-crumb.active{ color: var(--accent); font-weight: 600; } .native-network-tools .ui-filepicker-sep{ color: var(--text-secondary); opacity: 0.5; } .native-network-tools .ui-filepicker-list{ height: 260px; overflow-y: auto; margin-bottom: 16px; } .native-network-tools .ui-filepicker-row{ display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: default; font-size: 13px; color: var(--text-primary); } .native-network-tools .ui-filepicker-row:hover{ background: rgba(255,255,255,0.05); } .native-network-tools .ui-filepicker-row.selected{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, 0.18); } .native-network-tools .ui-filepicker-icon{ display: flex; color: var(--text-secondary); flex-shrink: 0; } .native-network-tools .ui-filepicker-icon svg{ width: 17px; height: 17px; } .native-network-tools .ui-filepicker-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .native-network-tools .ui-filepicker-empty{ padding: 30px 10px; text-align: center; color: var(--text-secondary); font-size: 13px; } .native-network-tools.theme-3d .ui-filepicker-box{ border: none; border-radius: 0; box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.25), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5), 0 10px 30px rgba(0,0,0,0.6); } /*Terminal*/ .native-network-tools .terminal-wrap{ flex:1; display:flex; flex-direction:column; background: hsl(var(--hue), calc(18% * var(--sat, 80) / 80), 5%); font-family:"Consolas","Courier New",monospace; font-size:13px; line-height:1.55; overflow:hidden; transition: background 0.6s ease; } .native-network-tools .term-output{ flex:1; overflow-y:auto; padding:12px 14px; white-space:pre-wrap; word-break:break-all; user-select: text; -webkit-user-select: text; } .native-network-tools .term-output *{ user-select: text; -webkit-user-select: text; } .native-network-tools .term-output::-webkit-scrollbar{ width:6px; } .native-network-tools .term-output::-webkit-scrollbar-track{ background:transparent; } .native-network-tools .term-output::-webkit-scrollbar-thumb{ background: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 25%); border-radius:3px; transition: background 0.6s ease; } .native-network-tools .t-green{ color: var(--accent); transition: color 0.6s ease; } .native-network-tools .t-cyan{ color: hsl(var(--hue), calc(55% * var(--sat, 80) / 80), 72%); transition: color 0.6s ease; } .native-network-tools .t-red{ color: var(--danger); transition: color 0.6s ease; } .native-network-tools .t-yellow{ color: hsl(calc(var(--hue) + 40), 70%, 65%); transition: color 0.6s ease; } .native-network-tools .t-dim{ color: var(--text-secondary); transition: color 0.6s ease; } .native-network-tools .t-white{ color: var(--text-primary); transition: color 0.6s ease; } .native-network-tools .t-bold{ font-weight:700; } .native-network-tools .t-accent{ color: var(--accent); transition: color 0.6s ease; } .native-network-tools .term-input-row{ display:flex; align-items:center; padding:8px 14px; border-top:1px solid hsla(var(--hue), calc(15% * var(--sat, 80) / 80), 30%, 0.5); background: hsla(var(--hue), calc(18% * var(--sat, 80) / 80), 3%, 0.6); flex-shrink:0; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .term-prompt-label{ color: var(--accent); font-weight:700; margin-right:8px; white-space:nowrap; transition: color 0.6s ease; } .native-network-tools #term-input{ flex:1; background:transparent; border:none; outline:none; color: var(--text-primary); font-family:inherit; font-size:inherit; caret-color: var(--accent); transition: color 0.6s ease, caret-color 0.6s ease; } .native-network-tools .calc-container{ flex: 1; display: flex; flex-direction: column; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 10%); overflow: hidden; } .native-network-tools .calc-display{ padding: 16px 20px 12px; text-align: right; background: rgba(0,0,0,0.25); border-bottom: 1px solid var(--border-color); flex-shrink: 0; min-height: 90px; display: flex; flex-direction: column; justify-content: flex-end; } .native-network-tools .calc-expression{ font-size: 14px; color: var(--text-secondary); min-height: 22px; word-break: break-all; margin-bottom: 4px; transition: color 0.3s; } .native-network-tools .calc-result{ font-size: 36px; font-weight: 300; color: var(--text-primary); word-break: break-all; line-height: 1.2; transition: font-size 0.2s ease, color 0.3s; font-variant-numeric: tabular-nums; } .native-network-tools .calc-result.small{ font-size: 24px; } .native-network-tools .calc-result.xsmall{ font-size: 18px; } .native-network-tools .calc-result.error{ color: var(--danger); font-size: 20px; } .native-network-tools .calc-memory-bar{ display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .native-network-tools .calc-memory-bar .mem-indicator{ font-size: 11px; color: var(--accent); font-weight: 600; min-width: 18px; text-align: center; opacity: 0; transition: opacity 0.3s; } .native-network-tools .calc-memory-bar .mem-indicator.visible{ opacity: 1; } .native-network-tools .calc-memory-btn{ background: none; border: none; color: var(--text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background 0.15s, color 0.15s; } .native-network-tools .calc-memory-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .calc-history-toggle{ margin-left: auto; background: none; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 2px 8px; border-radius: 3px; transition: background 0.15s, color 0.15s; } .native-network-tools .calc-history-toggle:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .calc-body{ flex: 1; display: flex; overflow: hidden; } .native-network-tools .calc-buttons{ flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,0.03); } .native-network-tools .calc-btn{ border: none; cursor: pointer; font-size: 18px; font-family: inherit; display: flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.1s, color 0.15s; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); color: var(--text-primary); } .native-network-tools .calc-btn:hover{ background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 24%); } .native-network-tools .calc-btn:active{ transform: scale(0.95); background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 28%); } .native-network-tools .calc-btn.op{ background: hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 22%); color: var(--accent); font-size: 20px; } .native-network-tools .calc-btn.op:hover{ background: hsl(var(--hue), calc(18% * var(--sat, 80) / 80), 28%); } .native-network-tools .calc-btn.op.active-op{ background: var(--accent); color: #000; font-weight: 700; } .native-network-tools .calc-btn.fn{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 14%); color: var(--text-secondary); font-size: 15px; } .native-network-tools .calc-btn.fn:hover{ background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 20%); color: var(--text-primary); } .native-network-tools .calc-btn.eq{ background: var(--accent); color: #000; font-weight: 700; font-size: 22px; } .native-network-tools .calc-btn.eq:hover{ filter: brightness(1.15); } .native-network-tools .calc-btn.eq:active{ filter: brightness(0.95); } .native-network-tools .calc-btn.zero{ } .native-network-tools .calc-btn.clear{ color: var(--danger); font-weight: 600; } .native-network-tools .calc-history-panel{ width: 0; overflow: hidden; background: rgba(0,0,0,0.2); border-left: 1px solid transparent; transition: width 0.25s ease, border-color 0.25s ease; flex-shrink: 0; } .native-network-tools .calc-history-panel.open{ width: 160px; border-left-color: var(--border-color); } .native-network-tools .calc-history-inner{ width: 160px; height: 100%; overflow-y: auto; padding: 8px; } .native-network-tools .calc-history-inner::-webkit-scrollbar{ width: 4px; } .native-network-tools .calc-history-inner::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius: 2px; } .native-network-tools .calc-history-item{ padding: 6px 8px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s; } .native-network-tools .calc-history-item:hover{ background: rgba(255,255,255,0.06); } .native-network-tools .calc-history-item .hist-expr{ font-size: 11px; color: var(--text-secondary); word-break: break-all; } .native-network-tools .calc-history-item .hist-result{ font-size: 15px; color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; } .native-network-tools .calc-history-empty{ font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px 8px; opacity: 0.6; } .native-network-tools .clock-container{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 8%); padding: 15px; gap: 16px; overflow: hidden; } .native-network-tools .clock-face-wrap{ width: 260px; height: 260px; border-radius: 50%; box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3); overflow: hidden; } .native-network-tools .clock-face-wrap canvas{ width: 100%; height: 100%; display: block; } .native-network-tools .clock-digital-row{ display: flex; flex-direction: column; align-items: center; gap: 4px; } .native-network-tools .clock-digital-time{ font-size: 26px; font-weight: 300; letter-spacing: 3px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .native-network-tools .clock-digital-date{ font-size: 12px; color: var(--text-secondary); text-transform: capitalize; } .native-network-tools .tsw-modes{ display: flex; gap: 4px; background: rgba(255,255,255,0.05); padding: 3px; border-radius: 8px; } .native-network-tools .tsw-mode-btn{ padding: 6px 14px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: 12.5px; transition: background 0.15s ease, color 0.15s ease; } .native-network-tools .tsw-mode-btn.active{ background: var(--accent); color: #fff; } .native-network-tools .tsw-timer-controls{ display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .native-network-tools .tsw-presets{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .native-network-tools .tsw-presets button{ padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-desktop); color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; } .native-network-tools .tsw-presets button.active{ background: var(--accent); border-color: var(--accent); color: #fff; } .native-network-tools .tsw-presets button:hover{ border-color: var(--accent); } .native-network-tools .tsw-custom{ display: flex; align-items: center; gap: 4px; } .native-network-tools .tsw-custom input{ width: 46px; padding: 5px 6px; text-align: center; background: var(--bg-desktop); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 12px; } .native-network-tools .tsw-custom span{ color: var(--text-secondary); } .native-network-tools .tsw-custom button{ padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-desktop); color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; } .native-network-tools .tsw-buttons{ display: flex; gap: 8px; } .native-network-tools .tsw-laps-wrap{ width: 100%; max-height: 90px; overflow-y: auto; } .native-network-tools .tsw-laps{ display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; } .native-network-tools .tsw-lap-row{ display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; background: rgba(255,255,255,0.03); border-radius: 5px; } .native-network-tools .addsrc-wrap{ position: relative; display: inline-block; } .native-network-tools .addsrc-menu{ display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--bg-window); border: 1px solid var(--border-color); border-radius: 8px; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 60; padding: 4px; } .native-network-tools .addsrc-menu.show{ display: block; } .native-network-tools .addsrc-menu-item{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-primary); white-space: nowrap; } .native-network-tools .addsrc-menu-item:hover{ background: var(--accent); color: #fff; } .native-network-tools .addsrc-menu-item svg{ width: 16px; height: 16px; flex-shrink: 0; } .native-network-tools .mp3-container{ position: relative; flex: 1; display: flex; flex-direction: row; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 10%); overflow: hidden; } .native-network-tools .mp3-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .native-network-tools .mp3-side{ width: 210px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border-color); background: rgba(0,0,0,0.12); overflow: hidden; } .native-network-tools .mp3-dropzone-overlay{ position: absolute; inset: 6px; z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: hsla(var(--hue), calc(40% * var(--sat, 80) / 80), 8%, 0.9); border: 2px dashed var(--accent); border-radius: 8px; color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; pointer-events: none; padding: 20px; } .native-network-tools .mp3-dropzone-overlay .mp3-drop-icon{ font-size: 34px; filter: drop-shadow(0 2px 6px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.5)); } .native-network-tools .mp3-container.drag-over .mp3-dropzone-overlay{ display: flex; } .native-network-tools .mp3-container.drag-over .mp3-main, .native-network-tools .mp3-container.drag-over .mp3-side{ filter: blur(1px); opacity: 0.5; transition: filter 0.15s, opacity 0.15s; } .native-network-tools .mp3-visual{ position: relative; flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, hsla(var(--hue), calc(45% * var(--sat, 80) / 80), 28%, 0.5), hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 8%) 75%); border-bottom: 1px solid var(--border-color); transition: background 0.6s ease; } .native-network-tools .mp3-vu-canvas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .native-network-tools .mp3-disc{ position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(from 0deg, hsl(var(--hue), calc(55% * var(--sat, 80) / 80), 16%), hsl(var(--hue), calc(75% * var(--sat, 80) / 80), 38%), hsl(var(--hue), calc(55% * var(--sat, 80) / 80), 16%), hsl(var(--hue), calc(75% * var(--sat, 80) / 80), 38%), hsl(var(--hue), calc(55% * var(--sat, 80) / 80), 16%)); box-shadow: 0 6px 25px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.5); animation: mp3-spin 4.5s linear infinite; animation-play-state: paused; transition: box-shadow 0.3s, background 0.6s ease; } .native-network-tools .mp3-disc.spinning{ animation-play-state: running; } .native-network-tools .mp3-disc::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px hsla(0,0%,100%,0.08); } .native-network-tools .mp3-disc-hole{ position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-window); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 22%); transition: background 0.6s ease; } @keyframes mp3-spin{100%{ transform: rotate(360deg); }} .native-network-tools .mp3-trackinfo{ padding: 14px 16px 2px; text-align: center; flex-shrink: 0; } .native-network-tools .mp3-title{ font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .mp3-artist{ font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .mp3-progress-row{ display: flex; align-items: center; gap: 8px; padding: 10px 16px 2px; flex-shrink: 0; } .native-network-tools .mp3-time{ font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 32px; } .native-network-tools .mp3-time.right{ text-align: right; } .native-network-tools input[type="range"].mp3-seek, .native-network-tools input[type="range"].mp3-volume{ flex: 1; } .native-network-tools .mp3-controls{ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; flex-shrink: 0; } .native-network-tools .mp3-ctrl-btn{ background: none; border: none; color: var(--text-secondary); font-size: 17px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .native-network-tools .mp3-ctrl-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .mp3-ctrl-btn.active{ color: var(--accent); } .native-network-tools .mp3-ctrl-btn.big{ width: 54px; height: 54px; background: var(--accent); color: #000; font-size: 19px; box-shadow: 0 4px 16px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.45); transition: background 0.6s ease, box-shadow 0.3s; } .native-network-tools .mp3-ctrl-btn.big:hover{ filter: brightness(1.12); } .native-network-tools .mp3-ctrl-btn.big:active{ transform: scale(0.95); } .native-network-tools .mp3-volume-row{ display: flex; align-items: center; gap: 10px; padding: 2px 16px 12px; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); } .native-network-tools .mp3-playlist-header{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-color); flex-shrink: 0; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .mp3-playlist-title{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); font-weight: 600; } .native-network-tools .mp3-playlist-actions{ display: flex; gap: 6px; } .native-network-tools .mp3-add-btn, .native-network-tools .mp3-clear-btn{ flex: 1; background: none; border: 1px solid var(--border-color); color: var(--accent); font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 20px; transition: background 0.15s, border-color 0.15s, color 0.6s ease; } .native-network-tools .mp3-add-btn:hover{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, 0.12); border-color: var(--accent); } .native-network-tools .mp3-clear-btn{ color: var(--text-secondary); } .native-network-tools .mp3-clear-btn:hover{ background: hsla(0, 70%, 50%, 0.12); border-color: var(--danger); color: var(--danger); } .native-network-tools .mp3-playlist{ flex: 1; overflow-y: auto; padding: 6px 8px; } .native-network-tools .mp3-playlist::-webkit-scrollbar{ width: 5px; } .native-network-tools .mp3-playlist::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius: 3px; } .native-network-tools .mp3-playlist-empty{ text-align: center; font-size: 12px; color: var(--text-secondary); opacity: 0.6; padding: 30px 10px; } .native-network-tools .mp3-track-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; transition: background 0.15s; } .native-network-tools .mp3-track-item:hover{ background: rgba(255,255,255,0.06); } .native-network-tools .mp3-track-item.playing{ background: hsla(var(--hue), calc(55% * var(--sat, 80) / 80), 50%, 0.15); } .native-network-tools .mp3-track-num{ font-size: 12px; color: var(--text-secondary); min-width: 16px; text-align: center; flex-shrink: 0; } .native-network-tools .mp3-track-eq{ width: 16px; height: 14px; min-width: 16px; display: none; align-items: flex-end; gap: 2px; flex-shrink: 0; } .native-network-tools .mp3-track-item.playing .mp3-track-eq{ display: flex; } .native-network-tools .mp3-track-item.playing .mp3-track-num{ display: none; } .native-network-tools .mp3-track-eq span{ width: 3px; background: var(--accent); border-radius: 1px; animation: mp3-eq 0.9s ease-in-out infinite; } .native-network-tools .mp3-track-eq span:nth-child(1){ height: 40%; animation-delay: 0s; } .native-network-tools .mp3-track-eq span:nth-child(2){ height: 100%; animation-delay: 0.2s; } .native-network-tools .mp3-track-eq span:nth-child(3){ height: 65%; animation-delay: 0.4s; } .native-network-tools .mp3-track-eq.paused span{ animation-play-state: paused; } @keyframes mp3-eq{0%, 100%{ transform: scaleY(0.4); } 50%{ transform: scaleY(1); }} .native-network-tools .mp3-track-info{ flex: 1; min-width: 0; } .native-network-tools .mp3-track-name{ font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .mp3-track-item.playing .mp3-track-name{ color: var(--accent); font-weight: 600; } .native-network-tools .mp3-track-artist{ font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .mp3-track-dur{ font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; } .native-network-tools .mp3-track-remove{ background: none; border: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 4px; opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; } .native-network-tools .mp3-track-item:hover .mp3-track-remove{ opacity: 1; } .native-network-tools .mp3-track-remove:hover{ color: var(--danger); background: rgba(255,255,255,0.08); } .native-network-tools.theme-3d .mp3-disc{ box-shadow: 0 6px 25px rgba(0,0,0,0.7), inset 0 0 25px rgba(0,0,0,0.6), inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 60%, 0.3); } .native-network-tools.theme-3d .mp3-ctrl-btn.big{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 70%, 0.4), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5), 0 4px 16px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.4); } .native-network-tools .vid-container{ position: relative; flex: 1; display: flex; flex-direction: row; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 10%); overflow: hidden; } .native-network-tools .vid-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .native-network-tools .vid-side{ width: 230px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border-color); background: rgba(0,0,0,0.12); overflow: hidden; } .native-network-tools .vid-dropzone-overlay{ position: absolute; inset: 6px; z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: hsla(var(--hue), calc(40% * var(--sat, 80) / 80), 8%, 0.9); border: 2px dashed var(--accent); border-radius: 8px; color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; pointer-events: none; padding: 20px; } .native-network-tools .vid-dropzone-overlay .vid-drop-icon{ font-size: 34px; filter: drop-shadow(0 2px 6px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.5)); } .native-network-tools .vid-container.drag-over .vid-dropzone-overlay{ display: flex; } .native-network-tools .vid-container.drag-over .vid-main, .native-network-tools .vid-container.drag-over .vid-side{ filter: blur(1px); opacity: 0.5; transition: filter 0.15s, opacity 0.15s; } .native-network-tools .vid-screen{ position: relative; flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; border-bottom: 1px solid var(--border-color); } .native-network-tools .vid-el{ width: 100%; height: 100%; object-fit: contain; background: #000; } .native-network-tools .vid-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); pointer-events: none; } .native-network-tools .vid-placeholder.hidden{ display: none; } .native-network-tools .vid-placeholder-icon{ font-size: 40px; opacity: 0.5; } .native-network-tools .vid-placeholder-text{ font-size: 12px; opacity: 0.7; padding: 0 20px; text-align: center; } .native-network-tools .vid-fullscreen-btn{ position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); border: 1px solid hsla(0,0%,100%,0.15); color: #fff; font-size: 15px; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .native-network-tools .vid-fullscreen-btn:hover{ background: rgba(0,0,0,0.75); } .native-network-tools .vid-trackinfo{ padding: 12px 16px 2px; text-align: center; flex-shrink: 0; } .native-network-tools .vid-title{ font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .vid-progress-row{ display: flex; align-items: center; gap: 8px; padding: 10px 16px 2px; flex-shrink: 0; } .native-network-tools .vid-time{ font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 32px; } .native-network-tools .vid-time.right{ text-align: right; } .native-network-tools input[type="range"].vid-seek, .native-network-tools input[type="range"].vid-volume{ flex: 1; } .native-network-tools .vid-controls{ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; flex-shrink: 0; } .native-network-tools .vid-ctrl-btn{ background: none; border: none; color: var(--text-secondary); font-size: 17px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .native-network-tools .vid-ctrl-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); } .native-network-tools .vid-ctrl-btn.active{ color: var(--accent); } .native-network-tools .vid-ctrl-btn.big{ width: 54px; height: 54px; background: var(--accent); color: #000; font-size: 19px; box-shadow: 0 4px 16px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.45); transition: background 0.6s ease, box-shadow 0.3s; } .native-network-tools .vid-ctrl-btn.big:hover{ filter: brightness(1.12); } .native-network-tools .vid-ctrl-btn.big:active{ transform: scale(0.95); } .native-network-tools .vid-volume-row{ display: flex; align-items: center; gap: 10px; padding: 2px 16px 12px; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); } .native-network-tools .vid-playlist-header{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-color); flex-shrink: 0; transition: background 0.6s ease, border-color 0.6s ease; } .native-network-tools .vid-playlist-title{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); font-weight: 600; } .native-network-tools .vid-playlist-actions{ display: flex; gap: 6px; } .native-network-tools .vid-add-btn, .native-network-tools .vid-clear-btn{ flex: 1; background: none; border: 1px solid var(--border-color); color: var(--accent); font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 20px; transition: background 0.15s, border-color 0.15s, color 0.6s ease; } .native-network-tools .vid-add-btn:hover{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, 0.12); border-color: var(--accent); } .native-network-tools .vid-clear-btn{ color: var(--text-secondary); } .native-network-tools .vid-clear-btn:hover{ background: hsla(0, 70%, 50%, 0.12); border-color: var(--danger); color: var(--danger); } .native-network-tools .vid-playlist{ flex: 1; overflow-y: auto; padding: 6px 8px; } .native-network-tools .vid-playlist::-webkit-scrollbar{ width: 5px; } .native-network-tools .vid-playlist::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius: 3px; } .native-network-tools .vid-playlist-empty{ text-align: center; font-size: 12px; color: var(--text-secondary); opacity: 0.6; padding: 30px 10px; } .native-network-tools .vid-track-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; transition: background 0.15s; } .native-network-tools .vid-track-item:hover{ background: rgba(255,255,255,0.06); } .native-network-tools .vid-track-item.playing{ background: hsla(var(--hue), calc(55% * var(--sat, 80) / 80), 50%, 0.15); } .native-network-tools .vid-track-num{ font-size: 12px; color: var(--text-secondary); min-width: 16px; text-align: center; flex-shrink: 0; } .native-network-tools .vid-track-eq{ width: 16px; height: 14px; min-width: 16px; display: none; align-items: flex-end; gap: 2px; flex-shrink: 0; } .native-network-tools .vid-track-item.playing .vid-track-eq{ display: flex; } .native-network-tools .vid-track-item.playing .vid-track-num{ display: none; } .native-network-tools .vid-track-eq span{ width: 3px; background: var(--accent); border-radius: 1px; animation: mp3-eq 0.9s ease-in-out infinite; } .native-network-tools .vid-track-eq span:nth-child(1){ height: 40%; animation-delay: 0s; } .native-network-tools .vid-track-eq span:nth-child(2){ height: 100%; animation-delay: 0.2s; } .native-network-tools .vid-track-eq span:nth-child(3){ height: 65%; animation-delay: 0.4s; } .native-network-tools .vid-track-eq.paused span{ animation-play-state: paused; } .native-network-tools .vid-track-info{ flex: 1; min-width: 0; } .native-network-tools .vid-track-name{ font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .vid-track-item.playing .vid-track-name{ color: var(--accent); font-weight: 600; } .native-network-tools .vid-track-dur{ font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; } .native-network-tools .vid-track-remove{ background: none; border: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 4px; opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; } .native-network-tools .vid-track-item:hover .vid-track-remove{ opacity: 1; } .native-network-tools .vid-track-remove:hover{ color: var(--danger); background: rgba(255,255,255,0.08); } .native-network-tools.theme-3d .vid-ctrl-btn.big{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 70%, 0.4), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5), 0 4px 16px hsla(var(--hue), calc(80% * var(--sat, 80) / 80), 55%, 0.4); } .native-network-tools.theme-3d .window{ border-radius: 0; border: none; box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.3), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.7), 5px 5px 15px rgba(0,0,0,0.8); } .native-network-tools.theme-3d .window.focused{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(30% * var(--sat, 80) / 80), 60%, 0.4), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.8), 8px 8px 25px rgba(0,0,0,0.9); } .native-network-tools.theme-3d .title-bar{ background: linear-gradient(180deg, hsl(var(--hue), calc(20% * var(--sat, 80) / 80), 28%), hsl(var(--hue), calc(15% * var(--sat, 80) / 80), 20%)); box-shadow: inset 0 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.4), inset 0 -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); } .native-network-tools.theme-3d .title-bar .title{ color: var(--text-primary); font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); } .native-network-tools.theme-3d .window-controls button{ background: var(--bg-titlebar); color: var(--text-secondary); border: none; border-radius: 0; box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.3), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.6); } .native-network-tools.theme-3d .window-controls button:hover{ color: white; background: var(--accent); box-shadow: none; } .native-network-tools.theme-3d .window-controls .close-btn:hover{ background: var(--danger); } .native-network-tools.theme-3d #taskbar{ box-shadow: inset 0 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.3); background: var(--bg-taskbar); border-top: none; } .native-network-tools.theme-3d .notepad-menu-bar{ box-shadow: inset 0 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.3); background: var(--bg-taskbar); border-bottom: none; } .native-network-tools.theme-3d .notepad-status{ box-shadow: inset 0 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); background: var(--bg-taskbar); border-top: none; } .native-network-tools.theme-3d .notepad-gutter{ box-shadow: inset -1px 0 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); border-right: none; } .native-network-tools.theme-3d .notepad-findbar{ box-shadow: inset 0 -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.4); border-bottom: none; } .native-network-tools.theme-3d .setting-group{ box-shadow: inset 1px 1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 50%, 0.2), inset -1px -1px 0 0 hsla(var(--hue), calc(20% * var(--sat, 80) / 80), 0%, 0.5); background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 12%); border: none; } @media (max-width: 768px){.native-network-tools .desktop-icon{ width: 70px; } .native-network-tools .desktop-icon .icon{ font-size: 28px; } .native-network-tools #start-menu{ width: calc(100% - 20px); left: 10px; max-height: 70vh; } .native-network-tools .resize-handle.n, .native-network-tools .resize-handle.s{ height: 15px; top: -7px; bottom: -7px; } .native-network-tools .resize-handle.e, .native-network-tools .resize-handle.w{ width: 15px; right: -7px; left: -7px; }} /*══════════════════════════════════════ APP: P2P TRANSFER (portage de l'outil Creepy Cat P2P Transfer 2.0) ══════════════════════════════════════*/ .native-network-tools *, .native-network-tools *::before, .native-network-tools *::after{ box-sizing: border-box; margin: 0; padding: 0; } .native-network-tools{ --bg: #0b0b0b; --panel: #111111; --surface: #161616; --surface2: #1c1c1c; --border: #222222; --border2: #2a2a2a; --text: #c2c2c2; --dim: #525252; --dim2: #767676; --green: #22c55e; --blue: #3b82f6; --amber: #f59e0b; --red: #ef4444; --cyan: #06b6d4; --mono: "Arial Narrow", Arial, sans-serif; --black: "Arial Black", Arial, sans-serif; } .native-network-tools #p2p-app{ --bg: var(--bg-window); --panel: var(--bg-window); --surface: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 20%); --surface2: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 25%); --border: var(--border-color); --border2: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 32%); --text: var(--text-primary); --dim: var(--text-secondary); --dim2: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 58%); --blue: var(--accent); --red: var(--danger); --mono: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --black: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: clamp(11px, 1.3vw, 20px); width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--mono); } .native-network-tools #conn-bar{ display: none; align-items: center; gap: 0.3em; font-size: 0.56em; letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); margin-left: auto; flex-shrink: 1; min-width: 0; overflow: hidden; } .native-network-tools .conn-dot{ width: 0.44em; height: 0.44em; border-radius: 50%; background: var(--dim); flex-shrink: 0; transition: background .4s, box-shadow .4s; } .native-network-tools .conn-dot.waiting{ background: var(--dim); animation: blink 1.4s ease-in-out infinite; } .native-network-tools .conn-dot.ok{ background: var(--green); box-shadow: 0 0 0.19em var(--green); animation: none; } .native-network-tools .conn-dot.err{ background: var(--red); box-shadow: 0 0 0.19em var(--red); animation: none; } .native-network-tools .conn-label{ color: var(--dim2); transition: color .4s; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 16em; } .native-network-tools .conn-label.ok{ color: var(--green); } .native-network-tools .conn-label.err{ color: var(--red); } .native-network-tools .conn-ping{ color: var(--amber); font-size: 0.78em; flex-shrink: 0; white-space: nowrap; } .native-network-tools #app{ display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; } .native-network-tools #main{ flex: 1; overflow: hidden; position: relative; min-height: 0; } .native-network-tools .screen{ display: none; flex-direction: column; height: 100%; overflow: hidden; } .native-network-tools .screen.visible{ display: flex; } .native-network-tools #screen-role{ align-items: center; justify-content: center; background: var(--bg); } .native-network-tools .role-panel{ width: min(34em, 92%); background: var(--panel); border: 1px solid var(--border2); border-radius: 0.22em; overflow: hidden; } .native-network-tools .role-panel-header{ padding: 1.3em 1.6em 1em; border-bottom: 1px solid var(--border); text-align: center; } .native-network-tools .role-panel-title{ font-size: 1.15em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-bottom: 0.25em; font-family: var(--black); } .native-network-tools .role-panel-sub{ font-size: 0.85em; color: var(--dim2); letter-spacing: .05em; } .native-network-tools .role-btns{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); } .native-network-tools .role-btn{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; padding: 1.3em 1.05em; background: var(--panel); border: none; cursor: pointer; transition: background .15s; text-align: left; } .native-network-tools .role-btn:hover{ background: var(--surface2); } .native-network-tools .role-btn.selected{ background: var(--surface2); } .native-network-tools .role-btn:disabled{ opacity: .4; cursor: not-allowed; } .native-network-tools .role-btn .r-icon{ font-size: 1.7em; color: var(--accent); font-weight: 900; line-height: 1; font-family: var(--black); } .native-network-tools .role-btn .r-label{ font-size: 0.95em; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--text); font-family: var(--black); } .native-network-tools .role-btn .r-desc{ font-size: 0.74em; color: var(--dim2); letter-spacing: .02em; white-space: normal; line-height: 1.4; } .native-network-tools #role-tooltip{ display: none; position: fixed; z-index: 9999; pointer-events: none; background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 14%); border: 1px solid var(--border2); border-radius: 0.22em; padding: 0.52em 0.67em; width: 14em; box-shadow: 0 4px 20px rgba(0,0,0,.6); } .native-network-tools #role-tooltip.visible{ display: block; } .native-network-tools #role-tooltip::after{ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 0.3em solid transparent; border-top-color: var(--border2); } .native-network-tools #role-tooltip.flipped::after{ top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--border2); } .native-network-tools .role-tooltip-title{ font-size: 0.67em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 0.3em; font-family: var(--black); } .native-network-tools .role-tooltip-line{ display: flex; align-items: flex-start; gap: 0.3em; font-size: 0.56em; color: var(--dim2); letter-spacing: .03em; line-height: 1.45; margin-bottom: 0.15em; } .native-network-tools .role-tooltip-line .tt-dot{ color: var(--green); flex-shrink: 0; margin-top: 0.04em; } .native-network-tools .role-tooltip-line:last-child{ margin-bottom: 0; } .native-network-tools .role-edge-note{ margin-top: 0.67em; padding: 0.7em 1.05em; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.44em; font-size: 0.68em; color: var(--dim2); letter-spacing: .04em; line-height: 1.4; } .native-network-tools .role-edge-note .edge-icon{ font-size: 1em; flex-shrink: 0; } .native-network-tools .role-hint{ padding: 0.8em 1.4em; border-top: 1px solid var(--border); font-size: 0.7em; color: var(--dim2); letter-spacing: .06em; text-align: center; } @media (max-width: 480px){.native-network-tools .role-btns{ grid-template-columns: 1fr; } .native-network-tools .role-btn{ flex-direction: row; align-items: center; gap: 0.6em; padding: 0.85em 0.9em; } .native-network-tools .role-btn .r-icon{ flex-shrink: 0; }} .native-network-tools .toolbar{ min-height: 2.96em; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0.3em 0.74em; gap: 0.52em; flex-shrink: 0; flex-wrap: wrap; } .native-network-tools .toolbar-left{ display: flex; align-items: center; gap: 0.52em; flex-wrap: wrap; } .native-network-tools .toolbar-right{ display: flex; align-items: center; gap: 0.22em; flex-wrap: wrap; } .native-network-tools .session-block{ display: flex; align-items: center; gap: 0.3em; } .native-network-tools .sess-label{ font-size: 0.7em; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; } .native-network-tools .code-pill{ font-size: 1.11em; font-weight: 700; letter-spacing: .2em; color: var(--accent); background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, .1); border: none; border-radius: 0.22em; padding: 0.15em 0.6em; cursor: pointer; min-width: 7em; text-align: center; transition: background .15s; } .native-network-tools .code-pill:hover{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, .18); } .native-network-tools .queue-count{ font-size: 0.78em; color: var(--amber); letter-spacing: .08em; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); border-radius: 0.11em; padding: 0.11em 0.3em; font-weight: 600; } .native-network-tools .queue-count.hidden{ display: none; } .native-network-tools .tb-btn{ padding: 0.4em 0.85em; font-family: var(--mono); font-size: 0.78em; font-weight: 600; letter-spacing: normal; text-transform: none; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); color: var(--text); border: none; border-radius: 0.22em; cursor: pointer; transition: background .12s, color .12s, transform .1s; white-space: nowrap; } .native-network-tools .tb-btn:hover{ background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 24%); } .native-network-tools .tb-btn:active{ transform: scale(0.96); background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 28%); } .native-network-tools .tb-btn:disabled{ opacity: .35; cursor: not-allowed; transform: none; } .native-network-tools .tb-btn.primary{ background: var(--accent); color: #000; font-weight: 700; } .native-network-tools .tb-btn.primary:hover:not(:disabled){ filter: brightness(1.15); } .native-network-tools .tb-btn.primary:active:not(:disabled){ filter: brightness(0.95); transform: none; } .native-network-tools .tb-btn.danger{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 14%); color: var(--red); } .native-network-tools .tb-btn.danger:hover{ background: rgba(239,68,68,.15); color: #fff; } .native-network-tools .tb-btn.large{ padding: 0.55em 1.1em; font-size: 0.92em; } .native-network-tools .tb-toggle{ display: flex; align-items: center; gap: 0.22em; cursor: pointer; font-size: 0.78em; color: var(--dim2); letter-spacing: .06em; font-weight: 600; text-transform: uppercase; user-select: none; padding: 0.3em 0.52em; border: 1px solid var(--border2); border-radius: 0.11em; background: var(--surface2); transition: border-color .15s, color .15s; } .native-network-tools .tb-toggle:hover{ border-color: hsl(var(--hue), calc(8% * var(--sat, 80) / 80), 28%); color: var(--text); } .native-network-tools .tb-toggle input{ display: none; } .native-network-tools .tb-toggle-track{ width: 0.96em; height: 0.52em; border-radius: 0.26em; flex-shrink: 0; background: var(--border2); position: relative; transition: background .2s; border: 1px solid hsl(var(--hue), calc(8% * var(--sat, 80) / 80), 24%); } .native-network-tools .tb-toggle-track::after{ content: ""; position: absolute; top: 0.07em; left: 0.07em; width: 0.37em; height: 0.37em; border-radius: 50%; background: var(--dim); transition: left .2s, background .2s; } .native-network-tools .tb-toggle input:checked ~ .tb-toggle-track{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, .2); border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, .4); } .native-network-tools .tb-toggle input:checked ~ .tb-toggle-track::after{ left: 0.52em; background: var(--accent); } .native-network-tools .tb-toggle input:checked ~ .tb-toggle-label{ color: var(--accent); } .native-network-tools .tb-toggle-label{ transition: color .2s; } .native-network-tools .chat-encrypt-toggle{ width: 100%; box-sizing: border-box; justify-content: flex-start; text-transform: none; font-weight: 500; letter-spacing: normal; } .native-network-tools #chat-passphrase{ width: 100%; } .native-network-tools .srv-clients-badge{ font-size: 0.7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.25); border-radius: 0.11em; padding: 0.15em 0.44em; transition: color .3s; } .native-network-tools .srv-clients-badge.active{ color: var(--green); background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); } .native-network-tools .file-section{ flex: 1; display: flex; flex-direction: column; overflow: hidden; } .native-network-tools .file-table-header{ display: grid; grid-template-columns: 0.89em 1fr 3.15em 3.7em 4.15em 0.89em; gap: 0 0.37em; align-items: center; padding: 0.37em 0.81em; background: var(--panel); border-bottom: 1px solid var(--border); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--dim); flex-shrink: 0; } .native-network-tools .file-table-header span{ font-size: 0.56em; } .native-network-tools .file-table-header span[data-i18n="p2p.table.status"], .native-network-tools .file-table-header span[data-i18n="p2p.table.hash"]{ display: inline-block; transform: translateX(24px); } .native-network-tools .file-queue{ flex: 1; overflow-y: auto; background: var(--bg); display: flex; flex-direction: column; } .native-network-tools .file-queue::-webkit-scrollbar{ width: 0.15em; } .native-network-tools .file-queue::-webkit-scrollbar-track{ background: transparent; } .native-network-tools .file-queue::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 0.07em; } .native-network-tools .fq-item{ display: grid; grid-template-columns: 0.89em 1fr 3.15em 3.7em 4.15em 0.89em; grid-template-rows: auto auto; gap: 0 0.37em; align-items: center; padding: 0.52em 0.81em 0.3em; border-bottom: 1px solid var(--border); background: var(--bg); transition: background .12s; flex-shrink: 0; } .native-network-tools .fq-item:hover{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 9%); } .native-network-tools .fq-item.active{ background: rgba(59,130,246,.04); border-left: 2px solid var(--blue); padding-left: 0.37em; } .native-network-tools .fq-item.done{ background: rgba(34,197,94,.03); } .native-network-tools .fq-item.paused{ background: rgba(245,158,11,.03); border-left: 2px solid var(--amber); padding-left: 0.37em; } .native-network-tools .fq-item.confirmed{ background: rgba(34,197,94,.04); border-left: 2px solid var(--green); padding-left: 0.37em; } .native-network-tools .fq-icon-sm{ font-size: 1em; color: var(--dim2); } .native-network-tools .fq-name{ font-size: 0.85em; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .fq-size{ font-size: 0.78em; color: var(--dim2); text-align: right; } .native-network-tools .fq-st{ font-size: 0.6em; font-weight: 700; letter-spacing: .02em; text-transform: none; text-align: center; justify-self: center; } .native-network-tools .fq-st.sending{ color: var(--blue); } .native-network-tools .fq-st.done{ color: var(--green); } .native-network-tools .fq-st.confirmed{ color: var(--green); } .native-network-tools .fq-st.paused{ color: var(--amber); } .native-network-tools .fq-remove{ background: none; border: none; cursor: pointer; color: var(--dim); font-size: 0.7em; padding: 0.07em 0.15em; border-radius: 0.07em; transition: color .12s, background .12s; line-height: 1; } .native-network-tools .fq-remove:hover{ color: var(--red); background: rgba(239,68,68,.1); } .native-network-tools .fq-item.active .fq-remove, .native-network-tools .fq-item.done .fq-remove, .native-network-tools .fq-item.confirmed .fq-remove{ display: none; } .native-network-tools .fq-prow{ grid-column: 1 / -1; margin-top: 0.22em; } .native-network-tools .mini-track{ width: 100%; height: 0.44em; background: var(--border2); border-radius: 0.22em; overflow: hidden; } .native-network-tools .mini-bar{ height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform .15s linear; border-radius: 0.22em; } .native-network-tools .fq-item.done .mini-bar, .native-network-tools .fq-item.confirmed .mini-bar{ background: var(--green); } .native-network-tools .fq-item.paused .mini-bar{ background: var(--amber); } .native-network-tools .sha-badge{ display: inline-flex; align-items: center; gap: 0.11em; justify-self: center; font-size: 0.37em; font-weight: 700; letter-spacing: .02em; padding: 0.11em 0.22em; border-radius: 0.11em; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s, border-color .25s, background .25s; } .native-network-tools .sha-badge.waiting{ color: var(--dim); border: 1px solid var(--border2); background: transparent; } .native-network-tools .sha-badge.hashing{ color: var(--amber); border: 1px solid rgba(245,158,11,.3); background: rgba(245,158,11,.05); } .native-network-tools .sha-badge.ok{ color: var(--green); border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06); } .native-network-tools .sha-badge.err{ color: var(--red); border: 1px solid rgba(239,68,68,.3); background: rgba(239,68,68,.06); } .native-network-tools .stream-badge{ display: none; } .native-network-tools .dropzone{ margin: 0.44em; flex-shrink: 0; border: 1px dashed hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .35); border-radius: 0.22em; padding: 1.19em 0.59em; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; cursor: pointer; position: relative; animation: recv-pulse 2.4s ease-in-out infinite; transition: border-color .15s, background .15s; } .native-network-tools .dropzone:hover, .native-network-tools .dropzone.drag-over{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .12) !important; border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .8) !important; box-shadow: inset 0 0 1.19em hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .1) !important; animation: none; } .native-network-tools .dropzone input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; } .native-network-tools .dz-icon{ font-size: 1.63em; color: var(--accent); animation: recv-icon-pulse 2.4s ease-in-out infinite; } .native-network-tools .dz-text{ font-size: 0.78em; color: var(--accent); letter-spacing: .06em; text-transform: none; font-weight: 700; font-family: var(--black); opacity: .7; animation: recv-icon-pulse 2.4s ease-in-out infinite; } .native-network-tools .dropzone:hover .dz-icon, .native-network-tools .dropzone:hover .dz-text, .native-network-tools .dropzone.drag-over .dz-icon, .native-network-tools .dropzone.drag-over .dz-text{ opacity: 1; animation: none; } .native-network-tools #recv-dropzone{ margin: 0.44em; flex-shrink: 0; border: 1px dashed hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .35); border-radius: 0.22em; padding: 1.19em 0.59em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.37em; animation: recv-pulse 2.4s ease-in-out infinite; } .native-network-tools #recv-dropzone.hidden{ display: none; } .native-network-tools .recv-dz-icon{ font-size: 1.63em; line-height: 1; color: var(--accent); animation: recv-icon-pulse 2.4s ease-in-out infinite; } .native-network-tools .recv-dz-text{ font-size: 0.78em; color: var(--accent); letter-spacing: .06em; text-transform: none; font-weight: 700; font-family: var(--black); opacity: .7; animation: recv-icon-pulse 2.4s ease-in-out infinite; } .native-network-tools .recv-dz-sub{ font-size: 0.63em; color: var(--dim2); letter-spacing: .04em; text-transform: none; } @keyframes recv-pulse{0%,100%{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .02); border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .2); box-shadow: none; } 50%{ background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .07); border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .6); box-shadow: inset 0 0 0.89em hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .06); }} @keyframes recv-icon-pulse{0%,100%{opacity:.5} 50%{opacity:1}} .native-network-tools .recv-form{ background: var(--panel); border-bottom: 1px solid var(--border); padding: 0.59em 0.74em; flex-shrink: 0; transition: padding .2s; } .native-network-tools .recv-form-inner{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.37em; flex-wrap: wrap; } .native-network-tools .recv-row{ display: flex; align-items: flex-end; gap: 0.37em; flex-wrap: wrap; } .native-network-tools .recv-field{ display: flex; flex-direction: column; gap: 0.19em; } .native-network-tools .field-label, .native-network-tools .sess-label, .native-network-tools .recv-label{ font-size: 0.7em; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } .native-network-tools .recv-form.minimized{ padding: 0.3em 0.74em; } .native-network-tools .recv-form.minimized .recv-form-inner{ display: none; } .native-network-tools .recv-form-mini{ display: none; align-items: center; gap: 0.44em; flex-wrap: wrap; font-size: 0.7em; color: var(--dim2); } .native-network-tools .recv-form.minimized .recv-form-mini{ display: flex; } .native-network-tools .recv-mini-code{ color: var(--green); font-weight: 700; letter-spacing: .25em; } .native-network-tools .recv-mini-expand{ margin-left: auto; padding: 0.2em 0.55em; font-family: var(--mono); font-size: 0.63em; font-weight: 600; letter-spacing: normal; text-transform: none; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); color: var(--text); border: none; border-radius: 0.22em; cursor: pointer; transition: background .12s, color .12s; } .native-network-tools .recv-mini-expand:hover{ background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 24%); } .native-network-tools .rfl-footer{ padding: 0.52em 0.81em; background: var(--panel); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 0.44em; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2; } .native-network-tools .rfl-sel-count{ font-size: 0.7em; color: var(--dim2); letter-spacing: .08em; } .native-network-tools .rfl-sel-count span{ color: var(--green); font-weight: 700; } @media (max-width: 600px){.native-network-tools .recv-form-inner{ flex-direction: column; gap: 0.44em; } .native-network-tools .recv-row{ flex-direction: column; align-items: stretch; gap: 0.44em; width: 100%; } .native-network-tools .recv-field{ flex-direction: row; align-items: center; gap: 0.44em; flex-wrap: nowrap; } .native-network-tools .recv-field .field-label{ flex-shrink: 0; width: 5.8em; } .native-network-tools .recv-field input[type="text"], .native-network-tools .recv-field input[type="password"]{ flex: 1; min-width: 0; width: auto; } .native-network-tools #btn-connect{ width: 100%; text-align: center; } .native-network-tools .recv-field .dir-row{ flex: 1; min-width: 0; } .native-network-tools .dir-path{ flex: 1; min-width: 0; max-width: none; font-size: 0.67em; } .native-network-tools #btn-clear-recv{ width: 100%; text-align: center; align-self: stretch; margin-top: 0.15em; } .native-network-tools .tb-btn, .native-network-tools .btn-dir{ min-height: 2.4em; } .native-network-tools .rfl-item{ padding: 0.74em 0.59em; gap: 0.52em; } .native-network-tools .rfl-footer{ padding: 0.44em 0.59em; } .native-network-tools #btn-rfl-download{ flex: 1; text-align: center; } .native-network-tools .sb-item:not(.sb-green){ display: none; } .native-network-tools .sb-sep{ display: none; }} @media (max-width: 380px){.native-network-tools .recv-field{ flex-direction: column; align-items: flex-start; } .native-network-tools .recv-field .field-label{ width: auto; } .native-network-tools .recv-field input[type="text"], .native-network-tools .recv-field input[type="password"]{ width: 100%; } .native-network-tools .recv-field .dir-row{ width: 100%; }} .native-network-tools input[type="text"], .native-network-tools input[type="password"]{ padding: 0.37em 0.41em; font-family: var(--mono); font-size: 0.78em; font-weight: 400; letter-spacing: normal; color: var(--text); text-transform: none; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); border: 1px solid transparent; border-radius: 0.22em; outline: none; width: 8.15em; transition: border-color .15s, background .15s; /* iOS auto-zoom prevention — browser zooms when font-size < 16px */ -webkit-text-size-adjust: none; } @media (max-width: 600px){.native-network-tools input[type="text"], .native-network-tools input[type="password"]{ font-size: max(0.78em, 16px); }} .native-network-tools input[type="text"]::placeholder, .native-network-tools input[type="password"]::placeholder{ color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .3); } .native-network-tools input[type="text"]:focus, .native-network-tools input[type="password"]:focus{ border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .5); background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 22%); } .native-network-tools .dir-row{ display: flex; align-items: center; gap: 0.22em; flex-wrap: wrap; } .native-network-tools .btn-dir{ padding: 0.4em 0.55em; font-family: var(--mono); font-size: 0.78em; font-weight: 600; letter-spacing: normal; text-transform: none; background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); color: var(--text); border: none; border-radius: 0.22em; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; } .native-network-tools .btn-dir:hover{ background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 24%); } .native-network-tools .btn-dir.chosen{ color: var(--accent); background: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 50%, .15); } .native-network-tools .dir-path{ font-size: 0.78em; color: var(--dim2); max-width: 32em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .dir-path.has-dir{ color: var(--accent); cursor: pointer; border-bottom: 1px dashed hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .35); transition: color .15s, border-color .15s; } .native-network-tools .dir-path.has-dir:hover{ filter: brightness(1.15); border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .8); } .native-network-tools .dir-path.has-dir::after{ content: " ↗"; font-size: 0.63em; opacity: .6; } .native-network-tools .done-banner{ display: flex; align-items: center; gap: 0.3em; margin: 0.3em 0.44em; padding: 0.37em 0.52em; background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.25); border-radius: 0.15em; font-size: 0.7em; font-weight: 600; color: var(--green); } .native-network-tools .done-banner .done-detail{ font-size: 0.63em; color: var(--dim2); font-weight: 400; margin-left: auto; } .native-network-tools .progress-wrap{ padding: 0.52em 0.74em; flex-shrink: 0; border-top: 1px solid var(--border); background: var(--panel); } .native-network-tools .progress-label{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.19em; } .native-network-tools .progress-label span:first-child{ font-size: 0.59em; color: var(--text); font-weight: 500; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .native-network-tools .pct{ font-size: 0.63em; color: var(--blue); font-weight: 700; } .native-network-tools #send-speed, .native-network-tools #recv-speed{ font-size: 0.59em; color: var(--dim2); font-weight: 400; letter-spacing: .04em; } .native-network-tools .progress-track{ height: 0.37em; background: var(--border2); border-radius: 0.19em; position: relative; overflow: hidden; } .native-network-tools .progress-bar{ position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform .2s ease; border-radius: 0.19em; } .native-network-tools .status{ padding: 0.37em 0.81em; font-size: 0.59em; letter-spacing: .03em; text-transform: none; color: var(--dim2); font-weight: 600; background: var(--panel); border-bottom: 1px solid var(--border); min-height: 1.11em; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .status.ok{ color: var(--green); } .native-network-tools .status.err{ color: var(--red); } .native-network-tools .status.info{ color: var(--amber); } .native-network-tools .status.pulse{ animation: blink 1.4s ease-in-out infinite; } @keyframes blink{0%,100%{opacity:1} 50%{opacity:.4}} .native-network-tools #statusbar{ height: 1.63em; background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 5%); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 0.89em; padding-bottom: env(safe-area-inset-bottom, 0px); gap: 0.52em; flex-shrink: 0; overflow: hidden; } .native-network-tools .sb-item, .native-network-tools .sb-sep{ flex-shrink: 0; white-space: nowrap; } .native-network-tools #statusbar [data-i18n="p2p.statusbar.tagline"]{ flex-shrink: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .native-network-tools #sb-mode{ flex-shrink: 1; min-width: 3em; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .sb-item{ font-size: 0.56em; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; } .native-network-tools .sb-sep{ font-size: 0.56em; color: var(--border2); } .native-network-tools .sb-green{ color: var(--green); } .native-network-tools #srv-receivers-panel{ flex-shrink: 0; background: var(--panel); border-bottom: 1px solid var(--border); display: none; flex-direction: column; } .native-network-tools #srv-receivers-panel.visible{ display: flex; } .native-network-tools .srv-recv-header{ display: flex; align-items: center; justify-content: space-between; padding: 0.3em 0.81em; border-bottom: 1px solid var(--border); } .native-network-tools .srv-recv-title{ font-size: 0.63em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); font-family: var(--black); } .native-network-tools .srv-recv-list{ display: flex; flex-direction: column; max-height: 8.15em; overflow-y: auto; } .native-network-tools .srv-recv-list::-webkit-scrollbar{ width: 0.15em; } .native-network-tools .srv-recv-list::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 0.07em; } .native-network-tools .srv-recv-item{ display: grid; grid-template-columns: 1.93em 1fr 2.59em 4.07em 4.07em; gap: 0 0.44em; align-items: center; padding: 0.3em 0.81em 0.22em; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; } .native-network-tools .srv-recv-item:last-child{ border-bottom: none; } .native-network-tools .srv-recv-item.disconnected{ opacity: .38; } .native-network-tools .srv-recv-id{ font-size: 0.48em; font-weight: 700; letter-spacing: .12em; color: var(--cyan); font-family: var(--black); text-transform: uppercase; } .native-network-tools .srv-recv-item.disconnected .srv-recv-id{ color: var(--dim); } .native-network-tools .srv-recv-prog-wrap{ display: flex; flex-direction: column; gap: 0.11em; min-width: 0; } .native-network-tools .srv-recv-filename{ font-size: 0.59em; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .03em; } .native-network-tools .srv-recv-track{ width: 100%; height: 0.3em; background: var(--border2); border-radius: 0.15em; overflow: hidden; } .native-network-tools .srv-recv-bar{ height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); transition: transform .18s linear; border-radius: 0.15em; } .native-network-tools .srv-recv-bar.done{ background: var(--green); } .native-network-tools .srv-recv-pct{ font-size: 0.63em; font-weight: 700; color: var(--cyan); letter-spacing: .06em; text-align: right; } .native-network-tools .srv-recv-pct.done{ color: var(--green); } .native-network-tools .srv-recv-speed{ font-size: 0.56em; color: var(--dim); letter-spacing: .04em; } .native-network-tools .srv-ack-badge{ display: inline-flex; align-items: center; gap: 0.15em; font-size: 0.56em; font-weight: 700; letter-spacing: .08em; padding: 0.11em 0.3em; border-radius: 0.11em; font-family: var(--mono); white-space: nowrap; text-transform: uppercase; transition: color .25s, border-color .25s, background .25s; } .native-network-tools .srv-ack-badge.waiting{ color: var(--dim); border: 1px solid var(--border2); background: transparent; } .native-network-tools .srv-ack-badge.sending{ color: var(--blue); border: 1px solid rgba(59,130,246,.3); background: rgba(59,130,246,.06); } .native-network-tools .srv-ack-badge.ok{ color: var(--green); border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06); } .native-network-tools .srv-ack-badge.partial{ color: var(--amber); border: 1px solid rgba(245,158,11,.3); background: rgba(245,158,11,.06); } .native-network-tools .srv-ack-badge.all-ok{ color: var(--green); border: 1px solid rgba(34,197,94,.5); background: rgba(34,197,94,.1); box-shadow: 0 0 0.22em rgba(34,197,94,.2); } .native-network-tools .recv-filelist-panel{ flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } .native-network-tools .rfl-header{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.52em 0.81em; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 0.37em; } .native-network-tools .rfl-title{ font-size: 0.78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); font-family: var(--black); } .native-network-tools .rfl-actions{ display: flex; gap: 0.3em; align-items: center; flex-wrap: wrap; } .native-network-tools .rfl-list{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .native-network-tools .rfl-list::-webkit-scrollbar{ width: 0.15em; } .native-network-tools .rfl-list::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 0.07em; } .native-network-tools .rfl-item{ display: flex; align-items: center; gap: 0.44em; padding: 0.52em 0.81em; border-bottom: 1px solid var(--border); background: var(--bg); transition: background .12s; cursor: pointer; flex-shrink: 0; } .native-network-tools .rfl-item:hover{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 9%); } .native-network-tools .rfl-item.selected{ background: rgba(34,197,94,.04); } .native-network-tools .rfl-cb{ width: 0.74em; height: 0.74em; flex-shrink: 0; cursor: pointer; accent-color: var(--green); border-radius: 0.11em; } .native-network-tools .rfl-icon{ font-size: 1em; color: var(--dim2); flex-shrink: 0; } .native-network-tools .rfl-name{ flex: 1; font-size: 0.85em; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .native-network-tools .rfl-size{ font-size: 0.78em; color: var(--dim2); flex-shrink: 0; } .native-network-tools .fq-item:nth-child(even){ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 8%); } .native-network-tools .fq-item:nth-child(even):hover{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 11%); } .native-network-tools .rfl-item:nth-child(even){ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 8%); } .native-network-tools .rfl-item:nth-child(even):hover{ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 11%); } .native-network-tools .srv-recv-item:nth-child(even){ background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 8%); } .native-network-tools button{ font-family: var(--mono); } /*══════════════════════════════════════ APP: CHAT (salon de discussion P2P, WebRTC via PeerJS) Réutilise volontairement les classes de l'app P2P (.role-panel, .role-btn, .tb-btn, .code-pill, .conn-dot, .status…) via le même système de variables scopées, pour garder un look'n'feel identique entre les deux apps sans dupliquer les règles de base. ══════════════════════════════════════*/ .native-network-tools #chat-app{ --bg: var(--bg-window); --panel: var(--bg-window); --surface: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 20%); --surface2: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 25%); --border: var(--border-color); --border2: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 32%); --text: var(--text-primary); --dim: var(--text-secondary); --dim2: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 58%); --blue: var(--accent); --red: var(--danger); --mono: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --black: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: clamp(11px, 1.3vw, 20px); width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--mono); } .native-network-tools .chat-role-btns{ grid-template-columns: 1fr 1fr; } .native-network-tools .chat-setup-panel{ width: min(24em, 92%); } .native-network-tools .chat-setup-body{ padding: 1.2em 1.5em 1.5em; display: flex; flex-direction: column; gap: 0.9em; } .native-network-tools .chat-setup-actions{ display: flex; justify-content: space-between; align-items: center; gap: 0.6em; margin-top: 0.3em; } .native-network-tools #chat-setup-status:empty{ display: none; } /*Champ texte "normal" (pseudo, message) — l'input[type=text] global du P2P est taillé pour un code à 6 caractères ; on le neutralise ici.*/ .native-network-tools .chat-text-input{ width: 100%; text-transform: none; letter-spacing: normal; font-weight: 400; text-align: left; color: var(--text); } .native-network-tools .chat-text-input::placeholder{ color: var(--dim); } .native-network-tools .chat-text-input:focus{ border-color: hsla(var(--hue), calc(60% * var(--sat, 80) / 80), 55%, .5); } .native-network-tools .chat-body{ flex: 1; display: flex; overflow: hidden; min-height: 0; } .native-network-tools .chat-sidebar{ width: 11.5em; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; } .native-network-tools .chat-sidebar::-webkit-scrollbar{ width: 0.15em; } .native-network-tools .chat-sidebar::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 0.07em; } .native-network-tools .chat-sidebar-title{ padding: 0.52em 0.74em; font-size: 0.6em; font-weight: 700; letter-spacing: .06em; color: var(--dim); flex-shrink: 0; border-bottom: 1px solid var(--border); } .native-network-tools .chat-participant{ display: flex; align-items: center; gap: 0.44em; padding: 0.44em 0.74em; font-size: 0.78em; color: var(--text); border-bottom: 1px solid var(--border); } .native-network-tools .chat-participant.is-host{ color: var(--text); font-weight: 600; } .native-network-tools .chat-participant-dot{ width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--green); flex-shrink: 0; } .native-network-tools .chat-participant-host-icon{ font-size: 0.9em; flex-shrink: 0; line-height: 1; } .native-network-tools .chat-participant-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .native-network-tools .chat-participant-you{ color: var(--dim2); font-size: 0.85em; margin-left: auto; flex-shrink: 0; } .native-network-tools .chat-kick-btn{ margin-left: auto; flex-shrink: 0; width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; font-size: 0.78em; line-height: 1; color: var(--dim2); background: transparent; border: none; border-radius: 0.22em; cursor: pointer; transition: background .12s, color .12s; } .native-network-tools .chat-kick-btn:hover{ background: rgba(239,68,68,.15); color: var(--red); } @media (max-width: 600px){.native-network-tools .chat-sidebar{ display: none; }} .native-network-tools .chat-main-col{ flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .native-network-tools .chat-messages{ flex: 1; overflow-y: auto; padding: 0.9em 1em; display: flex; flex-direction: column; gap: 0.55em; background: var(--bg); } .native-network-tools .chat-messages::-webkit-scrollbar{ width: 0.2em; } .native-network-tools .chat-messages::-webkit-scrollbar-thumb{ background: var(--border2); border-radius: 0.1em; } .native-network-tools .chat-msg{ display: flex; flex-direction: column; max-width: 74%; } .native-network-tools .chat-msg.theirs{ align-self: flex-start; align-items: flex-start; } .native-network-tools .chat-msg.mine{ align-self: flex-end; align-items: flex-end; } .native-network-tools .chat-msg-meta{ font-size: 0.6em; color: var(--dim); margin-bottom: 0.15em; padding: 0 0.3em; letter-spacing: .02em; } .native-network-tools .chat-bubble{ padding: 0.5em 0.74em; border-radius: 0.85em; font-size: 0.85em; line-height: 1.4; word-break: break-word; white-space: pre-wrap; } .native-network-tools .chat-msg.theirs .chat-bubble{ background: var(--surface2); color: var(--text); border-bottom-left-radius: 0.2em; } .native-network-tools .chat-msg.mine .chat-bubble{ background: var(--accent); color: #000; border-bottom-right-radius: 0.2em; } .native-network-tools .chat-msg-time{ font-size: 0.56em; color: var(--dim); margin-top: 0.15em; padding: 0 0.3em; } .native-network-tools .chat-msg.system{ align-self: center; max-width: 90%; font-size: 0.7em; color: var(--dim); letter-spacing: .02em; text-align: center; padding: 0.2em 0; } .native-network-tools .chat-composer{ flex-shrink: 0; display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.8em; background: var(--panel); border-top: 1px solid var(--border); } .native-network-tools .chat-composer .chat-text-input{ flex: 1; } .native-network-tools .chat-composer .tb-btn{ flex-shrink: 0; } .native-network-tools .chat-lock-badge{ display: inline-flex; align-items: center; gap: 0.2em; font-size: 0.63em; font-weight: 700; letter-spacing: .02em; color: var(--dim2); background: hsl(var(--hue), calc(12% * var(--sat, 80) / 80), 18%); border-radius: 0.22em; padding: 0.15em 0.44em; flex-shrink: 0; } .native-network-tools .chat-lock-badge.on{ color: var(--green); background: rgba(34,197,94,.1); } .native-network-tools .chat-bubble.locked{ font-style: italic; opacity: .7; } .native-network-tools .chat-composer .tb-btn:disabled{ opacity: .35; } .native-network-tools #chat-statusbar{ height: 1.63em; background: hsl(var(--hue), calc(10% * var(--sat, 80) / 80), 5%); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 0.89em; padding-bottom: env(safe-area-inset-bottom, 0px); gap: 0.52em; flex-shrink: 0; overflow: hidden; } .native-network-tools .chat-conn-bar{ display: flex; align-items: center; gap: 0.3em; margin-left: auto; font-size: 0.56em; letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); min-width: 0; overflow: hidden; } .native-network-tools{ --hue: 252; } .native-network-tools::before{ content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 14% 18%, hsla(252, 72%, 54%, .18), transparent 34%), radial-gradient(circle at 88% 78%, hsla(220, 78%, 48%, .14), transparent 38%), linear-gradient(145deg, rgba(5,7,17,.28), rgba(11,9,28,.08)); } .native-network-tools #taskbar{ background: linear-gradient(180deg, hsla(var(--hue), 22%, 18%, .91), hsla(225, 25%, 11%, .95)); box-shadow: 0 -10px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); } .native-network-tools #start-menu, .native-network-tools .window{ box-shadow: 0 22px 70px rgba(0,0,0,.58), 0 0 0 1px hsla(var(--hue),65%,65%,.045); } .native-network-tools .start-menu-brand-title{ letter-spacing: .35px; } .native-network-tools .boot-logo{ font-weight: 500; font-size: 2rem; letter-spacing: 10px; } .native-network-tools .boot-footer{ text-transform: uppercase; letter-spacing: 1.4px; } .native-network-tools #start-btn{ color: hsl(var(--hue), 85%, 72%); text-shadow: 0 0 18px hsla(var(--hue),80%,60%,.45); } .native-network-tools .desktop-icon:hover{ background: hsla(var(--hue), 55%, 60%, .10); }/* Final containment overrides must follow the imported source rules. */ .native-network-tools{ --hue:275;--sat:80;--accent:var(--theme-accent,#9b6be8);--accent-hover:var(--theme-accent-alt,#cf65d7); --danger:#ef5d78;--green:#35d07f;--amber:#f6b94a;--cyan:#50c9df; --bg-window:rgba(10,7,15,.98);--bg-taskbar:rgba(21,13,30,.98);--border-color:rgba(255,255,255,.13); --text-primary:#f4eff8;--text-secondary:#aaa0b4; width:100%!important;height:100%!important;min-height:0!important;position:relative!important;overflow:hidden!important; } .native-tool-p2p-transfer,.native-tool-p2p-chat,.native-tool-sys-pwgen{overflow:auto!important} .native-network-tools #p2p-app,.native-network-tools #chat-app{width:100%!important;min-height:100%!important;height:auto!important} /* v1.7.2 native app containment + Fenix mastering-tool visual system */ .native-tool-window-content{ position:relative!important; isolation:isolate!important; background:#09050f!important; } .native-network-tools{ --hue:278!important; --sat:78!important; --accent:#8f4de8!important; --accent-hover:#a967f2!important; --purple-bright:#9a5bf0!important; --cyan:#4fc4df!important; --green:#42c98a!important; --amber:#d79a3f!important; --danger:#c84f71!important; --bg-desktop:#09050f!important; --bg-window:#0d0814!important; --bg-titlebar:#21102f!important; --bg-taskbar:#13091d!important; --panel:#100a18!important; --surface:#130c1d!important; --surface2:#1a1026!important; --border:#342041!important; --border-color:#342041!important; --text:#eee8f4!important; --text-primary:#eee8f4!important; --text-secondary:#aa9eb3!important; --dim:#a092aa!important; --dim2:#74687d!important; width:100%!important; height:100%!important; min-height:0!important; max-width:100%!important; position:relative!important; inset:auto!important; overflow:hidden!important; background:linear-gradient(180deg,#0d0814,#09050f)!important; transition:none!important; contain:layout paint style!important; } .native-network-tools::before, .native-network-tools #ps3-waves, .native-network-tools #boot-screen, .native-network-tools #taskbar, .native-network-tools #start-menu{ display:none!important; content:none!important; } .native-network-tools *{transition-color:none} .native-network-tools input, .native-network-tools select, .native-network-tools textarea, .native-network-tools .pwd-display-input, .native-network-tools .chat-text-input{ background:#17101f!important; border-color:#3a2748!important; color:#eee8f4!important; box-shadow:none!important; } .native-network-tools input:focus, .native-network-tools select:focus, .native-network-tools textarea:focus{ border-color:#8f4de8!important; box-shadow:0 0 0 2px rgba(143,77,232,.16)!important; } .native-network-tools button, .native-network-tools .tb-btn, .native-network-tools .pwd-btn{ border-color:#3b2749!important; color:#eee8f4!important; } .native-network-tools .primary, .native-network-tools .btn-primary, .native-network-tools .pwd-generate-btn, .native-network-tools .tb-btn.primary{ background:linear-gradient(135deg,#7640c5,#9b5ce5)!important; border-color:#a76af0!important; color:#fff!important; } .native-network-tools .window, .native-network-tools .pwd-card, .native-network-tools .p2p-card, .native-network-tools .chat-panel, .native-network-tools .terminal-wrap{ background:#0d0814!important; border-color:#30203d!important; box-shadow:0 18px 55px rgba(0,0,0,.42)!important; } .native-network-tools .titlebar, .native-network-tools .pwd-header, .native-network-tools .p2p-header, .native-network-tools .chat-header{ background:linear-gradient(180deg,#241231,#180c22)!important; border-color:#392347!important; } .native-network-tools .pwd-strength-fill, .native-network-tools progress::-webkit-progress-value{ background:linear-gradient(90deg,#3fc58b,#8d52df)!important; } .native-tool-sys-terminal .terminal-wrap, .native-tool-p2p-transfer, .native-tool-p2p-chat, .native-tool-sys-pwgen{ width:100%!important; height:100%!important; overflow:auto!important; }