/* 选择难度 */
@media only screen and (min-width: 635px) { #difficulty-selector { margin:0 15%; width:70%; } }
@media only screen and (max-width: 635px) { #difficulty-selector { margin:0 7.5%; width: 85%; } }
@media only screen and (max-width: 525px) { #difficulty-selector { margin:0 0%; width: 100%; } }
#difficulty-selector {
position:fixed; top:56px; left:0;
background-color:#7f7f7f3f; z-index:5;
height:0; padding-bottom: 30px;
transition: height 0.33s;
border-radius: 0 0 8px 8px;
overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none;
}
#difficulty-selector::-webkit-scrollbar { display: none; }
#difficulty-selector:hover {
opacity: 1;
height: 50%;
}
#difficulty-selector-frame {
display: grid; grid-auto-rows: 30px auto; grid-template-columns: 1fr 14fr 1fr;
}
#difficulty-selector-frame > .difficulty-selector-header {
grid-column: 1 / 4;
display: flex; align-items: center;
padding:0 2%;
}
#difficulty-selector-frame > .difficulty-selector-header::after {
content: '';
flex-grow: 1;
margin: 0 1%;
border-bottom: 2px solid #7f7f7f3f;
}
#difficulty-selector-frame > .difficulty-selector-content {
grid-column: 2;
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-auto-rows: minmax(40px, auto);
}
[data-attribute].chart-digest::before {
content: '';
width:32px; height:28px;
background-size: contain;
background-repeat: no-repeat;
}
[data-attribute="1"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/355.png"); }
[data-attribute="2"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/5528.png"); }
[data-attribute="3"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/8513.png"); }
[data-attribute="4"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/234.png"); }
[data-attribute="5"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/5042.png"); }
[data-attribute="6"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/4859.png"); }
[data-attribute="9"].chart-digest::before { background-image: url("https://as.lovelive.eu.org/images_b95/7379.png"); }
[data-epilog].chart-digest::after {
content: attr(data-epilog);
position: absolute; right: -8px; bottom: -12px;
background-color: #ffc3db55;
padding: 2px; border-radius: 4px;
line-height: 100%;
}
.chart-digest {
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color: #7f7f7f7f;
white-space: pre;
color: white;
}
.chart-digest[data-difficulty="beginner"] { box-shadow: 0 0 8px 8px #7fdfff40; }
.chart-digest[data-difficulty="intermediate"] { box-shadow: 0 0 8px 8px #7fdf9f40; }
.chart-digest[data-difficulty="advanced"] { box-shadow: 0 0 8px 8px #ffef7f40; }
.chart-digest[data-difficulty="expert"] { box-shadow: 0 0 8px 8px #ff40582b; }
.chart-digest[data-difficulty="challenge"] { box-shadow: 0 0 8px 8px #cf40ff2b; }
/* 基本信息 */
.chart-top {
grid-column: 1 / -1;
font-size: 120%; font-weight: bold;
display: grid; grid-template-columns: 1fr 1fr;
align-items:top;
}
.chart-info {
display: grid;
justify-content:left;
padding-left: max(0px, 5% - 25px);
}
.chart-info > div {
display: grid;
}
.chart-info > div > div {
display: flex; justify-content: center; align-items: center;
white-space: pre;
}
.chart-info > div > div:nth-child(1) {
font-size: 80%; line-height: 0%; opacity: 0.6;
}
.chart-info > div > div:nth-child(2) {
font-size: 120%; line-height: inherit; opacity: 1;
}
.chart-voltage {
grid-column: 1 / -1;
position: relative;
height: 24px;
box-shadow: 0 0 0 1px #808080;
}
.chart-voltage > [data-voltage-s], .chart-voltage > [data-voltage-a], .chart-voltage > [data-voltage-b],.chart-voltage > [data-voltage-c],
.chart-voltage > [data-voltage-p] {
position: absolute;
top: 0; left: 0; height: 100%;
display: flex; align-items: center; justify-content: right;
font-size: 120%; font-weight: bold;
}
.chart-voltage .voltage-line {
position:absolute; top: 100%; right: 0;
font-weight: bold; line-height: 120%;
opacity: 0.8;
}
.chart-voltage > [data-voltage-s] { background-color: #80808020; }
.chart-voltage > [data-voltage-a] { background-color: #80808020; }
.chart-voltage > [data-voltage-b] { background-color: #80808030; }
.chart-voltage > [data-voltage-c] { background-color: #80808040; }
.chart-voltage > [data-voltage-p] { background-color: #80808040; }
.chart-voltage .voltage-reward {
position: absolute; bottom: 100%; right: 0;
font-weight: bold; line-height: 120%;
opacity: 0.8;
}
.chart-voltage > [data-voltage-reward] {
position: absolute;
top: 0; left: 0; height: 50%;
display: flex; align-items: center; justify-content: right;
font-weight: bold;
box-shadow: 0 0 0 1px #808080;
}
.chart-voltage > [data-voltage-s]::after { content: 'S'; }
.chart-voltage > [data-voltage-a]::after { content: 'A'; }
.chart-voltage > [data-voltage-b]::after { content: 'B'; }
.chart-voltage > [data-voltage-c]::after { content: 'C'; }
.chart-voltage > [data-voltage-p]::after { content: 'Pass'; }
.chart-voltage > [data-voltage-reward]::after {
content: 'from Appeal Chance';
font-size: 12px; white-space: pre;
}
@media only screen and (min-width: 640px) {
.chart-gimmicks, .chart-gimmicks-b { grid-template-columns: repeat(auto-fill, 280px); }
.chart-info { grid-template-columns: repeat(5, 120px); }
}
@media only screen and (max-width: 640px) {
.chart-gimmicks, .chart-gimmicks-b { grid-template-columns: repeat(2, 280px); }
.chart-gimmicks-b { transform: scale(0.9) translateY(-10%); }
.chart-gimmicks { transform: scale(0.9) translateY(-10%) translateY(0px); }
.chart-info { grid-template-columns: repeat(5, 100px); }
}
@media only screen and (max-width: 576px) { .chart-gimmicks { transform: scale(0.8) translateY(-20%) translateY(-20px); } .chart-gimmicks-b { transform: scale(0.8) translateY(-20%); } }
@media only screen and (max-width: 512px) { .chart-gimmicks { transform: scale(0.7) translateY(-30%) translateY(-60px); } .chart-gimmicks-b { transform: scale(0.7) translateY(-30%); } }
@media only screen and (max-width: 448px) { .chart-gimmicks { transform: scale(0.6375) translateY(-36.25%) translateY(-100px); } .chart-gimmicks-b { transform: scale(0.6375) translateY(-36.25%); } }
@media only screen and (max-width: 408px) { .chart-gimmicks { transform: scale(0.5625) translateY(-43.75%) translateY(-170px); } .chart-gimmicks-b { transform: scale(0.5625) translateY(-43.75%); } }
@media only screen and (max-width: 360px) { .chart-gimmicks { transform: scale(0.5) translateY(-50%) translateY(-265px); } .chart-gimmicks-b { transform: scale(0.5) translateY(-50%); } }
.chart-gimmicks, .chart-gimmicks-b {
display: grid; justify-content: center;
padding: 20px 0;
grid-gap: 20px;
font-size: 15px;
}
/* 特效信息 */
.header-live-specialty, .header-note-gimmick, .header-appeal-chance {
grid-column: 1 / -1;
padding-left: 2%;
font-weight: bold; line-height: 100%;
}
.header-live-specialty::before { content: 'Live特征' }
.header-note-gimmick::before { content: '节奏图示特效' }
.header-appeal-chance::before { content: 'Appeal Chance特效' }
[class|="live-specialty"], [class|="note-gimmick"], [class|="appeal-chance"] {
position: relative;
display: grid; grid-gap: 4px;
padding: 4px 8px;
border: 4px solid #80808040; box-shadow: 0 0 0 1px #808080;
transition: border 0.22s;
}
[class|="live-specialty"] { grid-column: 1 / -1; grid-template-rows: 1fr 0 2fr; }
[class|="note-gimmick"], [class|="appeal-chance"] { grid-template-rows: 2fr 0 7fr; }
[class|="live-specialty"] > div, [class|="note-gimmick"] > div, [class|="appeal-chance"] > div {
display: flex; align-items: center;
}
[class|="live-specialty"]:hover, [class|="note-gimmick"]:hover, [class|="appeal-chance"]:hover {
border: 4px solid #808080b0;
}
[class|="live-specialty"] > div:nth-child(2), [class|="note-gimmick"] > div:nth-child(2), [class|="appeal-chance"] > div:nth-child(2) {
border-bottom: 2px dotted;
}
[class|="note-gimmick"] > div:nth-child(3), [class|="appeal-chance"] > div:nth-child(3) {
font-size: 12px;
}
[class|="note-gimmick"] > div:nth-child(4), [class|="appeal-chance"] > div:nth-child(4) {
position: absolute; right: 0; bottom: 0;
text-align: right; font-weight: bold; line-height: 100%;
background-color: #80808040;
padding: 4px 0 0 4px; border-radius: 4px 0 0 0;
transition: color 0.22s, background-color 0.22s;
display: grid; grid-column-gap: 6px;
}
[class|="note-gimmick"] > div:nth-child(4) { grid-template-columns: repeat(5, 26px); }
[class|="appeal-chance"] > div:nth-child(4) { grid-template-columns: 26px minmax(60px, auto); grid-template-rows: 1fr 1fr; grid-auto-flow: column; }
[class|="note-gimmick"] > div:nth-child(4) > span, [class|="appeal-chance"] > div:nth-child(4) > span {
opacity: 0.75;
}
/* 暗色主题下升高右下文字不透明度(选择器层数过多!) */
.skin-citizen-dark [class|="note-gimmick"] > div:nth-child(4) > span, .skin-citizen-dark [class|="appeal-chance"] > div:nth-child(4) > span {
opacity: 0.95;
}
[class|="note-gimmick"]:hover > div:nth-child(4), [class|="appeal-chance"]:hover > div:nth-child(4) {
background-color: #808080b0;
color: #fff;
}
.chart {
grid-column: 1 / -1;
display: grid; grid-template-rows: 12px 12px;
box-shadow: 0 0 0 1px #808080;
overflow: clip visible;
}
.chart > div {
position: relative;
}
.chart > div[data-gimmick-id], .chart > div[data-ac-id] {
background-color: #80808040;
transition: background-color 0.22s;
}
.chart > div[data-gimmick-id] { grid-row: 1; }
.chart > div[data-ac-id] { grid-row: 2; }
.note-gimmick-1:hover ~ .chart > div[data-gimmick-id="1"],
.note-gimmick-2:hover ~ .chart > div[data-gimmick-id="2"],
.note-gimmick-3:hover ~ .chart > div[data-gimmick-id="3"],
.note-gimmick-4:hover ~ .chart > div[data-gimmick-id="4"],
.note-gimmick-5:hover ~ .chart > div[data-gimmick-id="5"],
.note-gimmick-6:hover ~ .chart > div[data-gimmick-id="6"],
.note-gimmick-7:hover ~ .chart > div[data-gimmick-id="7"],
.note-gimmick-8:hover ~ .chart > div[data-gimmick-id="8"],
.note-gimmick-9:hover ~ .chart > div[data-gimmick-id="9"],
.note-gimmick-10:hover ~ .chart > div[data-gimmick-id="10"],
.note-gimmick-11:hover ~ .chart > div[data-gimmick-id="11"],
.note-gimmick-12:hover ~ .chart > div[data-gimmick-id="12"] { background-color: #808080b0; }
.note-gimmick-1:hover ~ .chart > div[data-gimmick-id="1"][data-duration],
.note-gimmick-2:hover ~ .chart > div[data-gimmick-id="2"][data-duration],
.note-gimmick-3:hover ~ .chart > div[data-gimmick-id="3"][data-duration],
.note-gimmick-4:hover ~ .chart > div[data-gimmick-id="4"][data-duration],
.note-gimmick-5:hover ~ .chart > div[data-gimmick-id="5"][data-duration],
.note-gimmick-6:hover ~ .chart > div[data-gimmick-id="6"][data-duration],
.note-gimmick-7:hover ~ .chart > div[data-gimmick-id="7"][data-duration],
.note-gimmick-8:hover ~ .chart > div[data-gimmick-id="8"][data-duration],
.note-gimmick-9:hover ~ .chart > div[data-gimmick-id="9"][data-duration],
.note-gimmick-10:hover ~ .chart > div[data-gimmick-id="10"][data-duration],
.note-gimmick-11:hover ~ .chart > div[data-gimmick-id="11"][data-duration],
.note-gimmick-12:hover ~ .chart > div[data-gimmick-id="12"][data-duration] { background-color: transparent; }
.chart > div[data-gimmick-id][data-note-id]::after {
content: attr(data-note-id);
color: #808080b0;
font-weight: bold; line-height: 120%;
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
transition: opacity 0.22s 0.08s;
opacity: 0;
}
.note-gimmick-1:hover ~ .chart > div[data-gimmick-id="1"]::after,
.note-gimmick-2:hover ~ .chart > div[data-gimmick-id="2"]::after,
.note-gimmick-3:hover ~ .chart > div[data-gimmick-id="3"]::after,
.note-gimmick-4:hover ~ .chart > div[data-gimmick-id="4"]::after,
.note-gimmick-5:hover ~ .chart > div[data-gimmick-id="5"]::after,
.note-gimmick-6:hover ~ .chart > div[data-gimmick-id="6"]::after,
.note-gimmick-7:hover ~ .chart > div[data-gimmick-id="7"]::after,
.note-gimmick-8:hover ~ .chart > div[data-gimmick-id="8"]::after,
.note-gimmick-9:hover ~ .chart > div[data-gimmick-id="9"]::after,
.note-gimmick-10:hover ~ .chart > div[data-gimmick-id="10"]::after,
.note-gimmick-11:hover ~ .chart > div[data-gimmick-id="11"]::after,
.note-gimmick-12:hover ~ .chart > div[data-gimmick-id="12"]::after { opacity: 1; }
.chart > div[data-gimmick-id][data-duration]::before {
content: '';
background-color: #80808080;
position: absolute; top: 0; left: 100%;
height: 100%;
transition: opacity 0.22s 0.08s;
opacity: 0;
}
.chart > div[data-gimmick-id][data-duration="3"]::before { width: 300%; }
.chart > div[data-gimmick-id][data-duration="10"]::before { width: 1000%; }
.chart > div[data-gimmick-id][data-duration="20"]::before { width: 2000%; }
.chart > div[data-gimmick-id][data-duration="30"]::before { width: 3000%; }
.note-gimmick-1:hover ~ .chart > div[data-gimmick-id="1"][data-duration]::before,
.note-gimmick-2:hover ~ .chart > div[data-gimmick-id="2"][data-duration]::before,
.note-gimmick-3:hover ~ .chart > div[data-gimmick-id="3"][data-duration]::before,
.note-gimmick-4:hover ~ .chart > div[data-gimmick-id="4"][data-duration]::before,
.note-gimmick-5:hover ~ .chart > div[data-gimmick-id="5"][data-duration]::before,
.note-gimmick-6:hover ~ .chart > div[data-gimmick-id="6"][data-duration]::before,
.note-gimmick-7:hover ~ .chart > div[data-gimmick-id="7"][data-duration]::before,
.note-gimmick-8:hover ~ .chart > div[data-gimmick-id="8"][data-duration]::before,
.note-gimmick-9:hover ~ .chart > div[data-gimmick-id="9"][data-duration]::before,
.note-gimmick-10:hover ~ .chart > div[data-gimmick-id="10"][data-duration]::before,
.note-gimmick-11:hover ~ .chart > div[data-gimmick-id="11"][data-duration]::before,
.note-gimmick-12:hover ~ .chart > div[data-gimmick-id="12"][data-duration]::before { opacity: 1; }
.header-note-gimmick:hover ~ .chart > div[data-gimmick-id] {
background-color: #808080b0;
}
.header-note-gimmick:hover ~ .chart > div[data-gimmick-id][data-note-id]::after {
opacity: 1;
}
.appeal-chance-1:hover ~ .chart > div[data-ac-id="1"],
.appeal-chance-2:hover ~ .chart > div[data-ac-id="2"],
.appeal-chance-3:hover ~ .chart > div[data-ac-id="3"],
.appeal-chance-4:hover ~ .chart > div[data-ac-id="4"],
.appeal-chance-5:hover ~ .chart > div[data-ac-id="5"],
.appeal-chance-6:hover ~ .chart > div[data-ac-id="6"],
.appeal-chance-7:hover ~ .chart > div[data-ac-id="7"],
.appeal-chance-8:hover ~ .chart > div[data-ac-id="8"],
.appeal-chance-9:hover ~ .chart > div[data-ac-id="9"],
.appeal-chance-10:hover ~ .chart > div[data-ac-id="10"],
.appeal-chance-11:hover ~ .chart > div[data-ac-id="11"],
.appeal-chance-12:hover ~ .chart > div[data-ac-id="12"] {background-color: #808080b0; }
.chart > div[data-ac-id][data-note-id]::after {
content: attr(data-note-id);
color: #808080b0;
font-weight: bold; line-height: 120%;
position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
transition: opacity 0.22s 0.08s;
opacity: 0;
}
.appeal-chance-1:hover ~ .chart > div[data-ac-id="1"][data-note-id]::after,
.appeal-chance-2:hover ~ .chart > div[data-ac-id="2"][data-note-id]::after,
.appeal-chance-3:hover ~ .chart > div[data-ac-id="3"][data-note-id]::after,
.appeal-chance-4:hover ~ .chart > div[data-ac-id="4"][data-note-id]::after,
.appeal-chance-5:hover ~ .chart > div[data-ac-id="5"][data-note-id]::after,
.appeal-chance-6:hover ~ .chart > div[data-ac-id="6"][data-note-id]::after,
.appeal-chance-7:hover ~ .chart > div[data-ac-id="7"][data-note-id]::after,
.appeal-chance-8:hover ~ .chart > div[data-ac-id="8"][data-note-id]::after,
.appeal-chance-9:hover ~ .chart > div[data-ac-id="9"][data-note-id]::after,
.appeal-chance-10:hover ~ .chart > div[data-ac-id="10"][data-note-id]::after,
.appeal-chance-11:hover ~ .chart > div[data-ac-id="11"][data-note-id]::after,
.appeal-chance-12:hover ~ .chart > div[data-ac-id="12"][data-note-id]::after { opacity: 1; }
.header-appeal-chance:hover ~ .chart > div[data-ac-id] {
background-color: #808080b0;
}
.header-appeal-chance:hover ~ .chart > div[data-ac-id][data-note-id]::after {
opacity: 1;
}