/* Extracted child-card styles from /styles/compat/legacy.css */ /* ===== Edit arrows overlay ===== */ .child-card { position: relative; } .child-card-wrap { position: relative; } .child-card .choose-photo-btn { display: none; } .child-card .choose-photo-btn button { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.95; backdrop-filter: blur(6px); transition: opacity .2s ease, transform .2s ease; } .child-card .choose-photo-btn button:hover { opacity: 1; transform: translateX(-50%) scale(1.05); } /* Показать кнопку при активном режиме правки */ .edit-mode .child-card .choose-photo-btn { display: block !important; } /* Show button when picker has edit-mode class */ #child-picker.edit-mode .child-card-wrap .choose-photo-btn { display: block !important; z-index: 20; /* above the thumbnail */ pointer-events: auto; } /* Public forms — child cards (square thumbnails) */ .child-card{ display:block; position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--bs-card-border-color, #e5e7eb); text-decoration: none; background: var(--surface-soft, #f5f6f7); } .child-card, .child-card:link, .child-card:visited, .child-card:hover, .child-card:active { text-decoration: none; } /* Thumbnail area — keep square (uses CSS aspect-ratio when available) */ .child-thumb{ width:100%; aspect-ratio:1/1; background:var(--surface-2); position:relative; overflow:hidden; } /* Fallback for browsers without aspect-ratio support: add .no-aspect-ratio to via JS if needed */ .no-aspect-ratio .child-thumb{ height:0; padding-top:100%; } .child-thumb .child-img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; background:var(--surface-2); } .child-card .child-meta{ padding:.5rem .6rem; } /* State indicator (small circle) placed to the left of the name (NOTE: generic .state-indicator kept in legacy for wider use) */ .child-meta{ display:flex; align-items:center; gap:.5rem; } /* Reintroduce state-indicator visuals using theme tokens taken from the status legend (uses Bootstrap-ish tokens so colors remain consistent site-wide) */ .state-indicator{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,0.06); flex:0 0 auto; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* statebar overlay positioned within thumb (deprecated) */ .child-thumb .statebar{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.5); color:var(--surface); padding:.25rem .5rem; border-radius:6px; font-size:0.85rem; } /* small responsive tweak to tighten spacing on narrow screens */ @media (max-width: 575.98px){ .child-card .child-meta{ padding:.4rem .5rem; } .child-thumb .statebar{ font-size:0.75rem; padding:.2rem .4rem; } } /* Selected state */ .child-card.is-selected { outline: 2px solid var(--primary); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.35); } #child-picker-controls.filters {background-color: var(--fx-bg); } #child-picker-controls .oa-status-chip.is-active { background-color: rgba(var(--bs-secondary-rgb), 0.12); border-color: rgba(var(--bs-secondary-rgb), 0.9); } #child-picker-controls .oa-status-chip:not(.is-active) { opacity: 0.6; } .state-indicator{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,0.06); flex:0 0 auto; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* Use theme tokens so legend and indicators keep the same colors site-wide */ .state-indicator.state-done{ background-color: rgba(var(--bs-success-rgb), 1); border-color: rgba(var(--bs-success-rgb), 0.9); } .state-indicator.state-prog{ background-color: rgba(var(--bs-warning-rgb), 1); border-color: rgba(var(--bs-warning-rgb), 0.9); } .state-indicator.state-new{ background-color: rgba(var(--bs-secondary-rgb), 1); border-color: rgba(var(--bs-secondary-rgb), 0.9); }