Note
The Funtoo Linux project has transitioned to "Hobby Mode" and this wiki is now read-only.
Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Tag: Undo |
|||
(86 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap'); | |||
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); | |||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap'); | |||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); | |||
/* general wiki content. We use .bodyContent to avoid messing with navigation | |||
tab spacing. */ | |||
/* Make the {{c|}} template not increase line height artificially. */ | |||
p code { | |||
font-size: 0.9em; | |||
} | |||
/* Make overall text a *teensy* bit smaller. */ | |||
/* MediaWiki is a bit too fancy with the line-height, by default. */ | |||
#bodyContent { | |||
line-height: normal; | |||
} | |||
#bodyContent p { | |||
line-height: 1.4; | |||
} | |||
#bodyContent br { | |||
line-height: 1.4; | |||
} | |||
/* Roboto slab is cool for titles. */ | |||
#content h1, | |||
#content h2 { | |||
font-family: "Roboto Slab", serif; | |||
} | |||
body { | |||
font-family: "IBM Plex Sans", sans-serif; | |||
} | |||
/* Accumulated cruft below */ | |||
* syntax highlighting */ | |||
pre, code, tt, kbd, samp, .mw-code { | |||
font-family:'andale mono','lucida console', monospace; | |||
font-size: 11px; | |||
} | |||
.shell, .mw-code, div.mw-geshi { | |||
background-color: inherit; | |||
border: none; | |||
} | |||
/* The following are necessary to make syntax-highlighted text readable on our darker background */ | |||
.mw-highlight .m { | |||
color: #c14141; | |||
} | |||
.mw-highlight .nv { | |||
color: #A6FFF5; | |||
} | |||
.mw-highlight .nn { | |||
color: #a1a1ff; | |||
} | |||
.mw-highlight .kn { | |||
color: #0cff0c; | |||
} | |||
.mw-highlight .cm { | |||
color: #4fc3c3; | |||
} | |||
.mw-highlight .cp { | |||
color: #dabd89; | |||
} | |||
.mw-highlight .cpf { | |||
color: #fff; | |||
} | |||
.mw-highlight .kt { | |||
color: #1cc9cc; | |||
} | |||
.mw-highlight .o { | |||
color: #aac5a7; | |||
} | |||
.mw-highlight .mi { | |||
color: #1cc9cc; | |||
} | |||
.mw-highlight .nb { | |||
color: #ff931c; | |||
} | |||
.mw-highlight .s, .mw-highlight .s2, .mw-highlight .s1 { | |||
color: #62e274; | |||
} | |||
.mw-highlight .nf { | |||
color: #ffa064; | |||
} | |||
.mw-highlight .k { | |||
color: #45f145; | |||
} | |||
div.note.codenote { | |||
display: inline-block; | |||
width: 80em; | |||
} | |||
div.note.codenote pre { | |||
background-color: #0a3458; | |||
color: #fff; | |||
font-weight: 600; | |||
margin-bottom: 0; | |||
border-radius: 0px; | |||
border: none; | |||
} | |||
div.note-head.codenote { | |||
font-variant: normal; | |||
font-size: 1.0em; | |||
background-color: #798abb; | |||
} | |||
div.note-head.codenote .fa-code { | |||
color: #d37979; | |||
background-color: #000; | |||
padding: 3px; | |||
border-radius: 9px; | |||
font-size: 13px; | |||
} | |||
div.note-head.codenote code { | |||
font-size: 13px; | |||
border-radius: 10px; | |||
padding: 3px 9px 3px 9px; | |||
line-height: 2em; | |||
} | |||
.shell, pre, .mw-code, div.mw-geshi { | |||
overflow-x: auto; | |||
overflow-y: hidden; | |||
line-height: 1.2em; | |||
margin: 0; | |||
margin-bottom: 0.5em; | |||
padding: 10px; | |||
border-radius: 4px 4px 4px 4px; | |||
font-size: 13px; | |||
} | |||
.code-box { | |||
margin-bottom: 12px; | |||
margin-top: 12px; | |||
} | |||
.code-box pre, .code-box .mw-code, .code-box div.mw-geshi { | |||
border: 1px solid rgb(234, 236, 240); | |||
border-top: 0px; | |||
border-radius: 0px 0px 4px 4px; | |||
} | |||
pre.code { | |||
font-family: 'andale mono', 'lucida console', monospace; | |||
font-size: 12px; | |||
border: none; | |||
background-color: #073642; | |||
color: #aaa; | |||
overflow-x: auto; | |||
overflow-y: hidden; | |||
line-height: 1.5em; | |||
margin: 12px 12px 12px 5px; | |||
} | |||
.code b { | |||
font-weight:700; | |||
} | |||
.code b { | |||
font-weight:700; | |||
} | |||
.code_input { | |||
color: #e8dfdf; | |||
font-weight: 700; | |||
} | |||
.code_red { | |||
color: red; | |||
} | |||
.code_root { | |||
color: red; | |||
font-weight: bold; | |||
} | |||
.code_user { | |||
color: #0f0; | |||
font-weight: bold; | |||
} | |||
.code_host { | |||
color: #ff0; | |||
font-weight: bold; | |||
} | |||
.code_blue { | |||
color: #88f; | |||
} | |||
.code_green { | |||
color: #0f0; | |||
} | |||
.code_yellow { | |||
color: #ff0; | |||
} | |||
.code_cyan { | |||
color: #0ff; | |||
} | |||
.mw-body a { | .mw-body a { | ||
text-decoration: underline; | text-decoration: underline; | ||
Line 32: | Line 267: | ||
are not enabled on a page. | are not enabled on a page. | ||
*/ | */ | ||
.mw-translate-fuzzy { | |||
border-radius: 10px; | |||
background-color: #e1e4d8; | |||
padding: 0.25em; | |||
} | |||
.mw-pt-languages-label, .mw-pt-languages-list { | .mw-pt-languages-label, .mw-pt-languages-list { | ||
display: table-cell; | display: table-cell; | ||
} | |||
.mw-pt-languages-label { | |||
width: 20%; | |||
border-right: 1px solid #cfd9e4; | |||
} | } | ||
.mw-pt-languages-list { | .mw-pt-languages-list { | ||
padding-left: 0.5em; | padding-left: 0.5em; | ||
padding-bottom: 0.7em; | |||
width: 80%; | |||
} | } | ||
Line 51: | Line 301: | ||
.mw-pt-languages { | .mw-pt-languages { | ||
border: none; | border: none; | ||
line-height: 1.6em; | line-height: 1.6em; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: #f8f9fa | background: #f8f9fa none repeat scroll 0 0; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
overflow: auto; | overflow: auto; | ||
border-radius: 8px; | |||
display: inline-block; | |||
} | } | ||
div.mw-pt-translate-header + hr { | div.mw-pt-translate-header + hr { | ||
display: none; | display: none; | ||
} | |||
div.mw-pt-translate-header .mw-translate-fuzzy { | |||
line-height: 3em; | |||
} | } | ||
Line 68: | Line 321: | ||
margin-right: 1.0em; | margin-right: 1.0em; | ||
font-weight: bold; | font-weight: bold; | ||
padding: 4px; | |||
display: block; | |||
min-width: 150px; | |||
line-height: 1.0em; | |||
} | } | ||
/* category links on bottom */ | /* category links on bottom */ | ||
Line 85: | Line 336: | ||
} | } | ||
/* notes */ | |||
div.note { | |||
border-radius: 5px; | border-radius: 5px; | ||
color: # | margin: 12px 12px 12px 5px; | ||
background-color: #ede9f3; | |||
border: none; | |||
display: inline-block; | |||
} | } | ||
. | div.infobox { | ||
border-radius: 5px; | |||
margin: 12px 12px 12px 5px; | |||
background-color: #ede9f3; | |||
border: none; | |||
} | } | ||
div.darknote { | |||
. | |||
border-radius: 5px; | border-radius: 5px; | ||
margin: 12px 12px 12px 5px; | |||
background-color: #4a516e; | |||
color: #bfbfbf; | |||
border: none; | |||
} | } | ||
div.darknote a, div.darknote a.external, div.darknote a.external:visited { | |||
color: #fff; | |||
div. | |||
} | } | ||
div. | div.darknote-head { | ||
padding: 5px 15px 5px 15px; | |||
color: #fff; | |||
background-color: #515893; | |||
border-radius: 5px 5px 0px 0px; | |||
font-weight: 600; | |||
font-family: "IBM Plex Sans", sans-serif; | |||
} | } | ||
Line 142: | Line 381: | ||
border-radius: 5px 5px 0px 0px; | border-radius: 5px 5px 0px 0px; | ||
font-weight: 600; | font-weight: 600; | ||
font-family: " | font-family: "IBM Plex Sans", sans-serif; | ||
} | } | ||
div.note- | div.note-body { | ||
padding: 0px 10px 10px 10px; | |||
} | } | ||
Line 171: | Line 408: | ||
div.note.important { | div.note.important { | ||
background-color: #e4c3c3; | background-color: #e4c3c3; | ||
} | } | ||
Line 193: | Line 429: | ||
color: #4a4a86; | color: #4a4a86; | ||
font-size: 1.25em; | font-size: 1.25em; | ||
font-family: " | font-family: "IBM Plex Sans", sans-serif; | ||
line-height: 1em; | line-height: 1em; | ||
padding-top: 0.5em; | padding-top: 0.5em; | ||
} | } | ||
/* tables */ | /* tables */ | ||
Line 224: | Line 461: | ||
.inverted { | .inverted { | ||
font-family: " | font-family: "IBM Plex Sans"; | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 20px; | line-height: 20px; | ||
Line 244: | Line 481: | ||
background-image: none; | background-image: none; | ||
} | } | ||
.inverted a.external:visited { | .inverted a.external:visited { | ||
Line 259: | Line 497: | ||
.install_nav td { | .install_nav td { | ||
padding: 3px; | padding: 3px; | ||
} | } | ||
Line 284: | Line 504: | ||
} | } | ||
/* Ebuild/Package CSS */ | /* Ebuild/Package CSS */ | ||
.ns-502 #firstHeading { | .ns-502 #firstHeading { | ||
margin-bottom: 0.25em; | margin-bottom: 0.25em; | ||
font-size: 1.6em; | font-size: 1.6em; |
Latest revision as of 16:24, June 2, 2022
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/* general wiki content. We use .bodyContent to avoid messing with navigation
tab spacing. */
/* Make the {{c|}} template not increase line height artificially. */
p code {
font-size: 0.9em;
}
/* Make overall text a *teensy* bit smaller. */
/* MediaWiki is a bit too fancy with the line-height, by default. */
#bodyContent {
line-height: normal;
}
#bodyContent p {
line-height: 1.4;
}
#bodyContent br {
line-height: 1.4;
}
/* Roboto slab is cool for titles. */
#content h1,
#content h2 {
font-family: "Roboto Slab", serif;
}
body {
font-family: "IBM Plex Sans", sans-serif;
}
/* Accumulated cruft below */
* syntax highlighting */
pre, code, tt, kbd, samp, .mw-code {
font-family:'andale mono','lucida console', monospace;
font-size: 11px;
}
.shell, .mw-code, div.mw-geshi {
background-color: inherit;
border: none;
}
/* The following are necessary to make syntax-highlighted text readable on our darker background */
.mw-highlight .m {
color: #c14141;
}
.mw-highlight .nv {
color: #A6FFF5;
}
.mw-highlight .nn {
color: #a1a1ff;
}
.mw-highlight .kn {
color: #0cff0c;
}
.mw-highlight .cm {
color: #4fc3c3;
}
.mw-highlight .cp {
color: #dabd89;
}
.mw-highlight .cpf {
color: #fff;
}
.mw-highlight .kt {
color: #1cc9cc;
}
.mw-highlight .o {
color: #aac5a7;
}
.mw-highlight .mi {
color: #1cc9cc;
}
.mw-highlight .nb {
color: #ff931c;
}
.mw-highlight .s, .mw-highlight .s2, .mw-highlight .s1 {
color: #62e274;
}
.mw-highlight .nf {
color: #ffa064;
}
.mw-highlight .k {
color: #45f145;
}
div.note.codenote {
display: inline-block;
width: 80em;
}
div.note.codenote pre {
background-color: #0a3458;
color: #fff;
font-weight: 600;
margin-bottom: 0;
border-radius: 0px;
border: none;
}
div.note-head.codenote {
font-variant: normal;
font-size: 1.0em;
background-color: #798abb;
}
div.note-head.codenote .fa-code {
color: #d37979;
background-color: #000;
padding: 3px;
border-radius: 9px;
font-size: 13px;
}
div.note-head.codenote code {
font-size: 13px;
border-radius: 10px;
padding: 3px 9px 3px 9px;
line-height: 2em;
}
.shell, pre, .mw-code, div.mw-geshi {
overflow-x: auto;
overflow-y: hidden;
line-height: 1.2em;
margin: 0;
margin-bottom: 0.5em;
padding: 10px;
border-radius: 4px 4px 4px 4px;
font-size: 13px;
}
.code-box {
margin-bottom: 12px;
margin-top: 12px;
}
.code-box pre, .code-box .mw-code, .code-box div.mw-geshi {
border: 1px solid rgb(234, 236, 240);
border-top: 0px;
border-radius: 0px 0px 4px 4px;
}
pre.code {
font-family: 'andale mono', 'lucida console', monospace;
font-size: 12px;
border: none;
background-color: #073642;
color: #aaa;
overflow-x: auto;
overflow-y: hidden;
line-height: 1.5em;
margin: 12px 12px 12px 5px;
}
.code b {
font-weight:700;
}
.code b {
font-weight:700;
}
.code_input {
color: #e8dfdf;
font-weight: 700;
}
.code_red {
color: red;
}
.code_root {
color: red;
font-weight: bold;
}
.code_user {
color: #0f0;
font-weight: bold;
}
.code_host {
color: #ff0;
font-weight: bold;
}
.code_blue {
color: #88f;
}
.code_green {
color: #0f0;
}
.code_yellow {
color: #ff0;
}
.code_cyan {
color: #0ff;
}
.mw-body a {
text-decoration: underline;
}
.software-infobox {
float: right;
width: 280px;
border: 1px solid black;
}
.software-infobox-title {
font-size: 1.5em;
font-weight: bold;
color: #fff;
background-color: #aaa;
column-span: all;
}
.softib-row {
border-collapse: collapse;
border: rgb(170,170,170);
}
.softib-label {
vertical-align: top;
text-align: left;
font-weight: bold;
color: #000088;
}
/* translation and subpages bar - note that some CSS needs to be redefined as it is not included if translations
are not enabled on a page.
*/
.mw-translate-fuzzy {
border-radius: 10px;
background-color: #e1e4d8;
padding: 0.25em;
}
.mw-pt-languages-label, .mw-pt-languages-list {
display: table-cell;
}
.mw-pt-languages-label {
width: 20%;
border-right: 1px solid #cfd9e4;
}
.mw-pt-languages-list {
padding-left: 0.5em;
padding-bottom: 0.7em;
width: 80%;
}
.mw-pt-languages-label {
font-weight: bold;
display: table-cell;
width: 15%;
background: #eaecf0;
padding: 0.5em;
}
.mw-pt-languages {
border: none;
line-height: 1.6em;
box-sizing: border-box;
background: #f8f9fa none repeat scroll 0 0;
border-collapse: collapse;
overflow: auto;
border-radius: 8px;
display: inline-block;
}
div.mw-pt-translate-header + hr {
display: none;
}
div.mw-pt-translate-header .mw-translate-fuzzy {
line-height: 3em;
}
.subpage_item {
margin-right: 1.0em;
font-weight: bold;
padding: 4px;
display: block;
min-width: 150px;
line-height: 1.0em;
}
/* category links on bottom */
.catlinks {
background-color: #f5f5f5;
border: none;
border-radius: 9px;
padding: 10px;
}
/* notes */
div.note {
border-radius: 5px;
margin: 12px 12px 12px 5px;
background-color: #ede9f3;
border: none;
display: inline-block;
}
div.infobox {
border-radius: 5px;
margin: 12px 12px 12px 5px;
background-color: #ede9f3;
border: none;
}
div.darknote {
border-radius: 5px;
margin: 12px 12px 12px 5px;
background-color: #4a516e;
color: #bfbfbf;
border: none;
}
div.darknote a, div.darknote a.external, div.darknote a.external:visited {
color: #fff;
}
div.darknote-head {
padding: 5px 15px 5px 15px;
color: #fff;
background-color: #515893;
border-radius: 5px 5px 0px 0px;
font-weight: 600;
font-family: "IBM Plex Sans", sans-serif;
}
div.note-head {
padding: 5px 15px 5px 15px;
color: #fff;
background-color: #afa4bb;
border-radius: 5px 5px 0px 0px;
font-weight: 600;
font-family: "IBM Plex Sans", sans-serif;
}
div.note-body {
padding: 0px 10px 10px 10px;
}
div.note.tip {
background-color: #e4e4e4;
border: 1px solid #d4d4e6;
}
div.note-head.tip {
background-color: #6793ce;
}
div.note.warningnote {
background-color: #ffc484;
border: 1px solid #ff7531;
}
div.note-head.warningnote {
background-color: #ff9231;
}
div.note.important {
background-color: #e4c3c3;
}
div.note-head.important {
background-color: #b16666;
}
div.callout {
border-left: 4px solid #6691bda1;
border-radius: 0px 3px 3px 0px;
padding: 8px 8px 8px 15px;
background-color: #f7f7f7;
box-shadow: 5px 5px 4px #e0d3d387;
margin-bottom: 1.5em;
margin-top: 1em;
}
.callout-head {
font-weight: 600;
color: #4a4a86;
font-size: 1.25em;
font-family: "IBM Plex Sans", sans-serif;
line-height: 1em;
padding-top: 0.5em;
}
/* tables */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-color: grey;
border-collapse: collapse;
border-spacing: 0px;
}
.table th, .table td {
border: 1px solid #aaaaaa;
padding: 10px;
}
.table th.active {
background-color: #f5f5f5;
}
.table tr.danger {
background-color: #f9d1d1;
}
.inverted {
font-family: "IBM Plex Sans";
font-size: 14px;
line-height: 20px;
background-color: #252525;
color: #a9a9a9;
font-weight: 600;
border-radius: 5px;
padding: 20px;
margin-bottom: 10px;
}
.inverted a {
color: #f5f931;
}
.inverted a.external {
color: #f5f931;
padding-right: 0px;
background-image: none;
}
.inverted a.external:visited {
color: #cace00;
}
.install_nav {
border-collapse: initial;
background-color: #c3e3ff;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}
.install_nav td {
padding: 3px;
}
.box-caption {
background-color: #ececec;
color: #9e9e9e;
}
/* Ebuild/Package CSS */
.ns-502 #firstHeading {
margin-bottom: 0.25em;
font-size: 1.6em;
}
ns-502 #content-spacer {
display: block;
line-height: 1em;
}