docs/welcome/Haiku-doc.css

   1 /*
   2  * Copyright 2008-2017, Haiku. All rights reserved.
   3  * Distributed under the terms of the MIT License.
   4  *
   5  * Authors:
   6  *              François Revol <revol@free.fr>
   7  *              Stephan Aßmus <superstippi@gmx.de>
   8  *              Braden Ewing <brewin@gmail.com>
   9  *              Humdinger <humdingerb@gmail.com>
  10  *              Vincent Duvert <vincent.duvert@free.fr>
  11  *              Augustin Cavalier <waddlesplash>
  12  */
  13
  14 html {
  15         margin: 0;
  16         padding: 0;
  17         background: #FFF;
  18 }
  19
  20 body {
  21         color: #333333;
  22         line-height: 1.5;
  23         margin: 0;
  24         padding: 0;
  25         font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  26 }
  27
  28 /* link colors and text decoration */
  29
  30 a:link {
  31         font-weight: bold;
  32         text-decoration: none;
  33         color: #dc3c01;
  34 }
  35 a:visited {
  36         font-weight: bold;
  37         text-decoration: none;
  38         color: #892601;
  39 }
  40 a:hover, a:active {
  41         text-decoration: underline;
  42         color: #ff4500;
  43 }
  44
  45 /* Some headers act as anchors, don't give them a hover effect */
  46
  47 h2 a:hover, a:active {
  48         text-decoration: none;
  49         color: #0c3762;
  50 }
  51 h3 a:hover, a:active {
  52         text-decoration: none;
  53         color: #0c3762;
  54 }
  55 h4 a:hover, a:active {
  56         text-decoration: none;
  57         color: #0c3762;
  58 }
  59 h5 a:hover, a:active {
  60         text-decoration: none;
  61         color: #0c3762;
  62 }
  63
  64 /* heading and navigation */
  65
  66 #banner {
  67         position: relative;
  68         left: 0;
  69         top: 0;
  70         height: 84px;
  71         background: #eeeeee;
  72 }
  73
  74 #banner div {
  75         background: transparent url(images/logo.png) no-repeat scroll 10px 0;
  76         height: 100%;
  77         margin: 0 auto;
  78 }
  79 @media (min-width:768px) {
  80         #banner {
  81                 min-width: 59em;
  82         }
  83         #banner div {
  84                 min-width: 59em;
  85                 max-width: 70em;
  86         }
  87 }
  88
  89 #banner span {
  90         position: relative;
  91         top: 51px;
  92         left: 272px;
  93         color: #333333;
  94         text-transform: uppercase;
  95         letter-spacing: 3px;
  96         font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
  97         font-weight: normal;
  98         font-size: 16px;
  99 }
 100
 101 div.nav {
 102         position: relative;
 103         left: 0;
 104         top: 0;
 105         background: #e0e0e0;
 106         padding: 0;
 107 }
 108 @media (min-width:768px) {
 109         div.nav {
 110                 min-width: 59em;
 111         }
 112 }
 113
 114 div.nav div.inner {
 115         height: 100%;
 116         margin: 0 auto;
 117         text-align: right;
 118         padding: 0;
 119 }
 120 @media (min-width:768px) {
 121         div.nav div.inner {
 122                 min-width: 59em;
 123                 max-width: 70em;
 124         }
 125 }
 126
 127 div.nav div.inner span {
 128         margin-right: 40px;
 129         font-size: 0.8em;
 130 }
 131
 132 div.nav div.inner span a.uplink {
 133         font-weight: normal;
 134 }
 135
 136 /* Language selection menu */
 137
 138 ul.lang-menu {
 139         display: block;
 140         text-align: left;
 141         list-style-type: none;
 142         font-size: 0.8em;
 143         position: absolute;
 144         margin: 0;
 145 }
 146
 147 ul.lang-menu img {
 148         border: 0;
 149         padding-right: 5px;
 150 }
 151
 152 ul.lang-menu li {
 153         margin-left: 10px;
 154         background: #e0e0e0;
 155         display: none;
 156 }
 157
 158 ul.lang-menu:hover li {
 159         display: block;
 160 }
 161
 162 ul.lang-menu li:hover {
 163         background-color: #efefef;
 164 }
 165
 166 ul.lang-menu li.now {
 167         padding: 5px 5px 0 5px;
 168         display: block;
 169         background-color: inherit;
 170 }
 171
 172 ul.lang-menu li a {
 173         color: black;
 174         text-decoration: none;
 175         font-weight: normal;
 176         display: block;
 177         padding: 2px 5px 2px 5px;
 178 }
 179
 180 /* main content */
 181 #content {
 182         margin: 0 auto;
 183 }
 184 #content img {
 185         max-width: 100%;
 186 }
 187 @media (min-width:768px) {
 188         #content {
 189                 min-width: 59em;
 190                 max-width: 70em;
 191         }
 192 }
 193
 194 #content > div {
 195         margin-top: 10px;
 196         margin-left: 20px;
 197         margin-right: 20px;
 198         margin-bottom: 25px;
 199         font-size: 0.9em;
 200 }
 201 @media (min-width:768px) {
 202         #content > div {
 203                 margin-top: 30px;
 204                 margin-left: 40px;
 205                 margin-right: 40px;
 206                 margin-bottom: 50px;
 207         }
 208 }
 209
 210 /* contents box */
 211
 212 table.index {
 213         margin: 0px 0px 30px 30px;
 214         padding: 1px;
 215         border-width: 1px;
 216         border-style: dotted;
 217         border-color: #e0e0e0;
 218         float:right;
 219 }
 220 table.index tr.heading {
 221         background-color: #e0e0e0;
 222         text-align: center;
 223         font-weight: bold;
 224         font-size: 1.1em;
 225 }
 226 table.index tr.index {
 227         background-color: #eeeeee;
 228 }
 229 table.index td {
 230         padding: 5px 20px;
 231 }
 232
 233 table.index a:link, table.index a:visited {
 234         font-weight: normal;
 235         text-decoration: none;
 236         color: #dc3c01;
 237 }
 238 table.index a:hover, table.index a:active {
 239         text-decoration: underline;
 240         color: #ff4500;
 241 }
 242
 243
 244 /* Haiku User Guide styles and layout */
 245
 246 /* Rounded corner boxes */
 247 /* Common declarations */
 248 .box-info, .box-stop, .box-warning {
 249         -webkit-border-radius: 10px;
 250         -khtml-border-radius: 10px;
 251         -moz-border-radius: 10px;
 252         border-radius: 10px;
 253         border-style: dotted;
 254         border-width: thin;
 255         border-color: #dcdcdc;
 256         padding: 10px 15px 10px 80px;
 257         margin-bottom: 15px;
 258         margin-top: 15px;
 259         margin-left: 40px;
 260         margin-right: 40px;
 261         min-height: 42px;
 262 }
 263 .box-info {
 264         background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat;
 265 }
 266 .box-warning {
 267         background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat;
 268 }
 269 .box-stop {
 270         background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat;
 271 }
 272
 273 /* More layout and styles */
 274 h1 {
 275         font-size: 1.3em;
 276         font-weight: bold;
 277         color: #0c3762;
 278         border-bottom: dotted thin #e0e0e0;
 279         margin-bottom: 25px;
 280 }
 281 h2 {
 282         font-size: 1.3em;
 283         font-weight: normal;
 284         color: #0c3762;
 285         border-bottom: dotted thin #e0e0e0;
 286         margin-top: 18px;
 287 }
 288 @media (min-width:768px) {
 289         h2 {
 290                 margin-top: 35px;
 291         }
 292 }
 293 h3 {
 294         font-size: 1.2em;
 295         font-weight: normal;
 296         color: #0c3762;
 297         border-bottom: dotted thin #e0e0e0;
 298         margin-top: 30px;
 299 }
 300 h4 {
 301         font-size: 1.1em;
 302         font-weight: normal;
 303         color: #0c3762;
 304         margin-top: 30px;
 305 }
 306 h5 {
 307         font-size: 1.0em;
 308         font-weight: normal;
 309         color: #0c3762;
 310         margin-top: 30px;
 311 }
 312 p {
 313         text-align: justify;
 314 }
 315 ol {
 316         padding-left: 20px;
 317 }
 318 ul {
 319         padding-left: 14px;
 320 }
 321 li {
 322         line-height: 1.3;
 323 }
 324 td {
 325         vertical-align: top;
 326 }
 327 td.onelinetop {
 328         vertical-align: top;
 329         white-space: nowrap;
 330 }
 331 tt {
 332         background-color: #e2e2e2;
 333         font-size: 1.0em;
 334         font-family: monospace;
 335 }
 336 pre {
 337         border-color: #0c3762;
 338         border-style: dotted;
 339         border-width: thin;
 340         margin: 0em;
 341         padding: 1.5em;
 342         background-color: #f0f0f0;
 343 }
 344 pre.terminal {                  /* Terminal output*/
 345         border-color: #ffb11f;
 346         border-style: dotted;
 347         border-width: thin;
 348         margin: 0em;
 349         padding: 1.5em;
 350         background-color: #3a3a3a;
 351         color: #ffb11f;
 352 }
 353 .menu {                         /* Menu */
 354         font-size: 1.0em;
 355         font-family: serif;
 356         font-style: italic;
 357         color: #24225e;
 358 }
 359 .button {                       /* Button */
 360         font-size: 1.0em;
 361         font-family: serif;
 362         font-style: italic;
 363         color: #33583c;
 364 }
 365 .app {                          /* GUI Application name */
 366         font-size: 1.0em;
 367         font-family: serif;
 368         font-style: italic;
 369         color: #5e1c1c;
 370 }
 371 .cli {                          /* Shell command or file */
 372         background-color: #e8e8e8;
 373         font-size: 0.9em;
 374         font-family: monospace;
 375 }
 376 .path {                         /* File path */
 377         background-color: #e8e8e8;
 378         font-size: 0.9em;
 379         font-family: monospace;
 380 }
 381 .key {                          /* Shortcut (separate with   */
 382         -webkit-border-radius: 3px;
 383         -khtml-border-radius: 3px;
 384         -moz-border-radius: 3px;
 385         border-radius: 3px;
 386         border-color: #c7c7c7;
 387         border-style: solid;
 388         border-width: 1px;
 389         padding: 0px 2px 0px 2px;
 390         background-color: #e8e8e8;
 391         font-family: serif;
 392         font-variant: small-caps;
 393         font-size: 0.8em;
 394 }
 395
 396 /* printer only pretty stuff */
 397 @media /*screen,*/print {
 398         /* suggest page orientation */
 399         @page { size: portrait; }
 400         .noprint {
 401                 display: none;
 402         }
 403         /* hide header and nav bar */
 404         #banner {
 405                 display:none;
 406         }
 407
 408         div.nav {
 409                 display:none;
 410         }
 411
 412         /* some links we want to print the url along with (CSS2) */
 413         a.printurl:after {
 414                 content: " &lt;" attr(href) "&gt;";
 415                 font-weight: normal;
 416                 font-size: small;
 417         }
 418         /* override for those we really don't want to print */
 419         a.noprinturl:after {
 420                 content: "";
 421         }
 422         /* for acronyms we want their definitions inlined at print time */
 423         acronym[title]:after {
 424                 font-size: small;
 425                 content: " (" attr(title) ")";
 426                 font-style: italic;
 427         }
 428         /* and not have mozilla dotted underline */
 429         acronym {
 430                 border: none;
 431         }
 432         pre.terminal {                  /* Terminal output black on white*/
 433                 background-color: #ffffff;
 434                 color: #000000;
 435         }
 436         #content {
 437                 margin: 0px;
 438                 padding: 0px;
 439         }
 440         html {
 441                 background: #FFF;
 442         }
 443 }