diff --git a/websites/anime-sama.fr.css b/websites/anime-sama.fr.css new file mode 100644 index 00000000..afad844f --- /dev/null +++ b/websites/anime-sama.fr.css @@ -0,0 +1,213 @@ +@-moz-document domain("anime-sama.fr") { + /* + * Anime-Sama.fr Transparent Theme + */ + + /* ===== BASE ELEMENTS ===== */ + /* Make all background elements transparent */ + html, + body, + footer, + .container, + .main-content, + .bg-slate-900, + .bg-gray-800, + .bg-slate-800, + .bg-gray-900, + .bg-sky-900, + .bg-black, + .bg-zinc-900 { + background: none !important; + background-color: transparent !important; + background-image: none !important; + transition: all 0.3s ease-in-out !important; + } + + /* ===== BORDERS & OUTLINES ===== */ + /* Remove border colors */ + .border-sky-900, + .border-sky-800, + .dark\:border-gray-700, + .border-gray-400, + .border-slate-600 { + border-color: transparent !important; + } + + /* Remove outline colors */ + .outline-sky-800, + .outline-gray-500, + .outline-sky-700 { + outline-color: transparent !important; + } + + /* Light border styling */ + .border-slate-500 { + border-color: rgba(255, 255, 255, 0.3) !important; + } + + /* ===== INTERACTIVE ELEMENTS ===== */ + /* Hover state backgrounds */ + .hover\:bg-gray-700:hover, + .hover\:bg-sky-900:hover { + background-color: rgba(0, 0, 0, 0) !important; + } + + /* Light background elements */ + .hover\:text-sky-500:hover { + --tw-text-opacity: 1; + color: rgba(255, 255, 255, 0.3); + } + + .text-black { + --tw-text-opacity: 1; + color: rgb(255, 255, 255); + } + + .bg-gray-600 { + background-color: rgba(255, 255, 255, 0.3) !important; + } + + /* Shadow effects with reduced opacity */ + .shadow-black { + --tw-shadow-color: rgba(0, 0, 0, 0.2) !important; + --tw-shadow: var(--tw-shadow-colored); + } + + /* ===== NAVIGATION ===== */ + /* Navigation bar - transparent with blur effect */ + nav.border-b-2 { + background: transparent !important; + backdrop-filter: blur(10px) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + z-index: 999 !important; + opacity: 0 !important; + transition: opacity 0.3s ease-in-out !important; + } + + nav.border-b-2:hover { + opacity: 1 !important; + } + + /* Navigation links */ + .nav-link { + color: rgba(255, 255, 255, 0.8) !important; + transition: all 0.2s ease-in-out !important; + } + + .nav-link:hover { + color: #fff !important; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important; + } + + /* ===== CONTENT ELEMENTS ===== */ + /* Main content spacing adjustment for fixed navbar */ + #sousBlocMiddle { + padding-top: 56px !important; /* Adjust based on navbar height */ + } + + /* Content section containers */ + .content-section { + background-color: rgba(0, 0, 0, 0.4) !important; + backdrop-filter: blur(8px) !important; + border-radius: 1rem !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + margin: 1rem 0 !important; + padding: 1.5rem !important; + } + + /* Video player message - hidden by default, visible on hover */ + .flex.flex-wrap.justify-center.items-center.mt-2.bg-slate-900.bg-opacity-70.rounded { + opacity: 0 !important; + transition: opacity 0.3s ease-in-out !important; + } + + .flex.flex-wrap.justify-center.items-center.mt-2.bg-slate-900.bg-opacity-70.rounded:hover { + opacity: 1 !important; + } + + /* Italic text - hidden by default, visible on hover */ + .text-white.text-center.mt-2.italic { + opacity: 0 !important; + transition: opacity 0.3s ease-in-out !important; + } + + .text-white.text-center.mt-2.italic:hover { + opacity: 1 !important; + } + + /* Footer - hidden by default, visible on hover */ + footer { + opacity: 0 !important; + transition: opacity 0.3s ease-in-out !important; + } + + footer:hover { + opacity: 1 !important; + } + + /* ===== BUTTONS & CONTROLS ===== */ + /* Button styling */ + .button { + background-color: rgba(0, 0, 0, 0.3) !important; + backdrop-filter: blur(5px) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + border-radius: 0.5rem !important; + transition: all 0.2s ease-in-out !important; + } + + .button:hover { + background-color: rgba(0, 0, 0, 0.5) !important; + border-color: rgba(255, 255, 255, 0.3) !important; + transform: translateY(-2px) !important; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; + } + + /* ===== HIDDEN ELEMENTS ===== */ + /* Hide donation message */ + .text-sm.text-white.text-center.font-medium.opacity-50.mt-32.pb-2 { + display: none !important; + } + + /* Hide episode navigation buttons container */ + .flex.flex-wrap.justify-center.items-center.my-2.bg-slate-900.bg-opacity-70.rounded { + display: none !important; + } + + /* Remove advertisements */ + #bannRight, + #bannBot, + #squBot, + #bannLeft { + display: none !important; + } + + /* ===== SCROLLBAR STYLING ===== */ + /* Custom scrollbar */ + ::-webkit-scrollbar { + width: 8px !important; + } + + ::-webkit-scrollbar-track { + background: transparent !important; + } + + ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2) !important; + border-radius: 4px !important; + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.3) !important; + } + + /* ===== COMPATIBILITY ===== */ + /* Dark Reader compatibility */ + :root { + --darkreader-background-ffffff: transparent !important; + --darkreader-text-bgcolor: transparent !important; + } +}