模板:CSSChartText:修订间差异

来自LoveLive! AS Wiki
(selector可视性增强)
(补充持续15/50note的效果 禁止note和ac第一行换行)
第205行: 第205行:
}
}
[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) {
第359行: 第363行:
.chart > [data-gimmick-id][data-duration="3"]::before { width: 300%; }
.chart > [data-gimmick-id][data-duration="3"]::before { width: 300%; }
.chart > [data-gimmick-id][data-duration="10"]::before { width: 1000%; }
.chart > [data-gimmick-id][data-duration="10"]::before { width: 1000%; }
.chart > [data-gimmick-id][data-duration="15"]::before { width: 1500%; }
.chart > [data-gimmick-id][data-duration="20"]::before { width: 2000%; }
.chart > [data-gimmick-id][data-duration="20"]::before { width: 2000%; }
.chart > [data-gimmick-id][data-duration="30"]::before { width: 3000%; }
.chart > [data-gimmick-id][data-duration="30"]::before { width: 3000%; }
.chart > [data-gimmick-id][data-duration="50"]::before { width: 5000%; }
.note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration]::before,
.note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration]::before,
.note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration]::before,
.note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration]::before,

2022年1月12日 (三) 18:32的版本

/* 选择难度 */ @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: 42px; transition: height 0.33s; border-radius: 0 0 8px 8px; font-weight: 650; 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: 42px 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%; } [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: ''; 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:36px; height:32px; 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: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; border-radius: 8px; background-color: #0000007f; padding: 0 5%; 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; } /* 基本信息 */ .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; grid-auto-flow: column; grid-template-rows: repeat(4, 1fr); justify-content: left; padding-left: max(0px, 5% - 25px); } @media only screen and (min-width: 1440px) { .chart-info { grid-template-rows: repeat(2, 1fr); } } .chart-info-line { display: grid; } .chart-info-line > div > div { text-align: center; white-space: pre; } .chart-info-line > div > div:nth-child(1) { font-size: 80%; line-height: 0%; opacity: 0.6; } .chart-info-line > div > div:nth-child(2) { font-size: 120%; } .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: flex-end; 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: center; font-weight: bold; box-shadow: 0 0 0 1px #808080; } .chart-voltage > [data-voltage-s]::after { content: 'S'; z-index: 10; } .chart-voltage > [data-voltage-a]::after { content: 'A'; z-index: 10; } .chart-voltage > [data-voltage-b]::after { content: 'B'; z-index: 10; } .chart-voltage > [data-voltage-c]::after { content: 'C'; z-index: 10; } .chart-voltage > [data-voltage-p]::after { content: 'Pass'; z-index: 10; } .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-line { 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-line { 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-no-note-gimmick, .header-appeal-chance, .header-no-appeal-chance { grid-column: 1 / -1; padding-left: 2%; font-weight: bold; line-height: 100%; } .header-live-specialty::after { content: 'Live特征' } .header-note-gimmick::after { content: '节奏图示特效' } .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"] { position: relative; display: grid; grid-gap: 4px; padding: 8px 12px; } [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; grid-template-columns: 100%; } [class|="live-specialty"] > div, [class|="note-gimmick"] > div, [class|="appeal-chance"] > div { 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) { 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) { font-size: 12px; } [class|="note-gimmick"] > div:nth-child(4), [class|="appeal-chance"] > div:nth-child(4) { position: absolute; right: 4px; bottom: 4px; text-align: right; font-weight: bold; line-height: 100%; padding: 4px 0 0 4px; transition: 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; } [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; } /* hover优先显示会盖掉数字 */ [data-gimmick-color] > div:nth-child(4) > span { z-index:1; } .chart { grid-column: 1 / -1; display: grid; grid-template-rows: 12px 12px; box-shadow: 0 0 0 1px #808080; overflow: clip visible; } .chart > [data-gimmick-id], .chart > [data-ac-id] { position: relative; } .chart > [data-gimmick-id] { background-color: #808080; opacity: 0.31; transition: background-color 0.22s /*,opacity 0.22s*/; grid-row: 1; } .chart > [data-ac-id] { grid-row: 2; } .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"], .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"], .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"], .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"], .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"], .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"], .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"], .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"], .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"], .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"], .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"], .note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"] { opacity: 0.81; } /* 持续一定note的技能在hover后,本体背景变为透明 */ .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration], .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration], .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"][data-duration], .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"][data-duration], .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"][data-duration], .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"][data-duration], .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"][data-duration], .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"][data-duration], .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"][data-duration], .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"][data-duration], .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"][data-duration], .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); font-weight: bold; line-height: 120%; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); opacity: 0; transition: opacity 0.22s 0.08s; } .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"]::after, .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"]::after, .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"]::after, .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"]::after, .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"]::after, .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"]::after, .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"]::after, .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"]::after, .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"]::after, .note-gimmick-10:hover ~ .chart > [data-gimmick-id="10"]::after, .note-gimmick-11:hover ~ .chart > [data-gimmick-id="11"]::after, .note-gimmick-12:hover ~ .chart > [data-gimmick-id="12"]::after { opacity: 1.00; } .chart > [data-gimmick-id][data-duration]::before { content: ''; position: absolute; top: 0; left: 100%; height: 100%; opacity: 0; transition: opacity 0.22s 0.08s; } .chart > [data-gimmick-id][data-duration="3"]::before { width: 300%; } .chart > [data-gimmick-id][data-duration="10"]::before { width: 1000%; } .chart > [data-gimmick-id][data-duration="15"]::before { width: 1500%; } .chart > [data-gimmick-id][data-duration="20"]::before { width: 2000%; } .chart > [data-gimmick-id][data-duration="30"]::before { width: 3000%; } .chart > [data-gimmick-id][data-duration="50"]::before { width: 5000%; } .note-gimmick-1:hover ~ .chart > [data-gimmick-id="1"][data-duration]::before, .note-gimmick-2:hover ~ .chart > [data-gimmick-id="2"][data-duration]::before, .note-gimmick-3:hover ~ .chart > [data-gimmick-id="3"][data-duration]::before, .note-gimmick-4:hover ~ .chart > [data-gimmick-id="4"][data-duration]::before, .note-gimmick-5:hover ~ .chart > [data-gimmick-id="5"][data-duration]::before, .note-gimmick-6:hover ~ .chart > [data-gimmick-id="6"][data-duration]::before, .note-gimmick-7:hover ~ .chart > [data-gimmick-id="7"][data-duration]::before, .note-gimmick-8:hover ~ .chart > [data-gimmick-id="8"][data-duration]::before, .note-gimmick-9:hover ~ .chart > [data-gimmick-id="9"][data-duration]::before, .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 { 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); 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 > [data-ac-id="1"][data-note-id]::after, .appeal-chance-2:hover ~ .chart > [data-ac-id="2"][data-note-id]::after, .appeal-chance-3:hover ~ .chart > [data-ac-id="3"][data-note-id]::after, .appeal-chance-4:hover ~ .chart > [data-ac-id="4"][data-note-id]::after, .appeal-chance-5:hover ~ .chart > [data-ac-id="5"][data-note-id]::after, .appeal-chance-6:hover ~ .chart > [data-ac-id="6"][data-note-id]::after, .appeal-chance-7:hover ~ .chart > [data-ac-id="7"][data-note-id]::after, .appeal-chance-8:hover ~ .chart > [data-ac-id="8"][data-note-id]::after, .appeal-chance-9:hover ~ .chart > [data-ac-id="9"][data-note-id]::after, .appeal-chance-10:hover ~ .chart > [data-ac-id="10"][data-note-id]::after, .appeal-chance-11:hover ~ .chart > [data-ac-id="11"][data-note-id]::after, .appeal-chance-12:hover ~ .chart > [data-ac-id="12"][data-note-id]::after { opacity: 1; } .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 > [data-ac-id]::before { 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; }