Выпущен 0.1.3: UX convenience pack, unwrap/admin polish и cache-bust статики.
Добавлены Share/QR PNG, zip all, size meter, PWA-manifest, системная тема и haptic на copy; улучшены success/unwrap и статистика админки (EN/RU).
This commit is contained in:
Sergey Antropoff
+414
-10
@@ -113,6 +113,7 @@ html[data-theme="light"] body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 0.75rem;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
@@ -262,6 +263,14 @@ html[data-theme="dark"] .icon-btn:hover {
|
||||
.result-panel > .success-callout {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.result-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.result-panel > .success-trust {
|
||||
margin: 0;
|
||||
}
|
||||
.success-panel {
|
||||
justify-items: stretch;
|
||||
text-align: left;
|
||||
@@ -273,6 +282,149 @@ html[data-theme="dark"] .icon-btn:hover {
|
||||
.success-panel > .btn.ghost {
|
||||
justify-self: center;
|
||||
}
|
||||
.success-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 1.25rem 1.5rem;
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
.success-main {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.success-main > label {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.success-password-block {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.success-password-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(61, 214, 198, 0.35);
|
||||
background: rgba(61, 214, 198, 0.1);
|
||||
color: var(--accent-2);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
.success-password-hint {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.success-checklist {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.success-checklist li {
|
||||
position: relative;
|
||||
padding-left: 1.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.success-checklist li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.35rem;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 2px;
|
||||
border: 1.5px solid var(--accent-2);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.success-trust {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.success-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.success-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
}
|
||||
.size-meter {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.size-meter.is-warn {
|
||||
color: #e8a838;
|
||||
}
|
||||
.size-meter.is-over {
|
||||
color: var(--danger);
|
||||
}
|
||||
.success-qr {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--panel);
|
||||
min-width: 0;
|
||||
}
|
||||
.share-qr {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.share-qr img,
|
||||
.share-qr canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.success-qr-hint {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
max-width: 11rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.success-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.success-qr {
|
||||
order: -1;
|
||||
justify-self: center;
|
||||
width: min(100%, 280px);
|
||||
}
|
||||
.share-qr {
|
||||
width: min(220px, 70vw);
|
||||
height: min(220px, 70vw);
|
||||
}
|
||||
.copy-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.copy-row .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.success-callout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -441,12 +593,28 @@ input, select, textarea, .code-input {
|
||||
}
|
||||
.lang-modal-panel {
|
||||
width: min(480px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lang-modal-panel .modal-title,
|
||||
.lang-modal-panel .modal-message,
|
||||
.lang-modal-panel .modal-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lang-modal-panel .modal-message {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.lang-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.85rem;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.lang-grid { grid-template-columns: 1fr; }
|
||||
@@ -947,6 +1115,110 @@ html[data-theme="light"] .about-version {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.item-card img,
|
||||
.item-preview-img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-top: 0.65rem;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.item-preview-hint {
|
||||
margin: 0.4rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.unwrap-state {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.75rem;
|
||||
text-align: center;
|
||||
padding: 1.5rem 0.5rem 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.unwrap-state.hidden {
|
||||
display: none;
|
||||
}
|
||||
.unwrap-state-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(110, 168, 255, 0.25);
|
||||
background: linear-gradient(160deg, rgba(110, 168, 255, 0.14), rgba(13, 20, 32, 0.35));
|
||||
color: var(--accent-2);
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
html[data-theme="light"] .unwrap-state-icon {
|
||||
background: linear-gradient(160deg, rgba(47, 111, 237, 0.12), rgba(255, 255, 255, 0.9));
|
||||
}
|
||||
.unwrap-state h2 {
|
||||
margin: 0;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 650;
|
||||
max-width: 22rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.unwrap-state .lede {
|
||||
margin: 0;
|
||||
max-width: 28rem;
|
||||
}
|
||||
.unwrap-state .btn {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.image-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: max(0.75rem, env(safe-area-inset-top, 0px))
|
||||
max(0.75rem, env(safe-area-inset-right, 0px))
|
||||
max(0.75rem, env(safe-area-inset-bottom, 0px))
|
||||
max(0.75rem, env(safe-area-inset-left, 0px));
|
||||
background: rgba(6, 10, 18, 0.88);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.image-lightbox.hidden {
|
||||
display: none;
|
||||
}
|
||||
.image-lightbox-close {
|
||||
justify-self: end;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
background: rgba(20, 28, 42, 0.7);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.image-lightbox img {
|
||||
max-width: min(100%, 960px);
|
||||
max-height: min(78dvh, 78vh);
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
cursor: default;
|
||||
}
|
||||
.image-lightbox-caption {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
max-width: 90vw;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
@@ -1000,11 +1272,6 @@ html[data-theme="light"] .item-card pre,
|
||||
html[data-theme="light"] .item-card .item-text-pre {
|
||||
background: rgba(16, 32, 56, 0.05);
|
||||
}
|
||||
.item-card img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
/* Admin */
|
||||
.admin-body { min-height: 100vh; }
|
||||
@@ -1074,6 +1341,15 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.admin-top-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.admin-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
.admin-top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1099,6 +1375,10 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.admin-nav-logout-form {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
.admin-nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1142,6 +1422,113 @@ html[data-theme="light"] .item-card .item-text-pre {
|
||||
html[data-theme="light"] .admin-nav {
|
||||
box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.admin-top {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"brand tools"
|
||||
"nav nav";
|
||||
align-items: center;
|
||||
gap: 0.55rem 0.65rem;
|
||||
padding: 0.7rem 0.65rem;
|
||||
}
|
||||
.admin-top > .brand {
|
||||
grid-area: brand;
|
||||
min-width: 0;
|
||||
}
|
||||
.admin-top-tools {
|
||||
grid-area: tools;
|
||||
}
|
||||
.admin-top .brand-tagline {
|
||||
max-width: 42vw;
|
||||
}
|
||||
.admin-nav-toggle {
|
||||
display: grid;
|
||||
}
|
||||
.admin-nav {
|
||||
grid-area: nav;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
max-height: min(70dvh, 28rem);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.4rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.admin-top.is-nav-open .admin-nav {
|
||||
display: flex;
|
||||
}
|
||||
.admin-nav-link {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.admin-nav-logout-form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.admin-nav-logout-form .admin-nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
.admin-shell {
|
||||
padding: 0 0.65rem 2rem;
|
||||
}
|
||||
.admin-shell > h1 {
|
||||
font-size: 1.35rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.admin-tablist {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.admin-tab {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.admin-tabpanel {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
.audit-filters {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
.audit-field,
|
||||
.audit-field-grow {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.audit-filter-btn {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 42px;
|
||||
}
|
||||
.audit-table {
|
||||
min-width: 720px;
|
||||
}
|
||||
.admin-login-toggles {
|
||||
top: max(0.75rem, env(safe-area-inset-top, 0px));
|
||||
right: max(0.75rem, env(safe-area-inset-right, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 861px) {
|
||||
.admin-top > .brand {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.admin-nav {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.danger-page {
|
||||
max-width: 520px;
|
||||
}
|
||||
@@ -1262,12 +1649,9 @@ html[data-theme="light"] .admin-nav {
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -1643,6 +2027,11 @@ body.modal-open {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
/* iOS: безопасные отступы от notch / home indicator */
|
||||
padding: max(0.75rem, env(safe-area-inset-top, 0px))
|
||||
max(0.75rem, env(safe-area-inset-right, 0px))
|
||||
max(0.75rem, env(safe-area-inset-bottom, 0px))
|
||||
max(0.75rem, env(safe-area-inset-left, 0px));
|
||||
}
|
||||
.modal-root.hidden {
|
||||
display: none;
|
||||
@@ -1659,6 +2048,10 @@ html[data-theme="light"] .modal-backdrop {
|
||||
.modal-panel {
|
||||
position: relative;
|
||||
width: min(420px, 100%);
|
||||
max-height: calc(100vh - 1.5rem);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
@@ -1666,6 +2059,17 @@ html[data-theme="light"] .modal-backdrop {
|
||||
padding: 1.35rem 1.4rem 1.25rem;
|
||||
animation: modal-in 0.18s ease-out;
|
||||
}
|
||||
@supports (height: 100dvh) {
|
||||
.modal-panel {
|
||||
max-height: calc(100dvh - 1.5rem);
|
||||
}
|
||||
}
|
||||
/* Список языков: скролл внутри сетки, заголовок и Cancel остаются на экране */
|
||||
.modal-panel.lang-modal-panel {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@keyframes modal-in {
|
||||
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
||||
to { opacity: 1; transform: none; }
|
||||
|
||||
Reference in New Issue
Block a user