ai/card
ai/card
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-04-11 03:25:22 +09:00
parent 26260f6a06
commit dce1950909
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public

@ -1 +1 @@
Subproject commit 77f615901cfb5d9b07a29c122643192aa3c2b89a Subproject commit 2754a9d583749fd74cac330a182d9e16097be021

25
src/App.vue
View File

@ -76,7 +76,7 @@
<span class="card-fav" v-if="card_origin_status"> <span class="card-fav" v-if="card_origin_status">
<span class="card-fav" v-for="k in cards.data"> <span class="card-fav" v-for="k in cards.data">
<tr class="card-status-first" v-if="k.status == 'first' || k.status == 'second' || k.status == 'second' || k.status == 'third' || k.status == 'fourth' || k.status == 'fifth' || k.status == 'sixth' || k.status == 'yui'" > <tr class="card-status-first" v-if="k.status == 'yui' || k.status == 'first' || k.status == 'second' || k.status == 'second' || k.status == 'third' || k.status == 'fourth' || k.status == 'fifth' || k.status == 'sixth' || k.status == 'seven'" >
<span class="card-wrapper"> <span class="card-wrapper">
<span class="reflection"> <span class="reflection">
<img :src='"/card/card_" + k.card + ".webp"' class="card"> <img :src='"/card/card_" + k.card + ".webp"' class="card">
@ -151,7 +151,7 @@
</span> </span>
<thead v-if="ii.status == 'first' || ii.status == 'second' || ii.status == 'second' || ii.status == 'third' || ii.status == 'fourth' || ii.status == 'fifth' || ii.status == 'sixth' || ii.status == 'yui'" class="card-fav"> <thead v-if="ii.status == 'yui' || ii.status == 'first' || ii.status == 'second' || ii.status == 'second' || ii.status == 'third' || ii.status == 'fourth' || ii.status == 'fifth' || ii.status == 'sixth' || ii.status == 'seven'" class="card-fav">
<tr class="card-status-first"> <tr class="card-status-first">
<span class="card-wrapper"> <span class="card-wrapper">
<span class="reflection"> <span class="reflection">
@ -1383,15 +1383,30 @@ span.color-sixth {
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
span.card-wrapper:hover > span.pattern-yui,span.card-wrapper:hover > span.pattern-first,span.card-wrapper:hover > span.pattern-second,span.card-wrapper:hover > span.pattern-third,span.card-wrapper:hover > span.pattern-fourth,span.card-wrapper:hover > span.pattern-fifth,span.card-wrapper:hover > span.pattern-sixth { span.pattern-seven {
background: repeating-radial-gradient(circle at center, #f1f1f1, #313131 3px, #fff700 3px);
background-position: 50% 50%;
background-size: 120% 120%;
mix-blend-mode: color-dodge;
opacity: 0.3;
}
span.color-seven {
background: linear-gradient(115deg, transparent 20%, #f1f1f1 30%, transparent 48% 52%, #313131 70%, transparent);
background-position: 50% 50%;
background-size: 200% 200%;
mix-blend-mode: overlay;
}
span.card-wrapper:hover > span.pattern-yui,span.card-wrapper:hover > span.pattern-first,span.card-wrapper:hover > span.pattern-second,span.card-wrapper:hover > span.pattern-third,span.card-wrapper:hover > span.pattern-fourth,span.card-wrapper:hover > span.pattern-fifth, span.card-wrapper:hover > span.pattern-sixth, span.card-wrapper:hover > span.pattern-seven {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%)); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
} }
span.card-wrapper:hover > span.color-yui,span.card-wrapper:hover > span.color-first,span.card-wrapper:hover > span.color-second,span.card-wrapper:hover > span.color-third,span.card-wrapper:hover > span.color-fourth,span.card-wrapper:hover > span.color-fifth,span.card-wrapper:hover > span.color-sixth { span.card-wrapper:hover > span.color-yui,span.card-wrapper:hover > span.color-first,span.card-wrapper:hover > span.color-second,span.card-wrapper:hover > span.color-third,span.card-wrapper:hover > span.color-fourth,span.card-wrapper:hover > span.color-fifth, span.card-wrapper:hover > span.color-sixth, span.card-wrapper:hover > span.color-seven {
background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%)); background-position: calc(50% + (var(--ratio-x) * -50%)) calc(50% + (var(--ratio-y) * -50%));
} }
span.card-wrapper:hover > span.highlight-yui,span.card-wrapper:hover > span.highlight-first,span.card-wrapper:hover > span.highlight-second,span.card-wrapper:hover > span.highlight-third,span.card-wrapper:hover > span.highlight-fourth,span.card-wrapper:hover > span.highlight-fifth,span.card-wrapper:hover > span.highlight-sixth { span.card-wrapper:hover > span.highlight-yui,span.card-wrapper:hover > span.highlight-first,span.card-wrapper:hover > span.highlight-second,span.card-wrapper:hover > span.highlight-third,span.card-wrapper:hover > span.highlight-fourth,span.card-wrapper:hover > span.highlight-fifth, span.card-wrapper:hover > span.highlight-sixth, span.card-wrapper:hover > span.highlight-seven {
background-repeat: no-repeat; background-repeat: no-repeat;
} }