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