◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“模板:战术人形信息/styles.css”的版本间的差异
小 |
|||
(未显示同一用户的22个中间版本) | |||
第1行: | 第1行: | ||
− | # | + | @media screen and (min-width: 720px) { |
+ | .dollinfo { margin-left: calc(50% - 360px); } | ||
+ | } | ||
+ | #dollwpd, #dollobd, #dollind { padding-top: 0.5em; } | ||
#dollwpd img { vertical-align: middle; } | #dollwpd img { vertical-align: middle; } | ||
#doll-container { | #doll-container { | ||
+ | column-gap: 4px; | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
第9行: | 第13行: | ||
#doll-container h2, #doll-container h3 { display: none; } | #doll-container h2, #doll-container h3 { display: none; } | ||
− | #stat-container { | + | #stat-container { width: 640px; } |
#lv-input { | #lv-input { | ||
appearance: none; | appearance: none; | ||
第44行: | 第48行: | ||
width: 20%; | width: 20%; | ||
} | } | ||
+ | #rate .max-rate-mod, #rate.mod .max-rate { display: none; } | ||
+ | #rate.mod .max-rate-mod { display: inline; } | ||
#attr-table td { text-align: center; } | #attr-table td { text-align: center; } | ||
.form1 th { width: 100%; } | .form1 th { width: 100%; } | ||
第98行: | 第104行: | ||
.effect-negative { color: red; } | .effect-negative { color: red; } | ||
+ | #image-container { flex: 1; } | ||
#unit-showcase-control { | #unit-showcase-control { | ||
align-items: stretch; | align-items: stretch; | ||
第104行: | 第111行: | ||
position: relative; | position: relative; | ||
} | } | ||
− | #unit- | + | #unit-showcase-control * { cursor: pointer; } |
+ | #unit-showcase-control div { | ||
align-items: center; | align-items: center; | ||
display: flex; | display: flex; | ||
} | } | ||
+ | #unit-showcase-control label { text-align: center; width: 3em; } | ||
+ | #unit-showcase-control label.checked { border-bottom: 2px solid #ffb400; } | ||
#unit-showcase-control input { display: none; } | #unit-showcase-control input { display: none; } | ||
#unit-image-selected { display: flex; height: 40px; } | #unit-image-selected { display: flex; height: 40px; } | ||
第125行: | 第135行: | ||
} | } | ||
#unit-image-selector li { | #unit-image-selector li { | ||
+ | align-items: center; | ||
background-color: #444; | background-color: #444; | ||
border-left: 4px solid; | border-left: 4px solid; | ||
border-color: #777; | border-color: #777; | ||
− | + | display: flex; | |
height: 45px; | height: 45px; | ||
− | + | justify-content: center; | |
− | |||
position: relative; | position: relative; | ||
text-align: center; | text-align: center; | ||
第137行: | 第147行: | ||
#unit-image-selector li:active { background-color: #333; } | #unit-image-selector li:active { background-color: #333; } | ||
#unit-image-selector .active-item { border-color: #ffb400; } | #unit-image-selector .active-item { border-color: #ffb400; } | ||
− | #unit-image-selector | + | #unit-image-selector div { |
− | + | flex: 1; | |
− | + | height: 45px; | |
− | + | justify-content: center; | |
− | + | } | |
− | + | #unit-image-selector div:nth-child(2) { | |
− | + | flex: calc(100% - 120px); | |
− | + | flex-wrap: wrap; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | #unit-image-selector span { flex: 100%; } | ||
+ | #unit-image-selector span:nth-child(2) { font-size: 12px; } | ||
#unit-image-display { | #unit-image-display { | ||
− | + | flex: 1; | |
− | |||
position: relative; | position: relative; | ||
− | |||
z-index: 0; | z-index: 0; | ||
} | } | ||
#unit-image-display img { | #unit-image-display img { | ||
height: auto; | height: auto; | ||
− | + | width: 100%; | |
− | |||
} | } | ||
#unit-image-display canvas { | #unit-image-display canvas { | ||
− | height: | + | height: auto; |
− | |||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
− | width: | + | width: 100%; |
} | } | ||
第186行: | 第189行: | ||
/* skill container */ | /* skill container */ | ||
.skill-table { | .skill-table { | ||
+ | border: 6px solid #585858; | ||
+ | box-shadow: inset 0 0 48px #000; | ||
display: table; | display: table; | ||
− | + | padding: 4px; | |
− | width: | + | width: 100%; |
} | } | ||
+ | .skill-table:nth-of-type(n+2) { border-top: none; } | ||
.skill-table p { display: none; } | .skill-table p { display: none; } | ||
.skill-table p.desc-shown { display: block; } | .skill-table p.desc-shown { display: block; } | ||
第199行: | 第205行: | ||
} | } | ||
.skill2 .skill-signature td:first-child { background: #bd572d; } | .skill2 .skill-signature td:first-child { background: #bd572d; } | ||
− | .skill-signature td:last-child { | + | .skill-signature td:last-child { |
+ | font-size: 16px; | ||
+ | font-weight: 500; | ||
+ | line-height: 1; | ||
+ | } | ||
.skill-signature span { | .skill-signature span { | ||
background: #de4804; | background: #de4804; | ||
float: right; | float: right; | ||
− | font-size: | + | font-size: 13px; |
+ | line-height: initial; | ||
padding: 0 8px; | padding: 0 8px; | ||
} | } | ||
第227行: | 第238行: | ||
/* equip container */ | /* equip container */ | ||
#equip-container td { width: 128px; } | #equip-container td { width: 128px; } | ||
− | #equip-container table { text-align: center; } | + | #equip-container table { |
+ | border-spacing: 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #equip-container table:first-of-type td:not(:last-child) { border-right: 2px solid black; } | ||
#equip-container table:first-of-type tr:first-child td { | #equip-container table:first-of-type tr:first-child td { | ||
background: linear-gradient(180deg, #333, #333 18px, #555 18px, #555); | background: linear-gradient(180deg, #333, #333 18px, #555 18px, #555); | ||
第235行: | 第250行: | ||
height: 103.5px; | height: 103.5px; | ||
width: 128px; | width: 128px; | ||
+ | } | ||
+ | #equip-container table tr:nth-child(2) { background: black; } | ||
+ | #equip-container table tr:nth-child(3) { background: repeating-linear-gradient( | ||
+ | 135deg,#292929,#292929 4px,#343434 4px,#343434 8px); } | ||
+ | |||
+ | .tdoll_chibi { | ||
+ | min-height: 300px; | ||
+ | min-width: 300px; | ||
} | } |
2023年8月18日 (五) 14:57的版本
@media screen and (min-width: 720px) {
.dollinfo { margin-left: calc(50% - 360px); }
}
#dollwpd, #dollobd, #dollind { padding-top: 0.5em; }
#dollwpd img { vertical-align: middle; }
#doll-container {
column-gap: 4px;
display: flex;
flex-wrap: wrap;
}
#doll-container > div { max-width: 100%; }
#doll-container h2, #doll-container h3 { display: none; }
#stat-container { width: 640px; }
#lv-input {
appearance: none;
background: transparent;
border: none;
color: #eee;
font-family: monospace;
font-size: 20px;
font-weight: bold;
height: 20px;
vertical-align: bottom;
}
#mod-toggle { display: none }
#mod-toggle + label {
background: #eee;
color: #555;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0 4px;
}
#mod-toggle:checked + label {
background: #f4c430;
color: #333;
}
#attr-table table, .content #attr-table table {
display: table;
max-width: 640px;
width: 100%;
}
#attr-table th {
background-position: -12px;
background-repeat: no-repeat;
width: 20%;
}
#rate .max-rate-mod, #rate.mod .max-rate { display: none; }
#rate.mod .max-rate-mod { display: inline; }
#attr-table td { text-align: center; }
.form1 th { width: 100%; }
.form2 th { width: 50%; }
.form3 th { width: 33%; }
.form4 th { width: 25%; }
.form1 tr :nth-child(n+2),
.form2 tr :nth-child(n+3),
.form3 tr :nth-child(n+4),
.form4 tr :last-child { display: none; }
#effects {
display: flex;
flex-wrap: wrap;
max-width: 640px;
width: 100%;
}
.content #effects { display: block; }
.effect-table {
margin: 0;
max-width: 640px;
width: 100%;
}
#effects .effect-table {
display: table;
flex: 1 0 300px;
}
.content #effects .effect-table { display: inline-table; }
.content table.effect-grid {
border: 1px solid white;
width: auto!important;
}
.effect-grid td {
background: #555;
border: 1px solid #333;
border-collapse: collapse;
height: 1.5em;
width: 1.5em;
}
.effect-grid td.self-cell { background: white; }
.effect-grid td.effect-cell { background: #0fd; }
.effect-table td { position: relative; }
.effect-table:nth-of-type(2) > tbody > tr > td:last-child::before, .effect-caption {
color: black;
padding: 0 2px;
}
#effects .effect-table:last-child > tbody > tr > td:last-child::before {
background: #f4c430;
content: '心智升级';
position: absolute;
right: 0;
}
.effect-caption { background: white; }
.effect-positive { color: #f4c430; }
.effect-negative { color: red; }
#image-container { flex: 1; }
#unit-showcase-control {
align-items: stretch;
display: flex;
flex-wrap: wrap;
position: relative;
}
#unit-showcase-control * { cursor: pointer; }
#unit-showcase-control div {
align-items: center;
display: flex;
}
#unit-showcase-control label { text-align: center; width: 3em; }
#unit-showcase-control label.checked { border-bottom: 2px solid #ffb400; }
#unit-showcase-control input { display: none; }
#unit-image-selected { display: flex; height: 40px; }
#unit-image-showcase {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
}
#unit-image-selector {
left: 0;
list-style: none;
margin: 0;
position: absolute;
top: 40px;
z-index: 1;
}
#unit-image-selector li {
align-items: center;
background-color: #444;
border-left: 4px solid;
border-color: #777;
display: flex;
height: 45px;
justify-content: center;
position: relative;
text-align: center;
}
#unit-image-selector li:active { background-color: #333; }
#unit-image-selector .active-item { border-color: #ffb400; }
#unit-image-selector div {
flex: 1;
height: 45px;
justify-content: center;
}
#unit-image-selector div:nth-child(2) {
flex: calc(100% - 120px);
flex-wrap: wrap;
}
#unit-image-selector span { flex: 100%; }
#unit-image-selector span:nth-child(2) { font-size: 12px; }
#unit-image-display {
flex: 1;
position: relative;
z-index: 0;
}
#unit-image-display img {
height: auto;
width: 100%;
}
#unit-image-display canvas {
height: auto;
position: absolute;
top: 0;
width: 100%;
}
.motion-tab0, .motion-tab1, .hit-tab {
border-radius: 12px;
cursor: pointer;
margin: 2px 0;
padding: 0 8px 2px;
}
.motion-tab0 { background: blue; }
.motion-tab1 { background: gold; color: #000; margin-left: 1em; }
.hit-tab { background: green; }
.hit-tab::after { content: ' >'; }
.disabled { display: none; }
/* skill container */
.skill-table {
border: 6px solid #585858;
box-shadow: inset 0 0 48px #000;
display: table;
padding: 4px;
width: 100%;
}
.skill-table:nth-of-type(n+2) { border-top: none; }
.skill-table p { display: none; }
.skill-table p.desc-shown { display: block; }
.skill { color: #f4c430; }
.skill-signature { font-weight: 500; }
.skill-signature td:first-child {
background: #9cd422;
width: 48px;
}
.skill2 .skill-signature td:first-child { background: #bd572d; }
.skill-signature td:last-child {
font-size: 16px;
font-weight: 500;
line-height: 1;
}
.skill-signature span {
background: #de4804;
float: right;
font-size: 13px;
line-height: initial;
padding: 0 8px;
}
.skill-signature label {
background: #ddd;
color: black;
float: right;
font-size: 90%;
padding: 0 4px;
}
.skill-lvcd {
color: #ffb400;
font-size: 95%;
}
.skill-lvcd span:first-child {
background: #ffb400;
border-radius: 2px;
color: black;
padding: 0 2px;
}
.desc-hidden { visibility: collapse; }
/* equip container */
#equip-container td { width: 128px; }
#equip-container table {
border-spacing: 0;
text-align: center;
}
#equip-container table:first-of-type td:not(:last-child) { border-right: 2px solid black; }
#equip-container table:first-of-type tr:first-child td {
background: linear-gradient(180deg, #333, #333 18px, #555 18px, #555);
padding-top: 9px;
}
#equip-container table:first-of-type img {
height: 103.5px;
width: 128px;
}
#equip-container table tr:nth-child(2) { background: black; }
#equip-container table tr:nth-child(3) { background: repeating-linear-gradient(
135deg,#292929,#292929 4px,#343434 4px,#343434 8px); }
.tdoll_chibi {
min-height: 300px;
min-width: 300px;
}