无编辑摘要 标签:已被回退 |
无编辑摘要 |
||
(未显示同一用户的31个中间版本) | |||
第7行: | 第7行: | ||
#difficulty-selector { | #difficulty-selector { | ||
position:fixed; top:56px; left:0; | position:fixed; top:56px; left:0; | ||
background-color:# | background-color:#a9a9aba7; z-index:5; | ||
height:0; padding-bottom: | height:0; padding-bottom: 42px; | ||
transition: height 0.33s; | transition: height 0.33s; | ||
border-radius: 0 0 8px 8px; | border-radius: 0 0 8px 8px; | ||
font-weight: 650; | |||
overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; | overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; | ||
} | } | ||
第18行: | 第19行: | ||
height: 50%; | height: 50%; | ||
} | } | ||
.difficulty-selector-frame { | |||
display: grid; grid-auto-rows: | display: grid; grid-auto-rows: 42px auto; grid-template-columns: 1fr 14fr 1fr; | ||
} | } | ||
.difficulty-selector-frame > .difficulty-selector-header { | |||
grid-column: 1 / 4; | grid-column: 1 / 4; | ||
display: flex; align-items: center; | display: flex; align-items: center; | ||
padding:0 2%; | padding:0 2%; | ||
} | } | ||
[data-permanent].difficulty-selector-header::before { content: '通常曲目'; } | |||
[data-event].difficulty-selector-header::before { content: '活动先行配信'; } | |||
[data-story-main].difficulty-selector-header::before { content: '主线剧情'; } | |||
[data-dlp].difficulty-selector-header::before { content: 'Dream Live Parade'; } | |||
[data-sbl].difficulty-selector-header::before { content: 'SIFAS Big Live'; } | |||
.difficulty-selector-header::after { | |||
content: ''; | content: ''; | ||
flex-grow: 1; | flex-grow: 1; | ||
第32行: | 第38行: | ||
border-bottom: 2px solid #7f7f7f3f; | border-bottom: 2px solid #7f7f7f3f; | ||
} | } | ||
.difficulty-selector-frame > .difficulty-selector-content { | |||
grid-column: 2; | grid-column: 2; | ||
display: grid; gap: 10px; | display: grid; gap: 10px; | ||
第40行: | 第46行: | ||
[data-attribute].chart-digest::before { | [data-attribute].chart-digest::before { | ||
content: ''; | content: ''; | ||
width: | width:36px; height:32px; | ||
background-size: contain; | background-size: contain; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
第62行: | 第68行: | ||
.chart-digest { | .chart-digest { | ||
position: relative; | position: relative; | ||
display: | display: grid; grid-template-columns: auto auto; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
border-radius: 8px; | border-radius: 8px; | ||
background-color: # | background-color: #0000007f; | ||
padding: 0 5%; | |||
color: white; | color: white; | ||
text-shadow: 2px 2px 1px black; | |||
} | |||
.chart-digest[data-difficulty="10"] { box-shadow: 0 0 8px 8px #7fdfff40; } | |||
.chart-digest[data-difficulty="20"] { box-shadow: 0 0 8px 8px #7fdf9f40; } | |||
.chart-digest[data-difficulty="30"] { box-shadow: 0 0 8px 8px #ffef7f40; } | |||
.chart-digest[data-difficulty="35"] { box-shadow: 0 0 8px 8px #ff40582b; } | |||
.chart-digest[data-difficulty="37"] { box-shadow: 0 0 8px 8px #cf40ff2b; } | |||
/* 歌曲基本信息 */ | |||
.base-info { | |||
display: flex; flex-direction: column; justify-content: center; align-items: center; | |||
} | } | ||
/* 基本信息 */ | /* 基本信息 */ | ||
第94行: | 第106行: | ||
.chart-info-line { | .chart-info-line { | ||
display: grid; | display: grid; | ||
} | } | ||
.chart-info-line > div > div { | .chart-info-line > div > div { | ||
text-align: center; | |||
white-space: pre; | white-space: pre; | ||
} | } | ||
第107行: | 第115行: | ||
} | } | ||
.chart-info-line > div > div:nth-child(2) { | .chart-info-line > div > div:nth-child(2) { | ||
font-size: 120% | font-size: 120%; | ||
} | } | ||
.chart-voltage { | .chart-voltage { | ||
第126行: | 第134行: | ||
font-weight: bold; line-height: 120%; | font-weight: bold; line-height: 120%; | ||
opacity: 0.8; | opacity: 0.8; | ||
} | } | ||
.chart-voltage > [data-voltage-s] { background-color: #80808020; } | .chart-voltage > [data-voltage-s] { background-color: #80808020; } | ||
第141行: | 第148行: | ||
position: absolute; | position: absolute; | ||
top: 0; left: 0; height: 50%; | top: 0; left: 0; height: 50%; | ||
display: flex; align-items: center; justify-content: | display: flex; align-items: center; justify-content: center; | ||
font-weight: bold; | font-weight: bold; | ||
box-shadow: 0 0 0 1px #808080; | box-shadow: 0 0 0 1px #808080; | ||
} | } | ||
.chart-voltage > [data-voltage-s]::after { content: 'S'; } | .chart-voltage > [data-voltage-s]::after { content: 'S'; z-index: 3; } | ||
.chart-voltage > [data-voltage-a]::after { content: 'A'; } | .chart-voltage > [data-voltage-a]::after { content: 'A'; z-index: 3; } | ||
.chart-voltage > [data-voltage-b]::after { content: 'B'; } | .chart-voltage > [data-voltage-b]::after { content: 'B'; z-index: 3; } | ||
.chart-voltage > [data-voltage-c]::after { content: 'C'; } | .chart-voltage > [data-voltage-c]::after { content: 'C'; z-index: 3; } | ||
.chart-voltage > [data-voltage-p]::after { content: 'Pass'; } | .chart-voltage > [data-voltage-p]::after { content: 'Pass'; z-index: 3; } | ||
.chart-voltage > [data-voltage-reward]::after { | .chart-voltage > [data-voltage-reward]::after { | ||
content: 'from Appeal Chance'; | content: 'from Appeal Chance'; | ||
第179行: | 第186行: | ||
/* 特效信息 */ | /* 特效信息 */ | ||
.header-live-specialty, .header-note-gimmick, .header-appeal-chance { | .header-live-specialty, | ||
.header-note-gimmick, .header-no-note-gimmick, | |||
.header-appeal-chance, .header-no-appeal-chance { | |||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
padding-left: 2%; | padding-left: 2%; | ||
font-weight: bold; line-height: 100%; | font-weight: bold; line-height: 100%; | ||
} | } | ||
.header-live-specialty:: | .header-live-specialty::after { content: 'Live特征' } | ||
.header-note-gimmick:: | .header-note-gimmick::after { content: '节奏图示特效' } | ||
.header-appeal-chance:: | .header-no-note-gimmick::after { content: '此Live没有特效节奏图示' } | ||
.header-appeal-chance::after { content: 'Appeal Chance特效' } | |||
.header-no-appeal-chance::after { content: '此Live没有Appeal Chance' } | |||
[class|="live-specialty"], [class|="note-gimmick"], [class|="appeal-chance"] { | [class|="live-specialty"], [class|="note-gimmick"], [class|="appeal-chance"] { | ||
position: relative; | position: relative; | ||
display: grid; grid-gap: 4px; | display: grid; grid-gap: 4px; | ||
padding: | padding: 8px 12px; | ||
} | } | ||
[class|="live-specialty"] { grid-column: 1 / -1; grid-template-rows: 1fr 0 2fr; } | [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|="note-gimmick"], [class|="appeal-chance"] { grid-template-rows: 2fr 0 7fr; grid-template-columns: 100%; } | ||
[class|="live-specialty"] > div, [class|="note-gimmick"] > div, [class|="appeal-chance"] > div { | [class|="live-specialty"] > div, [class|="note-gimmick"] > div, [class|="appeal-chance"] > div { | ||
display: flex; align-items: center; | display: flex; align-items: center; | ||
} | } | ||
/* 应对溢出 */ | |||
[class|="note-gimmick"] > div:nth-child(1), [class|="appeal-chance"] > div:nth-child(1) { | |||
white-space: pre; | |||
} | } | ||
[class|="live-specialty"] > div:nth-child(2), [class|="note-gimmick"] > div:nth-child(2), [class|="appeal-chance"] > div:nth-child(2) { | [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; | border-bottom: 2px dotted; | ||
opacity: 0.49; transition: opacity 0.22s; | |||
} | } | ||
[class|="note-gimmick"] > div:nth-child(3), [class|="appeal-chance"] > div:nth-child(3) { | [class|="note-gimmick"] > div:nth-child(3), [class|="appeal-chance"] > div:nth-child(3) { | ||
第211行: | 第221行: | ||
} | } | ||
[class|="note-gimmick"] > div:nth-child(4), [class|="appeal-chance"] > div:nth-child(4) { | [class|="note-gimmick"] > div:nth-child(4), [class|="appeal-chance"] > div:nth-child(4) { | ||
position: absolute; right: | position: absolute; right: 4px; bottom: 4px; | ||
text-align: right; font-weight: bold; line-height: 100%; | text-align: right; font-weight: bold; line-height: 100%; | ||
padding: 4px 0 0 4px; | |||
padding: 4px 0 0 4px | transition: color 0.22s; | ||
transition: | |||
display: grid; grid-column-gap: 6px; | display: grid; grid-column-gap: 6px; | ||
} | } | ||
[class|="note-gimmick"] > div:nth-child(4) { grid-template-columns: repeat(5, 26px); } | [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|="appeal-chance"] > div:nth-child(4) { grid-template-columns: 26px minmax(60px, auto); grid-template-rows: 1fr 1fr; grid-auto-flow: column; } | ||
[ | /* 特技AC通过率显示 */ | ||
opacity: 0. | [data-ac-type="9"] > div:nth-child(5) { | ||
position:absolute; right:4px; top:4px; | |||
text-align:right; font-weight:bold; line-height: 100%; | |||
opacity: 0.49; | |||
transition: opacity 0.22s; | |||
display: grid; grid-template: 1fr 1fr/1fr 1fr 1fr; column-gap:4px; grid-auto-flow: column; | |||
} | } | ||
[ | |||
[data-gimmick-color]::before { | |||
content: ''; | |||
position: absolute; width: 100%; height: 100%; | |||
border: 4px solid #808080; | |||
box-sizing: border-box; | |||
opacity: 0.31; transition: opacity 0.22s; | |||
} | } | ||
[data-gimmick-color]::after { | |||
content: ''; | |||
position: absolute; width: 100%; height: 100%; | |||
box-shadow: 0 0 0 1px #808080; | |||
opacity: 0.49; transition: opacity 0.22s; | |||
} | |||
[data-gimmick-color] > div:nth-child(4)::before { | |||
content: ''; | |||
position: absolute; width: 100%; height: 100%; | |||
border-radius: 4px 0 0 0; | |||
background-color: #808080; | |||
opacity: 0.31; transition: opacity 0.22s; | |||
} | |||
[data-gimmick-color="1"]::before { border-color: #ca3580; } | |||
[data-gimmick-color="1"]::after { box-shadow: 0 0 0 1px #ca3580; } | |||
[data-gimmick-color="1"] > div:nth-child(2) { border-color: #ca3580; } | |||
[data-gimmick-color="1"] > div:nth-child(4)::before { background-color: #ca3580; } | |||
[data-gimmick-color="1"] > div:nth-child(4) { color: #ca3580; } | |||
[data-gimmick-color="2"]::before { border-color: #ca3535; } | |||
[data-gimmick-color="2"]::after { box-shadow: 0 0 0 1px #ca3535; } | |||
[data-gimmick-color="2"] > div:nth-child(2) { border-color: #ca3535; } | |||
[data-gimmick-color="2"] > div:nth-child(4)::before { background-color: #ca3535; } | |||
[data-gimmick-color="2"] > div:nth-child(4) { color: #ca3535; } | |||
[data-gimmick-color="3"]::before { border-color: #a535ca; } | |||
[data-gimmick-color="3"]::after { box-shadow: 0 0 0 1px #a535ca; } | |||
[data-gimmick-color="3"] > div:nth-child(2) { border-color: #a535ca; } | |||
[data-gimmick-color="3"] > div:nth-child(4)::before { background-color: #a535ca; } | |||
[data-gimmick-color="3"] > div:nth-child(4) { color: #a535ca; } | |||
[data-gimmick-color="4"]::before { border-color: #355aca; } | |||
[data-gimmick-color="4"]::after { box-shadow: 0 0 0 1px #355aca; } | |||
[data-gimmick-color="4"] > div:nth-child(2) { border-color: #355aca; } | |||
[data-gimmick-color="4"] > div:nth-child(4)::before { background-color: #355aca; } | |||
[data-gimmick-color="4"] > div:nth-child(4) { color: #355aca; } | |||
[data-gimmick-color="5"]::before { border-color: #ca8035; } | |||
[data-gimmick-color="5"]::after { box-shadow: 0 0 0 1px #ca8035; } | |||
[data-gimmick-color="5"] > div:nth-child(2) { border-color: #ca8035; } | |||
[data-gimmick-color="5"] > div:nth-child(4)::before { background-color: #ca8035; } | |||
[data-gimmick-color="5"] > div:nth-child(4) { color: #ca8035; } | |||
[data-gimmick-color="6"]::before { border-color: #caca35; } | |||
[data-gimmick-color="6"]::after { box-shadow: 0 0 0 1px #caca35; } | |||
[data-gimmick-color="6"] > div:nth-child(2) { border-color: #caca35; } | |||
[data-gimmick-color="6"] > div:nth-child(4)::before { background-color: #caca35; } | |||
[data-gimmick-color="6"] > div:nth-child(4) { color: #caca35; } | |||
[data-gimmick-color="7"]::before { border-color: #35ca35; } | |||
[data-gimmick-color="7"]::after { box-shadow: 0 0 0 1px #35ca35; } | |||
[data-gimmick-color="7"] > div:nth-child(2) { border-color: #35ca35; } | |||
[data-gimmick-color="7"] > div:nth-child(4)::before { background-color: #35ca35; } | |||
[data-gimmick-color="7"] > div:nth-child(4) { color: #35ca35; } | |||
[data-gimmick-color]:hover::before { opacity: 0.69; } | |||
[data-gimmick-color]:hover::after { opacity: 0.81; } | |||
[data-gimmick-color]:hover > div:nth-child(2) { opacity: 0.81; } | |||
[data-gimmick-color]:hover > div:nth-child(4)::before { opacity: 0.69; } | |||
[data-gimmick-color]:hover > div:nth-child(4) { color: #ffffffdd; } | |||
[data-gimmick-color]:hover > div:nth-child(5) { opacity: 0.81; } /* 特技AC通过率显示 */ | |||
/* hover优先显示会盖掉数字 */ | |||
[data-gimmick-color] > div:nth-child(4) > span { z-index:1; } | |||
.chart { | .chart { | ||
第234行: | 第309行: | ||
overflow: clip visible; | overflow: clip visible; | ||
} | } | ||
.chart > | .chart > [data-gimmick-id], .chart > [data-ac-id] { | ||
position: relative; | position: relative; | ||
} | } | ||
.chart > | .chart > [data-gimmick-id] { | ||
background-color: # | background-color: #808080; | ||
transition: background-color 0.22s; | opacity: 0.31; transition: background-color 0.22s /*,opacity 0.22s*/; | ||
grid-row: 1; | |||
} | } | ||
.chart > | .chart > [data-ac-id] { grid-row: 2; } | ||
.note-gimmick-1:hover ~ .chart > | .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"], | ||
.note-gimmick-2:hover ~ .chart > | .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"], | ||
.note-gimmick-3:hover ~ .chart > | .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"], | ||
.note-gimmick-4:hover ~ .chart > | .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"], | ||
.note-gimmick-5:hover ~ .chart > | .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"], | ||
.note-gimmick-6:hover ~ .chart > | .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"], | ||
.note-gimmick-7:hover ~ .chart > | .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"], | ||
.note-gimmick-8:hover ~ .chart > | .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"], | ||
.note-gimmick-9:hover ~ .chart > | .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"], | ||
.note-gimmick-10:hover ~ .chart > | .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"], | ||
.note-gimmick-11:hover ~ .chart > | .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"], | ||
.note-gimmick-12:hover ~ .chart > | .note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"] { opacity: 0.81; } | ||
.note-gimmick-1:hover ~ .chart > | /* 持续一定note的技能在hover后,本体背景变为透明 */ | ||
.note-gimmick-2:hover ~ .chart > | .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration], | ||
.note-gimmick-3:hover ~ .chart > | .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration], | ||
.note-gimmick-4:hover ~ .chart > | .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"][data-duration], | ||
.note-gimmick-5:hover ~ .chart > | .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"][data-duration], | ||
.note-gimmick-6:hover ~ .chart > | .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"][data-duration], | ||
.note-gimmick-7:hover ~ .chart > | .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"][data-duration], | ||
.note-gimmick-8:hover ~ .chart > | .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"][data-duration], | ||
.note-gimmick-9:hover ~ .chart > | .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"][data-duration], | ||
.note-gimmick-10:hover ~ .chart > | .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"][data-duration], | ||
.note-gimmick-11:hover ~ .chart > | .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"][data-duration], | ||
.note-gimmick-12:hover ~ .chart > | .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"][data-duration], | ||
.chart > | .note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"][data-duration] { background-color: transparent; } | ||
.chart > [data-gimmick-id][data-note-id]::after { | |||
content: attr(data-note-id); | content: attr(data-note-id); | ||
font-weight: bold; line-height: 120%; | font-weight: bold; line-height: 120%; | ||
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); | position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); | ||
transition: opacity 0.22s 0.08s | opacity: 0; transition: opacity 0.22s 0.08s; | ||
} | } | ||
.note-gimmick-1:hover ~ .chart > | .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"]::after, | ||
.note-gimmick-2:hover ~ .chart > | .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"]::after, | ||
.note-gimmick-3:hover ~ .chart > | .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"]::after, | ||
.note-gimmick-4:hover ~ .chart > | .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"]::after, | ||
.note-gimmick-5:hover ~ .chart > | .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"]::after, | ||
.note-gimmick-6:hover ~ .chart > | .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"]::after, | ||
.note-gimmick-7:hover ~ .chart > | .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"]::after, | ||
.note-gimmick-8:hover ~ .chart > | .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"]::after, | ||
.note-gimmick-9:hover ~ .chart > | .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"]::after, | ||
.note-gimmick-10:hover ~ .chart > | .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"]::after, | ||
.note-gimmick-11:hover ~ .chart > | .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"]::after, | ||
.note-gimmick-12:hover ~ .chart > | .note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"]::after { opacity: 1.00; } | ||
.chart > | |||
.chart > [data-gimmick-id][data-duration]::before { | |||
content: ''; | content: ''; | ||
position: absolute; top: 0; left: 100%; | position: absolute; top: 0; left: 100%; | ||
height: 100%; | height: 100%; | ||
transition: opacity 0.22s 0.08s | opacity: 0; transition: opacity 0.22s 0.08s; | ||
} | } | ||
.chart > | .chart > [data-gimmick-id][data-duration="3"]::before { width: 300%; } | ||
.chart > | .chart > [data-gimmick-id][data-duration="10"]::before { width: 1000%; } | ||
.chart > | .chart > [data-gimmick-id][data-duration="15"]::before { width: 1500%; } | ||
.chart > | .chart > [data-gimmick-id][data-duration="20"]::before { width: 2000%; } | ||
.note-gimmick-1:hover ~ .chart > | .chart > [data-gimmick-id][data-duration="30"]::before { width: 3000%; } | ||
.note-gimmick-2:hover ~ .chart > | .chart > [data-gimmick-id][data-duration="50"]::before { width: 5000%; } | ||
.note-gimmick-3:hover ~ .chart > | .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration]::before, | ||
.note-gimmick-4:hover ~ .chart > | .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration]::before, | ||
.note-gimmick-5:hover ~ .chart > | .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"][data-duration]::before, | ||
.note-gimmick-6:hover ~ .chart > | .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"][data-duration]::before, | ||
.note-gimmick-7:hover ~ .chart > | .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"][data-duration]::before, | ||
.note-gimmick-8:hover ~ .chart > | .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"][data-duration]::before, | ||
.note-gimmick-9:hover ~ .chart > | .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"][data-duration]::before, | ||
.note-gimmick-10:hover ~ .chart > | .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"][data-duration]::before, | ||
.note-gimmick-11:hover ~ .chart > | .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"][data-duration]::before, | ||
.note-gimmick-12:hover ~ .chart > | .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"][data-duration]::before, | ||
.note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"][data-duration]::before, | |||
.note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"][data-duration]::before { opacity: 0.85; } | |||
.chart > [data-ac-id]::before { | |||
opacity: | content: ''; | ||
position: absolute; width: 100%; height: 100%; | |||
opacity: 0.31; transition: opacity 0.22s; | |||
} | } | ||
.appeal-chance-1:hover ~ .chart > [data-ac-id="1"]::before, | |||
.appeal-chance-2:hover ~ .chart > [data-ac-id="2"]::before, | |||
.appeal-chance-3:hover ~ .chart > [data-ac-id="3"]::before, | |||
.appeal-chance-4:hover ~ .chart > [data-ac-id="4"]::before, | |||
.appeal-chance-5:hover ~ .chart > [data-ac-id="5"]::before, | |||
.appeal-chance-6:hover ~ .chart > [data-ac-id="6"]::before, | |||
.appeal-chance-7:hover ~ .chart > [data-ac-id="7"]::before, | |||
.appeal-chance-8:hover ~ .chart > [data-ac-id="8"]::before, | |||
.appeal-chance-9:hover ~ .chart > [data-ac-id="9"]::before, | |||
.appeal-chance-10:hover ~ .chart > [data-ac-id="10"]::before, | |||
.appeal-chance-11:hover ~ .chart > [data-ac-id="11"]::before, | |||
.appeal-chance-12:hover ~ .chart > [data-ac-id="12"]::before { opacity: 0.69 } | |||
.chart > [data-ac-id][data-note-id]::after { | |||
content: attr(data-note-id); | content: attr(data-note-id); | ||
font-weight: bold; line-height: 120%; | font-weight: bold; line-height: 120%; | ||
position: absolute; left: 50%; top: 100%; transform: translateX(-50%); | position: absolute; left: 50%; top: 100%; transform: translateX(-50%); | ||
第338行: | 第414行: | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
.appeal-chance-1:hover ~ .chart > | .appeal-chance-1:hover ~ .chart > [data-ac-id="1"][data-note-id]::after, | ||
.appeal-chance-2:hover ~ .chart > | .appeal-chance-2:hover ~ .chart > [data-ac-id="2"][data-note-id]::after, | ||
.appeal-chance-3:hover ~ .chart > | .appeal-chance-3:hover ~ .chart > [data-ac-id="3"][data-note-id]::after, | ||
.appeal-chance-4:hover ~ .chart > | .appeal-chance-4:hover ~ .chart > [data-ac-id="4"][data-note-id]::after, | ||
.appeal-chance-5:hover ~ .chart > | .appeal-chance-5:hover ~ .chart > [data-ac-id="5"][data-note-id]::after, | ||
.appeal-chance-6:hover ~ .chart > | .appeal-chance-6:hover ~ .chart > [data-ac-id="6"][data-note-id]::after, | ||
.appeal-chance-7:hover ~ .chart > | .appeal-chance-7:hover ~ .chart > [data-ac-id="7"][data-note-id]::after, | ||
.appeal-chance-8:hover ~ .chart > | .appeal-chance-8:hover ~ .chart > [data-ac-id="8"][data-note-id]::after, | ||
.appeal-chance-9:hover ~ .chart > | .appeal-chance-9:hover ~ .chart > [data-ac-id="9"][data-note-id]::after, | ||
.appeal-chance-10:hover ~ .chart > | .appeal-chance-10:hover ~ .chart > [data-ac-id="10"][data-note-id]::after, | ||
.appeal-chance-11:hover ~ .chart > | .appeal-chance-11:hover ~ .chart > [data-ac-id="11"][data-note-id]::after, | ||
.appeal-chance-12:hover ~ .chart > | .appeal-chance-12:hover ~ .chart > [data-ac-id="12"][data-note-id]::after { opacity: 1; } | ||
.header- | .header-note-gimmick:hover ~ .chart > [data-gimmick-id] { | ||
opacity: 0.69; | |||
} | |||
.header-note-gimmick:hover ~ .chart > [data-gimmick-id][data-note-id]::after { | |||
opacity: 0.81; | |||
} | } | ||
.header-appeal-chance:hover ~ .chart > | .header-appeal-chance:hover ~ .chart > [data-ac-id]::before { | ||
opacity: | opacity: 0.69; | ||
} | |||
.header-appeal-chance:hover ~ .chart > [data-ac-id][data-note-id]::after { | |||
opacity: 0.81; | |||
} | } | ||
[data-chart-color="1"][data-gimmick-id] { background-color: #ca3580; } | |||
[data-chart-color="2"][data-gimmick-id] { background-color: #ca3535; } | |||
[data-chart-color="3"][data-gimmick-id] { background-color: #a535ca; } | |||
[data-chart-color="4"][data-gimmick-id] { background-color: #355aca; } | |||
[data-chart-color="5"][data-gimmick-id] { background-color: #ca8035; } | |||
[data-chart-color="6"][data-gimmick-id] { background-color: #caca35; } | |||
[data-chart-color="7"][data-gimmick-id] { background-color: #35ca35; } | |||
[data-chart-color]::before { background-color: #808080; } | |||
[data-chart-color="1"]::before { background-color: #ca3580; } | |||
[data-chart-color="1"][data-note-id]::after { color: #ca3580; } | |||
[data-chart-color="2"]::before { background-color: #ca3535; } | |||
[data-chart-color="2"][data-note-id]::after { color: #ca3535; } | |||
[data-chart-color="3"]::before { background-color: #a535ca; } | |||
[data-chart-color="3"][data-note-id]::after { color: #a535ca; } | |||
[data-chart-color="4"]::before { background-color: #355aca; } | |||
[data-chart-color="4"][data-note-id]::after { color: #355aca; } | |||
[data-chart-color="5"]::before { background-color: #ca8035; } | |||
[data-chart-color="5"][data-note-id]::after { color: #ca8035; } | |||
[data-chart-color="6"]::before { background-color: #caca35; } | |||
[data-chart-color="6"][data-note-id]::after { color: #caca35; } | |||
[data-chart-color="7"]::before { background-color: #35ca35; } | |||
[data-chart-color="7"][data-note-id]::after { color: #35ca35; } | |||
</nowiki></div> | </nowiki></div> |