/* ----- Carousel for Recently Watched ----- */ /* This animation scrolls the track. The distance is the width of one card (139px) multiplied by the number of original items in the carousel (10). */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(var(--scroll-distance, -1390px)); } /* Fallback for 10 items */ } /* The main viewport for the carousel. It hides the overflow and adds a nice fade effect to the left and right edges. */ .logo-carousel-wrapper { background: var(--bs-tertiary-bg); border-radius: 0.5rem; padding: 1.5rem 0; overflow: hidden; position: relative; width: 100%; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); } /* The track that contains all the posters (original + duplicated). It's double the width of the visible items and has the animation applied. */ .logo-carousel-track { display: flex; /* These properties are now set by inline styles in dashboard.html */ width: var(--track-width, 2780px); /* Fallback for 20 total items */ animation: scroll var(--scroll-duration, 40s) linear infinite; /* Fallback for 10 items */ } /* Pause the scrolling animation when the user hovers over the carousel. */ .logo-carousel-wrapper:hover .logo-carousel-track { animation-play-state: paused; } /* Styling for each individual poster card in the carousel. */ .scroll-card { width: 139px; /* 185px * 0.75, rounded */ flex-shrink: 0; margin: 0 0.75rem; /* A little less margin */ border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .scroll-card:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .scroll-card img { display: block; width: 100%; height: auto; } /* Define the default (light mode) background color for our custom navbar. You can change this hex code to any color you like. #f8f9fa is a light grey similar to Bootstrap's default. */ .navbar-custom { background-color: #f8f9fa; /* This adds a nice, smooth transition when the theme changes */ transition: background-color 0.3s ease-in-out; } /* When the tag has the data-bs-theme="dark" attribute, this rule will override the default and apply a different color. #212529 is a dark grey similar to Bootstrap's bg-dark. */ [data-bs-theme="dark"] .navbar-custom { background-color: #2b3035; } /* Add a pointer cursor and a smooth color transition */ .theme-switcher { cursor: pointer; transition: color 0.3s ease-in-out; } /* In light mode, set the icon color to the dark shade you requested */ [data-bs-theme="light"] .theme-switcher { color: #2b3035; } /* In dark mode, set the icon color to a light shade so it's visible */ [data-bs-theme="dark"] .theme-switcher { color: #f8f9fa; /* A standard light grey */ } /* --- Custom Google Icon --- */ .icon-google-g { display: inline-block; width: 1em; /* Match the font size of surrounding text */ height: 1em; vertical-align: -0.125em; /* Align with text like Font Awesome icons */ background-repeat: no-repeat; background-position: center; background-size: contain; /* URL-encoded SVG for the Google 'G' logo */ background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'%3E%3C/path%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.42-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'%3E%3C/path%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'%3E%3C/path%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'%3E%3C/path%3E%3Cpath fill='none' d='M0 0h48v48H0z'%3E%3C/path%3E%3C/svg%3E"); } /* --- Hover effect for grid items --- */ .card-hover-effect { transition: background-color 0.2s ease-in-out; } .card-hover-effect:hover { background-color: var(--bs-tertiary-bg); } .bug-report-button { position: fixed; bottom: 18px; /* Adjusted to sit above the Buy Me a Coffee button */ right: 18px; /* Moved to the right side */ background-color: #5F7FFF; /* Same blue as the Buy Me a Coffee button */ color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 9999; display: flex; align-items: center; gap: 8px; } .bug-report-button:hover { background-color: #4e6dff; /* A slightly darker blue for hover */ color: white; }