Files
Nim/web/assets/style.css
Flaviu Tamas e36011a5a1 Improve website background quality
The old image was compressed with JPG and was improperly rendered anyway. The
background has been modified so that each dot lines up perfectly on pixel
boundaries. It's compressed with lossy PNG, which has the advantage of
preserving the quality of the dots.

There will be another PR to fix the background URL for the forum.
2015-02-19 20:38:11 -05:00

559 lines
20 KiB
CSS

* { cursor:default; }
a, a * { cursor:pointer; }
html { margin:0; overflow-x:auto; }
body {
overflow-x:hidden;
min-width:1030px;
margin:0;
font:13pt "arial";
background:#152534 url("images/bg.png") no-repeat center top;
color:rgba(0,0,0,.8); }
pre {
color:#fff;
margin:0;
padding:15px 10px;
font:10pt monospace;
line-height:14pt;
background:rgba(0,0,0,.4);
border-left:8px solid rgba(0,0,0,.3);
box-shadow:1px 2px 16px rgba(28,180,236,.4); }
pre, pre * { cursor:text; }
pre .cmt { color:rgb(255,229,106); }
pre .kwd { color:#43A8CF; font-weight:bold; }
pre .typ { color:#128B7D; font-weight:bold; }
pre .atr { color:#128B7D; font-weight:bold; font-style:italic; }
pre .def { color:#CAD6E4; font-weight:bold; }
pre .prg { color:#854D6A; font-weight:bold; font-style:italic; }
pre .val { color:#8AB647; }
pre .tab { border-left:1px dotted rgba(67,168,207,0.4); }
pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
.page pre { background:rgba(0,0,0,.8); }
.page pre > .Comment { color:rgb(255,229,106); }
.page pre > .Keyword { color:#43A8CF; font-weight:bold; }
.page pre > .StringLit,
.page pre > .DecNumber { color:#8AB647; }
.tall { height:100%; }
.pre { padding:1px 5px; font:11pt monospace; background:#96A9B7; border-radius:3px; }
.page-layout { margin:0 auto; width:1000px; }
.docs-layout { margin:0 40px; }
.talk-layout { margin:0 40px; }
.wide-layout { margin:0 auto; }
#head { height:100px; background:url("images/head.png") repeat-x bottom; }
#head.docs { margin-left:280px; background:rgba(0,0,0,.25) url("images/head-fade.png") no-repeat right top; }
#head > div { position:relative }
#head-logo {
position:absolute;
left:-390px;
top:0;
width:917px;
height:268px;
pointer-events:none;
background:url("images/logo.png") no-repeat; }
#head.docs #head-logo { left:-381px; position:fixed; }
#head.forum #head-logo { left:-370px; }
#head-logo-link {
position:absolute;
display:block;
top:10px;
left:10px;
width:236px;
height:85px; }
#head.docs #head-logo-link { left:-260px; }
#head.forum #head-logo-link { left:30px; }
#head-links { position:absolute; right:0; bottom:13px; }
#head.docs #head-links,
#head.forum #head-links { right:20px; }
#head-links > a {
display:block;
float:left;
padding:10px 25px 25px 25px;
color:rgba(255,255,255,.5);
font-size:14pt;
text-decoration:none;
letter-spacing:1px;
background:url("images/head-link.png") no-repeat center bottom;
transition:
color 0.3s ease-in-out,
text-shadow 0.4s ease-in-out; }
#head-links > a:hover,
#head-links > a.active {
color:#1cb3ec;
text-shadow:0 0 4px rgba(28,179,236,.8);
background-image:url("images/head-link_hover.png"); }
#head-banner { width:200px; height:100px; background:#000; }
#neck { z-index:0; height:40px; }
#neck.home { height:370px; }
#neck > div { position:relative }
#glow-arrow {
position:absolute;
top:-9px;
left:0;
right:-16px;
height:48px;
background:url("images/glow-arrow.png") no-repeat right; }
#glow-arrow.docs { left:280px; }
#glow-line-vert {
position:fixed;
top:100px;
left:280px;
width:3px;
height:844px;
background:url("images/glow-line-vert.png") no-repeat; }
#slideshow { position:absolute; top:10px; left:10px; width:700px; height: 1000px; }
#slideshow > div {
position:absolute;
margin:30px 0 0 10px;
visibility:hidden;
opacity:0;
transition:
visibility 0s linear 1s,
opacity 1s ease-in-out; }
#slideshow > div.active { visibility:visible; opacity:1; transition-delay:0s; }
#slideshow > div.init { transition-delay:0s; }
#slideshow-nav { z-index:3; position:absolute; top:110px;; right:-12px; }
#slideshow-nav > div { margin:5px 0; width:23px; height:23px; background:url("images/slideshow-nav.png") no-repeat; }
#slideshow-nav > div:hover { background-image:url("images/slideshow-nav_active.png"); opacity:0.5; }
#slideshow-nav > div.active { background-image:url("images/slideshow-nav_active.png"); opacity:1; }
#slide0 { float:left; width:680px; font:10pt monospace; }
#slide0 > div:first-child { margin:0 40px 0 0; }
#slide0 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
#slide0 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78); font:13pt "arial"; }
#slide1 > div { float:left; width:320px; font:10pt monospace; }
#slide1 > div:first-child { margin:0 40px 0 0; }
#slide1 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
#slide2 > div { float:left; width:320px; font:10pt monospace; }
#slide2 > div:first-child { margin:0 40px 0 0; }
#slide2 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
#slide2 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78); font:13pt "arial"; }
/* back when slide1 was the quote:
#slide1 { margin-top:50px; }
#slide1 > p {
padding:40px 20px 0 20px;
font-style:italic;
color:rgba(162,198,223,.78);
letter-spacing:1px;
line-height:25pt;
background:url("images/quotes.png") top left no-repeat; }
#slide1 > div {
float:right;
margin-right:40px;
font-style:italic;
font-weight:bold;
color:rgba(93,155,199,.44); }
*/
#sidebar {
z-index:2;
position:absolute;
top:5px; right:0;
width:275px;
height:726px;
padding:210px 0 0 0;
background:url("images/sidebar.png") no-repeat; }
#sidebar > h3 { margin:0 30px 0 30px; color:rgba(255,255,255,.5); }
#sidebar > h3.blue { color:rgba(28,180,236,.5); }
#sidebar-links,
#sidebar-news {
margin:10px 30px 50px 30px;
padding:10px 0;
background:rgba(0,0,0,.6); }
#sidebar-links { box-shadow:1px 2px 12px rgba(255,255,255,.4); }
#sidebar-news { box-shadow:1px 2px 12px rgba(28,180,236,.6); }
#sidebar-links > a {
display:block;
margin-left:15px;
padding:12px 20px 12px 45px;
font-weight:bold;
text-decoration:none;
letter-spacing:1px;
color:rgba(255,255,255,.4);
transition:
color 0.1s ease-in-out,
text-shadow 0.2s ease-in-out; }
#sidebar-news > a { transition: color 0.3s ease-in-out; }
#sidebar-news > a > h4 { transition: color 0.1s ease-in-out, text-shadow 0.2s ease-in-out; }
#sidebar-links > a:hover { color:#fff; text-shadow:0 0 6px #fff; }
#sidebar-news > a { display:block; padding:15px; color:rgba(255,255,255,.4); text-decoration:none; }
#sidebar-news > a > h4 { margin:0 0 5px 0; color:rgba(28,180,236,.5); }
#sidebar-news > a:hover > h4 { margin:0 0 5px 0; color:rgba(28,180,236,.8); text-shadow:0 0 6px rgba(28,180,236,.6); }
#sidebar-news > a:hover { color:rgba(255,255,255,1); }
#sidebar-news > a.blue { color:rgba(28,180,236,.5); font-weight:bold; }
#sidebar-news > a.blue:hover { color:#fff; }
#link_forum { background:url("images/more-links_forum.png") no-repeat left center; }
#link_github { background:url("images/more-links_github.png") no-repeat left center; }
#link_editors { background:url("images/more-links_editors.png") no-repeat left center; }
#link_aporia { background:url("images/more-links_editors.png") no-repeat left center; }
#link_nimbuild { background:url("images/more-links_nimbuild.png") no-repeat left center; }
#overview-bg {
position:fixed;
top:0;
bottom:0;
left:0;
width:280px;
background:rgba(0,0,0,0.25); }
#overview {
z-index:3;
position:fixed;
overflow:auto;
top:115px;
bottom:20px;
left:20px;
width:245px; }
#overview::-webkit-scrollbar { width:5px; }
#overview::-webkit-scrollbar-track { border-radius:2px; background:rgba(255,255,255,.03); }
#overview::-webkit-scrollbar-thumb { border-radius:2px; background:rgba(28,179,236,.5); }
#overview > div { overflow:auto; margin-bottom:40px; }
#overview a {
display:block;
padding:0 10px;
margin:2px 5px 2px 0;
color:rgba(255,255,255,.6);
background:rgba(255,255,255,0.03);
border-radius:2px;
letter-spacing:1px;
text-decoration:none; }
#overview a:hover { color:#fff; background:rgba(255,255,255,0.05); }
#overview > .types a { border-left:2px solid rgba(28,179,236,.4); }
#overview > .procs a { border-left:2px solid rgba(255,223,53,.4); }
#overview > .iters a { border-left:2px solid rgba(255,134,53,.4); }
#overview > div > h4 {
margin:0 5px 10px 0;
padding:5px 10px;
letter-spacing:1px;
color:#fff;
border-left:2px solid #fff;
border-radius:2px;
background:rgba(255,255,255,0.1); }
#overview > .types h4 { color:#1cb3ec; border-color:#1cb3ec; }
#overview > .procs h4 { color:#ffdf35; border-color:#ffdf35; }
#overview > .iters h4 { color:#ff8635; border-color:#ff8635; }
#overview h5 {
color:rgba(28,179,236,.6);
margin:10px 0 5px 0;
padding:5px 5px;
letter-spacing:1px; }
#body { z-index:1; position:relative; background:rgba(220,231,248,0.8); }
#body.docs { margin:0 40px 20px 320px; }
#body.forum { margin:0 40px 20px 40px; }
#body-border {
position:absolute;
top:-25px;
left:0;
right:0;
height:35px;
background:rgba(0,0,0,.25); }
#body-border-left {
position:absolute;
left:-25px;
top:-25px;
bottom:-25px;
width:35px;
background:rgba(0,0,0,.25); }
#body-border-right {
position:absolute;
right:-25px;
top:-25px;
bottom:-25px;
width:35px;
background:rgba(0,0,0,.25); }
#body-border-bottom {
position:absolute;
left:10px;
right:10px;
bottom:-25px;
height:35px;
background:rgba(0,0,0,.25); }
#body.docs #body-border,
#body.forum #body-border { left:10px; right:10px; }
#glow-line {
position:absolute;
top:-27px;
left:100px;
right:-25px;
height:3px;
background:url("images/glow-line.png") no-repeat left; }
#glow-line-bottom {
position:absolute;
bottom:-27px;
left:-25px;
right:100px;
height:3px;
background:url("images/glow-line2.png") no-repeat right; }
#content { padding:40px 0; line-height:150%; }
#content.page { width:680px; min-height:800px; padding-left:20px; }
#content h1 { font-size:20pt; letter-spacing:1px; color:rgba(0,0,0,.75); }
#content h2 { font-size:16pt; letter-spacing:1px; color:rgba(0,0,0,.7); margin-top:40px; }
#content p { text-align:justify; }
#content a { color:#0E65D1; text-decoration:none; }
#content a:hover { text-decoration:underline; }
#content ul { padding-left:20px; }
#content li { margin-bottom:10px; text-align:justify; }
#body.docs #content > div { margin-top:40px; padding-top:40px; border-top:1px dashed rgba(0,0,0,.25); }
#body.docs #content > div:first-child { margin-top:0; padding-top:0; border:none; }
#body.docs #content > div > h3 {
color:#fff;
margin:0 0 10px 0;
padding:10px 20px;
letter-spacing:1px;
border-left:8px solid #fff;
border-radius:3px;
background:rgba(0,0,0,.7);
box-shadow:1px 3px 12px rgba(0,0,0,.4); }
#body.docs #content > #types-wrap > h3 { color:#1cb3ec; border-color:#1cb3ec; }
#body.docs #content > #procs-wrap > h3 { color:#ffdf35; border-color:#ffdf35; }
#body.docs #content > #iters-wrap > h3 { color:#ff8635; border-color:#ff8635; }
#body.docs #content > div > div > div {
overflow:auto;
margin:10px 0;
border-left:8px solid #fff;
border-radius:3px;
background:rgba(0,0,0,.1); }
#body.docs #content > #types-wrap > div > div { border-color:rgba(28,179,236,.5); }
#body.docs #content > #procs-wrap > div > div { border-color:rgba(255,223,53,.5); }
#body.docs #content > #iters-wrap > div > div { border-color:rgba(255,134,53,.5); }
#body.docs #content > #procs-wrap > div > div.overload-head { margin-bottom:0; }
#body.docs #content > #procs-wrap > div > div.overload-tail { margin-top:0; border-top:1px dashed rgba(255,223,53,.5); }
#body.docs #content > #procs-wrap > div > div.overload { margin-top:0; margin-bottom:0; border-top:1px dashed rgba(255,223,53,.5); }
#body.docs #content > #iters-wrap > div > div.overload-head { margin-bottom:0; }
#body.docs #content > #iters-wrap > div > div.overload-tail { margin-top:0; border-top:1px dashed rgba(255,134,53,.5); }
#body.docs #content > #iters-wrap > div > div.overload { margin-top:0; margin-bottom:0; border-top:1px dashed rgba(255,134,53,.5); }
#body.docs #content > div > div > p { margin:20px 10px 10px 10px; }
#body.docs #content > div > div > div > div { float:left; }
#body.docs #content > div > div > div > div.head { width:60%; }
#body.docs #content > div > div > div > div.data { width:40%; }
#body.docs #content > h1 > .symbol {
padding:0 8px;
border-radius:5px;
background:rgba(206,218,233,.4); }
#body.docs #content > div > div > div > div.head > .sign {
margin:0 10px 5px 10px;
padding:10px 10px 0 10px;
font-weight:bold;
border-bottom:1px dashed rgba(0,0,0,.25); }
#body.docs #content > div > div > div > div.head > .desc {
padding:0 20px 10px 20px;
color:rgba(0,0,0,.75); }
#body.docs #content > div > #types > div > div.head > .sign > .symbol {
padding:0 5px;
border-radius:3px;
background:rgba(28,179,236,.4); }
#body.docs #content > div > #procs > div > div.head > .sign > .symbol {
padding:0 5px;
border-radius:3px;
background:rgba(255,223,53,.3); }
#body.docs #content > div > #iters > div > div.head > .sign > .symbol {
padding:0 5px;
border-radius:3px;
background:rgba(255,134,53,.3); }
#body.docs #content > div > div > div > div.data > div {
margin:0 20px 5px 10px;
padding:10px 0 0 10px;
font-style:italic;
color:rgba(0,0,0,.6);
border-bottom:1px dashed rgba(0,0,0,.25); }
#body.docs #content > div > div > div > div.data > ul { margin:0; padding:0 10px; }
#body.docs #content > div > div > div > div.data > ul:last-child { margin-bottom:5px; padding-bottom:10px; }
#body.docs #content > div > div > div > div.data > ul .symbol { padding:0 5px; border-radius:3px; background:rgba(23,192,23,.25); }
#body.docs #content > div > div > div > div.data > ul.pragmas .symbol { background:rgba(106,50,145,.25); }
#body.docs #content > div > div > div > div.data > ul > li { margin:0; padding:0 10px; list-style:none; }
#body.docs #content pre {
overflow:auto;
margin:10px 0;
padding:15px 10px;
font-size:10pt;
font-style:normal;
line-height:14pt;
background:rgba(0,0,0,.75);
border-left:8px solid rgba(0,0,0,.3); }
#docs-sort { float:right; font-size:75%; }
#docs-sort > a {
cursor:default;
margin:0 0 0 10px;
padding:2px 10px;
border-radius:5px;
color:rgba(0,0,0,.25);
background:rgba(0,0,0,.1);
box-shadow:inset 0 1px 8px rgba(0,0,0,.4); }
#docs-sort > a:hover,
#docs-sort > a.active { color:#000; background:rgba(0,0,0,.2); }
#talk-heads { overflow:auto; margin:0 8px 0 8px; }
#talk-heads > div { float:left; font-size:120%; font-weight:bold; }
#talk-heads > .topic { width:55%; }
#talk-heads > .detail { width:15%; }
#talk-heads > .author { width:15%; }
#talk-heads > .reply { width:15%; }
#talk-heads > div > div { margin:0 10px 10px 10px; padding:0 10px 10px 10px; border-bottom:1px dashed rgba(0,0,0,0.4); }
#talk-heads > .topic > div { margin-left:0; }
#talk-heads > .author > div { margin-right:0; }
#talk-thread > div,
#talk-threads > div {
position:relative;
margin:5px 0;
overflow:auto;
border-radius:3px;
border:8px solid rgba(0,0,0,.8);
border-top:none;
border-bottom:none;
background:rgba(0,0,0,0.1); }
#talk-thread > div:nth-child(odd) { background:rgba(255,255,255,0.1); }
#talk-threads > div:nth-child(odd) { background:rgba(0,0,0,0.2); }
#talk-thread > div > div,
#talk-threads > div > div { float:left; }
#talk-thread > div > div > div,
#talk-threads > div > div > div { margin:10px 20px; }
#talk-threads > div > .topic { width:55%; }
#talk-threads > div > .reply { width:15%; overflow:hidden; }
#talk-threads > div > .detail { width:15%; overflow:hidden; }
#talk-thread > div > .author,
#talk-threads > div > .author {
position:absolute;
right:0;
top:0;
bottom:0;
width:15%;
overflow:hidden;
background:rgba(0,0,0,0.8); }
#talk-thread > div > .author a,
#talk-threads > div > .author a { color:#1cb3ec !important; }
#talk-thread > div > .author a:hover,
#talk-threads > div > .author a:hover { color:#fff !important; }
#talk-threads > div > .topic .pages { float:right; }
#talk-threads > div > .topic > div > a { font-weight:bold; }
#talk-threads > div > .detail > div { float:left; margin:0; }
#talk-threads > div > .detail > div > div { margin-left:20px; padding:10px 10px 10px 22px; }
#talk-threads > div > .detail > div { width:50%; }
#talk-threads > div > .detail > div:first-child > div { background:url("images/forum-views.png") no-repeat left; }
#talk-threads > div > .detail > div:last-child > div { background:url("images/forum-posts.png") no-repeat left; }
#talk-thread > div { margin:20px 0; min-height:150px; box-shadow:1px 3px 12px rgba(0,0,0,.4) }
#talk-thread > div > .author > div > .avatar { margin-top:20px; }
#talk-thread > div > .author > div > .avatar > img { box-shadow:0 0 12px #1cb3ec; }
#talk-thread > div > .author > div > .name { }
#talk-thread > div > .topic { width:85%; padding-bottom:10px; }
#talk-thread > div > .topic pre {
overflow:auto;
margin:0;
padding:15px 10px;
font-size:10pt;
font-style:normal;
line-height:14pt;
background:rgba(0,0,0,.75);
border-left:8px solid rgba(0,0,0,.3); }
#talk-head,
#talk-info {
overflow:auto;
border-radius:3px;
border:8px solid rgba(0,0,0,.2);
border-top:none;
border-bottom:none;
background:rgba(0,0,0,0.1); }
#talk-head { margin-bottom:20px; }
#talk-info { margin-top:20px; }
#talk-head > div,
#talk-info > div { float:left; }
#talk-head > .info,
#talk-info > .info { width:85%; }
#talk-head > .user,
#talk-info > .user { width:15%; background:rgba(0,0,0,.2); }
#talk-info > .user > div > .reply { font-weight:bold; padding-left:22px; background:url("images/forum-reply.png") no-repeat left; }
#talk-head > div > div,
#talk-info > div > div { padding:5px 20px; }
#talk-head > .detail > div { float:left; margin:0; }
#talk-head > .detail > div > div { padding-left:22px; }
#talk-head > .detail > div:first-child > div { background:url("images/forum-views.png") no-repeat left; }
#talk-head > .detail > div:last-child > div { background:url("images/forum-posts.png") no-repeat left; }
#talk-nav { margin:20px 8px 0 8px; padding-top:10px; border-top:1px dashed rgba(0,0,0,0.4); text-align:center; }
#talk-nav > a.active { text-decoration:underline !important; }
.standout {
padding:5px 30px;
margin-bottom:20px;
border:8px solid rgba(0,0,0,.8);
border-right-width:16px;
border-top-width:0;
border-bottom-width:0;
border-radius:3px;
background:rgba(0,0,0,0.1);
box-shadow:1px 3px 12px rgba(0,0,0,.4); }
.standout h2 { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.8); }
.standout li { margin:0 !important; padding-top:10px; border-top:1px dashed rgba(0,0,0,.2); }
.standout ul { padding-bottom:5px; }
.standout .tools ul { list-style:url("images/docs-tools.png"); }
.standout .libraries ul { list-style:url("images/docs-libraries.png"); }
.standout .internals ul { list-style:url("images/docs-internals.png"); }
.standout .tutorials ul { list-style:url("images/docs-tutorials.png"); }
.standout .examples ul { list-style:url("images/docs-examples.png"); }
.standout .articles ul { list-style:url("images/docs-articles.png"); }
.standout li:first-child { padding-top:0; border-top:none; }
.standout li p { margin:0 0 10px 0 !important; line-height:130%; }
.standout li p > a { font-weight:bold; }
.forum-user-info,
.forum-user-info * { cursor:help }
#foot { height:150px; position:relative; top:-10px; letter-spacing:1px; }
#foot.home { background:url("images/foot.png") repeat-x top; height:200px; }
#foot.docs { margin-left:320px; margin-right:40px; }
#foot.forum { margin-left:40px; margin-right:40px; }
#foot > div { position:relative; }
#foot.home > div { width:960px; }
#foot h4 { font-size:11pt; color:rgba(255,255,255,.4); margin:40px 0 6px 0; }
#foot a:hover { color:#fff; }
#foot-links { float:left; }
#foot-links > div { float:left; padding:0 40px 0 0; line-height:120%; }
#foot-links a { display:block; font-size:10pt; color:rgba(255,255,255,.3); text-decoration:none; }
#foot-legal { float:right; font-size:10pt; color:rgba(255,255,255,.3); line-height:150%; text-align:right; }
#foot-legal a { color:inherit; text-decoration:none; }
#foot-legal > h4 > a { color:inherit; }
#body .docutils th {
border-bottom: 2px solid #1A1A1A;
font-weight: normal;
padding: 8px; }
#body table.docutils {
border-collapse: collapse;
text-align: left;
border-spacing: 0px; }