regular buttons in colour on click

[DivineDominion]

I want iOS-like button styles: on click, change the background color to a colourful gradient and text to white. To let this setting cascade in a right way, the "important" background color must be assigned only to inactive buttons, i.e. on :not(.ui-btn-down-c). Similarly act on .ui-btn-text only when inactive=not down. The code necessary to fix this follows:

---

Please consider changing button background styles to match only non-active styles:

styles.css:209

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    padding: 0;
    background: #FFF !important;
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    box-shadow: none;
    background-clip: padding-box;
}

... into:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    padding: 0;
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    box-shadow: none;
    background-clip: padding-box;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-btn-down-c):not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    background: #FFF !important;
}

---

And similarly, for button texts, lines 220:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    font-weight: bold;
    font-size: 17px;
    color: #000;
    text-shadow: none;
}

... into:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    font-weight: bold;
    font-size: 17px;
    text-shadow: none;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-btn-down-c):not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    color: #000;
}

---

Then add the following directives to see iOS like click changes:

.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    /* #015DE6*/
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #015DE6),
        color-stop(1, #058CF5)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #015DE6 0%,
        #058CF5 100%
    );
}

.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    color: white;
}

[DivineDominion]

-- kind of "duplicate" in issue #30, sorry. But #30 focuses on visually critical stuff

[taitems]

Implemented in latest commit.