chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): updated office_update style

Browse Source
This commit is contained in:
Haoyu Xu
2023-10-13 23:46:44 -04:00
parent a9a5d90165
commit f53805744e
3 changed files with 146 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
directory/src/routes/path/Home.jsx
View File

@@ -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,15 +167,28 @@ 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>
<section className={`${classes['styled-selection']}`}>
{officalUpdate[officalUpdate.latest].map((entry, index) => {
return (
<section className={classes.container} key={index}>
<Link
reloadDocument
to={entry.link}
target='_blank'
style={{
color: entry.color
}}
key={index}
>
<section className={classes.content}>
<section className={classes.option}>
<section className={classes.outline} />
<section className={`${classes.text} ${classes.container}`}>
<section className={classes.type}>
<CharIcon
type={entry.type}
@@ -186,9 +200,13 @@ export default function Home() {
{entry.codename[language]}
</section>
</section>
</section>
</section>
</Link>
)
})}
</section>
</section>
</section>
<section className={classes.date}>{officalUpdate.latest}</section>

111
directory/src/scss/_page_base.scss
View File

@@ -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;
}
}
}
}

4
directory/src/scss/home/Home.module.scss
View File

@@ -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;
}