MediaWiki:Common.css

/* 「メインページ」というタイトルを非表示 */
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
 * 表示速度を変更するには「60s」→「30s」などとする。
 * 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;
}


/* Header Tabs (OOUI): タブを角丸に */
#headertabs .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* タブ全体の枠（必要なら）も角丸に */
#headertabs .oo-ui-tabSelectWidget-framed,
#headertabs .oo-ui-panelLayout-framed {
  border-radius: 10px;
}

/* タブ同士がくっついて角丸が見えにくい場合の“隙間” */
#headertabs .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
  margin-right: 4px;
}

/* 選択中タブだけ、少し強めに丸く */
#headertabs .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/***************************************************
 * TabberNeue：Excel風タブ（上） + タブ内ジャンプリンク
 * 重要：スキンの強いCSSに勝つため、セレクタ強め＆ !important 多用
 ***************************************************/

/* ====== Excel風タブ（上） ====== */

/* タブ列 */
.tabber__tabs{
  display:flex !important;
  gap:2px !important;
  align-items:flex-end !important;
  padding:0 6px !important;
  margin:0 !important;
}

/* 未選択タブ */
.tabber__tab{
  display:inline-block !important;
  background:#e6e6e6 !important;
  color:#333 !important;
  border:1px solid #bdbdbd !important;
  border-bottom:none !important;
  border-radius:6px 6px 0 0 !important;
  padding:6px 12px !important;
  line-height:1.2 !important;
  text-decoration:none !important;
}

/* ホバー */
.tabber__tab:hover{
  background:#f0f0f0 !important;
}

/* 選択中タブ（あなたの環境は aria-selected="true"） */
.tabber__tab[aria-selected="true"]{
  background:#ffffff !important;
  color:#000000 !important;
  border-color:#9e9e9e !important;
  position:relative !important;
  z-index:2 !important;
}

/* 選択中タブ下の線を消して“つながってる感” */
.tabber__tab[aria-selected="true"]::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important;
  bottom:-1px !important;
  height:1px !important;
  background:#ffffff !important;
}

/* パネル（内容） */
.tabber__panel{
  border:1px solid #9e9e9e !important;
  background:#ffffff !important;
  padding:12px !important;
  margin-top:-1px !important;
  border-radius:0 6px 6px 6px !important;
  position:relative !important;
  z-index:1 !important;
}


/* ====== タブ内ジャンプ（スクロールさせずにタブ切替する .tabJump） ======
   “絶対に指カーソルにする” が目的。
   スキンが cursor を !important で潰しても勝てるように超強いセレクタで指定。
*/

/* 基本（span/a どちらでもOK） */
.tabJump{
  display:inline-block !important;
  pointer-events:auto !important;
  user-select:none !important;

  /* これが本命：指カーソル */
  cursor:pointer !important;

  /* 見た目をリンク寄せ */
  color:#0645ad !important;
  text-decoration:underline !important;
}

/* hover時（わかりやすく） */
.tabJump:hover{
  opacity:.85 !important;
}

/* 子要素があっても指になるように */
.tabJump,
.tabJump *{
  cursor:pointer !important;
}

/* スキンの強制CSSに勝つための“最終兵器”（高特異性） */
html body #content #mw-content-text .tabJump,
html body #mw-content-text .tabJump,
html body #mw-content-text .tabJump *{
  cursor:pointer !important;
}