2,088
个编辑
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的75个中间版本) | |||
第1行: | 第1行: | ||
pre { | |||
font-family: Consolas, monospace; | |||
} | |||
.CodeMirror { | |||
font-family: Consolas, monospace; | |||
} | |||
.infobox-container { | |||
position: relative; | |||
float: right; | |||
} | |||
.infobox-body { | |||
border-collapse: collapse; | |||
border-style: solid; | |||
border-width: 0.4em; | |||
border-color: transparent; | |||
text-align: center; | |||
vertical-align: middle; | |||
} | |||
.infobox-border { | |||
position: absolute; | |||
inset: 0; | |||
z-index: 1; | |||
pointer-events: none; | |||
border-style: solid; | |||
border-width: 0.4em; | |||
border-radius: 10px; | |||
} | |||
.tooltip { | |||
position: relative; | |||
border-bottom: 1px dotted; | |||
cursor: help; | |||
} | |||
.tooltip .tooltip-content { | |||
visibility: hidden; | |||
position: absolute; | |||
top: 100%; | |||
left: -10em; | |||
z-index: 10000; | |||
padding: 0.5em; | |||
margin-top: 1em; | |||
border-radius: 0.2em; | |||
width: 20em; | |||
background-color: #F3F3F9; | |||
box-shadow: 0 0 0.2em #888; | |||
} | |||
.tooltip .tooltip-content::after { | |||
content: ""; | |||
position: absolute; | |||
top: -1em; | |||
left: 10.5em; | |||
margin-left: 0; | |||
border-width: 0.5em; | |||
border-style: solid; | |||
border-color: transparent transparent #F3F3F9 transparent; | |||
} | |||
.tooltip:hover .tooltip-content { | |||
visibility: visible; | |||
} | |||
.stripe tr:nth-child(odd) { | |||
background: #e9e9e9; | |||
} | |||
.skill-container { | |||
background-color: #d9d9dd; | |||
border-radius: 5px; | |||
box-sizing: border-box; | |||
display: grid; | |||
gap: 0.2em 1em; | |||
grid-template-columns: auto 1fr 1fr; | |||
grid-template-rows: auto auto 1fr; | |||
margin-bottom: 1em; | |||
margin-top: 1em; | |||
padding: 2em; | |||
} | |||
.skill-icon { | |||
grid-column: 1; | |||
grid-row: 1 / 3; | |||
} | |||
.skill-icon img { | |||
background-color: #373F45; | |||
border-radius: 5px; | |||
box-shadow: 0 0 5px #888; | |||
height: 64px; | |||
width: 64px; | |||
} | |||
.skill-name { | |||
color: #1C2A32; | |||
font-size: 1.5em; | |||
font-weight: bold; | |||
grid-column: 2 / 4; | |||
grid-row: 1; | |||
} | |||
.skill-tag { | |||
color: #5A5D62; | |||
font-size: 1.2em; | |||
grid-column: 2; | |||
grid-row: 2; | |||
} | |||
.skill-type { | |||
color: #515455; | |||
font-size: 1.2em; | |||
grid-column: 3; | |||
grid-row: 2; | |||
justify-self: right; | |||
} | |||
.skill-type-icon img { | |||
height: 32px; | |||
position: relative; | |||
top: -1px; | |||
vertical-align: middle; | |||
width: 32px; | |||
} | |||
.skill-content { | |||
background-color: #E2E1E8; | |||
border-radius: 5px; | |||
box-shadow: 0 0 5px #888; | |||
display: flex; | |||
gap: 1em; | |||
grid-column: 1 / 4; | |||
grid-row: 3; | |||
justify-self: stretch; | |||
margin-top: 0.5em; | |||
padding: 1em; | |||
} | |||
.skill-desc { | |||
display: flex; | |||
gap: 0.5em; | |||
flex: auto; | |||
flex-direction: column; | |||
} | |||
.skill-desc-cost { | |||
color: #34383c; | |||
font-weight: bold; | |||
} | |||
.skill-desc-break { | |||
color: #f26c1c; | |||
font-weight: bold; | |||
} | |||
.skill-desc-flavor { | |||
color: #83858a; | |||
margin-bottom: 0.5em; | |||
margin-top: 0.5em; | |||
} | |||
.skill-range-container { | |||
display: grid; | |||
flex: initial; | |||
grid-template-rows: auto auto auto auto auto 1fr; | |||
width: 128px; | |||
} | |||
.skill-range-image { | |||
grid-column: 1 / 3; | |||
grid-row: 1; | |||
} | |||
.skill-range-image img { | |||
height: 128px; | |||
width: 128px; | |||
} | |||
.skill-range-tag { | |||
color: #51565b; | |||
font-size: 0.9em; | |||
margin-top: 0.75em; | |||
} | |||
.skill-range-value { | |||
color: #1c2a32; | |||
font-size: 0.9em; | |||
justify-self: right; | |||
margin-top: 0.75em; | |||
} | |||
.skill-range-line { | |||
background-color: #D3D3D9; | |||
grid-column: 1 / 3; | |||
height: 0.25em; | |||
justify-self: start; | |||
position: relative; | |||
top: -3px; | |||
width: 100%; | |||
} | |||
.skill-range-stretch { | |||
justify-self: stretch; | |||
} | |||
.skill-upgrade-container { | |||
display: grid; | |||
gap: 0.5em; | |||
grid-template-columns: auto 1fr; | |||
} | |||
.skill-upgrade-name { | |||
background-color: #384B53; | |||
border-radius: 3px; | |||
box-shadow: 0 0 3px #888; | |||
color: #EDEDED; | |||
height: 1lh; | |||
line-height: 1lh; | |||
padding: 0.25em; | |||
text-align: center; | |||
width: 8.5em; | |||
} | |||
.skill-upgrade-desc { | |||
line-height: 1lh; | |||
padding: 0.25em; | |||
} | |||
.mobile-skill-container { | |||
background-color: #d9d9dd; | |||
border-radius: 5px; | |||
box-sizing: border-box; | |||
display: grid; | |||
gap: 0.2em 1em; | |||
grid-template-columns: auto 1fr; | |||
grid-template-rows: auto auto 1fr; | |||
margin-bottom: 1em; | |||
margin-top: 1em; | |||
padding: 1em; | |||
} | |||
.mobile-skill-icon-container { | |||
grid-column: 1; | |||
grid-row: 1 / 3; | |||
height: 64px; | |||
width: 64px; | |||
} | |||
.mobile-skill-icon img { | |||
background-color: #373F45; | |||
border-radius: 5px; | |||
box-shadow: 0 0 5px #888; | |||
height: 64px; | |||
width: 64px; | |||
} | |||
.mobile-skill-name { | |||
color: #1C2A32; | |||
font-size: 1.25em; | |||
font-weight: bold; | |||
grid-column: 2; | |||
grid-row: 1; | |||
} | |||
.mobile-skill-tag { | |||
color: #5A5D62; | |||
font-size: 1.1em; | |||
grid-column: 2; | |||
grid-row: 2; | |||
} | |||
.mobile-skill-type-icon-1 { | |||
position: absolute; | |||
height: 26px; | |||
width: 26px; | |||
} | |||
.mobile-skill-type-icon-2 { | |||
position: absolute; | |||
height: 26px; | |||
width: 26px; | |||
} | |||
.mobile-skill-type-icon-1 img { | |||
position: relative; | |||
height: 26px; | |||
width: 26px; | |||
left: -1px; | |||
top: -67px; | |||
} | |||
.mobile-skill-type-icon-2 img { | |||
position: relative; | |||
height: 26px; | |||
width: 26px; | |||
left: -1px; | |||
top: -27px; | |||
} | |||
.mobile-skill-content { | |||
background-color: #E2E1E8; | |||
border-radius: 5px; | |||
box-shadow: 0 0 5px #888; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 1em; | |||
grid-column: 1 / 3; | |||
grid-row: 3; | |||
justify-self: stretch; | |||
margin-top: 0.5em; | |||
padding: 1em; | |||
} | |||
.mobile-skill-desc { | |||
display: flex; | |||
gap: 0.5em; | |||
flex: auto; | |||
flex-direction: column; | |||
} | |||
.mobile-skill-desc-cost { | |||
color: #34383c; | |||
font-weight: bold; | |||
} | |||
.mobile-skill-desc-break { | |||
color: #f26c1c; | |||
font-weight: bold; | |||
} | |||
.mobile-skill-desc-flavor { | |||
color: #83858a; | |||
margin-bottom: 0.5em; | |||
margin-top: 0.5em; | |||
} | |||
.mobile-skill-range-container { | |||
display: grid; | |||
grid-template-rows: 1fr auto auto 1fr auto auto 1fr; | |||
} | |||
.mobile-skill-range-image { | |||
grid-column: 1; | |||
grid-row: 1 / 8; | |||
height: 128px; | |||
width: 128px; | |||
} | |||
.mobile-skill-range-image img { | |||
height: 128px; | |||
width: 128px; | |||
} | |||
.mobile-skill-range-tag { | |||
grid-column: 2; | |||
color: #51565b; | |||
font-size: 0.9em; | |||
} | |||
.mobile-skill-range-value { | |||
grid-column: 3; | |||
color: #1c2a32; | |||
font-size: 0.9em; | |||
justify-self: right; | |||
} | |||
.mobile-skill-range-line { | |||
background-color: #D3D3D9; | |||
grid-column: 2 / 4; | |||
height: 0.25em; | |||
justify-self: start; | |||
position: relative; | |||
top: -3px; | |||
width: 100%; | |||
} | |||
.mobile-skill-range-stretch { | |||
justify-self: stretch; | |||
grid-column: 2 / 4; | |||
} | |||
.mobile-skill-upgrade-container { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 0.5em; | |||
grid-template-columns: auto 1fr; | |||
margin-top: 0.5em; | |||
margin-bottom: 0.5em; | |||
} | |||
.mobile-skill-upgrade-name { | |||
background-color: #384B53; | |||
border-radius: 3px; | |||
box-shadow: 0 0 3px #888; | |||
color: #EDEDED; | |||
height: 1lh; | |||
line-height: 1lh; | |||
padding: 0.25em; | |||
text-align: center; | |||
width: 8.5em; | |||
/* align-self: center; */ | |||
} | |||
.mobile-skill-upgrade-desc { | |||
line-height: 1lh; | |||
padding: 0.25em; | |||
} | |||
.hide { | |||
display: none; | |||
} | |||
.invisible { | |||
visibility: hidden; | |||
} | |||
.talent-icon { | |||
display: inline-block; | |||
position: relative; | |||
} | |||
.talent-icon-bg { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.talent-icon-bg img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.talent-icon-fg { | |||
position: absolute; | |||
top: 34.375%; | |||
left: 34.375%; | |||
width: 31.25%; | |||
height: 31.25% | |||
} | |||
.talent-icon-fg img { | |||
width: 100%; | |||
height: 100%; | |||
} | } |