fix(css): adds active css on clickable links

Author: dvcol

src/components/common/buttons/AnchorLink.vue

@@ -73,7 +73,9 @@ const onTitleClick = (e: MouseEvent) => {
   will-change: color;
 
   .hover-link {
-    transition: color 0.3s var(--n-bezier);
+    transition:
+      color 0.3s var(--n-bezier),
+      filter 0.3s var(--n-bezier);
     will-change: color;
 
     &:active,
@@ -82,13 +84,22 @@ const onTitleClick = (e: MouseEvent) => {
     &:focus-visible {
       color: var(--trakt-red);
     }
+
+    &:active {
+      filter: saturate(1.5);
+    }
   }
 
+  &:active,
   &:hover,
   &:focus-visible .hover-link {
     color: var(--trakt-red);
   }
 
+  &:active {
+    filter: saturate(1.5);
+  }
+
   .content {
     margin: 0;
   }

src/components/common/buttons/TagLink.vue

@@ -101,7 +101,6 @@ const onClick = (e: MouseEvent) => {
     padding-left: 0.15rem;
   }
 
-  &:active,
   &:focus-within,
   &:hover {
     background-color: color-mix(
@@ -114,5 +113,17 @@ const onClick = (e: MouseEvent) => {
       filter: saturate(1.5);
     }
   }
+
+  &:active {
+    background-color: color-mix(
+      in srgb,
+      var(--n-close-icon-color-hover),
+      transparent 80%
+    );
+
+    .label {
+      filter: saturate(1.25);
+    }
+  }
 }
 </style>

src/components/common/list/ListItem.vue

@@ -273,11 +273,17 @@ const onClick = () => emit('onItemClick', { item: item?.value });
       @include mixin.hover-background(
         $from: transparent,
         $to: var(--bg-color-20),
-        $transition: 0.2s var(--n-bezier)
+        $transition: 0.4s var(--n-bezier)
       );
 
       flex: 1 1 auto;
       padding: 0.5rem;
+      border-radius: 1.15rem;
+
+      &:active {
+        background-color: var(--bg-color-30);
+        box-shadow: var(--inset-box-shadow);
+      }
     }
 
     .placeholder {

src/styles/base.scss

@@ -60,6 +60,7 @@
   --bg-black: rgba(0 0 0);
   --bg-black-20: rgba(0 0 0 / 20%);
   --bg-black-30: rgba(0 0 0 / 30%);
+  --bg-black-40: rgba(0 0 0 / 40%);
   --bg-black-50: rgba(0 0 0 / 50%);
   --bg-black-60: rgba(0 0 0 / 60%);
   --bg-black-70: rgba(0 0 0 / 70%);
@@ -149,10 +150,6 @@
   /* Transforms */
   --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Bow shadows */
-  --image-box-shadow: 0 0 20px 9px rgb(255 255 255 / 10%);
-  --image-box-shadow-hover: 0 0 20px 9px rgb(255 255 255 / 18%);
-  --card-box-shadow: 0 1px 2px -2px rgb(0 0 0 / 24%), 0 3px 6px 0 rgb(0 0 0 / 18%), 0 5px 12px 4px rgb(0 0 0 / 12%);
 
   /* semantic color variables for this project */
   --section-gap: 160px;
@@ -167,6 +164,7 @@
   /* ui color variables */
   --bg-color-20: var(--bg-black-20);
   --bg-color-30: var(--bg-black-30);
+  --bg-color-40: var(--bg-black-40);
   --bg-color-50: var(--bg-black-50);
   --bg-color-60: var(--bg-black-60);
   --bg-color-70: var(--bg-black-70);
@@ -175,6 +173,12 @@
   --bg-color: var(--bg-color-30);
   --bg-color-hover: var(--bg-black-60);
 
+  /* Bow shadows */
+  --image-box-shadow: 0 0 20px 9px var(--white-10);
+  --image-box-shadow-hover: 0 0 20px 9px rgb(255 255 255 / 18%);
+  --card-box-shadow: 0 1px 2px -2px rgb(0 0 0 / 24%), 0 3px 6px 0 rgb(0 0 0 / 18%), 0 5px 12px 4px rgb(0 0 0 / 12%);
+  --inset-box-shadow: inset 0 0 20px 6px var(--bg-color-40);
+
   @media (prefers-color-scheme: dark) {
     /* semantic color variables for this project */
     --color-background: var(--vt-c-black);