/* * Стили inline-редактора контента (CMS). * ВАЖНО: ничего из этого не влияет на обычных посетителей. * Все правила действуют только когда на стоит класс .cms-editing * (режим редактирования), либо относятся к оверлею логина/панели, * которые рендерятся только под админом. Подсветка — через outline/box-shadow, * без border/padding/margin, чтобы не было сдвигов вёрстки. */ /* Подсветка редактируемых элементов только в режиме редактирования */ body.cms-editing [data-cms] { outline: 1px dashed rgba(79, 70, 229, 0.5); outline-offset: 2px; cursor: text; border-radius: 2px; transition: outline-color 0.15s ease, box-shadow 0.15s ease; } body.cms-editing [data-cms]:hover { outline: 1px dashed rgba(79, 70, 229, 0.9); } body.cms-editing [data-cms]:focus { outline: 2px solid #4F46E5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); } body.cms-editing [data-cms].cms-dirty { outline-color: #10B981; } /* Подсветка управляемых через popup ссылок шапки/футера */ body.cms-editing [data-cms-link], body.cms-editing [data-cms-href] { outline: 1px dashed rgba(79, 70, 229, 0.4); outline-offset: 2px; border-radius: 2px; } body.cms-editing [data-cms-link].cms-dirty, body.cms-editing [data-cms-href].cms-dirty { outline: 1px dashed #10B981; } /* Кнопка-шестерёнка (показывается только в режиме редактирования) */ .cms-gear { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1A1D23; color: #fff; border: none; border-radius: 10px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); z-index: 99999; } .cms-gear:hover { background: #2c2f37; } .cms-gear--header { position: fixed; top: 12px; right: 12px; } .cms-gear--footer { position: absolute; top: 16px; right: 16px; } /* Футер получает relative только в режиме правки — без смещений, без сдвига вёрстки */ body.cms-editing .footer { position: relative; } /* Широкий popup с группами полей */ .cms-modal__box--wide { max-width: 440px; max-height: 85vh; overflow-y: auto; } .cms-group { margin-bottom: 18px; } .cms-group__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6B7280; margin-bottom: 8px; } .cms-row { display: flex; gap: 8px; margin-bottom: 8px; } .cms-row .cms-modal__field { margin-bottom: 0; } /* Плавающая панель управления (fixed — вне потока вёрстки) */ .cms-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1A1D23; color: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; } .cms-bar__status { opacity: 0.8; min-width: 60px; } .cms-bar__btn { appearance: none; border: none; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } .cms-bar__btn--save { background: #4F46E5; color: #fff; } .cms-bar__btn--save:hover { background: #4338CA; } .cms-bar__btn--save:disabled { opacity: 0.5; cursor: default; } .cms-bar__btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; } .cms-bar__btn--ghost:hover { background: rgba(255, 255, 255, 0.22); } /* Оверлей логина */ .cms-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 16px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .cms-modal__box { background: #fff; color: #1A1D23; width: 100%; max-width: 360px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .cms-modal__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; } .cms-modal__field { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #E2E4E9; border-radius: 8px; font-size: 15px; font-family: inherit; } .cms-modal__field:focus { outline: none; border-color: #4F46E5; } .cms-modal__error { color: #DC2626; font-size: 13px; min-height: 18px; margin: 0 0 8px; } .cms-modal__actions { display: flex; gap: 8px; justify-content: flex-end; } /* Богатый HTML-контент: подсветка области правки */ body.cms-editing [data-cms-html] { outline: 1px dashed rgba(79, 70, 229, 0.5); outline-offset: 4px; cursor: text; border-radius: 4px; transition: outline-color 0.15s ease, box-shadow 0.15s ease; } body.cms-editing [data-cms-html]:hover { outline-color: rgba(79, 70, 229, 0.9); } body.cms-editing [data-cms-html]:focus { outline: 2px solid #4F46E5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); } body.cms-editing [data-cms-html].cms-dirty { outline-color: #10B981; } /* TinyMCE рендерит свой плавающий тулбар в .tox-tinymce-aux — держим поверх всего */ .tox-tinymce-aux { z-index: 100002 !important; }