add styles/embedded-content.css

2026-03-14 18:24:11 +03:00
parent 490ad60f7c
commit fc74e274e5
1 changed files with 108 additions and 0 deletions
--- a/src/styles/embedded-content.css
+++ 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;
+}