File manager - Edit - /home/monara/public_html/swarnawahini_web/css/custom.css
Back
/* Reset and base styles */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } body { font-family: 'Poppins', sans-serif; padding: 0; padding-top: 90px; background: none !important; /* remove old fixed background */ position: relative; z-index: 0; } /* Create fixed background layer */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("../Uploads/bg.jpg") no-repeat center center; background-size: cover; z-index: -1; /* push behind content */ } .teledrama-container .col { padding: 0; } .teledrama-container .row { gap: 0; } .teledrama-container .card { margin-bottom: 15px; } .container.ts { margin: 40px auto 20px !important; } .split-right { padding: unset !important; } .swiper-container { margin: 20px auto !important; } .facebook-feed { height: -webkit-fill-available !important; } /* Existing styles */ .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .glass-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* Navbar (unchanged) */ .navbar.navbar-expand-lg.navbar-light { background: rgba(0, 25, 118, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 20px; padding: 1rem 1.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); position: fixed; top: 10px; left: 10px; right: 10px; width: calc(100% - 20px); z-index: 1000; overflow: hidden; } .navbar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); pointer-events: none; } .navbar-brand img { height: 50px; max-width: 100%; } .nav-item .nav-link { color: #fdc206; font-size: 18px; margin-right: 20px; transition: color 0.3s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .nav-item .nav-link:hover { color: #ffffff; } .nav-item .live-button { display: inline-flex; align-items: center; background-color: #FFC107; color: #1A237E; padding: 5px 10px; border-radius: 15px; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease; margin-top: 7px; animation: pulse 1.5s infinite; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .nav-item .live-button:hover { background-color: #ff0000; color: #1A237E; text-decoration: none; } .nav-item .live-button .live-circle { display: inline-block; width: 10px; height: 10px; background-color: #1A237E; border-radius: 50%; margin-right: 5px; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Universal margin/padding for mobile devices */ @media (max-width: 767px) { .container, .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } /* Ensure major sections have consistent spacing */ .special-program-banner, .special-program-slider, .teledrama-list, .banner-slider { /* margin-left: 10px !important; margin-right: 10px !important; */ } /* Adjust elements that might still be edge-to-edge */ body { padding-left: 10px !important; padding-right: 10px !important; padding-top: 80px !important; /* Account for fixed navbar height */ } /* Ensure Swiper navigation buttons don’t overlap content */ .swiper-button-next, .swiper-button-prev { right: 10px; left: auto; } .swiper-button-prev { left: 10px; right: auto; } /* Navbar mobile menu styling */ .navbar-collapse { background: rgba(0, 25, 118, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 15px; padding: 15px; margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .navbar-nav { text-align: center; } .nav-item { margin: 10px 0; } .nav-item .nav-link { font-size: 1.2rem; margin-right: 0; /* Remove horizontal margin in mobile view */ } .nav-item .live-button { justify-content: center; margin-top: 0; } /* Adjust navbar padding on mobile */ .navbar.navbar-expand-lg.navbar-light { padding: 0.5rem 1rem; border-radius: 15px; } } /* Cards */ .card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 6px 5px #000000; } .card-img-top { border-top-left-radius: 20px; border-top-right-radius: 20px; width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 15px; color: #ffffff; } .card-text { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; color: #ecf0f1; margin-bottom: 15px; } .btn.btn-primary { display: inline-flex; align-items: center; background-color: #FFC107; color: #1A237E; padding: 8px 15px; border-radius: 15px; font-family: 'Poppins', sans-serif; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; border: none; } .btn.btn-primary:hover { background-color: #ff0000; color: #1A237E; transform: scale(1.05); text-decoration: none; } /* Pagination */ .pagination .page-link { color: #1A237E; background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 25, 118, 0.2); transition: background-color 0.3s ease; } .pagination .page-item.active .page-link { background-color: #FFC107; color: #1A237E; border-color: #FFC107; } .pagination .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.5); color: #6c757d; } .pagination .page-link:hover { background-color: #ff0000; color: #ffffff; } /* Container */ .container.ts { padding-bottom: 80px; /* Reduced to clear navbar, adjust as needed */ } /* Page title */ h1.page-title { font-family: 'Poppins', sans-serif; font-weight: 400; color: #FFC107; text-align: left; margin-bottom: 20px; } /* Banner Slider */ /* Banner Slider */ .banner-slider { position: relative; width: 100%; max-width: 1200px; margin: 40px auto 0; border-radius: 20px; overflow: hidden; } .banner-slides { position: relative; width: 100%; height: 450px; /* default height for desktop */ } .banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; } .banner-slide.active { opacity: 1; z-index: 2; } .banner-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; } /* Prev & Next Buttons */ .banner-prev, .banner-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.7); color: #1A237E; border: none; width: 40px; height: 40px; cursor: pointer; font-size: 20px; border-radius: 50%; transition: all 0.3s ease; z-index: 20; } .banner-prev { left: 15px; } .banner-next { right: 15px; } .banner-prev:hover, .banner-next:hover { background: #FFC107; color: #1A237E; } /* Dots Pagination */ .banner-dots { text-align: center; padding: 10px 0; position: relative; z-index: 30; } .banner-dot { display: inline-block; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .banner-dot.active { background: #FFC107; transform: scale(1.2); } .banner-dot:hover { background: #ff0000; } /* Responsive */ /* Banner Slider Wrapper */ .banner-slider-wrapper { display: flex; justify-content: center; /* center horizontally */ width: 100%; } /* Banner Slider */ .banner-slider { position: relative; width: 100%; max-width: 1200px; border-radius: 20px; overflow: hidden; } .banner-slides { position: relative; width: 100%; height: 450px; /* default desktop height */ } .banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; } .banner-slide.active { opacity: 1; z-index: 2; } .banner-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; } /* Prev & Next Buttons */ .banner-prev, .banner-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.7); color: #1A237E; border: none; width: 40px; height: 40px; cursor: pointer; font-size: 20px; border-radius: 50%; transition: all 0.3s ease; z-index: 20; } .banner-prev { left: 15px; } .banner-next { right: 15px; } .banner-prev:hover, .banner-next:hover { background: #FFC107; color: #1A237E; } /* Dots Pagination */ .banner-dots { text-align: center; padding: 10px 0; position: relative; z-index: 30; } .banner-dot { display: inline-block; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .banner-dot.active { background: #FFC107; transform: scale(1.2); } .banner-dot:hover { background: #ff0000; } /* Responsive */ @media (max-width: 1024px) { .banner-slides { height: 350px; } } @media (max-width: 768px) { .banner-slider-wrapper { padding: 0 10px; /* small padding from edges */ } .banner-slides { height: 250px; } .banner-prev, .banner-next { width: 35px; height: 35px; font-size: 18px; } .banner-slide img { border-radius: 15px; } } @media (max-width: 480px) { .banner-slides { height: 180px; } .banner-dot { width: 10px; height: 10px; } } /* Responsive adjustments */ @media (max-width: 991px) { body { padding-top: 70px; } .navbar.navbar-expand-lg.navbar-light { padding: 0.8rem 1rem; top: 5px; left: 5px; right: 5px; width: calc(100% - 10px); border-radius: 15px; } .navbar-collapse { background: rgba(0, 25, 118, 0.9); border-radius: 10px; padding: 10px; margin-top: 5px; } .nav-item .nav-link { font-size: 16px; margin-right: 0; padding: 8px 0; } .nav-item .live-button { font-size: 14px; padding: 5px 10px; margin: 10px 0; } .navbar-brand img { height: 40px; } .container.ts { padding-bottom: 70px; } h1.page-title { margin-bottom: 15px; } .banner-slider { /* Adjust margin-top for smaller screens */ /* margin: 20px auto 10px; */ margin: 20px 0; padding: 0 20px; } } @media (max-width: 767px) { body { padding-top: 60px; } .row.row-cols-1.row-cols-md-3 > .col { flex: 0 0 100%; max-width: 100%; } .card { border-radius: 15px; } .card-img-top { height: 150px; } .card-body { padding: 12px; } .card-text { font-size: 14px; } .btn.btn-primary { padding: 6px 12px; font-size: 13px; } .banner-slider { border-radius: 15px; height: 250px; } .banner-slides { height: 200px; } .banner-prev, .banner-next { padding: 8px; font-size: 16px; } .banner-dot { width: 10px; height: 10px; margin: 0 4px; } } @media (max-width: 576px) { body { padding-top: 50px; } .banner-slider { padding: 0 !important; } .teledrama-container .card { margin-bottom: 0; } .facebook-feed { height: 400px !important; } .split-left, .split-right { padding: 0 !important; } .navbar.navbar-expand-lg.navbar-light { padding: 0.5rem 0.8rem; top: 3px; left: 3px; right: 3px; width: calc(100% - 6px); border-radius: 10px; } .navbar-brand img { height: 30px; } .nav-item .nav-link { font-size: 14px; } .nav-item .live-button { font-size: 12px; padding: 4px 8px; } .nav-item .live-button .live-circle { width: 8px; height: 8px; margin-right: 4px; } .card { border-radius: 10px; } .card-img-top { height: 120px; } .card-body { padding: 10px; } .card-text { font-size: 12px; } .btn.btn-primary { padding: 5px 10px; font-size: 12px; } .container.ts { padding-bottom: 60px; margin: 40px auto 0 !important; } h1.page-title { font-size: 24px; margin-bottom: 10px; } .pagination .page-link { padding: 5px 10px; font-size: 12px; } .banner-slider { border-radius: 10px; height: 250px; } .banner-slides { height: 250px; } .banner-prev, .banner-next { padding: 6px; font-size: 14px; } .banner-dot { width: 8px; height: 8px; margin: 0 3px; } .nav-tabs .nav-link.active { background-color: #fdc206; /* Gold color for active tab */ color: #333; font-weight: bold; } .nav-tabs .nav-link { color: #333; border-radius: 5px 5px 0 0; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0 |
proxy
|
phpinfo
|
Settings