Template:突击莉莉人物信息卡/style.css
跳到导航
跳到搜索
/**背景**/ .ALLB-ChInf { overflow: hidden; position: relative; max-width: 1000px; min-width: 680px; padding: calc(6% - 30px); } .ALLB-ChInf .bgi { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.4; background: center/cover no-repeat; } .ALLB-ChInf .bgi.百合丘 { background-image: url('https://img.moegirl.org.cn/common/2/28/Allb_%E8%83%8C%E6%99%AF_%E7%99%BE%E5%90%88%E4%B8%98%E5%A5%B3%E5%AD%90%E5%AD%A6%E9%99%A2.jpg'); } .ALLB-ChInf .bgi.神庭 { background-image: url('https://img.moegirl.org.cn/common/e/e6/Allb_%E8%83%8C%E6%99%AF_%E7%A5%9E%E5%BA%AD%E5%A5%B3%E5%AD%90%E8%89%BA%E6%9C%AF%E9%AB%98%E6%A0%A1.png'); } .ALLB-ChInf .bgi.艾伦斯格 { background-image: url('https://img.moegirl.org.cn/common/e/e4/Allb_%E8%83%8C%E6%99%AF_%E8%89%BE%E4%BC%A6%E6%96%AF%E6%A0%BC%E5%A5%B3%E5%AD%A6%E5%9B%AD.jpg'); } .ALLB-ChInf .bg1 { position: relative; padding: 15px; background: linear-gradient(to bottom right,rgba(255,255,255,0.747),transparent 50%); } .ALLB-ChInf .bg2 { padding:25px; background:linear-gradient(to bottom right,white,transparent 50%); border:2px solid rgba(255,255,255,0.747); display: flex; } /**立绘**/ .ALLB-ChInf .pic { position: relative; min-height: 400px; flex: 0 1 346px; overflow: hidden; margin-left: 10px; } .ALLB-ChInf .pic img { position: absolute; left: calc(50% - 250px); top: -80px; max-width: none !important; } /**内容**/ .ALLB-ChInf .text { width: 1px; /*这个有用*/ flex: 1 2 490px; margin-top: 10px; } /*header*/ .ALLB-ChInf .head { display: flex; } .ALLB-ChInf .icon { position: relative; width: 88px; height: 88px; -webkit-user-select: none; user-select: none; z-index: 2; } .ALLB-ChInf .icon img { position: relative; top: -26px; left: -26px; } .ALLB-ChInf .id { color:rgb(65,67,79); flex: 1; z-index: 3; } .ALLB-ChInf .name { border-bottom:2px solid rgb(92,94,123); font-size:27px; line-height: 1.2; margin-bottom: 5px; } .ALLB-ChInf .data { display: flex; justify-content: space-between; flex-flow: row wrap; white-space: nowrap; column-gap: 1.5em; } /*信息*/ .ALLB-ChInf dl { margin: 20px 0 0; line-height: 27px; z-index: 3; } .ALLB-ChInf dl>div { display: flex; flex-flow: row wrap; align-items: flex-start; margin: 3px 0; } .ALLB-ChInf dt { color: #FFF; flex:0 100px; margin:0; background:linear-gradient(to right,rgba(136,141,163,0.842),rgba(166,174,199,0.788)); padding:0 10px; font-weight:bold; } .ALLB-ChInf dd { margin:0 0 0 12px; border-bottom:1px dashed rgb(92,94,123); flex: 1 18em; } /*浏览器宽度过窄时隐藏图片、调整宽度*/ @media screen and (max-width: 936px) { .ALLB-ChInf { min-width: 330px;} .ALLB-ChInf .pic { display: none; } } /* [[Category:在模板名字空间下的CSS页面]] */