OpenWebOS

Web

.wp-swatch.s4{background:linear-gradient(135deg,#1a0e0e,#3a1a1a)} .acc-row{display:flex;gap:8px;justify-content:center;margin:8px 0 22px} .acc-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s} .acc-dot.sel{border-color:#fff;transform:scale(1.2)} .login-time{font-size:72px;font-weight:100;letter-spacing:2px;color:#fff;text-align:center;line-height:1} .login-date{font-size:14px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:3px;text-align:center;margin-bottom:50px;text-transform:uppercase} .login-avatar{width:72px;height:72px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;margin:0 auto 12px} .login-name{font-size:18px;font-weight:300;color:#fff;text-align:center;margin-bottom:24px;letter-spacing:1px} .login-input{width:280px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300;outline:none;text-align:center;letter-spacing:1px;font-family:'Roboto',sans-serif} .login-input:focus{border-color:var(--acc)} .login-err{font-size:12px;color:#e94560;margin-top:10px;min-height:16px;text-align:center} .login-arrow{margin-top:16px;width:280px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px;color:#fff;font-size:14px;font-weight:300;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-family:'Roboto',sans-serif;transition:.2s} .login-arrow:hover{background:rgba(255,255,255,0.14)} /* ── Top bar ── */ #topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:500;display:flex;align-items:center;padding:0 14px;gap:10px;background:rgba(8,8,15,0.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)} #tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .tb-pill{font-size:12px;font-weight:300;color:rgba(255,255,255,0.45);padding:4px 12px;border-radius:14px;cursor:pointer;transition:.15s;white-space:nowrap} .tb-pill:hover{background:rgba(255,255,255,0.07)} #user-menu{position:fixed;top:46px;right:8px;background:rgba(20,20,36,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;min-width:160px;z-index:600;backdrop-filter:blur(20px)} .umenu-item{padding:11px 18px;font-size:13px;cursor:pointer;color:#f0f0f8;transition:.15s;font-weight:300} .umenu-item:hover{background:rgba(255,255,255,0.07)} .umenu-item.danger{color:#e94560} .umenu-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0} /* ── Home screen ── */ #homescreen{ position:fixed;top:var(--topbar-h);left:0;right:0;bottom:var(--launcher-h); z-index:1;display:flex;flex-direction:column;align-items:center; overflow:hidden;pointer-events:none; } #homescreen.active{pointer-events:auto} #home-search-wrap{width:100%;max-width:520px;padding:28px 20px 0;transition:opacity .2s} #home-just-type{ width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1); border-radius:24px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300; outline:none;font-family:'Roboto',sans-serif;backdrop-filter:blur(12px); } #home-just-type::placeholder{color:rgba(255,255,255,0.3)} #home-just-type:focus{border-color:var(--acc)} #widget-area{ width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap; padding:14px 12px 8px;display:flex;gap:10px;align-items:center; scrollbar-width:none;margin-top:4px; } #widget-area::-webkit-scrollbar{display:none} .widget{display:inline-flex;flex-direction:column;vertical-align:top;background:rgba(22,22,40,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:10px 13px;min-width:120px;max-width:180px;white-space:normal;flex-shrink:0;cursor:pointer;transition:.15s;position:relative} .widget:hover{background:rgba(30,30,56,0.95)} .widget-icon{font-size:16px;margin-bottom:4px} .widget-title{font-size:9px;font-weight:500;color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .widget-main{font-size:20px;font-weight:100;color:#fff;letter-spacing:1px;line-height:1.1} .widget-sub{font-size:10px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:3px;line-height:1.4} .widget-open{position:absolute;top:7px;right:9px;font-size:10px;color:rgba(255,255,255,0.2)} /* ── Desktop (card layer) ── */ #desktop{position:fixed;top:var(--topbar-h);left:0;right:0;bottom:var(--launcher-h);z-index:2;overflow:hidden;pointer-events:none} #cards-container{position:relative;width:100%;height:100%;pointer-events:none} /* ── App card ── */ .app-card{position:absolute;background:#161628;border-radius:20px;border:1px solid rgba(255,255,255,0.07);width:340px;min-width:240px;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:cardIn .22s ease;overflow:hidden;pointer-events:auto;max-height:480px} .app-card:not(.fullscreen){max-height:480px} .app-card.fullscreen{position:fixed!important;top:var(--topbar-h)!important;left:0!important;right:0!important;bottom:var(--launcher-h)!important;width:100%!important;height:auto!important;max-height:none!important;border-radius:0!important;z-index:480!important} @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes siriPulse{from{box-shadow:0 0 0 0 rgba(233,69,96,0.4)}to{box-shadow:0 0 0 16px rgba(233,69,96,0)}} .card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,0.25);cursor:move;user-select:none;flex-shrink:0} .app-card.fullscreen .card-header{cursor:default} .card-dot{width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;transition:.15s} .dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-full{background:#28c840} .card-icon{font-size:13px}.card-title{font-size:12px;font-weight:400;flex:1;letter-spacing:.3px;color:rgba(255,255,255,0.7)} .card-body{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;min-height:0} /* ── Launcher ── */ #launcher{position:fixed;bottom:0;left:0;right:0;height:var(--launcher-h);z-index:500;display:flex;align-items:center;padding:0 16px;gap:10px;background:rgba(8,8,15,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.05);justify-content:center} .launch-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:.15s;flex-direction:column;gap:2px;position:relative;user-select:none} .launch-icon:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)} .launch-icon:active{transform:scale(.93)} .launch-lbl{font-size:8px;font-weight:300;color:rgba(255,255,255,0.35);letter-spacing:.5px} .launch-icon.editing{animation:wobble .4s infinite alternate;border-color:rgba(255,255,255,0.25)} .launch-icon .remove-badge{position:absolute;top:-5px;left:-5px;width:16px;height:16px;background:#e94560;border-radius:50%;font-size:11px;color:#fff;display:none;align-items:center;justify-content:center} .launch-icon.editing .remove-badge{display:flex} #dock-divider{width:1px;height:36px;background:rgba(255,255,255,0.1);flex-shrink:0} #launch-home{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} #app-drawer{position:fixed;bottom:var(--launcher-h);left:0;right:0;z-index:495;background:rgba(8,8,15,0.95);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;animation:slideUp .2s ease;max-height:calc(100vh - 110px);overflow-y:auto} .drawer-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:14px;transition:.15s} .drawer-icon:hover{background:rgba(255,255,255,0.07)} .drawer-icon-img{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:20px} .drawer-icon-lbl{font-size:10px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:.5px;text-align:center} .drawer-icon.in-dock .drawer-icon-img{border-color:var(--acc);background:rgba(233,69,96,0.1)} .drawer-section{grid-column:1/-1;font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding:4px 0 0} /* ── App inner styles ── */ .browser-bar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,0.2);flex-shrink:0} .browser-url{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 10px;color:#fff;font-size:12px;outline:none;font-family:'Roboto',sans-serif} .browser-go{background:var(--acc);border:none;border-radius:7px;padding:5px 12px;color:#fff;font-size:11px;cursor:pointer} .browser-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .splash-logo{font-size:48px}.splash-title{font-size:20px;font-weight:300;letter-spacing:3px} .splash-url{font-size:10px;color:#7a7a9a;word-break:break-all;max-width:280px;background:rgba(0,0,0,0.25);padding:6px 12px;border-radius:8px;font-family:monospace} .splash-sub{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:.5px} .splash-btn{background:var(--acc);border:none;border-radius:10px;padding:9px 24px;color:#fff;font-size:12px;cursor:pointer;font-family:'Roboto',sans-serif} .calc-body{padding:12px;display:flex;flex-direction:column;gap:6px} .calc-display{background:rgba(0,0,0,0.35);border-radius:12px;padding:12px 14px;text-align:right;font-size:28px;font-weight:300;color:#fff;min-height:58px;word-break:break-all} .calc-sub{font-size:11px;color:rgba(255,255,255,0.28);min-height:14px} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .calc-btn{padding:12px 4px;border-radius:10px;border:none;font-size:14px;font-weight:300;cursor:pointer;transition:.1s;font-family:'Roboto',sans-serif} .calc-btn:active{transform:scale(.93)} .cb-num{background:rgba(255,255,255,0.09);color:#fff} .cb-op{background:rgba(233,69,96,0.2);color:#e94560} .cb-eq{background:var(--acc);color:#fff} .cb-fn{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);font-size:12px} .cb-zero{grid-column:span 2} .term-body{flex:1;background:#060610;padding:10px;font-family:monospace;font-size:12px;overflow-y:auto;min-height:160px;display:flex;flex-direction:column;gap:1px} .term-line{color:#9fefb0;white-space:pre-wrap;word-break:break-all} .term-prompt-row{display:flex;align-items:center;gap:6px;background:#060610;padding:4px 10px;flex-shrink:0} .term-prompt-lbl{color:var(--acc);white-space:nowrap;font-size:12px;font-family:monospace} .term-input-el{flex:1;background:transparent;border:none;outline:none;color:#9fefb0;font-family:monospace;font-size:12px} .notes-toolbar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,0.2);flex-shrink:0} .notes-tb-btn{background:rgba(255,255,255,0.07);border:none;border-radius:6px;padding:4px 10px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer} .notes-textarea{flex:1;background:rgba(0,0,0,0.15);border:none;padding:12px;color:#f0f0f8;font-size:13px;font-weight:300;resize:none;outline:none;line-height:1.7;font-family:'Roboto',sans-serif;min-height:200px} .clock-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;min-height:160px} .clock-time{font-size:52px;font-weight:100;letter-spacing:3px} .clock-date{font-size:13px;font-weight:300;color:#7a7a9a;letter-spacing:2px;text-transform:uppercase} .cal-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px} .cal-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;padding:0 2px} .cal-nav{background:none;border:none;color:#f0f0f8;cursor:pointer;font-size:18px;padding:2px 8px;border-radius:6px} .cal-nav:hover{background:rgba(255,255,255,0.08)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .cal-day-lbl{font-size:10px;font-weight:500;color:#7a7a9a;padding:3px 0} .cal-day{font-size:12px;padding:5px 2px;border-radius:7px;color:rgba(255,255,255,0.7)} .cal-day.today{background:var(--acc);color:#fff;font-weight:500} .cal-day.other-month{color:rgba(255,255,255,0.18)} .files-header{padding:8px 12px;font-size:11px;color:#7a7a9a;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;flex-shrink:0} .file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;font-size:13px;font-weight:300;transition:.1s} .file-item:hover{background:rgba(255,255,255,0.05)} .file-icon{font-size:16px;width:22px;text-align:center} .file-size{font-size:11px;color:#7a7a9a;margin-left:auto} .music-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;min-height:200px} .music-title{font-size:16px;font-weight:400;letter-spacing:.5px} .music-artist{font-size:12px;font-weight:300;color:#7a7a9a} .music-controls{display:flex;gap:16px;align-items:center} .mc-btn{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .mc-btn:hover{background:rgba(255,255,255,0.15)} .mc-play{width:48px;height:48px;background:var(--acc);font-size:20px} .music-progress{width:100%;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;cursor:pointer} .music-fill{height:100%;width:0%;background:var(--acc);border-radius:2px;transition:.3s} .weather-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;min-height:200px} .weather-icon{font-size:56px} .weather-temp{font-size:48px;font-weight:100;letter-spacing:2px} .weather-desc{font-size:14px;font-weight:300;color:#7a7a9a;letter-spacing:1px;text-transform:uppercase} .weather-loc{font-size:12px;font-weight:300;color:rgba(255,255,255,0.3);margin-top:4px} .weather-row{display:flex;gap:20px;margin-top:10px} .weather-stat{text-align:center} .weather-stat-val{font-size:15px;font-weight:300} .weather-stat-lbl{font-size:10px;color:#7a7a9a;letter-spacing:1px;text-transform:uppercase} .contacts-body{flex:1;overflow-y:auto} .contact-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer} .contact-item:hover{background:rgba(255,255,255,0.04)} .contact-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;flex-shrink:0} .contact-name{font-size:13px;font-weight:300} .contact-num{font-size:11px;color:#7a7a9a} .settings-body{flex:1;overflow-y:auto} .settings-section-hdr{padding:12px 14px 5px;font-size:10px;font-weight:500;color:#7a7a9a;letter-spacing:2px;text-transform:uppercase} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;font-weight:300} .settings-row .val{color:#7a7a9a;font-size:12px} .settings-toggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);cursor:pointer;position:relative;transition:.2s;border:none;flex-shrink:0} .settings-toggle.on{background:var(--acc)} .settings-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s} .settings-toggle.on::after{left:19px} .hidden{display:none!important}

Web