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
 221 code, pre, pre.prettyprint {
 222         background-color: @grayLighter;
 223 }
 224
 225 .well {
 226         background-color: rgba(40, 40, 40, 0.5);
 227         background-color: #131517;
 228         border-top: solid 1px rgba(256,256,256,.1);
 229         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 230 }
 231
 232
 233 .table, .well, .prettyprint, input, textarea, select {
 234         .border-radius(1px);
 235 }
 236
 237 input, textarea, select, .uneditable-input {
 238         color: @grayDark;
 239 }
 240
 241
 242 // NAVIGATION
 243 // -----------------------------------------------------
 244
 245
 246 .nav-list > li > a, .nav-list .nav-header {
 247         text-shadow: none;
 248 }
 249
 250 .nav-list li > a:hover,
 251 .nav-tabs li > a:hover,
 252 .nav-tabs li.active > a,
 253 .nav-pills li > a:hover,
 254 .nav-stacked li > a:hover,
 255 .nav-stacked li.active > a {
 256         background-color: @blue;
 257         color: @white;
 258 }
 259
 260 .nav-tabs {
 261         border-bottom: 1px solid #222;
 262 }
 263
 264 .nav-stacked > li > a,
 265 .nav-tabs > li > a:hover,
 266 .nav-tabs > .active > a,
 267 .nav-tabs > .active > a:hover {
 268         border: 1px solid #222 !important;
 269 }
 270
 271 .nav.nav-tabs .active a:hover {
 272         background-color: @blue;
 273         color: @white;
 274 }
 275
 276 .nav.nav-tabs .dropdown.open,
 277 .nav.nav-pills .dropdown.open {
 278         .dropdown-toggle {
 279                 background-color: #060606 !important;
 280                 border-top: 0;
 281                 border: 1px solid #222;
 282         }
 283
 284         .dropdown-menu li > a:hover { border-bottom: 0; }
 285 }
 286
 287 .tabbable .nav-tabs, .thumbnail {
 288         border-color: #222;
 289 }
 290
 291 .breadcrumb {
 292         background-color: transparent;
 293         background-image: none;
 294         border-width: 0;
 295         .box-shadow(none);
 296         font-size: 14px;
 297
 298         li > a {
 299                 color: @blue;
 300                 text-shadow: none;
 301         }
 302
 303         li.active {
 304                 text-shadow: none;
 305         }
 306 }
 307
 308 .pagination {
 309         ul {
 310                 .box-shadow(none);
 311         }
 312
 313         a {
 314                 border: 0;
 315                 font-size: 14px;
 316         }
 317
 318         a:hover, .active a {
 319                 background-color: @blue;
 320                 color: @white;
 321         }
 322 }
 323
 324 // BUTTONS
 325 // -----------------------------------------------------
 326
 327 .btn, {
 328         border: 0;
 329         .border-radius(3px);
 330         .box-shadow(1px 1px 2px #111);
 331         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 332         color: @white;
 333         text-shadow: none;
 334
 335         &:hover {
 336             background-color: darken(@gray, 35%);
 337                 text-shadow: none;
 338                 color: @white;
 339         }
 340 }
 341
 342 // Set the backgrounds
 343 // -------------------------
 344 .btn-primary {
 345   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 346 }
 347 // Warning appears are orange
 348 .btn-warning {
 349   .buttonBackground(lighten(@orange, 10%), @orange);
 350 }
 351 // Danger and error appear as red
 352 .btn-danger {
 353   .buttonBackground(lighten(@red, 10%), @red);
 354 }
 355 // Success appears as green
 356 .btn-success {
 357   .buttonBackground(lighten(@green, 10%), @green);
 358 }
 359 // Info appears as a neutral blue
 360 .btn-info {
 361   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 362 }
 363
 364 .btn-group .btn:first-child {
 365     -webkit-border-top-left-radius: 3px;
 366        -moz-border-top-left-radius: 3px;
 367             border-top-left-radius: 3px;
 368
 369     -webkit-border-bottom-left-radius: 3px;
 370        -moz-border-bottom-left-radius: 3px;
 371             border-bottom-left-radius: 3px;
 372 }
 373
 374 .btn-group .btn:last-child, .btn-group .dropdown-toggle {
 375     -webkit-border-top-right-radius: 3px;
 376        -moz-border-top-right-radius: 3px;
 377             border-top-right-radius: 3px;
 378
 379     -webkit-border-bottom-right-radius: 3px;
 380        -moz-border-bottom-right-radius: 3px;
 381             border-bottom-right-radius: 3px;
 382
 383 }
 384
 385 .btn .caret {
 386         border-top: 4px solid black;
 387         opacity: 0.3;
 388 }
 389
 390 .btn-group > .dropdown-menu > li > a:hover {
 391         border-bottom: 0;
 392 }
 393
 394 .btn.disabled, .btn[disabled] {
 395         background-color: @grayLight;
 396 }
 397
 398 // FORMS
 399 // -----------------------------------------------------
 400
 401
 402 .form-actions {
 403         background: transparent;
 404 }
 405
 406 legend, label {
 407         color: @textColor;
 408         border-bottom: 0px solid #222;
 409 }
 410
 411 .form-actions, footer.footer {
 412         border-top: 1px solid #222;
 413 }
 414
 415
 416 // MISCELLANEOUS
 417 // -----------------------------------------------------
 418
 419
 420 .progress {
 421         background-color: #060606;
 422         background-image: none;
 423         .border-radius(0);
 424 }
 425
 426 .label { background-color: darken(@gray, 20%); }
 427 .label-important { background-color: @red; }
 428 .label-important:hover { background-color: darken(@red, 10%); }
 429 .label-warning   { background-color: darken(@orange, 10%); }
 430 .label-warning:hover { background-color: darken(@orange, 20%); }
 431 .label-success   { background-color: darken(@green, 3%); }
 432 .label-success:hover { background-color: darken(@green, 13%); }
 433 .label-info      { background-color: darken(@blueDark, 10%); }
 434 .label-info:hover { background-color: darken(@blueDark, 20%); }