MediaWiki:Common.css
ナビゲーションに移動
検索に移動
注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。
- Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
- Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
- Internet Explore/Edger: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください
- Opera: Ctrl-F5を押してください
/* 「メインページ」というタイトルを非表示 */
body.page-メインページ.action-view h1.firstHeading, body.page-メインページ.action-submit h1.firstHeading { display: none; }
/* 「メインページ」のみ「議論」タブを非表示 */
body.page-メインページ li#ca-talk { display: none !important; }
/* ボタンのCSS指定 */
/* 最終版All */
.koyama-button-r, .koyama-button-g, .koyama-button-b, .koyama-button-c, .koyama-button-h {
display: inline-block;
/* width: 120px; */
height: 25px;
text-align: center;
text-decoration: none;
line-height: 25px;
outline: none;
}
.koyama-button-r, .koyama-button-g, .koyama-button-b, .koyama-button-c, .koyama-button-h,
.koyama-button-r::before, .koyama-button-g::before, .koyama-button-b::before, .koyama-button-c::before, .koyama-button-h::before,
.koyama-button-r::after, .koyama-button-g::after, .koyama-button-b::after, .koyama-button-c::after, .koyama-button-h::after {
/* ゆっくりとスローモーションで変化するように、0.3s→ 1.0 sに変更してみた。 */
-webkit-transition: all 1.0s;
transition: all 1.0s;
}
/* 最終版Red */
.koyama-button-r {
position: relative;
border: 1px solid #cb5462;
border-radius: 4px;
color: #ffffff;
line-height: 28px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 0px 1px 0px #f56778;
}
.koyama-button-r,
.koyama-button-r:hover {
border-bottom: 2px solid #cb5462;
background-color: #f56778;
background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
background-image: linear-gradient(to bottom, #f997b0, #f56778);
box-shadow: inset 1px 1px 0 #fbc1d0;
}
.koyama-button-r::before,
.koyama-button-r::after {
bottom: -1px;
left: -1px;
/* width: 200px; */
height: 28px;
border: 1px solid #ee8090;
border-bottom: 1px solid #b84d5a;
border-radius: 4px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.koyama-button-r::before {
height: 26px;
bottom: -2px;
border-top: 0;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.koyama-button-r:hover {
background: #f56778;
background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
background-image: linear-gradient(to bottom, #f56778, #f997b0);
color: #913944;
/* 以下のシャドゥが明るいと、文字がへこんで見える */
text-shadow: 0px 1px 0px #f9a0ad;
}
.koyama-button-r:active {
bottom: -2px;
margin-bottom: 2px;
border: none;
box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.koyama-button-r:active::before,
.koyama-button-r:active::after {
border: none;
box-shadow: none;
}
/* 最終版Green */
.koyama-button-g {
position: relative;
border: 1px solid #148b22;
border-radius: 4px;
color: #ffffff;
line-height: 28px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 0px 1px 0px #27b538;
}
.koyama-button-g,
.koyama-button-g:hover {
border-bottom: 2px solid #148b22;
background-color: #27b538;
background-image: -webkit-linear-gradient(top, #77d990, #27b538);
background-image: linear-gradient(to bottom, #77d990, #27b538);
box-shadow: inset 1px 1px 0 #b2ffc5;
}
.koyama-button-g::before,
.koyama-button-g::after {
bottom: -1px;
left: -1px;
/* width: 300px; */
height: 28px;
border: 1px solid #40ae50;
border-bottom: 1px solid #0d781a;
border-radius: 4px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.koyama-button-g::before {
height: 26px;
bottom: -2px;
border-top: 0;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 0px #afafaf;
}
.koyama-button-g:hover {
background: #27b538;
background-image: -webkit-linear-gradient(top, #27b538, #77d990);
background-image: linear-gradient(to bottom, #27b538, #77d990);
color: #096114;
/* 以下のシャドゥが明るいと、文字がへこんで見える */
text-shadow: 0px 1px 0px #80d98d;
}
.koyama-button-g:active {
bottom: -2px;
margin-bottom: 2px;
border: none;
box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.koyama-button-g:active::before,
.koyama-button-g:active::after {
border: none;
box-shadow: none;
}
/* 最終版Blue */
.koyama-button-b {
position: relative;
border: 1px solid #6254cb;
border-radius: 4px;
color: #ffffff;
line-height: 28px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 0px 1px 0px #7867f5;
}
.koyama-button-b,
.koyama-button-b:hover {
border-bottom: 2px solid #6254cb;
background-color: #7867f5;
background-image: -webkit-linear-gradient(top, #b097f9, #7867f5);
background-image: linear-gradient(to bottom, #b097f9, #7867f5);
box-shadow: inset 1px 1px 0 #d0bcfb;
}
.koyama-button-b::before,
.koyama-button-b::after {
bottom: -1px;
left: -1px;
/* width: 200px; */
height: 28px;
border: 1px solid #9080ee;
border-bottom: 1px solid #5a4db8;
border-radius: 4px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.koyama-button-b::before {
height: 26px;
bottom: -2px;
border-top: 0;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.koyama-button-b:hover {
background: #7867f5;
background-image: -webkit-linear-gradient(top, #7867f5, #b097f9);
background-image: linear-gradient(to bottom, #7867f5, #b097f9);
color: #443991;
/* 以下のシャドゥが明るいと、文字がへこんで見える */
text-shadow: 0px 1px 0px #ada0f9;
}
.koyama-button-b:active {
bottom: -2px;
margin-bottom: 2px;
border: none;
box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.koyama-button-b:active::before,
.koyama-button-b:active::after {
border: none;
box-shadow: none;
}
/* 最終版Cyan */
.koyama-button-c {
position: relative;
border: 1px solid #22a0a0;
border-radius: 4px;
color: #ffffff;
line-height: 28px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 0px 1px 0px #229393;
}
.koyama-button-c,
.koyama-button-c:hover {
border-bottom: 2px solid #22a0a0;
background-color: #22b5b5;
background-image: -webkit-linear-gradient(top, #9ed9d9, #22b5b5);
background-image: linear-gradient(to bottom, #9ed9d9, #22b5b5);
/* insetの値を明るくすると、ボタン上側がくっきりする */
box-shadow: inset 1px 1px 0 #d0f4fb;
}
.koyama-button-c::before,
.koyama-button-c::after {
bottom: -1px;
left: -1px;
/* width: 200px; */
height: 28px;
border: 1px solid #22a0a0;
border-bottom: 1px solid #22a0a0;
border-radius: 4px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.koyama-button-c::before {
height: 26px;
bottom: -2px;
border-top: 0;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.koyama-button-c:hover {
background: #22b5b5;
background-image: -webkit-linear-gradient(top, #22b5b5, #9ed9d9);
background-image: linear-gradient(to bottom, #22b5b5, #9ed9d9);
color: #0f405f;
/* 以下のシャドゥが明るいと、文字がへこんで見える */
text-shadow: 0px 1px 0px #ade8e8;
}
.koyama-button-c:active {
bottom: -2px;
margin-bottom: 2px;
border: none;
box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.koyama-button-c:active::before,
.koyama-button-c:active::after {
border: none;
box-shadow: none;
}
/* 最終版Grey */
.koyama-button-h {
position: relative;
border: 1px solid #888888;
border-radius: 4px;
color: #ffffff;
line-height: 28px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-shadow: 0px 1px 0px #333333;
}
.koyama-button-h,
.koyama-button-h:hover {
border-bottom: 2px solid #333333;
background-color: #337744;
background-image: -webkit-linear-gradient(top, #dddddd, #888888);
background-image: linear-gradient(to bottom, #ddddd, #888888);
box-shadow: inset 1px 1px 0 #f1f1f1
}
.koyama-button-h::before,
.koyama-button-h::after {
bottom: -1px;
left: -1px;
/* width: 300px; */
height: 28px;
border: 1px solid #888888;
border-bottom: 1px solid #333333;
border-radius: 4px;
/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.koyama-button-h::before {
height: 26px;
bottom: -2px;
border-top: 0;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px 0px #afafaf;
}
.koyama-button-h:hover {
background: #888888;
background-image: -webkit-linear-gradient(top, #888888, #dddddd);
background-image: linear-gradient(to bottom, #888888, #dddddd);
color: #333333;
/* 以下のシャドゥが明るいと、文字がへこんで見える */
text-shadow: 0px 1px 0px #f0f0f0;
}
.koyama-button-h:active {
bottom: -2px;
margin-bottom: 2px;
border: none;
box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.koyama-button-h:active::before,
.koyama-button-h:active::after {
border: none;
box-shadow: none;
}
/* CSS Sliding Image Gallery for Mediawiki
* 自動スライド機能のCSS
* @author: Unknown
* current version crafted together by [[User:Christharp]] from several CSS sites.
*/
.wrapper {
position: absolute;
top: 1%;
width: 6000px;
-webkit-animation: 30s credits linear infinite;
-moz-animation: 30s credits linear infinite;
-ms-animation:30s credits linear infinite;
-o-animation: 30s credits linear infinite;
animation: 30s credits linear infinite;
}
.wrapper img:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
cursor: pointer;
}
@keyframes credits {
0% {
margin-left: 0px;
}
100% {
margin-left: -6000px;
}
}
@-webkit-keyframes credits {
0% {
margin-left: 0px;
}
100% {
margin-left: -6000px;
}
}
@-moz-keyframes credits {
0% {
margin-left: 0px;
}
100% {
margin-left: -6000px;
}
}
@-o-keyframes credits {
0% {
margin-left: 0px;
}
100% {
margin-left: -6000px;
}
}
/* 以下の記述を追加すると、マウスホーバーでスライドが停止する。 */
.wrapper:hover{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
cursor: pointer;
}
/* 自動スライドのCSSはここまで */