pinout.vvzero.com/resources/pinout.css

421 lines
7.4 KiB
CSS

* {margin:0;padding:0;text-decoration:none;}
body {font-family:'Sanchez', sans-serif;}
pre {font-family:'Ubuntu Mono', sans-serif;font-size:13px;}
ul.bottom a {color:#E9E5D2;}
ul.top a {color:#063541;}
table {margin:20px 0;border-collapse:collapse;}
table td, table th {border:1px solid #073642;padding:5px;}
table th {background:#073642;color:#EBE6D3;}
table * {text-align:left;font-size:13px;}
table.pin-functions {width:100%;}
table.pin-functions td {width:16.6666%;}
h2 {font-size:18px;margin-top:20px;}
.drop-down {
float: right;
display: block;
width: 250px;
border:2px solid #D6264E;
margin-left:20px;
}
.overlay {
margin: 0;
padding: 0;
list-style: none;
display:none;
background:rgba(255,255,255,0.95);
padding:10px 0px;
clear:both;
}
.overlay-container span {
display:block;
float:left;
}
.overlay li {
display:block;
width:250px;
}
.overlay li:nth-child(odd) a {
background:rgba(214, 38, 78, 0.05);
}
.overlay li a, .drop-down span {
display:block;
font-size:14px;
line-height:28px;
color:#063541;
padding:0 10px;
cursor:pointer;
width:230px;
}
.drop-down span:hover, .drop-down:hover span {
background:#D6264E;
color:#FFFFFF;
}
.overlay li a:hover {
color:#FFFFFF;
background:#073642;
}
.main-nav {
position:absolute;
right:0px;
top:0px;
margin:0;
padding:0;
list-style:none;
}
.main-nav li {
margin:0;
padding:0;
float:left;
border-right: 1px solid #666;
padding-right: 10px;
}
.main-nav li:last-child {
border-right:none;
padding-right:0px;
}
.main-nav li a {
padding-left:10px;
color:#6D6D6D;
font-size:16px;
}
.main-nav li a:hover {
color:#D6264E;
}
nav#gpio {
position:relative;
width:300px;
background:#5F8645;
height:680px;
float:left;
margin-right:200px;
}
.phys {font-size:90%;opacity:0.8;color:#D33682;}
.bottom .phys {color:#002B36;}
.bottom .active .phys, .bottom :hover .phys,
.bottom .legend .phys {color:#FFF;}
#content {
float:left;
background:#EBE6D3;
width:500px;
min-height:600px;
padding-bottom:60px;
}
#content article {
padding:20px;
}
nav#gpio ul.top {
position:absolute;
left:255px;
top:17px;
list-style:none;
}
nav#gpio ul.bottom {
position:absolute;
left:16px;
top:17px;
list-style:none;
}
nav#gpio ul.top li {text-indent:52px;}
nav#gpio li a {
display:block;
width:236px;
position:relative;
font-size:13px;
line-height:29px;
height:27px;
margin-bottom:2px;
border-top-left-radius:13px;
border-bottom-left-radius:13px;
}
nav#gpio ul.bottom li a {
border-top-right-radius:13px;
border-bottom-right-radius:13px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
}
nav#gpio li a small {font-size:11px;}
nav#gpio li a:hover,
nav#gpio li.active a {
background:#063541;
/*background:#EBE6D3;*/
color:#FFF;
}
nav#gpio ul.bottom li a:hover,
nav#gpio ul.bottom li.active a {
background:#063541;
color:#FFF;
}
nav#gpio li.overlay-pin a {
background:rgba(235, 230, 211, 0.50);
color:#063541;
}
nav#gpio ul.bottom li.overlay-pin a {
background:rgba(235, 230, 211, 0.50); /*rgba(6, 53, 65, 0.50);*/
color:#063541;
}
article .pin-hover {cursor:help;}
article .pin-hover:hover {color:#880000;}
nav#gpio ul li.hover-pin a,
nav#gpio ul.bottom li.hover-pin a {
color:#FFF;
background:rgba(200,0,0,0.6);
}
nav#gpio ul.bottom a {
text-indent:10px;
}
nav#gpio span.pin {
display:block;
border:1px solid #FFFFFF;
border-radius:50%;
width:19px;
height:19px;
background:#002B36;
position:absolute;
right:3px;
top:3px;
}
nav#gpio li.legend a {
background:#EBE6D3;
}
nav#gpio li.legend a {}
nav#gpio ul.bottom li.legend a {
background:#063541;
}
nav#gpio ul.top li.legend {
width:177px;
position:relative;
padding-left:5px;
left:-5px;
}
nav#gpio ul.top span.pin {
left:3px;
top:3px;
}
nav#gpio span.pin:after {
content:'';
display:block;
border-radius:100%;
background:#FDF6E3;
position:absolute;
left:6px;
top:6px;
width:7px;
height:7px;
font-size:7px;
box-shadow: 0 0 5px rgba(10,41,51,0.5);
}
nav#gpio li.pow5v span.pin {
background:#DC322F;
}
nav#gpio li.gpio span.pin {
background:#859900;
}
nav#gpio li.uart span.pin,
nav#gpio li.pow3v3 span.pin {
background:#B58900;
}
nav#gpio li.i2c span.pin {
background:#268BD2;
}
nav#gpio li.spi span.pin {
background:#D33682;
}
/*
nav#gpio li.pin2 span.pin,
nav#gpio li.pin4 span.pin {
background:#DC322F;
}
nav#gpio li.pin3 span.pin,
nav#gpio li.pin5 span.pin,
nav#gpio li.pin27 span.pin,
nav#gpio li.pin28 span.pin {
background:#268BD2;
}
nav#gpio li.pin8 span.pin,
nav#gpio li.pin10 span.pin,
nav#gpio li.pin17 span.pin {
background:#B58900;
}
nav#gpio li.pin7 span.pin,
nav#gpio li.pin11 span.pin,
nav#gpio li.pin13 span.pin,
nav#gpio li.pin15 span.pin,
nav#gpio li.pin12 span.pin,
nav#gpio li.pin16 span.pin,
nav#gpio li.pin18 span.pin,
nav#gpio li.pin22 span.pin,
nav#gpio li.pin29 span.pin,
nav#gpio li.pin31 span.pin,
nav#gpio li.pin33 span.pin,
nav#gpio li.pin32 span.pin,
nav#gpio li.pin35 span.pin,
nav#gpio li.pin36 span.pin,
nav#gpio li.pin37 span.pin,
nav#gpio li.pin38 span.pin,
nav#gpio li.pin40 span.pin {
background:#859900;
}
nav#gpio li.pin19 span.pin,
nav#gpio li.pin21 span.pin,
nav#gpio li.pin23 span.pin,
nav#gpio li.pin24 span.pin,
nav#gpio li.pin26 span.pin {
background:#D33682;
}
*/
nav#gpio li.pin1 span.pin {
border-radius:0;
background:#B58900;
}
div#pinbase {
width:72px;
height:389px;
background:#073642;
position:absolute;
left:218px;
top:10px;
}
div#pinbasebplus {
width:72px;
height:215px;
background:#184753;
position:absolute;
left:218px;
top:401px;
}
.logo {
width:350px;
font-size:28px;
line-height:45px;
color:#888888;
margin-bottom:5px;
cursor:pointer;
position: absolute;
left:0px;
top:5px;
}
.logo a {
color:#888888;
}
.logo img {float:left;position:relative;top:0px;margin:0 13px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
width:30px;
}
.logo span {
color:#D6264E;
}
.logo span.out {
color:#5FB12D;
}
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
color:#5FB12D;
}
.pin27, .pin28 {margin-top:16px;}
p.intro {
color:#268BD2;
}
p,pre {
margin-top:10px;
font-size: 15px;
line-height: 150%;
}
h3 {
color:#D33682;
font-size:16px;
font-weight:bold;
}
#container {
width:1000px;
margin:0 auto;
margin-top:10px;
position:relative;
padding-top:70px;
}
.overlay-container {
position: absolute;
right: 0px;
top: 35px;
font-size:20px;
color:#D6264E;
}
.overlay-container select {font-size:20px;}
article a {color:#859900;text-decoration:underline;}
article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}
ul.legend {
float:right;
list-style:none;
margin-top:-26px;
}
ul.legend.expansion {
margin-top:-52px;
}
ul.legend li {
float:left;
line-height:20px;
font-size:12px;
padding:3px 7px;
height:20px;
}
ul.legend li a {
color:#FDF6E3;
}
li.legend_5 {background:#DC322F;}
li.legend_3 {background:#B58900;}
li.legend_ground, li.legend_pwm {background:#002B36;}
li.legend_uart {background:#B58900;}
li.legend_gpio, li.legend_dot3k {background:#859900;}
li.legend_spi {background:#D33682;}
li.legend_i2c, li.legend_atmega, li.legend_pibrella {background:#268BD2;}
li.legend_ladder {background:#5F8645;}
li.legend_wiringpi {background:#EBE6D3;}
ul.legend li.legend_wiringpi a {color:#063541;}
li.legend_ledborg {background:#000000;}
ul.legend li.legend_ledborg a {color:#FFFFFF;}
li.legend_clockatoo {background:#D33682;}
span.alternate {display:none;}
ol.linenums {margin-left:30px;}
@media (min-width:1200px){
#container {
width:1200px;
}
.board {
right:1200px;
}
#content {
width:700px;
}
}