MediaWiki:Common.css

From Wiki³
Revision as of 13:14, 15 August 2017 by Kyau (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */


@import url('//api.kyau.net/css/hack-extended.min.css');
@import url('//api.kyau.net/css/titillium_web-extended.min.css');

/* Links
 */
a:link, a:active, a:visited { color: #07b; }  /* regular links */
a:hover { color: #666; }
a.new:link, a.new:active, a.new:visited { color: #a00; }  /* page does not exist links */
a.new:hover { color: #666; }
.mw-body a.extiw:link, .mw-body a.extiw:active, .mw-body a.extiw:visited { color: #07b; }  /* external wiki links */
.mw-body a.extiw:hover { color: #666; }
.mw-body a.external:link, .mw-body a.external:active, .mw-body a.external:visited { color: #07b; }  /* external links */
.mw-body a.external:hover { color: #666; }

/* Page Modifications
 */
#p-personal { height: 130px; }
#p-personal ul { padding-right: 0.4em; }
#p-cactions { top: 121px; left: 0; padding-left: 0; }
.mw-body { margin: 146px 0 0 0.4em; }
#p-logo a, #p-logo a:hover { position: relative; top: -30px; left: 8px; }
#p-search { display: inline-block; position: absolute; top: 24px; right: 75px; }
#p-search.pBody > form { display: inline; }
#p-toolbox {
  position: absolute;
  top: 52px; right: 6px;
  display: inline;
  max-width: 420px;
  width: auto;
  white-space: normal !important;
  padding: 0.3em 0 !important; max-width: 420px; white-space: normal !important;
}
#p-toolbox > li { margin: 0 !important; padding: 0 0 0 16px; white-space: nowrap !important; float: right; }
#p-credits {
  position: absolute;
  right: 0;
  top: 120px;
  margin: .6em 0.4em 1em 0;
  overflow: hidden;
  padding: 0.3em 0.5em;
  text-align: center;
  font-size: 80%;
  font-style: italic;
  line-height: 100%;

  display: inline;
  border: 1px solid #aaa;
  border-bottom: none;
  overflow: visible;
  background: #eaeaea;
  border-radius: 0.4em 0.4em 0 0;
}

/* Top Bar
 */
#p-cactions .new a:link, #p-cactions .new a:active, #p-cactions .new a:visited { color: rgba(200,0,0,1); font-weight: normal; }
#p-cactions .new a:hover { font-weight: bold; }
#p-personal li a:link, #p-personal li a:active, #p-personal li a:visited,
#p-cactions li a:link, #p-cactions li a:active, #p-cactions li a:visited { color: #07b; font-weight: normal; }
#p-personal li a:hover, #p-cactions li a:hover { color: rgba(154, 78, 174, 1); font-weight: bold; }
#p-personal li a:hover { background-color: transparent; }
div.pBody > ul > li#ca-nstab-mediawiki > a,
div.pBody > ul > li#ca-nstab-main > a,
div.pBody > ul > li#ca-nstab-category > a { font-weight: bold; }


/* General
 */
@media screen and (min-width: 1400px) {
  body, input { font-size: 10pt; }
  pre, textarea { font-size: 10pt; }
  #p-credits { top: 118px; }
  #p-search { right: 81px; }
}
@media screen and (max-width: 1399px) {
  body, input { font-size: 9pt; }
  pre, textarea { font-size: 10pt; }
  #toc, .toc { font-size: 10pt; }
}

body {
  background: #f1f1f1;
  background-attachment: fixed;
  color: #313131;
  font-family: 'Titillium Web',Tahoma,Geneva,sans-serif;
  line-height: 100%;
}
h1, h2, h6 { font-weight: normal; }
h3 { margin-top: 0.3em; }
input {
  font-family: 'Titillium Web',Tahoma,Geneva,sans-serif;
  line-height: 100%;
}
pre,textarea {
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  line-height: 100%;
}
table { 
  border-spacing: 0;
  border-collapse: collapse;
}
td { padding: 0; }
#mw-read-only-warning { color: #a00; }
#mw-read-only-warning > p > strong { display: block; }
#mw-content-text > pre { display: table; }
div#siteSub, div#contentSub, div#jump-to-nav { margin: 0; }
div.mw-body > div.mw-indicators, span.mw-editsection > span.mw-editsection-bracket { display: none; margin: 0; }
span.mw-editsection > a { 
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/pencil-small.png') left 3px no-repeat;
  padding-left: 14px;
}


/* Sections
 */
#mw-content-text h1 {
  font-size: 150%;
}
#mw-content-text h1 > span.mw-headline { position: relative; top: 2px; }
#mw-content-text h1 > span.mw-headline > img { top: -3px !important; }
#mw-content-text h2 {
  border-bottom: 1px solid #aaa;
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 0;
  width: 20em;
}
#mw-content-text h2 > span.mw-headline { position: relative; top: 1px; }
#mw-content-text h2 > span.mw-headline > img { position: relative; top: -2px !important; }


/* Tables
 */
table.sortable { 
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #96aac8;
  border-bottom: solid 1px #96aac8;
  margin: 0 auto;
  box-shadow: 1px 1px 5px 0px rgba(150,170,200,0.4);
}
table.sortable tr { border: none; }
table.sortable td, table.sortable th { border-right: solid 1px #96aac8; border-left: solid 1px #96aac8; padding: 5px 10px; vertical-align: center; }
table.sortable th { border-bottom: solid 1px #96aac8; }
table.wikitable  {
  background: #f9f9f9;
  margin: 5px 15px;
  box-shadow: 1px 1px 5px 0px rgba(170,170,170,0.4);
}
table.wikitable:not(.filehistory) td { padding: 4px; }
table.wikitable:not(.filehistory) th, table.wikitable:not(.filehistory) tr, table.wikitable:not(.filehistory) td { border: 1px #aaa solid; }
table.mw-collapsible.optional {
  background: rgba(235,241,245,1);
  border-collapse: collapse;
  border-spacing: 0; 
  margin: 16px 15px;
  border: 1px solid rgba(187,204,221,1);
  box-shadow: 1px 1px 5px 0px rgba(125,125,125,0.4);

}
table.mw-collapsible.optional > tbody > tr > th { font-size: 110%; padding: 0 8px; text-align: left; }
table.mw-collapsible.optional > tbody > tr > td { padding: 8px 8px 4px; }
table.mw-collapsible.optional span.mw-collapsible-toggle:before { content: '\00a0 \00a0 '; font-weight: normal; }


/* Alignment
 */
.aleft { text-align: left; }
.acenter { text-align: center; }
.aright { text-align: right; }
.atop { vertical-align: top; }
.amiddle { vertical-align: middle; }
.abottom { vertical-align: bottom; }
.fright { float: right; }
.fleft { float: left; }
.fclear { clear: both; }


/* User Bar Icon
 */
li#pt-userpage, li#pt-anonuserpage, li#pt-login {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/user-silhouette.png') left center no-repeat;
}
li#pt-preferences {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/gear.png') left center no-repeat;
  padding-left: 20px;
}
li#pt-mytalk {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/sticky-note-text.png') left center no-repeat;
  padding-left: 20px;
}
li#pt-watchlist {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/book-open-bookmark.png') left center no-repeat;
  padding-left: 20px;
}
li#pt-mycontris {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/wooden-box-label.png') left center no-repeat;
  padding-left: 20px;
}
li#pt-logout {
  background: url('//api.kyau.net/images/fugue-icons/icons-shadowless/door-open-out.png') left center no-repeat;
  padding-left: 20px;
}


/* Sidepanel
 */
#p-cactions ul li,#p-cactions ul li a {
  border-radius: 0.4em 0.4em 0 0;
}
#content {
  border-radius: 0.6em 0 0 0.6em;
}
div.pBody {
  border-radius: 0 0.4em 0.4em 0;
}
.portlet h3 { display: none; }
#p-tb.portlet { position: relative; top: 32px; }


/* Footer
 */
div#footer {
  height: 33px !important;
  margin-left: .4em;
  border-left: solid 1px rgb(250, 189, 35);
  border-radius: 1em 0 0 1em;
}
#footer #f-list { position: relative; top: 10px; display: inline; }
#footer #f-poweredbyico { position: relative; top: 1px; }
#footer #f-copyrightico { position: relative; top: 1px; }
#footer #f-poweredbyico > a > img,
#footer #f-copyrightico > a > img { height: 30px !important; }


/* Advanced Toolbar
 */
.wikiEditor-ui-toolbar .sections .section,
.wikiEditor-ui-toolbar {
  background: rgb(238,238,238);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
}


/* Main Page
 */
span.showbox {
  background-color: #f0f0f0;
  border: 1px solid #c0c0c0;
  padding: 0.2em 0.3em 0.2em 0.3em;
}


/* Categories
 */
body.rootpage-Wiki³ h1.firstHeading { display: none; }
body.page-Category_Arch_Linux.action-view h1.firstHeading, body.page-Category_Arch_Linux.action-submit h1.firstHeading { display: none; }
body.page-Category_Arch_Linux.action-view div#tocalign { margin-top: 16px; }
body.page-Category_ThinkPad.action-view h1.firstHeading, body.page-Category_ThinkPad.action-submit h1.firstHeading { display: none; }
body.page-Category_ThinkPad.action-view div#tocalign { margin-top: 16px; }
.firstHeading { border: none; }


/* TOC
 */
div#tocalign {
  box-shadow: 1px 1px 5px 0px rgba(125,125,125,0.4);
  float: right;
  margin-left: 25px;
}
div#tocalign > #toc  { border-collapse: separate; }
div#toc > div#toctitle > h2 { border: none; font-size: 115%; width: auto; }


/* References
 */
ol.references > li:target { background-color: #ddeeff; }
sup.reference:target { background-color: #ddeeff; }


/* YouTube
 */
.youtube { margin-bottom: 16px; font-size: 95%; text-align: center; }
.youtube > iframe {
  margin: 32px auto 0;
  display: block;
  box-shadow: 1px 1px 5px 0px rgba(9,12,25,1);
}

/* Template:Back
 */
.template-back {
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  display: inline-block;
  font-size: 95%;
  margin: 8px 16px 12px 0;
  padding: 4px 8px;
  box-shadow: 1px 1px 5px 0px rgba(125,125,125,0.4);
}


/* Template:Code
 */
.template-code {
  background-color: #ffe0e0;
  border: 1px solid #cc6666;
  border-left: 10px solid #cc6666;
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  font-size: 10pt;
  line-height: 100%;
  margin: 6px 4px;
  padding: 2px 6px;
  white-space: pre;
  display: table;
}


/* Template:BBS
 */
.template-bbs {
  background-color: #090c19;
  border: 1px solid #313b65;
  color: #aeaeae;
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  font-size: 10pt;
  line-height: 100%;
  margin: 0 4px;
  padding: 4px 8px;
  white-space: pre;
}


/* Template:Console
 */
.template-console {
  background-color: rgba(9,12,25,1);
  box-shadow: 1px 1px 5px 0px rgba(9,12,25,1);
  color: rgba(230,230,230,1);
/*  display: inline-block;*/
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  font-size: 85%;
  line-height: 100%;
  margin: 0;
  padding: 4px 8px;
  white-space: pre;
}
.template-console-title {
  background-color: rgba(54,57,68,1);
  border-radius: 0.5em 0.5em 0 0;
  box-shadow: 1px 1px 5px 0px rgba(9,12,25,1);
  color: rgba(230,230,230,1);
  display: inline-block;
  font-size: 85%;
  text-align: left;
  padding: 0 7px 1px 7px;
  position: relative;
  top: 1px;
  white-space: nowrap;
  z-index: -1;
}
mark { background: none; }
mark.black { color: #222946; }
mark.black2 { color: #8c8b89; }
mark.red { color: #be1919; }
mark.red2 { color: #dc2f32; }
mark.green { color: #1aaa13; }
mark.green2 { color: #5dce33; }
mark.yellow { color: #ffaa3e; }
mark.yellow2 { color: #fadd2d; }
mark.blue { color: #3a57d7; }
mark.blue2 { color: #507cff; }
mark.magenta { color: #be007f; }
mark.magenta2 { color: #e671d3; }
mark.cyan { color: #258f8f; }
mark.cyan2 { color: #4dc5dc; }
mark.white { color: #aeaeae; }
mark.white2 { color: #dbdde4; }


/* Template:Output
 */
.template-output {
  background-color: #c1ffc1;
  border: 1px solid #00B000;
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  font-size: 10pt;
  line-height: 100%;
  margin: 0 4px;
  padding: 4px 8px;
  white-space: pre;
}

/* Template:GitHub
 */
.template-github {
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 5px 0px rgba(125,125,125,0.4);
  margin: 4px 0;
}
.template-github > tbody > tr > td { padding: 0.25em 0.8em; }


/* Template:Note
 */
.template-note {
  background-color: rgba(248,249,250,1);
  border: 1px solid rgba(162,169,177,1);
  box-shadow: 1px 1px 5px 0px rgba(162,169,177,0.4);
  margin: 4px 0;
}
.template-note > tbody > tr > td { padding: 0.25em 0.8em; }


/* Template:Warning
 */
.template-warning {
  background-color: rgba(254,231,230,1);
  border: 1px solid rgba(179,36,36,1);
  box-shadow: 1px 1px 5px 0px rgba(179,36,36,0.3);
  margin: 4px 0;
}
.template-warning > tbody > tr > td { padding: 0.25em 0.8em; }
.template-note img, .template-warning img { position: relative; top: 0; }

@media screen and (min-width: 1400px) {
  .template-note, .template-warning { font-size: 90%; }
  .template-note img, .template-warning img { position: relative; top: -2px; }
}

/* Template:UnderConstruction
 */
.template-construction {
  background-color: rgba(255,250,36,1);
  border: 1px solid rgba(228,173,30,1);
  box-shadow: 1px 1px 5px 0px rgba(228,173,30,0.3);
  margin: 4px 0;
}
.template-construction > tbody > tr > td:first-of-type { padding-right: 0; }
.template-construction > tbody > tr > td { padding: 0.25em 0.8em; }


/* Template:Mono
 */
.template-mono {
  background-color: #ebf1f5;
  color: #007a00;
  font-family: 'Hack','Lucida Console',Monaco,monospace;
  font-size: 85%;
  line-height: 100%;
  padding: 0.15em 0.3em;
}


/* Template:Icon(.*)
 */
.template-icon { position: relative; top: -1px; }
.template-iconfix { position: relative; top: -3px; }


/* Template:Infobox
 */
.template-infobox {
  background-color: #f1f1f1;
  border: 1px solid #666;
  float: right;
  padding: 4px;
  box-shadow: 1px 1px 5px 0px rgba(102,102,102,0.4);
  margin: 32px 16px;
}

/* Template:RSS
 */
.template-rss {
  padding: 7px;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 5px 0px rgba(125,125,125,0.4);
  font-size: 90%;
  margin: 0 auto;
  margin-top: 32px;
  width: 300px;
}

/* Template:Hardware
 */
.template-hardware {
  font-size: 90%;
  margin: 0 0.2em 32px 16px;
  display: inline-block;
}
.template-hardware table {
  display: inline-table;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-spacing: 0;
  border-collapse: collapse;
  box-shadow: 1px 1px 5px 0px rgba(204,204,204,1);
  margin-top: 4px;
  padding: 0;
  text-align: left;
}
.template-hardware th { border: 1px solid #ccc; background-color: #ccc; text-align: center; }
.template-hardware td { border: 1px solid #ccc; padding: 0 6px; white-space: nowrap; }



/* - Misc ------------------------------------------------------------------- */


/* Path of Exile
 */
.inventoryBG {
  background-image: url('//webcdn.pathofexile.com/image/gen/inventory/MainInventory.png');
  width: 600px;
  height: 781px;
}
.itemBG { background-image: url('//webcdn.pathofexile.com/image/game_ui/inventory_item_background.png'); }


/* DIY Images
 */
.diy {
  box-shadow: 0 0 6px rgba(0,0,0,1);
  margin: 4px 2px;
}

.thinkpadx220 {
  width: 300px;
  height: 300px;
  background-image: url('//kyau.net/w/images/5/58/ThinkPad_X220.png');
  background-position: center center;
  background-repeat: no-repeat;
}
.thinkpadx220:hover {
  background-image: url('//kyau.net/w/images/thumb/d/d7/ThinkPad_X220-2.png/300px-ThinkPad_X220-2.png');
}