ivatar/ivatar/static/css/tortin.less

@lab-blue:#36b7d7;
@lab-blue-light:#d5f0f7;
@lab-green:#3aa850;
@lab-green-light:#4bd268;
@lab-red:#f7645e;
@lab-black:#525252;
@lab-grey:#888888;
@lab-grey-light:#dddddd;
@lab-grey-lighter:#f5f5f5;
@lab-libravatar:#f9711f;
@lab-font:'Source Sans Pro',Helvetica,Arial,sans-serif;
@lab-font-bold:600;
@lab-font-thin:200;
@bg-hero:@lab-blue;
body {
font-family: @lab-font;
color: @lab-black;
}
.btn {
border-bottom-width: 3px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
background: @bg-hero;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
&.btn-default {
color: lighten(@bg-hero, 10%);
border-color: lighten(@bg-hero, 10%);
background: none;
}
&.btn-primary {
border-color: darken(@bg-hero, 15%);
}
&:hover, &:active, &:focus {
background: none;
border-color: darken(@bg-hero, 10%);
color: darken(@bg-hero, 10%);
&:after {
top: 50%;
}
}
&:after {
content: '';
position: absolute;
z-index: -1;
width: 150%;
height: 200%;
top: -190%;
left: 50%;
background: lighten(@bg-hero, 20%);
-webkit-transform: translateX(-50%) translateY(-50%) skew(0,5deg);
-moz-transform: translateX(-50%) translateY(-50%) skew(0,5deg);
-ms-transform: translateX(-50%) translateY(-50%) skew(0,5deg);
transform: translateX(-50%) translateY(-50%) skew(0,5deg);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
&.btn-block {
&:after {
height: 250%;
width: 200%;
-webkit-transform: translateX(-50%) translateY(-50%) skew(0,2deg);
-moz-transform: translateX(-50%) translateY(-50%) skew(0,2deg);
-ms-transform: translateX(-50%) translateY(-50%) skew(0,2deg);
transform: translateX(-50%) translateY(-50%) skew(0,2deg);
}
}
}
.hero {
background-color: @bg-hero;
color: #fff;
padding: 90px 0 40px;
h1 {
font-weight: @lab-font-bold;
font-size: 6em;
color: rgba(255,255,255,.5);
}
h2 {
font-weight: @lab-font-thin;
font-size: 30px;
margin-bottom: 30px;
}
small {
color: rgba(0,0,0,.4);
}
.btn {
display: inline-block;
&.btn-default {
color: lighten(@bg-hero, 22%);
border-color: lighten(@bg-hero, 22%);
background: none;
}
&.btn-primary {
border-color: #fff;
}
&:hover, &:active, &:focus {
border-color: #fff;
color: darken(@bg-hero, 20%);
}
&:after {
background: rgba(255,255,255,.5);
}
}
.container {
position: relative;
z-index: 10;
}
}
.social {
background-color: @bg-hero;
padding: 30px 0 140px;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
float: left;
margin-right: 15px;
width: 100px;
}
}
}
.clipper, .clipper-footer {
background-color: #fff;
height: 110px;
width: 100%;
position: relative;
top: -40px;
-webkit-transform: skew(0,2deg);
-moz-transform: skew(0,2deg);
-ms-transform: skew(0,2deg);
transform: skew(0,2deg);
pointer-events: none;
z-index: 1;
}
.clipper-footer {top: 0;}
section.content {
position: relative;
top: -100px;
margin-bottom: -100px;
z-index: 10;
h1, h2, h3, h4, h5, h6 {
color: darken(@bg-hero, 10%);
}
h2 {
font-weight: @lab-font-thin;
font-size: 40px;
}
section {
margin-bottom: 20px;
margin-top: 20px;
}
& .container > hr {
-webkit-transform: skew(0,2deg);
-moz-transform: skew(0,2deg);
-ms-transform: skew(0,2deg);
transform: skew(0,2deg);
margin-top: 80px;
margin-bottom: 40px;
}
}
footer {
background-color: @lab-grey-light;
color: @lab-grey;
padding: 100px 0 40px;
margin-top: -40px;
.pull-left {margin-right: 20px;}
.logo {
float: left;
display: inline-block;
margin-right: 5px;
margin-top: -8px;
.circle{
stroke: @lab-grey; 
stroke-width: 7; 
fill: none;
}
.polygon{fill: @lab-grey;}
}
}
@media (max-width: 768px) {
.hero {
padding: 50px 0 30px;
h1 {
font-size: 4em;
}
}
.social {
padding: 30px 0 100px;
}
.btn {
margin-bottom: 5px;
}
section.content {
section {
margin-bottom: 50px;
}
}
}
.color {
display: inline-block;
border-radius: 50%;
height: 20px;
width: 20px;
&.blue {background-color: @lab-blue;}
&.green {background-color: @lab-green;}
&.red {background-color: @lab-red;}
&.black {background-color: @lab-black;}
}
.navbar-tortin {
border:0;
background-color:@bg-hero;
color:#FFFFFF;
border-radius:0;
}
.form-control {
border-bottom-width: 3px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
border-color: lighten(@bg-hero, 10%);
background: none;
}
.form-control:focus {
border-color:darken(@bg-hero,10%);
box-shadow:none;
}
.navbar-tortin .navbar-brand,.navbar-tortin .navbar-text,.navbar-tortin .navbar-nav > li > a,.navbar-tortin .navbar-link,.navbar-tortin .btn-link {
color:#FFFFFF;
}
.navbar-tortin .navbar-nav > .active > a,.navbar-tortin .navbar-nav > .active > a:focus,.navbar-tortin .navbar-nav > .active > a:hover,.navbar-tortin .navbar-nav > li > a:focus,.navbar-tortin .navbar-nav > li > a:hover,.navbar-tortin .navbar-link:hover,.navbar-tortin .btn-link:focus,.navbar-tortin .btn-link:hover,.navbar-tortin .navbar-nav > .open > a,.navbar-tortin .navbar-nav > .open > a:focus,.navbar-tortin .navbar-nav > .open > a:hover {
background-color:darken(@bg-hero, 10%);
}
.navbar-tortin .navbar-toggle {
border-color:#FFFFFF;
}
.navbar-tortin .navbar-toggle:hover {
background-color:#FFFFFF;
}
.navbar-tortin .navbar-toggle .icon-bar {
background-color:#FFFFFF;
}
.navbar-tortin .navbar-toggle:hover .icon-bar {
background-color:@bg-hero;
}
.navbar-tortin .navbar-collapse, .navbar-tortin .navbar-form {
border:0;
}
@media (max-width:767px) {
.navbar-tortin .navbar-nav .open .dropdown-menu > li > a {
color:#FFFFFF
}
.navbar-tortin .navbar-nav .open .dropdown-menu > li > a:hover {
background-color:darken(@bg-hero, 10%);
}
.navbar-tortin .navbar-nav .open .dropdown-menu > .active > a, .navbar-tortin .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-tortin .navbar-nav .open .dropdown-menu > .active > a:hover {
background-color:darken(@bg-hero, 10%);
}
}
.panel-tortin {
border-color:@bg-hero;
border-bottom-width: 3px;
}
.panel-tortin > .panel-heading {
color:#fff;
background-color:@bg-hero;
border-color:@bg-hero;
font-family: 'Montserrat', sans-serif;
}
.panel-tortin > .panel-heading + .panel-collapse > .panel-body {
border-top-color:@bg-hero;
}
.panel-tortin > .panel-heading .badge {
color:@bg-hero;
background-color:#fff;
}
.panel-tortin > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color:@bg-hero;
}
.alert.alert-danger {
background-color:#FFFFFF;
color:@lab-red;
border-color:@lab-red;
border-bottom-width: 3px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
position: relative;
}
.input-group-addon {
border-bottom-width: 3px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
position: relative;
border-color: lighten(@bg-hero, 10%);
background: none;
width:auto;
height:36px;
}