20daba820f
This removes the navigation menu on the right, leaving more space for the actual contents. Instead, there are now a few links/tabs at the top of the page. There's also a 'permalink' now. The previous navigation combined the selection of man page versions, translations and sections in a single menu. While handy in some cases, in most cases it was just slow and messy. It also didn't scale very well, some man pages have so many versions that it significantly affected the page load time. The 'locations' table has now also been moved into tab and is loaded asynchronously as well, for the same performance reasons. I had hoped that this new navigation would be much easier and more convenient, but honestly, it's still a mess. At least the new code is more maintainable, so perhaps I'll be able to make some incremental improvements in the future.
121 lines
6.2 KiB
CSS
121 lines
6.2 KiB
CSS
/* TODO: column-width is better done in Perl? (More like a column-count, then) */
|
|
|
|
* { margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; }
|
|
html { background: #333; padding: 0 10px; }
|
|
body { margin: 10px auto 50px auto; max-width: 1250px; border-collapse: separate; padding-bottom: 10px; border-radius: 10px; box-shadow: 0 10px 10px #def; }
|
|
h1 { font-size: 24px; font-weight: normal; color: #abc; }
|
|
h2 { font-size: 21px; margin-top: 40px; color: #468; font-weight: normal; clear: left }
|
|
h2 + i { font-size: 12px; }
|
|
h3 { font-size: 16px; margin-top: 20px; color: #468; font-weight: normal }
|
|
dd { margin-left: 15px; }
|
|
a { color: #048; }
|
|
a:hover { text-decoration: underline; color: #48B;}
|
|
code { font-family: "Lucida Console", Monospace; font-size: 12px; background-color: #f0f8ff }
|
|
.hidden { display: none!important; }
|
|
|
|
#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial"; background: url('images/gradients.png') repeat-x; border-radius: 8px 8px 0 0; }
|
|
#header a { color: #f8f8f8; text-decoration: none; font-weight: bold; }
|
|
#header a:hover { background: none; }
|
|
#header form { float: right; }
|
|
#header input[type=text] { color: #000; width: 260px; padding: 1px 2px 1px 15px; border-radius: 12px 0 0 12px; border: 1px solid #444;
|
|
box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; background: url('images/gradients.png') 0 -105px repeat-x; height: 15px; }
|
|
#header input[type=text]:hover, #header input[type=text]:focus { background: url('images/gradients.png') 0 -122px repeat-x; outline: none; }
|
|
#header input[type=submit] { height: 23px; width: 62px; background-image: url('images/search.png'); border: 0; margin: 0 0 0 -5px; cursor: pointer }
|
|
|
|
#body { padding: 10px 10px 20px 10px; background: #fff }
|
|
|
|
#systems a,
|
|
#charselect a { color: #048; font-family: "Verdana"; font-weight: normal; text-decoration: none; padding: 3px 5px; border-radius: 4px; }
|
|
|
|
#systems a:hover,
|
|
#charselect a:hover { background: #cde; }
|
|
|
|
i.grayedout { color: #aaa; font-size: 13px; }
|
|
|
|
#about { max-width: 900px }
|
|
#about dt { margin-top: 5px }
|
|
#about dl { margin-bottom: 5px }
|
|
#about p, #about dd { text-align: justify }
|
|
#about ul { padding: 5px 0 5px 20px }
|
|
|
|
#systems li { display: block; float: left; width: 300px; min-height: 70px; margin: 20px 10px; padding-left: 60px }
|
|
#systems span { display: block; margin-left: -55px; float: left; width: 50px; height: 50px; background-repeat: no-repeat; }
|
|
#systems b { font-size: 24px; display: block }
|
|
|
|
#charselect { float: right }
|
|
#charselect b { padding: 3px }
|
|
.pagination { display: block; margin: 10px; width: 100%; text-align: center }
|
|
|
|
#external { list-style-type: none }
|
|
|
|
#packages { margin: 20px 0; -webkit-column-width: 300px; -moz-column-width: 300px; column-width: 300px }
|
|
#packages li { display: block; }
|
|
#packages i { color: #aaa; font-size: 13px; }
|
|
#packages a { padding-right: 2px }
|
|
|
|
#searchres { margin: 20px 0; -webkit-column-width: 300px; -moz-column-width: 300px; column-width: 300px }
|
|
#searchres li { display: block; }
|
|
#searchres i { color: #aaa; font-size: 13px; }
|
|
#searchres a { padding-right: 2px }
|
|
|
|
#pkgversions { margin-top: 10px }
|
|
#pkgversions h2 { margin: 0 }
|
|
#pkgversions { float: left; padding: 0 10px; }
|
|
#pkgversions ul { margin: 10px 0; padding-right: 10px; border-right: 1px dashed #468 }
|
|
#pkgversions li { display: block; }
|
|
#pkgversions i { color: #aaa; font-size: 13px; }
|
|
#pkgversions a { padding-right: 2px }
|
|
|
|
#pkgmans { margin-top: 10px }
|
|
#pkgmans h2 { margin: 0 }
|
|
#pkgmans { float: left }
|
|
#pkgmans ul { margin: 10px 0 }
|
|
#pkgmans li { display: block; }
|
|
#pkgmans i { color: #aaa; font-size: 13px; }
|
|
|
|
#manbuttons h1 { display: inline; margin: 0 20px 0 0; vertical-align: middle }
|
|
#manbuttons ul { list-style-type: none; display: inline-block }
|
|
#manbuttons li { display: inline-block }
|
|
#manbuttons li a, #manbuttons li i { display: inline-block; outline: none; margin: 0 10px 0 0; padding: 5px 7px 8px 7px; text-decoration: none; border-top-left-radius: 7px 5px; border-top-left-radius: 7px 5px }
|
|
#manbuttons li i { font-style: normal; text-decoration: line-through; color: #aaa }
|
|
#manbuttons li a:hover, #manbuttons li a.active { background: #f0f8ff }
|
|
|
|
#closebtn { float: right; margin: -5px 0 -20px 0; text-decoration: none; outline: none; color: #036; font-weight: bold }
|
|
|
|
#manres { margin: 0 0 10px 0; width: 100%; padding: 10px; box-sizing: border-box; background: #f0f8ff; border-radius: 10px; border-left: 1px dashed #333; border-right: 1px dashed #333 }
|
|
#manres i { color: #aaa; font-size: 13px; margin-left: 7px }
|
|
#manres ul { list-style-type: none }
|
|
#manres ul a { outline: none; text-decoration: none }
|
|
#manres ul .oldver a { color: #aaa; font-size: 13px }
|
|
#manres div > ul { margin-top: 5px } /* System names */
|
|
#manres div > ul > li > a { color: #036; font-weight: bold } /* System names */
|
|
#manres div > ul > li > ul { margin-left: 15px } /* System versions */
|
|
#manres div > ul > li > ul > li > a { color: #000 } /* System versions */
|
|
#manres div > ul > li > ul > li > ul { margin-left: 15px } /* Package names */
|
|
#manres div > ul > li > ul > li > ul > li > a { color: #000 } /* Package names */
|
|
#manres table { margin: 10px 0; border-collapse: collapse; }
|
|
#manres td { padding: 1px 5px; font-size: 12px; }
|
|
#manres td + td { border-left: 1px solid #ccc }
|
|
#manres table { margin: 2px 10px; }
|
|
#manres table tr td:nth-child(1) { min-width: 80px }
|
|
|
|
#langselect, #sectionselect { padding-left: 50px }
|
|
#langselect a, #sectionselect a, #langselect i, #sectionselect i { padding: 3px 5px }
|
|
|
|
#contents { margin: 10px 0 0 0 }
|
|
|
|
#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0;
|
|
border-top: 1px solid #888; font-size: 13px; background: url('images/gradients.png') 0 -37px repeat-x; border-radius: 0 0 8px 8px; }
|
|
#footer a { font-size: 13px; padding: 0; color: #f8f8f8; }
|
|
#footer a:hover { background: none; }
|
|
|
|
pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px }
|
|
pre b { color: #369; font-weight: normal; }
|
|
|
|
#ds_box { position: absolute; top: 0; border: 1px solid $border$; border-top: none; background: #f0f8ff; cursor: pointer; z-index: 2 }
|
|
#ds_box b { padding: 2px 0 0 10px; font-size: 12px; }
|
|
#ds_box tr.selected { background: #fff; }
|
|
#ds_box table { width: 100% }
|
|
#ds_box td { border: 0; padding: 1px 5px }
|
|
#ds_box i { padding-left: 5px; color: #aaa; font-style: normal }
|
|
|