Optimise

public/style.css

@@ -0,0 +1,84 @@
+.ws340 {
+	width: 340px;
+}
+.themed {
+	--theme-base-primary-color-h: 191;
+	--theme-base-primary-color-s: 37%;
+	--theme-base-primary-color-l: 48%;
+	--theme-dark-primary-color-h: 191;
+	--theme-dark-primary-color-s: 45%;
+	--theme-dark-primary-color-l: 60%;
+}
+.s-navigation--item.is-loading svg, .s-tag.is-loading svg, .s-sidebarwidget.is-loading svg {
+	visibility: hidden;
+}
+.s-btn__icon.is-loading {
+	--_li-offset: 0.7em;
+	--_il-size: 1.5em;
+}
+.s-btn__icon.is-loading svg {
+	display: none;
+}
+.s-navigation__toggle.s-navigation {
+	--_na-item-bg: var(--black-150);
+}
+.duration-last-col td:last-child {
+	text-align: right;
+	white-space: pre;
+}
+.s-tag {
+	white-space: normal;
+}
+.s-sidebarwidget th {
+	font-weight: normal;
+	color: var(--black-400);
+	text-align: right;
+}
+.wc-hl {
+	cursor: pointer;
+	color: blue;
+	outline: 1px solid black;
+}
+svg {
+	flex-shrink: 0;
+}
+button.s-link.is-loading {
+	padding-left: 2.2em;
+}
+
+/* album covers are done with styles instead of attributes to reduce bytes of html needing to be downloaded and parsed */
+.cover {
+	--_li-fc: var(--black);
+	--_li-fc-visited: var(--black-400);
+	display: block;
+}
+.cover p {
+	font-size: var(--fs-body3);
+	margin-top: 4px;
+	margin-bottom: 7px;
+}
+.cover picture {
+	position: relative;
+	display: flex;
+}
+.cover svg {
+	pointer-events: none;
+	position: absolute;
+	opacity: 0;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	transition: 1s ease-out;
+	color: var(--black);
+}
+.cover:hover svg {
+	transition: 1.5s ease-out 0.7s;
+	opacity: 1;
+}
+.cover img {
+	transition: 1s ease-out;
+}
+.cover:hover img {
+	transition: 2s ease-out 0.7s;
+	opacity: 0.3;
+}