feat(directory): updated office_update style

directory/src/routes/path/Home.jsx

@@ -7,6 +7,7 @@ import React, {
 import PropTypes from 'prop-types';
 import {
   NavLink,
+  Link,
 } from "react-router-dom";
 import classes from '@/scss/home/Home.module.scss'
 import { useConfig } from '@/state/config';
@@ -166,28 +167,45 @@ export default function Home() {
   return (
     <section>
       {
-        officalUpdate.length === operators.length && (
+        officalUpdate.length > operators.length && (
           <section>
             <section className={classes['offical-update']}>
               <section className={classes.info}>
                 <section className={classes.content}>
                   <section className={classes.text}>{officalUpdate.length - operators.length} {i18n("new_op_wait_to_update")}</section>
-                  {officalUpdate[officalUpdate.latest].map((entry, index) => {
+                  <section className={`${classes['styled-selection']}`}>
-                    return (
+                    {officalUpdate[officalUpdate.latest].map((entry, index) => {
-                      <section className={classes.container} key={index}>
+                      return (
-                        <section className={classes.type}>
+                        <Link
-                          <CharIcon
+                          reloadDocument
-                            type={entry.type}
+                          to={entry.link}
-                            viewBox={
+                          target='_blank'
-                              entry.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                          style={{
-                            } />
+                            color: entry.color
-                        </section>
+                          }}
-                        <section className={classes.title}>
+                          key={index}
-                          {entry.codename[language]}
+                          >
-                        </section>
+                          <section className={classes.content}>
-                      </section>
+                            <section className={classes.option}>
-                    )
+                              <section className={classes.outline} />
-                  })}
+                              <section className={`${classes.text} ${classes.container}`}>
+                                <section className={classes.type}>
+                                  <CharIcon
+                                    type={entry.type}
+                                    viewBox={
+                                      entry.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                                    } />
+                                </section>
+                                <section className={classes.title}>
+                                  {entry.codename[language]}
+                                </section>
+                              </section>
+                            </section>
+                          </section>
+                        </Link>
+                      )
+                    })}
+                  </section>
                 </section>
 
               </section>

directory/src/scss/_page_base.scss

@@ -151,3 +151,114 @@
     }
   }
 }
+
+.styled-selection {
+    margin-bottom: 0.8rem;
+
+    .content {
+      padding: 0.8rem 0;
+      cursor: pointer;
+      transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+      .option {
+        pointer-events: none;
+        position: relative;
+        transform: translate3d(0, 0, 1px);
+        font-size: 1rem;
+        padding: 0.44rem 2.25rem 0.44rem 0.63rem;
+        background-color: var(--home-item-hover-background-color);
+        background-image: repeating-linear-gradient(
+          90deg,
+          var(--home-item-background-linear-gradient-color) 0,
+          var(--home-item-background-linear-gradient-color) 1px,
+          transparent 1px,
+          transparent 4px
+        );
+        transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+        .outline {
+          width: 100%;
+          height: 100%;
+          left: -6px;
+          top: -6px;
+          border: var(--home-item-outline-color) 1px dashed;
+          padding: 6px;
+
+          &:before,
+          &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: -2px;
+            height: 2px;
+            width: 100%;
+            border-left: var(--text-color) solid 2px;
+            border-right: var(--text-color) solid 2px;
+          }
+
+          &:before {
+            top: -2px;
+          }
+
+          &:after {
+            bottom: -2px;
+          }
+        }
+
+        &:before,
+        .outline {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: -1;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
+            visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+        }
+
+        &:before {
+          right: 0;
+          top: 0;
+          width: 60%;
+          height: 100%;
+          background-image: linear-gradient(90deg, transparent, currentColor);
+        }
+
+        .tick-icon {
+          display: inline-block;
+          position: absolute;
+          z-index: 0;
+          right: 0.31rem;
+          top: 50%;
+          width: 0.5rem;
+          height: 1rem;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
+            visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+          border-right: var(--text-color) solid 0.25rem;
+          border-bottom: var(--text-color) solid 0.25rem;
+          transform: translate(-50%, -70%) rotate(45deg);
+        }
+      }
+
+      &:hover,
+      &.active {
+        transform: translate3d(6px, 0, 1px);
+
+        .option:before,
+        .option .outline {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+
+      &.active {
+        .option .tick-icon {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }

directory/src/scss/home/Home.module.scss

@@ -14,12 +14,8 @@
     margin-top: 1.25rem;
     .content {
       font-size: 1.5rem;
-      .text {
-        padding-bottom: 1rem;
-      }
     }
     .container {
-      margin-left: 2.5rem;
       .title {
         margin-left: 0.5rem;
       }