Warning:
This wiki has been archived and is now read-only.
User:Myakura2/Notes/misc
From HTML5 JP IG
考え中のことや、とくに分類を必要としないものについて書く。
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; } }