_template_construction-RoarPanelMessages - HTML panels with style for message displaying. Forked from builder.addons.mozilla.org.

_template_construction-RoarPanelMessages.htm

<div style="left: 10px; top: 10px;" class="roar-body">
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar error"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar message"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
</div>


<!--
<div style="left: 1270px; top: 10px;" class="roar-body"><div id="shipyard-hrtz4uqb" style="opacity: 1; right: 0px; top: 0px;" class="roar message"><div style="" class="roar-bg"></div><h3>Add-on Builder</h3><p>Add-on uninstalled</p></div></div>
-->

<style>
/*Roar.css*/
.roar-body {
	position: absolute;
	font: 12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
	color: #fff;
	text-align: left;
	z-index: 999;
}

.roar {
	position: relative;
	width: 300px;
	cursor: pointer;
	display: inline-block;
	margin-top: 11px;
	margin-left: 7px;
}
.roar-bg {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.roar-body-ugly .roar {
	background-color: #333;
}
.roar-body-ugly .roar-bg {
	display: none;
}
.roar-icon {	
	height: 100%;
	width: 18%;
	position: absolute;
	background: url(https://abs.twimg.com/a/1392431509/img/t1/bird-topbar-blue.png) 50% 50% no-repeat;
	padding-right: 9px; /*must equal the padding left of h3 and p otherwise icon is not centered looking on the x*/
	z-index: 1002;
}
.roar h3 {
	position: relative;
	padding: 15px 10px 0;
	margin:	0;
	border: 0;
	font-size: 13px;
	color: #fff;
	z-index: 1002;
	margin-left: 18%; /*must equal width of icon div*/
}
.roar p {
	position: relative;
	padding: 10px 10px 15px;
	margin:	0;
	font-size: 12px;
	color: 	#fff;
	z-index: 1002;
	margin-left: 18%; /*must equal width of icon div*/
}



/*FlightDeck.Roar.css*/
.roar-bg {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
	opacity: 0.9 !important;
}

.message .roar-bg {
	background: -moz-linear-gradient(270deg, #C4F2AC, #98CF7B);
	border-top: solid 1px ##DCF8CE;
}

.warning .roar-bg {
	background: -moz-linear-gradient(270deg, #4E91E7, #184A95);
	border-top: solid 1px #8FBBF1;
}

.error .roar-bg {
	background: -moz-linear-gradient(270deg, #C23738, #6E1616);
	border-top: solid 1px #D4989C;
}

.roar h3,
.roar p {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.message.roar h3,
.message.roar p {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
	color: #136B00;
}

.roar h3 {
	padding: 10px 9px 0;
	font-size: 12px;
	font-weight: bold;
}

.roar p {
	padding: 5px 9px 10px;
	font-size: 11px;
}

.roar.message p a {
	color: #136B00;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.roar p a {
	color: rgba(255, 255, 255, 1);
	text-decoration: underline;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.roar p a:hover {
	text-decoration: none;
}

.roar-bg {
	border-radius: 5px;
}
</style>

README

Rev1

• blah feb 26

Rev2

• Edited so that when message is roar the link is colored darker, the white just made it unreadable
• Gave links in not:(.message) a black text shadow
• CSS spacing formatting
• Change class to show .error and .message divs

Rev3

• More CSS spacing formatting