penguin/AstroJS

botanjs/src/Astro/Blog/Components/Notification.css

raw · 2893 bytes

.notifications {
	float: right;
	cursor: default;
	position: relative;
}

.nt_body {
	position: absolute;

	top: 0;
	left: -300px;

	max-width: 300px;

	text-align: left;

	display: none;
	z-index: 1;
}

.nt_body > div { float: right; }

.nt_button {
	float: left;

	text-align: left;
	display: block;

	padding: 0 0.5em 0 0;

	color: white;
	background-color: #444;
}

.nt_button:before {
	content: attr(data-count);
	display: inline-block;

	padding: 0 0.5em;
	margin-right: 0.5em;
	line-height: 2em;

	background-color: royalblue;
}

.nt_button:before, .nt_switch:before, .nt_icon_settings {
	-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
	
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	-ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.nt_button:hover:before {
	background: dodgerblue;

}

.nt_arrow {
	margin-top: 0.2em;
	border-top: 0.8em solid transparent;
	border-left: 1em solid #444;
	border-bottom: 0.8em solid transparent;
}

.nt_container {
	min-width: 300px;

	padding: 0.5em;
	background: #444;

	margin-right: 0.5em;
	margin-top: -2em;

	overflow: hidden;
}

.nt_date {
	text-align: right;
}

.nt_container > ul {
	max-height: 400px;
	width: 120%;

	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-y: scroll;

	color: white;
}

.nt_container > ul > li {
	width: 80%;
	padding: 0.25em 0.5em;
	color: white;
	text-decoration: none;
}

.nt_container > ul > li:hover {
	background-color: orangered;
}

.nt_icon_settings {
	float: right;

	padding: 0em 0.2em;
	width: 2em; height: 2em;

	background: #333 url(/assets/blog/layout-images/settings.png) no-repeat center center;
	background-size: 1.5em 1.5em;
}

.nt_icon_settings:hover {
	background-color: #555;
}

ul.nt_smenu {
	font-family: custom-sans;
	cursor: default;
}

ul.nt_smenu > li {
	padding: 0.2em 0.5em;
}

ul.nt_smenu > li:hover {
	background-color: black;
}

ul.nt_smenu > li[active] > span.nt_switch:before {
	margin-top: -1.2em;
}

ul.nt_smenu > li > span {
	display: inline-block;
}

.nt_switch {
	width: 2.5em;
	height: 1.2em;
	text-align: center;
	overflow: hidden;
}

.nt_switch:before {
	float: left;
	color: red;
	content: 'OFF';
}

.nt_switch:after {
	float: left;
	color: yellowgreen;
	content: 'ON';
}

.nt_tname {
	padding-left: 0.5em;

}

.nt_tcount {
	float: right;
}