Improved calendar style

pages/animelist/animelist.scarlet

@@ -21,10 +21,7 @@
 	display flex
 
 .anime-list-item-image
-	width 39px
+	anime-list-item-image
-	height 39px
-	border-radius 2px
-	object-fit cover
 
 .anime-list-item-name
 	flex 1

pages/calendar/calendar.pixy

@@ -11,11 +11,10 @@ component Calendar(days []*utils.CalendarDay, user *arn.User)
 				h3.weekday-name.mountable(data-mountable-type=day.Name)= day.Name
 				.calendar-entries
 					each entry in day.Entries
-						.calendar-entry.mountable(data-mountable-type=day.Name, data-added=entry.Added)
+						a.calendar-entry.mountable.ajax(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added)
-							a.ajax(href=entry.Anime.Link())
+							img.calendar-entry-image.lazy(data-src=entry.Anime.Image("small"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
-								img.calendar-entry-image.lazy(data-src=entry.Anime.Image("large"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
-							a.ajax(href=entry.Anime.Link())
-								.calendar-entry-title= entry.Anime.Title.ByUser(user)
 							.calendar-entry-info
-								.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
+								.calendar-entry-title= entry.Anime.Title.ByUser(user)
-								.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
+								.calendar-entry-time-and-episode
+									.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
+									.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

pages/calendar/calendar.scarlet

@@ -22,28 +22,45 @@
 	vertical
 
 .calendar-entry
-	ui-element
+	horizontal
-	padding 0.5rem 1rem
+	default-transition
-	margin-bottom 0.5rem
+	border-radius ui-element-border-radius
+	padding 0.5rem 0.6rem
+	margin-bottom 0.4rem
 	overflow hidden
 
+	:hover
+		background calendar-hover-color
+		box-shadow outline-shadow-light
+
 .calendar-entry-image
-	width 100%
+	anime-list-item-image
-	height 4rem
-	object-fit cover
 
 .calendar-entry[data-added="true"]
-	border 2px solid main-color
+	background calendar-entry-seen-background
+	box-shadow outline-shadow-light
+	border ui-border
 
 	:hover
-		border-color main-color
+		background calendar-entry-seen-hover-background
 
 .calendar-entry-info
-	horizontal
+	vertical
+	overflow hidden
+	margin-left 0.8rem
+	flex 1
 
 .calendar-entry-title
 	clip-long-text
-	margin-top 0.4rem
+	flex 0.5
+	line-height 1.2em
+
+.calendar-entry-time-and-episode
+	horizontal
+	flex 0.5
+	color text-color
+	line-height 1.6em
+	text-shadow none
 
 .calendar-entry-time
 	opacity 0.85

scripts/Actions/Theme.ts

@@ -37,7 +37,9 @@ let dark = {
 	"post-unlike-color": "var(--link-color)",
 	"post-permalink-color": "var(--link-color)",
 
-	"quote-color" : "var(--text-color)"
+	"quote-color": "var(--text-color)",
+
+	"calendar-hover-color": "var(--reverse-light-color)"
 }
 
 // Toggle theme

styles/include/config.scarlet

@@ -9,6 +9,7 @@ pro-color = hsla(0, 100%, 73%, 0.87)
 anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
 reverse-light-color = rgba(0, 0, 0, 0.05)
 reverse-light-hover-color = rgba(0, 0, 0, 0.1)
+reverse-light-lite-color = rgba(0, 0, 0, 0.02)
 
 theme-white = bg-color
 theme-black = text-color
@@ -68,6 +69,11 @@ post-permalink-color = blue !important
 table-row-hover-background = hsla(0, 0%, 0%, 0.01)
 anime-list-item-name-color = link-color
 
+// Calendar
+calendar-hover-color = rgba(255, 255, 255, 0.4)
+calendar-entry-seen-background = ui-background
+calendar-entry-seen-hover-background = ui-background
+
 // Tables
 table-width-normal = 900px
 

styles/include/dark.scarlet

@@ -37,4 +37,7 @@
 // post-permalink-color = link-color
 
 // // Quote
-// quote-color = text-color
+// quote-color = text-color
+
+// Calendar
+// calendar-hover-color = reverse-light-color

styles/include/mixins.scarlet

@@ -64,6 +64,12 @@ mixin anime-mini-item-image
 	:hover
 		filter saturate(1.3)
 
+mixin anime-list-item-image
+	width 39px
+	height 39px
+	border-radius 2px
+	object-fit cover
+
 mixin sidebar
 	vertical
 	margin-left 0