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