MediaWiki:Common.css

提供: 八中・小山台デジタルアーカイブ
2022年7月20日 (水) 21:47時点におけるHk100admin (トーク | 投稿記録)による版
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

  • 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はここまで */
「https://newwiki.nvast.com/index.php?title=MediaWiki:Common.css&oldid=2534」から取得