x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

style(dashboard): refine hover effects and transitions for activity items and continue watching widget

Browse Source
This commit is contained in:
4gray committed 2026-03-14 23:40:51 +01:00
1 parent 9f581d0d84
commit fbe31b701b
4 files changed
+15 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

libs/workspace/dashboard/ui/src/lib/widgets/continue-watching-widget.component.scss
+9 -11
View File
@@ -26,17 +26,16 @@
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
transition:
background-color 0.18s ease,
color 0.18s ease;
min-width: 0;
&:hover {
background: var(--mat-sys-surface-container);
border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--app-eyebrow-color) 40%);
transform: translateY(-2px);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
background: var(--app-selection-surface);
.hero__play mat-icon {
color: var(--mat-sys-primary);
color: var(--app-selection-color);
transform: scale(1.1);
}
}
@@ -285,13 +284,12 @@
text-decoration: none;
color: inherit;
min-width: 0;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.2s ease, box-shadow 0.2s ease;
transition:
background-color 0.18s ease,
color 0.18s ease;
&:hover {
border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--app-eyebrow-color) 40%);
background: var(--mat-sys-surface-container-high);
transform: translateY(-2px);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
background: var(--app-selection-surface);
}
}
libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.html
+1 -1
View File
@@ -36,7 +36,7 @@
loading="lazy"
(error)="markImageAsFailed(item.id)"
/>
} @else if (viewMode() === 'grid') {
} @else {
<mat-icon>{{ getFallbackIcon(item) }}</mat-icon>
}
</span>
libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.scss
+4 -20
View File
@@ -54,7 +54,9 @@
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
transition:
background-color 0.18s ease,
color 0.18s ease;
}
.activity-item__action-btn {
@@ -89,14 +91,7 @@
}
.activity-item:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--mat-sys-primary) 40%);
background: linear-gradient(
180deg,
var(--mat-sys-surface-container-high) 0%,
var(--mat-sys-surface-container-low) 100%
);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
background: var(--app-selection-surface);
}
.activity-item__media {
@@ -218,17 +213,6 @@
gap: 5px;
padding: 5px;
position: relative;
&:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--mat-sys-primary) 40%);
background: linear-gradient(
180deg,
var(--mat-sys-surface-container-high) 0%,
var(--mat-sys-surface-container-low) 100%
);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
}
}
// In grid mode: float the remove button over the top-right corner
libs/workspace/dashboard/ui/src/lib/widgets/dashboard-widget-shell.component.scss
+1 -1
View File
@@ -71,7 +71,7 @@
gap: 12px;
min-height: 0;
flex: 1;
padding: 0 16px 12px;
padding: 5px 16px 12px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;