「MediaWiki:Mobile.css」の版間の差分
提供:パルワールド 攻略Wiki
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
||
25行目: | 25行目: | ||
.content a > img, .content noscript > img { | .content a > img, .content noscript > img { | ||
padding: 2px; | padding: 2px; | ||
} | |||
#mobileMenuBar{ | |||
background:silver; | |||
margin: 0px -1em; | |||
padding: 10px 1em 0 0.1em; | |||
z-index: 1000; | |||
width: 96%; | |||
} | |||
ul.gNav-menu { | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
.gNav .gNav-menu li { | |||
margin: 0 auto; | |||
} | |||
ul.gNav-menu li { | |||
list-style: none; | |||
list-style-type: none; | |||
font-size: 0.8em; | |||
} | |||
/* その場でアニメーション */ | |||
.fadeIn{ | |||
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards; | |||
} | |||
@keyframes fadeIn { | |||
0% { | |||
opacity: 0; | |||
} | |||
100% { | |||
opacity: 1; | |||
} | |||
} | |||
#mobileMenuBar.fixed { | |||
position: fixed; /* 固定位置 */ | |||
top: 0; /* 画面の上部に固定 */ | |||
left: 0; | |||
z-index: 1000; /* 他の要素より上に表示 */ | |||
} | |||
/* Extension:ヤフーショッピング */ | |||
DIV.yjshopping { | |||
width:90%; | |||
clear: both; | |||
min-height: 180px; | |||
margin: 0 auto; | |||
padding: 0.5em; | |||
border: 2px solid #e7e7ea; | |||
background:#f9fafe; | |||
border-radius: 5px; | |||
overflow: hidden; | |||
} | |||
DIV.yjshopping IMG.yjshoppingimg { | |||
float: left; | |||
margin: 0.1em 1em 0.1em 0.1em; | |||
} | |||
DIV.yjshopping P.yjshoppingname { | |||
margin: 0; | |||
font-size: 90%; | |||
text-indent: 0; | |||
} | |||
DIV.yjshopping P.yjshoppingstore::before { | |||
background-color: #bbb; | |||
border-radius: 10%; | |||
color: #fff; | |||
font-size: smaller; | |||
padding: 0 0.5em 0 0.5em; | |||
margin-right: 0.5em; | |||
content: "Ad"; | |||
} | |||
DIV.yjshopping P.yjshoppingstore { | |||
margin: 0; | |||
font-size: 80%; | |||
text-indent: 0; | |||
} | |||
DIV.yjshopping UL { | |||
margin-top: 10px; | |||
padding-left: 10em; | |||
} | |||
DIV.yjshopping UL LI { | |||
display: inline-block; | |||
text-align: center; | |||
list-style: none; | |||
font-size: 85%; | |||
width: 9em; | |||
margin: 0.2em; | |||
padding: 0.2em 0.5em 0.2em 0.5em; | |||
border-radius: 0.5em; | |||
white-space: nowrap; | |||
} | |||
DIV.yjshopping UL LI A { | |||
color: #fff; | |||
} | |||
DIV.yjshopping UL LI.shoplinkyahoo { | |||
background-color: #f55; | |||
} | |||
DIV.yjshopping UL LI.shoplinkamazon { | |||
background-color: #f90; | |||
} | |||
DIV.yjshopping UL LI.shoplinkrakuten { | |||
background-color: #c00; | |||
} | |||
DIV.yjshopping UL LI.shoplinksofmap { | |||
background-color: #16f; | |||
} | |||
DIV.yjshopping UL LI.shoplinksofmapused { | |||
background-color: #3ba; | |||
} | |||
DIV.yjshopping UL LI.shoplinknaturum { | |||
background-color: #084; | |||
} | |||
DIV.yjshopping UL LI.shoplinkhonto { | |||
background-color: #4af; | |||
} | |||
DIV.yjshopping UL LI.shoplink7net { | |||
background-color: #153; | |||
} | |||
DIV.yjshopping UL LI.shoplinkwowma { | |||
background-color: #f71; | |||
} | |||
DIV.yjshopping UL LI.shoplinknttxstore { | |||
background-color: #06a; | |||
} | |||
DIV.yjshopping UL LI.shoplinkqoo10 { | |||
background-color: #5af; | |||
} | |||
DIV.yjshopping UL LI.shoplinkanker { | |||
background-color: #2ae; | |||
} | |||
DIV.yjshopping UL LI.shoplinkmercari { | |||
background-color: #f00; | |||
} | |||
DIV.yjshopping UL LI.shoplinkkakakucom { | |||
background-color: #02d; | |||
} | |||
img.image-lazy-loaded { | |||
padding: 2px; | |||
} | |||
element.style { | |||
} | |||
.youtube_wrap{ | |||
padding-top: 56.25%; | |||
width: 100%; | |||
position: relative; | |||
margin:10px 0; | |||
} | |||
.youtube_wrap iframe{ | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
} | |||
.twitter-timeline.twitter-timeline-rendered { | |||
width: 90%!important; | |||
} | |||
div#hf-nsheader- { | |||
margin-right: -30px; | |||
} | |||
/*TOPへ*/ | |||
div#back-to-top { | |||
font-size: 2em; | |||
cursor: pointer; | |||
color: white; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
position: fixed; | |||
bottom: 20px; | |||
right: 20px; | |||
width: 60px; | |||
height: 60px; | |||
z-index: 9999; | |||
border-radius: 50%; | |||
background: #33333352; | |||
transition: transform 0.5s; | |||
} | |||
.main-background{ | |||
background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1)); | |||
} | } |
2024年1月15日 (月) 20:28時点における版
/* ここに記述した全てのCSSはモバイル版サイトの利用者に影響します */
/*footer*/
.minerva-footer {
padding-bottom: 150px!important;
}
main#content, .mw-body {
overflow: auto!important;
}
/*youtube*/
.youtube_wrap iframe {
width: 100%;
height: 100%;
}
.youtube_wrap {
width: 100%;
aspect-ratio: 16 / 9;
}
/*IMG*/
img {
width: 100%;
height: 100%;
}
.content a > img, .content noscript > img {
padding: 2px;
}
#mobileMenuBar{
background:silver;
margin: 0px -1em;
padding: 10px 1em 0 0.1em;
z-index: 1000;
width: 96%;
}
ul.gNav-menu {
display: flex;
justify-content: space-between;
}
.gNav .gNav-menu li {
margin: 0 auto;
}
ul.gNav-menu li {
list-style: none;
list-style-type: none;
font-size: 0.8em;
}
/* その場でアニメーション */
.fadeIn{
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#mobileMenuBar.fixed {
position: fixed; /* 固定位置 */
top: 0; /* 画面の上部に固定 */
left: 0;
z-index: 1000; /* 他の要素より上に表示 */
}
/* Extension:ヤフーショッピング */
DIV.yjshopping {
width:90%;
clear: both;
min-height: 180px;
margin: 0 auto;
padding: 0.5em;
border: 2px solid #e7e7ea;
background:#f9fafe;
border-radius: 5px;
overflow: hidden;
}
DIV.yjshopping IMG.yjshoppingimg {
float: left;
margin: 0.1em 1em 0.1em 0.1em;
}
DIV.yjshopping P.yjshoppingname {
margin: 0;
font-size: 90%;
text-indent: 0;
}
DIV.yjshopping P.yjshoppingstore::before {
background-color: #bbb;
border-radius: 10%;
color: #fff;
font-size: smaller;
padding: 0 0.5em 0 0.5em;
margin-right: 0.5em;
content: "Ad";
}
DIV.yjshopping P.yjshoppingstore {
margin: 0;
font-size: 80%;
text-indent: 0;
}
DIV.yjshopping UL {
margin-top: 10px;
padding-left: 10em;
}
DIV.yjshopping UL LI {
display: inline-block;
text-align: center;
list-style: none;
font-size: 85%;
width: 9em;
margin: 0.2em;
padding: 0.2em 0.5em 0.2em 0.5em;
border-radius: 0.5em;
white-space: nowrap;
}
DIV.yjshopping UL LI A {
color: #fff;
}
DIV.yjshopping UL LI.shoplinkyahoo {
background-color: #f55;
}
DIV.yjshopping UL LI.shoplinkamazon {
background-color: #f90;
}
DIV.yjshopping UL LI.shoplinkrakuten {
background-color: #c00;
}
DIV.yjshopping UL LI.shoplinksofmap {
background-color: #16f;
}
DIV.yjshopping UL LI.shoplinksofmapused {
background-color: #3ba;
}
DIV.yjshopping UL LI.shoplinknaturum {
background-color: #084;
}
DIV.yjshopping UL LI.shoplinkhonto {
background-color: #4af;
}
DIV.yjshopping UL LI.shoplink7net {
background-color: #153;
}
DIV.yjshopping UL LI.shoplinkwowma {
background-color: #f71;
}
DIV.yjshopping UL LI.shoplinknttxstore {
background-color: #06a;
}
DIV.yjshopping UL LI.shoplinkqoo10 {
background-color: #5af;
}
DIV.yjshopping UL LI.shoplinkanker {
background-color: #2ae;
}
DIV.yjshopping UL LI.shoplinkmercari {
background-color: #f00;
}
DIV.yjshopping UL LI.shoplinkkakakucom {
background-color: #02d;
}
img.image-lazy-loaded {
padding: 2px;
}
element.style {
}
.youtube_wrap{
padding-top: 56.25%;
width: 100%;
position: relative;
margin:10px 0;
}
.youtube_wrap iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.twitter-timeline.twitter-timeline-rendered {
width: 90%!important;
}
div#hf-nsheader- {
margin-right: -30px;
}
/*TOPへ*/
div#back-to-top {
font-size: 2em;
cursor: pointer;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
z-index: 9999;
border-radius: 50%;
background: #33333352;
transition: transform 0.5s;
}
.main-background{
background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
}