github.com/marinho/drone@v0.2.1-0.20140504195434-d3ba962e89a7/cmd/droned/assets/css/drone.less (about)

     1  // I SINCERELY APOLOGIZE FOR ANYONE READING AND TRYING
     2  // TO UNDERSTAND THIS FILE. I PROMISE I WILL REFACTOR
     3  // AND CLEAN UP THIS MESS AS SOON AS I HAVE TIME!
     4  
     5  body {
     6  	background:#FFF;
     7  }
     8  
     9  // here we need to reset the container so that we are
    10  // displaying the page in non-responsive mode.
    11  .container {
    12    max-width: none !important;
    13    width: 940px;
    14    padding:0px;
    15  }
    16  
    17  // as part of displaying the page in non-responsive
    18  // mode we need to remove some weird negative margins
    19  // that exist on the rows, and columns.
    20  .row {
    21  	margin:0px;
    22  	padding:0px;
    23  }
    24  
    25  .col-xs-1,
    26  .col-xs-2,
    27  .col-xs-3,
    28  .col-xs-4,
    29  .col-xs-5,
    30  .col-xs-6,
    31  .col-xs-7,
    32  .col-xs-8,
    33  .col-xs-9 {
    34  	padding:0px;
    35  }
    36  
    37  
    38  .row > .col-xs-2:last-child,
    39  .row > .col-xs-3:last-child,
    40  .row > .col-xs-4:last-child,
    41  .row > .col-xs-5:last-child,
    42  .row > .col-xs-6:last-child,
    43  .row > .col-xs-7:last-child,
    44  .row > .col-xs-8:last-child,
    45  .row > .col-xs-9:last-child, {
    46  	padding-left:20px;
    47  }
    48  
    49  //---------------------------------------------------------------------
    50  // Navigation Bar
    51  
    52  .navbar-inverse {
    53    background: #262829;
    54    margin-bottom: 0px;
    55    .container {
    56    	padding-right:0px;
    57    }
    58  }
    59  
    60  .navbar-fixed-top, .navbar-fixed-bottom {
    61  	position:relative;
    62  }
    63  
    64  .navbar-inverse .navbar-brand {
    65  	padding: 21px 20px 0px 0px;
    66  	font-weight: normal;
    67  	text-shadow: none;
    68  	font-family: 'Orbitron';
    69  	font-size: 28px;
    70  	color: #DDDDDD;
    71  	margin-left: 0px !IMPORTANT;
    72  }
    73  
    74  .navbar .nav {
    75  	float:right;
    76  	margin-right:0px;
    77  }
    78  
    79  .navbar .nav > li > a {
    80  	padding: 18px 20px;
    81  }
    82  
    83  .navbar .nav > li > a.btn {
    84      padding: 7px 20px;
    85      margin: 0px;
    86      margin-top:11px;
    87      // TODO this should use a custom LESS function
    88      border-radius:4px;
    89        -webkit-border-radius:4px;
    90          -moz-border-radius:4px;
    91      background:#363839;
    92      border: none;
    93      box-shadow: none;
    94      text-shadow: none;
    95      color: #DDD;
    96      margin-left: 15px;
    97  }
    98  
    99  .navbar .nav > li > a.btn.btn-search,
   100  .navbar .nav > li > a.btn.btn-config {
   101      padding: 7px 15px;
   102  }
   103  
   104  //---------------------------------------------------------------------
   105  // Subheader on (pretty much) every page
   106  
   107  .subhead {
   108    margin-bottom:22px;
   109    background:#f4f4f4;
   110    border:none;
   111    position: relative;
   112    // DO I NEED THIS?
   113    -webkit-box-shadow: none;
   114       -moz-box-shadow: none;
   115            box-shadow: none;
   116  }
   117  
   118  .subhead h1 {
   119  	font-family: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
   120  	font-size:26px;
   121  	font-weight:normal;
   122  	color:#777;
   123  	line-height: 55px;
   124  	margin-top: 10px;
   125  	margin-bottom: 10px;
   126  	span {
   127  		padding-right:10px;
   128  	}
   129  	small {
   130  		color:#999;
   131  		font-size:60%;
   132  	}
   133  }
   134  
   135  .subhead h1.user {
   136  		span {
   137  			padding-left:10px;
   138  			font-size: 24px;
   139  			line-height: 24px;
   140  		}
   141  		img {
   142  			width:42px;
   143  			height:42px;
   144  			border-radius:50%;
   145  				-webkit-border-radius:50%;
   146  					-moz-border-radius:50%;
   147  		}
   148  		small {
   149  			color:#777;
   150  			font-size:60%;
   151  		}
   152  	}
   153  
   154  .subhead .container {
   155  	position:relative;
   156  	padding:0px;
   157  }
   158  
   159  // Give the tabs something to sit on
   160  .subhead .nav-tabs {
   161    //border-bottom: 1px solid #dee3e6;
   162    position:absolute;
   163    right:0px;
   164    bottom:0px;
   165    margin:0px;
   166    padding:0px;
   167    border-bottom:none;
   168  }
   169  // Make the list-items overlay the bottom border
   170  .subhead .nav-tabs > li {
   171    margin-bottom: 0px;
   172  }
   173  // Actual tabs (as links)
   174  // Actual tabs (as links)
   175  .subhead .nav-tabs > li > a {
   176    color:#999;
   177    padding:10px 20px;
   178    line-height:20px;
   179    border:0px;
   180  }
   181  
   182  .subhead .nav-tabs > li.active > a{
   183    color:#777;
   184    border:0px;
   185  }
   186  
   187  // 
   188  // nav-repos
   189  // --------------------------------------------
   190  
   191  .nav-repos,
   192  .nav-branches {
   193  	margin-top: 0px;
   194  	//margin-top:20px;
   195  	border:none;
   196  	li {
   197  		a {
   198  			line-height:22px;
   199  
   200  			margin-bottom: 0px;
   201  			padding: 5px 15px;
   202  			padding:10px 15px;
   203  			border:none;
   204  			margin:0px !IMPORTANT;
   205  			font-size:15px;
   206  			border-radius:0px;
   207  				-moz-border-radius:0px;
   208  					-webkit-border-radius:0px;
   209  			overflow:hidden;
   210  			white-space:nowrap;
   211  			text-overflow:ellipsis;
   212  			span {
   213  				color:#777;
   214  			}
   215  			span [class^="icon-"] {
   216  				color:#999;
   217  			}
   218  			i {
   219  				padding-right:10px;
   220  				color:#AAA;
   221  				font-size:18px;
   222  				vertical-align: middle;
   223  			}
   224  		}
   225  	}
   226  	li.active {
   227  		a {
   228  			background: #f4f4f4;
   229  		}
   230  		a:hover {
   231  			background: #f4f4f4;
   232  		}
   233  	}
   234  }
   235  
   236  .nav-repos .nav-header,
   237  .nav-branches .nav-header {
   238  	padding: 15px 15px;
   239  	margin-bottom: 0px;
   240  	color: #666;
   241  	font-size: 24px;
   242  	text-transform:lowercase;
   243  	font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   244  	font-weight: normal;
   245  	display:none;
   246  }
   247  
   248  .nav-repos,
   249  .nav-branches {
   250  	li {
   251  		a {
   252  			//border-top: 1px solid #EEE;
   253  			padding: 12px 15px;
   254  			margin-bottom:0px;
   255  			color:#777;
   256  		}
   257  	}
   258  }
   259  
   260  .nav-pills.nav-repos > li,
   261  .nav-repos > li {
   262  	&> a {
   263  		padding:13px 15px;
   264  	}
   265  	&:nth-child(odd) {
   266  		background: #f7f7f7;
   267  	}
   268  }
   269  .nav-repos > li > a span {
   270  	color:#AAA;
   271  	&:last-child {
   272  		color:#555;
   273  	}
   274  }
   275  
   276  .nav-pills.nav-branches > li > a {
   277  	padding:10px 15px;
   278  }
   279  
   280  // ALERTS
   281  
   282  .alert {
   283  	border: none;
   284  	border-radius: 0px;
   285  	background: #f4f4f4;
   286  	color: #999;
   287  	padding: 30px;
   288  	font-size: 18px;
   289  	margin-bottom: 20px;
   290  	.pull-right {
   291  		margin-top:-10px;
   292  	}
   293  }
   294  
   295  .alert .thumbnails {
   296  	margin:0px;
   297  	padding:0px;
   298  	li {
   299  		margin:0px;
   300  		padding:0px;
   301  		margin-left:20px;
   302  		margin-top:20px;
   303  	}
   304  
   305  	.thumbnail {
   306  		background:transparent;
   307  	}
   308  }
   309  
   310  .alert.alert-feed {
   311  	margin-top: 0px;
   312  	margin-bottom: 0px;
   313  	padding:15px 20px;
   314  
   315  	span {
   316  		line-height:50px;
   317  	}
   318  
   319  	span.label {
   320  		float:right;
   321  		color: #BBB;
   322  		font-size: 16px;
   323  		padding-right:10px;
   324  		font-weight:normal;
   325  	}
   326  
   327  	.thumbnails > li {
   328  		margin:0px;
   329  		margin-left:5px;
   330  		padding:0px;
   331  		display:inline-block;
   332  		a {
   333  			border: 0px;
   334  			padding: 0px;
   335  			img {
   336  				border-radius:50%;
   337  					-moz-border-radius:50%;
   338  						-webkit-border-radius:50%;
   339  				width: 32px;
   340  				height: 32px;
   341  				margin-top:10px;
   342  			}
   343  		}
   344  	}
   345  }
   346  
   347  .alert.alert-success {
   348  	color: #3c763d;
   349  	background-color: #dff0d8;
   350  
   351  	text-shadow: none;
   352  	font-size: 16px;
   353  	margin-top: 30px;
   354  	margin-bottom: 10px;
   355  }
   356  
   357  .alert.alert-error {
   358  	background: #ebccd1;
   359  	color: #a94442;
   360  
   361  	text-shadow: none;
   362  	font-size: 16px;
   363  	margin-top: 30px;
   364  	margin-bottom: 10px;
   365  }
   366  
   367  // 
   368  // build list
   369  // --------------------------------------------
   370  
   371  .commit-list {
   372    list-style: none;
   373    margin:0px;
   374    padding-left:0px;
   375  }
   376  
   377  
   378  
   379  .commit-list > li {
   380  	margin:0px;
   381  	position:relative;
   382  	padding:25px 20px;
   383  	padding-left:25px;
   384  	list-style:none;
   385  
   386  	&> img {
   387  		position: absolute;
   388  		right: 20px;
   389  		top: 20px;
   390  		-webkit-border-radius: 50%;
   391  		-moz-border-radius: 50%;
   392  		border-radius: 50%;
   393  		width: 48px;
   394  		height: 48px;
   395  		background: #EEE;
   396  	}
   397  }
   398  
   399  .commit-list > li:last-child {
   400  	border-bottom:none;
   401  }
   402  
   403  .commit-list > li:nth-child(even) {
   404  	background:#f7f7f7;
   405  }
   406  
   407  .commit-list.commit-list-alt > li:nth-child(even) {
   408  	background:#fff;
   409  }
   410  
   411  .commit-list.commit-list-alt > li:nth-child(odd) {
   412  	background:#f7f7f7;
   413  }
   414  
   415  .commit-list > li > h3 {
   416  	display:inline;
   417  	line-height:18px;
   418  	height:18px;
   419  	font-weight:normal;
   420  	color: #777;
   421  	font-size: 18px;
   422  	margin-top:10px;
   423  	a, span {
   424  		margin-top:2px;
   425  		display:inline-block;
   426  	}
   427  	a {
   428  		color:#555;
   429  		text-decoration:none;
   430  		&:hover {
   431  			text-decoration:underline;
   432  		}
   433  	}
   434  	small {
   435  		font-size:14px;
   436  		display:inline-block;
   437  		margin-left:5px;
   438  		white-space:nowrap;
   439  	}
   440  	p {
   441  		font-size:14px;
   442  		color:#999;
   443  		margin:0px;
   444  		padding:0px;
   445  		padding-top:2px;
   446  		display: block;
   447  		overflow: hidden;
   448  		white-space: nowrap;
   449  		text-overflow: ellipsis;
   450  		max-width: 350px;
   451  	}
   452  }
   453  
   454  
   455  // BUTTONS
   456  
   457  .btn.btn-Success,
   458  .btn.btn-Failure,
   459  .btn.btn-Pending,
   460  .btn.btn-Started,
   461  .btn.btn-Error,
   462  .btn.btn-None {
   463  
   464  	border: none;
   465  	background: #BBB;
   466  	color: #FFF;
   467  	font-weight: normal;
   468  	text-shadow: none;
   469  	box-shadow: none;
   470  	padding: 10px 15px;
   471  	font-size: 16px;
   472  	min-width:75px;
   473  	float:left;
   474  	margin-right:25px;
   475  	font-size:16px;
   476  	text-transform:none;
   477  	font-weight:normal;
   478  
   479  	padding: 0px;
   480  	border-bottom: 0px;
   481  	width: 48px;
   482  	height: 48px;
   483  	min-height: 48px;
   484  	max-height: 48px;
   485  	min-width: 48px;
   486  	max-width: 48px;
   487      border-radius:50%;
   488        -webkit-border-radius:50%;
   489          -moz-border-radius:50%;
   490  }
   491  
   492  .btn.btn-success,
   493  .btn.btn-Success {
   494  	background:rgba(81, 163, 81, 0.75);
   495  }
   496  .btn.btn-failure, 
   497  .btn.btn-Failure,
   498  .btn.btn-Error {
   499  	background:rgba(189, 54, 47, 0.8);
   500  }
   501  
   502  .btn.btn-Scheduled,
   503  .btn.btn-Pending,
   504  .btn.btn-Started {
   505  	background: #D5E802;
   506  }
   507  
   508  .btn.btn-Success:before {
   509  	content: "\f00c";
   510  	font-family: 'FontAwesome';
   511  	font-size: 22px;
   512  	line-height: 48px;
   513  	opacity:0.8;
   514  	color:#FFF;
   515  }
   516  .btn.btn-Error:before,
   517  .btn.btn-Failure:before {
   518  	content: "\f00d";
   519  	font-family: 'FontAwesome';
   520  	font-size: 22px;
   521  	line-height: 48px;
   522  	opacity:0.8;
   523  	color:#fff;
   524  }
   525  
   526  .btn.btn-refresh {
   527  	position: absolute;
   528  	left: -95px;
   529  	float: left;
   530  	background: #f7f7f7;
   531  	width: 75px;
   532  	border-radius: 0px;
   533  	-webkit-border-radius: 0px;
   534  	-moz-border-radius: 0px;
   535  	text-align: center;
   536  	font-size: 22px;
   537  	text-decoration: none;
   538  	color: #999;
   539  	padding:10px 0px;
   540  	z-index:1;
   541  	span {
   542  		display:block;
   543  		font-size:14px;
   544  		padding-top:5px;
   545  	}
   546  }
   547  
   548  .btn.btn-Started:before,
   549  .btn.btn-Scheduled:before,
   550  .btn.btn-Pending:before {
   551  	content: "\f021";
   552  	font-family: 'FontAwesome';
   553  	font-size: 22px;
   554  	line-height: 48px;
   555  	color:#FFF;
   556  
   557      display: inline-block;
   558  
   559      -webkit-animation: spin 1.5s infinite linear;
   560      -moz-animation: spin 1.5s infinite linear;
   561      -ms-animation: spin 1.5s infinite linear;
   562      -o-animation: spin 1.5s infinite linear;
   563      animation: spin 1.5s infinite linear;
   564  }
   565  
   566  .btn.btn-mini {
   567  	width:24px;
   568  	height:24px;
   569  	max-width:24px;
   570  	max-height:24px;
   571  	min-width:24px;
   572  	min-height:24px;
   573  }
   574  
   575  .btn.btn-mini.btn-Success:before,
   576  .btn.btn-mini.btn-Failure:before,
   577  .btn.btn-mini.btn-Error:before,
   578  .btn.btn-mini.btn-Started:before,
   579  .btn.btn-mini.btn-Scheduled:before,
   580  .btn.btn-mini.btn-Pending:before {
   581  	line-height:24px !IMPORTANT;
   582  	font-size:14px !IMPORTANT;
   583  }
   584  
   585  @-webkit-keyframes spin {
   586      to { -webkit-transform: rotate(360deg); }
   587  }
   588  
   589  @-moz-keyframes spin {
   590      to { -moz-transform: rotate(360deg); }
   591  }
   592  
   593  @-ms-keyframes spin {
   594      to { -ms-transform: rotate(360deg); }
   595  }
   596  
   597  @-o-keyframes spin {
   598      to { -o-transform: rotate(360deg); }
   599  }
   600  
   601  @keyframes spin {
   602      to { transform: rotate(360deg); }
   603  }
   604  
   605  
   606  .btn.btn-None {
   607  	//background: #ebebeb;
   608  	//border-bottom: 2px solid #CCC;
   609  	//color: #737373;
   610  	background:rgba(81, 163, 81, 0.75);
   611  	border-bottom:2px solid rgba(81, 163, 81, 1);
   612  }
   613  
   614  
   615  .btn.btn-default {
   616  	padding:7px 20px;
   617  	padding-bottom:6px;
   618  	border-bottom-width: 2px;
   619  	color:#777;
   620  }
   621  
   622  .btn.btn-primary, {
   623  	background:rgba(251, 136, 35, 0.85);
   624  	padding:7px 20px;
   625  	border:none;
   626  	border-bottom: 2px solid #cd6d1d;
   627  	&:hover, &:active {
   628  		background:rgba(251, 136, 35, 1);
   629  		border-bottom: 2px solid #cd6d1d;
   630  	}
   631  }
   632  
   633  .btn.btn-danger {
   634  	border:none;
   635  	padding:7px 20px;
   636  	background: rgba(189, 54, 47, 0.8);
   637  	border-bottom: 2px solid #bd362f;
   638  	&:hover, &:active {
   639  		background:rgba(189, 54, 47, 0.9);
   640  		border-bottom: 2px solid #bd362f;
   641  	}
   642  }
   643  
   644  ///////////////////////////////////////////////////////
   645  ///////////////////////////////////////////////////////
   646  // NAV PILLS
   647  
   648  .nav-pills > li {
   649  	//margin-top: 2px;
   650  	a {
   651  		padding:7px 15px;
   652  		color: rgb(119, 119, 119);
   653  	}
   654  }
   655  
   656  
   657  .nav-pills > li > a,
   658  .nav-pills > li > a:hover,
   659  .nav-pills > li > a:focus{
   660  	border-radius:0px;
   661  		-webkit-border-radius:0px;
   662  			-moz-border-radius:0px;
   663  	//margin-top:0px;
   664  	//padding:7px 15px;
   665  }
   666  
   667  .nav-pills > .active {
   668  	border-radius:0px;
   669  		-webkit-border-radius:0px;
   670  			-moz-border-radius:0px;
   671  	//margin-top:0px;
   672  }
   673  
   674  .nav-pills>li.active>a,
   675  .nav-pills>li.active>a:hover,
   676  .nav-pills>li.active>a:focus,
   677  .nav-pills > .active > a,
   678  .nav-pills > .active > a:hover,
   679  .nav-pills > .active > a:focus{
   680  	border-radius:0px;
   681  		-webkit-border-radius:0px;
   682  			-moz-border-radius:0px;
   683  	//margin-bottom:0px;
   684  	margin-top:0px;
   685  	background-color: #f4f4f4;
   686  	color: rgb(119, 119, 119);
   687  
   688  }
   689  
   690  //////////////////////////////////////
   691  // FORM
   692  
   693  form label {
   694  	color: #777;
   695  	margin-top: 25px;
   696  	margin-bottom: 7px;
   697  	margin-left: 2px;
   698  	cursor:default;
   699  	font-weight:normal;
   700  	display:block;
   701  
   702  	&:first-child {
   703  		margin-top:0px;
   704  	}
   705  }
   706  
   707  form .form-actions {
   708  	background:transparent;
   709  	padding:30px 0px;
   710  	margin:0px;
   711  	border:none;
   712  
   713  	.btn {
   714  		margin-right:3px;
   715  	}
   716  }
   717  
   718  form .form-group {
   719  	margin-bottom:30px;
   720  }
   721  
   722  input.form-control,
   723  select.form-control {
   724  	display: inline-block;
   725  	height: 30px;
   726  	padding: 4px 6px;
   727  	margin-bottom: 0px;
   728  	font-size: 14px;
   729  	line-height: 20px;
   730  	color: #555555;
   731  	-webkit-border-radius: 4px;
   732  	-moz-border-radius: 4px;
   733  	border-radius: 4px;
   734  	vertical-align: middle;
   735  
   736  	width:270px;
   737  }
   738  
   739  input.form-control-small,
   740  select.form-control-small {
   741  	width: 90px;
   742  }
   743  
   744  input.form-control-large,
   745  select.form-control-large  {
   746  	width: 210px;
   747  }
   748  
   749  input.form-control-xlarge,
   750  select.form-control-xlarge {
   751  	width: 270px;
   752  }
   753  
   754  span.form-control {
   755  	color: #999999;
   756  	background-color: #fcfcfc;
   757  	border-color: #cccccc;
   758      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
   759        -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
   760      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
   761      cursor: not-allowed;
   762  }
   763  
   764  textarea {
   765    font-family: 'Droid Sans Mono', monospace;
   766  }
   767  
   768  ///////////////////////////////
   769  
   770  ////////////////////////////////
   771  
   772  .avatar-link {
   773  	float:right;
   774  	position:relative;
   775  	background:#eee;
   776  	padding:5px;
   777  	text-decoration:none;
   778  	span {
   779  		display: block;
   780  		text-align: center;
   781  		color: #777;
   782  		padding: 5px;
   783  	}
   784  	img {
   785  		width:160px;
   786  		height:160px;
   787  		max-width:160px;
   788  		max-height:160px;
   789  		min-width:160px;
   790  		min-height:160px;
   791  	}
   792  	&:hover {
   793  		text-decoration:none;
   794  		&:before {
   795  			color: #fff;
   796  			text-shadow: 1px 1px rgba(0,0,0,0.5);
   797  			font-family:'FontAwesome';
   798  			content:"\f044";
   799  			position:absolute;
   800  			right:10px;
   801  			top:10px;
   802  			font-size:16px;
   803  		}
   804  	}
   805  }
   806  
   807  ///////////////////////////
   808  
   809  .row.gravatar-list {
   810  	margin-left:0px;
   811  	.col-xs-3 {
   812  		width:23.404255319148934%;
   813  		margin:0px;
   814  		padding:0px;
   815  		margin-right:2.127659574468085%;
   816  		&:nth-child(4) {
   817  			margin-right:0px;
   818  		}
   819  		a.thumbnail, a.thumbnail:hover {
   820  			border-radius:0px;
   821  				-webkit-border-radius:0px;
   822  					-moz-border-radius:0px;
   823  			box-shadow:none;
   824  			border:none;
   825  			text-decoration:none;
   826  			background:#f4f4f4;
   827  			img {
   828  				width:156px;
   829  				height:156px;
   830  			}
   831  			.caption > h3 {
   832  				font-weight:normal;
   833  				text-align:center;
   834  				font-size:15px;
   835  				padding: 0px;
   836  				line-height: 16px;
   837  				margin: 0px;
   838  				max-width: 156px;
   839  				overflow: hidden;
   840  				white-space: nowrap;
   841  				text-overflow: ellipsis;
   842  				color:rgb(85, 85, 85);
   843  			}
   844  			&.team-add {
   845  				&> span {
   846  					min-width:156px;
   847  					min-height:156px;
   848  					display:inline-block;
   849  					text-align: center;
   850  					vertical-align: middle;
   851  					line-height: 156px;
   852  					font-size: 64px;
   853  					color: #d7d7d7;
   854  				}
   855  				.caption > h3 {
   856  					color: #999;
   857  				}
   858  			}
   859  		}
   860  	}
   861  }
   862  
   863  
   864  
   865  
   866  
   867  
   868  
   869  ////////////////////////////////////////
   870  // SWITCH
   871  
   872  /* Checkbox hack */
   873  .switch input,
   874  .switch a {
   875  	cursor: pointer;
   876  	height: 100%;
   877  	opacity: 0;
   878  	position: absolute;
   879  	width: 100%;
   880  	z-index: 100;
   881  }
   882  
   883  /* Container */
   884  .switch {
   885  	height: 40px;
   886  	position: relative;
   887  	width: 100px;
   888  }
   889  
   890  /* Background unchecked */
   891  .switch label {
   892  	background: rgba(189, 54, 47, 0.8);
   893  	border-radius: 2px;
   894  	display: block;
   895  	height: 100%;
   896  	position: relative;
   897  	transition: all .15s ease;
   898   	width: 100%;
   899   	border-radius:5px;
   900  	color:#FFF;
   901  }
   902  
   903  /* Slider unchecked */
   904  .switch label div {
   905  	background: #fff;
   906  	border-radius: 2px;
   907  	display: block;
   908  	height: 28px;
   909  	left: 6px;
   910  	position: absolute;
   911  	top: 6px;
   912  	transition: all .15s ease;
   913  	width: 35px;
   914  	z-index: 3; 
   915  	border-radius:5px;
   916  }
   917  
   918  /* Vertical lines on slider */
   919  .switch label div:before {
   920  	bottom: 0;
   921  	content: '';
   922  	display: block;
   923  	height: 15px;
   924  	left: 0;
   925  	margin: auto;
   926  	position: absolute;
   927  	right: 0;
   928  	top: 0;
   929  	transition: all .15s ease;
   930  	width: 3px;
   931  	//box-shadow: -6px 0 0 0 #d3d3d3, 6px 0 0 0 #d3d3d3;
   932  }
   933  
   934  /* Icon styles */
   935  .switch .fontawesome-ok {
   936  	font-size: 18px;
   937  	left: 15px;
   938  	position: relative;
   939  	top: 8px;
   940  	z-index: 2;
   941  }
   942  
   943  .switch .fontawesome-ok:before {
   944  	font-family: 'FontAwesome';
   945  	content:"\f00c";
   946  	opacity:0.8;
   947  }
   948  
   949  
   950  .switch .fontawesome-remove {
   951  	font-size: 18px;
   952  	left: 45px;
   953  	position: relative;
   954  	top: 8px;
   955  	z-index: 2;
   956  }
   957  
   958  .switch .fontawesome-remove:before {
   959  	font-family: 'FontAwesome';
   960  	content:"\f00d";
   961  	opacity:0.8;
   962  }
   963  
   964  /* Checked States */
   965  .switch input:checked~label {
   966  	background: rgba(81, 163, 81, 0.75);
   967  }
   968  
   969  .switch input:checked~label div {
   970  	left: 58px;
   971  }
   972  
   973  
   974  /////// BUID OUTPUT
   975  
   976  pre {
   977          white-space: pre-wrap;
   978          background: #464849;
   979          color: #FFF;
   980          padding: 20px 20px;
   981          border-radius: 5px;
   982          font-size: 12px;
   983          margin-top: 0px;
   984          overflow: hidden;
   985          font-family:'Droid Sans Mono', 'monospace';
   986          line-height: 20px
   987  
   988  }
   989  
   990  .alert.alert-build-Success,
   991  .alert.alert-build-Error,
   992  .alert.alert-build-Failure,
   993  .alert.alert-build-Pending,
   994  .alert.alert-build-Started {
   995          text-shadow:none;
   996          margin-top:5px;
   997          margin-bottom:30px;
   998          font-size:15px;
   999          padding:15px 20px;
  1000      border-radius:5px;
  1001        -webkit-border-radius:5px;
  1002          -moz-border-radius:5px;
  1003  
  1004          span {
  1005                  line-height:32px;
  1006                  span {
  1007                          text-decoration:underline;
  1008                  }
  1009          }
  1010  
  1011          a.btn {
  1012                  width:32px;
  1013                  height:32px;
  1014                  max-width:32px;
  1015                  max-height:32px;
  1016                  min-width:32px;
  1017                  min-height:32px;
  1018                  margin-right:20px !IMPORTANT;
  1019                  &:before {
  1020                          font-size: 22px !IMPORTANT;
  1021                          line-height: 32px !IMPORTANT;
  1022                  }
  1023          }
  1024  }
  1025  
  1026  .build-details {
  1027  
  1028          dt {
  1029                  float:left;
  1030                  width:90px;
  1031                  color:#333;
  1032                  font-weight:normal;
  1033                  &:after {
  1034                          content:':';
  1035                  }
  1036          }
  1037          dd {
  1038                  color:#555;
  1039                  white-space:nowrap;
  1040          }
  1041  
  1042          .build-summary {
  1043                  float:left;
  1044                  width:300px;
  1045                  padding-left:20px;
  1046          }
  1047  
  1048          img {
  1049                  float:left;
  1050  				-webkit-border-radius:50%;
  1051  				-moz-border-radius:50%;
  1052                  border-radius:50%;
  1053                  margin-right: 30px;
  1054                  width: 58px;
  1055                  height: 58px;
  1056          }
  1057  
  1058          .commit-summary {
  1059                  float:left;
  1060  				width: 500px;
  1061  
  1062                  dd {
  1063                  	overflow: hidden;
  1064  					text-overflow: ellipsis;
  1065  					max-width: 450px;
  1066                  }
  1067          }
  1068  
  1069          background:#FFF;
  1070          margin-bottom:40px;
  1071  
  1072  
  1073  
  1074  }
  1075  
  1076  .build-details.affix {
  1077          top: 0px;
  1078          padding-top:15px;
  1079          padding-bottom:30px;
  1080  }
  1081  .build-details.affix-top {
  1082  }
  1083  
  1084  .alert.alert-build-Success {
  1085          color: #468847;
  1086          background-color: #dff0d8;
  1087          border-color: #d6e9c6;
  1088  }
  1089  
  1090  .alert.alert-build-Error,
  1091  .alert.alert-build-Failure {
  1092          background-color:#f2dede;
  1093          color:#b94a48;
  1094  }
  1095  
  1096  .alert.alert-build-Pending,
  1097  .alert.alert-build-Started {
  1098          color: #c09853;
  1099          background: rgba(213, 232, 2, 0.2);
  1100          background-color: rgba(213, 232, 2, 0.2);
  1101  }
  1102  
  1103  
  1104  
  1105  
  1106  
  1107  
  1108  // new repo form
  1109  
  1110  .form-repo {
  1111          .field-group {
  1112                  display:inline-block;
  1113                  margin-bottom:30px;
  1114                  label {
  1115                          margin-top:0px;
  1116                  }
  1117          }
  1118          .field-separator {
  1119                  display:inline-block;
  1120                  font-size:20px;
  1121          }
  1122  
  1123          ul {
  1124                  padding-top:15px;
  1125                  margin-bottom:0px;
  1126                  padding-bottom:0px;
  1127                  list-style: none;
  1128                  padding-left:0px;
  1129                  margin-left:0px;
  1130                  li {
  1131                          padding-bottom:10px;
  1132                          img {
  1133                                  width:32px;
  1134                                  height:32px;
  1135                                  border-radius:50%;
  1136                                  	-webkit-border-radius:50%;
  1137                                  	    -moz-border-radius:50%;
  1138                                  margin-left:10px;
  1139                                  margin-right:10px;
  1140                          }
  1141                  }
  1142          }
  1143  }
  1144  
  1145          ul.account-radio-group {
  1146                  padding-top:15px;
  1147                  margin-bottom:0px;
  1148                  padding-bottom:0px;
  1149                  list-style: none;
  1150                  padding-left:0px;
  1151                  margin-left:0px;
  1152                  li {
  1153                          padding-bottom:10px;
  1154                          img {
  1155                                  width:32px;
  1156                                  height:32px;
  1157                                  border-radius:50%;
  1158                                  	-webkit-border-radius:50%;
  1159                                  	    -moz-border-radius:50%;
  1160                                  margin-left:10px;
  1161                                  margin-right:10px;
  1162                          }
  1163                  }
  1164          }
  1165  
  1166  
  1167  
  1168  // LOGIN FORM
  1169  
  1170  .form-centered {
  1171          background:#FFF;
  1172          overflow:hidden;
  1173          max-width: 350px;
  1174          margin: 0 auto;
  1175          text-align: center;
  1176          margin-top: 40px;
  1177          padding: 0px 0px 20px 0px;
  1178                                  border-radius:5px;
  1179                                  	-webkit-border-radius:5px;
  1180                                  	    -moz-border-radius:5px;
  1181  
  1182          h1 {
  1183              background-color: #262829;
  1184              color: #FFF;
  1185              border-top-left-radius: 5px;
  1186              border-top-right-radius: 5px;
  1187              font-family: 'Orbitron';
  1188              font-weight: normal;
  1189              font-size: 18px;
  1190              padding: 25px 10px;
  1191              margin-top:0px;
  1192              margin-bottom:30px;
  1193          }
  1194  
  1195          input[type="submit"] {
  1196  
  1197                  border:none;
  1198                  color: #FFF;
  1199                  padding: 10px;
  1200                  font-size: 18px;
  1201                  margin-top: 30px;
  1202                  margin-bottom: 10px;
  1203                  width: 280px;
  1204                  background: #AAA;
  1205                                  border-radius:5px;
  1206                                  	-webkit-border-radius:5px;
  1207                                  	    -moz-border-radius:5px;
  1208          }
  1209  
  1210          input[type="text"],
  1211          input[type="email"],
  1212          input[type="password"] {
  1213                  margin-bottom: 0px;
  1214                  font-size: 16px;
  1215                  padding: 10px;
  1216                  width: 280px;
  1217                  height:40px;
  1218                  &:last-child {
  1219                          border-top-width: 0px;
  1220                          border-top-right-radius: 0px;
  1221                          border-top-left-radius: 0px;
  1222                  }
  1223                  &:first-child {
  1224                          border-bottom-right-radius: 0px;
  1225                          border-bottom-left-radius: 0px;
  1226                  }
  1227                  &[disabled] {
  1228                          box-shadow: none;
  1229                          background: #f7f7f7;
  1230                          color: #999;
  1231                          text-shadow: none;
  1232                  }
  1233                  &.only-child {
  1234                          border-bottom-right-radius: 4px;
  1235                          border-bottom-left-radius: 4px;
  1236                          border-top-right-radius: 4px;
  1237                          border-top-left-radius: 4px;
  1238                          border-bottom-width: 1px;
  1239                          border-top-width: 1px;
  1240                  }
  1241          }
  1242  
  1243          a, a:visited {
  1244                  color:#999;
  1245                  text-decoration:underline;
  1246          }
  1247  
  1248          h1~div.alert  {
  1249                  margin-top:-30px;
  1250          }
  1251  
  1252          .alert.alert-danger {
  1253              background: #ebccd1;
  1254              color: #a94442;
  1255              text-shadow: none;
  1256              font-weight: normal;
  1257              font-size: 16px;
  1258              padding: 20px;
  1259              margin-bottom:30px;
  1260          }
  1261  
  1262          .alert.alert-success {
  1263                  color: #3c763d;
  1264                  background-color: #dff0d8;
  1265              text-shadow: none;
  1266              font-weight: normal;
  1267              font-size: 16px;
  1268              padding: 20px;
  1269              margin-bottom:30px;
  1270          }
  1271  }
  1272  
  1273  .url {
  1274    word-break: break-all;
  1275  }
  1276  
  1277  #follow {
  1278    position: relative;
  1279    z-index: 100;
  1280    float: right;
  1281    right: 1em;
  1282    top: -2.5em;
  1283    padding: 0 1em;
  1284    border-radius: 7px;
  1285    background: #999;
  1286    cursor: pointer;
  1287  }
  1288  
  1289