haiku/docs/welcome/Haiku-doc.css
Niels Sascha Reedijk 510780798f User documentation: synchronize welcome docs from the userguide translator
Change-Id: I2a2b01d87c35f22f688d51740812a28acf51e11d
2021-07-21 12:54:19 +01:00

452 lines
7.6 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* Copyright 2008-2017, Haiku. All rights reserved.
* Distributed under the terms of the MIT License.
*
* Authors:
* François Revol <revol@free.fr>
* Stephan Aßmus <superstippi@gmx.de>
* Braden Ewing <brewin@gmail.com>
* Humdinger <humdingerb@gmail.com>
* Vincent Duvert <vincent.duvert@free.fr>
* Augustin Cavalier <waddlesplash>
*/
html {
margin: 0;
padding: 0;
background: #FFF;
}
body {
color: #333333;
line-height: 1.5;
margin: 0;
padding: 0;
font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}
/* link colors and text decoration */
a:link {
font-weight: bold;
text-decoration: none;
color: #dc3c01;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #892601;
}
a:hover, a:active {
text-decoration: underline;
color: #ff4500;
}
/* Some headers act as anchors, don't give them a hover effect */
h2 a:hover, a:active {
text-decoration: none;
color: #0c3762;
}
h3 a:hover, a:active {
text-decoration: none;
color: #0c3762;
}
h4 a:hover, a:active {
text-decoration: none;
color: #0c3762;
}
h5 a:hover, a:active {
text-decoration: none;
color: #0c3762;
}
/* heading and navigation */
#banner {
position: relative;
left: 0;
top: 0;
height: 84px;
background: #eeeeee;
}
#banner div {
background: transparent url(images/logo.png) no-repeat scroll 10px 0;
height: 100%;
margin: 0 auto;
}
@media (min-width:768px) {
#banner {
min-width: 59em;
}
#banner div {
min-width: 59em;
max-width: 70em;
}
}
#banner span {
position: relative;
top: 51px;
left: 272px;
color: #333333;
text-transform: uppercase;
letter-spacing: 3px;
font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
font-weight: normal;
font-size: 16px;
}
div.nav {
position: relative;
left: 0;
top: 0;
background: #e0e0e0;
padding: 0;
}
@media (min-width:768px) {
div.nav {
min-width: 59em;
}
}
div.nav div.inner {
height: 100%;
margin: 0 auto;
text-align: right;
padding: 0;
}
@media (min-width:768px) {
div.nav div.inner {
min-width: 59em;
max-width: 70em;
}
}
div.nav div.inner span {
margin-right: 40px;
font-size: 0.8em;
}
div.nav div.inner span a.uplink {
font-weight: normal;
}
/* Language selection menu */
ul.lang-menu {
display: block;
text-align: left;
list-style-type: none;
font-size: 0.8em;
position: absolute;
margin: 0;
}
ul.lang-menu img {
border: 0;
padding-right: 5px;
}
ul.lang-menu li {
margin-left: 10px;
background: #e0e0e0;
display: none;
}
ul.lang-menu:hover li {
display: block;
}
ul.lang-menu li:hover {
background-color: #efefef;
}
ul.lang-menu li.now {
padding: 5px 5px 0 5px;
display: block;
background-color: inherit;
}
ul.lang-menu li.now span.dropdown-caret {
color: #aaaaaa;
position: relative;
top: -0.1em;
}
ul.lang-menu li a {
color: black;
text-decoration: none;
font-weight: normal;
display: block;
padding: 2px 5px 2px 5px;
}
/* main content */
#content {
margin: 0 auto;
}
#content img {
max-width: 100%;
}
@media (min-width:768px) {
#content {
min-width: 59em;
max-width: 70em;
}
}
#content > div {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 25px;
font-size: 0.9em;
}
@media (min-width:768px) {
#content > div {
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 50px;
}
}
/* contents box */
table.index {
margin: 0px 0px 30px 30px;
padding: 1px;
border-width: 1px;
border-style: dotted;
border-color: #e0e0e0;
float: right;
position: relative;
z-index: 10;
}
table.index tr.heading {
background-color: #e0e0e0;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
table.index tr.index {
background-color: #eeeeee;
}
table.index td {
padding: 5px 20px;
}
table.index a:link, table.index a:visited {
font-weight: normal;
text-decoration: none;
color: #dc3c01;
}
table.index a:hover, table.index a:active {
text-decoration: underline;
color: #ff4500;
}
/* Haiku User Guide styles and layout */
/* Rounded corner boxes */
/* Common declarations */
.box-info, .box-stop, .box-warning {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-style: dotted;
border-width: thin;
border-color: #dcdcdc;
padding: 10px 15px 10px 80px;
margin-bottom: 15px;
margin-top: 15px;
margin-left: 40px;
margin-right: 40px;
min-height: 42px;
}
.box-info {
background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat;
}
.box-warning {
background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat;
}
.box-stop {
background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat;
}
/* More layout and styles */
h1 {
font-size: 1.3em;
font-weight: bold;
color: #0c3762;
border-bottom: dotted thin #e0e0e0;
margin-bottom: 25px;
}
h2 {
font-size: 1.3em;
font-weight: normal;
color: #0c3762;
border-bottom: dotted thin #e0e0e0;
margin-top: 18px;
}
@media (min-width:768px) {
h2 {
margin-top: 35px;
}
}
h3 {
font-size: 1.2em;
font-weight: normal;
color: #0c3762;
border-bottom: dotted thin #e0e0e0;
margin-top: 30px;
}
h4 {
font-size: 1.1em;
font-weight: normal;
color: #0c3762;
margin-top: 30px;
}
h5 {
font-size: 1.0em;
font-weight: normal;
color: #0c3762;
margin-top: 30px;
}
p {
text-align: justify;
}
ol {
padding-left: 20px;
}
ul {
padding-left: 14px;
}
li {
line-height: 1.3;
}
td {
vertical-align: top;
}
td.onelinetop {
vertical-align: top;
white-space: nowrap;
}
tt {
background-color: #e2e2e2;
font-size: 1.0em;
font-family: monospace;
}
pre {
border-color: #0c3762;
border-style: dotted;
border-width: thin;
margin: 0em;
padding: 1.5em;
background-color: #f0f0f0;
}
pre.terminal { /* Terminal output*/
border-color: #ffb11f;
border-style: dotted;
border-width: thin;
margin: 0em;
padding: 1.5em;
background-color: #3a3a3a;
color: #ffb11f;
}
.menu { /* Menu */
font-size: 1.0em;
font-family: serif;
font-style: italic;
color: #24225e;
}
.button { /* Button */
font-size: 1.0em;
font-family: serif;
font-style: italic;
color: #33583c;
}
.app { /* GUI Application name */
font-size: 1.0em;
font-family: serif;
font-style: italic;
color: #5e1c1c;
}
.cli { /* Shell command or file */
background-color: #e8e8e8;
font-size: 0.9em;
font-family: monospace;
}
.path { /* File path */
background-color: #e8e8e8;
font-size: 0.9em;
font-family: monospace;
}
.key { /* Shortcut (separate with   */
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-color: #c7c7c7;
border-style: solid;
border-width: 1px;
padding: 0px 2px 0px 2px;
background-color: #e8e8e8;
font-family: serif;
font-variant: small-caps;
font-size: 0.8em;
}
/* printer only pretty stuff */
@media /*screen,*/print {
/* suggest page orientation */
@page { size: portrait; }
.noprint {
display: none;
}
/* hide header and nav bar */
#banner {
display:none;
}
div.nav {
display:none;
}
/* some links we want to print the url along with (CSS2) */
a.printurl:after {
content: " &lt;" attr(href) "&gt;";
font-weight: normal;
font-size: small;
}
/* override for those we really don't want to print */
a.noprinturl:after {
content: "";
}
/* for acronyms we want their definitions inlined at print time */
acronym[title]:after {
font-size: small;
content: " (" attr(title) ")";
font-style: italic;
}
/* and not have mozilla dotted underline */
acronym {
border: none;
}
pre.terminal { /* Terminal output black on white*/
background-color: #ffffff;
color: #000000;
}
#content {
margin: 0px;
padding: 0px;
}
html {
background: #FFF;
}
}