brandon/NotPlexApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update design and color theming, still WIP

Browse Source
This commit is contained in:
Brandon Brunson
2025-05-30 15:38:13 -07:00
parent f8f04c19cf
commit 429a575d98
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -3,50 +3,50 @@
<head>
<meta charset="UTF-8">
<title>NotPlexApp</title>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script>
<!-- <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script> -->
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: rgb(46, 46, 46); /* Dark grey background */
color: #eee; /* Light text for contrast */
}
/* Tabs style */
#tabs {
display: flex;
background: #333;
background: #444; /* Darker grey for tab background */
}
#tabs button {
flex: 1;
padding: 10px;
color: #fff;
background: #444;
background: #555; /* Dark grey button color */
border: none;
cursor: pointer;
font-size: 16px;
}
#tabs button.active {
background: #222;
background: #333; /* Even darker for active state */
}
/* Content lists (item grids inside each section) */
.content-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
overflow-x: visible; /* ensure no horizontal scrolling */
/* Optional: force items to wrap into multiple rows */
gap: 0px;
overflow-x: visible;
grid-auto-rows: auto;
}
/* Section‐container: stack each <section> as a row */
.section-list {
display: flex;
flex-direction: column;
gap: 40px; /* space between sections */
gap: 40px;
padding: 20px;
box-sizing: border-box;
height: calc(100% - 48px); /* adjust for tab height */
height: calc(100% - 48px);
overflow-y: auto;
background-color: #f1f1f1;
}
.movie-item {
cursor: pointer;
@@ -54,14 +54,15 @@
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
background: transparent; /* removed white background */
padding: 0; /* removed padding */
box-shadow: none; /* removed box-shadow */
}
.movie-item img {
width: 200px;
width: 180px; /* reduced width */
height: auto;
margin-bottom: 10px;
border-radius: 5px; /* added rounded corners */
}
/* Overlay for details/stream */
#overlay {