MediaWiki:Mobile.css:修订间差异
无编辑摘要 |
无编辑摘要 |
||
第77行: | 第77行: | ||
} | } | ||
.skill-container { | .mobile-skill-container { | ||
background-color: #d9d9dd; | background-color: #d9d9dd; | ||
border-radius: 5px; | border-radius: 5px; | ||
第90行: | 第90行: | ||
} | } | ||
.skill-icon-container { | .mobile-skill-icon-container { | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 1 / 3; | grid-row: 1 / 3; | ||
} | } | ||
.skill-icon img { | .mobile-skill-icon img { | ||
background-color: #373F45; | background-color: #373F45; | ||
border-radius: 5px; | border-radius: 5px; | ||
第103行: | 第103行: | ||
} | } | ||
.skill-name { | .mobile-skill-name { | ||
color: #1C2A32; | color: #1C2A32; | ||
font-size: 1.5em; | font-size: 1.5em; | ||
第111行: | 第111行: | ||
} | } | ||
.skill-tag { | .mobile-skill-tag { | ||
color: #5A5D62; | color: #5A5D62; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
第118行: | 第118行: | ||
} | } | ||
.skill-type-icon-1 { | .mobile-skill-type-icon-1 { | ||
position: absolute; | position: absolute; | ||
} | } | ||
.skill-type-icon-2 { | .mobile-skill-type-icon-2 { | ||
position: absolute; | position: absolute; | ||
} | } | ||
.skill-type-icon-1 img { | .mobile-skill-type-icon-1 img { | ||
position: relative; | position: relative; | ||
height: 26px; | height: 26px; | ||
第134行: | 第134行: | ||
} | } | ||
.skill-type-icon-2 img { | .mobile-skill-type-icon-2 img { | ||
position: relative; | position: relative; | ||
height: 26px; | height: 26px; | ||
第142行: | 第142行: | ||
} | } | ||
.skill-content { | .mobile-skill-content { | ||
background-color: #E2E1E8; | background-color: #E2E1E8; | ||
border-radius: 5px; | border-radius: 5px; | ||
第156行: | 第156行: | ||
} | } | ||
.skill-desc { | .mobile-skill-desc { | ||
display: flex; | display: flex; | ||
gap: 0.5em; | gap: 0.5em; | ||
第163行: | 第163行: | ||
} | } | ||
.skill-desc-cost { | .mobile-skill-desc-cost { | ||
color: #34383c; | color: #34383c; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.skill-desc-break { | .mobile-skill-desc-break { | ||
color: #f26c1c; | color: #f26c1c; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.skill-desc-flavor { | .mobile-skill-desc-flavor { | ||
color: #83858a; | color: #83858a; | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
第179行: | 第179行: | ||
} | } | ||
.skill-range-container { | .mobile-skill-range-container { | ||
display: grid; | display: grid; | ||
grid-template-rows: 1fr auto auto 1fr auto auto 1fr; | grid-template-rows: 1fr auto auto 1fr auto auto 1fr; | ||
} | } | ||
.skill-range-image { | .mobile-skill-range-image { | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 1 / 8; | grid-row: 1 / 8; | ||
} | } | ||
.skill-range-image img { | .mobile-skill-range-image img { | ||
height: 128px; | height: 128px; | ||
width: 128px; | width: 128px; | ||
} | } | ||
.skill-range-tag { | .mobile-skill-range-tag { | ||
grid-column: 2; | grid-column: 2; | ||
color: #51565b; | color: #51565b; | ||
第200行: | 第200行: | ||
} | } | ||
.skill-range-value { | .mobile-skill-range-value { | ||
grid-column: 3; | grid-column: 3; | ||
color: #1c2a32; | color: #1c2a32; | ||
第207行: | 第207行: | ||
} | } | ||
.skill-range-line { | .mobile-skill-range-line { | ||
background-color: #D3D3D9; | background-color: #D3D3D9; | ||
grid-column: 2 / 4; | grid-column: 2 / 4; | ||
第217行: | 第217行: | ||
} | } | ||
.skill-range-stretch { | .mobile-skill-range-stretch { | ||
justify-self: stretch; | justify-self: stretch; | ||
grid-column: 2 / 4; | grid-column: 2 / 4; | ||
} | } | ||
.skill-upgrade-container { | .mobile-skill-upgrade-container { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
第231行: | 第231行: | ||
} | } | ||
.skill-upgrade-name { | .mobile-skill-upgrade-name { | ||
background-color: #384B53; | background-color: #384B53; | ||
border-radius: 3px; | border-radius: 3px; | ||
第243行: | 第243行: | ||
} | } | ||
.skill-upgrade-desc { | .mobile-skill-upgrade-desc { | ||
line-height: 1lh; | line-height: 1lh; | ||
padding: 0.25em; | padding: 0.25em; |
2024年3月25日 (一) 20:56的版本
.mobileonly { display: unset; } 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; } .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: 2em; } .mobile-skill-icon-container { grid-column: 1; grid-row: 1 / 3; } .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.5em; font-weight: bold; grid-column: 2; grid-row: 1; } .mobile-skill-tag { color: #5A5D62; font-size: 1.2em; grid-column: 2; grid-row: 2; } .mobile-skill-type-icon-1 { position: absolute; } .mobile-skill-type-icon-2 { position: absolute; } .mobile-skill-type-icon-1 img { position: relative; height: 26px; width: 26px; left: -1px; top: -69px; } .mobile-skill-type-icon-2 img { position: relative; height: 26px; width: 26px; left: -1px; top: -29px; } .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; } .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; } .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%; }