◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“模板:融合势力信息/styles.css”的版本间的差异
小 |
小 |
||
(未显示同一用户的14个中间版本) | |||
第1行: | 第1行: | ||
+ | #sangvis-nav { | ||
+ | border-bottom: 1px solid; | ||
+ | display: flex; | ||
+ | } | ||
+ | #sangvis-nav-current { | ||
+ | background-color: #eaeaea; | ||
+ | clip-path: polygon(0 0,12em 0,13em 100%,0 100%); | ||
+ | color: #303030; | ||
+ | font-size: 16px; | ||
+ | padding: .2em 1.5em .2em .5em; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | #sangvis-nav-separator { | ||
+ | background-color: #ac1324; | ||
+ | clip-path: polygon(.1em 10%,1.1em 10%,2em 100%,1em 100%); | ||
+ | font-size: 16px; | ||
+ | margin: 0 -.8em 0 -1.5em; | ||
+ | width: 2em; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #sangvis-nav-other { | ||
+ | background-color: #424242; | ||
+ | clip-path: polygon(0 20%,100% 20%,100% 100%,0 100%); | ||
+ | font-size: 14px; | ||
+ | padding: .5em .8em 0 1em; | ||
+ | } | ||
+ | #sangvis-nav-other a { color: #eaeaea; } | ||
+ | |||
+ | .infobox { display: table; } | ||
+ | |||
#attrs { | #attrs { | ||
max-width: 100%; | max-width: 100%; | ||
− | width: | + | width: 720px; |
} | } | ||
#control { | #control { | ||
第7行: | 第37行: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
− | #control > div:first-child { flex: | + | #control > div:first-child { |
− | #control > div:last-child { flex: | + | display: flex; |
+ | flex: 313px; | ||
+ | flex-direction: column; | ||
+ | flex-wrap: wrap; | ||
+ | } | ||
+ | #control > div:last-child { flex: 407px; } | ||
#size-control, #formation-control { | #size-control, #formation-control { | ||
− | + | align-items: center; | |
− | + | display: flex; | |
+ | flex: 1; | ||
} | } | ||
#size-control span { | #size-control span { | ||
border-bottom: 3px solid; | border-bottom: 3px solid; | ||
− | clip-path: | + | clip-path: inset(0 1px 3px); |
display: inline-block; | display: inline-block; | ||
font-size: 16px; | font-size: 16px; | ||
第26行: | 第62行: | ||
padding: 0 5px; | padding: 0 5px; | ||
} | } | ||
− | |||
#size1, #size3 { padding: 0 6px; } | #size1, #size3 { padding: 0 6px; } | ||
− | #size1:hover, #size3:hover { clip-path: inset(0 1px 0); } | + | #size0:hover, #size1:hover, #size3:hover { clip-path: inset(0 1px 0); } |
#size2, #size4 { | #size2, #size4 { | ||
margin: 0 -2px; | margin: 0 -2px; | ||
第39行: | 第74行: | ||
} | } | ||
#formation-control label { margin: 0 2px; } | #formation-control label { margin: 0 2px; } | ||
+ | #formation-control img { height: 22px; } | ||
#size-control span, #formation-control label { | #size-control span, #formation-control label { | ||
cursor: pointer; | cursor: pointer; | ||
第60行: | 第96行: | ||
} | } | ||
#rank-control { grid-area: c; } | #rank-control { grid-area: c; } | ||
+ | #rank-control img { cursor: pointer; } | ||
.star-dark { filter: brightness(.5); } | .star-dark { filter: brightness(.5); } | ||
#resolve-control input { | #resolve-control input { | ||
第74行: | 第111行: | ||
} | } | ||
#attrs > table { | #attrs > table { | ||
+ | border-spacing: 0; | ||
display: table; | display: table; | ||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
} | } | ||
+ | #attrs tr:first-child { | ||
+ | background: #212121; | ||
+ | box-shadow: 0 2px 2px rgba(0,0,0,.3); | ||
+ | } | ||
+ | #attrs th, #attrs td { padding: 2px; } | ||
+ | #attrs th { | ||
+ | background-position: -12px; | ||
+ | background-repeat: no-repeat; | ||
+ | width: 16.66%; | ||
+ | } | ||
+ | #attrs #attr-th-9 { width: 33.33%; } | ||
#effect-grid { | #effect-grid { | ||
第83行: | 第132行: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
max-width: 100%; | max-width: 100%; | ||
− | width: | + | width: 720px; |
} | } | ||
− | #effect-grid div { flex: | + | #effect-grid div { flex: 13em; } |
+ | #effect-grid span { color: #ffbe00; } | ||
− | .skill { | + | .skill-table { |
display: table; | display: table; | ||
max-width: 100%; | max-width: 100%; | ||
− | width: | + | width: 720px; |
} | } | ||
+ | .skill-table p { display: none; } | ||
+ | .skill-table p.desc-shown { display: block; } | ||
+ | .skill { color: #f4c430; } | ||
.skill-signature { font-weight: 500; } | .skill-signature { font-weight: 500; } | ||
.skill-signature td:first-child { | .skill-signature td:first-child { | ||
第105行: | 第158行: | ||
font-size: 90%; | font-size: 90%; | ||
padding: 0 8px; | padding: 0 8px; | ||
+ | } | ||
+ | .skill-signature label { | ||
+ | background: #ddd; | ||
+ | color: black; | ||
+ | float: right; | ||
+ | font-size: 90%; | ||
+ | padding: 0 4px; | ||
} | } | ||
.skill-lvcd { | .skill-lvcd { | ||
第116行: | 第176行: | ||
padding: 0 2px; | padding: 0 2px; | ||
} | } | ||
+ | .desc-hidden { visibility: collapse; } |
2023年3月23日 (四) 12:05的最新版本
#sangvis-nav {
border-bottom: 1px solid;
display: flex;
}
#sangvis-nav-current {
background-color: #eaeaea;
clip-path: polygon(0 0,12em 0,13em 100%,0 100%);
color: #303030;
font-size: 16px;
padding: .2em 1.5em .2em .5em;
z-index: 2;
}
#sangvis-nav-separator {
background-color: #ac1324;
clip-path: polygon(.1em 10%,1.1em 10%,2em 100%,1em 100%);
font-size: 16px;
margin: 0 -.8em 0 -1.5em;
width: 2em;
z-index: 1;
}
#sangvis-nav-other {
background-color: #424242;
clip-path: polygon(0 20%,100% 20%,100% 100%,0 100%);
font-size: 14px;
padding: .5em .8em 0 1em;
}
#sangvis-nav-other a { color: #eaeaea; }
.infobox { display: table; }
#attrs {
max-width: 100%;
width: 720px;
}
#control {
display: flex;
flex-wrap: wrap;
}
#control > div:first-child {
display: flex;
flex: 313px;
flex-direction: column;
flex-wrap: wrap;
}
#control > div:last-child { flex: 407px; }
#size-control, #formation-control {
align-items: center;
display: flex;
flex: 1;
}
#size-control span {
border-bottom: 3px solid;
clip-path: inset(0 1px 3px);
display: inline-block;
font-size: 16px;
line-height: 24px;
outline: 3px dotted;
outline-offset: 2px;
}
#size0 {
margin: 0 1px;
padding: 0 5px;
}
#size1, #size3 { padding: 0 6px; }
#size0:hover, #size1:hover, #size3:hover { clip-path: inset(0 1px 0); }
#size2, #size4 {
margin: 0 -2px;
padding: 0 8px;
}
#size2:hover, #size4:hover { clip-path: inset(0 3px 0); }
#formation-control {
font-family: monospace;
font-size: 150%;
}
#formation-control label { margin: 0 2px; }
#formation-control img { height: 22px; }
#size-control span, #formation-control label {
cursor: pointer;
opacity: .67;
}
#control .checked { opacity: 1; }
#control > :last-child {
display: grid;
grid-template-areas: "a b" "a c";
}
#resolve-signal { grid-area: a; }
#lv-control { grid-area: b; }
#lv-control input {
background-color: transparent;
border: 0;
color: lightgray;
font-family: monospace;
font-size: 200%;
font-weight: bold;
width: 3em;
}
#rank-control { grid-area: c; }
#rank-control img { cursor: pointer; }
.star-dark { filter: brightness(.5); }
#resolve-control input {
appearance: none;
background-color: gray;
cursor: pointer;
height: 12px;
margin: 0;
width: 20%;
}
#resolve-control input:checked {
background-color: #ff004e;
box-shadow: 0 0 12px rgba(255,0,78,.67);
}
#attrs > table {
border-spacing: 0;
display: table;
text-align: center;
width: 100%;
}
#attrs tr:first-child {
background: #212121;
box-shadow: 0 2px 2px rgba(0,0,0,.3);
}
#attrs th, #attrs td { padding: 2px; }
#attrs th {
background-position: -12px;
background-repeat: no-repeat;
width: 16.66%;
}
#attrs #attr-th-9 { width: 33.33%; }
#effect-grid {
display: flex;
flex-wrap: wrap;
max-width: 100%;
width: 720px;
}
#effect-grid div { flex: 13em; }
#effect-grid span { color: #ffbe00; }
.skill-table {
display: table;
max-width: 100%;
width: 720px;
}
.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;
}
#skill1 .skill-signature td:first-child,
.skill-signature td.active-skill { background: #bd572d; }
.skill-signature td:last-child { background: #444; }
.skill-signature span {
background: #de4804;
float: right;
font-size: 90%;
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; }