Created
February 20, 2014 22:25
-
-
Save yajd/9124570 to your computer and use it in GitHub Desktop.
stylized panel messages for Floppers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div style="left: 10px; top: 10px;" class="roar-body"> | |
<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 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 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 p a { | |
color: #fff; | |
text-decoration: underline; | |
} | |
.roar p a:hover { | |
text-decoration: none; | |
} | |
.roar-bg { | |
border-radius: 5px; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
delete