Changing the color of CSS components



  • What is the way to set the toolbar color, for example the Material toolbar? There is no CSS class from what I can see.

    <div class="toolbar toolbar--material">
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
    </div>
    

    And if I need to edit the stylesheet, do I edit the www/style.css directly? I am confused because this StackOverflow question mentions about a source stylus file that needs to be compiled into the real .css. But I searched through the splitter project template and can’t find any .styl file. :confused:



  • @wetfeet Here is all the CSS for Onsen 2. Just change whatever you need and put it in your index file as regular CSS. This is all from a working project.

    .tab-bar {
      font-family: 'Dosis', Helvetica, Arial, 'Lucida Grande', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 400;
      font-size: 17px;
      display: table;
      table-layout: fixed;
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      white-space: nowrap;
      margin: 0;
      padding: 0;
      height: 49px;
      background-color: #222;
      border-top: 1px solid rgba(0,0,0,0);
      width: 100%;
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .tab-bar {
        border-top: none;
        -webkit-background-size: 100% 1px;
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: top;
        background-image: -webkit-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: -moz-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: -o-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
      }
    }
    .tab-bar__item {
       font-family: 'Dosis', Helvetica, Arial, 'Lucida Grande', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 400;
      font-size: 17px;
      position: relative;
      overflow: hidden;
      display: table-cell;
      width: auto;
      -webkit-border-radius: 0;
      border-radius: 0;
    }
    .tab-bar__item > input {
      position: absolute;
      overflow: hidden;
      right: 0px;
      top: 0px;
      left: 0px;
      bottom: 0px;
      padding: 0;
      border: 0;
      opacity: 0.001;
      z-index: 1;
      vertical-align: top;
      outline: none;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-appearance: none;
      appearance: none;
    }
    .tab-bar__button {
      position: relative;
      display: inline-block;
      vertical-align: top;
      font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 400;
      font-size: 17px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      padding: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      background: transparent;
      border: none;
      line-height: normal;
      cursor: default;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      text-decoration: none;
      padding: 0;
      height: 49px;
      letter-spacing: 0;
      color: #999;
      text-shadow: 0 1px none;
      vertical-align: top;
      background-color: transparent;
      -webkit-box-shadow: none;
      box-shadow: none;
      border-top: none;
      width: 100%;
      font-weight: 400;
      line-height: 49px;
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .tab-bar__button {
        border-top: none;
      }
    }
    .tab-bar__icon {
      font-size: 24px;
      padding: 0;
      margin: 0;
      line-height: 32px;
      display: block;
      height: 32px;
    }
    .tab-bar__label {
      font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 400;
      font-size: 17px;
    }
    .tab-bar__icon + .tab-bar__label {
      font-size: 10px;
      line-height: 1;
      margin: 0;
      font-weight: 400;
    }
    .tab-bar__label:first-child {
      font-size: 16px;
      line-height: 49px;
      margin: 0;
      padding: 0;
    }
    .tab-bar__button {
      color: #fff;
    }
    :checked + .tab-bar__button {
      color: #009B90;
      background-color: transparent;
      -webkit-box-shadow: none;
      box-shadow: none;
      border-top: none;
    }
    :checked + .tab-bar__button > .tab-bar__icon {
      color: #7abfff;
    }
    .tab-bar__button:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }
    .tab-bar__button:focus {
      z-index: 1;
      border-top: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      outline: 0;
    }
    .tab-bar__content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 49px;
      z-index: 0;
    }
    
    .tab-bar--top {
      position: relative;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: auto;
      border-top: none;
      border-bottom: 1px solid rgba(0,0,0,0);
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .tab-bar--top {
        border-bottom: none;
        -webkit-background-size: 100% 1px;
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
        background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: -o-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
        background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%);
      }
    }
    .tab-bar--top__content {
      top: 49px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }
    
    .tab-bar--top-border__button {
      background-color: transparent;
      border-bottom: 4px solid transparent;
    }
    :checked + .tab-bar--top-border__button {
      background-color: transparent;
      border-bottom: 4px solid #7abfff;
    }
    

Log in to reply