|
|
| خط ۷٬۴۲۷: |
خط ۷٬۴۲۷: |
| } | | } |
|
| |
|
| }
| |
| /* کانتینر اصلی */
| |
| .category-grid {
| |
| display: grid;
| |
| gap: 10px;
| |
| margin: 15px auto;
| |
| max-width: 800px;
| |
| padding: 5px;
| |
| /* این خط باعث میشود در همه حالتها پایه روی 2 ستون باشد */
| |
| grid-template-columns: repeat(2, 1fr);
| |
| }
| |
|
| |
| /* در دسکتاپ (صفحههای بزرگتر از 769 پیکسل) تبدیل به 4 ستون میشود */
| |
| @media (min-width: 769px) {
| |
| .category-grid {
| |
| grid-template-columns: repeat(4, 1fr);
| |
| }
| |
| }
| |
|
| |
| /* استایل باکسها */
| |
| .category-card {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| height: 45px;
| |
| padding: 5px 10px;
| |
| border-radius: 8px;
| |
| text-decoration: none !important;
| |
| transition: transform 0.2s ease;
| |
| box-shadow: 0 2px 4px rgba(0,0,0,0.08);
| |
| font-weight: 600;
| |
| font-size: 0.85em;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .category-card:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
|
| |
| /* کانتینر اصلی - وسطچین و محدود شده */
| |
| .social-section-container {
| |
| width: 100%;
| |
| display: flex;
| |
| justify-content: center;
| |
| margin: 20px 0;
| |
| }
| |
|
| |
| /* نگهدارنده آیکونها - برای جلوگیری از پخش شدن در کل صفحه */
| |
| .social-icons-wrapper {
| |
| display: flex;
| |
| flex-direction: row;
| |
| gap: 15px; /* فاصله بین آیکونها */
| |
| padding: 10px;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| /* استایل لینکها */
| |
| .social-link-item {
| |
| display: inline-block;
| |
| text-decoration: none !important;
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
| /* استایل تصاویر آیکون - اندازه دقیق در اینجا تعیین میشود */
| |
| .social-link-item img {
| |
| width: 35px !important; /* اندازه آیکونها (میتوانی با تغییر این عدد اندازه را کم یا زیاد کنی) */
| |
| height: 35px !important;
| |
| display: block;
| |
| border-radius: 4px; /* اگر میخواهی گوشهها کمی گرد باشد */
| |
| }
| |
|
| |
| /* افکت هاور برای زیبایی */
| |
| .social-link-item:hover {
| |
| transform: scale(1.15); /* کمی بزرگ شدن هنگام نگه داشتن موس */
| |
| }
| |
|
| |
|
| |
|
| |
| /* کانتینر اصلی برای جلوگیری از هرگونه تداخل */
| |
| .fgb-social-container {
| |
| display: flex !important;
| |
| justify-content: center !important;
| |
| align-items: center !important;
| |
| width: 100% !important;
| |
| margin: 10px 0 !important;
| |
| clear: both !important; /* برای جلوگیری از تداخل با فلوتهای سایت */
| |
| }
| |
|
| |
| .fgb-social-box {
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| gap: 15px !important;
| |
| justify-content: center !important;
| |
| align-items: center !important;
| |
| }
| |
|
| |
| .fgb-social-icon {
| |
| display: inline-block !important;
| |
| width: 35px !important; /* اندازه ثابت */
| |
| height: 35px !important; /* اندازه ثابت */
| |
| text-decoration: none !important;
| |
| transition: transform 0.2s ease !important;
| |
| }
| |
|
| |
| .fgb-social-icon img {
| |
| width: 35px !important; /* اجبار به اندازه ۳۵ پیکسل */
| |
| height: 35px !important; /* اجبار به اندازه ۳۵ پیکسل */
| |
| max-width: 35px !important; /* جلوگیری از بزرگ شدن توسط دستورات سایت */
| |
| min-width: 35px !important; /* جلوگیری از کوچک شدن */
| |
| display: block !important;
| |
| object-fit: contain !important;
| |
| }
| |
|
| |
| .fgb-social-icon:hover {
| |
| transform: scale(1.2) !important;
| |
| }
| |
|
| |
|
| |
| /* پس زمینه تکرار شونده*/
| |
|
| |
|
| |
| .vertical-pattern {
| |
| background-image: url("https://dl.faraghaib.ir/m/260022/26002222.jpg");
| |
| background-repeat: repeat-y;
| |
| background-position: top center;
| |
| background-size: auto;
| |
| background-color: #ffffff;
| |
|
| |
| min-height: 100vh;
| |
| width: 100%;
| |
| padding: 20px;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* کانتینر کلی فید */
| |
| .ig-feed {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
| |
| gap: 20px;
| |
| padding: 20px;
| |
| max-width: 1000px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* کارت هر پست */
| |
| .ig-card {
| |
| background: #fff;
| |
| border: 1px solid #dbdbdb;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| transition: transform 0.2s;
| |
| }
| |
|
| |
| .ig-card:hover {
| |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1);
| |
| }
| |
|
| |
| /* بخش ویدیو */
| |
| .ig-media {
| |
| background: #000;
| |
| aspect-ratio: 9/16; /* نسبت ابعاد اینستاگرام */
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
|
| |
| .ig-media video {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| }
| |
|
| |
| /* متن و کپشن */
| |
| .ig-body {
| |
| padding: 15px;
| |
| }
| |
|
| |
| .ig-user {
| |
| font-weight: 700;
| |
| font-size: 14px;
| |
| margin-bottom: 8px;
| |
| color: #262626;
| |
| }
| |
|
| |
| .ig-caption {
| |
| font-size: 13px;
| |
| color: #555;
| |
| line-height: 1.4;
| |
| } | | } |