LoginSignup
11

More than 5 years have passed since last update.

twitter-bootstrap-railsでの配色カスタマイズ

Last updated at Posted at 2012-04-19

気軽に変更するには、@black: #000000;を適当な色にします。

app/assets/stylesheets/bootstrap.css.less
@import "twitter/bootstrap";

// import responsive layout
@import "twitter/bootstrap/responsive";

// Your custom stylesheets goes here (override Less here)
@media (min-width: 980px) {
  body {
    padding-top: 60px;
  }
}
@black: #000000;
@grayDarker:            lighten(@black, 16%);
@grayDark:              lighten(@black, 32%);
@gray:                  lighten(@black, 48%);
@grayLight:             lighten(@black, 64%);
@grayLighter:           lighten(@black, 80%);
@white:                 lighten(@black, 96%);
.hero-unit {
  background-color: lighten(@black, 90%);
  margin-top: 19px;
  >h1 {
    font-size: 24px;
  }
}

.well {
  background-color: lighten(@black, 90%);
  border: 1px solid @grayLighter;
  border: 1px solid rgba(5, 5, 10,.05);
  .box-shadow(inset 01px1px rgba(5, 5, 10,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
      background-color: lighten(@black, 93%);
    }
  }
}

.table {
  tbody tr:hover td,
  tbody tr:hover th {
    background-color: lighten(@black, 90%);
  }
}

.form-actions {
  background-color: lighten(@black, 90%);
  border-top: 1px solid lighten(@black, 93%);
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11