diff --git a/src/styles/embedded-content.css b/src/styles/embedded-content.css new file mode 100644 index 0000000..3e6456e --- /dev/null +++ b/src/styles/embedded-content.css @@ -0,0 +1,108 @@ +/* Добавьте это в ваш общий CSS файл */ + +/* Анимация загрузки */ +@keyframes embedded-loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.embedded-loading { + padding: 20px; + text-align: center; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: embedded-loading 1.5s infinite; + border-radius: 12px; + color: #666; + font-size: 14px; + border: 1px solid #eaeaea; +} + +/* Ошибка */ +.embedded-error { + padding: 20px; + text-align: center; + background: #fff3f3; + border-radius: 12px; + color: #d32f2f; + border: 1px solid #ffcdd2; + font-size: 14px; +} + +.embedded-error-icon { + font-size: 24px; + margin-bottom: 8px; +} + +.embedded-error-hint { + margin-top: 8px; + font-size: 12px; + color: #999; +} + +/* Карточка поста */ +.embedded-post-card { + margin: 8px 0 8px 8px; + max-width: 267px; + background: #ececec; + float: right; + border-top: 6px solid #000; /* Жирный черный border только сверху */ + border-bottom: 1px solid #000; + border-left: none; + border-right: none; + line-height: 1.5; + font-family: Roboto, sans-serif; + padding: 1.2rem 0 1.1875rem; + width: 100%; +} + +.embedded-post-card a { + display: block; + text-decoration: none; + color: inherit; +} + +.embedded-post-image-container { + width: 100%; + max-height: 200px; + overflow: hidden; + background: #f5f5f5; + margin: 1.1875rem 0 1rem 0; /* Отступ сверху и снизу от фото */ +} + +.embedded-post-image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.embedded-post-content { + padding: 0 1.1875rem; +} + +.embedded-post-title { + margin: 0; + font-size: 18px; + font-weight: 600; + color: #1a1a1a; + line-height: 1.4; + font-family: Roboto, sans-serif; +} + +/* Медиа-запрос для мобильных устройств */ +@media (max-width: 768px) { + .embedded-post-card { + float: none; + max-width: 100%; + margin: 20px 0; + width: 100%; + } +} + +/* Если нужно больше отступа для текста при обтекании */ +.clearfix::after { + content: ""; + clear: both; + display: table; +} \ No newline at end of file