User:Myakura2/Notes/misc

考え中のことや、とくに分類を必要としないものについて書く。

Betula

MediaWikiのユーザースタイルシート。MySkinの上に適用する。

フォントはpx固定だしコードの整理も特にしてないので、一般的にみるとひどいCSSなのは内緒。

@charset "UTF-8";
/**
    "Betula" ― a skin for MediaWiki

      Created: 2009-03-12
      Last Modified: 2009-12-04
      Author: Masataka Yakura <masataka.yakura@gmail.com>
*/


/* foundation
 ------------------------------------------------------------ */
html {
  font-size: 10px;
  font-family: "メイリオ";
  margin: 0;
  padding: 0;
}

body {
  width: 760px;
  margin: 0 auto;
  padding: 80px 0 50px;
  position: relative;

  -webkit-transition: .1s width;
}

hr {
  margin: 20px 0;
  border: none;
  border-top: dotted 1px #ddd;
}

pre {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.2;
  color: #333;
  border-left: solid 5px #f5f5f5;
  padding-left: 15px;
}

ul, ol {
  margin: .5em 0;
  padding-left: 25px;
}

li ul, li ol,
dd ul, dd ol {
  margin-top: 0.25em !important;
}

dd + dt {
  margin-top: 10px;
}

dd {
  margin-top: .25em;
  margin-left: 25px;
}

table {
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: .1em .5em;
  border: solid 1px #aaa;
}

th {
  background: #eee;
}

table#toc td,
#mw-pages table td {
  border: none;
}

a {
  text-decoration: none;
}

a.new {
  color: #900 !important;
}

#globalWrapper {
  padding-top: 70px;
  border-top: dotted 1px #ccc;
}

#content {
  font-size: 140%;
  line-height: 1.7;
}

/* anchor color
 ---------------------------------------- */
#content a:link {
  color: #08b;
}

#content a:visited {
  color: #479;
}

#content a.external {
  color: #262;
}

#content a:hover {
  text-decoration: underline;
}

#content a:active {
  color: #924;
}

#column-one a:hover {
  color: #08b !important;
}

/* preview notice
 ---------------------------------------- */
#wikiPreview > h2:first-child,
.previewnote {
  color: #900;
  font-weight: bold;
  text-align: center;
  text-decoration: blink;
}

.previewnote {
  margin: -10px 0 40px;
}

/* misc
 ---------------------------------------- */
.visualClear {
  clear: both;
}

#wpSummaryLabel {
  display: block;
  margin-top: 1em;
}

#siteSub,
#editpage-copywarn, #wpWatchthis, #wpWatchthis + label, .editHelp,
.printfooter,
#footer {
  display: none;
}

#contentSub {
  font-size: 12px;
  position: relative;
  top: -40px;
}


/* module
 ------------------------------------------------------------ */

/* columns
 ---------------------------------------- */
.col2 {
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
.col3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
}
.col4 {
  -moz-column-count: 4;
  -webkit-column-count: 4;
}
.col5 {
  -moz-column-width: 150px;
  -moz-colum-gap: 12px;
  -webkit-column-width: 150px;
  -webkit-colum-gap: 12px;
}
.col6 {
  -moz-column-width: 120px;
  -moz-colum-gap: 8px;
  -webkit-column-width: 120px;
  -webkit-colum-gap: 8px;
}

.col2.rule, .col3.rule, .col4.rule {
  -moz-column-rule: dotted 3px #eee;
}

/* compact preformatted text
 ---------------------------------------- */
pre.compact {
  height: 200px;
  overflow-y: scroll;
}

/* dl enhancements
 ---------------------------------------- */
.bold dt {
  font-weight: bold;
}

.bullet dd {
  display: list-item;
  list-style: disc;
}

/* logo
 ------------------------------------------------------------ */
#p-logo {
  position: absolute;
  top: 20px;
  left: 0;
}

#p-logo a {
  background-image: none !important;
  font-size: 36px;
  font-family: "Myriad Pro", "Corbel";
}

#p-logo a:before {
  content: "HTML5 ";
  color: #444;
}

#p-logo a:hover:before {
  color: #08b;
}

#p-logo a:after {
  content: "Japanese IG";
  color: #aaa;
}

#p-logo a:hover:after {
  color: #9cd;
}


/* wiki navigation
 ------------------------------------------------------------ */
#p-navigation {
  position: absolute;
  top: 85px;
  left: 0;
}

#p-navigation h5, #n-currentevents, #n-randompage, #n-help {
  display: none;
}

#p-navigation ul {
  font-size: 11px;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#p-navigation ul:after {
  content: "";
  display: block;
  clear: both;
}

#p-navigation li {
  float: left;
  color: #ddd;
}

#p-navigation li:first-child {
  list-style: none;
}

#p-navigation a {
  color: #666;
  display: inline-block;
  margin-right: 24px;
  padding: .2em 0;
}


/* personal toolbar
 ------------------------------------------------------------ */
#p-personal {
  position: absolute;
  top: 32px;
  right: 0;
}

#p-personal h5, #pt-watchlist {
  display: none;
}

#p-personal ul {
  font-size: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#p-personal ul:after {
  content: "";
  display: block;
  clear: both;
}

#p-personal li {
  float: left;
}

#p-personal a {
  display: inline-block;
  padding: .3em .8em;
  color: #888;
  background: #f0f0f0;
  border-right: dotted 1px #fff;
}

#p-personal li:first-child a {
  color: #666;
  background: #ddd;
  font-weight: bold;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
}

#p-personal li:last-child a {
  border-right: none;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
}


/* searchbox
 ------------------------------------------------------------ */
#p-search {
  position: absolute;
  top: 85px;
  right: 0;
}

#p-search h5, #searchGoButton {
  display: none;
}

#p-search input {
  font-size: 11px;
}


/* content
 ------------------------------------------------------------ */



/* headings
 ---------------------------------------- */
h1 {
  font-weight: normal;
  margin: 0 0 40px;
}

h2, h3, h4, h5, h6 {
  position: relative;
}

h2 {
  font-weight: normal;
  font-size: 20px;
  line-height: 36px;
  margin: 30px 0 20px;
}

h3 {
  font-size: 16px;
  line-height: 28px;
  color: #333;
  margin: 20px 0;
}

h4 {
  font-size: 14px;
  line-height: 24px;
  color: #444;
}

h5 {
  font-size: 14px;
  line-height: 20px;
}


/* edit button
 ---------------------------------------- */
#bodyContent .editsection,
#bodyContent .mw-headline {
  display: block;
}

#bodyContent .editsection {
  font-size: 0;
  font-weight: normal;
  visibility: hidden;
  text-align: right;
  width: 80px;
  float: left;
  position: absolute;
  left: -95px;
}

#bodyContent .editsection a {
  visibility: visible;
  font-size: 9px;
  text-decoration: none;
  color: #bbb;
  background: #f5f5f5;
  padding: 0 5px;
  border: solid 1px #ddd;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#bodyContent .editsection a:hover,
#bodyContent .editsection a:focus {
  background: #eee;
}

#bodyContent .editsection a:active {
  color: #fff;
  background: #ddd;
}

h2 .editsection a {
  line-height: 36px;
}
h3 .editsection a {
  line-height: 28px;
}
h4 .editsection a {
  line-height: 24px;
}
h5 .editsection a {
  line-height: 20px;
}


/* table of contents
 ---------------------------------------- */
#toc, #toc tbody, #toc tr, #toc td {
  display: block;
  margin: 0;
  padding: 0;
}

#toc #toctitle {
  font-size: 20px;
  line-height: 30px;
  position: relative;
}

#toc .toctoggle {
  display: block;
  font-size: 0;
  visibility: hidden;
  text-align: right;
  width: 80px;
  position: absolute;
  top: 0;
  left: -95px;
}

#toc #togglelink {
  visibility: visible;
  font-size: 9px;
  line-height: 36px;
  text-decoration: none;
  color: #bbb;
  background: #f5f5f5;
  padding: 0 5px;
  border: solid 1px #ddd;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#toc #togglelink:hover,
#toc #togglelink:focus {
  background: #eee;
}

#toc #togglelink:active {
  color: #fff;
  background: #ddd;
}


#toc ul {
  margin: 0;
  list-style: none;
}

#toc #toctitle + ul {
  margin-left: 5px;
  padding: 0;
}

#toc .tocnumber:after {
  content: " … ";
  color: #999;
}


/* section separator
 ---------------------------------------- */
h2 {
  border-top: dotted 3px #eee;
  padding-top: 20px;
}

#toc h2 {
  border: none;
  padding: 0;
}

.previewnote {
  border-bottom: dotted 3px #eee;
  padding-bottom: 20px;
}


/* action and toolbox
 ------------------------------------------------------------ */
#column-one {
  border-top: dotted 1px #ccc;
  margin-top: 30px;
  padding-top: 5px;
}


/* action
 ------------------------------------------------------------ */
#p-cactions {
}

#p-cactions h5, #ca-protect, #ca-watch {
  display: none;
}

#p-cactions ul {
  font-size: 12px;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#p-cactions li {
  float: left;
  color: #ddd;
}

#p-cactions li:first-child {
  list-style: none;
}

#p-cactions ul:after {
  content: "";
  display: block;
  clear: both;
}

#p-cactions a {
  color: #666;
  display: inline-block;
  margin-right: 24px;
  padding: .2em 0;
}


/* toolbox
 ------------------------------------------------------------ */
#p-tb {
  text-align: right;
}

#p-tb h5, #ca-protect, #ca-watch {
  display: none;
}

#p-tb ul {
  font-size: 10px;
  margin: 0;
  padding: 0;
  margin-top: .5em;
  display: inline-block;
}

#p-tb li {
  float: left;
  color: #ddd;
}

#p-tb li:first-child {
  list-style: none;
}

#p-tb ul:after {
  content: "";
  display: block;
  clear: both;
}

#p-tb a {
  color: #666;
  display: inline-block;
  margin-right: 20px;
  padding: .2em 0;
}

#p-tb li:last-child a {
  margin-right: 0;
}

/* page specific
 ------------------------------------------------------------ */


/* recent changes
 ---------------------------------------- */
body[class$="_Recentchanges"] .special li {
  font-size: 0;
  visibility: hidden;
  margin-top: 10px;
  padding-top: 24px;
  position: relative;
}

body[class$="_Recentchanges"] .special li > * {
  font-size: 11px;
  visibility: visible;
  margin-right: 1em;
}

body[class$="_Recentchanges"] .special li > [class^="mw-plusminus"] {
  font-size: 10px;
  color: #666;
}

body[class$="_Recentchanges"] .special li > a[href$="action=history"] + a,
body[class$="_Recentchanges"] .special li > .newpage + a,
body[class$="_Recentchanges"] .special li > .minor + a,
body[class$="_Recentchanges"] .special li > .unpatrolled + a {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: -25px;
}

body[class$="_Recentchanges"] .special li > .comment {
  display: block;
}

.rcoptions {
  font-size: 12px;
}

/* preferences
 ---------------------------------------- */
#preftoc {
  font-size: 12px;
  margin: 0 0 30px;
  padding: 0;
  margin-top: .5em;
  display: inline-block;
}

#preftoc li {
  float: left;
  color: #ddd;
}

#preftoc li:first-child {
  list-style: none;
}

#preftoc ul:after {
  content: "";
  display: block;
  clear: both;
}

#preftoc a {
  color: #666;
  display: inline-block;
  margin-right: 20px;
  padding: .2em 0;
}

#preftoc li:last-child a {
  margin-right: 0;
}

#preferences .prefsection {
  margin: 0;
  padding: 0;
  border: none;
}

#preferences legend {
  font-size: 20px;
  margin-bottom: 20px;
}

/* search
 ---------------------------------------- */
#powersearch label {
  display: block;
  width: 230px;
  float: left;
}

#powersearch label + br {
  clear: both;
}

/* special pages
 ---------------------------------------- */
body[class$="_Specialpages"] #bodyContent ul:first-of-type {
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

/* diff
 ---------------------------------------- */
table.diff {
  font-size: 11px;
  margin: auto auto;
}

table.diff td {
  line-height: 1.4;
  max-width: 340px;
  overflow-x: scroll;
  border-color: #ddd;
}

table.diff .diff-addedline {
  background: #efe;
}

table.diff .diff-deletedline {
  background: #fee;
}

table.diff .diff-context {
}

table.diff .diffchange {
}




/* compact
 ------------------------------------------------------------ */
@media screen and (max-width: 900px) {
body {
  width: 640px;
}
}

/* ultra compact
 ------------------------------------------------------------ */
@media screen and (max-width: 400px) {
body {
  width: 320px;
}
#content {
  font-size: 11px;
}
}