woodpecker/server/static/styles/drone.css.bak
2014-06-04 14:25:38 -07:00

1194 lines
22 KiB
CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none;
}
html {
height:100%;
overflow:hidden;
font-family:'Open Sans';
width:100%;
}
body {
height:100%;
font-family:'Open Sans';
overflow:hidden;
width:100%;
/*
background: #f9f9f9;
background: -moz-linear-gradient(left, #383C3B 50%,#f7f7f7 50%);
background: -webkit-linear-gradient(left, #383C3B 50%,#f7f7f7 50%);
background: -o-linear-gradient(left, #383C3B 50%,#f7f7f7 50%);
background: -ms-linear-gradient(left, #383C3B 50%,#f7f7f7 50%);
background: linear-gradient(to right, #383C3B 50%,#f7f7f7 50%);
*/
}
.pull-right {
float:right;
}
.pull-left {
float:left;
}
.is-hidden,
.hide {
display:none !IMPORTANT;
}
h1, h2, h3, h4, h5, p, a {
font-family:'Open Sans';
padding:0px;
margin:0px;
}
.pure-form span.pure-input {
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Hidding the radiobuttons & checkboxes */
input[type="radio"] {
display:none;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label:before {
cursor: pointer;
display: inline-block;
font-family:'FontAwesome';
content: "\f10c";
font-size: 18px;
color:#CCC;
vertical-align:middle;
padding-right:10px;
line-height: 22px;
}
input[type="radio"]:checked + label:before {
cursor: pointer;
display: inline-block;
font-family:'FontAwesome';
content: "\f05d";
font-size: 18px;
color:#CCC;
vertical-align:middle;
padding-right:10px;
line-height: 22px;
}
/* scrollbars */
/* see https://gist.github.com/fanzeyi/3995618 */
::-webkit-scrollbar{
height:16px;
overflow:visible;
width:16px;
}
::-webkit-scrollbar-button{
height:0;
width:0;
}
::-webkit-scrollbar-track{
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 4px;
}
::-webkit-scrollbar-track:horizontal{
border-width:4px 0 0;
}
::-webkit-scrollbar-track:hover{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-track:horizontal:hover{
box-shadow:inset 0 1px 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-track:active{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-track:horizontal:active{
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.2);
background-clip:padding-box;
border:solid transparent;
border-width:1px 1px 1px 6px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:horizontal{
border-width:6px 1px 1px;
padding:0 0 0 100px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover{
background-color:rgba(0,0,0,.4);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active{
background-color:rgba(0,0,0,0.5);
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner{
background:transparent;
}
body::-webkit-scrollbar-track-piece{
background-clip:padding-box;
background-color:#f5f5f5;
border:solid #fff;
border-width:0 0 0 3px;
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07);
}
body::-webkit-scrollbar-track-piece:horizontal{
border-width:3px 0 0;
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07);
}
body::-webkit-scrollbar-thumb{
border-width:1px 1px 1px 5px;
}
body::-webkit-scrollbar-thumb:horizontal{
border-width:5px 1px 1px;
}
body::-webkit-scrollbar-corner{
background-clip:padding-box;
background-color:#f5f5f5;
border:solid #fff;
border-width:3px 0 0 3px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
}
/* layout */
#layout, #page {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: flex-start;
-moz-box-pack: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height:100%;
background:#FFF;
}
#menu {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 250px;
-ms-flex: 0 0 250px;
flex: 0 0 250px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
width: 30px; /* To make the transition work nicely */
-webkit-transition: flex 0.3s ease-out;
transition: flex 0.3s ease-out;
background:#262829;
background:#222625;
overflow:hidden;
overflow-y:auto;
}
#page {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
overflow-y:auto;
overflow-x:hidden;
}
#meta {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 2;
-ms-flex-order:2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 250px;
-ms-flex: 0 0 250px;
flex: 0 0 250px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
width: 30px; /* To make the transition work nicely. (Transitions to/from
"width:auto" are buggy in Gecko and Webkit, at least.
See http://bugzil.la/731886 for more info.) */
-webkit-transition: flex 0.3s ease-out;
transition: flex 0.3s ease-out;
overflow-y:auto;
overflow-x:hidden;
background:#f7f7f7;
border-left:1px solid #DDD;
}
#main {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
overflow-y:auto;
overflow-x:hidden;
}
#main-inner {
padding:30px 50px;
}
/* left navigation panel */
.brand {
text-decoration:none;
font-weight: normal;
font-family: 'Orbitron';
font-size: 28px;
color: #DDDDDD;
display: block;
text-align: center;
min-height: 81px;
max-height: 81px;
line-height: 81px;
background: #262829;
border-bottom: 1px solid #383C3B;
text-align: center;
}
.brand:hover {
color:#FFF;
}
.vcard {
padding: 20px 0px 30px;
}
.vcard .pure-u-1-3 {
text-align:right;
}
.vcard .pure-u-2-3 {
margin-top:7px;
}
.vcard .vcard-gravatar {
width:48px;
height:48px;
margin-right:0px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
.vcard .vcard-name,
.vcard .vcard-remote {
color:#DDD;
font-size:16px;
margin-left:12px;
max-width:140px;
overflow:hidden;
text-overflow:ellipsis;
}
.vcard .vcard-remote {
padding-top:3px;
color:#AAA;
font-size:14px;
}
.alert-login {
padding: 20px;
text-align: center;
background: #383C3B;
color: #aaa;
display:block;
margin-bottom:5px;
}
#menu .pure-menu {
background:none;
border:none;
}
#menu .pure-menu .pure-menu-selected {
background:#383C3B;
}
#menu .pure-menu a,
#menu .pure-menu .pure-menu-selected a {
color:#AAA;
padding:0px;
text-align:left;
display:block;
line-height:40px;
padding-left:45px;
text-transform:uppercase;
font-size:15px;
}
#menu .pure-menu .fa {
display:inline-block;
width:24px;
text-align:center;
margin-right:10px;
color:#4E5151;
font-size:18px;
}
#menu .pure-menu a:hover .fa,
#menu .pure-menu .pure-menu-selected .fa {
display:inline-block;
width:24px;
text-align:center;
margin-right:10px;
color:#777;
font-size:18px;
}
#menu .pure-menu a:hover,
#menu .pure-menu .pure-menu-selected a:hover {
background:#4E5151;
background:#383C3B;
}
#menu .pure-menu ul li.menu-item-divided {
border-top: 1px solid #383C3B !IMPORTANT;
}
/* right metadata section */
#meta .pure-menu {
background:none;
border:none;
border-bottom:1px solid #DDD;
}
#meta .pure-menu .pure-menu-heading {
padding: 0px;
margin: 0px;
margin-left: 25px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
color: #999;
border:none;
}
#meta .pure-menu ul {
padding:20px 10px;
padding-top:0px;
}
#meta .pure-menu .pure-menu-selected {
background:#E7E7E7;
}
#meta .pure-menu li:hover {
background:#E4E4E4;
}
#meta .pure-menu li label,
#meta .pure-menu li a {
color:#777;
padding: 5px 20px;
margin:0px;
font-size: 14px;
line-height:22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#meta .menu-filter li:hover label,
#meta .menu-filter li:hover {
background:#E4E4E4;
cursor:pointer;
}
#meta .menu-filter li label {
display:inline-block;
vertical-align:middle;
}
#meta .menu-branch a:before {
font-family: 'FontAwesome';
font-size: 16px;
padding-right:10px;
}
#meta .menu-branch a[data-status='Started']:before,
#meta .menu-branch a[data-status='Pending']:before,
#meta .menu-branch a[data-status='Success']:before {
content: "\f00c";
color: #40C598;
}
#meta .menu-branch a[data-status='Error']:before,
#meta .menu-branch a[data-status='Failure']:before {
content: "\f00d";
color: #ed5564;
}
#meta .charts {
margin-top:30px;
text-align:center;
}
#meta .chart {
position:relative;
}
#meta .chart > span {
width: 100%;
height: 100%;
display: block;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 130px;
font-size: 26px;
font-family: 'Open Sans', sans-serif;
color: #aaa;
}
#meta .chart > span:after {
content:"%";
font-size:18px;
font-family: 'Open Sans', sans-serif;
color:#ccc;
}
#meta .chart-title {
text-align:center;
color:#aaa;
line-height:20px;
margin-bottom:30px;
margin-top:10px;
}
/* main content */
.header {
display:block;
border-bottom:1px solid #ddd;
min-height:81px;
max-height:81px;
padding:0px;
overflow:hidden;
}
.header .pure-g {
padding:0px 50px;
}
.header h1 {
margin:0px;
padding:0px;
font-size: 26px;
font-size: 22px;
color:#383C3B;
line-height:81px;
font-weight:normal;
}
.header h1 a,
.header h1 span {
color:#999;
}
.header h1 a,
.header h1 a:visited,
.header h1 a:active {
color:#999;
text-decoration:none;
}
.header h1 a:hover {
text-decoration:underline;
}
.header h1 .path-divider {
color:#999;
font-weight:normal;
}
.header h1 a:last-child {
color:#383C3B;
}
.header .pure-u-1-8 {
text-align:right;
}
.header .pure-button {
line-height:81px;
background:none;
color:#CCC;
font-size:26px;
padding:0px;
margin:0px;
text-align:center;
width:48px;
}
.header .pure-button:active{
box-shadow:none;
}
.header .pure-form input {
margin-top:20px;
padding:7px;
border:0px;
border-bottom:1px solid #ddd;
background:#f7f7f7;
border-radius:0px;
box-shadow:none;
font-size: 14px;
line-height: 20px;
color:#999;
}
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder,
::-webkit-input-placeholder {
/* figure this out */
}
/* commit list, on repository page */
.list {
padding:25px 35px;
}
.list .pure-u-1-8 {
text-align:right;
}
.commit-item:first-child {
padding-top:10px;
}
.commit-item:nth-child(even){
background:#F9F9F9;
}
.commit-item {
font-size:14px;
color:#777;
padding:25px 15px;
padding-left:25px;
}
.commit-item p {
color:#999;
font-size:14px;
padding:0px;
margin:0px;
padding-top:2px;
max-width:80%;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.commit-item img {
border-radius:50%;
width:48px;
height:48px;
}
.commit-item h3 {
display:inline-block;
font-weight:normal;
font-size:14px;
}
.commit-item a {
font-size: 18px;
color:#555;
text-decoration:none;
}
.commit-item h3 a:hover {
text-decoration:underline;
}
.commit-item .commit-date {
margin-left:8px;
}
.commit-item .commit-duration:before {
content:"\2022";
margin:0px 8px 0px 6px;
opacity:0.6;
}
.commit-item a[data-status='Started']:before,
.commit-item a[data-status='Pending']:before,
.commit-item a[data-status='Success']:before {
content: "\f00c";
color: #40C598;
font-family: 'FontAwesome';
font-size: 36px;
margin-right:20px;
line-height:48px;
min-width:48px;
max-width:48px;
float:left;
opacity:0.8;
}
.commit-item a[data-status='Error']:before,
.commit-item a[data-status='Failure']:before {
content: "\f00d";
color: #ed5564;
font-family: 'FontAwesome';
font-size: 36px;
margin-right:20px;
line-height:48px;
min-width:48px;
max-width:48px;
float:left;
}
.repo-item {
padding:15px 20px;
}
.repo-item h3 {
font-size:16px;
color:#555;
}
.repo-item h3 a {
font-size:16px;
color:#555;
text-decoration:none;
font-weight:normal;
}
.repo-item:nth-child(odd) {
background: #f9f9f9;
}
.repo-item .pure-u-1-4 {
text-align:right;
}
.repo-item .pure-u-1-4 a {
width: 30px;
text-align: center;
background: #ddd;
border-radius: 20px;
line-height: 30px;
font-size: 14px;
color: #fff;
margin-left: 10px;
display:inline-block;
}
.repo-item .pure-u-1-4 a.label-active {
width: 80px;
text-align: center;
background: #40C598;
color: #fff;
display:inline-block;
text-decoration:none;
margin:0px;
}
.user-item {
padding:15px 20px;
}
.user-item img {
border-radius:50%;
float:left;
margin-right:15px;
width:32px;
height:32px;
}
.user-item h3 {
font-size:18px;
color:#555;
font-weight:normal;
}
.user-item h3 small {
color:#999;
display:block;
}
.user-item:nth-child(odd) {
background: #f9f9f9;
}
.user-item .pure-u-1-4 {
text-align:right;
}
.user-item .pure-u-1-4 a,
.user-item .pure-u-1-4 button {
padding:0px;
margin:0px;
box-shadow: none;
width: 30px;
text-align: center;
background: #ddd;
border-radius: 20px;
line-height: 30px;
font-size: 14px;
color: #fff;
margin-left: 10px;
display:inline-block;
background:#ed5564;
border:none;
}
/* alerts */
.alert {
font-size: 15px;
padding: 15px 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.alert > span > span {
text-decoration:underline;
}
.alert:before {
font-family: 'FontAwesome';
font-size: 22px;
margin-right:20px;
float:left;
}
.alert[data-status='Success'] {
color: #339E7A;
background-color: #D9F3EA;
border-left: 5px solid #40C598;
}
.alert[data-status='Error'],
.alert[data-status='Failure'] {
color: #ed5564;
background-color: rgba(189, 54, 47, 0.2);
border-left: 5px solid #ed5564;
}
.alert[data-status='Pending'],
.alert[data-status='Started'] {
color: #f0ad4e;
background-color: #fcf8f2;
border-left: 5px solid #f0ad4e;
}
.alert[data-status='Success']:before {
content: "\f00c";
color: #40C598;
opacity:0.8;
}
.alert[data-status='Error']:before,
.alert[data-status='Failure']:before {
content: "\f00d";
color: #ed5564;
}
.alert[data-status='Pending']:before,
.alert[data-status='Started']:before {
content: "\f021";
color: #f0ad4e;
-webkit-animation: spin 1.5s infinite linear;
-moz-animation: spin 1.5s infinite linear;
-ms-animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
}
.alert-info {
background:#f4f8fa;
color: #5bc0de;
border-left: 5px solid #5bc0de;
}
.alert-info:before {
content: "\f05a";
}
.alert a:visited,
.alert a:active,
.alert a {
color: inherit;
}
/* build output */
pre {
white-space: pre-wrap;
background: #4E5151;
background: #383C3B;
background: #383C3B;
color: #FFF;
padding: 20px 20px;
border-radius: 5px;
font-size: 12px;
margin-top: 0px;
overflow: hidden;
font-family: 'Droid Sans Mono', 'monospace';
line-height: 20px;
border-radius: 3px;
margin-top: 25px;
}
pre:after {
content: "\f021";
color: #565859;
animation: spin 1.5s infinite linear;
-webkit-animation: spin 1.5s infinite linear;
-moz-animation: spin 1.5s infinite linear;
-ms-animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
font-family: 'FontAwesome';
font-size: 18px;
float: right;
}
.avatar-link {
float: right;
position: relative;
background: #eee;
padding: 5px;
text-decoration: none;
}
.avatar-link img {
width: 160px;
height: 160px;
max-width: 160px;
max-height: 160px;
min-width: 160px;
min-height: 160px;
}
.avatar-link span {
display: block;
text-align: center;
color: #777;
padding: 5px;
font-size:14px;
}
.avatar-link:hover:before {
color: #fff;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
font-family: 'FontAwesome';
content: "\f044";
position: absolute;
right: 10px;
top: 10px;
font-size: 16px;
}
.pure-button-primary {
background:#5bc0de;
}
.alert-info + .pure-button-primary {
margin-top:15px;
}
/* form control buttons */
.pure-form fieldset {
padding:0px;
}
.pure-form textarea,
.pure-form input[type=text],
.pure-form input[type=email],
.pure-form input[type=number],
.pure-form input[type=password],
.pure-form select {
box-shadow:none;
color:#838587;
font-size:14px;
}
.pure-form label {
color:#4e5154;
margin:20px 0px 5px 0px;
font-size:14px;
}
.pure-form .pure-control-group:first-child label {
margin-top:0px;
}
.pure-form p.help {
font-size:14px;
color:#A6A8AA;
}
.pure-controls {
margin-top:25px;
}
.pure-controls {
margin-top:25px;
}
.pure-controls .pure-button-primary {
background:#5bc0de;
border:1px solid #5bc0de;
color:#FFF;
border-radius:3px;
min-width:100px;
font-size:14px;
}
.pure-controls .pure-button-secondary {
background:none;
border:1px solid #5bc0de;
color:#5bc0de;
border-radius:3px;
min-width:100px;
font-size:14px;
}
.pure-menu.pure-menu-horizontal {
background: #f7f7f7;
padding: 0px 50px;
margin:0px;
}
.pure-menu.pure-menu-horizontal li {
font-size:14px;
margin:0px;
border:0px;
}
.pure-menu.pure-menu-horizontal a {
padding: 15px 20px;
margin:0px;
font-size:14px;
}
.pure-menu.pure-menu-horizontal .pure-menu-selected,
.pure-menu.pure-menu-horizontal .pure-menu-selected a {
background:#eee;
color:#777;
font-size:14px;
}
/*
Customized Headers
*/
details {
margin-bottom:20px;
}
summary {
display: block;
color: #999;
padding: 0px;
background: #F0F0F0;
padding: 12px 20px;
margin:0px;
margin-bottom:20px;
font-weight: normal;
font-size: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
cursor:pointer;
}
summary::-webkit-details-marker {
display:none;
}
summary:before {
font-family:'FontAwesome';
content:"\f055";
margin-right:15px;
}
details[open] summary:before {
font-family:'FontAwesome';
content:"\f056";
margin-right:15px;
}
summary:focus {
outline-style: none;
}
details textarea {
width:100%;
height:70px;
white-space: pre;
font-family:'Ubuntu Mono';
}
/* http://proto.io/freebies/onoff/ */
.pure-form .onoffswitch-label {
margin:0px;
}
.onoffswitch + span {
vertical-align: middle;
display: inline-block;
line-height: 30px;
margin-left:15px;
font-size:14px;
color:#777;
}
.pure-form .pure-control-group {
margin-bottom:15px;
}
.onoffswitch {
float:left;
display:inline-block;
position: relative; width: 100px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 0px solid #999999;
border-radius: 0px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner > div {
float: left; position: relative; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner .onoffswitch-active {
padding-left: 15px;
background-color: #E9E9E9; color: #FFFFFF;
}
.onoffswitch-inner .onoffswitch-inactive {
padding-right: 15px;
background-color: #E9E9E9; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
width: 40px; margin: 0px; text-align: center;
border: 0px solid #999999;border-radius: 0px;
position: absolute; top: 0; bottom: 0;
}
.onoffswitch-active .onoffswitch-switch {
background: #5BC0DE; left: 0;
}
.onoffswitch-inactive .onoffswitch-switch {
background: #BDBEBE; right: 0;
}
.onoffswitch-active .onoffswitch-switch:before {
content: " "; position: absolute; top: 0; left: 40px;
border-style: solid; border-color: #5BC0DE transparent transparent #5BC0DE; border-width: 15px 10px;
}
.onoffswitch-inactive .onoffswitch-switch:before {
content: " "; position: absolute; top: 0; right: 40px;
border-style: solid; border-color: transparent #BDBEBE #BDBEBE transparent; border-width: 15px 10px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}