技能、队长技能,终于可以做成渐变色了

This commit is contained in:
枫谷剑仙 2020-04-16 00:07:44 +08:00
parent e87f2d3948
commit 95311e590d
9 changed files with 76 additions and 28 deletions

View File

@ -126,10 +126,14 @@
.skill-box .skill-level-label::before{
content: "Lv.";
}
.row-mon-skill .skill-title::before{
.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "Skill";
}
.row-mon-leader-skill .skill-title::before{
.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "Leader Skill";
}

View File

@ -125,10 +125,14 @@
.skill-box .skill-level-label::before{
content: "Lv.";
}
.row-mon-skill .skill-title::before{
.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "スキル";
}
.row-mon-leader-skill .skill-title::before{
.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "リーダースキル";
}

View File

@ -125,10 +125,14 @@
.skill-box .skill-level-label::before{
content: "Lv.";
}
.row-mon-skill .skill-title::before{
.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "스킬";
}
.row-mon-leader-skill .skill-title::before{
.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "리더스킬";
}

View File

@ -128,10 +128,14 @@
.skill-box .skill-level-label::before{
content: "Lv.";
}
.row-mon-skill .skill-title::before{
.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "主動技能";
}
.row-mon-leader-skill .skill-title::before{
.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "隊長技能";
}

View File

@ -128,10 +128,14 @@
.skill-box .skill-level-label::before{
content: "Lv.";
}
.row-mon-skill .skill-title::before{
.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "主動技能";
}
.row-mon-leader-skill .skill-title::before{
.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "隊長技能";
}

View File

@ -805,7 +805,7 @@ var formation = new Formation(teamsCount,5);
<div class="setting-row row-mon-skill">
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
<button class="m-skill-lv-1" value="1">1</button>~<button class="m-skill-lv-max" value="1">1</button>
@ -818,7 +818,7 @@ var formation = new Formation(teamsCount,5);
<div class="setting-row row-mon-leader-skill">
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span></div>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span></div>
<div class="skill-datail"></div>
</div>
</div>

View File

@ -757,7 +757,7 @@ var formation = new Formation(teamsCount,6);
<div class="setting-row row-mon-skill">
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
<button class="m-skill-lv-1" value="1">1</button>~<button class="m-skill-lv-max" value="1">1</button>
@ -770,7 +770,7 @@ var formation = new Formation(teamsCount,6);
<div class="setting-row row-mon-leader-skill">
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span></div>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span></div>
<div class="skill-datail"></div>
</div>
</div>

View File

@ -1424,23 +1424,55 @@ ul{
.skill-box .skill-title{
background-color: #39180F;
box-shadow: inset black 0 5px 5px;
padding: 0 10px 0 5px;
padding: 0 10px 0 2px;
text-shadow:black 3px 3px 0;
}
.skill-box .skill-title::before{
.skill-title .type-title{
background-color: #774433;
border: #BBAA55 solid 2px;
border-radius: 10px;
border-radius: 8px;
margin-right: 5px;
padding: 0 5px;
text-shadow:black 0 0 3px;
line-height: 25px;
line-height: 24px;
display: inline-block;
position: relative;
}
.row-mon-skill .skill-title::before{
/*content: "主動技能";*/
color: #DDEEEE;
.skill-title .type-title::after{
background-clip: text;
color: transparent;
text-shadow: none;
position: absolute;
left: 5px;
}
.skill-title .type-title::before{
text-shadow: none;
-webkit-text-stroke: 3px black;
text-stroke: 3px black;
}
/*.row-mon-skill .type-title::before,
.row-mon-skill .type-title::after
{
content: "主動技能";
}*/
.row-mon-skill .type-title::after
{
background-image: linear-gradient(white 25%, #3377AA 80%);
}
/*.row-mon-leader-skill .type-title::before,
.row-mon-leader-skill .type-title::after
{
content: "隊長技能";
}*/
.row-mon-leader-skill .type-title::after
{
background-image: linear-gradient(#FFFF99 25%, #EE7744 80%);
}
.row-mon-skill .skill-title .skill-name{
color: #84BAFC;
cursor: pointer;
@ -1448,10 +1480,6 @@ ul{
.row-mon-skill .skill-title .skill-name:hover::after{
content: "🔍";
}
.row-mon-leader-skill .skill-title::before{
/*content: "隊長技能";*/
color: #FF9955;
}
.row-mon-leader-skill .skill-title .skill-name{
color: #85FD80;
}

View File

@ -1452,7 +1452,7 @@ var formation = new Formation(teamsCount,6);
<div class="setting-row row-mon-skill">
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
<button class="m-skill-lv-1" value="1">1</button>~<button class="m-skill-lv-max" value="1">1</button>
@ -1465,7 +1465,7 @@ var formation = new Formation(teamsCount,6);
<div class="setting-row row-mon-leader-skill">
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title"><span class="skill-name"></span></div>
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span></div>
<div class="skill-datail"></div>
</div>
</div>