All Downloads are FREE. Search and download functionalities are using the official Maven repository.
  • Log In
  • Register

    • org.opencms.gwt.client.ui.css.toolbar.gss Maven / Gradle / Ivy

    Go to download

    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
    @external cms-user-info, cms-user-image, opencms;

@def TOOLBAR_HEIGHT 52px;

@keyframes toolbarfadeaway {
	from {
		background-color: rgba(255,255,255,1);
		border-width: 1px;
		border-color: rgba(201,201,201,1);
		height: TOOLBAR_HEIGHT;
	}
	99% {
		background-color: rgba(255,255,255,0);
		border-width: 1px;
		border-color: rgba(201,201,201,0);
		height: TOOLBAR_HEIGHT;
	}
	to {
		background-color: rgba(255,255,255,0);
		border-width: 0;
		border-color: transparent;
		height: 0;
	}
}
@keyframes buttonfadein {
	to {
		opacity: 1;
		height: 40px;
		visibility: visible;
	}
	99% {
		opacity: 0;
		height: 40px;
		visibility: visible;
	}
	from {
		opacity: 0;
		height: 0;
		visibility: hidden;
	}
}
	
@keyframes toolbarfadein {
	to {
		background-color: rgba(255,255,255,1);
		border-width: 1px;
		border-color: rgba(201,201,201,1);
	}
	1% {
		background-color: rgba(255,255,255,0);
		border-width: 1px;
		border-color: rgba(201,201,201,0);
	}
	from {
		background-color: rgba(255,255,255,0);
		border-width: 0;
		border-color: transparent;
	}
}
@keyframes buttonfadeaway {
	from {
		opacity: 1;
		height: 40px;
		visibility: visible;
		overflow: visible;
	}
	99% {
		opacity: 0;
		height: 40px;
		visibility: visible;
		overflow: visible;
	}
	to {
		opacity: 0;
		height: 0;
		visibility: hidden;
		overflow: hidden;
	}
}

@keyframes logofadein {
	to {
		opacity: 1;
		display:block;
	}
	1% {
		opacity: 0;
		display:block;
	}
	from {
		opacity: 0;
		display:none;
	}
}
@keyframes logofadeaway {
	from {
		opacity: 1;
		display:block;
	}
	99% {
		opacity: 0;
		display:block;
	}
	to {
		opacity: 0;
		display:none;
	}
}

@keyframes buttonfadein {
	to {
		opacity: 1;
		height: 40px;
		visibility: visible;
	}
	1% {
		opacity: 0;
		height: 40px;
		visibility: visible;
	}
	from {
		opacity: 0;
		height: 0;
		visibility: hidden;
	}
}

.toolbarHide.toolbar .toolbarBackground{
	animation-name: toolbarfadeaway;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	background-color: transparent;
	border-width: 0;
	border-color: transparent;
	height: 0;
}

.toolbarHide.toolbar .toolbarButtonsRight, .toolbarHide.toolbar .toolbarButtonsLeft{
	height: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.toolbarHide.toolbar .toolbarCenter{
	display: none;
	animation-name: logofadeaway;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}

.toolbar .toolbarButtonsRight > div, .toolbar .toolbarButtonsLeft > div{
	animation-name: buttonfadein;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	display: inline-block;
	vertical-align: middle;
}

.toolbarHide.toolbar .toolbarButtonsRight > div, .toolbarHide.toolbar .toolbarButtonsLeft > div {
	animation-name: buttonfadeaway;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.toolbar .toolbarButtonsRight > div.toolbarShow, .toolbar .toolbarButtonsLeft > div.toolbarShow {
	animation: none;
}

.toolbarHide.toolbar .toolbarButtonsRight > div.toolbarShow, .toolbarHide.toolbar .toolbarButtonsLeft > div.toolbarShow {
	animation: none;
	height: 40px;
	overflow: show;
	visibility: visible;
	background: rgba(255,255,255,0.5);
}


.simpleToolbarShow{}

.toolbar, .toolbar *, .toolbar table tr td {
	margin: 0;
	padding: 0;
	border: none;
	color: value("constants.css.textColor"); 
	font-family: value("constants.css.fontFamily"); 
 	font-size: value("constants.css.fontSize");
	line-height: value("constants.css.lineHeight"); 
	background: transparent;
	text-align: left;
	height: auto;
	width: auto;
	min-height: 0;
	max-height: none;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.toolbar{
	left: 0px;
	top: 0px;
	right: 0px;
	position: fixed;
	z-index: value("constants.css.zIndexPopup"); 
}

.opencms .toolbar { 
	z-index: 9000;
}



.toolbarBackground{
	animation-name: toolbarfadein;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	height: 52px;
	position:absolute;
	top:0px;
	left:0px;
	right: 0px;
	border-bottom:1px solid value("constants.css.borderColor"); 
	color:value("constants.css.textColor");
	padding:0px;
	margin:0px;
	background-color: value("constants.css.backgroundColorDialog");
}

.toolbarBackground .toolbarCenter{
	display: block;
  	position: absolute;
  	left: 0;
  	right:0;
  	top: 4px;
  	text-align: center;
  	animation-name: logofadein;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}

.toolbarBackground .toolbarLogo{
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc0MTM2IiB3aWR0aD0iMTcwIiBoZWlnaHQ9IjQyIiB2aWV3Qm94PSIwIDAgMTcwIDQyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3Ij4NCiAgPGc+DQogICAgPHBhdGggaWQ9ImxvZ29fc2hhcGUiIGZpbGw9IiNiMzFiMzQiIGQ9Ik0yOS44Ni41Yy00LjIyLjAyLTguNDIgMS4zLTExLjg0IDMuOC0xLjg2IDEuMjctMy41NSAyLjkyLTQuODggNC43NS0xLjUtLjE3LTIuOTYgMC00LjQzLjQ1QzQuMjMgMTAuNy43NSAxNC42Ny4xOCAxOS4yN2MtLjYgNC4xMiAxLjEgOC41NyA0LjQgMTEuMTMgMi4zNiAxLjkgNS40NyAyLjg0IDguNDggMi42IDEuOSAyLjY4IDQuNCA0Ljc4IDcuMzQgNi4zIDYuMzMgMy4zOCAxNC41IDMuMDcgMjAuNTctLjc4IDEtLjc3IDIuMzUtMS4zMyAyLjktMi41Mi42LTEuNDYtMS0zLjEyLTIuNS0yLjYtLjE4LjA4LS4zNy4xNi0uNTMuMjgtNC4zMiAzLjczLTEwLjY4IDQuOTQtMTYuMSAzLjEyLTIuOTItLjkzLTUuNTItMi42Ni03LjUtNSAzLjMzLTEuNTggNS44Ny00Ljg3IDYuNTgtOC41Ljg1LTMuOTMtLjQ3LTguMi0zLjQtMTEtLjg3LS44Ni0xLjktMS40Ny0zLTIuMDIuOS0xLjA0IDEuOTMtMi4wNyAzLjA3LTIuODQgNS4yNy0zLjc0IDEyLjg1LTMuOTQgMTguMy0uNDcgMS4wNy41MiAxLjgyIDEuNjggMy4wNSAxLjgyIDEuNTguMTYgMi43Mi0xLjggMS44LTMuMS0xLjE4LTEuMjgtMi43NC0yLjE4LTQuMjgtMi45OEMzNi40NSAxLjE4IDMzLjEzLjQ1IDI5Ljg3LjV6Ii8+DQogICAgPHBhdGggaWQ9ImxvZ29fd2hpdGVfZG90IiBmaWxsPSIjZmZmIiBkPSJNMTkuODQgMjIuNmMtLjU3IDIuOTItMi45IDUuNC01Ljc3IDYuMTMtMi44LjgtNi0uMTQtNy45NC0yLjMtMS45LTItMi42LTUuMDMtMS44Mi03LjY3LjcyLTIuNTMgMi43Ny00LjY0IDUuMy01LjQyIDIuNTctLjgzIDUuNTgtLjIzIDcuNiAxLjU4IDIuMiAxLjg0IDMuMjMgNC45IDIuNjMgNy42OHoiLz4NCiAgICA8cGF0aCBpZD0ibG9nb19ibHVlX2RvdCIgZmlsbD0iIzAwMzA4MiIgZD0iTTE1LjkgMjEuNzhjLS4xOCAxLS43OCAxLjktMS42IDIuNDctLjc1LjUzLTEuNy44LTIuNi43My0uOTYtLjA4LTEuOS0uNS0yLjU2LTEuMi0uOC0uOC0xLjIyLTEuOTgtMS4xMy0zLjEyLjA3LS43My4zMi0xLjQ0Ljc2LTIuMDMuNy0uOTUgMS44LTEuNTggMy0xLjY0Ljk1LS4wOCAxLjk1LjI0IDIuNy44NC43Ni42IDEuMyAxLjQ2IDEuNDUgMi40LjEyLjUuMSAxLjAzIDAgMS41NHoiLz4NCiAgICA8cGF0aCBpZD0iTyIgZmlsbD0iIzAwMzA4MiIgZD0iTTM3LjAyIDEwLjAyYy0yLjMyLS4wMy01LjAzIDIuNjctNSA0Ljk2djEyYy0uMDYgMi4zNSAyLjY2IDUuMDIgNSA1LjAyaDlDNDguMyAzMiA1MSAyOS4yNyA1MSAyNy4wMlYxNS4zYzAtMi42LTIuNjItNS4zLTQuOTctNS4yOHptMCAzLjk3aDljLjUgMCAuOTguNDQuOTggMWwuMDIgMTIuMDNjLS4wMi40OC0uNTMuOTgtMSAxaC05Yy0uNi0uMDQtLjk3LS40My0uOTgtMS4wMmwtLjAyLTEyYy4wMy0uNi41LTEgMS0xeiIvPg0KICAgIDxwYXRoIGlkPSJwIiBmaWxsPSIjMDAzMDgyIiBkPSJNNTMuMDIgMTUuOTZDNTMuMDIgMTcgNTQgMTggNTUgMTguMDJoMTAuMWMuNi4wOC45LjQ2LjkzIDF2OGMtLjAyLjQ1LS40NS45NS0xLjA0IDFoLTkuMDRDNTQuNDggMjggNTMgMjkuNSA1My4wMiAzMXYzLjk3YzAgMS4wMy45OCAyLjAzIDEuOTggMiAxIC4wMyAyLS45NyAyLTJWMzIuOWMwLS40NS41NC0uODUgMS4wNi0uOWg2LjY1YzIuNiAwIDUuMzItMi42NiA1LjMtNC45N3YtOGMtLjAyLTIuMzgtMi43LTUuMDgtNS01LjAyaC05Ljk4Yy0xLjAyLS4wNS0yIDEtMiAxLjk2eiIvPg0KICAgIDxwYXRoIGlkPSJlIiBmaWxsPSIjMDAzMDgyIiBkPSJNODkgMTUuOThDODguOTcgMTUgODguMDMgMTQgODcuMDIgMTRINzdjLTIuMjYgMC01IDIuNjUtNC45NyA1bC4wMyA4LjA1QzcyIDI5LjMyIDc0LjcgMzIgNzcgMzEuOTdsMTAuMDMuMDNDODggMzIgODkgMzEgODkgMzAuMDZjMC0xLjA2LTEtMi4wNi0xLjk3LTIuMDNMNzcgMjhjLS40NyAwLTEtLjcyLTEtMS41NiAwLS43NS40NS0xLjQ0IDEtMS40NGgxMC4wM2MuOTcgMCAyLjAyLS45NSAxLjk2LTIgLjA1LS45NS0xLTItMS45Ny0xLjk3TDc3IDIxYy0uNiAwLTEtLjYtMS4wMi0xLjU4LjAyLS44Mi41LTEuNDIgMS4wMy0xLjRoMTAuMDNjMS0uMDIgMS45NS0xLjAyIDEuOTYtMi4wNHoiLz4NCiAgICA8cGF0aCBpZD0ibiIgZmlsbD0iIzAwMzA4MiIgZD0iTTk2IDE0LjA0Yy0yLjMtLjA1LTUgMi42LTUgNC45NnYxMC45N0M5MSAzMSA5MiAzMiA5Mi45NSAzMmMxLjA1IDAgMi4wNS0xIDIuMS0yLjAzTDk1IDE5YzAtLjYyLjUtLjk0IDEuMDQtLjk4aDdjLjU0LS4wMy45OC40OCAxIC45OHYxMC45N0MxMDMuOTcgMzEgMTA1IDMyIDEwNiAzMS45M2MxIC4wNyAyLS45MyAyLjA0LTEuOTZWMTljLS4wNC0yLjM3LTIuNS01LTUuMDgtNC45NnoiLz4NCiAgICA8cGF0aCBpZD0iQyIgZmlsbD0iI2IzMWIzNCIgZD0iTTExNS4wMiAxMC4wMmMtMi4zIDAtNS4wMiAyLjY1LTUuMDcgNC45NkwxMTAgMjdjMCAyLjM3IDIuNyA1LjAyIDUuMDIgNS4wNWgxMC4wM0MxMjYgMzIgMTI3IDMxIDEyNyAzMC4wMmMwLTEuMDItMS0yLjAyLTEuOTUtMmgtMTAuMDNjLS41NS0uMDYtMS4wMi0uNTItMS0xbC0uMDQtMTIuMDRjLjAyLS41Ni41LTEgMS4wNC0uOTZoMTAuMDNDMTI2IDE0IDEyNyAxMyAxMjcuMDIgMTEuOTggMTI3IDExIDEyNiAxMCAxMjUuMDUgMTAuMDJ6Ii8+DQogICAgPHBhdGggaWQ9Im0iIGZpbGw9IiNiMzFiMzQiIGQ9Ik0xMzQgMTRjLTIuMyAwLTUgMi42NS01LjAyIDQuOThWMzBjLjAyIDEgMS4wMiAyIDIuMDUgMiAuOTcgMCAxLjk3LTEgMS45OC0yVjE4Ljk4YzAtLjUuNTItLjk4IDEuMDMtLjk1SDEzN2MuNjMtLjAzIDEgLjQgMSAuOTVWMzBjMCAxIDEgMiAyIDJzMi0xIDEuOTgtMlYxOC45OGMuMDItLjUuNS0uOTggMS4wNS0uOTVoMy4wM2MuNTUtLjAzLjk0LjUuOTcuOTVWMzBjLS4wMyAxIC45NyAyIDIgMiAuOTcgMCAyLjAyLTEgMi0yVjE4Ljk4Yy4wMi0yLjMtMi42Ni00Ljk4LTQuOTctNC45OHoiLz4NCiAgICA8cGF0aCBpZD0icyIgZmlsbD0iI2IzMWIzNCIgZD0iTTE1OC4wNCAxNGMtMi40NC0uMDctNS4wNyAyLjg0LTUuMDIgNS40My0uMDUgMi40IDIuNTUgNS41NyA1LjAyIDUuNThsNy0uMDNjLjU0LjA2Ljk2LjYyIDEgMS41My0uMDQuODUtLjUyIDEuNS0xIDEuNTNoLTEwLjA4Yy0uOTctLjA0LTEuODguOTctMS45NCAyLjA2LjA2LjkuOSAxLjkgMS45NCAxLjkyaDEwLjFjMi4yNy0uMDMgNC45NS0zIDQuOTUtNS41MiAwLTIuNDgtMi42LTUuNS00Ljk1LTUuNDhoLTdjLS42Mi0uMDItMS4wNS0uNjYtMS4wNC0xLjYgMC0uOC41NC0xLjQgMS4wNC0xLjQ0aDEwLjAyYzEgLjAyIDItLjk4IDEuOTUtMS45Ny4wNS0xLS45NS0yLTEuOTQtMnoiLz4NCiAgPC9nPg0KPC9zdmc+") no-repeat 0 0 / 170px 42px transparent;
	display: inline-block;
  	height: 42px;
  	width: 170px;
}

@media screen and (max-width: 1024px) {
	div.toolbarBackground .toolbarLogo{
		display: none;
	}
}

.toolbarBackground .toolbarContent{
	margin: 0 20px;
  	min-width: 800px;
  	text-align: center;
  	display: block;
}

.toolbarButtonsRight, .toolbarButtonsLeft{
	margin: 5px 0;
	z-index: 10;
	height: 40px;
	overflow: hidden;
}

.toolbarButtonsRight > * {
	margin-top: auto;
	margin-bottom: auto;
}


.toolbarButtonsLeft{
	float: left;
	width: 49%;
}



.toolbarButtonsRight{
	text-align: right;
	vertical-align:middle;
	float: right;
	display: flex; 
}


.toolbarButtonsLeft>div{
	margin-right: 10px;
	vertical-align:middle;
}

.toolbarButtonsRight>div{
	margin-left: 10px;
}

.toolbarBackground div.title{
	background: #4E545B;
    border-radius: 4px;
    color: #FAFAFD;
    font-size: 20px;
    font-weight: 600;
    padding: 4px 12px;
    width: auto !important;
    line-height: 32px;
}

.toolbarBackground div.userInfo{
	padding: 0px !important;
    display: inline-block;
    position: relative;
    -ms-order: 99;
    order: 99;
}

.toolbarBackground div.userInfo > div {
	border: 2px solid #4E545B;
    border-radius: 4px;
    width: 40px;
    height: 40px;
	padding: 2px;
	background: transparent;
}

.toolbarBackground div.userInfo img {
	height: 32px;
	width: 32px;
	vertical-align: middle;
}

.toolbarBackground div.userInfo > div:hover{
	border-color: #2197DB !important;
}

div.userInfoDialog{
	background: #ffffff;
	padding: 3px;
}

div.userInfoDialog div.userInfoButtons{
	clear: both;
	padding-top: 10px;
	text-align: right;
}

div.userInfoDialog div.userInfoButtons > div{
	margin-left: 10px;
}

div.userInfoDialog .cms-user-info{
	margin-left: 112px;
	width: 200px;
}

div.userInfoDialog .cms-user-image{
	border: 1px solid #C5C5C7;
    border-radius: 4px;
    height: 102px;
    padding: 2px;
    float: left;
}

div.userInfoDialog .cms-user-image img{
	height: 96px;
	width: 96px;
}

.notification {
	text-align: center;
	position:absolute;
	/** Must have the value as the .toolbarBackground class. */
	top: 35px;
	width:100%;
}


div.toolbarToggle{
	position: fixed;
	left: 97%;
	top: -3px;
	padding: 3px 3px 1px 3px;
	z-index: value("constants.css.zIndexDND");
}


.toolbarToggle, .toolbarToggle * {
	margin: 0;
	padding: 0;
	border: none;
	color: value("constants.css.textColor");
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
	line-height: value("constants.css.lineHeight");
	background: transparent;
	text-align: left;
	height: auto;
	width: auto;
	min-height: 0;
	max-height: none;
	min-width: 0;
	max-width: none;
}

.toolbarButtonShowSmallElements { 
	
}

.hideButtonShowSmallElements .toolbarButtonShowSmallElements {
	display: none; 
}

.toolbarFontButton { 
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-family: opencms-font;
	font-weight: 500;
	font-size: 32px; 
	position: relative;
	top: 1px; 
}

.quickButton.quickButton {
	width: 166px;
	height: 78px;
	margin-bottom: 10px;
	padding-left: 13px; 
	padding-right: 13px;
	padding-top: 4px;
	padding-bottom: 4px;
	display: inline-block;
	cursor: pointer; 
}

.quickButton .quickButtonWrap { 
}

.quickButton .quickButtonWrap > div { 
  text-align: center;
}

.quickButton .quickButtonImageContainer {
  width: 48px;
  height: 48px;
  display: inline-block; 
  text-align:center;
  position: relative; 
}

.quickButton.quickButtonDeactivated{
	opacity: 0.5;
}
 

.quickButton .quickButtonImageContainer > img {
	display: block;
    position: absolute;
    margin: auto; 
    left:0;
    right:0;
    top:0;
    bottom:0;
}

.quickButton .quickButtonWrap > div > span {
	white-space: nowrap;
	font-family: "Open Sans", sans-serif; 
	font-size: 12px; 
	font-weight: 500;
	color: #34345b;
}

.quickButton .quickButtonWrap > div:last-child {
	overflow:hidden;
	text-overflow: ellipsis;
	position: relative;
	top: -1px; 
}  

 
.quickSlot {}

.quickButtonLegacy .quickButtonImageContainer {
	background-image: radial-gradient(#FFFFFF 30%, #BBBBBB 100%);
	border-radius: 4px;
}




    © 2015 - 2024 Weber Informatics LLC | Privacy Policy