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; }