sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2026-03-24 21:37:40 +08:00
Code Issues Projects Releases Wiki Activity

more conspicuous button selection state

Browse Source
This commit is contained in:
Zhuobin Zhang
2021-09-10 18:26:44 +08:00
committed by 神戸小鳥
parent e876fc7768
commit 1e816faf00
2 changed files with 74 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
view/dark.css
View File

@@ -395,28 +395,57 @@ ul#total li .achievementtitle,
} }
} }
.grade0b.selected { .grade0b.selected,
background-color: #c0c0c0 !important; .grade1b.selected,
.grade2b.selected,
.grade3b.selected {
box-shadow: #ccc 0px 0px 10px; box-shadow: #ccc 0px 0px 10px;
color: #3b3b3b; color: #3b3b3b;
overflow: hidden;
}
.grade0b.selected.selected::after,
.grade1b.selected.selected::after,
.grade2b.selected.selected::after,
.grade3b.selected.selected::after {
content: '';
position: absolute;
background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
opacity: 1;
top: 0;
bottom: 0;
width: 40px;
opacity: 0;
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 0;
transform: translateX(-100vw);
}
50% {
opacity: .5;
}
100% {
opacity: 0;
transform: translateX(80px);
}
}
.grade0b.selected {
background-color: #c0c0c0 !important;
} }
.grade1b.selected { .grade1b.selected {
background-color: #87cefa !important; background-color: #87cefa !important;
box-shadow: #ccc 0px 0px 10px;
color: #3b3b3b;
} }
.grade2b.selected { .grade2b.selected {
background-color: #e7beff !important; background-color: #e7beff !important;
box-shadow: #ccc 0px 0px 10px;
color: #3b3b3b;
} }
.grade3b.selected { .grade3b.selected {
background-color: #f1bfac !important; background-color: #f1bfac !important;
box-shadow: #ccc 0px 0px 10px;
color: #3b3b3b;
} }
.propinitial { .propinitial {

45
view/light.css
View File

@@ -622,28 +622,57 @@ i {
} }
} }
.grade0b.selected { .grade0b.selected,
background-color: #444 !important; .grade1b.selected,
.grade2b.selected,
.grade3b.selected {
box-shadow: #bbb 0px 0px 10px; box-shadow: #bbb 0px 0px 10px;
color: #fff; color: #fff;
overflow: hidden;
}
.grade0b.selected.selected::after,
.grade1b.selected.selected::after,
.grade2b.selected.selected::after,
.grade3b.selected.selected::after {
content: '';
position: absolute;
background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
opacity: 1;
top: 0;
bottom: 0;
width: 40px;
opacity: 0;
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 0;
transform: translateX(-100vw);
}
50% {
opacity: .5;
}
100% {
opacity: 0;
transform: translateX(80px);
}
}
.grade0b.selected {
background-color: #444 !important;
} }
.grade1b.selected { .grade1b.selected {
background-color: #407dec !important; background-color: #407dec !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
} }
.grade2b.selected { .grade2b.selected {
background-color: #b362e7 !important; background-color: #b362e7 !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
} }
.grade3b.selected { .grade3b.selected {
background-color: #ff7f4d !important; background-color: #ff7f4d !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
} }
@keyframes banner-in { @keyframes banner-in {