mirror of
https://github.com/ZZZure/ZZZ-Plugin.git
synced 2025-12-16 21:27:47 +00:00
feat: 角色天赋图鉴(支持自定义等级)
This commit is contained in:
parent
4f02e6b2ce
commit
15b14eece4
23 changed files with 937 additions and 124 deletions
150
resources/skills/index.scss
Normal file
150
resources/skills/index.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
.char-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
.avatar {
|
||||
width: 5em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.5em;
|
||||
.simple {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin: 0.5em;
|
||||
.skill {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
backdrop-filter: blur(5px);
|
||||
.description {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
width: 4em;
|
||||
aspect-ratio: 1;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
.skill-icon {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
.name {
|
||||
font-size: 1.4em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.item {
|
||||
margin-bottom: 0.3em;
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.content {
|
||||
.line {
|
||||
.skill-icon {
|
||||
width: 1.2em;
|
||||
margin-bottom: -0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
.title {
|
||||
font-size: 1.1em;
|
||||
color: rgb(246, 202, 69);
|
||||
margin: 0.5em 0;
|
||||
.level {
|
||||
font-size: 0.8em;
|
||||
color: white;
|
||||
background-color: rgb(246, 202, 69);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 0.3em;
|
||||
margin-left: 0.5em;
|
||||
text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
.rate {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
.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);
|
||||
}
|
||||
&:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tb-td {
|
||||
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;
|
||||
.tb-tr {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 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);
|
||||
}
|
||||
&:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tb-td {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue