mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-02-04 14:53:12 +08:00
神戸小鳥
GitHub
File diff suppressed because one or more lines are too long
71
src/app.js
71
src/app.js
@@ -123,9 +123,9 @@ class App{
|
||||
const talentPage = $(`
|
||||
<div id="main">
|
||||
<div class="head" style="font-size: 1.6rem">天赋抽卡</div>
|
||||
<button id="random" class="mainbtn" style="top: 50%;">10连抽！</button>
|
||||
<button id="random" class="mainbtn" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"">10连抽！</button>
|
||||
<ul id="talents" class="selectlist"></ul>
|
||||
<button id="next" class="mainbtn" style="top:auto; bottom:0.1em">请选择3个</button>
|
||||
<button id="next" class="mainbtn">请选择3个</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
@@ -176,6 +176,7 @@ class App{
|
||||
}
|
||||
});
|
||||
});
|
||||
talentPage.find('#next').show()
|
||||
});
|
||||
|
||||
talentPage
|
||||
@@ -185,6 +186,7 @@ class App{
|
||||
this.hint('请选择3个天赋');
|
||||
return;
|
||||
}
|
||||
talentPage.find('#next').hide()
|
||||
this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id));
|
||||
this.switch('property');
|
||||
})
|
||||
@@ -194,13 +196,15 @@ class App{
|
||||
const propertyPage = $(/*html*/`
|
||||
<div id="main">
|
||||
<div class="head" style="font-size: 1.6rem">
|
||||
调整初始属性<br>
|
||||
<div>调整初始属性</div>
|
||||
<div id="total" style="font-size:1rem; font-weight:normal;">可用属性点：0</div>
|
||||
</div>
|
||||
<ul id="propertyAllocation" class="propinitial"></ul>
|
||||
<ul class="selectlist" id="talentSelectedView" style="top:calc(100% - 17rem); bottom:7rem"></ul>
|
||||
<button id="random" class="mainbtn" style="top:auto; bottom:0.1rem; left:auto; right:50%; transform: translate(-2rem,-50%);">随机分配</button>
|
||||
<button id="start" class="mainbtn" style="top:auto; bottom:0.1rem; left:50%; right:auto; transform: translate(2rem,-50%);">开始新人生</button>
|
||||
<ul class="selectlist" id="talentSelectedView"></ul>
|
||||
<div class="btn-area">
|
||||
<button id="random" class="mainbtn">随机分配</button>
|
||||
<button id="start" class="mainbtn">开始新人生</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
propertyPage.mounted = ()=>{
|
||||
@@ -330,8 +334,10 @@ class App{
|
||||
<div id="main">
|
||||
<ul id="lifeProperty" class="lifeProperty"></ul>
|
||||
<ul id="lifeTrajectory" class="lifeTrajectory"></ul>
|
||||
<button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem; left:auto; right:50%; transform: translate(-2rem,-50%);">人生总结</button>
|
||||
<button id="domToImage" class="mainbtn" style="top:auto; bottom:0.1rem; left:50%; right:auto; transform: translate(2rem,-50%); display: none;">人生回放</button>
|
||||
<div class="btn-area">
|
||||
<button id="summary" class="mainbtn">人生总结</button>
|
||||
<button id="domToImage" class="mainbtn">人生回放</button>
|
||||
</div>
|
||||
<div class="domToImage2wx">
|
||||
<img src="" id="endImage" />
|
||||
</div>
|
||||
@@ -344,7 +350,7 @@ class App{
|
||||
if(this.#isEnd) return;
|
||||
const trajectory = this.#life.next();
|
||||
const { age, content, isEnd } = trajectory;
|
||||
const li = $(`<li><span>${age}岁：</span>${
|
||||
const li = $(`<li><span>${age}岁：</span><span>${
|
||||
content.map(
|
||||
({type, description, grade, name, postEvent}) => {
|
||||
switch(type) {
|
||||
@@ -355,7 +361,7 @@ class App{
|
||||
}
|
||||
}
|
||||
).join('<br>')
|
||||
}</li>`);
|
||||
}</span></li>`);
|
||||
li.appendTo('#lifeTrajectory');
|
||||
$("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight);
|
||||
if(isEnd) {
|
||||
@@ -368,11 +374,12 @@ class App{
|
||||
// Update properties if not die yet
|
||||
const property = this.#life.getLastRecord();
|
||||
$("#lifeProperty").html(`
|
||||
<li>颜值：${property.CHR} </li>
|
||||
<li>智力：${property.INT} </li>
|
||||
<li>体质：${property.STR} </li>
|
||||
<li>家境：${property.MNY} </li>
|
||||
<li>快乐：${property.SPR} </li>`);
|
||||
<li><span>颜值</span><span>${property.CHR}</span></li>
|
||||
<li><span>智力</span><span>${property.INT}</span</li>
|
||||
<li><span>体质</span><span>${property.STR}</span</li>
|
||||
<li><span>家境</span><span>${property.MNY}</span</li>
|
||||
<li><span>快乐</span><span>${property.SPR}</span</li>
|
||||
`);
|
||||
}
|
||||
});
|
||||
// html2canvas
|
||||
@@ -405,19 +412,19 @@ class App{
|
||||
const summaryPage = $(`
|
||||
<div id="main">
|
||||
<div class="head">人生总结</div>
|
||||
<ul id="judge" class="judge" style="bottom: calc(35% + 2.5rem)">
|
||||
<li class="grade2"><span>颜值：</span>9级 美若天仙</li>
|
||||
<li><span>智力：</span>4级 智力一般</li>
|
||||
<li><span>体质：</span>1级 极度虚弱</li>
|
||||
<li><span>家境：</span>6级 小康之家</li>
|
||||
<li><span>享年：</span>3岁 早夭</li>
|
||||
<li><span>快乐：</span>3级 不太幸福的人生</li>
|
||||
<ul id="judge" class="judge">
|
||||
<li class="grade2"><span>颜值：</span><span>9级 美若天仙</span></li>
|
||||
<li class="grade0"><span>智力：</span><span>4级 智力一般</span></li>
|
||||
<li class="grade0"><span>体质：</span><span>1级 极度虚弱</span></li>
|
||||
<li class="grade0"><span>家境：</span><span>6级 小康之家</span></li>
|
||||
<li class="grade0"><span>享年：</span><span>3岁 早夭</span></li>
|
||||
<li class="grade0"><span>快乐：</span><span></span>3级 不太幸福的人生</li>
|
||||
</ul>
|
||||
<div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div>
|
||||
<ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem">
|
||||
<div class="head" style="height:auto;">天赋，你可以选一个，下辈子还能抽到</div>
|
||||
<ul id="talents" class="selectlist" style="flex: 0 1 auto;">
|
||||
<li class="grade2b">黑幕（面试一定成功）</li>
|
||||
</ul>
|
||||
<button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont"></span>再次重开</button>
|
||||
<button id="again" class="mainbtn"><span class="iconfont"></span>再次重开</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
@@ -575,33 +582,33 @@ class App{
|
||||
judge.append([
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('CHR', max);
|
||||
return `<li class="grade${grade}"><span>颜值：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>颜值：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('INT', max);
|
||||
return `<li class="grade${grade}"><span>智力：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>智力：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('STR', max);
|
||||
return `<li class="grade${grade}"><span>体质：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>体质：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('MNY', max);
|
||||
return `<li class="grade${grade}"><span>家境：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>家境：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('SPR', max);
|
||||
return `<li class="grade${grade}"><span>快乐：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>快乐：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const { judge, grade, value } = s('AGE', max);
|
||||
return `<li class="grade${grade}"><span>享年：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>享年：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
(()=>{
|
||||
const m = type=>max(records.map(({[type]: value})=>value));
|
||||
const value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2);
|
||||
const { judge, grade } = summary('SUM', value);
|
||||
return `<li class="grade${grade}"><span>总评：</span>${value} ${judge}</li>`
|
||||
return `<li class="grade${grade}"><span>总评：</span><span>${value} ${judge}</span></li>`
|
||||
})(),
|
||||
].join(''));
|
||||
}
|
||||
|
||||
735
view/dark.css
735
view/dark.css
@@ -37,90 +37,124 @@
|
||||
@media (max-width:328px){html{font-size:12px;}}
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1628944689555') format('woff2'),
|
||||
url('iconfont.woff?t=1628944689555') format('woff'),
|
||||
url('iconfont.ttf?t=1628944689555') format('truetype');
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1628944689555') format('woff2'),
|
||||
url('iconfont.woff?t=1628944689555') format('woff'),
|
||||
url('iconfont.ttf?t=1628944689555') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #222831;
|
||||
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
|
||||
background-color: #222831;
|
||||
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#main {
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: fixed;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
color: #EEEEEE;
|
||||
position: fixed;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
#restart {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#restart .iconfont {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#talentSelectedView {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.mainbtn {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: 1px #EEEEEE solid;
|
||||
border-radius: 0.2rem;
|
||||
background-color:#393E46;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
color: #EEEEEE;
|
||||
margin: 0.5rem 1rem 1rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: #393E46;
|
||||
border: 1px #EEEEEE solid;
|
||||
border-radius: 0.2rem;
|
||||
color: #EEEEEE;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mainbtn:hover {
|
||||
background: #ff7878;
|
||||
color: #fff;
|
||||
transition: all .4s ease 0s;
|
||||
background: #ff7878;
|
||||
color: #fff;
|
||||
transition: all .4s ease 0s;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-area>.mainbtn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.sponsor,
|
||||
#specialthanks,
|
||||
#rank {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1rem;
|
||||
padding: 0.1rem;
|
||||
width: 6rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:lightsteelblue;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
word-wrap: none;
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1rem;
|
||||
padding: 0.1rem;
|
||||
width: 6rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:lightsteelblue;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
word-wrap: none;
|
||||
}
|
||||
|
||||
#specialthanks {
|
||||
background-color: #5865F2;
|
||||
top: 1rem;
|
||||
background-color: #5865F2;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
@@ -131,14 +165,14 @@ body {
|
||||
}
|
||||
|
||||
#spthx {
|
||||
position: fixed;
|
||||
display: grid;
|
||||
top: 4rem;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
display: grid;
|
||||
top: 4rem;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#spthx ul {
|
||||
@@ -186,247 +220,272 @@ body {
|
||||
}
|
||||
|
||||
#themeToggleBtn {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
padding: 0.1rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:#EEEEEE;
|
||||
font-size: 1.4rem;
|
||||
color: #222831;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
padding: 0 0.7rem;
|
||||
width: 6.5rem;
|
||||
background-color:#EEEEEE;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1.4rem;
|
||||
color: #222831;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
z-index:2;
|
||||
right: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
font-size: 1.4rem;
|
||||
top: 1.1rem;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #EEEEEE;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
white-space: nowrap;
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
.judge,
|
||||
.lifeTrajectory,
|
||||
.propinitial,
|
||||
.selectlist {
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
left: 50%;
|
||||
top: 5rem;
|
||||
bottom: 8.5rem;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lifeProperty{
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
left: 50%;
|
||||
top: 2rem;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.lifeProperty {
|
||||
list-style: none;
|
||||
padding: 2rem 1rem 0.5rem 4rem;
|
||||
display: flex;
|
||||
color: white;
|
||||
color: #FFFFFF;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lifeProperty > li {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px #ccc solid;
|
||||
display: inline-block;
|
||||
.lifeProperty>li {
|
||||
flex: 1;
|
||||
margin: 0.1rem 2px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px #ccc solid;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectlist > li {
|
||||
position: relative;
|
||||
border: 1px #EEEEEE solid;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
cursor: pointer;
|
||||
color: #EEEEEE;
|
||||
user-select: none;
|
||||
.lifeProperty>li>span:last-child {
|
||||
background: #eee;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.selectlist>li {
|
||||
margin-bottom: 0.6rem;
|
||||
display: block;
|
||||
border: 1px #EEEEEE solid;
|
||||
border-radius: 0.2rem;
|
||||
color: #EEEEEE;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectlist>li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.grade0b {
|
||||
background-color: #464646;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
background-color: #464646;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
}
|
||||
|
||||
.grade1b {
|
||||
background-color: #6495ed;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
background-color: #6495ed;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
}
|
||||
|
||||
.grade2b {
|
||||
background-color: #e2a7ff;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
background-color: #e2a7ff;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
}
|
||||
|
||||
.grade3b {
|
||||
background-color: #ffa07a;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
background-color: #ffa07a;
|
||||
border: #f8f8f8 2px solid !important;
|
||||
}
|
||||
|
||||
@media (min-width:1080px) {
|
||||
.grade0b:hover {
|
||||
background-color: #c0c0c0;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
.grade1b:hover {
|
||||
background-color: #87cefa;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
.grade2b:hover {
|
||||
background-color: #e7beff;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
.grade3b:hover {
|
||||
background-color: #f7a989;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
}
|
||||
.grade0b.selected {
|
||||
background-color: #c0c0c0 !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
.grade0b:hover {
|
||||
background-color: #c0c0c0;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade1b:hover {
|
||||
background-color: #87cefa;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade2b:hover {
|
||||
background-color: #e7beff;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade3b:hover {
|
||||
background-color: #f7a989;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.grade0b.selected {
|
||||
background-color: #c0c0c0 !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.grade1b.selected {
|
||||
background-color: #87cefa !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
background-color: #87cefa !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.grade2b.selected {
|
||||
background-color: #e7beff !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
background-color: #e7beff !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.grade3b.selected {
|
||||
background-color: #f1bfac !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.judge > li.grade1 span,
|
||||
.judge > li.grade1{
|
||||
background-color: #87cefa;
|
||||
}
|
||||
.judge > li.grade2 span,
|
||||
.judge > li.grade2{
|
||||
background-color: #e7beff;
|
||||
}
|
||||
.judge > li.grade3 span,
|
||||
.judge > li.grade3{
|
||||
background-color: #f7a989;
|
||||
background-color: #f1bfac !important;
|
||||
box-shadow: #ccc 0px 0px 10px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.propinitial {
|
||||
top: 5rem;
|
||||
bottom: 17rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.propbtn:hover{
|
||||
color: #5c5c5c;
|
||||
transition: all .2s ease 0s;
|
||||
.propbtn:hover {
|
||||
color: #5c5c5c;
|
||||
transition: all .2s ease 0s;
|
||||
}
|
||||
|
||||
.propinitial > li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
color: #EEEEEE;
|
||||
.propinitial>li {
|
||||
position: relative;
|
||||
margin: 0.1rem auto;
|
||||
padding: 0.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 0.2rem;
|
||||
color: #EEEEEE;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.propinitial > li > input {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
border: 0.1rem #EEEEEE solid;
|
||||
background-color: #393E46;
|
||||
color: #EEEEEE;
|
||||
.propinitial>li>input {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
font-size: 2rem;
|
||||
border: 0.1rem #EEEEEE solid;
|
||||
background-color: #393E46;
|
||||
color: #EEEEEE;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.propbtn {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
color: #EEEEEE;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
.judge>li>span:nth-child(1),
|
||||
.lifeTrajectory>li>span:nth-child(1) {
|
||||
width: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.judge>li>span:nth-child(2),
|
||||
.lifeTrajectory>li>span:nth-child(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lifeTrajectory {
|
||||
border: 1px #9b9b9b solid;
|
||||
background-color: #393E46;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
margin: 0.5rem 1rem;
|
||||
padding: 0;
|
||||
border: 1px #9b9b9b solid;
|
||||
background-color: #393E46;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.judge > li,
|
||||
.lifeTrajectory > li {
|
||||
position: relative;
|
||||
width: calc(100% - 7rem);
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem 1rem 0.5rem 6rem;
|
||||
font-size: 1.4rem;
|
||||
background-color: #4a5361;
|
||||
box-shadow: #EEEEEE 0 0 0.4rem;
|
||||
color: #EEEEEE;
|
||||
.lifeTrajectory>li {
|
||||
margin: 10px 0;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
background-color: #4a5361;
|
||||
box-shadow: #EEEEEE 0 0 0.4rem;
|
||||
color: #EEEEEE;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.judge > li > span,
|
||||
.lifeTrajectory > li > span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
text-align: right;
|
||||
|
||||
.judge {
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.judge > li {
|
||||
box-shadow: #EEEEEE 0 0 0.4rem;
|
||||
width: calc(100% - 9rem);
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem 0.5rem 7rem;
|
||||
border-radius: 10px;
|
||||
.judge>li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #4a5361;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
box-shadow: none;
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
.judge > li > span {
|
||||
height: calc(100% - 1rem);
|
||||
padding: 0.5rem 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
.judge>li:last-child {
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.judge>li.grade1 span,
|
||||
.judge>li.grade1 {
|
||||
background-color: #87cefa;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
.judge>li.grade2 span,
|
||||
.judge>li.grade2 {
|
||||
background-color: #e7beff;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
.judge>li.grade3 span,
|
||||
.judge>li.grade3 {
|
||||
background-color: #f7a989;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
|
||||
|
||||
:root {
|
||||
font-family: "Montserrat";
|
||||
}
|
||||
@@ -463,12 +522,14 @@ i {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner .banner-message {
|
||||
flex: 1;
|
||||
padding: 0 2rem;
|
||||
word-break: break-word;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.banner .banner-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -490,18 +551,23 @@ i {
|
||||
.banner.success {
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.banner.success::after {
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.banner.error {
|
||||
background: #ed1c24;
|
||||
}
|
||||
|
||||
.banner.error::after {
|
||||
background: #ed1c24;
|
||||
}
|
||||
|
||||
.banner.info {
|
||||
background: skyblue;
|
||||
}
|
||||
|
||||
.banner.info::after {
|
||||
background: skyblue;
|
||||
}
|
||||
@@ -534,13 +600,16 @@ i {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-banner {
|
||||
appearance: none;
|
||||
background: #ededed;
|
||||
@@ -557,97 +626,139 @@ i {
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both; }
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite; }
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake; }
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake;
|
||||
}
|
||||
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn;
|
||||
}
|
||||
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse;
|
||||
}
|
||||
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY;
|
||||
}
|
||||
|
||||
.eva-hover {
|
||||
display: inline-block; }
|
||||
.eva-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake; }
|
||||
.eva-hover:hover .eva-icon-hover-shake,
|
||||
.eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
.eva-hover:hover .eva-icon-hover-zoom,
|
||||
.eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
.eva-hover:hover .eva-icon-hover-pulse,
|
||||
.eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
.eva-hover:hover .eva-icon-hover-flip,
|
||||
.eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY;
|
||||
}
|
||||
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0; }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in; }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
|
||||
to {
|
||||
transform: perspective(400px); } }
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes eva-shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0); }
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0); }
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0); } }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1); }
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2); }
|
||||
to {
|
||||
transform: scale3d(1, 1, 1); } }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5); }
|
||||
50% {
|
||||
opacity: 1; } }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-shake {
|
||||
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.deleteFixed {
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.operateBtn {
|
||||
|
||||
@@ -6,14 +6,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="やり直すんだ。そして、次はうまくやる。"/>
|
||||
<meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/>
|
||||
<title>Life Restart</title>
|
||||
<link id="themeLink" rel="stylesheet" href="light.css">
|
||||
<link rel="manifest" href="./manifest.json">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="../public/bundle.js"></script>
|
||||
<title>Life Restart</title>
|
||||
</head>
|
||||
<body style="margin: 0; height: 100%">
|
||||
<body>
|
||||
<div class="banners-container">
|
||||
<div class="banners">
|
||||
<div class="banner error">
|
||||
@@ -34,18 +31,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
|
||||
</body>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="../public/bundle.js"></script>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function () {
|
||||
navigator.serviceWorker.register('./sw.js', {scope: '.'})
|
||||
.then(function (registration) {
|
||||
console.log('ServiceWorker registration successful');
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log('ServiceWorker registration failed');
|
||||
});
|
||||
navigator.serviceWorker.register('./sw.js', {scope: '.'})
|
||||
.then(function (registration) {
|
||||
console.log('ServiceWorker registration successful');
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log('ServiceWorker registration failed');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
764
view/light.css
764
view/light.css
@@ -37,87 +37,123 @@
|
||||
@media (max-width:328px){html{font-size:12px;}}
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1628944689555') format('woff2'),
|
||||
url('iconfont.woff?t=1628944689555') format('woff'),
|
||||
url('iconfont.ttf?t=1628944689555') format('truetype');
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1628944689555') format('woff2'),
|
||||
url('iconfont.woff?t=1628944689555') format('woff'),
|
||||
url('iconfont.ttf?t=1628944689555') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
|
||||
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#main {
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: fixed;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#restart {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#restart .iconfont {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#talentSelectedView {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.mainbtn {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: 1px #ccc solid;
|
||||
border-radius: 0.2rem;
|
||||
background-color:white;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
margin: 0.5rem 1rem 1rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px #CCCCCC solid;
|
||||
border-radius: 0.2rem;
|
||||
color: #000000;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mainbtn:hover {
|
||||
background: #ff7878;
|
||||
color: #fff;
|
||||
transition: all .4s ease 0s;
|
||||
background: #ff7878;
|
||||
color: #FFFFFF;
|
||||
transition: all .4s ease 0s;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-area>.mainbtn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.sponsor,
|
||||
#specialthanks,
|
||||
#rank {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1rem;
|
||||
padding: 0.1rem;
|
||||
width: 6rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:lightsteelblue;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
word-wrap: none;
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1rem;
|
||||
padding: 0.1rem;
|
||||
width: 6rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:lightsteelblue;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
word-wrap: none;
|
||||
}
|
||||
|
||||
#specialthanks {
|
||||
background-color: #5865F2;
|
||||
top: 1rem;
|
||||
background-color: #5865F2;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
@@ -128,14 +164,14 @@ body {
|
||||
}
|
||||
|
||||
#spthx {
|
||||
position: fixed;
|
||||
display: grid;
|
||||
top: 4rem;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
display: grid;
|
||||
top: 4rem;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#spthx ul {
|
||||
@@ -172,6 +208,7 @@ body {
|
||||
}
|
||||
|
||||
#spthx ul.g2 {
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
overflow: scroll;
|
||||
@@ -182,243 +219,203 @@ body {
|
||||
}
|
||||
|
||||
#themeToggleBtn {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
padding: 0.1rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:#222831;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
cursor: pointer;
|
||||
z-index:2;
|
||||
padding: 0 0.7rem;
|
||||
width: 6.5rem;
|
||||
background-color:#222831;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1.4rem;
|
||||
color: #EEEEEE;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
z-index:2;
|
||||
right: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
font-size: 1.4rem;
|
||||
top: 1.1rem;
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.judge,
|
||||
.lifeTrajectory,
|
||||
.propinitial,
|
||||
.selectlist {
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
left: 50%;
|
||||
top: 5rem;
|
||||
bottom: 8.5rem;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lifeProperty{
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
left: 50%;
|
||||
top: 2rem;
|
||||
width: 30rem;
|
||||
max-width: calc(100% - 2rem);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.lifeProperty {
|
||||
list-style: none;
|
||||
padding: 2rem 1rem 0.5rem 4rem;
|
||||
display: flex;
|
||||
color: black;
|
||||
color: #FFFFFF;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lifeProperty > li {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px #ccc solid;
|
||||
display: inline-block;
|
||||
.lifeProperty>li {
|
||||
flex: 1;
|
||||
margin: 0.1rem 2px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #393E46;
|
||||
border: 1px #ccc solid;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectlist > li {
|
||||
position: relative;
|
||||
border: 1px #ccc solid;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
cursor: pointer;
|
||||
.lifeProperty>li>span:last-child {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.grade0b {
|
||||
background-color: #ededed;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
.selectlist>li {
|
||||
margin-bottom: 0.6rem;
|
||||
display: block;
|
||||
border: 1px #EEEEEE solid;
|
||||
border-radius: 0.2rem;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.grade1b {
|
||||
background-color: #7ea5ec;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
.grade2b {
|
||||
background-color: #e2a7ff;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
.grade3b {
|
||||
background-color: #ffa07a;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
@media (min-width:1080px) {
|
||||
.grade0b:hover {
|
||||
background-color: #868686;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade1b:hover {
|
||||
background-color: #5d90ff;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade2b:hover {
|
||||
background-color: #bc72ec;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade3b:hover {
|
||||
background-color: #e09074;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
}
|
||||
.grade0b.selected {
|
||||
background-color: #444;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade1b.selected {
|
||||
background-color: #407dec;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade2b.selected {
|
||||
background-color: #b362e7;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade3b.selected {
|
||||
background-color: #ff7f4d;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.judge > li.grade1 span,
|
||||
.judge > li.grade1{
|
||||
background-color: #7ea5ec;
|
||||
}
|
||||
.judge > li.grade2 span,
|
||||
.judge > li.grade2{
|
||||
background-color: #e2a7ff;
|
||||
}
|
||||
.judge > li.grade3 span,
|
||||
.judge > li.grade3{
|
||||
background-color: #ffa07a;
|
||||
.selectlist>li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.propinitial {
|
||||
top: 5rem;
|
||||
bottom: 17rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.propinitial > li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
margin: 0.1rem auto;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
.propbtn:hover {
|
||||
color: #5c5c5c;
|
||||
transition: all .2s ease 0s;
|
||||
}
|
||||
|
||||
.propinitial > li > input {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
border: 0.1rem #ccc solid;
|
||||
.propinitial>li {
|
||||
position: relative;
|
||||
margin: 0.1rem auto;
|
||||
padding: 0.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 0.2rem;
|
||||
color: #000;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.propinitial>li>input {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin: 0 0.5rem;
|
||||
padding: 0;
|
||||
font-size: 2rem;
|
||||
border: 0.1rem #000 solid;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.propbtn {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.propbtn:hover{
|
||||
color: #5c5c5c;
|
||||
transition: all .2s ease 0s;
|
||||
.judge>li>span:nth-child(1),
|
||||
.lifeTrajectory>li>span:nth-child(1) {
|
||||
width: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.judge>li>span:nth-child(2),
|
||||
.lifeTrajectory>li>span:nth-child(2) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lifeTrajectory {
|
||||
border: 1px #a7a7a7 solid;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
flex: 1;
|
||||
margin: 0.5rem 1rem;
|
||||
padding: 0;
|
||||
border: 1px #9b9b9b solid;
|
||||
background-color: #393E46;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.judge > li,
|
||||
.lifeTrajectory > li {
|
||||
position: relative;
|
||||
width: calc(100% - 7rem);
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem 1rem 0.5rem 6rem;
|
||||
font-size: 1.4rem;
|
||||
background-color: #fff;
|
||||
box-shadow: #a7a7a7 0 0 0.4rem;
|
||||
user-select: none;
|
||||
.lifeTrajectory>li {
|
||||
margin: 10px 0;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
background-color: #4a5361;
|
||||
box-shadow: #EEEEEE 0 0 0.4rem;
|
||||
color: #EEEEEE;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.judge > li > span,
|
||||
.lifeTrajectory > li > span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
text-align: right;
|
||||
|
||||
.judge {
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.judge > li {
|
||||
box-shadow: lightgray 0 0 0.4rem;
|
||||
width: calc(100% - 9rem);
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem 0.5rem 7rem;
|
||||
border-radius: 10px;
|
||||
.judge>li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #4a5361;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
box-shadow: none;
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
.judge > li > span {
|
||||
height: calc(100% - 1rem);
|
||||
padding: 0.5rem 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
.judge>li:last-child {
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.judge>li.grade1 span,
|
||||
.judge>li.grade1 {
|
||||
background-color: #87cefa;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
.judge>li.grade2 span,
|
||||
.judge>li.grade2 {
|
||||
background-color: #e7beff;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
.judge>li.grade3 span,
|
||||
.judge>li.grade3 {
|
||||
background-color: #f7a989;
|
||||
color: #4a5361;
|
||||
}
|
||||
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
|
||||
|
||||
:root {
|
||||
font-family: "Montserrat";
|
||||
}
|
||||
@@ -455,12 +452,14 @@ i {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner .banner-message {
|
||||
flex: 1;
|
||||
padding: 0 2rem;
|
||||
word-break: break-word;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.banner .banner-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -482,18 +481,23 @@ i {
|
||||
.banner.success {
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.banner.success::after {
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.banner.error {
|
||||
background: #ed1c24;
|
||||
}
|
||||
|
||||
.banner.error::after {
|
||||
background: #ed1c24;
|
||||
}
|
||||
|
||||
.banner.info {
|
||||
background: skyblue;
|
||||
}
|
||||
|
||||
.banner.info::after {
|
||||
background: skyblue;
|
||||
}
|
||||
@@ -522,17 +526,89 @@ i {
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.grade0b {
|
||||
background-color: #ededed;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
.grade1b {
|
||||
background-color: #7ea5ec;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
.grade2b {
|
||||
background-color: #e2a7ff;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
.grade3b {
|
||||
background-color: #ffa07a;
|
||||
border: #c5c5c5 2px solid !important;
|
||||
}
|
||||
|
||||
@media (min-width:1080px) {
|
||||
.grade0b:hover {
|
||||
background-color: #868686;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade1b:hover {
|
||||
background-color: #5d90ff;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade2b:hover {
|
||||
background-color: #bc72ec;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.grade3b:hover {
|
||||
background-color: #e09074;
|
||||
color: #3b3b3b;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.grade0b.selected {
|
||||
background-color: #444 !important;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade1b.selected {
|
||||
background-color: #407dec !important;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade2b.selected {
|
||||
background-color: #b362e7 !important;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grade3b.selected {
|
||||
background-color: #ff7f4d !important;
|
||||
box-shadow: #bbb 0px 0px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes banner-in {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-banner {
|
||||
appearance: none;
|
||||
background: #ededed;
|
||||
@@ -549,97 +625,139 @@ i {
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both; }
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite; }
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake; }
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake;
|
||||
}
|
||||
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn;
|
||||
}
|
||||
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse;
|
||||
}
|
||||
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY;
|
||||
}
|
||||
|
||||
.eva-hover {
|
||||
display: inline-block; }
|
||||
.eva-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake; }
|
||||
.eva-hover:hover .eva-icon-hover-shake,
|
||||
.eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
.eva-hover:hover .eva-icon-hover-zoom,
|
||||
.eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
.eva-hover:hover .eva-icon-hover-pulse,
|
||||
.eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse;
|
||||
}
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
.eva-hover:hover .eva-icon-hover-flip,
|
||||
.eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY;
|
||||
}
|
||||
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0; }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in; }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
|
||||
to {
|
||||
transform: perspective(400px); } }
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes eva-shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0); }
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0); }
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0); } }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1); }
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2); }
|
||||
to {
|
||||
transform: scale3d(1, 1, 1); } }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5); }
|
||||
50% {
|
||||
opacity: 1; } }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-shake {
|
||||
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.deleteFixed {
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.operateBtn {
|
||||
|
||||
Reference in New Issue
Block a user