bootswatch.less 9.97 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
2
// Cyborg 2.2.1
// Bootswatch
Thomas Park's avatar
Thomas Park committed
3
4
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
5

Thomas Park's avatar
Thomas Park committed
6
7
8
// TYPOGRAPHY
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
9
@import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700');
Thomas Park's avatar
Thomas Park committed
10

Thomas Park's avatar
Thomas Park committed
11
12
13
label, input, button, select, textarea,
.navbar .search-query:-moz-placeholder,
.navbar .search-query::-webkit-input-placeholder {
Thomas Park's avatar
Thomas Park committed
14
15
16
	font-family: 'Droid Sans', sans-serif;
	color: @gray;
}
Thomas Park's avatar
Thomas Park committed
17

Thomas Park's avatar
Thomas Park committed
18
19
20
21
22
23
24
25
26
27
code, pre {
	background-color: @grayLighter;
}

blockquote {
	border-left: 5px solid @blue;

	&.pull-right {
		border-right: 5px solid @blue;
	}
Thomas Park's avatar
Thomas Park committed
28
29
30
31
32
}

// SCAFFOLDING
// -----------------------------------------------------

33
34
35
36
html {
	min-height: 100%;
}

Thomas Park's avatar
Thomas Park committed
37
body {
38
	min-height: 100%;
Thomas Park's avatar
Thomas Park committed
39
	#gradient > .vertical (@bodyBackground, #252A30);
Thomas Park's avatar
Thomas Park committed
40
41
42
}

.page-header {
43
	border-bottom: 2px solid @blue
Thomas Park's avatar
Thomas Park committed
44
45
46
47
48
}

// NAVBAR
// -----------------------------------------------------

49
.navbar {
Thomas Park's avatar
Thomas Park committed
50

Thomas Park's avatar
Thomas Park committed
51
52
	font-size: 16px;

53
	.navbar-inner {
Thomas Park's avatar
Thomas Park committed
54
55
56
		.border-radius(0);
		.box-shadow(none);
		border-bottom: 2px solid @blue
57
	}
Thomas Park's avatar
Thomas Park committed
58

59
	.brand {
Thomas Park's avatar
Thomas Park committed
60
61
62
63
		padding: 12px 20px 11px;
		color: @grayLighter;
		font-weight: normal;
		text-shadow: none;
64
	}
Thomas Park's avatar
Thomas Park committed
65

Thomas Park's avatar
Thomas Park committed
66
67
	li {
		line-height: 19px;
Thomas Park's avatar
Thomas Park committed
68
69
	}

Thomas Park's avatar
Thomas Park committed
70
	.nav > li > a {
71
		padding: 13px 10px 8px;
Thomas Park's avatar
Thomas Park committed
72
73
		border-bottom: 3px solid transparent;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
Thomas Park's avatar
Thomas Park committed
74

75
76
77
78
		&:hover {
			border-bottom: 3px solid @blue
		}
	}
Thomas Park's avatar
Thomas Park committed
79

Thomas Park's avatar
Thomas Park committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
	.nav > .active > a {
		border-bottom: 3px solid @blue;
	}

	.nav .active > a,
	.nav .active > a:hover,
	.nav .active > a:focus {
		.box-shadow(none);
	}

	.nav > li > .dropdown-menu::before,
	.nav > li > .dropdown-menu::after {
		display: none;
	}

	.dropdown-menu li > a:hover,
	.dropdown-menu li > a:focus,
	.dropdown-submenu:hover > a {
		background-image: none;
	}

	.navbar-text {
		margin-left: 15px;
		margin-right: 15px;
		line-height: 43px;
105
	}
Thomas Park's avatar
Thomas Park committed
106

107
108
109
110
111
112
113
114
	.search-query,
	.search-query:focus,
	.search-query.focused {
		color: @grayLight;
		text-shadow: none;
		background-color: #222;
		.border-radius(1px);
		.placeholder(@gray);
Thomas Park's avatar
Thomas Park committed
115
116
	}

117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
	&-inverse {

		.navbar-inner {
			border: none;
			border-bottom: 3px solid @black;
		}

		.brand:hover {
			border-bottom: none;
			background-color: @black;
		}

		.nav li > a:hover {
			border-bottom-color: transparent;
		}

		.nav .active > a {
			border-bottom-color: transparent;
		}
	}
}

@media (max-width: @navbarCollapseWidth) {

	.navbar .nav-collapse {
Thomas Park's avatar
Thomas Park committed
142

Thomas Park's avatar
Thomas Park committed
143
		.nav li > a {
144
			border: none;
Thomas Park's avatar
Thomas Park committed
145
146
147
			color: @grayLighter;
			font-weight: normal;
			text-shadow: none;
Thomas Park's avatar
Thomas Park committed
148

Thomas Park's avatar
Thomas Park committed
149
			&:hover {
150
				border: none;
Thomas Park's avatar
Thomas Park committed
151
152
153
				background-color: @blue;
			}
		}
Thomas Park's avatar
Thomas Park committed
154

Thomas Park's avatar
Thomas Park committed
155
		.nav .active > a {
156
157
158
159
160
			border: none;
			background-color: @blue;
		}

		.dropdown-menu a:hover {
Thomas Park's avatar
Thomas Park committed
161
162
163
164
165
166
167
168
169
170
171
172
			background-color: @blue;
		}

		.navbar-form,
		.navbar-search {
			border-top: none;
			border-bottom: none;
		}

		.nav-header {
			color: rgba(128, 128, 128, 0.6);
		}
173
	}
Thomas Park's avatar
Thomas Park committed
174

175
	.navbar-inverse .nav-collapse {
Thomas Park's avatar
Thomas Park committed
176
177

		.nav li > a:hover {
178
			background-color: #111;
Thomas Park's avatar
Thomas Park committed
179
180
181
		}

		.nav .active > a {
182
183
184
185
186
187
188
			background-color: #111;
		}

		.nav li.dropdown.open > .dropdown-toggle,
		.nav li.dropdown.active > .dropdown-toggle,
		.nav li.dropdown.open.active > .dropdown-toggle {
			background-color: #111;
Thomas Park's avatar
Thomas Park committed
189
190
		}
	}
Thomas Park's avatar
Thomas Park committed
191
192
193
194
195
196
197
}

div.subnav {
	position: static;
	background-color: @grayDarker;
	background-image: none;
	border: 0;
Thomas Park's avatar
Thomas Park committed
198
199


200
201
202
203
204
	&.subnav-fixed {
		position: relative;
		left: -1px;
		top: auto;
	}
Thomas Park's avatar
Thomas Park committed
205

206
207
208
209
210
211
212
	.nav > li > a,
	.nav .active a {
		background-color: @grayDarker;
		border-left: 1px solid #222;
		border-right: 0;
		color: @grayLighter;
	}
Thomas Park's avatar
Thomas Park committed
213

214
215
216
	.nav li.nav-header {
		text-shadow: none;
	}
Thomas Park's avatar
Thomas Park committed
217

218
219
220
221
222
223
224
225
	.nav > li > a:hover,
	.nav > li.active > a:hover,
	.nav > li:first-child > a:hover {
		background: transparent;
		border-bottom: 2px solid @blue;
		border-left: 1px solid #222;
		color: @white;
	}
Thomas Park's avatar
Thomas Park committed
226

227
	.nav .open .dropdown-toggle {
Thomas Park's avatar
Thomas Park committed
228
229
230
231
232
		border: 0;
		border-left: 1px solid #222;
	    border-bottom: 2px solid @blue;
		background-color: #060606;
	}
Thomas Park's avatar
Thomas Park committed
233

234
	.nav .open .dropdown-menu {
Thomas Park's avatar
Thomas Park committed
235
		background-color: @grayDarker;
236
		border-left: solid 1px rgba(255, 255, 255, 0.1);
237

Thomas Park's avatar
Thomas Park committed
238
239
240
241
242
243
244
		li > a:hover {
			border-bottom: 0;
			background: @blue;
		}
	}
}

Thomas Park's avatar
Thomas Park committed
245
// NAV
Thomas Park's avatar
Thomas Park committed
246
247
248
// -----------------------------------------------------

.nav-tabs {
Thomas Park's avatar
Thomas Park committed
249

Thomas Park's avatar
Thomas Park committed
250
	border-bottom: 1px solid #222;
Thomas Park's avatar
Thomas Park committed
251

252
253
254
255
256
257
258
	li > a:hover,
	li.active > a,
	li.active > a:hover {
		border: 1px solid #222;
		background-color: @blue;
		color: @white;
	}
Thomas Park's avatar
Thomas Park committed
259

260
261
262
263
	.open .dropdown-toggle {
		background-color: #060606 !important;
		border: 1px solid #222;
	}
Thomas Park's avatar
Thomas Park committed
264

265
266
267
	.dropdown-menu li > a:hover {
		border: none;
	}
Thomas Park's avatar
Thomas Park committed
268
269
}

270
.nav-pills {
Thomas Park's avatar
Thomas Park committed
271

272
273
	li > a:hover {
		background-color: @blue;
Thomas Park's avatar
Thomas Park committed
274
		color: @white;
275
	}
Thomas Park's avatar
Thomas Park committed
276

277
278
279
	.open .dropdown-toggle {
		background-color: #060606;
	}
Thomas Park's avatar
Thomas Park committed
280

281
282
283
	.dropdown-menu li > a:hover {
		border: none;
	}
Thomas Park's avatar
Thomas Park committed
284
285
}

Thomas Park's avatar
Thomas Park committed
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
.nav-list {

	li > a {
		text-shadow: none;
	}

	li > a:hover {
		background-color: @blue;
		color: @white;
	}

	.nav-header {
		text-shadow: none;
	}

	.divider {
		background-color: transparent;
		border-bottom: 1px solid #222;
	}
}

307
.nav-stacked {
Thomas Park's avatar
Thomas Park committed
308

309
	li > a {
Thomas Park's avatar
Thomas Park committed
310
		border: 1px solid #222 !important;
Thomas Park's avatar
Thomas Park committed
311
	}
Thomas Park's avatar
Thomas Park committed
312

313
314
315
316
317
	li > a:hover,
	li.active > a {
		background-color: @blue;
		color: @white;
	}
Thomas Park's avatar
Thomas Park committed
318
319
}

320
321
322
323
324
.tabbable  {
	.nav-tabs,
	.nav-tabs li.active > a {
		border-color: #222;
	}
Thomas Park's avatar
Thomas Park committed
325
326
327
}

.breadcrumb {
328
	
Thomas Park's avatar
Thomas Park committed
329
330
331
332
333
	background-color: transparent;
	background-image: none;
	border-width: 0;
	.box-shadow(none);
	font-size: 14px;
Thomas Park's avatar
Thomas Park committed
334

335
	li {
Thomas Park's avatar
Thomas Park committed
336
337
		text-shadow: none;
	}
Thomas Park's avatar
Thomas Park committed
338

339
340
	li > a {
		color: @blue;
Thomas Park's avatar
Thomas Park committed
341
342
343
344
345
		text-shadow: none;
	}
}

.pagination {
346

Thomas Park's avatar
Thomas Park committed
347
348
349
	ul {
		.box-shadow(none);
	}
Thomas Park's avatar
Thomas Park committed
350

351
352
	ul > li > a,
	ul > li > span {
Thomas Park's avatar
Thomas Park committed
353
354
355
		border: 0;
		font-size: 14px;
	}
Thomas Park's avatar
Thomas Park committed
356

357
	ul > li > a:hover {
Thomas Park's avatar
Thomas Park committed
358
359
		background-color: @blue;
		color: @white;
Thomas Park's avatar
Thomas Park committed
360
	}
Thomas Park's avatar
Thomas Park committed
361

362
363
364
365
366
367
368
369
370
371
	ul > .active > a,
	ul > .active > span {
		background-color: @blue;
		color: @white;	
	}

	ul > .disabled > a,
	ul > .disabled > a:hover,
	ul > .disabled > span,
	ul > .disabled > span:hover {
Thomas Park's avatar
Thomas Park committed
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
		background-color: rgba(0, 0, 0, 0.2);
	}
}

.pager {

	a {
		background-color: @bodyBackground;
		border: none;

		&:hover {
			background-color: @blue;
		}
	}

	.disabled a,
	.disabled a:hover {
		background-color: @bodyBackground;
	}

Thomas Park's avatar
Thomas Park committed
392
393
394
395
396
}

// BUTTONS
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
397
.btn {
Thomas Park's avatar
Thomas Park committed
398
399
400
401
	.box-shadow(1px 1px 2px #111);
	.buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
	color: @white;
	text-shadow: none;
Thomas Park's avatar
Thomas Park committed
402

Thomas Park's avatar
Thomas Park committed
403
404
405
406
407
408
409
410
411
	&:hover {
		text-shadow: none;
	  	color: @white;
	}
}

.btn-primary {
  .buttonBackground(@blueDark, darken(@blueDark, 10%));
}
Thomas Park's avatar
Thomas Park committed
412

Thomas Park's avatar
Thomas Park committed
413
414
415
.btn-warning {
  .buttonBackground(lighten(@orange, 10%), @orange);
}
Thomas Park's avatar
Thomas Park committed
416

Thomas Park's avatar
Thomas Park committed
417
418
419
.btn-danger {
  .buttonBackground(lighten(@red, 10%), @red);
}
Thomas Park's avatar
Thomas Park committed
420

Thomas Park's avatar
Thomas Park committed
421
422
423
.btn-success {
  .buttonBackground(lighten(@green, 10%), @green);
}
Thomas Park's avatar
Thomas Park committed
424

Thomas Park's avatar
Thomas Park committed
425
426
427
428
.btn-info {
  .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
}

Thomas Park's avatar
Thomas Park committed
429
430
431
432
.btn-inverse {
  .buttonBackground(lighten(@purple, 5%), @purple);
}

Thomas Park's avatar
Thomas Park committed
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
.btn .caret {
	border-top: 4px solid black;
	opacity: 0.3;
}

.btn-group > .dropdown-menu > li > a:hover {
	border-bottom: 0;
}

.btn.disabled, .btn[disabled] {
	background-color: @grayLight;
}

// FORMS
// -----------------------------------------------------

449
450
input, textarea, select {
	border-width: 2px;
Thomas Park's avatar
Thomas Park committed
451
	.border-radius(1px);
Thomas Park's avatar
Thomas Park committed
452
}
Thomas Park's avatar
Thomas Park committed
453
454
455
456
457
458

legend, label {
	color: @textColor;
	border-bottom: 0px solid #222;
}

Thomas Park's avatar
Thomas Park committed
459
460
461
462
input, textarea, select, .uneditable-input {
	color: @grayDark;
}

463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
	background-color: #555;
	border-color: #444;
}

input:focus,
textarea:focus,
input.focused,
textarea.focused {
  border-color: rgba(82,168,236,1);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
  .box-shadow(none); // override for file inputs
  .tab-focus();
}

.form-actions {
486
	border-top: 1px solid #222;
Thomas Park's avatar
Thomas Park committed
487
488
}

Thomas Park's avatar
Thomas Park committed
489
// TABLES
Thomas Park's avatar
Thomas Park committed
490
491
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
.table {

	.border-radius(1px);

	tbody tr.success td {
		background-color: @green;
		color: @white;
	}

	tbody tr.error td {
		background-color: @red;
		color: @white;
	}

	tbody tr.info td {
		background-color: @blue;
		color: @white;
	}
}

Thomas Park's avatar
Thomas Park committed
512
513
// DROPDOWNS
// -----------------------------------------------------
Thomas Park's avatar
Thomas Park committed
514

Thomas Park's avatar
Thomas Park committed
515
516
517
.dropdown-menu {
	background-color: #191A1A;
	.box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
Thomas Park's avatar
Thomas Park committed
518
}
Thomas Park's avatar
Thomas Park committed
519

Thomas Park's avatar
Thomas Park committed
520
521
.dropdown-menu li > a:hover {
	background-color: @blue;
522
523
}

Thomas Park's avatar
Thomas Park committed
524
525
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
526

Thomas Park's avatar
Thomas Park committed
527
528
529
530
531
532
533
534
535
536
537
538
539
.alert,
.alert .alert-heading,
.alert-success,
.alert-success .alert-heading,
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading,
.alert-info,
.alert-info .alert-heading {
  color: @grayLighter;
  text-shadow: none;
  border: none;
Thomas Park's avatar
Thomas Park committed
540
541
}

542
543
544
545
546
547
548
549
.label {
	color: @grayLighter;
}

.label, .alert { background-color: darken(@gray, 20%); }

.label:hover { background-color: darken(@gray, 30%); }

Thomas Park's avatar
Thomas Park committed
550
551
.label-important,
.alert-danger,
552
553
.alert-error { background-color: @red; }

554
.label-important:hover { background-color: darken(@red, 10%); }
555

Thomas Park's avatar
Thomas Park committed
556
.label-warning   { background-color: darken(@orange, 10%); }
557

558
.label-warning:hover { background-color: darken(@orange, 20%); }
559
560
561

.label-success, .alert-success { background-color: darken(@green, 3%); }

562
.label-success:hover { background-color: darken(@green, 13%); }
563
564
565

.label-info, .alert-info { background-color: darken(@blueDark, 10%); }

566
.label-info:hover { background-color: darken(@blueDark, 20%); }
567

Thomas Park's avatar
Thomas Park committed
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
// MISC
// -----------------------------------------------------

.well, .hero-unit {
	.border-radius(1px);
}

.well, .hero-unit {
	border-top: solid 1px lighten(@grayDark, 5%);
	.box-shadow(0 2px 4px rgba(0,0,0,.8));
}

.thumbnail {
	border-color: #222;
}

.progress {
	background-color: #060606;
	background-image: none;
	.border-radius(0);
588
}
Thomas Park's avatar
Thomas Park committed
589

Thomas Park's avatar
Thomas Park committed
590
591
592
593
594
595
596
597
598
599
600
601
.modal {
 	.border-radius(1px);
	border-top: solid 1px lighten(@grayDark, 5%);
	background-color: @grayDark;
}

.modal-header {
	border-bottom: 1px solid #222;
}

.modal-footer {
	background-color: @grayDark;
602
	border-top: 1px solid #222;
Thomas Park's avatar
Thomas Park committed
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
	.border-radius(0 0 6px 6px);
	.box-shadow(none);
}

.footer {
	border-top: 1px solid #222;
}

// MEDIA QUERIES
// -----------------------------------------------------

@media (max-width: 768px) {
	div.subnav .nav > li + li > a,
	div.subnav .nav > li:first-child > a {
		border-top: 1px solid #222;
		border-left: 1px solid #222;
	}

	.subnav .nav > li + li > a:hover,
	.subnav .nav > li:first-child > a:hover {
			border-bottom: 0;
			background-color: @blue;
	}
626
}