/* ======================================== */ /* --- ESTILOS ESPECÍFICOS: Anime Cards & Year Selector --- */ /* Este archivo debe ser enlazado *después* de tu archivo CSS principal en el */ /* Si consolidas este código en tu archivo CSS principal, pégalo al final. */ /* ======================================== */ /* --- Reglas para el encabezado y selector de año --- */ .filter-section { text-align: center; margin-bottom: 40px; /* Espacio debajo del encabezado */ position: relative; /* Necesario para posicionar el dropdown absoluto */ z-index: 10; /* Asegura que el selector esté por encima de las tarjetas */ } .filter-section h1 { font-size: 2.5em; /* Usa un tamaño similar al diseño */ margin-bottom: 15px; color: #fff; /* Color blanco */ font-weight: 500; /* Usa el peso de tus títulos */ } .filter-section .highlight { color: #888; /* Color gris para las estaciones no seleccionadas */ } .year-selector { display: inline-block; /* Ocupa solo el espacio necesario */ position: relative; /* Contenedor para el dropdown */ } .year-display { background-color: #3a3951; /* Usando un color de tu CSS (.btn-secondary) */ color: #fff; padding: 8px 20px; border-radius: 8px; /* Usando tu borde de 8px */ cursor: pointer; font-size: 1.1em; user-select: none; /* Evita seleccionar el texto */ transition: background-color 0.2s ease; font-weight: 400; /* Usa el peso de tu body */ } .year-display:hover { background-color: #403f59; /* Usando un color de tu CSS (hover de .btn-secondary) */ } .year-dropdown { position: absolute; top: 100%; /* Debajo del .year-display */ left: 50%; transform: translateX(-50%); /* Centra el dropdown horizontalmente */ background-color: #3a3951; /* Fondo similar al year-display */ border-radius: 8px; /* Usando tu borde de 8px */ list-style: none; padding: 0; margin: 5px 0 0 0; max-height: 200px; /* Altura máxima con scroll */ overflow-y: auto; /* Scroll vertical */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); display: none; /* Inicialmente oculto. Se mostrará con JS */ width: 100%; /* Ancho igual al year-display */ min-width: 100px; /* Ancho mínimo */ z-index: 100; /* Asegura que esté por encima */ } /* Estilo de scrollbar (adapta si tienes uno global en tu CSS principal) */ .year-dropdown::-webkit-scrollbar { width: 8px; } .year-dropdown::-webkit-scrollbar-track { background: #403f59; border-radius: 4px; } .year-dropdown::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; } .year-dropdown::-webkit-scrollbar-thumb:hover { background: #888; } .year-dropdown li { padding: 10px 20px; cursor: pointer; color: #fff; transition: background-color 0.2s ease; white-space: nowrap; text-align: center; font-weight: 300; /* Usa el peso de tu body */ } .year-dropdown li:hover { background-color: #403f59; /* Fondo similar al hover del year-display */ } .year-dropdown li:first-child { /* Estilo opcional para el año seleccionado */ background-color: rgba(255, 186, 222, 0.1); /* Tono de tu highlight */ color: #ffbade; /* Color de tu highlight */ } /* --- Reglas para las tarjetas de anime --- */ .cards-container { display: grid; /* Las columnas se definirán en los media queries para control preciso */ gap: 20px; /* Espacio entre tarjetas */ } .anime-card { background-color: #2a2a2a; /* Un gris oscuro */ border-radius: 8px; /* Usando tu borde de 8px */ overflow: visible; /* Cambiado de 'hidden' a 'visible' para permitir que el dropdown se muestre */ display: flex; /* Layout interno de la tarjeta: imagen y contenido lado a lado */ color: #ccc; /* Color de texto por defecto dentro de la tarjeta */ position: relative; /* Para overlays/botones */ transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); min-height: auto; /* Eliminemos min-height */ } .anime-card:hover { transform: translateY(-5px); /* Efecto hover */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .card-image-container { width: 140px; /* Ajusta el ancho de la imagen para intentar nivelar la altura con el contenido */ flex-shrink: 0; /* Evita que la imagen se encoja */ position: relative; /* Necesario para posicionar el enlace y el botón de play absolutamente dentro */ background-color: #333; /* Fondo mientras carga */ overflow: hidden; /* También puede causar recorte */ /* Dejar que flex determine la altura según el contenido del card-content */ /* height: auto; */ } /* >>> ESTILOS PARA EL ENLACE QUE ENVUELVE LA IMAGEN Y EL BOTÓN DE PLAY <<< */ .card-image-container .image-link { display: block; /* Hacer que el enlace ocupe todo el contenedor */ position: absolute; /* Posicionar sobre la imagen */ top: 0; left: 0; right: 0; bottom: 0; z-index: 1; /* Asegura que esté sobre la imagen pero debajo del botón de lista de seguimiento */ } /* Efecto Overlay oscuro en hover del enlace de la imagen */ .card-image-container .image-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); /* Color y transparencia del overlay */ opacity: 0; /* Inicialmente oculto */ transition: opacity 0.3s ease; /* Transición suave */ z-index: 1; /* Sobre la imagen, debajo del botón de play */ } /* Efecto de oscurecimiento de la imagen en hover del enlace de la imagen */ .card-image-container .image-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; /* Transición suave para el filtro */ } /* Estado hover: Mostrar overlay y oscurecer imagen */ .card-image-container .image-link:hover::after { opacity: 1; /* Mostrar overlay */ } .card-image-container .image-link:hover img { filter: brightness(0.5); /* Oscurecer la imagen (ajusta el valor si quieres más/menos) */ } /* >>> ESTILOS PARA EL BOTÓN DE PLAY (TAMAÑO MODIFICADO AQUÍ) <<< */ .play-button { position: absolute; /* --- MODIFICADO: Aumentar tamaño del círculo --- */ width: 60px; /* Tamaño del círculo */ height: 60px; /* Tamaño del círculo */ /* --- FIN MODIFICADO --- */ background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 2; /* Asegura que esté sobre el overlay */ opacity: 0; /* Inicialmente ocultos */ transition: opacity 0.3s ease; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centra el botón */ padding-left: 2px; /* Ajuste óptico para el triángulo */ } /* Mostrar botón de play en hover del enlace de la imagen */ .card-image-container .image-link:hover .play-button { opacity: 1; /* Se muestran en hover */ } /* >>> ESTILOS PARA EL SVG DENTRO DEL BOTÓN DE PLAY (TAMAÑO MODIFICADO AQUÍ) <<< */ .play-button svg { /* --- MODIFICADO: Aumentar tamaño del SVG --- */ width: 30px; /* Tamaño del SVG */ height: 30px; /* Tamaño del SVG */ /* --- FIN MODIFICADO --- */ fill: white; } /* Contenedor del widget de lista de seguimiento */ /* Ahora está dentro de card-content, en el flujo normal, después de metadata y antes de badges */ .watch-list-widget { position: relative; /* Necesario para que el dropdown-menu sea absoluto respecto a este contenedor */ z-index: 1; /* Asegura que esté sobre otros elementos en card-content */ /* Borde rojo para depuración (comentar o eliminar al finalizar) */ /* border: 2px solid red; */ /* Espacio para separar de elementos de arriba y abajo */ margin-top: 10px; /* Espacio arriba (después de metadata) */ margin-bottom: 10px; /* Espacio abajo (antes de badges) */ /* Asegurar que ocupe el ancho necesario y se comporte como un bloque para tener sus propios márgenes */ width: auto; /* Permitir que el ancho se ajuste al contenido */ display: inline-block; /* Ocupar solo el espacio del botón, PERMITE MARGENES Y POSICIONAMIENTO */ } /* Estilos para el botón dentro del widget (.watch-list-widget a.btn) */ /* Estilo similar a AL/MAL: Fondo oscuro sólido, bordes redondeados */ .watch-list-widget a.btn.btn-light.btn-radius { /* Usar clases específicas para mayor prioridad */ /* Anula estilos generales de .btn o .btn-light */ background-color: #3a3951 !important; /* Fondo oscuro sólido, similar al btn-secondary */ border: none !important; /* Sin borde */ box-shadow: none !important; /* Sin sombra */ color: #fff !important; /* Color del texto/icono blanco */ padding: 6px 15px !important; /* Ajustar padding para texto/icono */ border-radius: 4px !important; /* Bordes ligeramente redondeados (similar a los badges) */ font-size: 13px !important; /* Tamaño de fuente */ font-weight: 500 !important; /* Peso de fuente */ line-height: 1.2 !important; /* Altura de línea */ display: inline-flex !important; /* Para alinear icono y texto */ align-items: center; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; /* Evita que el texto se envuelva */ height: auto !important; /* Asegura que la altura se ajuste al contenido */ } /* Hover state para el botón (selector más específico) */ .watch-list-widget a.btn.btn-light.btn-radius:hover { background-color: #403f59 !important; /* Fondo oscuro en hover */ color: #ffbade !important; /* Color de highlight en hover */ } /* Estilos para el icono dentro del botón (selector más específico) */ .watch-list-widget a.btn.btn-light.btn-radius i { margin-right: 5px; /* Espacio entre icono y texto */ font-size: 14px; /* Tamaño del icono */ color: #fff !important; /* Color del icono blanco */ } /* Hover state para el icono (selector más específico) */ .watch-list-widget a.btn.btn-light.btn-radius:hover i { color: #ffbade !important; /* Color de highlight del icono en hover */ } /* Estilos para el menú desplegable (cargado por AJAX) */ /* Hacemos los selectores más específicos para el menú */ .watch-list-widget .dropdown-menu.dropdown-menu-model { /* Usar clases específicas */ /* display: none; <-- Bootstrap controla esto */ /* opacity: 1 !important; <-- Eliminar */ /* visibility: visible !important; <-- Eliminar */ position: absolute; /* Absoluto respecto a .watch-list-widget */ top: 100%; /* Posicionar justo debajo del botón */ left: 0; /* Alinear a la izquierda del botón */ margin-left: 0 !important; /* Asegura que no haya margen izquierdo */ transform: none !important; /* Anular cualquier posible transform de centrado */ z-index: 1000; /* Asegura que esté por encima de todo */ /* Estilos visuales del menú */ background-color: #3a3951 !important; /* Forzar fondo oscuro Sólido */ backdrop-filter: none !important; /* Eliminar el efecto blur */ -webkit-backdrop-filter: none !important; /* Eliminar el efecto blur para webkit */ border: none !important; /* Asegurar sin borde */ border-radius: 8px; /* Bordes redondeados */ padding: 5px 0; /* Padding interno */ margin: 5px 0 0 0 !important; /* Margen superior */ min-width: 160px !important; /* Ancho mínimo, usar !important si es necesario */ max-height: 200px; /* Altura máxima antes del scroll, si se necesita scroll */ overflow-y: auto; /* Habilita scroll vertical si el contenido excede max-height */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */ } /* Estilos para los ítems del menú desplegable (selector más específico) */ .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item { padding: 8px 15px !important; /* Padding de ítems */ color: #fff !important; /* Color del texto de ítems por defecto */ font-size: 14px !important; /* Tamaño de fuente de ítems */ line-height: 1.4 !important; /* Altura de línea */ transition: background-color 0.2s ease; background-color: transparent !important; /* Asegura que el fondo del ítem sea transparente por defecto */ } /* Hover state para ítems del menú (selector más específico) */ .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item:hover, .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item:focus { background-color: #403f59 !important; /* Fondo en hover/focus */ color: #fff !important; /* Color en hover/focus */ text-decoration: none !important; /* Asegurar sin subrayado en hover */ } /* Estilo para el ítem activo (ej: Watching) (selector más específico) */ .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.active, .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.added { background-color: #ffbade !important; /* Fondo de highlight para ítem activo */ color: #111 !important; /* Color oscuro para texto activo */ font-weight: 600 !important; /* Negrita para activo */ } /* Estilo para el icono de check (Font Awesome) en ítems activos (selector más específico) */ .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.active i, .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.added i { margin-left: 5px !important; /* Espacio a la izquierda del icono */ font-size: 0.9em !important; /* Tamaño del icono */ color: #111 !important; /* Color oscuro para el icono en activo */ } /* Estilo para el ítem "Remove" (si es rojo) (selector más específico) */ .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.text-danger { color: #dc3545 !important; /* Rojo de Bootstrap */ } .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item.text-danger:hover { background-color: #403f59 !important; /* Mismo fondo hover */ color: #dc3545 !important; /* Mismo color rojo en hover */ } .card-content { flex-grow: 1; /* Ocupa el espacio restante */ padding: 15px; display: flex; flex-direction: column; /* Apila el contenido */ min-height: 1px; /* Asegura que flexbox le dé una altura mínima */ } .card-title { font-size: 1.1em; color: #fff; margin: 0 0 5px 0; /* Espacio debajo del título */ line-height: 1.3; font-weight: 500; /* Usa el peso de tus títulos */ } .card-subtitle { font-size: 0.85em; color: #aaa; margin: 0 0 10px 0; line-height: 1.2; } .card-description { font-size: 0.9em; color: #bbb; margin: 0 0 10px 0; line-height: 1.5; flex-grow: 1; /* Permite que la descripción empuje el resto hacia abajo */ /* Limitar líneas para ayudar a controlar la altura del card-content */ display: -webkit-box; -webkit-line-clamp: 3; /* Limita a 3 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .card-metadata { display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; /* Espacio entre elementos */ } .metadata-item { font-size: 0.8em; color: #aaa; display: flex; align-items: center; } .metadata-item .icon { margin-right: 3px; font-style: normal; /* Si usas texto como icono */ /* Alineación para iconos de fuente si es necesario */ } /* Estilo para el punto de TV/Tipo (adapta si tienes clases en tu CSS principal) */ .metadata-item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; } .metadata-item .dot.tv { background-color: #5cb85c; /* Color verde ejemplo */ } .card-badges { margin-top: auto; /* Empuja los badges hacia abajo para llenar el espacio disponible */ margin-bottom: 0; /* Elimina el margen inferior si los badges son lo último */ flex-wrap: wrap; gap: 5px; /* Espacio entre badges */ display: flex; /* Alinea badges */ } .badge { display: inline-block; font-size: 0.75em; padding: 3px 8px; border-radius: 4px; /* Usando tu borde de 4px */ /* El color de fondo y texto se definirá por la clase de color en el contenedor .anime-card */ font-weight: 600; /* Usa el peso de tus badges/ticks */ } /* --- Reglas para colorear los badges según la clase en el contenedor .anime-card --- */ /* Colores extraídos de tu CSS principal y adaptados para los badges */ .anime-card.color-1 .card-badges .badge { background-color: #ffbade; color: #111; } /* Highlight Pink */ .anime-card.color-2 .card-badges .badge { background-color: #ffc107; color: #111; } /* Yellow (from tick-quality) */ .anime-card.color-3 .card-badges .badge { background-color: #e83e8c; color: #fff; } /* Pink */ .anime-card.color-4 .card-badges .badge { background-color: #007bff; color: #fff; } /* Blue */ .anime-card.color-5 .card-badges .badge { background-color: #5cb85c; color: #fff; } /* Green (from dot.tv) */ .anime-card.color-6 .card-badges .badge { background-color: #fc2121; color: #fff; } /* Red (from tick-item-latino) */ .anime-card.color-7 .card-badges .badge { background-color: #b9e7ff; color: #111; } /* Light Blue (from tick-dub) */ .anime-card.color-8 .card-badges .badge { background-color: #b0e3af; color: #111; } /* Light Green (from tick-sub) */ .anime-card.color-9 .card-badges .badge { background-color: #ff5700; color: #fff; } /* Orange (from tick.tick-rate) */ .anime-card.color-10 .card-badges .badge { background-color: #6f85d5; color: #fff; } /* Discord Blue */ .anime-card.color-11 .card-badges .badge { background-color: #08c; color: #fff; } /* Telegram Blue */ .anime-card.color-12 .card-badges .badge { background-color: #ff3c1f; color: #fff; } /* Reddit Red/Orange */ .anime-card.color-13 .card-badges .badge { background-color: #1d9bf0; color: #fff; } /* Twitter Blue */ .anime-card.color-14 .card-badges .badge { background-color: #ecff91; color: #111; } /* Event Light Green/Yellow */ .anime-card.color-15 .card-badges .badge { background-color: #ffe8f6; color: #111; } /* Event Light Pink */ .anime-card.color-16 .card-badges .badge { background-color: #fff1c8; color: #111; } /* Event Light Yellow */ .anime-card.color-17 .card-badges .badge { background-color: #91f0ff; color: #111; } /* Event Cyan */ .anime-card.color-18 .card-badges .badge { background-color: #d4a2f7; color: #111; } /* Light Purple */ .anime-card.color-19 .card-badges .badge { background-color: #7df796; color: #111; } /* Ztag Green */ .anime-card.color-20 .card-badges .badge { background-color: #ff7e3f; color: #fff; } /* Ztag Orange */ .anime-card.color-21 .card-badges .badge { background-color: #ccabda; color: #111; } /* Another Light Purple/Pink */ /* Continua con el resto de las reglas de colores si hay más (hasta 21) */ /* Si necesitas más reglas de colores hasta color-21, asegúrate de incluirlas aquí */ /* ... el resto de tus reglas de colores para badges ... */ /* Añade más reglas aquí si necesitas más colores o adaptarlos */ .card-logos { display: flex; gap: 10px; margin-top: auto; /* Empuja logos hacia abajo */ } .logo { font-size: 1em; font-weight: 600; /* Usa el peso de tus títulos */ color: #888; /* Color gris */ } /* --- Responsive Adjustments --- */ /* Para pantallas pequeñas (móvil) */ @media (max-width: 768px) { .filter-section h1 { font-size: 1.8em; } .cards-container { grid-template-columns: repeat(1, 1fr); gap: 15px; } .anime-card { flex-direction: row; /* Imagen y contenido lado a lado */ min-height: auto; } .card-image-container { width: 100px; /* Ancho de imagen para móvil */ height: auto; /* Permitir que la altura se ajuste */ } .card-content { padding: 10px; } .card-title { font-size: 1em; margin: 0 0 5px 0; /* Espacio debajo del título */ } .card-subtitle { font-size: 0.8em; margin: 0 0 5px 0; /* Ajustar margen */ } .watch-list-widget { position: relative; /* Asegura que el menú sea absoluto respecto a este */ margin-top: 0; /* Sin margen superior si está justo después del título */ margin-bottom: 8px; /* Espacio debajo del botón */ display: inline-block; /* Ocupar solo el espacio del botón */ } /* Ajustar estilos del botón en móvil */ .watch-list-widget a.btn.btn-light.btn-radius { padding: 3px 8px !important; /* Padding */ font-size: 11px !important; /* Fuente */ border-radius: 4px !important; /* Bordes */ } .watch-list-widget a.btn.btn-light.btn-radius i { font-size: 12px !important; /* Icono */ } /* Ajustar estilos del menú en móvil */ .watch-list-widget .dropdown-menu.dropdown-menu-model { min-width: 100px !important; /* Ancho mínimo */ font-size: 12px !important; /* Fuente del menú */ } .watch-list-widget .dropdown-menu.dropdown-menu-model .dropdown-item { padding: 5px 10px !important; /* Padding de ítems */ } .card-description { font-size: 0.85em; margin: 0 0 5px 0; /* Ajustar margen */ -webkit-line-clamp: 2; } .card-metadata { margin-bottom: 5px; gap: 5px; } .card-badges { margin-top: 8px; margin-bottom: 0; gap: 5px; } .metadata-item, .badge { font-size: 0.7em; } .card-logos { gap: 8px; margin-top: 5px; } .play-button { width: 24px; height: 24px; } .play-button svg { width: 12px; height: 12px; } } /* Para pantallas de tamaño medio (tablet) */ @media (min-width: 769px) and (max-width: 1024px) { .cards-container { grid-template-columns: repeat(2, 1fr); gap: 20px; } .card-image-container { width: 120px; /* Ajustar ancho de imagen */ } .card-content { padding: 12px; } .watch-list-widget { margin-top: 5px; margin-bottom: 10px; display: inline-block; } } /* Para pantallas grandes (desktop) */ @media (min-width: 1025px) { .cards-container { grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-image-container { width: 140px; /* Ancho ajustado para intentar nivelar alturas */ } .card-content { padding: 15px; } .watch-list-widget { margin-top: 5px; margin-bottom: 10px; display: inline-block; } } /* Si tu CSS principal ya tiene media queries más específicas o diferentes, integra estas reglas dentro de tus propios breakpoints y ajusta si es necesario. */