.post-format-badge {
@apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}
.post-format-standard .post-format-badge {
@apply bg-gray-100 text-gray-800;
}
.post-format-aside .post-format-badge {
@apply bg-blue-100 text-blue-800;
}
.post-format-gallery .post-format-badge {
@apply bg-purple-100 text-purple-800;
}
.post-format-image .post-format-badge {
@apply bg-green-100 text-green-800;
}
.post-format-video .post-format-badge {
@apply bg-red-100 text-red-800;
}
.post-format-audio .post-format-badge {
@apply bg-yellow-100 text-yellow-800;
}
.post-format-quote .post-format-badge {
@apply bg-indigo-100 text-indigo-800;
}
.post-format-link .post-format-badge {
@apply bg-teal-100 text-teal-800;
}
.post-format-status .post-format-badge {
@apply bg-pink-100 text-pink-800;
}
.post-format-chat .post-format-badge {
@apply bg-orange-100 text-orange-800;
} .post-format-gallery .gallery-grid {
@apply grid gap-2 rounded-lg overflow-hidden;
padding: 8px;
}
.post-format-gallery .gallery-grid.grid-1 {
@apply grid-cols-1;
}
.post-format-gallery .gallery-grid.grid-2 {
@apply grid-cols-2;
}
.post-format-gallery .gallery-grid.grid-3 {
@apply grid-cols-3;
}
.post-format-gallery .gallery-grid.grid-4 {
@apply grid-cols-2 grid-rows-2;
}
.post-format-gallery .gallery-item {
@apply relative overflow-hidden rounded-lg bg-gray-100;
margin: 4px;
}
.post-format-gallery .gallery-item img {
@apply w-full h-full object-cover transition-transform duration-300 hover:scale-105;
border-radius: 12px;
}
.post-format-gallery .gallery-item.main-image {
@apply col-span-2 row-span-2;
}
.post-format-gallery .gallery-overlay {
@apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center;
}
.post-format-gallery .gallery-count {
@apply bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity;
} .post-format-image .featured-image {
@apply relative overflow-hidden rounded-xl;
}
.post-format-image .featured-image img {
@apply w-full h-auto;
border-radius: 12px;
}
.post-format-image .image-overlay {
@apply absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300;
} .post-format-video .video-container {
@apply relative bg-black rounded-xl overflow-hidden;
}
.post-format-video .video-thumbnail {
@apply relative;
}
.post-format-video .video-thumbnail img {
@apply w-full h-auto;
}
.post-format-video .play-button {
@apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 hover:bg-opacity-50 transition-all duration-300;
}
.post-format-video .play-icon {
@apply w-16 h-16 bg-white bg-opacity-90 rounded-full flex items-center justify-center text-gray-800 hover:bg-opacity-100 transition-all;
} .post-format-audio .audio-player {
@apply bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-6 text-white;
}
.post-format-audio .audio-controls {
@apply flex items-center space-x-4;
}
.post-format-audio .play-pause-btn {
@apply w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition-all;
}
.post-format-audio .audio-info {
@apply flex-1;
}
.post-format-audio .audio-title {
@apply font-semibold text-lg;
}
.post-format-audio .audio-duration {
@apply text-sm opacity-80;
} .post-format-quote .quote-container {
@apply bg-gradient-to-br from-indigo-50 to-purple-50 border-l-4 border-indigo-500 rounded-r-xl p-6 my-4;
}
.post-format-quote .quote-text {
@apply text-xl font-medium text-gray-800 italic leading-relaxed mb-4;
}
.post-format-quote .quote-author {
@apply text-sm text-gray-600 font-semibold;
}
.post-format-quote .quote-author::before {
content: "— ";
} .post-format-link .link-preview {
@apply border border-gray-200 rounded-xl overflow-hidden hover:shadow-md transition-shadow;
}
.post-format-link .link-header {
@apply bg-teal-50 px-4 py-3 border-b border-gray-200;
}
.post-format-link .link-url {
@apply text-sm text-teal-600 font-medium;
}
.post-format-link .link-content {
@apply p-4;
}
.post-format-link .link-title {
@apply font-semibold text-gray-900 mb-2;
}
.post-format-link .link-description {
@apply text-gray-600 text-sm;
} .post-format-status .status-container {
@apply bg-pink-50 border border-pink-200 rounded-xl p-4;
}
.post-format-status .status-text {
@apply text-gray-800 leading-relaxed;
}
.post-format-status .status-meta {
@apply flex items-center justify-between mt-3 pt-3 border-t border-pink-200 text-sm text-gray-500;
} .post-format-chat .chat-container {
@apply bg-gray-50 rounded-xl p-4 space-y-3;
}
.post-format-chat .chat-message {
@apply flex items-start space-x-3;
}
.post-format-chat .chat-message.own {
@apply flex-row-reverse space-x-reverse;
}
.post-format-chat .chat-avatar {
@apply w-8 h-8 rounded-full bg-gray-300 flex-shrink-0;
}
.post-format-chat .chat-bubble {
@apply bg-white rounded-lg px-3 py-2 max-w-xs;
}
.post-format-chat .chat-message.own .chat-bubble {
@apply bg-blue-500 text-white;
}
.post-format-chat .chat-author {
@apply text-xs font-medium text-gray-500 mb-1;
}
.post-format-chat .chat-text {
@apply text-sm;
} .post-format-aside .aside-container {
@apply bg-blue-50 border-l-4 border-blue-500 rounded-r-xl p-4;
}
.post-format-aside .aside-text {
@apply text-gray-700 leading-relaxed;
} .post-format-icon {
@apply w-4 h-4 mr-1;
} @media (max-width: 640px) {
.post-format-gallery .gallery-grid.grid-3 {
@apply grid-cols-2;
}
.post-format-gallery .gallery-grid.grid-4 {
@apply grid-cols-2;
}
.post-format-quote .quote-text {
@apply text-lg;
}
.post-format-video .play-icon {
@apply w-12 h-12;
}
}