diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less
index beb874f6b..a2e8effa7 100644
--- a/src/routes/Calendar/List/Item/Item.less
+++ b/src/routes/Calendar/List/Item/Item.less
@@ -49,10 +49,30 @@
.info {
flex: none;
+ display: block;
+ }
+
+ .icon {
+ flex: none;
+ display: none;
+ width: 2rem;
+ height: 2rem;
+ padding: 0.5rem;
+ border-radius: 50%;
+ color: var(--primary-foreground-color);
+ background-color: var(--secondary-accent-color);
}
&:hover {
background-color: var(--overlay-color);
+
+ .info {
+ display: none;
+ }
+
+ .icon {
+ display: block;
+ }
}
}
}
diff --git a/src/routes/Calendar/List/Item/Item.tsx b/src/routes/Calendar/List/Item/Item.tsx
index 64e9cc03c..cc48d5197 100644
--- a/src/routes/Calendar/List/Item/Item.tsx
+++ b/src/routes/Calendar/List/Item/Item.tsx
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useEffect, useMemo, useRef } from 'react';
+import Icon from '@stremio/stremio-icons/react';
import classNames from 'classnames';
import { Button } from 'stremio/common';
import useCalendarDate from '../../useCalendarDate';
@@ -58,6 +59,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
S{season}E{episode}
+
))
}
diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 25b7b4a48..c47fc4901 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -48,14 +48,48 @@
.item {
flex: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
height: 100%;
aspect-ratio: 2 / 3;
border-radius: var(--border-radius);
+ .icon {
+ flex: none;
+ z-index: 1;
+ position: absolute;
+ width: 2rem;
+ height: 2rem;
+ padding: 0.5rem;
+ border-radius: 50%;
+ color: var(--primary-foreground-color);
+ background-color: var(--secondary-accent-color);
+ opacity: 0;
+ }
+
.poster {
+ flex: auto;
+ z-index: 0;
+ position: relative;
height: 100%;
width: 100%;
object-fit: cover;
+ opacity: 1;
+ }
+
+ .icon, .poster {
+ transition: opacity 0.1s ease-out;
+ }
+
+ &:hover {
+ .icon {
+ opacity: 1;
+ }
+
+ .poster {
+ opacity: 0.5;
+ }
}
}
}
diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
index 471ecc4f6..76442a640 100644
--- a/src/routes/Calendar/Table/Cell/Cell.tsx
+++ b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo } from 'react';
+import Icon from '@stremio/stremio-icons/react';
import classNames from 'classnames';
import { Button, Image, HorizontalScroll } from 'stremio/common';
import styles from './Cell.less';
@@ -41,6 +42,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
{
items.map(({ id, name, poster, deepLinks }) => (