Yunzai-Plugin/ZZZ-Plugin
1
0
Fork 0
mirror of https://github.com/ZZZure/ZZZ-Plugin.git synced 2025-12-16 13:17:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: 微调样式

Browse source
This commit is contained in:
bietiaop 2024-09-02 17:08:02 +08:00
parent 07dce54336
commit 5c731477c1
4 changed files with 54 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

36
resources/skills/index.css
View file

@ -38,7 +38,7 @@
.skills {
display: flex;
flex-direction: column;
gap: 0.5em;
gap: 2em;
margin: 0.5em;
}
.skills .skill {
@ -76,6 +76,9 @@
margin-bottom: -0.2em;
display: inline-block;
}
.skills .skill .detail {
margin-bottom: 1em;
}
.skills .skill .detail .title {
font-size: 1.1em;
color: rgb(246, 202, 69);
@ -90,19 +93,38 @@
margin-left: 0.5em;
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
}
.skills .skill .detail .item {
font-size: 0.9em;
}
.skills .skill .detail .item .name {
margin-bottom: 0.3em;
}
.skills .skill .detail .item .rate {
display: grid;
text-align: center;
padding-left: 1em;
margin-bottom: 0.5em;
grid-template-columns: 1fr 1fr;
}
.skills .skill .detail .item .rate .tb-tr {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
border: 0.1em solid rgba(255, 255, 255, 0.2);
border-bottom: none;
}
.skills .skill .detail .item .rate .tb-tr:last-child {
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
}
.skills .skill .detail .item .rate .tb-tr:first-child {
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
.skills .skill .detail .item .rate .tb-tr:nth-last-child(2) {
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
}
.skills .skill .detail .item .rate .tb-tr:nth-child(odd) {
.skills .skill .detail .item .rate .tb-tr:nth-child(even) {
border-right: none;
}
.skills .skill .detail .item .rate .tb-tr:nth-child(3n+3) {
background-color: rgba(255, 255, 255, 0.1);
}
.skills .skill .detail .item .rate .tb-tr:nth-child(4n) {
background-color: rgba(255, 255, 255, 0.1);
}
.skills .skill .detail .item .rate .tb-td {
@ -110,12 +132,10 @@
font-size: 0.9em;
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
}
.skills .skill .detail .item .rate .tb-td:last-child {
border-right: none;
}
.skills .skill .detail .item .detail {
display: grid;
text-align: center;
padding-left: 1em;
}
.skills .skill .detail .item .detail .tb-tr {
display: grid;

2
resources/skills/index.html
View file

@ -67,7 +67,7 @@
</div>
{{each rate.data.details detail i}}
<div class="tb-tr">
<div class="tb-td">{{i}}</div>
<div class="tb-td">{{i + 1}}</div>
<div class="tb-td">{{detail.A}}</div>
<div class="tb-td">{{detail.B}}</div>
<div class="tb-td">{{detail.C}}</div>

34
resources/skills/index.scss
View file

@ -37,7 +37,7 @@
.skills {
display: flex;
flex-direction: column;
gap: 0.5em;
gap: 2em;
margin: 0.5em;
.skill {
background-color: rgba(0, 0, 0, 0.3);
@ -80,6 +80,7 @@
}
}
.detail {
margin-bottom: 1em;
.title {
font-size: 1.1em;
color: rgb(246, 202, 69);
@ -95,17 +96,34 @@
}
}
.item {
font-size: 0.9em;
.name {
margin-bottom: 0.3em;
}
.rate {
display: grid;
text-align: center;
padding-left: 1em;
margin-bottom: 0.5em;
grid-template-columns: 1fr 1fr;
.tb-tr {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
&:first-child {
border-top: 0.1em solid rgba(255, 255, 255, 0.2);
grid-template-columns: 2fr 1fr;
border: 0.1em solid rgba(255, 255, 255, 0.2);
border-bottom: none;
&:last-child {
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
}
&:nth-child(odd) {
&:nth-last-child(2) {
border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
}
&:nth-child(even) {
border-right: none;
}
&:nth-child(3n + 3) {
background-color: rgba(255, 255, 255, 0.1);
}
&:nth-child(4n) {
background-color: rgba(255, 255, 255, 0.1);
}
}
@ -114,15 +132,13 @@
padding: 0.2em 0.5em;
font-size: 0.9em;
border-right: 0.1em solid rgba(255, 255, 255, 0.2);
&:last-child {
border-right: none;
}
}
}
.detail {
display: grid;
text-align: center;
padding-left: 1em;
.tb-tr {
display: grid;
grid-template-columns: repeat(8, 1fr);