2 lines
18 KiB
CSS
2 lines
18 KiB
CSS
*,:before,:after{box-sizing:border-box}body{color:#e8e8e8;-webkit-font-smoothing:antialiased;background:#0e0e0e;margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}h1,h2,h3{margin:0}button{font-family:inherit}a{color:#9d8ef7;text-decoration:none}.tag{color:#9d8ef7;background:#2a2440;border-radius:999px;padding:2px 8px;font-size:.72rem;display:inline-block}.app-layout{background:#0e0e0e;height:100vh;display:flex;overflow:hidden}.app-sidebar{background:#141414;border-right:1px solid #222;flex-direction:column;flex-shrink:0;width:220px;display:flex;overflow-y:auto}.app-layout__main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:auto}.app-layout__hamburger,.app-layout__overlay{display:none}.sb-brand{letter-spacing:-.01em;background:linear-gradient(135deg,#7c6af7,#b89bf7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;flex-shrink:0;padding:20px 16px 14px;font-size:.88rem;font-weight:800}.sb-divider{background:#222;flex-shrink:0;height:1px;margin:4px 0}.sb-section-label{color:#444;text-transform:uppercase;letter-spacing:.07em;flex-shrink:0;padding:10px 14px 4px;font-size:.68rem;font-weight:700}.sb-nav{flex-direction:column;gap:2px;padding:6px 8px;display:flex}.sb-btn{color:#888;cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:.85rem;transition:all .15s;display:flex;overflow:hidden}.sb-btn:hover{color:#e8e8e8;background:#1e1e1e}.sb-btn--active{color:#9d8ef7;background:#2a2440}.sb-btn--primary{color:#9d8ef7;background:#2a2440;border:1px solid #3d3060;font-weight:600}.sb-btn--primary:hover{color:#b8aaf9;background:#352d55}.sb-app-icon{object-fit:cover;border-radius:6px;flex-shrink:0;width:20px;height:20px}.sb-app-icon-placeholder{background:#2a2a2a;border-radius:6px;flex-shrink:0;width:20px;height:20px}@media (width<=680px){.app-sidebar{z-index:200;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.app-sidebar.is-open{transform:translate(0);box-shadow:8px 0 40px #000000b3}.app-layout__overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:199;background:#0000008c;display:block;position:fixed;inset:0}.app-layout__hamburger{z-index:198;cursor:pointer;color:#888;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;line-height:1;display:flex;position:fixed;top:10px;left:10px}.app-layout__main{padding-top:56px}}.apps-page{max-width:800px;padding:28px 24px}.apps-page__title{background:linear-gradient(135deg,#7c6af7 0%,#b89bf7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 24px;font-size:1.4rem;font-weight:800}@media (width<=480px){.apps-page{padding:16px 12px}}.apps-page__empty{text-align:center;color:#555;margin-top:48px;font-size:.95rem}.apps-page__list{flex-direction:column;gap:10px;display:flex}.app-row{background:#1e1e1e;border:1px solid #2e2e2e;border-radius:12px;align-items:center;gap:14px;padding:14px 20px;transition:border-color .2s;display:flex}.app-row__icon{object-fit:cover;border-radius:12px;flex-shrink:0;width:48px;height:48px}.app-row__icon-placeholder{background:#2a2a2a;border-radius:12px;flex-shrink:0;width:48px;height:48px}.app-row:hover{border-color:#3e3e3e}.app-row__info{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.app-row__name{color:#e8e8e8;font-size:1rem;font-weight:600}.app-row__links{flex-wrap:wrap;gap:8px;display:flex}.app-row__store{border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:600;text-decoration:none}.app-row__store--ios{color:#60a5fa;background:#1a2535;border:1px solid #2a4060}.app-row__store--ios:hover{background:#1e2e45}.app-row__store--android{color:#6fcf6f;background:#1a2a1a;border:1px solid #2a4a2a}.app-row__store--android:hover{background:#1e341e}.app-row__store--missing{color:#444;background:#161616;border:1px solid #2e2e2e}.app-row__actions{flex-shrink:0;gap:8px;display:flex}.app-row__actions button{color:#aaa;cursor:pointer;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:8px;padding:6px 12px;font-size:.83rem;transition:all .15s}.app-row__actions button:hover{color:#fff;background:#333}.app-row__delete:hover{color:#f77!important;background:#3a1a1a!important;border-color:#5e2e2e!important}.app-modal{color:#e8e8e8;background:#1e1e1e;border:1px solid #333;border-radius:16px;width:460px;max-width:90vw;padding:28px 32px;box-shadow:0 24px 80px #000000b3}.app-modal::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0009}.app-modal h2{margin:0 0 20px;font-size:1.15rem;font-weight:700}.app-modal label{color:#999;text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:6px;margin-bottom:16px;font-size:.82rem;font-weight:600;display:flex}.app-modal input{color:#e8e8e8;background:#111;border:1px solid #333;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:.95rem;transition:border-color .15s}.app-modal input:focus{border-color:#7c6af7}.app-modal__name-row{align-items:flex-end;gap:12px;margin-bottom:16px;display:flex}.app-modal__icon-preview{object-fit:cover;border:1px solid #333;border-radius:14px;flex-shrink:0;width:56px;height:56px}.app-modal__name-input-wrap{align-items:center;display:flex;position:relative}.app-modal__name-input-wrap input{width:100%}.app-modal__spinner{border:2px solid #333;border-top-color:#7c6af7;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin;position:absolute;right:10px}@keyframes spin{to{transform:rotate(360deg)}}.app-modal__fetch-error{color:#f97;margin:-8px 0 14px;font-size:.8rem}.app-modal__footer{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.ad-card{background:#1e1e1e;border:1px solid #2e2e2e;border-radius:12px;flex-direction:column;transition:border-color .2s,transform .15s;display:flex;overflow:hidden}.ad-card:hover{border-color:#7c6af7;transform:translateY(-2px)}.ad-card__thumb{aspect-ratio:9/19.5;cursor:pointer;background:#111;position:relative;overflow:hidden}.ad-card__thumb-img{object-fit:cover;width:100%;height:100%;display:block}.ad-card__thumb-placeholder{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;padding:12px;display:flex}.ad-card__thumb-name{color:#aaa;word-break:break-word;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:.82rem;font-weight:600;display:-webkit-box;overflow:hidden}.ad-card__thumb-hint{color:#555;font-size:.7rem}.ad-card__body{flex-direction:column;flex:1;gap:6px;padding:10px 12px 6px;display:flex}.ad-card__top-row{flex-direction:row;align-items:flex-start;gap:8px;display:flex}.ad-card__app-icon{object-fit:cover;border-radius:7px;flex-shrink:0;width:32px;height:32px}.ad-card__top-text{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.ad-card__title{white-space:nowrap;text-overflow:ellipsis;color:#e8e8e8;margin:0;font-size:.88rem;font-weight:600;overflow:hidden}.ad-card__app{color:#9d8ef7;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;font-weight:500;overflow:hidden}.ad-card__tags{flex-wrap:wrap;gap:4px;display:flex}.ad-card__meta{color:#555;white-space:nowrap;text-overflow:ellipsis;font-family:monospace;font-size:.7rem;overflow:hidden}.ad-card__actions{border-top:1px solid #2e2e2e;display:flex}.ad-card__actions button{color:#aaa;cursor:pointer;background:0 0;border:none;border-right:1px solid #2e2e2e;flex:1;padding:8px 0;font-size:1rem;transition:background .15s,color .15s}.ad-card__actions button:last-child{border-right:none}.ad-card__actions button:hover{color:#fff;background:#2a2a2a}.ad-card__actions .ad-card__delete:hover{color:#f77;background:#3a1a1a}.meta-modal{color:#e8e8e8;background:#1e1e1e;border:1px solid #333;border-radius:16px;width:480px;max-width:94vw;max-height:90dvh;padding:28px 32px;overflow-y:auto;box-shadow:0 24px 80px #000000b3}.meta-modal::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0009}.meta-modal h2{margin:0 0 20px;font-size:1.15rem;font-weight:700}.meta-modal label{color:#999;text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:6px;margin-bottom:16px;font-size:.82rem;font-weight:600;display:flex}.meta-modal__required{color:#f77;text-transform:none}.meta-modal input,.meta-modal textarea,.meta-modal__select{color:#e8e8e8;background:#111;border:1px solid #333;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:.95rem;transition:border-color .15s}.meta-modal input:focus,.meta-modal textarea:focus,.meta-modal__select:focus{border-color:#7c6af7}.meta-modal textarea{resize:vertical}.meta-modal__select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.meta-modal__tag-row{gap:8px;display:flex}.meta-modal__tag-row input{flex:1}.meta-modal__tag-row button{color:#9d8ef7;cursor:pointer;background:#2a2440;border:1px solid #3d3060;border-radius:8px;padding:6px 14px;font-size:.85rem}.meta-modal__tags{flex-wrap:wrap;gap:6px;min-height:24px;margin-top:4px;display:flex}.meta-modal__tags .tag{color:#9d8ef7;background:#2a2440;border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-size:.78rem;display:flex}.meta-modal__tags .tag button{color:#9d8ef7;cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem;line-height:1}.meta-modal__row2{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=480px){.meta-modal{padding:20px 18px}.meta-modal__row2{grid-template-columns:1fr}}.meta-modal__replace{margin-bottom:16px}.meta-modal__replace-label{color:#999;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-size:.82rem;font-weight:600;display:block}.meta-modal__replace-row{align-items:center;gap:10px;display:flex}.meta-modal__file-input{display:none}.meta-modal__file-btn{cursor:pointer;white-space:nowrap;flex-shrink:0}.meta-modal__file-name{color:#9d8ef7;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;min-width:0;font-size:.88rem;display:flex;overflow:hidden}.meta-modal__file-clear{color:#9d8ef7;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-size:1rem;line-height:1}.meta-modal__file-hint{color:#555;font-size:.85rem}.meta-modal__error{color:#f77;margin:-8px 0 12px;font-size:.85rem}.meta-modal__footer{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.btn-primary{color:#fff;cursor:pointer;background:#7c6af7;border:none;border-radius:8px;padding:9px 22px;font-size:.95rem;font-weight:600;transition:background .15s}.btn-primary:hover:not(:disabled){background:#6a58e0}.btn-primary:disabled{opacity:.6;cursor:default}.btn-secondary{color:#ccc;cursor:pointer;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:8px;padding:9px 22px;font-size:.95rem;transition:background .15s}.btn-secondary:hover{background:#333}.upm{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:20px;width:min(920px,96vw);max-height:92vh;padding:0;overflow:hidden;box-shadow:0 32px 100px #000000d9}.upm::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf}.upm__layout{grid-template-columns:320px 1fr;height:92vh;max-height:92vh;display:grid}.upm__preview{background:#111;border-right:1px solid #222;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px 20px;display:flex}.upm__frame{aspect-ratio:9/19.5;background:#000;border:2px solid #2e2e2e;border-radius:22px;flex-shrink:0;width:220px;overflow:hidden;box-shadow:0 8px 32px #0009}.upm__iframe{border:none;width:100%;height:100%;display:block}.upm__shot-btn{color:#9d8ef7;cursor:pointer;background:#2a2440;border:1px solid #3d3060;border-radius:10px;width:100%;padding:10px 16px;font-size:.88rem;font-weight:600;transition:all .15s}.upm__shot-btn:hover:not(:disabled){background:#352d55}.upm__shot-btn:disabled{opacity:.6;cursor:default}.upm__shot-btn--done{color:#6fcf6f;background:#1a2e1a;border-color:#3a5e3a}.upm__shot-btn--error{color:#f77;background:#2e1a1a;border-color:#5e3a3a}.upm__shot-hint{color:#555;margin:0;font-size:.75rem}.upm__form{color:#e8e8e8;flex-direction:column;padding:28px 28px 20px;display:flex;overflow-y:auto}.upm__form h2{margin:0 0 20px;font-size:1.1rem;font-weight:700}.upm__form label{color:#888;text-transform:uppercase;letter-spacing:.05em;flex-direction:column;gap:6px;margin-bottom:14px;font-size:.8rem;font-weight:600;display:flex}.upm__form input,.upm__form textarea,.upm__select{color:#e8e8e8;background:#111;border:1px solid #2e2e2e;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:.92rem;transition:border-color .15s}.upm__form input:focus,.upm__form textarea:focus,.upm__select:focus{border-color:#7c6af7}.upm__form textarea{resize:vertical}.upm__select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.upm__app-row{gap:8px;display:flex}.upm__app-row .upm__select{flex:1}.upm__new-app-btn{color:#9d8ef7;cursor:pointer;white-space:nowrap;background:#2a2440;border:1px solid #3d3060;border-radius:8px;flex-shrink:0;padding:0 12px;font-size:.85rem;font-weight:600;transition:background .15s}.upm__new-app-btn:hover{background:#352d55}.upm__req{color:#f77;text-transform:none}.upm__row2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.upm__tag-row{gap:8px;display:flex}.upm__tag-row input{flex:1}.upm__tag-add{color:#9d8ef7;cursor:pointer;background:#2a2440;border:1px solid #3d3060;border-radius:8px;padding:6px 12px;font-size:.85rem}.upm__tags{flex-wrap:wrap;gap:6px;min-height:20px;margin-top:4px;display:flex}.upm__tags .tag button{color:#9d8ef7;cursor:pointer;background:0 0;border:none;padding:0 0 0 4px;font-size:.9rem;line-height:1}.upm__error{color:#f77;margin:-6px 0 10px;font-size:.83rem}.upm__footer{justify-content:flex-end;gap:10px;margin-top:auto;padding-top:16px;display:flex}@media (width<=680px){.upm{border:none;border-radius:0;width:100vw;max-height:100dvh;margin:0}.upm__layout{grid-template-rows:auto 1fr;grid-template-columns:1fr;height:100dvh;max-height:100dvh}.upm__preview{gap:10px;padding:16px}.upm__frame{aspect-ratio:9/19.5;width:140px}.upm__shot-hint{display:none}}.catalog{padding:24px 20px}.catalog__search-wrap{padding:4px 8px}.catalog__search{color:#e8e8e8;box-sizing:border-box;background:#111;border:1px solid #2e2e2e;border-radius:8px;outline:none;width:100%;padding:7px 10px;font-family:inherit;font-size:.85rem;transition:border-color .15s}.catalog__search:focus{border-color:#7c6af7}.catalog__search::placeholder{color:#555}.catalog__empty{text-align:center;color:#555;margin-top:48px;font-size:.95rem}.catalog__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}@media (width<=480px){.catalog__grid{grid-template-columns:repeat(2,1fr);gap:12px}}.device-frame{background:#1a1a1a;flex-shrink:0;position:relative;box-shadow:0 0 0 2px #444,0 0 0 6px #222,0 20px 60px #0009}.device-frame--phone{border-radius:40px}.device-frame--tablet{border-radius:28px}.device-frame__notch{z-index:1;background:#111;border-radius:12px;position:absolute}.device-frame--tablet .device-frame__notch{border-radius:50%}.device-frame__screen{background:#000;border-radius:4px;position:absolute;overflow:hidden}.device-frame__screen iframe{border:none;display:block}.device-frame__home{background:#444;border-radius:3px;position:absolute}.viewer__loading{color:#666;justify-content:center;align-items:center;height:100vh;display:flex}.viewer__stage{flex:1;min-height:0;position:relative;overflow:hidden}.viewer__frame-wrapper{transform-origin:50%;position:absolute;top:50%;left:50%}.viewer__sb-info{flex-direction:column;gap:6px;padding:4px 14px 10px;display:flex}.viewer__sb-title{color:#e8e8e8;word-break:break-word;font-size:.88rem;font-weight:600}.viewer__sb-developer{color:#666;font-size:.78rem}.viewer__app-row{align-items:center;gap:8px;display:flex}.viewer__app-icon{object-fit:cover;border-radius:8px;flex-shrink:0;width:32px;height:32px}.viewer__app-icon--placeholder{background:#2a2a2a}.viewer__app-name{color:#e8e8e8;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600;overflow:hidden}.viewer__store-links{flex-direction:column;gap:5px;margin-top:2px;display:flex}.viewer__store-link{text-align:center;border-radius:6px;padding:4px 10px;font-size:.75rem;font-weight:600;text-decoration:none;transition:opacity .15s}.viewer__store-link:hover{opacity:.8}.viewer__store-link--ios{color:#a78bfa;background:#1c1c2e;border:1px solid #3730a3}.viewer__store-link--android{color:#6fcf6f;background:#0f2310;border:1px solid #1a4a1a}.viewer__sb-mono{color:#888;word-break:break-all;font-family:monospace;font-size:.78rem}.viewer__tags{flex-wrap:wrap;gap:5px;display:flex}.viewer__spacer{flex:1}.viewer__controls{flex-direction:column;gap:8px;padding:12px 10px;display:flex}.viewer__frame-btns{flex-wrap:wrap;gap:4px;display:flex}.viewer__frame-btn{color:#aaa;cursor:pointer;white-space:nowrap;background:#252525;border:1px solid #333;border-radius:6px;flex:1;padding:5px 6px;font-size:.78rem;transition:all .15s}.viewer__frame-btn.active,.viewer__frame-btn:hover{color:#9d8ef7;background:#2a2440;border-color:#5a4ea8}.viewer__ctrl-row{gap:5px;display:flex}.viewer__ctrl-btn{color:#aaa;cursor:pointer;white-space:nowrap;background:#252525;border:1px solid #333;border-radius:6px;flex:1;padding:6px 4px;font-size:.78rem;transition:all .15s}.viewer__ctrl-btn:hover,.viewer__ctrl-btn.active{color:#9d8ef7;background:#2a2440;border-color:#5a4ea8}.viewer__ctrl-btn--done{color:#6fcf6f;background:#1a2e1a;border-color:#3a5e3a}.viewer__ctrl-btn--error{color:#f77;background:#2e1a1a;border-color:#5e3a3a}.viewer__ctrl-btn--saving{opacity:.6;cursor:default}.viewer__edit-btn{width:100%;padding:8px;font-size:.85rem}@media (width<=680px){.viewer__stage{min-height:100dvh}}
|