xevv/style.css

632 lines
10 KiB
CSS

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
div.header, header.header {
margin: 0;
font-size: 140%;
font-weight: bold;
line-height: 1em;
display: block;
}
.inlineheader .author {
margin: 0;
font-size: 112%;
font-weight: bold;
display: block;
}
.actions ul {
margin: 0;
padding: 6px .4em;
height: 1em;
list-style-type: none;
}
.actions li {
display: inline;
padding: .2em;
}
.pageheader {
border-bottom: 1px solid #000;
background-position-x: right;
background-position-y: bottom;
background-repeat: no-repeat;
background-image: url("/xevv/images/header.png");
background-size: 1em;
image-rendering: crisp-edges;
}
.inlinepage .actions ul {
border-bottom: 0;
}
#otherlanguages ul {
margin: 0;
padding: 6px;
list-style-type: none;
}
#otherlanguages li {
display: inline;
padding: .2em .4em;
}
.inlinecontent,
.inlineenclosure {
margin-top: .4em;
}
.pagefooter,
.inlinefooter,
.comments {
clear: both;
}
#pageinfo {
margin: 1em 0;
border-top: 1px solid #000;
}
.tags {
margin-top: 1em;
}
.inlinepage .tags {
display: inline;
}
.mapparent {
text-decoration: none;
}
.img caption {
font-size: 80%;
caption-side: bottom;
text-align: center;
}
img.img {
margin: 0.5ex;
}
.align-left {
float:left;
}
.align-right {
float:right;
}
#backlinks {
margin-top: 1em;
}
#searchform {
display: inline;
float: right;
}
#editcontent {
width: 98%;
}
.editcontentdiv {
width: auto;
overflow: auto;
}
img {
border-style: none;
display: block;
margin: auto;
max-width: 100%
}
pre {
overflow: auto;
white-space: pre-wrap
}
div.recentchanges {
border-style: solid;
border-width: 1px;
overflow: auto;
width: auto;
clear: none;
}
.recentchanges .metadata {
padding: 0 0.5em;
}
.recentchanges .changelog {
font-style: italic;
clear: both;
display: block;
padding: 1px 2px;
}
.recentchanges .desc {
display: none;
}
.recentchanges .diff {
display: none;
}
.recentchanges .committer {
float: left;
margin: 0;
width: 40%;
}
.recentchanges .committype {
float: left;
margin: 0;
width: 5%;
font-size: small;
}
.recentchanges .changedate {
float: left;
margin: 0;
width: 35%;
font-size: small;
}
.recentchanges .pagelinks,
.recentchanges .revert {
float: right;
margin: 0;
width: 60%;
}
.blogform, #blogform {
padding: 10px 10px;
border: 1px solid #aaa;
background: #eee;
color: black;
width: auto;
overflow: auto;
}
.inlinepage {
padding: 10px 10px;
border: 1px solid #aaa;
overflow: auto;
}
.pagedate,
.pagelicense,
.pagecopyright {
font-style: italic;
display: block;
margin-top: 1em;
}
.archivepagedate {
font-style: italic;
}
.archivepage {
margin-bottom: 1em;
}
.error {
color: #C00;
}
.sidebar {
min-width: 20ex;
max-width: 40%;
float: right;
margin: 1em 0em 1em 1em;
padding: 0.25em 1ex;
position: relative;
z-index: 99;
border: solid 0.1em #fff;
border-radius: 0.25em;
}
hr.poll {
height: 10pt;
color: white;
background: #eee;
border: 2px solid black;
}
div.poll {
margin-top: 1ex;
margin-bottom: 1ex;
padding: 1ex 1ex;
border: 1px solid #aaa;
}
span.color {
padding: 2px;
}
.comment-header,
.microblog-header {
font-style: italic;
margin-top: .3em;
}
.comment .author,
.microblog .author {
font-weight: bold;
}
.comment-subject {
font-weight: bold;
}
.comment-avatar {
float: right;
}
.comment {
border: 1px solid #aaa;
padding: 3px;
}
div.progress {
margin-top: 1ex;
margin-bottom: 1ex;
border: 1px solid #888;
width: 400px;
background: #eee;
color: black;
padding: 1px;
}
div.progress-done {
background: #ea6;
color: black;
text-align: center;
padding: 1px;
}
/* things to hide in printouts */
@media print {
.actions { display: none; }
.tags { display: none; }
.trails { display: none; }
.feedbutton { display: none; }
#searchform { display: none; }
.blogform, #blogform { display: none; }
#backlinks { display: none; }
.addcomment { display: none; }
}
/* popup template and backlinks hiding */
.popup {
border-bottom: 1px dotted #366;
color: #366;
}
.popup .balloon,
.popup .paren,
.popup .expand {
display: none;
text-align: left;
}
.popup:hover .balloon,
.popup:focus .balloon {
position: absolute;
display: inline;
margin: 1em 0 0 -2em;
padding: 0.625em;
border: 2px solid;
background-color: #dee;
color: black;
}
/* form styling */
fieldset {
margin: 1ex 0;
border: 1px solid black;
}
legend {
padding: 0 1ex;
font-style: italic
}
.fb_submit {
float: left;
margin: 2px 0;
}
label.block {
display: block;
}
label.inline {
display: inline;
}
input#openid_identifier {
background: url(wikiicons/openidlogin-bg.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}
input#searchbox {
background: url(wikiicons/search-bg.gif) no-repeat;
background-color: #fff;
background-position: 100% 50%;
color: #000;
padding-right: 16px;
}
/* invalid form fields */
.fb_invalid {
color: red;
background: white;
}
/* required form fields */
.fb_required {
font-weight: bold;
}
/* highlight plugin */
pre.hl { color:#000000; background-color:#ffffff; }
.hl.num { color:#2928ff; }
.hl.esc { color:#ff00ff; }
.hl.str { color:#ff0000; }
.hl.dstr { color:#818100; }
.hl.slc { color:#838183; font-style:italic; }
.hl.com { color:#838183; font-style:italic; }
.hl.dir { color:#008200; }
.hl.sym { color:#000000; }
.hl.line { color:#555555; }
.hl.mark { background-color:#ffffbb; }
.hl.kwa { color:#000000; font-weight:bold; }
.hl.kwb { color:#830000; }
.hl.kwc { color:#000000; font-weight:bold; }
.hl.kwd { color:#010181; }
/* calendar plugin */
.month-calendar-day-this-day,
.year-calendar-this-month {
background-color: #eee;
}
.month-calendar-day-head,
.month-calendar-day-nolink,
.month-calendar-day-link,
.month-calendar-day-this-day,
.month-calendar-day-future {
text-align: right;
}
.month-calendar-arrow A:link,
.year-calendar-arrow A:link,
.month-calendar-arrow A:visited,
.year-calendar-arrow A:visited {
text-decoration: none;
font-weight: normal;
font-size: 150%;
}
/* outlines */
li.L1 { list-style: upper-roman; }
li.L2 { list-style: decimal; }
li.L3 { list-style: lower-alpha; }
li.L4 { list-style: disc; }
li.L5 { list-style: square; }
li.L6 { list-style: circle; }
li.L7 { list-style: lower-roman; }
li.L8 { list-style: upper-alpha; }
/* tag cloud */
.pagecloud {
float: right;
width: 30%;
text-align: center;
padding: 10px 10px;
border: 1px solid #aaa;
background: #eee;
color: black;
}
.smallestPC { font-size: 70%; }
.smallPC { font-size: 85%; }
.normalPC { font-size: 100%; }
.bigPC { font-size: 115%; }
.biggestPC { font-size: 130%; }
/* orange feed button */
.feedbutton {
color: white;
background: #54435f;
border-left: 2px solid #8b6f9d;
border-top: 2px solid #bf99d8;
border-right: 2px solid #3e3247;
border-bottom: 2px solid #271f2d;
border-radius: 7px;
padding: 0 0.5em 0 0.5em;
font-family: sans-serif;
font-weight: bold;
font-size: small;
text-decoration: none;
margin-top: 1em;
}
.feedbutton:hover {
color: white;
background: #ff9900;
}
.FlattrButton {
display: none;
}
/* login selector */
#login_choice {
display: none;
}
#login_input_area {
clear: both;
padding: 10px;
}
#login_btns, #login_btns br {
clear: both;
}
#login_highlight {
background-color: black;
float: left;
}
.login_large_btn {
padding: 1em 1.5em;
border: 1px solid #DDD;
margin: 3px;
float: left;
}
.login_small_btn {
padding: 4px 4px;
border: 1px solid #DDD;
margin: 3px;
float: left;
}
a.login_large_btn:focus {
outline: none;
}
a.login_large_btn:focus {
outline-style: none;
}
.login_selected {
border: 4px solid #DDD;
}
.fileupload-content .ui-progressbar {
width: 200px;
height: 20px;
}
.fileupload-content .ui-progressbar-value {
background: url(ikiwiki/images/pbar-ani.gif);
}
.trails {
margin-top: 1em;
margin-bottom: 1em;
}
.trail {
display: block;
clear: both;
position: relative;
}
.trailprev {
display: block;
text-align: left;
position: absolute;
top: 0%;
left: 3%;
width: 30%;
}
.trailup {
display: block;
text-align: center;
margin-left: 35%;
margin-right: 35%;
}
.trailnext {
display: block;
text-align: right;
position: absolute;
top: 0%;
width: 30%;
right: 3%;
}
.trailsep {
display: none;
}
.revert a img, .pagelinks .toggle img {
width: 5%
}
blockquote {
margin: auto;
max-width: 85%;
border-left: 2px solid;
padding-left: 2ex
}
body {
margin: 40px auto;
max-width: 70%;
padding: 0 10px;
line-height: 1.6;
font-family: sans-serif;
font-size: calc(16px + 20 * ((100vw - 320px) / 1680));
}
td, th {
border-right: 1px solid;
border-top: 1px solid;
border-radius: 2px;
padding-right: 2ex
}
.ibox td, .ibox th {
font-size: 0.75em
}
.ibox-img {
margin-bottom: 0.5em;
max-height: 200px
}
h1, h2, h3, h4, h5, h6 {
font-family: serif
}
h1 {font-size: 1.200em}
h2 {font-size: 1.167em}
h3 {font-size: 1.134em}
h4 {font-size: 1.101em}
h5 {font-size: 1.068em}
h6 {font-size: 1.035em}
p {
position: relative
}
a {
text-decoration: underline dotted
}
.ibox-head {
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em
}
.ibox-head span.color {
width: 100%;
padding: 0;
margin: -1px;
border: solid 1px #000;
border-radius: 0.35em;
display: inline-block
}
section#content h1, section#content h2, section#content h3, section#content h4, section#content h5 {
border-left: 1px solid;
border-bottom: 1px solid;
padding: 0 1em
}
section#content p {
line-height: 1.6;
text-align: justify;
text-justify: distribute;
text-indent: 35px;
}
.toc {
border: 1px solid #fff;
border-radius: 7px;
padding: 0.5em 1em;
display: inline-block;
}
.toc::before {
content: "Contents";
font-variant: small-caps;
font-weight: 400;
letter-spacing: 0.1em;
}
/* colors */
a {color: #92ebf0}
body {background-color: #0a0a0a; color: #eaeaea}
h1, h2, h3, h4, h5, h6 {color: #9a9a9a}
section#content h1 {color: #98ffe0}
section#content h2 {color: #c7ffef}
h3>span {color: #7a7a7a}
td, th, fieldset, blockquote, .pageheader, #pageinfo, .toc {border-color: #eaeaea}
small {color: #777}
div.recentchanges, .sidebar, .toc {background-color: #131313; color: #eee}
.recentchanges .changelog {background-color: #2a2a2a; color: #fff}
@media(prefers-color-scheme: light) {
a {color: #2a7fe8}
body {background-color: #f5f5f5; color: #151515}
h1, h2, h3, h4, h5, h6 {color: #656565}
section#content h1 {color: #448be8}
section#content h2 {color: #356cb4}
h3>span {color: #858585}
td, th, fieldset, blockquote, .pageheader, #pageinfo, .toc {border-color: #151515}
small {color: #888}
div.recentchanges, .sidebar, .toc {background-color: #e5e5e5; color: #111}
.recentchanges .changelog {background-color: #d5d5d5; color: #000}
}