Top viewed block style fixes

src/components/Feed/Beside.module.scss

@@ -19,24 +19,41 @@
     }
 
     &.top {
+      background-color: transparent;
       border-bottom: 1px solid #e1e1e1;
       display: flex;
       justify-content: space-between;
       line-height: 1;
-      margin-bottom: 1.5rem;
-      padding-bottom: 1.5rem;
+      margin: 0;
+      padding: 1.5rem 0;
       position: relative;
+      transition: background-color 0.2s;
 
       &:last-child {
         border: none;
         margin-bottom: 0;
-        padding-bottom: 0;
 
         .shoutCardContent {
           margin-bottom: 0;
         }
       }
 
+      &:hover {
+        background: #000;
+
+        &::after {
+          color: #fff;
+        }
+
+        a:link,
+        a:visited {
+          &,
+          * {
+            color: #fff !important;
+          }
+        }
+      }
+
       &::after {
         content: counter(item, upper-roman);
         counter-increment: item;
@@ -47,6 +64,13 @@
         min-width: 1.4em;
         padding-left: 0.3em;
         text-align: center;
+        transition: color 0.2s;
+      }
+
+      a:link {
+        &:hover {
+          background: none;
+        }
       }
     }
   }
@@ -59,6 +83,15 @@
   }
 }
 
+.besideColumnTopViewed {
+  margin-top: 0;
+
+  li.top {
+    margin-left: -0.3em;
+    padding-left: 0.3em;
+  }
+}
+
 .besideColumnTitle {
   align-items: baseline;
   justify-content: space-between;

src/components/Feed/Beside.tsx

@@ -62,7 +62,11 @@ export const Beside = (props: Props) => {
                     </Show>
                   </div>
                 </Show>
-                <ul class={styles.besideColumn}>
+                <ul
+                  class={clsx(styles.besideColumn, {
+                    [styles.besideColumnTopViewed]: props.wrapper === 'top-article',
+                  })}
+                >
                   <For each={[...props.values]}>
                     {(value: Partial<Shout | User | Topic>) => (
                       <li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>