org.opencms.gwt.client.ui.css.highlight.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of opencms-gwt Show documentation

OpenCms is an enterprise-ready, easy to use website content management system based on Java and XML technology. Offering a complete set of features, OpenCms helps content managers worldwide to create and maintain beautiful websites fast and efficiently.

There is a newer version: 18.0

Show newest version

.highlightBox{
	position: absolute;
	z-index: value("constants.css.zIndexHighlighting");
	background: transparent;
}

.highlightBox {
	opacity: 0.7;
}

.highlightBox div{
	position: absolute;
	top: 0px;
	left: 0px;
}

.highlightBox .borderLeft, .highlightBox .borderRight{
	width: 2px;
}

.highlightBox .borderTop, .highlightBox .borderBottom{
	height: 2px
}

@if user.agent safari {
	.animated .borderLeft{
		-webkit-animation: moveDown 1s linear normal infinite;
	}
	
	.animated .borderRight{
		-webkit-animation: moveDown 1s linear reverse infinite;
	}
	
	.animated .borderTop{
		-webkit-animation: moveRight 1s linear reverse infinite;
	}
	
	.animated .borderBottom{
		-webkit-animation: moveRight 1s linear normal infinite;
	}	
	
	@-webkit-keyframes moveRight {
		0% {background-position: 0px 50%;}
		100% {background-position: 16px 50%;}
	}

	@-webkit-keyframes moveDown {
		0% {background-position: 50% 8px;}
		100% {background-position: 50% 24px;}
	}
} @else {
	.animated .borderLeft{
		animation: moveDown 1s linear normal infinite;
	}
	
	.animated .borderRight{
		animation: moveDown 1s linear reverse infinite;
	}
	
	.animated .borderTop{
		animation: moveRight 1s linear reverse infinite;
	}
	
	.animated .borderBottom{
		animation: moveRight 1s linear normal infinite;
	}	
	
	@keyframes moveRight {
		0% {background-position: 0px 50%;}
		100% {background-position: 16px 50%;}
	}

	@keyframes moveDown {
		0% {background-position: 50% 8px;}
		100% {background-position: 50% 24px;}
	}
}



.colorSolidGrey .borderLeft, .colorSolidGrey .borderRight, .colorSolidGrey .borderTop, .colorSolidGrey .borderBottom{
	background: rgba(181,189,200,1);
}

.colorGrey .borderLeft, .colorGrey .borderRight{
	background: linear-gradient(
  		to bottom,
  		rgba(181,189,200,1) ,
  		rgba(181,189,200,1)  50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 100% 16px;
}

.colorGrey .borderTop, .colorGrey .borderBottom{
	background: linear-gradient(
  		to right,
  		rgba(181,189,200,1) ,
  		rgba(181,189,200,1)  50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 16px  100%;
}


.colorRed .borderLeft, .colorRed .borderRight{
	background: linear-gradient(
  		to bottom,
  		rgba(179,27,52,1),
  		rgba(179,27,52,1) 50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 100% 16px;
}

.colorRed .borderTop, .colorRed .borderBottom{
	background: linear-gradient(
  		to right,
  		rgba(179,27,52,1),
  		rgba(179,27,52,1) 50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 16px  100%;
}

.colorBlue .borderLeft, .colorBlue .borderRight{
	background: linear-gradient(
  		to bottom,
  		rgba(135,224,253,1),
  		rgba(135,224,253,1)  50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 100% 16px;
}

.colorBlue .borderTop, .colorBlue .borderBottom{
	background: linear-gradient(
  		to right,
  		rgba(135,224,253,1),
  		rgba(135,224,253,1)  50%,
  		rgba(125,185,232,0) 50%,
  		rgba(125,185,232,0)
	);
	background-size: 16px  100%;
}