CSS Learnt how to directly override styles, for the specific buttons/blocks that you want to edit.

Practical learning of specificity encountered in CSS, today.

The Impact:
Learnt how to directly override styles, for the specific buttons/blocks that you want to edit.

The idea is just like in VB6 or C#, Windows Forms, you just set the styles directly on and for the elements/widgets that you want the style to be, and you copy all the widgets, they get the styles,

unlike CSS, which inherits from the top.. or from somewhere. From a long obscure chain. Ugh.

But anyway:


form input.smallrounded[type="submit"] { [[form input.largerounded[type="submit"] EXCEPT ... ln476]]
form input.largesquared[type="submit"]

form input.activedisabled[type="submit"] {ln476 activedisabled
    background-color: #EDEDED;
add color: #FFFFFF;
}


    border: 2px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    color: #FFFFFF;
    height: 34px;
}ln450 color for product box btn text 'Install'

form input.active[type="submit"] {
    background-color: #FF0000;
}ln472 bkgnd color for all buttons 'please try again', 'product box btn'

<input class="largerounded active" type="submit" value="Ok">
form input.largerounded[type="submit"] {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    height: 48px;
}ln444 color for one button 'please try again' , [cancel btn, install thisdevice anotherdevice]
form input.largerounded[type="submit"] {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    height: 48px;
}ln444 proceed,cancel : DON'T CHANGE





form input.smallrounded[type="submit"] {
    border: 2px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    color: #FFFFFF;
    height: 34px;
}ln450 smallrounded 'add' new device name

form input.largesquared[type="submit"] {
    border: 2px solid #FFFFFF;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    height: 48px;
}ln462 square big existing device name



AJAX PRODUCTBOX
class=" .product-box-button {
    background-color: #{{color_1}};
add color: #{{button_text_color}};
}

AJAX INSTALL TO THIS DEVICE?
class=" .install-to-device-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}

class=" .install-to-device-cancel-button {
    background-color: #BFBFBF;
color: #FFFFFF;
}

/*AJAX SELECT DEVICE*/
class=" .large-squared-devicename-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}

class=" .small-rounded-addnewdevice-button { NO CHANGES.
    background-color: #EDEDED;
color: #FFFFFF;
}

/*ERROR*/
class=" .error-ok-button {
    background-color: #{{color_1}};
color: #{{button_text_color}};
}









OKAY ALREADY:
/*AJAX PRODUCTBOX*/
/*
form input.active[type="submit"]*/

form.provision input.product-box-button {
    background-color: #008000;
color: #FF6820;
}

/*AJAX INSTALL TO THIS DEVICE?*/

div.centeredbuttons input.install-to-device-button {
    background-color: #FF6820;
color: #008000;
}

form.close_lb input.install-to-device-cancel-button {
    background-color: #000000;
color: #FF0000;
}

/*AJAX SELECT DEVICE*/
div.centeredbuttons input.large-squared-devicename-button {
    background-color: #DE2EF1;
color: #001EFF;
}