“Widget:主题板块导航”与“Widget:用户测试邀请信”：页面之间的差异

H萌娘，万物皆可H的百科全书！
（页面间差异）
跳到导航 跳到搜索
imported>Irukaza
无编辑摘要
 
imported>=海豚=
无编辑摘要
 
第1行： 第1行：
<noinclude><pre>
<style>
/*
#wrap p{
Wiki2021 Interface
font-family: tahoma;
Contributors: P.T.Đ/Irukaza
font-size: 24px;
Year: 2021
color: #757575;
*/
</pre></noinclude><includeonly>
<style type="text/css">
/* default layout */
.main-body {
display: flex;
flex-flow: wrap column;
}
}
 
#wrap{
/** fix bug zooming **/
width: 530px;
.main-body > div {
margin: 20px auto 0;
width: 100%;
height: 1000px;
}
}
 
#wrap h2{
.main-box {
margin-bottom: 20px;
   margin-bottom: 1.5rem;
   min-height: 93%;
}
 
/* responsive layout */
@media (min-width: 992px) {
.main-body {
flex-direction: row;
   margin: 0 -0.5rem;
}
.main-body__left,
.main-body__right {
flex: 1;
   margin: 0 0 0.5rem 0;
}
}
 
/* tweaks WikimediaUI */
.mw-headline-number {
   display: none;
}
 
.main-header__right .mw-ui-quiet {
padding: 6px 8px;
}
 
.main-header__right .mw-ui-quiet:hover,
.main-header__right .mw-ui-quiet:focus,
.main-box__title a:hover,
.main-box__title a:focus,
.main-box-dropdown__content > ul > li > a:hover,
.main-box-dropdown__content > ul > li > a:focus {
color: #0645ad;
}
 
/* utils */
.u-display-inline-block {
display: inline-block;
}
 
.u-font-size-larger {
font-size: 1.35em;
}
 
.u-text-align-center {
text-align: center;
text-align: center;
font-size: 35px;
font-family: tahoma;
color: black;
}
}
 
#form-wrap{
.u-plain-list > ul,
height: 447px;
.u-plain-list > ul > li {
position: relative;
   margin: 0;
top: 0px;
   padding: 0;
transition: all 1s ease-in-out .3s;
   list-style: none;
}
}
 
#form-wrap:before{
.u-horizontal-list > ul {
content: "";
display: inline;
position: absolute;
letter-spacing: -1em;
bottom: 128px;
left: 0px;
background: url('https://www.hmoegirl.com/images/a/a9/Before.png');
width: 530px;
height: 317px;
}
}
 
#form-wrap:after{
.u-horizontal-list > ul > li {
content: "";
display: inline;
position: absolute;
   letter-spacing: normal;
bottom: 0px;
left: 0;
background: url('https://www.hmoegirl.com/images/c/c6/After.png');
width: 530px;
height: 259px;
}
}
 
#form-wrap.hide:after,
.u-horizontal-list > ul li::after {
#form-wrap.hide:before{
   padding: 0 0.35em;
display: none;
   content: "·";
   font-weight: bold;
}
}
 
#form-wrap:hover{
.u-horizontal-list > ul li:last-child::after {
height: 777px;
   padding: 0;
top: -200px;
   content: "";
}
}
 
#wrap form{
.u-plain-heading {
background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png');
margin-top: 0;
position: relative;
padding-top: 0;
top: 200px;
border-bottom-color: transparent;
height: 200px;
width: 400px;
margin: 0px auto;
padding: 20px;
border: 1px solid white;
border-right: 3px;
transition: all 1s ease-in-out .3s;
}
}
 
#form-wrap:hover form{
/* others */
height: 530px;
/** thumb in .main-box **/
.main-box__body > .show-image {
margin: 0.4em 0 0.4em 1em !important;
}
}
 
#wrap lable{
/* .content-improvement-box */
margin: 11px 20px 0 0;
.content-improvement-box {
font-size: 15px;
display: flex;
color: gray;
   flex-flow: wrap column;
text-transform: uppercase;
   margin: 0 -0.5rem;
}
}
 
#wrap input[type=text], textarea{
/* .content-improvement-problems */
font: 14px normal uppercase, arial, serif;
.content-improvement-problems,
color: dimgray;
.content-improvement-invitation {
background: none;
   margin: 0 0.5rem;
width: 380px;
height: 37px;
padding: 0px 10px;
margin: 0 0 10px 0;
border: 1px solid #BDBDBD;
border-radius: 5px;
}
}
 
#wrap textarea{
.content-improvement-problems {
height: 80px;
order: 2;
padding-top: 14px;
display: flex;
   flex-wrap: wrap;
   margin: -0.5rem 0;
   padding-top: 1rem;
}
}
 
#form-wrap input[type=submit]{
.content-improvement-item {
position: relative;
   flex: 1 2 auto;
font-family: tahoma;
   padding: 0.5rem;
font-size: 24px;
width: 100%;
color: gray;
}
width: 300px;
 
text-align: center;
/** .content-improvement-item color modifier **/
opacity: 0;
.content-improvement-item.-color-red > a {
cursor: pointer;
   border-bottom: 5px solid #ea3b3b;
border-radius: 3px;
}
transition: opacity 0.7s ease-in-out 0s;
 
.content-improvement-item.-color-red > a:hover,
.content-improvement-item.-color-red > a:focus {
   background-color: #ea3b3b;
}
 
.content-improvement-item.-color-blue > a {
   border-bottom: 5px solid #36c;
}
 
.content-improvement-item.-color-blue > a:hover,
.content-improvement-item.-color-blue > a:focus {
   background-color: #36c;
}
 
.content-improvement-item.-color-yellow > a {
   border-bottom: 5px solid #F2C94C;
}
 
.content-improvement-item.-color-yellow > a:hover,
.content-improvement-item.-color-yellow > a:focus {
   background-color: #F2C94C;
}
 
.content-improvement-item.-color-green > a {
   border-bottom: 5px solid #27ae60;
}
 
.content-improvement-item.-color-green > a:hover,
.content-improvement-item.-color-green > a:focus {
   background-color: #27ae60;
}
 
.content-improvement-item.-color-gray > a {
   border-bottom: 5px solid #a2a9b1;
}
 
.content-improvement-item.-color-gray > a:hover,
.content-improvement-item.-color-gray > a:focus {
   background-color: #a2a9b1;
}
 
/** .content-improvement-item icon modifier **/
.content-improvement-item.-icon-editUndo > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/c5/OOjs_UI_icon_editUndo-ltr.svg);
}
 
.content-improvement-item.-icon-tableMergeCells > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/6/64/OOjs_UI_icon_table-merge-cells.svg);
}
 
.content-improvement-item.-icon-searchCaseSensitive > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/e/e5/OOjs_UI_icon_searchCaseSensitive.svg);
}
 
.content-improvement-item.-icon-alert > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg);
}
 
.content-improvement-item.-icon-tag > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_tag-ltr.svg);
}
 
.content-improvement-item.-icon-language > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
}
 
.content-improvement-item.-icon-link > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
}
 
.content-improvement-item.-icon-history > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/2/27/OOjs_UI_icon_history.svg);
}
 
.content-improvement-item.-icon-code > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cd/OOjs_UI_icon_code.svg);
}
 
.content-improvement-item.-icon-reference > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/9/9c/OOjs_UI_icon_reference.svg);
}
 
.content-improvement-item.-icon-balance-scale > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/9/90/Font_Awesome_5_solid_balance-scale.svg);
}
 
.content-improvement-item.-icon-help > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b2/OOjs_UI_icon_help-ltr.svg);
}
 
.content-improvement-item.-icon-add > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/0/06/OOjs_UI_icon_add.svg);
}
 
.content-improvement-item.-icon-halfBright > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_halfBright.svg);
}
 
.content-improvement-item.-icon-articleSearch > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/8/86/OOjs_UI_icon_articleSearch-ltr.svg);
}
 
.content-improvement-item.-icon-eye > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cf/OOjs_UI_icon_eye.svg);
}
 
.content-improvement-item.-icon-block > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_block.svg);
}
 
/** .content-improvement-item > a **/
.content-improvement-item > a {
   box-sizing: border-box;
   position: relative;
   z-index: 0;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   overflow: hidden;
   padding: 0.5rem 1rem 1rem;
   width: 100%;
   height: 100%;
   color: inherit;
   background: #f7f7f7;
   text-decoration: none;
   transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
}
 
.content-improvement-item > a:hover,
.content-improvement-item > a:focus {
   color: #fff;
   box-shadow: 0 2px 5px #ccc;
}
 
.content-improvement-item > a:active {
   opacity: 0.7;
   box-shadow: 0 4px 7px #ccc;
}
 
.content-improvement-item > a::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 50%;
   right: 0.75rem;
   transform: translateY(-50%);
   width: 100%;
   height: 90%;
   background-size: contain;
   background-position: right;
   background-repeat: no-repeat;
   opacity: 0.03;
   transition: opacity .1s ease-in-out;
}
 
.content-improvement-item > a:hover::before,
.content-improvement-item > a:focus::before {
   opacity: 0.08;
}
 
.content-improvement-item > a > span {
   display: block;
   width: 100%;
}
 
.content-improvement-item > a > span:nth-child(2) {
white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
 
.content-improvement-item__number {
   font-weight: bold;
   font-size: 1.8em;
   padding-right: 0.25em;
}
 
/* .content-improvement-invitation */
.content-improvement-invitation {
order: 1;
   padding: 1rem;
   background: #f7f7f7;
}
 
.content-improvement-invitation__icon {
   margin: 0 0 0.5em 0.75em;
   float: right;
   width: 5rem;
   height: 5rem;
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Wikipedia-logo-v2-bw.svg);
   background-size: 5rem;
   background-position: center;
   background-repeat: no-repeat;
}
 
.content-improvement-invitation__title {
   font-weight: bold;
   font-size: 1.1em;
}
 
.content-improvement-invitation__content p:last-child {
margin-bottom: 0;
}
 
.content-improvement-invitation__button {
padding: 0.75rem 0 0.45rem;
}
 
/* responsive */
@media (min-width: 768px) {
/* .content-improvement-problems */
.content-improvement-item {
width: 40%;
}
}
 
@media (min-width: 992px) {
/* .content-improvement-box */
.content-improvement-box {
flex-direction: row;
}
/* .content-improvement-problems */
.content-improvement-problems {
flex: 2;
order: 1;
   padding-top: 0;
}
 
/* .content-improvement-invitation */
.content-improvement-invitation {
flex: 1;
order: 2;
}
}
 
@media (min-width: 1200px) {
/* .content-improvement-problems */
.content-improvement-item {
width: 30%;
}
}
 
/* local fixed */
#localNotice {
   display: none;
}
#catlinks {
   display: none;
}
.firstHeading {
   display: none;
}
.comment-replybox {
   display: none;
}
#flowthread {
   display: none;
}
#siteSub {
   display: none!important;
}
}
</style>

2021年8月13日 (五) 21:21的版本

<style>

  1. wrap p{

font-family: tahoma; font-size: 24px; color: #757575; }

  1. wrap{

width: 530px; margin: 20px auto 0; height: 1000px; }

  1. wrap h2{

margin-bottom: 20px; text-align: center; font-size: 35px; font-family: tahoma; color: black; }

  1. form-wrap{

height: 447px; position: relative; top: 0px; transition: all 1s ease-in-out .3s; }

  1. form-wrap:before{

content: ""; position: absolute; bottom: 128px; left: 0px; background: url('https://www.hmoegirl.com/images/a/a9/Before.png'); width: 530px; height: 317px; }

  1. form-wrap:after{

content: ""; position: absolute; bottom: 0px; left: 0; background: url('https://www.hmoegirl.com/images/c/c6/After.png'); width: 530px; height: 259px; }

  1. form-wrap.hide:after,
  2. form-wrap.hide:before{

display: none; }

  1. form-wrap:hover{

height: 777px; top: -200px; }

  1. wrap form{

background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png'); position: relative; top: 200px; height: 200px; width: 400px; margin: 0px auto; padding: 20px; border: 1px solid white; border-right: 3px; transition: all 1s ease-in-out .3s; }

  1. form-wrap:hover form{

height: 530px; }

  1. wrap lable{

margin: 11px 20px 0 0; font-size: 15px; color: gray; text-transform: uppercase; }

  1. wrap input[type=text], textarea{

font: 14px normal uppercase, arial, serif; color: dimgray; background: none; width: 380px; height: 37px; padding: 0px 10px; margin: 0 0 10px 0; border: 1px solid #BDBDBD; border-radius: 5px; }

  1. wrap textarea{

height: 80px; padding-top: 14px; }

  1. form-wrap input[type=submit]{

position: relative; font-family: tahoma; font-size: 24px; color: gray; width: 300px; text-align: center; opacity: 0; cursor: pointer; border-radius: 3px; transition: opacity 0.7s ease-in-out 0s; }

取自“https://hmoegirl.com/index.php?title=Widget:主题板块导航&oldid=59280”