.continue-watching { margin: 20px 0; padding: 20px 0; border-radius: 4px; clear: both; } .continue-watching-header { margin-bottom: 20px; } .continue-watching-title { color: #ff5e62; margin: 0; font-size: 20px; font-family: 'bulletproof deco bb', Helvetica, Arial; display: flex; align-items: center; gap: 10px; } .continue-watching-title i { color: #ff5e62; font-size: 18px; } .continue-watching-count { background: #ff5e62; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px; font-weight: bold; } .continue-grid { clear: both; } #continue-watching-section .videoPost .cw-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; } #continue-watching-section .videoPost .cw-progress-fill { height: 100%; background: #ff5e62; transition: width 0.2s ease; } .continue-watching-loading { text-align: center; color: #ccc; width: 100%; padding: 20px; } .loading-spinner { width: 40px; height: 40px; border: 4px solid #333; border-top: 4px solid #ff5e62; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; } .continue-watching-empty { text-align: center; color: #ccc; width: 100%; padding: 40px 20px; } .empty-icon { font-size: 48px; margin-bottom: 15px; } .empty-subtitle { font-size: 14px; color: #666; margin-top: 5px; } .continue-watching-card { position: relative; width: 264px; float: left; padding: 0px; margin: 10px; cursor: pointer; padding: 0 0 5px 0; margin: 10px 0 20px 4.5px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12) !important; text-decoration: none; color: inherit; display: block; } .continue-watching-card:hover { text-decoration: none; color: inherit; } .continue-watching-card img.thumb_small { width: 264px; height: 388px; } .continue-watching-card .thumbDuration { position: absolute; top: 0; left: 0; margin: 2px 0 0 2px; padding: 4px 6px; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.75); z-index: 5; border-radius: 2px; } .continue-watching-card .progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0, 0, 0, 0.5); } .continue-watching-card .progress-fill { height: 100%; background: #ff5e62; transition: width 0.3s; } .continue-watching-card .videoLink { color: #fff; text-align: center; font-weight: 500; width: 100%; float: left; overflow: hidden; text-decoration: none; height: 34px; margin-bottom: 2px; font-size: 15px; line-height: 110%; } .continue-watching-card .title-fix { position: relative; } .continue-watching-card .title-2 { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; } .continue-watching-card .thumbViews { color: #c4c4c4; text-decoration: none; font-size: 16px; text-align: center; opacity: 0.75; } .continue-watching-card .progress-text { color: #ff5e62; font-weight: bold; font-size: 12px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .continue-watching-card { float: none; display: inline-block; } .continue-watching { margin: 15px 0; padding: 15px; } .continue-watching-title { font-size: 18px; } } @media (max-width: 564px) { .continue-watching-card img.thumb_small { width: 100%; height: auto; } .continue-watching-card { width: 44%; padding: 0 2px; margin: 10px 2px; box-sizing: inherit; overflow: inherit; } } @media (max-width: 379px) { .continue-watching-card img.thumb_small { width: 100%; height: auto; } .continue-watching-card { width: 44%; box-sizing: inherit; overflow: inherit; } } .shdw { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.69) 90%, rgba(0, 0, 0, 0.9) 100%) !important; } .episode-list-container { margin: 10px 0 10px 0; border: 1px solid #343434; border-radius: 4px; background-color: #101010; } @media (max-width: 480px) { .episode-list-container { margin-bottom: 0px; } } .episode-list-container { clear: both; } .episode-container { width: 100%; padding: 10px; -webkit-box-sizing: border-box; .modal-dialog { position: fixed; width: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100vw - 50px); } -moz-box-sizing:border-box; box-sizing:border-box; } .episode-slider-wrapper { overflow: hidden; white-space: nowrap; position: relative; } #episode_slider { display: flex; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; gap: 15px; padding: 10px 0 20px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } #episode_slider::-webkit-scrollbar { display: none; } #episode_slider .videoPost { flex: 0 0 220px; width: 220px; list-style: none; user-select: none; margin: 0; } #episode_slider .videoPost img.thumb_small { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; } #episode_slider .videoPost .title-fix { padding: 10px; } #episode_slider .videoPost a.videoLink { font-size: 13px; max-height: 32px; } #episode_slider.active { cursor: grabbing; scroll-behavior: auto; } @media (min-width: 1100px) { .videoBox { width: 100% !important; max-width: 100% !important; height: auto !important; } .videoBox video { width: 100% !important; } } .image-wrapper img[src*="nothumb.jpg"] { width: 100% !important; height: auto !important; object-fit: cover; } .video-resume-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .video-resume-content { background: rgba(27, 27, 27, 0.95); border: 2px solid #ff5e62; border-radius: 12px; padding: 25px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); animation: slideIn 0.3s ease-out; position: relative; } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .video-resume-icon { font-size: 40px; color: #ff5e62; margin-bottom: 15px; display: block; } .video-resume-title { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 8px; font-family: 'Roboto', sans-serif; } .video-resume-subtitle { color: #ccc; font-size: 14px; margin-bottom: 20px; line-height: 1.4; } .video-resume-progress { background: #333; height: 4px; border-radius: 2px; margin: 15px 0; overflow: hidden; } .video-resume-progress-fill { background: linear-gradient(90deg, #ff5e62, #f90); height: 100%; border-radius: 2px; transition: width 0.3s ease; } .video-resume-time { color: #ff5e62; font-size: 12px; font-weight: 500; margin-top: 8px; } .video-resume-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 20px; } .video-resume-btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; min-width: 120px; font-family: 'Roboto', sans-serif; } .video-resume-btn.continue { background: #ff5e62; color: #fff; } .video-resume-btn.continue:hover { background: #6a9bd8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(142, 177, 230, 0.3); } .video-resume-btn.restart { background: transparent; color: #ff5e62; border: 2px solid #ff5e62; } .video-resume-btn.restart:hover { background: #ff5e62; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(142, 177, 230, 0.3); } .video-resume-close { position: absolute; background: none; border: none; color: #ccc; font-size: 20px; cursor: pointer; padding: 5px; line-height: 1; } .video-resume-close:hover { color: #fff; } @media (max-width: 768px) { .video-resume-content { padding: 20px; margin: 15px; max-width: 350px; } .video-resume-title { font-size: 18px; } .video-resume-subtitle { font-size: 13px; } .video-resume-buttons { flex-direction: column; gap: 8px; } .video-resume-btn { width: 100%; min-width: auto; padding: 12px 16px; } } .episode-container { background: #10101099; position: relative; display: flex; align-items: center; } .episode-container #episode_slider { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: auto; cursor: grab; flex: 1; padding: 0; margin: 0; } .episode-container #episode_slider.dragging { cursor: grabbing; user-select: none; } .episode-container #episode_slider>* { flex: 0 0 auto; } .episode-container #episode_slider::-webkit-scrollbar { height: 8px; }