git.roojs.org Git - bootswatch/blob - cyborg/bootswatch.less

   1 // Bootswatch.less
   2 // Swatch: Cyborg
   3 // -----------------------------------------------------
   4
   5 // TYPOGRAPHY
   6 // -----------------------------------------------------
   7
   8 // Ubuntu web font
   9 @import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700');
  10
  11 h1, h2, h3, h4, h5, .navbar .brand, .navbar .nav-collapse.collapse .nav li > a {
  12         color: @grayLighter;
  13         font-weight: normal;
  14         text-shadow: none;
  15 }
  16
  17 .navbar {
  18         font-size: 16px;
  19 }
  20
  21 label, input, button, select, textarea {
  22         font-family: 'Droid Sans', sans-serif;
  23         color: @gray;
  24 }
  25
  26 .navbar .search-query&::-moz-placeholder {
  27         font-family: 'Droid Sans', sans-serif;
  28         color: @gray;
  29 }
  30
  31 .navbar .search-query&:::-webkit-input-placeholder {
  32         font-family: 'Droid Sans', sans-serif;
  33 }
  34
  35 blockquote {
  36         border-left: 5px solid @blue;
  37
  38         &.pull-right {
  39                 border-right: 5px solid @blue;
  40         }
  41 }
  42
  43 // SCAFFOLDING
  44 // -----------------------------------------------------
  45
  46 body {
  47         background-color: #060606;
  48         #gradient > .vertical (#060606, #252A30);
  49 }
  50
  51 .page-header {
  52         border-bottom: 2px solid @blue
  53 }
  54
  55 // NAVBAR
  56 // -----------------------------------------------------
  57
  58 .navbar-inner {
  59   .border-radius(0);
  60   @shadow: none;
  61   .box-shadow(@shadow);
  62   border-bottom: 2px solid @blue
  63 }
  64
  65 .navbar .nav li > a {
  66         padding: 13px 10px 8px;
  67         border-bottom: 3px solid rgba(0, 0, 0, 0);
  68 }
  69
  70 .navbar .brand {
  71         padding: 12px 20px 8px;
  72 }
  73
  74 .navbar .search-query {
  75         background: @black;
  76         .border-radius(1px);
  77 }
  78
  79 .navbar .nav .active > a,
  80 .navbar .nav li > a:hover,
  81 .navbar .brand:hover {
  82         border-bottom: 3px solid @blue
  83 }
  84
  85 // Added dividers to items
  86 .navbar .nav > li > a {
  87         border-left: 1px solid #222;
  88 }
  89
  90 .dropdown-menu {
  91         background-color: #191A1A;
  92         border-left: solid 1px rgba(256,256,256,.1);
  93         .box-shadow(0 2px 4px rgba(0,0,0,.8));
  94 }
  95
  96 .dropdown-menu li > a:hover {
  97         background-color: @blue;
  98         border-bottom: 3px solid transparent;
  99 }
 100
 101 .dropdown-menu .divider {
 102         background-color: #222;
 103         border-bottom: 0px solid white;
 104 }
 105
 106 .navbar .dropdown-menu::before,
 107 .navbar .dropdown-menu::after {
 108         display: none;
 109 }
 110
 111 .navbar .nav-collapse.collapse .nav > li > a {
 112         border-left: 0;
 113 }
 114
 115 .navbar .nav-collapse.collapse .nav a:hover {
 116         background-color: @blue;
 117 }
 118
 119 div.subnav {
 120         position: static;
 121         background-color: @grayDarker;
 122         background-image: none;
 123         border: 0;
 124 }
 125
 126 div.subnav.subnav-fixed {
 127         position: relative;
 128         left: -1px;
 129         top: auto;
 130 }
 131
 132 div.subnav .nav li > a,
 133 div.subnav .nav .active a {
 134         border-left: 1px solid #222;
 135         border-right: 0;
 136         color: @grayLighter;
 137         background-color: @grayDarker;
 138 }
 139
 140 .subnav .nav > li > a:hover,
 141 .subnav .nav > li.active > a:hover,
 142 .subnav .nav > li:first-child > a:hover {
 143         background: transparent;
 144         border-bottom: 2px solid @blue;
 145         border-left: 1px solid #222;
 146         color: @white;
 147 }
 148
 149 div.subnav .nav .dropdown.open {
 150
 151         .dropdown-toggle {
 152                 border: 0;
 153                 border-left: 1px solid #222;
 154             border-bottom: 2px solid @blue;
 155                 background-color: #060606;
 156         }
 157
 158         .dropdown-menu {
 159                 background-color: @grayDarker;
 160                 border-left: 0;
 161
 162                 li > a:hover {
 163                         border-bottom: 0;
 164                         background: @blue;
 165                 }
 166         }
 167 }
 168
 169 @media (max-width: 768px) {
 170         div.subnav .nav > li + li > a,
 171         div.subnav .nav > li:first-child > a {
 172                 border-top: 1px solid #222;
 173                 border-left: 1px solid #222;
 174         }
 175
 176         .subnav .nav > li + li > a:hover,
 177         .subnav .nav > li:first-child > a:hover {
 178                         border-bottom: 0;
 179                         background-color: @blue;
 180         }
 181
 182 }
 183
 184 // TABLES
 185 // -----------------------------------------------------
 186
 187 .table-bordered {
 188   border: 1px solid #222;
 189
 190   th + th,
 191   td + td,
 192   th + td,
 193   td + th {
 194     border-left: 1px solid #222;
 195   }
 196   // Prevent a double border
 197   thead:first-child tr:first-child th,
 198   tbody:first-child tr:first-child th,
 199   tbody:first-child tr:first-child td {
 200     border-top: 0;
 201   }
 202 }
 203
 204 .table th, .table td {
 205         border-top: 1px solid #222;
 206 }
 207
 208 // make shaded elements light gray
 209 .breadcrumb,
 210 .table-striped tbody tr:nth-child(odd) td,
 211 .table-striped tbody tr:nth-child(odd) th {
 212         background-color: rgba(40, 40, 40, 0.5);
 213 }
 214
 215 .table-striped tbody tr:nth-child(even) td,
 216 .table-striped tbody tr:nth-child(even) th {
 217         background-color: transparent;
 218 }
 219
 220 .table tbody tr:hover th,
 221 .table tbody tr:hover td {
 222         background-color: @grayDark;
 223 }
 224
 225 code, pre, pre.prettyprint {
 226         background-color: @grayLighter;
 227 }
 228
 229 .well {
 230         background-color: rgba(40, 40, 40, 0.5);
 231         background-color: #131517;
 232         border-top: solid 1px rgba(256,256,256,.1);
 233         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 234 }
 235
 236
 237 .table, .well, .prettyprint, input, textarea, select {
 238         .border-radius(1px);
 239 }
 240
 241 input, textarea, select, .uneditable-input {
 242         color: @grayDark;
 243 }
 244
 245
 246 // NAVIGATION
 247 // -----------------------------------------------------
 248
 249
 250 .nav-list > li > a, .nav-list .nav-header {
 251         text-shadow: none;
 252 }
 253
 254 .nav-list li > a:hover,
 255 .nav-tabs li > a:hover,
 256 .nav-tabs li.active > a,
 257 .nav-pills li > a:hover,
 258 .nav-stacked li > a:hover,
 259 .nav-stacked li.active > a {
 260         background-color: @blue;
 261         color: @white;
 262 }
 263
 264 .nav-tabs {
 265         border-bottom: 1px solid #222;
 266 }
 267
 268 .nav-stacked > li > a,
 269 .nav-tabs > li > a:hover,
 270 .nav-tabs > .active > a,
 271 .nav-tabs > .active > a:hover {
 272         border: 1px solid #222 !important;
 273 }
 274
 275 .nav.nav-tabs .active a:hover {
 276         background-color: @blue;
 277         color: @white;
 278 }
 279
 280 .nav.nav-tabs .dropdown.open,
 281 .nav.nav-pills .dropdown.open {
 282         .dropdown-toggle {
 283                 background-color: #060606 !important;
 284                 border-top: 0;
 285                 border: 1px solid #222;
 286         }
 287
 288         .dropdown-menu li > a:hover { border-bottom: 0; }
 289 }
 290
 291 .tabbable .nav-tabs, .thumbnail {
 292         border-color: #222;
 293 }
 294
 295 .breadcrumb {
 296         background-color: transparent;
 297         background-image: none;
 298         border-width: 0;
 299         .box-shadow(none);
 300         font-size: 14px;
 301
 302         li > a {
 303                 color: @blue;
 304                 text-shadow: none;
 305         }
 306
 307         li.active {
 308                 text-shadow: none;
 309         }
 310 }
 311
 312 .pagination {
 313         ul {
 314                 .box-shadow(none);
 315         }
 316
 317         a {
 318                 border: 0;
 319                 font-size: 14px;
 320         }
 321
 322         a:hover, .active a {
 323                 background-color: @blue;
 324                 color: @white;
 325         }
 326 }
 327
 328 // BUTTONS
 329 // -----------------------------------------------------
 330
 331 .btn, {
 332         border: 0;
 333         .border-radius(3px);
 334         .box-shadow(1px 1px 2px #111);
 335         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 336         color: @white;
 337         text-shadow: none;
 338
 339         &:hover {
 340             background-color: darken(@gray, 35%);
 341                 text-shadow: none;
 342                 color: @white;
 343         }
 344 }
 345
 346 // Set the backgrounds
 347 // -------------------------
 348 .btn-primary {
 349   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 350 }
 351 // Warning appears are orange
 352 .btn-warning {
 353   .buttonBackground(lighten(@orange, 10%), @orange);
 354 }
 355 // Danger and error appear as red
 356 .btn-danger {
 357   .buttonBackground(lighten(@red, 10%), @red);
 358 }
 359 // Success appears as green
 360 .btn-success {
 361   .buttonBackground(lighten(@green, 10%), @green);
 362 }
 363 // Info appears as a neutral blue
 364 .btn-info {
 365   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 366 }
 367
 368 .btn-group .btn:first-child {
 369     -webkit-border-top-left-radius: 3px;
 370        -moz-border-top-left-radius: 3px;
 371             border-top-left-radius: 3px;
 372
 373     -webkit-border-bottom-left-radius: 3px;
 374        -moz-border-bottom-left-radius: 3px;
 375             border-bottom-left-radius: 3px;
 376 }
 377
 378 .btn-group .btn:last-child, .btn-group .dropdown-toggle {
 379     -webkit-border-top-right-radius: 3px;
 380        -moz-border-top-right-radius: 3px;
 381             border-top-right-radius: 3px;
 382
 383     -webkit-border-bottom-right-radius: 3px;
 384        -moz-border-bottom-right-radius: 3px;
 385             border-bottom-right-radius: 3px;
 386
 387 }
 388
 389 .btn .caret {
 390         border-top: 4px solid black;
 391         opacity: 0.3;
 392 }
 393
 394 .btn-group > .dropdown-menu > li > a:hover {
 395         border-bottom: 0;
 396 }
 397
 398 .btn.disabled, .btn[disabled] {
 399         background-color: @grayLight;
 400 }
 401
 402 // FORMS
 403 // -----------------------------------------------------
 404
 405
 406 .form-actions {
 407         background: transparent;
 408 }
 409
 410 legend, label {
 411         color: @textColor;
 412         border-bottom: 0px solid #222;
 413 }
 414
 415 .form-actions, footer.footer {
 416         border-top: 1px solid #222;
 417 }
 418
 419
 420 // MISCELLANEOUS
 421 // -----------------------------------------------------
 422
 423
 424 .progress {
 425         background-color: #060606;
 426         background-image: none;
 427         .border-radius(0);
 428 }
 429
 430 .label { background-color: darken(@gray, 20%); }
 431 .label-important { background-color: @red; }
 432 .label-important:hover { background-color: darken(@red, 10%); }
 433 .label-warning   { background-color: darken(@orange, 10%); }
 434 .label-warning:hover { background-color: darken(@orange, 20%); }
 435 .label-success   { background-color: darken(@green, 3%); }
 436 .label-success:hover { background-color: darken(@green, 13%); }
 437 .label-info      { background-color: darken(@blueDark, 10%); }
 438 .label-info:hover { background-color: darken(@blueDark, 20%); }