style.css - main - viperflip/Border_Journal

style.css
827 строк18 KB
viperflip
Add files via upload
31 мар 2026, 16:44
31 мар 2026, 16:445d915ad

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
  /* Keep the top bar visually light so the global background gradient reads through */
  background:rgba(2,6,23,.35);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  z-index:20;
}
.brand-title{font-size:18px;font-weight:800;letter-spacing:.2px}
.brand-subtitle{font-size:12px;color:var(--muted);margin-top:2px;opacity:.72}
.screen-title{font-size:16px;margin:0}

*{box-sizing:border-box}
:root{
  --bg:#0f1724;
  --surface:#020617;
  --border:#1e293b;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22c55e;
  --btn:#334155;
  --danger:#7f1d1d;
  --shadow1: 0 10px 30px rgba(0,0,0,.28);
  --shadow2: 0 18px 60px rgba(0,0,0,.45);
  --inset1: inset 0 1px 0 rgba(255,255,255,.06);
}

body{
  margin:0;
  color-scheme: dark;
  font-family:-apple-system,BlinkMacSystemFont,Inter,Arial,sans-serif;
  background: radial-gradient(900px 520px at 20% -10%, rgba(34,197,94,.10), transparent 60%), radial-gradient(800px 520px at 90% 0%, rgba(56,189,248,.06), transparent 55%), var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app{padding-top:72px;padding-bottom:96px}

.toolbar{padding:0 16px 10px}
.search{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.35);
  color:var(--text);
  outline:none;
}
:root[data-theme="light"] .search,
:root[data-theme="system"] .search{
  background:rgba(226,232,240,.65);
}

.header{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

h1{font-size:18px;margin:0}
.muted{color:var(--muted);font-size:12px}

.primary{
  background:var(--accent);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  transition:transform .08s ease, opacity .08s ease;
}
.primary:active{transform:scale(0.97);opacity:.85}

.cards{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.card{
  /* Subtle gradient for depth, without changing layout */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow: var(--inset1), var(--shadow1);
  animation:cardIn .18s ease;
}

/* ---------- Accordion cards (Requests) ---------- */
.acc-card{padding:0; overflow:hidden;}
.acc-card.in-work{position:relative;}
.acc-card.in-work::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:rgba(250,204,21,.95); /* yellow */
}

.acc-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  background:transparent;
  border:none;
  color:var(--text);
  text-align:left;
  /* Base weight; cards "in work" are emphasized a bit more */
  font-weight:650;
}
.acc-card.in-work .acc-head{font-weight:720;}

/* Completed cards are slightly calmer (no color changes, just hierarchy) */
.acc-card.done .acc-title{font-weight:600;opacity:.94;}
.acc-card.done .k{opacity:.85;}
.acc-card.done .chip{opacity:.92;}

/* New item highlight (confirmation without noisy animations) */
.card.just-added{animation:cardIn .18s ease, justAdded 0.42s ease;}
@keyframes justAdded{
  from{box-shadow:var(--inset1), 0 0 0 1px rgba(34,197,94,.35), 0 18px 45px rgba(0,0,0,.38);}
  to{box-shadow:var(--inset1), var(--shadow1);}
}
.acc-title{font-size:14px; line-height:1.2; padding-left:2px;}
.acc-right{display:flex; align-items:center; gap:10px;}
.acc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(250,204,21,.35);
  background:rgba(250,204,21,.10);
  color:#facc15;
}
.acc-badge svg{width:16px;height:16px}
.acc-chevron{display:inline-flex;align-items:center;justify-content:center; opacity:.9;}
.acc-chevron svg{width:18px;height:18px; transition:transform .18s ease;}
.acc-head[aria-expanded="true"] .acc-chevron svg{transform:rotate(180deg)}

.acc-body{padding:0 12px 12px; border-top:1px solid var(--border);}


@keyframes cardIn{
  from{transform:translateY(6px);opacity:0}
  to{transform:none;opacity:1}
}

.card-title{font-weight:600;margin-bottom:6px}
.card-meta{font-size:13px;color:var(--muted)}

.card-details{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.kv{display:flex;gap:10px;align-items:flex-start}
.k{min-width:84px;color:var(--muted);font-size:12px;line-height:1.2}
.v{flex:1;font-size:13px;line-height:1.25;word-break:break-word}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  font-size:11px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
}

.quick-actions{display:flex;gap:8px;margin-top:10px}
.quick-actions button{
  flex:1;
  border:none;
  padding:8px;
  border-radius:12px;
  background:rgba(51,65,85,.65);
  color:var(--text);
  font-weight:650;
  font-size:12px;
  transition:transform .08s ease, opacity .08s ease;
  border:1px solid rgba(148,163,184,.14);
  box-shadow: var(--inset1), 0 10px 22px rgba(0,0,0,.22);
}
.quick-actions button:active{transform:scale(.97);opacity:.85}

.card-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.card-actions button{
  flex:1;
  border:none;
  padding:8px;
  border-radius:10px;
  transition:transform .08s ease, opacity .08s ease;
  color:var(--text);
}
.card-actions button:active{transform:scale(.96);opacity:.8}

.edit{background:var(--btn)}
.delete{background:var(--danger);color:#fff}


.tool-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.tool-actions button{
  flex:1;
  min-width:140px;
}

.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  display:flex;
  gap:0;
  background:rgba(2,6,23,.86);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  z-index:30;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
}

.nav-btn{
  flex:1;
  height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:8px 0;
  border:none;
  background:transparent;
  color:var(--muted);
  border-radius:0;
  font-size:11px;
  font-weight:650;
  letter-spacing:.2px;
  overflow:hidden;
  transition:transform .08s ease, color .15s ease;
}
.nav-btn:active{transform:scale(.98)}
.nav-ico{position:relative;top:3px;transition:top .25s ease-out, transform .2s ease-out;font-size:1rem;}
.nav-ico svg{width:22px;height:22px;display:block}
.nav-label{line-height:1;height:12px;opacity:0;transform:translateY(14px);transition:transform .2s ease-out, opacity .25s ease-out;font-size:10px;}

.nav-btn.active{color:var(--text);}

.nav-btn.active .nav-label{
  opacity:1;
  transform:translateY(0);
}

.nav-btn.active .nav-ico{
  top:-4px;
}


.screen{display:none}
.screen.active{display:block}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.modal.hidden{display:none}

.modal-content{
  background:var(--surface);
  border-radius:18px;
  box-shadow: var(--shadow2);
  width:92%;
  max-height:min(92vh, 720px);
  overflow:auto;
  padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  animation:modalUp .2s ease;
  border:1px solid var(--border);
}

.modal-open .bottom-nav{display:none}

.input-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.input-row input,.input-row select,.input-row textarea{margin-bottom:0}
.now-btn{
  border:none;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(34,197,94,.14);
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
}
.now-btn:active{transform:scale(.98);opacity:.9}

@keyframes modalUp{
  from{transform:translateY(20px);opacity:0}
  to{transform:none;opacity:1}
}

.modal-content label{
  font-size:13px;
  color:var(--muted);
}

.modal-content input,select,textarea{
  width:100%;
  margin-bottom:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}

.modal-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.modal-actions button{
  flex:1;
  padding:10px;
  border-radius:12px;
  border:none;
  background:var(--btn);
  color:var(--text);
}
.modal-actions .primary{background:var(--accent);color:white}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.compact{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}

.hidden{display:none !important}

/* Switch */
.switch{position:relative;display:inline-block;width:46px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;inset:0;
  background:var(--border);
  border-radius:999px;
  transition:.15s ease;
}
.slider:before{
  content:"";
  position:absolute;height:22px;width:22px;left:3px;top:3px;
  background:var(--surface);
  border-radius:50%;
  transition:.15s ease;
  border:1px solid var(--border);
}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(18px)}

.card-details{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
}
.kv{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv .k{font-size:11px;color:var(--muted)}
.kv .v{font-size:13px;color:var(--text);word-break:break-word}
.chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  color:var(--text);
}


.archive{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.archive .card{animation:none}


.brand-shift{color:var(--text)}
.brand-manager{color:var(--accent)}

.search::placeholder{color:rgba(148,163,184,.75)}

input.search:-webkit-autofill{ -webkit-text-fill-color: var(--text); transition: background-color 9999s ease-in-out 0s; }

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:520px){
  .grid-2{grid-template-columns:1fr 1fr;}
}
.panel{
  border:1px solid var(--border);
  background:rgba(2,6,23,.22);
  border-radius:16px;
  padding:10px;
}
.panel-title{font-weight:700;font-size:13px;margin-bottom:6px;color:var(--muted)}
.checklist{display:grid;gap:8px}
.check{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(2,6,23,.18);
  border:1px solid rgba(148,163,184,.12);
}
.check input{width:18px;height:18px}
.card-title.small{font-size:14px}
.space-top{margin-top:10px}

body.compact .card{padding:12px}
body.compact .item{padding:10px}
body.compact .toolbar{gap:8px}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(74px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);
  opacity:0;
  padding:10px 12px;
  border-radius:14px;
  box-shadow: var(--shadow2);
  border:1px solid var(--border);
  background:rgba(2,6,23,.92);
  color:var(--text);
  backdrop-filter:blur(12px);
  z-index:9999;
  transition:opacity .2s ease, transform .2s ease;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(520px, calc(100vw - 24px));
}
.toast-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.95}
.toast-ico svg{width:18px;height:18px}
.toast-msg{line-height:1.25}
.toast-info{border-color:rgba(56,189,248,.35)}
.toast-success{border-color:rgba(34,197,94,.35)}
.toast-warning{border-color:rgba(250,204,21,.35)}
.toast-error{border-color:rgba(244,63,94,.35)}
.toast-warning .toast-ico{color:#facc15}
.toast-success .toast-ico{color:#22c55e}
.toast-error .toast-ico{color:#fb7185}
.toast-info .toast-ico{color:#38bdf8}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.search:focus{border-color:rgba(34,197,94,.65); box-shadow:0 0 0 4px rgba(34,197,94,.12)}


.assist-total{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.35);
  color:var(--text);
  font-weight:700;
}
.assist-total .muted{color:var(--muted);font-weight:600}

.assist-preview{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.35);
  background:rgba(2,6,23,.25);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}

/* ---------- Empty states ---------- */
.empty-state{
  margin:12px;
  padding:18px 14px;
  border:1px dashed var(--border);
  border-radius:18px;
  background:rgba(2,6,23,.22);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.empty-ico{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.06);
  color:rgba(148,163,184,.85);
}

.empty-ico svg{width:22px;height:22px}

.empty-title{font-weight:800;letter-spacing:.2px}
.empty-desc{font-size:13px;color:var(--muted);line-height:1.35}

.empty-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px}

.ghost{
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  transition:transform .08s ease, opacity .08s ease;
}
.ghost:active{transform:scale(0.97);opacity:.85}


/* ==============================
   UX polish: validation + iOS safe-area + sheets
   ============================== */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow1: 0 10px 30px rgba(0,0,0,.28);
  --shadow2: 0 18px 60px rgba(0,0,0,.45);
  --inset1: inset 0 1px 0 rgba(255,255,255,.06);
}

.bottom-nav{
  /* Keep the bar visually fixed-height. Safe-area is handled via bottom offset above,
     so we must NOT add extra inner padding here (it makes the bar look taller in iOS PWA). */
  padding-bottom: 6px;
}

.screen{
  padding-bottom: calc(84px + var(--safe-bottom));
}

button[disabled],
button:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.primary:disabled{
  filter: grayscale(0.1);
}

.field-error{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #ef4444;
  display: none;
}

.field-error.show{
  display: block;
}

.linklike{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Bottom sheet (About) */
.sheet{
  position: fixed;
  inset: 0;
  z-index: 80;
}
.sheet.hidden{ display:none; }

.sheet-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.sheet-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--card, #0b1220);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  padding: 10px 16px calc(16px + var(--safe-bottom));
  max-height: 80vh;
  overflow:auto;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.sheet.show .sheet-panel{
  transform: translateY(0);
  opacity: 1;
}

.sheet-handle{
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 6px auto 10px;
}

.sheet-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sheet-title{
  font-size: 18px;
  font-weight: 700;
}

.sheet-subtitle{
  font-size: 13px;
  opacity: .75;
  margin-top: 2px;
}

.sheet-close{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px 10px;
}

.sheet-section{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  margin-top: 12px;
}

.sheet-text{
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0;
}

.sheet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}

.sheet-k{
  font-size: 13px;
  opacity: .72;
}

.sheet-v{
  font-size: 14px;
  font-weight: 600;
}

.sheet-link{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
}

.sheet-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 14px;
}

.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

@media (prefers-reduced-motion: reduce){
  .sheet-panel{ transition:none; }
}



/* ===== Micro animations ===== */
@media (prefers-reduced-motion: no-preference){
  .screen.active{animation:screenEnter .16s ease-out}
  .card{animation:cardEnter .14s ease-out}
  .toast.show{animation:toastIn .16s ease-out}
  .sheet{transition:transform .18s ease-out, opacity .18s ease-out}
}
@keyframes screenEnter{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes cardEnter{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes toastIn{
  from{opacity:0; transform:translateX(-50%) translateY(14px)}
  to{opacity:1; transform:translateX(-50%) translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .screen.active,.card,.toast.show{animation:none!important}
  .sheet{transition:none!important}
}

/* Hotfix 3.1.5: spacing between actions and data card in Tools */
#screen-settings .card-actions + .card {
  margin-top: 16px;
}

/* ==============================
   Initial splash (PWA start)
   ============================== */
#app-splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 180ms ease;
}

#app-splash.hide{
  opacity: 0;
  pointer-events: none;
}

.splash-wrap{
  text-align: center;
  padding: 24px;
}

.splash-logo{
  font-size: 28px;
  font-weight: 750;
  letter-spacing: 0.2px;
  line-height: 1.15;
}

.splash-manager{
  color: var(--accent);
}

.splash-console{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  letter-spacing: 0.1px;
}

.splash-spin{
  width: 1ch;
  text-align: center;
  color: #fff;
  opacity: 0.95;
}