aa01365e60
This is where the old nav menu used to be. This involved shrinking the width of the locations/versions selector, but that never needed the full page width anyway. Unfortunately I suck at CSS so the nav menu and selector thing won't look too great on smaller screen sizes; but that's just a minor visual uglyness.
131 lines
6.7 KiB
CSS
131 lines
6.7 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,
|
|
.paginate a { color: #048; font-family: "Verdana"; font-weight: normal; text-decoration: none; padding: 3px 5px; border-radius: 4px; }
|
|
|
|
#charselect b,
|
|
.paginate b { font-family: "Verdana"; padding: 3px }
|
|
|
|
#systems a:hover,
|
|
#charselect a:hover,
|
|
.paginate a:hover { background: #cde; }
|
|
|
|
#external { list-style-type: none }
|
|
|
|
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 }
|
|
.pagination { display: block; margin: 10px; width: 100%; text-align: center }
|
|
|
|
#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 .paginate { margin: 10px 0 }
|
|
#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: 70%; 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 }
|
|
|
|
#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px; border-radius: 8px; }
|
|
#nav b { text-transform: uppercase; font-size: 13px }
|
|
#nav p { margin: 3px 5px 20px 5px }
|
|
#nav p a, #nav p i { padding: 3px 5px; font-size: 13px; font-style: normal; text-decoration: none;}
|
|
#nav p a:hover, #nav p i { background: #cde; border-radius: 5px }
|
|
#nav ul { list-style-type: none; margin: 3px 10px 0 20px }
|
|
#nav ul li a { overflow: hidden; margin-left: -10px; text-decoration: none; text-transform: capitalize }
|
|
|
|
#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, pre a { color: #369; font-weight: normal; text-decoration: none }
|
|
|
|
#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 }
|
|
|