Revert "Add version 2.0 of comparison table"
This reverts commit cefa584fd5
.
249
css/hint.css
Executable file
|
@ -0,0 +1,249 @@
|
|||
/*! Hint.css - v0.1.0 - 2013-02-03
|
||||
* https://github.com/chinchang/hint.css
|
||||
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/labs/hintcss
|
||||
*
|
||||
* Release under The MIT License
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* source: hint-core.scss
|
||||
*
|
||||
* Defines the basic styling for the tooltip.
|
||||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
.hint {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
.hint:before, .hint:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease; }
|
||||
.hint:hover:before, .hint:hover:after {
|
||||
opacity: 1; }
|
||||
.hint:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001; }
|
||||
.hint:after {
|
||||
content: attr(data-hint);
|
||||
background: #383838;
|
||||
color: white;
|
||||
text-shadow: 0 -1px 0px black;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/**
|
||||
* source: hint-position.scss
|
||||
*
|
||||
* Defines the positoning logic for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--top
|
||||
* 2) hint--bottom
|
||||
* 3) hint--left
|
||||
* 4) hint--right
|
||||
*/
|
||||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
.hint--top:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--left:before {
|
||||
border-left-color: #383838; }
|
||||
|
||||
.hint--right:before {
|
||||
border-right-color: #383838; }
|
||||
|
||||
/**
|
||||
* top tootip
|
||||
*/
|
||||
.hint--top:before {
|
||||
margin-bottom: -12px; }
|
||||
.hint--top:after {
|
||||
margin-left: -18px; }
|
||||
.hint--top:before, .hint--top:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
.hint--top:hover:before, .hint--top:hover:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom tootip
|
||||
*/
|
||||
.hint--bottom:before {
|
||||
margin-top: -12px; }
|
||||
.hint--bottom:after {
|
||||
margin-left: -18px; }
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
.hint--bottom:hover:before, .hint--bottom:hover:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
/**
|
||||
* right tootip
|
||||
*/
|
||||
.hint--right:before {
|
||||
margin-left: -12px;
|
||||
margin-bottom: -6px; }
|
||||
.hint--right:after {
|
||||
margin-bottom: -14px; }
|
||||
.hint--right:before, .hint--right:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--right:hover:before, .hint--right:hover:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* left tootip
|
||||
*/
|
||||
.hint--left:before {
|
||||
margin-right: -12px;
|
||||
margin-bottom: -6px; }
|
||||
.hint--left:after {
|
||||
margin-bottom: -14px; }
|
||||
.hint--left:before, .hint--left:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--left:hover:before, .hint--left:hover:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
* Contains tooltips of various types based on color differences.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--error
|
||||
* 2) hint--warning
|
||||
* 3) hint--info
|
||||
* 4) hint--success
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
.hint--error:after {
|
||||
background-color: #b34e4d;
|
||||
text-shadow: 0 -1px 0px #5a2626; }
|
||||
.hint--error.hint--top:before {
|
||||
border-top-color: #b34e4d; }
|
||||
.hint--error.hint--bottom:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
.hint--error.hint--left:before {
|
||||
border-left-color: #b34e4d; }
|
||||
.hint--error.hint--right:before {
|
||||
border-right-color: #b34e4d; }
|
||||
|
||||
/**
|
||||
* Warning
|
||||
*/
|
||||
.hint--warning:after {
|
||||
background-color: #c09854;
|
||||
text-shadow: 0 -1px 0px #6d5228; }
|
||||
.hint--warning.hint--top:before {
|
||||
border-top-color: #c09854; }
|
||||
.hint--warning.hint--bottom:before {
|
||||
border-bottom-color: #c09854; }
|
||||
.hint--warning.hint--left:before {
|
||||
border-left-color: #c09854; }
|
||||
.hint--warning.hint--right:before {
|
||||
border-right-color: #c09854; }
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.hint--info:after {
|
||||
background-color: #3986ac;
|
||||
text-shadow: 0 -1px 0px #193c4c; }
|
||||
.hint--info.hint--top:before {
|
||||
border-top-color: #3986ac; }
|
||||
.hint--info.hint--bottom:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
.hint--info.hint--left:before {
|
||||
border-left-color: #3986ac; }
|
||||
.hint--info.hint--right:before {
|
||||
border-right-color: #3986ac; }
|
||||
|
||||
/**
|
||||
* Success
|
||||
*/
|
||||
.hint--success:after {
|
||||
background-color: #458746;
|
||||
text-shadow: 0 -1px 0px #1a331a; }
|
||||
.hint--success.hint--top:before {
|
||||
border-top-color: #458746; }
|
||||
.hint--success.hint--bottom:before {
|
||||
border-bottom-color: #458746; }
|
||||
.hint--success.hint--left:before {
|
||||
border-left-color: #458746; }
|
||||
.hint--success.hint--right:before {
|
||||
border-right-color: #458746; }
|
||||
|
||||
/**
|
||||
* source: hint-always.scss
|
||||
*
|
||||
* Defines a persisted tooltip which shows always.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--always
|
||||
*
|
||||
*/
|
||||
.hint--always:after, .hint--always:before {
|
||||
opacity: 1; }
|
||||
.hint--always.hint--top:after, .hint--always.hint--top:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
.hint--always.hint--left:after, .hint--always.hint--left:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
.hint--always.hint--right:after, .hint--always.hint--right:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
814
css/style.css
Normal file → Executable file
|
@ -1,577 +1,281 @@
|
|||
@charset "utf-8";
|
||||
@import url('http://fonts.googleapis.com/css?family=Droid+Sans');
|
||||
@import url('hint.css');
|
||||
/* CSS Document */
|
||||
|
||||
/* Base CSS */
|
||||
body {
|
||||
background: url(../images/noise.png);
|
||||
width: 980px;
|
||||
margin: auto;
|
||||
width:980px;
|
||||
margin:auto;
|
||||
background-image:url(../images/noise.png);
|
||||
font-family: 'Droid Sans';
|
||||
}
|
||||
a,a:hover ,a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
header,section,table,footer,ul,li {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
/* Header TypoGraphy */
|
||||
header hgroup {
|
||||
width: 220px;
|
||||
margin:auto;
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
header h1, header h2,header h3 {
|
||||
background: #900;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
margin: 0 auto 5px;
|
||||
margin:50px auto;
|
||||
position:relative;
|
||||
}
|
||||
header h1 {
|
||||
padding-top: 15px;
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
color: #282828;
|
||||
margin:auto;
|
||||
font-size:120px;
|
||||
line-height:95px;
|
||||
background-image:url(../images/noise.png);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: 240px;
|
||||
}
|
||||
header h1 span {
|
||||
font-size: 115px;
|
||||
margin: 5px auto;
|
||||
padding: 0px 0;
|
||||
line-height: 1.3em;
|
||||
header .line {
|
||||
position:absolute;
|
||||
width:980px;
|
||||
height:1px;
|
||||
border-top:5px double rgba(0,0,0,.5);
|
||||
border-bottom:5px double rgba(0,0,0,.5);
|
||||
top: 70px;
|
||||
left: 0px;
|
||||
z-index: 0;
|
||||
}
|
||||
header h2 span {
|
||||
letter-spacing: 8px;
|
||||
font-size: 20px;
|
||||
header h2 {
|
||||
letter-spacing: 7px;
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#282828;
|
||||
font-size: 25px;
|
||||
line-height:26px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
header h3 {
|
||||
position: relative;
|
||||
}
|
||||
header h3:after {
|
||||
top: 100%;
|
||||
border-left:110px solid transparent;
|
||||
border-right:110px solid transparent;
|
||||
border-top: 30px solid #900;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left:0;
|
||||
margin-left: 0;
|
||||
}
|
||||
header h3 span {
|
||||
font-size: 16.5px;
|
||||
letter-spacing: 6px
|
||||
}
|
||||
|
||||
/* Middle TypoGraphy */
|
||||
section article {
|
||||
width: 450px;
|
||||
margin:60px auto;
|
||||
text-align: justify;
|
||||
}
|
||||
section p {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin:5px auto;
|
||||
}
|
||||
section p:first-child {
|
||||
font-size: 18px;
|
||||
}
|
||||
section p:nth-child(2) {
|
||||
font-size: 68px;
|
||||
color:rgb(68,84,106);
|
||||
margin-left: -3px;
|
||||
}
|
||||
section p:nth-child(2) small {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
color: #808080;
|
||||
margin: auto 2px;
|
||||
}
|
||||
section p:last-child {
|
||||
font-size: 49.3px;
|
||||
margin-top:-10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
/* Share */
|
||||
.share {
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.share ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
color: #282828;
|
||||
width: auto;
|
||||
}
|
||||
.share ul li {
|
||||
float: left;
|
||||
background:#f2f2f2;
|
||||
line-height: 1.3em;
|
||||
width: auto;
|
||||
max-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.share ul li span {
|
||||
margin: 10px;
|
||||
display: block;
|
||||
}
|
||||
.share ul li:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
.share ul li:first-child,.share ul li:first-child:hover {
|
||||
background: #900;
|
||||
color: #fff;
|
||||
width:221px;
|
||||
position: relative;
|
||||
}
|
||||
.share ul li:nth-child(2) {
|
||||
width: 239px;
|
||||
}
|
||||
.share ul li:first-child:after {
|
||||
left: 100%;
|
||||
border:7px solid transparent;
|
||||
border-left-color: #900;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
/* Table */ /* We should use nav and ul li for collapsing details */
|
||||
nav {
|
||||
width: 980px;
|
||||
margin:30px auto;
|
||||
list-style: none;
|
||||
}
|
||||
.guide {
|
||||
padding: 0;
|
||||
margin:0 0 15px;
|
||||
line-height: 1.3em;
|
||||
color: rgb(94, 94, 94);
|
||||
text-shadow: -1px -1px #fff;
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
}
|
||||
nav:hover .guide {
|
||||
opacity: 1;
|
||||
}
|
||||
nav .parent {
|
||||
margin: 1px auto;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
nav .parent:nth-child(odd) ul li {
|
||||
background:rgba(255,255,255,1) url(../images/grid.png);
|
||||
}
|
||||
nav .parent:nth-child(even) ul li {
|
||||
background:rgba(229, 232, 234,.5) url(../images/grid.png);
|
||||
}
|
||||
nav .parent ul:hover li {
|
||||
background: rgba(175, 175, 175, 0.30) url(../images/grid.png);
|
||||
cursor: pointer;
|
||||
}
|
||||
nav .parent ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Table > Sizing */
|
||||
nav .parent li {
|
||||
width: 326px;
|
||||
float: left;
|
||||
height:60px;
|
||||
line-height: 1.5em;
|
||||
margin:.5px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
}
|
||||
nav .parent li:first-child {
|
||||
width: 225px;
|
||||
margin-left: 0;
|
||||
}
|
||||
nav .parent li:first-child.active {
|
||||
background: #900;
|
||||
color: #fff;
|
||||
}
|
||||
nav .parent li:first-child.active:hover h1 {
|
||||
color: #fff !important;
|
||||
}
|
||||
nav .parent li:nth-child(2) {
|
||||
width: 653px;
|
||||
}
|
||||
nav .parent li:last-child {
|
||||
width: 100px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Table > Name */
|
||||
nav .parent li h1 {
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
font-size:18px;
|
||||
letter-spacing: 7px;
|
||||
font-family: 'Droid sans-serif';
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#282828;
|
||||
font-size: 19.7px;
|
||||
line-height:28px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
nav .parent li:first-child:hover h1 {
|
||||
.clr {
|
||||
font-size:70px;
|
||||
margin:20px auto auto;
|
||||
text-align:center;
|
||||
width: 980px;
|
||||
line-height:1.5em;
|
||||
color:#828282;
|
||||
display:block;
|
||||
}
|
||||
header p {
|
||||
font-weight: normal;
|
||||
margin:auto;
|
||||
color:#282828;
|
||||
font-size: 18px;
|
||||
line-height:1.5em;
|
||||
}
|
||||
section {
|
||||
margin:50px auto;
|
||||
}
|
||||
section table {
|
||||
width:980px;
|
||||
margin:auto;
|
||||
&background:rgba(255,255,255,0.5) url(../images/grid.png);
|
||||
border:rgba(255,255,255,.2) 10px solid;
|
||||
border-spacing: 1px;
|
||||
border-image: url(../images/content-border.png) 10 repeat;
|
||||
-moz-border-image: url(../images/content-border.png) 10 repeat;
|
||||
-webkit-border-image: url(../images/content-border.png) 10 repeat;
|
||||
box-shadow: 0 0 7px 0px rgba(162,162,162,.5);
|
||||
}
|
||||
|
||||
section table tr:nth-child(even) {
|
||||
background:rgba(255,255,255,0.5) url(../images/grid.png);
|
||||
}
|
||||
section table tr:nth-child(odd) {
|
||||
background:rgba(255,255,255,0.9) url(../images/grid.png);
|
||||
}
|
||||
section table tr td:first-child {
|
||||
width:450px;
|
||||
}
|
||||
section table tr td:last-child {
|
||||
width:148px;
|
||||
}
|
||||
section table tr td {
|
||||
width: 100px;
|
||||
max-height: 70px;
|
||||
}
|
||||
section table tr h1 {
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#000;
|
||||
font-size: 20px;
|
||||
padding:0px 10px;
|
||||
line-height:3.5em;
|
||||
text-align:left;
|
||||
float: left;
|
||||
}
|
||||
section table tr h2 {
|
||||
font-weight: normal;
|
||||
margin: auto;
|
||||
color:#828282;
|
||||
font-size: 16px;
|
||||
padding:0px 15px;
|
||||
line-height:1.5em;
|
||||
text-align:center;
|
||||
}
|
||||
section table tr p {
|
||||
font-weight: normal;
|
||||
margin:10px auto;
|
||||
color:#282828;
|
||||
border-left:3px solid rgba(255,255,255,.3);
|
||||
font-size: 16px;
|
||||
padding:20px;
|
||||
line-height:1.5em;
|
||||
}
|
||||
a {
|
||||
text-decoration:none !important;
|
||||
color:inherit;
|
||||
}
|
||||
section table h1 a:hover {
|
||||
color:#900;
|
||||
}
|
||||
table tr td span {
|
||||
text-transform: uppercase;
|
||||
font-family: Impact;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
border: 3px solid;
|
||||
padding: 5px;
|
||||
margin:15px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
table tr td span.yes {
|
||||
color: rgba(41,145,0,.8);
|
||||
border-color: rgba(41,145,0,.8);
|
||||
transform: rotate(10deg);
|
||||
-webkit-transform: rotate(10deg);
|
||||
-moz-transform: rotate(10deg);
|
||||
-o-transform: rotate(10deg);
|
||||
-ms-transform: rotate(10deg);
|
||||
}
|
||||
table tr td span.no {
|
||||
color: rgba(145,0,0,.8);
|
||||
border-color: rgba(145,0,0,.8);
|
||||
transform: rotate(-7deg);
|
||||
-webkit-transform: rotate(-7deg);
|
||||
-moz-transform: rotate(-7deg);
|
||||
-o-transform: rotate(-7deg);
|
||||
-ms-transform: rotate(-7deg);
|
||||
}
|
||||
.responsive {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 10px 30px;
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
.responsive.yes .desktop ,
|
||||
.responsive .desktop.yes {
|
||||
background: url(../images/desktop-yes.png) right bottom no-repeat;
|
||||
}
|
||||
.responsive.yes .tablet ,
|
||||
.responsive .tablet.yes {
|
||||
background: url(../images/tablet-yes.png) right bottom no-repeat;
|
||||
}
|
||||
.responsive.yes .phone ,
|
||||
.responsive .phone.yes {
|
||||
background: url(../images/phone-yes.png) right bottom no-repeat;
|
||||
}
|
||||
|
||||
.responsive .desktop {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 73px;
|
||||
height: 52px;
|
||||
background: url(../images/desktop.png) center center no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
.responsive .tablet {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 34px;
|
||||
height: 52px;
|
||||
background: url(../images/tablet.png) right bottom no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: -17px;
|
||||
}
|
||||
.responsive .phone {
|
||||
margin: auto;
|
||||
float: right;
|
||||
width: 15px;
|
||||
height: 52px;
|
||||
background: url(../images/phone.png) bottom right no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: -9px;
|
||||
}
|
||||
.info {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
float: right;
|
||||
height: 74px;
|
||||
width: 345px;
|
||||
background: rgba(162,162,162,.3);
|
||||
position: relative;
|
||||
opacity:0;
|
||||
visibility: hidden;
|
||||
left: -10px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
}
|
||||
td:hover .info {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.info:after {
|
||||
right: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info:after {
|
||||
border-color: rgba(136, 183, 213, 0);
|
||||
border-right-color: rgba(162,162,162,.3);
|
||||
border-width: 15px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.info p {
|
||||
font-size: 14px;
|
||||
color: #282828;
|
||||
line-height: 1.3em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.info a {
|
||||
color: #006099;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.info a:hover {
|
||||
color: #900;
|
||||
}
|
||||
/* Table > Compare > Browsers */
|
||||
.details {
|
||||
margin: 10px 0;
|
||||
padding:0 7px;
|
||||
}
|
||||
nav .parent ul:hover .details {
|
||||
|
||||
}
|
||||
.details .browsers,
|
||||
.details .ui,
|
||||
.details .respionsive {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.details .browsers span:first-child {
|
||||
margin-left:5px;
|
||||
}
|
||||
.details .browsers span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: auto auto auto 30px;
|
||||
background-color: #ddd;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.details .browsers span:after {
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
background-image: url(../images/plus.png);
|
||||
background-position: 17px 5px;
|
||||
background-repeat: no-repeat;
|
||||
content: attr(data-version);
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: -25px;
|
||||
footer {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
.details .browsers span[data-version="+"]:after {
|
||||
background-image: none;
|
||||
}
|
||||
/* Table > Compare > Browsers > Browsers image */
|
||||
.ie {background-image: url(../images/ie.png)}
|
||||
.cr {background-image: url(../images/cr.png)}
|
||||
.op {background-image: url(../images/op.png)}
|
||||
.sa {background-image: url(../images/sa.png)}
|
||||
.ff {background-image: url(../images/ff.png)}
|
||||
/* Table > Compare > Browsers > Versions collors */
|
||||
.ie:after {background-color: rgb(46,117,182);}
|
||||
.cr:after {background-color: rgb(84,130,53);}
|
||||
.op:after {background-color: rgb(192,0,0);}
|
||||
.sa:after {background-color: #555;}
|
||||
.ff:after {background-color: rgb(197,90,17);}
|
||||
/* --------------- */
|
||||
/* Table > Compare > UIs */
|
||||
.details .ui {
|
||||
margin:0 15px;
|
||||
padding:0 20px;
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.details .ui span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin:auto 0;
|
||||
background: #ddd;
|
||||
display:inline-block;
|
||||
float:left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 37px;
|
||||
color: #939393;
|
||||
font-size: 16px;
|
||||
}
|
||||
.details .ui span.sass ,
|
||||
.details .ui span.less {
|
||||
padding: 0px 16px 0 10px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.details .ui span.sass[data-active="yes"] {
|
||||
border-left:3px solid rgb(0, 84, 124);
|
||||
}
|
||||
.details .ui span.less[data-active="yes"] {
|
||||
border-right:3px solid rgb(0, 84, 124);
|
||||
}
|
||||
|
||||
.details .ui span[data-active="yes"] {
|
||||
color: #FFF;
|
||||
background: rgb(0, 140, 152);
|
||||
}
|
||||
/* Table > Compare > Responsive */
|
||||
.details .responsive span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 1.5px;
|
||||
background-color: #ddd;
|
||||
background-position:center;
|
||||
background-repeat: no-repeat;
|
||||
display:inline-block;
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
/* Table > Compare > Responsive > Display image */
|
||||
.mobile {background-image: url(../images/mobile.png)}
|
||||
.desktop {background-image: url(../images/desktop.png)}
|
||||
.tablet {background-image: url(../images/tablet.png)}
|
||||
[data-responsive="yes"] {background-color:#548235 !important; }
|
||||
[data-responsive="yes"] span {background-color:#548235 !important; }
|
||||
|
||||
/* --------------------------------------------- */
|
||||
/* Table > Licence */
|
||||
nav .parent li h3 {
|
||||
margin: 17px 5px;
|
||||
display: block;
|
||||
font-size:14px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
/* Table > Details */
|
||||
nav .parent .info {
|
||||
width: 980px;
|
||||
margin:-3px auto;
|
||||
height: 0;
|
||||
background: rgba(228, 228, 228, .5);
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
cursor: default;
|
||||
border-top: 3px solid #900;
|
||||
overflow: hidden;
|
||||
}
|
||||
nav .parent .info article {
|
||||
width: 740px !important;
|
||||
margin: auto;
|
||||
float: left;
|
||||
}
|
||||
nav .parent .info blockquote {
|
||||
color: #282828;
|
||||
font-size: 16px;
|
||||
margin: 10px 10px 5px auto;
|
||||
padding: 5px;
|
||||
}
|
||||
nav .parent .info blockquote i {
|
||||
padding:8px 15px;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
background: url('../images/quote.png') center no-repeat;
|
||||
}
|
||||
nav .parent .info.active {
|
||||
top: 0px;
|
||||
height: 150px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
nav .parent .info p {
|
||||
color: #828282;
|
||||
font-size: 14px;
|
||||
text-align: justify;
|
||||
line-height: 1.3em;
|
||||
padding:15px 10px;
|
||||
text-transform: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Table > Details > Buttons */
|
||||
nav .parent .info aside {
|
||||
float:right;
|
||||
margin: auto;
|
||||
width: 240px !important;
|
||||
padding: 20px 0;
|
||||
footer a {
|
||||
color: #006099;
|
||||
}
|
||||
nav .parent .info aside a {
|
||||
padding: 10px 15px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
margin:10px auto;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
color: #000;
|
||||
display: block;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
footer a:hover {
|
||||
color: #900;
|
||||
}
|
||||
nav .parent .info aside a:first-child {
|
||||
background-image: url(../images/link.png);
|
||||
background-position:15px center;
|
||||
}
|
||||
nav .parent .info aside a:last-child {
|
||||
background-image: url(../images/git.png);
|
||||
background-position:10px center;
|
||||
}
|
||||
nav .parent .info aside a[href="#none"] {
|
||||
opacity: .5;
|
||||
cursor: default;
|
||||
}
|
||||
nav .parent .info aside a[href="#none"]:hover {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
nav .parent .info aside a:hover {
|
||||
background-color:AliceBlue;
|
||||
}
|
||||
/* Footer */
|
||||
footer ul {
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
}
|
||||
footer ul:hover {
|
||||
width: 290px;
|
||||
}
|
||||
footer ul li {
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 3px;
|
||||
margin: auto 3px;
|
||||
background-color: #ddd;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
line-height: 35px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
margin-left: -10px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
footer ul li a {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
footer ul:hover li {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
margin-left: 3px;
|
||||
}
|
||||
footer ul li:first-child {
|
||||
background: #900;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-left: 3px;
|
||||
}
|
||||
/* usablica logo */
|
||||
footer ul li:first-child span {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
transition: all 0.25s ease;
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
-ms-transition: all 0.25s ease;
|
||||
-o-transition: all 0.25s ease;
|
||||
}
|
||||
footer ul li:first-child i {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
float: right;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
background: url(../images/usablica.png) no-repeat center center;
|
||||
}
|
||||
/* let's have some fun with usablica logo and social links hover effects :) */
|
||||
footer ul:hover li:first-child {
|
||||
width: 100px;
|
||||
}
|
||||
footer ul:hover li:first-child a {
|
||||
width: 106px;
|
||||
}
|
||||
footer ul:hover li:first-child span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
width: 62px;
|
||||
user-select: none;
|
||||
}
|
||||
footer ul li:nth-child(2) {
|
||||
background-image: url(../images/tw.png);
|
||||
transition-delay: .20s;
|
||||
-webkit-transition-delay: .20s;
|
||||
-moz-transition-delay: .20s;
|
||||
-o-transition-delay: .20s;
|
||||
-ms-transition-delay: .20s;
|
||||
}
|
||||
footer ul li:nth-child(3) {
|
||||
background-image: url(../images/facebook.png);
|
||||
transition-delay: .24s;
|
||||
-webkit-transition-delay: .24s;
|
||||
-moz-transition-delay: .24s;
|
||||
-o-transition-delay: .24s;
|
||||
-ms-transition-delay: .24s;
|
||||
}
|
||||
footer ul li:nth-child(4) {
|
||||
background-image: url(../images/in.png);
|
||||
transition-delay: .28s;
|
||||
-webkit-transition-delay: .28s;
|
||||
-moz-transition-delay: .28s;
|
||||
-o-transition-delay: .28s;
|
||||
-ms-transition-delay: .28s;
|
||||
}
|
||||
footer ul li:nth-child(5) {
|
||||
background-image: url(../images/git.png);
|
||||
transition-delay: .32s;
|
||||
-webkit-transition-delay: .32s;
|
||||
-moz-transition-delay: .32s;
|
||||
-o-transition-delay: .32s;
|
||||
-ms-transition-delay: .32s;
|
||||
}
|
||||
footer ul li:hover {
|
||||
background-color: #aeaeae;
|
||||
}
|
||||
footer ul li:first-child:hover {
|
||||
background-color: #900;
|
||||
}
|
||||
|
||||
|
|
BIN
images/bg-ramp.jpg
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
images/blockquote-gfx-2x.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
images/blockquote-gfx.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
images/chevron-2x.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
images/chevron.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
images/content-border.png
Executable file
After Width: | Height: | Size: 261 B |
BIN
images/cr.png
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 475 KiB After Width: | Height: | Size: 83 KiB |
BIN
images/in.png → images/desktop-yes.png
Normal file → Executable file
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.4 KiB |
BIN
images/desktop.png
Normal file → Executable file
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 4.5 KiB |
BIN
images/download-fallback-bg.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
images/download-sprite.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
images/fav.png
Before Width: | Height: | Size: 4.4 KiB |
BIN
images/ff.png
Before Width: | Height: | Size: 4.8 KiB |
BIN
images/footer-ramp.jpg
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
images/fork-sprite.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
images/git.png
Before Width: | Height: | Size: 3.7 KiB |
0
images/grid.png
Normal file → Executable file
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
images/hr-2x.jpg
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
images/hr.jpg
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
images/ie.png
Before Width: | Height: | Size: 4.5 KiB |
BIN
images/link.png
Before Width: | Height: | Size: 3.2 KiB |
BIN
images/logo.png
Before Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 3.3 KiB |
0
images/noise.png
Normal file → Executable file
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
BIN
images/octocat-2x.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
images/octocat.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
images/op.png
Before Width: | Height: | Size: 4.7 KiB |
BIN
images/facebook.png → images/phone-yes.png
Normal file → Executable file
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
BIN
images/usablica.png → images/phone.png
Normal file → Executable file
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.3 KiB |
BIN
images/plus.png
Before Width: | Height: | Size: 2.9 KiB |
BIN
images/quote.png
Before Width: | Height: | Size: 3.1 KiB |
BIN
images/ribbon-tail-sprite-2x.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
images/ribbon-tail-sprite.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
images/sa.png
Before Width: | Height: | Size: 5.1 KiB |
BIN
images/shield-fallback.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
images/shield.png
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
images/site-2.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
images/small-ribbon-tail-sprite-2x.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
images/small-ribbon-tail-sprite.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
images/tw.png → images/tablet-yes.png
Normal file → Executable file
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
BIN
images/tablet.png
Normal file → Executable file
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 4.1 KiB |