599 lines
38 KiB
HTML
599 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Abyss - Minimal Dark Theme for Jellyfin</title>
|
|
<meta name="description"
|
|
content="Abyss is a clean, minimal dark theme for Jellyfin. Frosted glass surfaces, Google Sans typography, smooth transitions, and fully customisable CSS variables." />
|
|
<meta name="keywords"
|
|
content="Jellyfin theme, Jellyfin CSS, dark theme, Abyss, Jellyfin custom CSS, media server theme" />
|
|
<meta name="author" content="AumGupta" />
|
|
<link rel="canonical" href="https://aumgupta.github.io/abyss-jellyfin/" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Abyss - Minimal Dark Theme for Jellyfin" />
|
|
<meta property="og:description"
|
|
content="A clean, minimal dark theme for Jellyfin. Frosted glass surfaces, refined typography, and smooth transitions." />
|
|
<meta property="og:url" content="https://aumgupta.github.io/abyss-jellyfin/" />
|
|
<meta property="og:image" content="https://aumgupta.github.io/abyss-jellyfin/assets/images/1.png" />
|
|
<meta property="og:image:width" content="1400" />
|
|
<meta property="og:image:height" content="875" />
|
|
<meta property="og:site_name" content="Abyss for Jellyfin" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Abyss - Minimal Dark Theme for Jellyfin" />
|
|
<meta name="twitter:description"
|
|
content="A clean, minimal dark theme for Jellyfin. Frosted glass surfaces, refined typography, and smooth transitions." />
|
|
<meta name="twitter:image" content="https://aumgupta.github.io/abyss-jellyfin/assets/images/1.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
|
|
<link rel="icon" href="assets/favicon/android-chrome-192x192.png" sizes="192x192">
|
|
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
|
|
<link rel="apple-touch-icon" href="assets/favicon/apple-touch-icon.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
|
|
<link rel="manifest" href="assets/favicon/site.webmanifest" />
|
|
<meta name="theme-color" content="#080808" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap"
|
|
rel="stylesheet" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "Abyss",
|
|
"alternateName": "Abyss for Jellyfin",
|
|
"description": "A clean, minimal dark theme for Jellyfin with frosted glass surfaces, refined typography, and smooth transitions.",
|
|
"url": "https://aumgupta.github.io/abyss-jellyfin/",
|
|
"author": { "@type": "Person", "name": "AumGupta" },
|
|
"license": "https://github.com/AumGupta/abyss-jellyfin/blob/main/LICENSE",
|
|
"applicationCategory": "DesignApplication",
|
|
"operatingSystem": "Web"
|
|
}
|
|
</script>
|
|
<meta name="google-site-verification" content="Z8E3-pVAJW5oXDoSQWsc4C7W7ee8wz_pQ5ddDQiG6jE" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="bg-orb orb-1" aria-hidden="true"></div>
|
|
<div class="bg-orb orb-2" aria-hidden="true"></div>
|
|
<div class="bg-orb orb-3" aria-hidden="true"></div>
|
|
|
|
<!--NAV-->
|
|
<nav class="nav" id="nav" role="navigation" aria-label="Main navigation">
|
|
<div class="nav-inner">
|
|
<a href="#" class="nav-logo" aria-label="Abyss home">
|
|
<img src="assets/favicon/apple-touch-icon.png" alt="Abyss logo" class="nav-icon" width="26"
|
|
height="26" />
|
|
<span>Abyss</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#preview">Preview</a>
|
|
<a href="#customise">Customise</a>
|
|
<a href="#install">Install</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin" target="_blank" rel="noopener noreferrer"
|
|
class="nav-github" aria-label="View on GitHub">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
<!-- Hamburger button (mobile only) -->
|
|
<button class="nav-hamburger" id="nav-hamburger" aria-label="Open menu" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<div class="nav-mobile" id="nav-mobile" aria-hidden="true">
|
|
<a href="#features">Features</a>
|
|
<a href="#preview">Preview</a>
|
|
<a href="#customise">Customise</a>
|
|
<a href="#install">Install</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!--HERO-->
|
|
<section class="hero" id="hero" aria-labelledby="hero-title">
|
|
<div class="hero-content reveal">
|
|
<div class="hero-badge">For Jellyfin</div>
|
|
<h1 class="hero-title" id="hero-title">Abyss</h1>
|
|
<p class="hero-sub">A clean, minimal dark theme. Frosted glass surfaces,<br>refined typography, and smooth
|
|
transitions.</p>
|
|
<div class="hero-actions">
|
|
<a href="#install" class="btn btn-primary">Download Now</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin" target="_blank" rel="noopener noreferrer"
|
|
class="btn btn-ghost">View on GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-image reveal reveal-delay">
|
|
<div class="screenshot-frame video-frame">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/CAjI7qgvJzo?autoplay=1&mute=1&loop=1&playlist=CAjI7qgvJzo&controls=0&modestbranding=1&rel=0&playsinline=1"
|
|
title="Abyss theme for Jellyfin" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"
|
|
style="width:100%;aspect-ratio:16/9;display:block;border:0;"></iframe>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="hero-image reveal reveal-delay">
|
|
<div class="screenshot-frame">
|
|
<a href="https://www.youtube.com/watch/CAjI7qgvJzo" target="_blank" rel="noopener noreferrer"
|
|
class="screenshot-link">
|
|
<img src="assets/images/1.png"
|
|
alt="Abyss theme - Jellyfin home screen showing My Media section with frosted glass header"
|
|
width="900" loading="eager" />
|
|
<div class="screenshot-overlay">
|
|
<span>See video ►</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div> -->
|
|
</section>
|
|
|
|
<!--VIDEO-->
|
|
<!-- <section class="section section-video" id="video" aria-label="Theme preview video">
|
|
<div class="section-inner">
|
|
<div class="video-embed reveal">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/CAjI7qgvJzo?autoplay=1&mute=1&loop=1&playlist=CAjI7qgvJzo&controls=1&modestbranding=1&rel=0&playsinline=1"
|
|
title="Abyss theme for Jellyfin — preview" allow="autoplay; encrypted-media" allowfullscreen
|
|
loading="lazy" style="border:0;"></iframe>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
|
|
<!--FEATURES-->
|
|
<section class="section" id="features" aria-labelledby="features-title">
|
|
<div class="section-inner">
|
|
<div class="section-label reveal">Features</div>
|
|
<h2 class="section-title reveal" id="features-title">Crafted for clarity.</h2>
|
|
<p class="section-desc reveal">Every element - from toasts and dialogs to the media player OSD - has been
|
|
considered and styled. Here is what Abyss brings to your Jellyfin.</p>
|
|
<div class="features-grid" role="list">
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<path
|
|
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
|
</svg>
|
|
</div>
|
|
<h3>One-Click Installer</h3>
|
|
<p>Download <code>abyss-setup.exe</code> and run it. It applies the CSS, sets the dark theme,
|
|
configures home sections, installs Spotlight, and restarts Jellyfin - fully automatic.</p>
|
|
</article>
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" />
|
|
<path d="M8 21h8M12 17v4" />
|
|
</svg>
|
|
</div>
|
|
<h3>Spotlight Home Banner</h3>
|
|
<p>A cinematic banner shows your current Continue Watching item - backdrop image, metadata pills for
|
|
rating, runtime, and score, and a direct resume button.</p>
|
|
</article>
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<rect x="3" y="3" width="18" height="18" rx="4" />
|
|
<path d="M3 9h18" />
|
|
</svg>
|
|
</div>
|
|
<h3>Frosted Glass UI</h3>
|
|
<p>Header, drawer, dialogs, toasts, and footer all use <code>backdrop-filter</code> blur. Every
|
|
surface layers naturally for depth without feeling heavy.</p>
|
|
</article>
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 7v5l3 3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Animations Throughout</h3>
|
|
<p>Home sections fade up with staggered entrance animations on load. The favourite button has a
|
|
spring pop. Every interaction uses tuned <code>cubic-bezier</code> easing - nothing snaps.</p>
|
|
</article>
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<rect x="2" y="4" width="6" height="16" rx="2" />
|
|
<rect x="10" y="4" width="12" height="7" rx="2" />
|
|
<rect x="10" y="13" width="12" height="7" rx="2" />
|
|
</svg>
|
|
</div>
|
|
<h3>Every Element Targeted</h3>
|
|
<p>Cards, sliders, checkboxes, form inputs, the OSD, now playing bar, chapter thumbnails, search
|
|
page, cast thumbnails at 9 breakpoints, login page, detail pages, and the metadata manager.</p>
|
|
</article>
|
|
|
|
<article class="feature-card reveal" role="listitem">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="1.8">
|
|
<path d="M4 7h16M4 12h10M4 17h7" />
|
|
</svg>
|
|
</div>
|
|
<h3>Refined Typography</h3>
|
|
<p>Google Sans throughout, with consistent weight and spacing. Section titles, card text, and
|
|
metadata sit in a clear visual hierarchy at every screen size.</p>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--PREVIEW-->
|
|
<section class="section section-dark" id="preview" aria-labelledby="preview-title">
|
|
<div class="section-inner">
|
|
<div class="section-label reveal">Preview</div>
|
|
<h2 class="section-title reveal" id="preview-title">See it in action.</h2>
|
|
<div class="preview-grid">
|
|
|
|
<div class="preview-item preview-full reveal">
|
|
<img src="assets/images/1.png" alt="Abyss theme home screen" loading="lazy" />
|
|
<span class="preview-caption">Home</span>
|
|
</div>
|
|
|
|
<div class="preview-row reveal">
|
|
<div class="preview-item preview-sidebar">
|
|
<img src="assets/images/2.png" alt="Abyss sidebar navigation" loading="lazy" />
|
|
<span class="preview-caption">Sidebar</span>
|
|
</div>
|
|
<div class="preview-item preview-stretch">
|
|
<img src="assets/images/3.png" alt="Abyss Video player" loading="lazy" />
|
|
<span class="preview-caption">Player</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-row reveal">
|
|
<div class="preview-item preview-stretch">
|
|
<img src="assets/images/5.png" alt="Abyss card layout" loading="lazy" />
|
|
<span class="preview-caption">Cards</span>
|
|
</div>
|
|
<div class="preview-col">
|
|
<div class="preview-item">
|
|
<img src="assets/images/4.png" alt="Abyss card hover state" loading="lazy" />
|
|
<span class="preview-caption">Card Hover</span>
|
|
</div>
|
|
<div class="preview-item">
|
|
<img src="assets/images/6.png" alt="Abyss UI detail" loading="lazy" />
|
|
<span class="preview-caption">UI Detail</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-row reveal">
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/movies-1.png" alt="Abyss movies library" loading="lazy" />
|
|
<span class="preview-caption">Movies</span>
|
|
</div>
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/shows-1.png" alt="Abyss shows library" loading="lazy" />
|
|
<span class="preview-caption">Shows</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-row reveal">
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/music1.png" alt="Abyss music suggestions" loading="lazy" />
|
|
<span class="preview-caption">Music</span>
|
|
</div>
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/music2.png" alt="Abyss music albums grid" loading="lazy" />
|
|
<span class="preview-caption">Music Albums</span>
|
|
</div>
|
|
</div>
|
|
<div class="preview-row reveal">
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/music3.png" alt="Abyss now playing screen" loading="lazy" />
|
|
<span class="preview-caption">Now Playing</span>
|
|
</div>
|
|
<div class="preview-item preview-half">
|
|
<img src="assets/images/music4.png" alt="Abyss music queue" loading="lazy" />
|
|
<span class="preview-caption">Queue</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--CUSTOMISATION-->
|
|
<section class="section" id="customise" aria-labelledby="customise-title">
|
|
<div class="section-inner">
|
|
<div class="section-label reveal">Customisation</div>
|
|
<h2 class="section-title reveal" id="customise-title">Make it yours.</h2>
|
|
<p class="section-desc reveal">Override variables after your import. Use the controls on the right to
|
|
preview changes live in the code.</p>
|
|
|
|
<div class="customise-layout reveal">
|
|
<div class="customise-code">
|
|
<div class="code-block" style="margin-bottom:0;">
|
|
<div class="code-header">
|
|
<span class="code-lang">css</span>
|
|
<button class="copy-btn" data-target="custom-code">Copy</button>
|
|
</div>
|
|
<pre id="custom-code"><code><span class="prop">@import</span> <span class="val">url</span>(<span class="str">'https://lucaspatenaude.com/Lukeflix/Theme/raw/branch/main/lukeflix.css'</span>);
|
|
|
|
<span class="c">/* Accent colour
|
|
Format: R, G, B (no rgb() wrapper)
|
|
Used for highlights, active states, progress bars. */</span>
|
|
<span class="sel">:root</span> {
|
|
<span class="var">--abyss-accent</span>: <span class="val accent-val">245, 245, 247</span>;
|
|
<span class="var">--abyss-radius</span>: <span class="val radius-val">12px</span>;
|
|
<span class="var">--abyss-indicator</span>: <span class="val">55, 55, 55</span>;
|
|
}
|
|
|
|
<span class="c">/* Custom font: Import any Google Font and override body. */</span>
|
|
<span class="prop">@import</span> <span class="val">url</span>(<span class="str">'
|
|
https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap'</span>);
|
|
|
|
<span class="sel">body</span> {
|
|
<span class="var">font-family</span>: <span class="val">"Google Sans"</span>, sans-serif;
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customise-sidebar">
|
|
<div class="customise-block">
|
|
<p class="customise-block-label">Accent colour</p>
|
|
<div class="accent-swatches">
|
|
<button class="swatch active" style="--c: 245,245,247" data-val="245, 245, 247"
|
|
data-label="Default" aria-label="Default accent colour" aria-pressed="true"></button>
|
|
<button class="swatch" style="--c: 255,250,240" data-val="255, 250, 240" data-label="Warm"
|
|
aria-label="Warm accent colour" aria-pressed="false"></button>
|
|
<button class="swatch" style="--c: 100,160,255" data-val="100, 160, 255" data-label="Blue"
|
|
aria-label="Blue accent colour" aria-pressed="false"></button>
|
|
<button class="swatch" style="--c: 50,200,180" data-val="50, 200, 180" data-label="Teal"
|
|
aria-label="Teal accent colour" aria-pressed="false"></button>
|
|
<button class="swatch" style="--c: 255,100,120" data-val="255, 100, 120" data-label="Rose"
|
|
aria-label="Rose accent colour" aria-pressed="false"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customise-block">
|
|
<p class="customise-block-label">Corner radius - <span class="radius-display">12px</span></p>
|
|
<div class="radius-slider-wrap">
|
|
<input type="range" id="radius-slider" class="radius-slider" min="0" max="24" step="1"
|
|
value="12" aria-label="Corner radius" aria-valuemin="0" aria-valuemax="24"
|
|
aria-valuenow="12" />
|
|
<div class="radius-stops" aria-hidden="true">
|
|
<span data-val="0">0</span>
|
|
<span data-val="4">4</span>
|
|
<span data-val="8">8</span>
|
|
<span data-val="12">12</span>
|
|
<span data-val="16">16</span>
|
|
<span data-val="20">20</span>
|
|
<span data-val="24">24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customise-block">
|
|
<p class="customise-block-label">Preview</p>
|
|
<div class="radius-preview-row">
|
|
<div class="prev-card" id="prev-card">
|
|
<div class="prev-card-img">
|
|
<div class="prev-card-overlay">
|
|
<div class="prev-play-btn" id="prev-play-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="prev-card-bar">
|
|
<div class="prev-card-progress" id="prev-card-progress"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="prev-listitem" id="prev-listitem">
|
|
<div class="prev-listitem-icon" id="prev-listitem-icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" />
|
|
</svg>
|
|
</div>
|
|
<span>Movies</span>
|
|
</div>
|
|
<div class="prev-nav">
|
|
<div class="prev-nav-pill prev-nav-active" id="prev-nav-active">Home</div>
|
|
<div class="prev-nav-pill" id="prev-nav-inactive">Favourites</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customise-block">
|
|
<p class="customise-block-label">Variables</p>
|
|
<table class="var-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="var-name"><code>--abyss-accent</code></td>
|
|
<td class="var-desc">Highlight colour (R, G, B)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="var-name"><code>--abyss-radius</code></td>
|
|
<td class="var-desc">Global corner rounding</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="var-name"><code>--abyss-indicator</code></td>
|
|
<td class="var-desc">Episode count pill colour</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--INSTALL-->
|
|
<section class="section section-install" id="install" aria-labelledby="install-title">
|
|
<div class="section-inner">
|
|
<div class="section-label reveal">Install</div>
|
|
<h2 class="section-title reveal" id="install-title">One click. Done.</h2>
|
|
<p class="section-desc reveal">Download the installer for your platform and run it. It handles everything.
|
|
</p>
|
|
|
|
<!-- OS picker -->
|
|
<div class="os-picker reveal" role="group" aria-label="Select your operating system">
|
|
<button class="os-card" id="os-linux" data-os="linux" aria-pressed="false">
|
|
<svg class="os-icon" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true">
|
|
<g transform="matrix(55, 0, 0, 55, 67, -910)">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M4.53918 2.40715C4.82145 1.0075 6.06066 0 7.49996 0C8.93926 0 10.1785 1.0075 10.4607 2.40715L10.798 4.07944C10.9743 4.9539 11.3217 5.78562 11.8205 6.52763L12.4009 7.39103C12.7631 7.92978 12.9999 8.5385 13.0979 9.17323C13.6747 9.22167 14.1803 9.58851 14.398 10.1283L14.8897 11.3474C15.1376 11.962 14.9583 12.665 14.4455 13.0887L12.5614 14.6458C12.0128 15.0992 11.2219 15.1193 10.6506 14.6944L9.89192 14.1301C9.88189 14.1227 9.87197 14.1151 9.86216 14.1074C9.48973 14.2075 9.09793 14.261 8.69355 14.261H6.30637C5.90201 14.261 5.51023 14.2076 5.13782 14.1074C5.12802 14.1151 5.11811 14.1227 5.10808 14.1301L4.34942 14.6944C3.77811 15.1193 2.98725 15.0992 2.43863 14.6458L0.55446 13.0887C0.0417175 12.665 -0.1376 11.962 0.110281 11.3474L0.602025 10.1283C0.819715 9.58854 1.32527 9.2217 1.90198 9.17324C2 8.5385 2.2368 7.92978 2.59897 7.39103L3.17938 6.52763C3.67818 5.78562 4.02557 4.9539 4.20193 4.07944L4.53918 2.40715ZM10.8445 9.47585C10.6345 9.63293 10.4642 9.84382 10.3561 10.0938L9.58799 11.8713C9.20026 12.0979 8.75209 12.2237 8.28465 12.2237H6.7153C6.24789 12.2237 5.79975 12.0979 5.41203 11.8714L4.64386 10.0938C4.53581 9.8438 4.36552 9.6329 4.15546 9.47582C4.18121 9.15355 4.2689 8.83503 4.41853 8.53826L5.67678 6.04259L5.68433 6.05007C6.68715 7.04458 8.31304 7.04458 9.31585 6.05007L9.32324 6.04274L10.5814 8.53825C10.7311 8.83504 10.8187 9.15357 10.8445 9.47585ZM9.04068 4.26906V3.05592H8.01353V3.85713C8.23151 3.90123 8.44506 3.97371 8.64848 4.07458L9.04068 4.26906ZM6.98638 3.85718V3.05592H5.95923V4.26919L6.3517 4.07458C6.55504 3.97375 6.7685 3.90129 6.98638 3.85718ZM2.03255 10.1864C1.82255 10.1864 1.6337 10.3132 1.55571 10.5066L1.06397 11.7257C0.981339 11.9306 1.04111 12.1649 1.21203 12.3062L3.0962 13.8633C3.27907 14.0144 3.54269 14.0211 3.73313 13.8795L4.49179 13.3152C4.6813 13.1743 4.74901 12.923 4.6557 12.7071L3.69976 10.4951C3.61884 10.3078 3.43316 10.1864 3.22771 10.1864H2.03255ZM13.4443 10.5066C13.3663 10.3132 13.1775 10.1864 12.9674 10.1864H11.7723C11.5668 10.1864 11.3812 10.3078 11.3002 10.4951L10.3443 12.7071C10.251 12.923 10.3187 13.1743 10.5082 13.3152L11.2669 13.8795C11.4573 14.0211 11.7209 14.0144 11.9038 13.8633L13.788 12.3062C13.9589 12.1649 14.0187 11.9306 13.936 11.7257L13.4443 10.5066ZM6.81106 4.98568C7.24481 4.7706 7.75537 4.7706 8.18912 4.98568L8.68739 5.23275L8.58955 5.32978C7.98786 5.92649 7.01232 5.92649 6.41063 5.32978L6.31279 5.23275L6.81106 4.98568Z" />
|
|
</g>
|
|
</svg>
|
|
<span class="os-name">Linux</span>
|
|
<span class="os-ext">.sh</span>
|
|
</button>
|
|
<button class="os-card" id="os-macos" data-os="macos" aria-pressed="false">
|
|
<svg class="os-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
|
</svg>
|
|
<span class="os-name">macOS</span>
|
|
<span class="os-ext">.sh</span>
|
|
</button>
|
|
<button class="os-card" id="os-windows" data-os="windows" aria-pressed="false">
|
|
<svg class="os-icon" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M517.5-442.5H831V-204q0 30.94-22.03 52.97Q786.94-129 756-129H517.5v-313.5Zm0-75V-831H756q30.94 0 52.97 22.03Q831-786.94 831-756v238.5H517.5Zm-75 0H129V-756q0-30.94 22.03-52.97Q173.06-831 204-831h238.5v313.5Zm0 75V-129H204q-30.94 0-52.97-22.03Q129-173.06 129-204v-238.5h313.5Z" />
|
|
</svg>
|
|
<span class="os-name">Windows</span>
|
|
<span class="os-ext">.exe</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Download button; updates based on OS selection -->
|
|
<div class="install-download reveal">
|
|
<a id="download-btn-active" href="https://github.com/AumGupta/abyss-jellyfin/releases/latest"
|
|
target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-large">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="26px" viewBox="0 -960 960 960" width="26px"
|
|
fill="#currentColor">
|
|
<path
|
|
d="M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.72-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.16 50.85Q725.68-192 695.96-192H263.72Z" />
|
|
</svg>
|
|
<span id="download-label-active">Select your platform above</span>
|
|
</a>
|
|
<p class="install-note" id="install-note-active"> </p>
|
|
</div>
|
|
|
|
<!-- Hidden anchors used by JS to resolve URLs -->
|
|
<a id="download-btn-win" href="https://github.com/AumGupta/abyss-jellyfin/releases/latest"
|
|
style="display:none" aria-hidden="true"></a>
|
|
<a id="download-btn-lin" href="https://github.com/AumGupta/abyss-jellyfin/releases/latest"
|
|
style="display:none" aria-hidden="true"></a>
|
|
<span id="download-label-win" style="display:none"></span>
|
|
<span id="download-label-lin" style="display:none"></span>
|
|
|
|
<details class="install-details reveal">
|
|
<summary>Download blocked? Here's why abyss-setup files are 100% safe.</summary>
|
|
<div class="install-details-body">
|
|
<p>To download, click on the <strong>Three dots icon (…)</strong> > <strong>Keep</strong>
|
|
>
|
|
<strong>(Keep anyway)</strong>.
|
|
</p>
|
|
<p>Browsers may warn that the file is unsafe, this happens with new releases that have not yet built
|
|
a download reputation as safe, but it doesn't imply it is not safe : )</p>
|
|
<p>The <code>.exe</code> installer is automatically compiled from <a
|
|
href="https://github.com/AumGupta/abyss-jellyfin/blob/main/setup.ps1" target="_blank"
|
|
rel="noopener noreferrer"><code>setup.ps1</code></a> and the <code>.sh</code> installer from
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/blob/main/setup.sh" target="_blank"
|
|
rel="noopener noreferrer"><code>setup.sh</code></a> via <a
|
|
href="https://github.com/AumGupta/abyss-jellyfin/actions" target="_blank"
|
|
rel="noopener noreferrer">GitHub Actions</a> on every release. You can read every line
|
|
before running.
|
|
</p>
|
|
<p>The installer asks for your Jellyfin server URL, admin username, and password. These are sent
|
|
directly to your own local Jellyfin server using the standard Jellyfin API, the same one your
|
|
browser uses when you log in. Nothing is sent to any external server and credentials are never
|
|
stored anywhere.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="install-divider reveal"><span>or install manually</span></div>
|
|
<p class="install-manual-desc reveal">Don't wish to run the setup files? Install Abyss manually! Follow the
|
|
<strong><a href="https://github.com/AumGupta/abyss-jellyfin/blob/main/SETUP.md#manual-setup">Manual
|
|
Setup</a></strong>.
|
|
<br>Use Jellyfin in Docker? Follow the
|
|
<strong><a href="https://github.com/AumGupta/abyss-jellyfin/blob/main/SETUP.md#docker">Docker
|
|
Installation</a></strong> steps.
|
|
<br>
|
|
<br>Use additional plugins with Jellyfin? Follow the
|
|
<strong><a href="https://github.com/AumGupta/abyss-jellyfin/blob/main/SETUP.md#plugin-support">Plugin
|
|
Support</a></strong> steps.
|
|
</p>
|
|
|
|
<div class="install-links reveal">
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/releases" target="_blank" rel="noopener noreferrer"
|
|
class="btn btn-ghost">All Releases</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin" target="_blank" rel="noopener noreferrer"
|
|
class="btn btn-ghost">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
|
|
</svg>
|
|
View on GitHub
|
|
</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/issues" target="_blank" rel="noopener noreferrer"
|
|
class="btn btn-ghost">Report an Issue</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--FOOTER-->
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="footer-inner">
|
|
<div class="footer-left">
|
|
<a href="#" class="nav-logo" aria-label="Abyss home">
|
|
<img src="assets/favicon/apple-touch-icon.png" alt="Abyss logo" class="nav-icon" width="26"
|
|
height="26" />
|
|
<span>Abyss</span>
|
|
</a>
|
|
<p>A minimal dark theme for Jellyfin.</p>
|
|
</div>
|
|
<div class="footer-right">
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin" target="_blank"
|
|
rel="noopener noreferrer">GitHub</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/releases" target="_blank"
|
|
rel="noopener noreferrer">Releases</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/issues" target="_blank"
|
|
rel="noopener noreferrer">Issues</a>
|
|
<a href="https://github.com/AumGupta/abyss-jellyfin/blob/main/LICENSE" target="_blank"
|
|
rel="noopener noreferrer">MIT License</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>Made with care by <a href="https://github.com/AumGupta" target="_blank"
|
|
rel="noopener noreferrer">AumGupta</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scroll to top -->
|
|
<button class="scroll-top" id="scroll-top" aria-label="Scroll to top">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 15l-6-6-6 6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |