@lidorsystems/integralui-web/bin/integralui/themes/midnight/integralui.groupbox.midnight.css

IntegralUI Web - Advanced UI Components for Angular

/* Normal State */
.iui-groupbox-header {
	background-color: #323233;
	border: thin solid #323233;
	color: #cccccc;
}
/* Hover State */
.iui-groupbox-header-hovered {
    animation-name: none;
	background-color: #113d5c;
	border: thin solid #113d5c;
	color: white;
}
/* Selected State */
.iui-groupbox-header-selected {
    animation-name: none;
	background-color: #0c293d;
	border-color: #0c293d;
	color: white;
}
.iui-groupbox-content {
	background-color: #252526;
	border: solid thin #151515;
	color: #cccccc;
}

.iui-groupbox-header .iui-groupbox-header-expand-box {
	background: #cccccc !important;
	opacity: 0.5;
}
.iui-groupbox-header-hovered .iui-groupbox-header-expand-box {
	opacity: 0.75;
}
.iui-groupbox-header-selected .iui-groupbox-header-expand-box {
	background: #ffffff !important;
	opacity: 0.75;
}
.iui-groupbox-header-marker-down::before {
	border: 7px solid #151515;
	border-color:  transparent transparent #151515 transparent;
	left: 3px;

	animation-name: marker3;
}
.iui-groupbox-header-marker-down::after {
	content: "";
	border: 5px solid #252526;
	border-color:  transparent transparent #252526 transparent;
	position: absolute;
	bottom: -1px;
	left: 5px;
	width: 0;
	height: 0;
	z-index: 2;

	animation-name: marker;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 0.75s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-play-state: running;
	animation-timing-function: linear; 
}
@keyframes marker3 {
	0% { opacity: 0; }
	80% { opacity: 0.75; }
	100% { opacity: 1; }
}

.iui-groupbox-header-animate-select {
	background: #113d5c;
}