improved basic and print styles
This commit is contained in:
Anika Henke
parent
288cdb254b
commit
866969d221
2 changed files with 140 additions and 67 deletions
104
css/basic.css
104
css/basic.css
|
|
@ -20,8 +20,9 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font: normal 100%/1.4 Frutiger, Calibri, Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font: normal 100%/1.4 Frutiger, Calibri, "Myriad Pro", Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
/* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -32,9 +33,7 @@ h2,
|
|||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
caption,
|
||||
legend {
|
||||
h6 {
|
||||
font-family: Constantia, Utopia, Lucidabright, Lucida, Georgia, "Nimbus Roman No9 L", serif;
|
||||
font-weight: bold;
|
||||
color: __text_neu__;
|
||||
|
|
@ -48,9 +47,7 @@ legend {
|
|||
[dir=rtl] h3,
|
||||
[dir=rtl] h4,
|
||||
[dir=rtl] h5,
|
||||
[dir=rtl] h6,
|
||||
[dir=rtl] caption,
|
||||
[dir=rtl] legend {
|
||||
[dir=rtl] h6 {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
|
|
@ -80,6 +77,17 @@ h6 {
|
|||
}
|
||||
/* bottom margin = 1 / font-size */
|
||||
|
||||
caption,
|
||||
figcaption,
|
||||
summary,
|
||||
legend {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
padding: 0;
|
||||
margin: 0 0 .35em;
|
||||
}
|
||||
|
||||
|
||||
/*____________ basic margins and paddings ____________*/
|
||||
|
||||
|
|
@ -91,6 +99,8 @@ pre,
|
|||
table,
|
||||
hr,
|
||||
blockquote,
|
||||
figure,
|
||||
details,
|
||||
fieldset,
|
||||
address {
|
||||
margin: 0 0 1.4em 0; /* bottom margin = line-height */
|
||||
|
|
@ -175,7 +185,6 @@ table {
|
|||
caption {
|
||||
caption-side: top;
|
||||
text-align: left;
|
||||
margin: 0 0 .3em;
|
||||
}
|
||||
[dir=rtl] caption {
|
||||
text-align: right;
|
||||
|
|
@ -187,16 +196,15 @@ td {
|
|||
margin: 0;
|
||||
vertical-align: top;
|
||||
border: 1px solid __border__;
|
||||
text-align: left;
|
||||
}
|
||||
[dir=rtl] td,
|
||||
[dir=rtl] th {
|
||||
text-align: right;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: __background_alt__;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
[dir=rtl] th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -239,10 +247,19 @@ img {
|
|||
}
|
||||
|
||||
img,
|
||||
object {
|
||||
object,
|
||||
embed,
|
||||
iframe,
|
||||
video,
|
||||
audio {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-width: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* IE8 and below won't display the images otherwise */
|
||||
button img {
|
||||
max-width: none;
|
||||
|
|
@ -259,15 +276,23 @@ hr {
|
|||
|
||||
acronym,
|
||||
abbr {
|
||||
font-style: normal;
|
||||
}
|
||||
acronym[title],
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted;
|
||||
font-style: normal;
|
||||
}
|
||||
em acronym,
|
||||
em abbr {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: __highlight__;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
samp,
|
||||
|
|
@ -312,6 +337,10 @@ sup {
|
|||
vertical-align: super;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/*____________ forms ____________*/
|
||||
|
||||
form {
|
||||
|
|
@ -321,11 +350,14 @@ form {
|
|||
}
|
||||
|
||||
fieldset {
|
||||
padding: 1em 1em 0;
|
||||
border: 1px solid __text_alt__;
|
||||
padding: .7em 1em 0;
|
||||
padding: .7rem 1rem; /* for those browsers understanding :last-child */
|
||||
border: 1px solid #999;
|
||||
}
|
||||
fieldset > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
legend {
|
||||
margin: 0;
|
||||
padding: 0 .1em;
|
||||
}
|
||||
|
||||
|
|
@ -339,30 +371,44 @@ textarea,
|
|||
button,
|
||||
select,
|
||||
optgroup,
|
||||
option {
|
||||
option,
|
||||
keygen,
|
||||
output,
|
||||
meter,
|
||||
progress {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
/* background-color destroys button look */
|
||||
line-height: 1;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
keygen,
|
||||
textarea {
|
||||
padding: .1em;
|
||||
}
|
||||
input[type=radio],
|
||||
input[type=checkbox],
|
||||
input[type=image],
|
||||
input.check {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=submit],
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
input.button,
|
||||
button {
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
padding: .1em .4em;
|
||||
}
|
||||
#IE6 .dokuwiki input.button,
|
||||
#IE6 .dokuwiki button,
|
||||
|
|
@ -378,6 +424,20 @@ button[readonly] {
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
button:focus,
|
||||
select:focus,
|
||||
keygen:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 5px #999;
|
||||
outline: 0;
|
||||
}
|
||||
input::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
103
css/print.css
103
css/print.css
|
|
@ -5,55 +5,64 @@
|
|||
*/
|
||||
|
||||
body {
|
||||
/*
|
||||
font: normal 12pt/1.2 serif;
|
||||
color: #000;
|
||||
font: normal 87.5%/1.3 Garamond, Baskerville, "Hoefler Text", "Nimbus Roman No9 L", serif;
|
||||
background-color: #fff;
|
||||
*/
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* hide certain sections */
|
||||
.a11y,
|
||||
div.notify, div.info, div.success, div.error,
|
||||
#dokuwiki__header .tools, #dokuwiki__aside,
|
||||
.dokuwiki .breadcrumbs, .dokuwiki .toc, #dw__toc, .dokuwiki .secedit,
|
||||
#dokuwiki__pagetools, #dokuwiki__footer {
|
||||
audio,
|
||||
video,
|
||||
div.notify,
|
||||
div.info,
|
||||
div.success,
|
||||
div.error,
|
||||
#dokuwiki__header .tools,
|
||||
#dokuwiki__aside,
|
||||
.dokuwiki .breadcrumbs,
|
||||
.dokuwiki .toc,
|
||||
#dw__toc,
|
||||
.dokuwiki .secedit,
|
||||
#dokuwiki__pagetools,
|
||||
#dokuwiki__footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dokuwiki h1,
|
||||
.dokuwiki h2,
|
||||
.dokuwiki h3,
|
||||
.dokuwiki h4,
|
||||
.dokuwiki h5,
|
||||
.dokuwiki caption,
|
||||
.dokuwiki legend {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
caption,
|
||||
legend {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dokuwiki ul {
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
}
|
||||
.dokuwiki ol {
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
.dokuwiki ol ol {
|
||||
ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
.dokuwiki ol ol ol {
|
||||
ol ol ol {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
.dokuwiki ol ol ol ol {
|
||||
ol ol ol ol {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
.dokuwiki ol ol ol ol ol {
|
||||
ol ol ol ol ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
/* undo icons */
|
||||
.dokuwiki a:link,
|
||||
.dokuwiki a:visited {
|
||||
text-decoration: underline;
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
border-bottom: 1pt dotted;
|
||||
color: #333;
|
||||
background-color: inherit;
|
||||
background-image: none;
|
||||
|
|
@ -69,52 +78,56 @@ a.mail:after {
|
|||
}
|
||||
|
||||
/* code blocks */
|
||||
.dokuwiki pre {
|
||||
pre {
|
||||
font-family: monospace;
|
||||
}
|
||||
.dokuwiki dl.code dt,
|
||||
.dokuwiki dl.file dt {
|
||||
dl.code dt,
|
||||
dl.file dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* images */
|
||||
.dokuwiki img {
|
||||
img {
|
||||
border-width: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dokuwiki img.media {
|
||||
img.media {
|
||||
margin: .2em 0;
|
||||
}
|
||||
.dokuwiki img.medialeft {
|
||||
img.medialeft {
|
||||
margin: .2em 1.5em .2em 0;
|
||||
}
|
||||
.dokuwiki img.mediaright {
|
||||
img.mediaright {
|
||||
margin: .2em 0 .2em 1.5em;
|
||||
}
|
||||
.dokuwiki img.mediacenter {
|
||||
img.mediacenter {
|
||||
margin: .2em auto;
|
||||
}
|
||||
|
||||
/* align table cells */
|
||||
.dokuwiki .leftalign {
|
||||
.leftalign {
|
||||
text-align: left;
|
||||
}
|
||||
.dokuwiki .centeralign {
|
||||
.centeralign {
|
||||
text-align: center;
|
||||
}
|
||||
.dokuwiki .rightalign {
|
||||
.rightalign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* underline */
|
||||
.dokuwiki em.u {
|
||||
em.u {
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dokuwiki em em.u {
|
||||
em em.u {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.clearer {
|
||||
clear: both;
|
||||
line-height: 0;
|
||||
|
|
@ -122,36 +135,36 @@ div.clearer {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dokuwiki blockquote {
|
||||
blockquote {
|
||||
padding: 0 10pt;
|
||||
margin: 0;
|
||||
border: solid #ccc;
|
||||
border-width: 0 0 0 2pt;
|
||||
}
|
||||
[dir=rtl] .dokuwiki blockquote {
|
||||
[dir=rtl] blockquote {
|
||||
border-width: 0 2pt 0 0;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
.dokuwiki table {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
border-spacing: 0;
|
||||
border: 1pt solid #ccc;
|
||||
}
|
||||
.dokuwiki th,
|
||||
.dokuwiki td {
|
||||
th,
|
||||
td {
|
||||
padding: 3pt 5pt;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
border: 1pt solid #666;
|
||||
text-align: left;
|
||||
}
|
||||
[dir=rtl] .dokuwiki th,
|
||||
[dir=rtl] .dokuwiki td {
|
||||
[dir=rtl] th,
|
||||
[dir=rtl] td {
|
||||
text-align: right;
|
||||
}
|
||||
.dokuwiki th {
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue