lib.humanmsg.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of spiffyui Show documentation

A UI/UX framework that can help build beautiful, fast, flexible, secure, maintainable applications with GWT and REST.

There is a newer version: 1.7

/*
	HUMANIZED MESSAGES 1.0
	idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
	home - http://humanmsg.googlecode.com
*/

html, body {
	height: 100%; /* Damn you IE! */
}

.humanMsg {
	font: normal 16px/20px Verdana, Arial, Sans-serif;
	letter-spacing: -1px;
	position: absolute;
	top: 130px;
	left: 25%;
	width: 50%;
	color: white;
	background-color: black;
	text-align: center; 
	display: none;
	opacity: 0;
	z-index: 100000;
}

.humanMsg .round {
    border-left: solid 2px white;
	border-right: solid 2px white;
    font-size: 1px; height: 2px;
	}

.humanMsg p {
	padding: .3em;
	display: inline; 
	}

.humanMsg a {
	display: none;
	}
	
#humanMsgLog {
	font: normal 10px Helvetica, Arial, Sans-Serif;
	color: white;
	position: relative;
	top: -28px;
	left: 0;
	width: 100%;
	max-height: 200px;
	display: none;
	z-index: 1000;
    height: 0px;
	}

#humanMsgLog p {
    display: block;
	position: absolute;
	left: 50%;
	width: 20em;
    margin: 0 0 -20px -100px;
	padding: 0 10px;
	line-height: 20px;
    background: #E00000;
	text-align: center;
	white-space: pre;
	cursor: pointer;
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -webkit-border-radius-topleft: 0.5em;
    -webkit-border-radius-topright: 0.5em;
	}
    
#humanMsgLog p.faded {
    opacity: 0.4;
}
    
#humanMsgLog p.minimized {
    -moz-border-radius-topright:0;
    cursor:pointer;
    right:0;
    left: auto;
    text-indent:-9999px;
    width:20px;
    cursor: w-resize;
    background: #E00000 url("images/spiffy_ui_images.png") no-repeat scroll 5px -500px;
}

#humanMsgClose {
    display: block;
    position: absolute;
    left: 45%;
    margin-left: 107px;
    top: -1px;
    color: white;
    font: normal 14px Helvetica, Arial, Sans-Serif;
    width: 1em;
}

#humanMsgLog p:hover {
    opacity: 1;
}


#humanMsgLog ul {
	background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAARCAIAAACaSvE/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNqEjVEKACAIQ516Ee//5wVNCjIjaB/iY5vC3YkoIgDkVDOjQ5pqLCI3r2bLFzNzyydvM4uKqfJPKN4vyl9LO/7o3/6PhwADAIWkFPjc5eRrAAAAAElFTkSuQmCC) repeat-x;
	margin: 0;
	padding: 0;
    padding-top: 2em;
    padding-bottom: 3em;
	position: absolute;
    top: 20px;
    width: 100%;
    left: 0px;
	max-height: 180px;
	overflow: auto;
	display: none;
	}

#humanMsgLog ul li {
	color: #555;
	font-size: 12px;
	list-style-type: none;
	border-bottom: 1px solid #ddd;
	line-height: 14px;
	display: none;
	padding: 0 20px;
    position: relative;
	overflow: hidden;
	white-space: normal;
	}

#humanMsgLog ul li:hover {
	background: #f2f2f2;
	}

#humanMsgLog ul li:first-child {
	margin-top: 1px;
	}
	
#humanMsgLog ul li .error {
	color: orangered;
	}

#humanMsgLog ul li .indent {
	position: absolute;
	top: 0;
	left: 100px;
	margin-right: 200px;
	height: inherit;
	}