wisecolt/dupe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI değişikliği

Browse Source
This commit is contained in:
szbk
2025-10-28 15:04:38 +03:00
parent 8e07fb4e05
commit b56c7ebfcb
2 changed files with 206 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/routes/Files.svelte
View File

@@ -961,7 +961,11 @@ let isPlaying = false;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease;
box-shadow 0.18s ease,
flex-direction 0.3s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.media-card::after {
@@ -1007,6 +1011,7 @@ let isPlaying = false;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.media-card:hover {
transform: none;
@@ -1061,6 +1066,7 @@ let isPlaying = false;
width: 100%;
height: 150px;
object-fit: cover;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumb.placeholder {
display: flex;
@@ -1074,6 +1080,7 @@ let isPlaying = false;
display: flex;
flex-direction: column;
gap: 4px;
transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.name {
font-weight: 600;
@@ -1085,6 +1092,7 @@ let isPlaying = false;
.size {
font-size: 12px;
color: #666;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.media-card.list-view .info {
flex: 1;
@@ -1099,6 +1107,9 @@ let isPlaying = false;
}
.list-meta {
display: none;
opacity: 0;
max-height: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.media-card.list-view .list-meta {
display: flex;
@@ -1106,6 +1117,8 @@ let isPlaying = false;
gap: 4px;
font-size: 13px;
color: #7a7a7a;
opacity: 1;
max-height: 200px;
}
.meta-line.primary {
display: flex;

214
client/src/routes/TvShows.svelte
View File

@@ -689,13 +689,6 @@ async function openVideoAtIndex(index) {
role="tab"
aria-selected={selectedSeason?.seasonNumber === season.seasonNumber}
>
{#if season.poster}
<span
class="season-thumb"
style={`background-image: url(${assetUrl(season.poster)});`}
aria-hidden="true"
></span>
{/if}
<span class="season-label">
{season.name || `Season ${season.seasonNumber}`}
</span>
@@ -1165,10 +1158,11 @@ async function openVideoAtIndex(index) {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 6px 2px 10px;
padding: 10px 2px 14px;
scrollbar-width: thin;
background: rgba(0, 0, 0, 0.25);
border-radius: 14px;
min-height: 80px;
}
.season-picker button {
@@ -1176,15 +1170,16 @@ async function openVideoAtIndex(index) {
color: #f5f5f5;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 6px 14px 6px 10px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 62px;
gap: 8px;
min-height: 60px;
justify-content: center;
}
.season-picker button.selected {
@@ -1193,17 +1188,6 @@ async function openVideoAtIndex(index) {
border-color: rgba(0, 0, 0, 0.15);
}
.season-thumb {
width: 44px;
height: 60px;
border-radius: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.season-label {
font-weight: 600;
display: inline-flex;
@@ -1520,4 +1504,190 @@ async function openVideoAtIndex(index) {
width: 100%;
}
}
/* Responsive design for smaller screens */
@media (max-width: 1200px) {
.tv-overlay-content {
width: min(920px, 92vw);
padding: 24px;
gap: 20px;
}
.detail-poster {
flex: 0 0 200px;
}
.episode-list {
max-height: 240px;
}
}
@media (max-width: 768px) {
.tv-overlay {
padding: 20px 16px;
}
.tv-overlay-content {
width: min(100%, 96vw);
max-height: 95vh;
padding: 20px;
gap: 16px;
}
.detail-body {
gap: 16px;
}
.detail-poster {
flex: 0 0 160px;
}
.detail-title {
font-size: 24px;
}
.detail-submeta {
font-size: 14px;
}
.detail-overview {
font-size: 14px;
}
.episode-list {
max-height: 200px;
gap: 12px;
}
.episode-card {
padding: 10px;
gap: 12px;
}
.episode-still {
flex: 0 0 140px;
}
.episode-title {
font-size: 15px;
}
.episode-meta {
font-size: 12px;
gap: 8px;
}
.episode-overview {
font-size: 13px;
}
.season-picker {
gap: 8px;
padding: 8px 2px 12px;
min-height: 70px;
}
.season-picker button {
padding: 6px 12px;
min-height: 54px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.tv-overlay {
padding: 16px 12px;
}
.tv-overlay-content {
width: 100%;
max-height: 98vh;
padding: 16px;
gap: 14px;
border-radius: 16px;
}
.detail-body {
gap: 14px;
}
.detail-poster {
flex: 0 0 120px;
}
.detail-title {
font-size: 20px;
}
.detail-submeta {
font-size: 13px;
flex-wrap: wrap;
gap: 6px;
}
.detail-overview {
font-size: 13px;
line-height: 1.5;
}
.detail-tech {
gap: 8px;
}
.detail-tech-item {
padding: 4px 10px;
font-size: 12px;
}
.episode-list {
max-height: 180px;
gap: 10px;
}
.episode-card {
padding: 8px;
gap: 10px;
border-radius: 12px;
}
.episode-still {
flex: 0 0 100px;
border-radius: 8px;
}
.episode-title {
font-size: 14px;
}
.episode-meta {
font-size: 11px;
gap: 6px;
}
.episode-overview {
font-size: 12px;
line-height: 1.4;
}
.season-picker {
gap: 6px;
padding: 6px 1px 10px;
min-height: 64px;
}
.season-picker button {
padding: 4px 10px;
min-height: 48px;
font-size: 12px;
border-radius: 10px;
}
.season-label {
font-size: 12px;
}
.season-count {
font-size: 11px;
}
}
</style>