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

    • org.opencms.gwt.client.ui.css.input.css 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 html-face, gwt-ToggleButton, gwt-SuggestBoxPopup, item-selected, cmsState, cmsState-up-disabled, cmsState-down-disabled, cmsState-up, cmsState-up-hovering, cmsState-down-hovering, cmsState-down, cmsState-up-disabled, cmsState-down-disabled;

/* inner text box of the text box widget */
input.textBox {
	border: none;
	width: 98%;
	background: transparent;
	padding: 0px;
	margin: 0px;
	border-radius: value("constants.css.borderRadius");
	color: value("constants.css.textColor");
	line-height: value("constants.css.lineHeight");
	font-size: value("constants.css.fontSize");
	box-shadow:none;
	outline: none;
	display: inline;
	height: value("constants.css.inputInnerHeight");
	vertical-align: middle;
}

.comboBoxOpener input {
	outline: none;
	width: 100%;
	height: 28px;
}

input.textBox:focus{
	box-shadow:none;
}

.highTextBoxes .textBox {
	height: value("constants.css.inputInnerHeight");
}

input.textboxGhostMode {
	font-style: oblique;
	color: value("constants.css.textColorDisabled") /*!important*/;
}

.textBoxPanelWhite {
	background-color: white; 
}



.textBoxPanelDisabled {
	background-color: value("constants.css.backgroundColorDisabled");
}

.textBoxPanelDisabled * {
	color: value("constants.css.textColorDisabled");
	cursor: default;
}

.showDisabledAsGhostMode .textBoxPanelDisabled { 
	background-color: white;
}

.showDisabledAsGhostMode .textBoxPanelDisabled input {
	font-style: oblique; 
	color: value("constants.css.textColorDisabled");
}
	
	
	


.textBoxPanelError {
	border: 1px solid value("constants.css.borderColorHighlight");
	background-color: value("constants.css.backgroundColorInputError");
	overflow:hidden;
}



.weakText * {
	font-style: oblique !important;
	color: value("constants.css.textColorDisabled") !important;
}

.textBoxWidget {}
.checkBox{
	vertical-align: middle;
}

.checkBox div.html-face {
	font-weight: normal; 
	line-height: value("constants.css.inputHeight");
	vertical-align: middle;
}

input.textBoxReadOnly {
	background-color: value("constants.css.backgroundColorDisabled");
}

.textBoxPanel {
	border: 1px solid value("constants.css.borderColor");
	overflow:hidden;
}


.colorPicker {
	background-color: transparent;
    border-radius: value("constants.css.borderRadius");
    box-shadow: none;
    display: block;
    height: value("constants.css.inputHeight");
    width: auto;
}




div.textArea {
    overflow:hidden;
	position: relative;
}
div.textArea > div.disableTextArea {
	position: absolute;
	toP: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: value("constants.css.backgroundColorDialog");
	opacity: 0.1;
}
.textAreaBoxPanel{
	border: 1px solid value("constants.css.borderColor");
}
div.textArea textarea{
	border:none;
	font-family: value("constants.css.fontFamilyMono");
}

.checkBox .gwt-ToggleButton {
	outline: none;
}

.checkBoxImageChecked {
	line-height: value("constants.css.inputHeight");
	font-size: 16px;
	color: inherit;
	width: 16px;
}
.checkBoxImageUnchecked{}
.cmsState .checkBoxImage, 
.triState .triStateOn, .triState .triStateOff, .triState .triStateMedium,
.cmsState .radioButtonImage {
    border: 1px solid value("constants.css.textColorDisabledButton");
    border-radius: 4px;
    padding: 1px;
    height: 15px;
    width: 15px;
    font-size: 11px;
    line-height: 13px;
    background-color: value("constants.css.backgroundColorInfo");
    color: inherit;
}
.cmsState span.radioButtonImage {
	border-radius: 7px;
	padding: 3px;
	font-size: 7px;
    line-height: 9px;
}
.cmsState.cmsState-up-disabled .checkBoxImage, .cmsState-down-disabled .checkBoxImage,
.cmsState.cmsState-up-disabled .radioButtonImage, .cmsState-down-disabled .radioButtonImage, .triState .triStateMedium  {
	background-color: value("constants.css.backgroundColorDisabled")";
	border-color: value("constants.css.borderColor");
}

.cmsState.cmsState-up-hovering .checkBoxImage, .cmsState-down-hovering .checkBoxImage,
.cmsState.cmsState-up-hovering .radioButtonImage, .cmsState-down-hovering .radioButtonImage {
	background-color: #e6f4fb; /* lighten 45% of textColorHighlight */
	border-color: value("constants.css.textColor");
	color: value("constants.css.textColorHighlight");
}

.cmsState.cmsState-down-disabled .checkBoxImage:before, .cmsState.cmsState-down-disabled .radioButtonImage:before {
	color: value("constants.css.textColorDisabled")";
}

.cmsState-down .checkBoxImage:before, .cmsState-down-hovering .checkBoxImage:before, .cmsState-down-disabled .checkBoxImage:before,.checkBoxImageChecked:before, .triState .triStateOn:before, .triState .triStateMedium:before {
	content: "\e916";
}
.cmsState-down .radioButtonImage:before, .cmsState-down-hovering .radioButtonImage:before, .cmsState-down-disabled .radioButtonImage:before{
	content: "\e62b";
}
.cmsState-down .checkBoxImage:before, .cmsState-down-hovering .checkBoxImage:before, .cmsState-down-disabled .checkBoxImage:before, 
.checkBoxImageChecked:before, .triState .triStateOn:before, .triState .triStateMedium:before,
.cmsState-down .radioButtonImage:before, .cmsState-down-hovering .radioButtonImage:before, .cmsState-down-disabled .radioButtonImage:before {
	font-family: opencms-font;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.inherited {
	color: #2197DB;
	font-size: 14px;
}

.radioButton .gwt-ToggleButton {
	outline: none;
}
	
/* Style for edited text box */
.changed{
	color: value("constants.css.textColorChanged") !important;
}




.radioButtonGroup *, .multiCheckBox *, .textBoxPanel *, .formLabel, .formWidgetContainer * {
	font-size: inherit;
	font-family: inherit;
	color: value("constants.css.textColor");
}






.formLabel {
	font-weight: normal;
}

.selectBoxRoot *, .selectBoxSelector * {
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
}



.selectBoxSelector div, div.gwt-SuggestBoxPopup > div{
	border-radius: value("constants.css.borderRadius");
}

div.gwt-SuggestBoxPopup{
	border: 1px solid value("constants.css.borderColor");
	border-top-width: 0px;
	background-color: value("constants.css.backgroundColorDialog");
	padding: 2px 0px;
	z-index: value("constants.css.zIndexPopup");
	border-bottom-left-radius: value("constants.css.borderRadius");
	border-bottom-right-radius: value("constants.css.borderRadius");
	margin-left: -5px;
}


div.error, .error {
	text-align: left;
	border: 1px solid value("constants.css.borderColorHighlight");
	background-color: value("constants.css.backgroundColorInfo");
	color: value("constants.css.textColor");
    margin-top: 2px;
    padding: 3px;
    position: absolute;
    z-index: value("constants.css.zIndexInline");
}

.selectBoxRoot.selectBoxDisabled .selectBoxSelected{
	background-color: value("constants.css.backgroundColorStateDisabled");
	color: value("constants.css.textColorDisabled");
	border-color: value("constants.css.textColorDisabled");
}
.selectBoxRoot.selectBoxDisabled .selectBoxSelected *{
	color: value("constants.css.textColorDisabled");
}

.openerNoHover.selectBoxSelected, .openerHover.selectBoxSelected {
	width: auto; 
	height:auto;
	min-height: 0px;
	position: relative;
	border: 1px solid value("constants.css.borderColor");
	background-image: value("constants.css.gradientListItem");;
	outline: none;
}

.selectBoxSelected .selectBoxOpener {
	position:relative;
}

.comboBox .openerNoHover.selectBoxSelected, .comboBox .openerHover.selectBoxSelected { 
	background-image: none;
	background-color: white; 
}


.openerHover.selectBoxSelected:before {
	content: "";
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	backgound: transparent;
	opacity: 0.4;
	z-index: 0;
	border-radius: value("constants.css.borderRadius");
	background-color: value("constants.css.backgroundColorStateHover");
}
.comboBox .openerHover.selectBoxSelected:before {
	display: none;	
}

.noSelectionSelectBox .openerNoHover.selectBoxSelected, .noSelectionSelectBox .openerHover.selectBoxSelected {
	background-image: none !important;
	font-style: oblique !important; 
	background-color: white !important; 
}

/*.noSelectionSelectBox * {
	background-color: white !important; 
}*/

.noSelectionSelectBox .selectBoxOpener {
	color: value("constants.css.textColorDisabled") !important; 
}

div.selectBoxSelector, div.selectorPopup.selectBoxSelector{
	border: 1px solid value("constants.css.borderColor");
	background-color: value("constants.css.backgroundColorDialog");
	padding-bottom: 2px;
	z-index: value("constants.css.zIndexPopup");
}



div.selectorPopup, .selectorPopup * {
	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;
}

.selectorPopup{
	z-index: value("constants.css.zIndexPopup");
}

div.selectBoxCell, div.selectorPopup div.selectBoxSelector div.selectBoxCell{
	color: value("constants.css.textColor");
	background-color: value("constants.css.backgroundColorDialog");
	padding: 1px 5px;
	cursor: pointer;
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
}

div.selectHover, div.selectorPopup.selectBoxSelector div.selectBoxCell.selectHover, div.gwt-SuggestBoxPopup .item-selected{
	background-color: value("constants.css.backgroundColorHighlight");
}

.selectIcon { 
	position: absolute !important;
	right: 2px;
	top: 8px;
}

div.selectComboIcon {
	position: absolute !important;
	right: 20px; 
	top: 4px;
	color: value("constants.css.textColor") !important;
}

.selectBoxRoot {
	/* needed to enable hasLayout in IE (required for reading clientHeight) */
	min-height: 0px;
	width: 100%;
	position: relative;
}

div.selectBoxOpener {
	margin: 0px 12px 0px 5px;
	cursor: pointer;
	height: value("constants.css.inputInnerHeight");
	line-height: value("constants.css.inputInnerHeight");
	vertical-align: middle;
}

.selectBoxSelected .comboBoxOpener{
	border: medium none;
    color: value("constants.css.textColor");
    cursor: pointer;
	font-family: value("constants.css.fontFamily");
	font-size: value("constants.css.fontSize");
    height: value("constants.css.inputInnerHeight");
    padding: 0px 15px 0px 0px;
    box-shadow: none;
    background:  value("constants.css.backgroundColorDialog");
    margin: 0 12px 0 5px; 
    position: relative;
}


div.dataValue {
	height: 24px;
	margin-top: 2px;
	margin-right: 2px;
	border: 1px solid value("constants.css.borderColorEditor");
	border-radius: value("constants.css.borderRadius");
	margin: 0 2px;
	cursor: pointer;
	position: relative;
}

div.categoryScrollPanel{
	margin-top: 6px;
	border: 1px solid value("constants.css.borderColor");
	background-color: value("constants.css.backgroundColorDialog"); 
}

.disabled div.dataValue{
	cursor: default;
}

div.categoryItem{
	margin-top: 6px;
}

div.fader, div.textArea div.fader {
	background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) !important;
}
div.textArea div.fader{
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,1) 100%) !important;
} 

div.fader{
	cursor: pointer;
    overflow: hidden;
    height: value("constants.css.inputInnerHeight");
    width: 40px;
    position: absolute;
}

div.selectBoxRoot div.fader{   	
	bottom: 1px;
    right: 15px;
}
div.selectionInput{
	border: 1px solid value("constants.css.borderColor");
	padding: 0px 21px 0px 4px;
	height: value("constants.css.inputHeight");
}

div.selectionInput>input[type=text]{
	height: value("constants.css.inputInnerHeight");
	width: 100%;
	outline:none;
	border: none;
}

div.selectionInput div.fader{   	
	right: 21px;
	bottom: 0px;
	position: absolute;
}
div.selectionInput .opener{
	position: absolute;
	right: 3px;
	top: 7px;
}

div.textArea div.fader{
	width: auto;
	border-radius: 0 0 0 value("constants.css.borderRadius");
    bottom: 1px;
    left:1px;
    right:12px;
}
div.selectionInput{
	position: relative;
}
input.comboBoxOpener:disabled{
	background-color: value("constants.css.backgroundColorDialog");
	color: value("constants.css.textColorDisabled");
	border: value("constants.css.textColorDisabled");
}

.openerNoHover {}
.openerHover {
}

.inlineBlock {
	display: inline-block;
}

.label {
	overflow: hidden;
	white-space: nowrap;
}

.labelTruncated {
	overflow: hidden;
	white-space: nowrap;
}

input.labelInput {
	background: transparent;
	border: none;
	vertical-align: middle;
}

div.formRow {
	margin: 2px 0;
	position: relative;
	min-height: value("constants.css.inputHeight");
}

@eval formLabelWidth org.opencms.gwt.client.ui.input.form.CmsFormRow.getLabelWidth();
@eval openerWidth org.opencms.gwt.client.ui.input.form.CmsFormRow.getOpenerWidth();
@eval widgetContainerWidth org.opencms.gwt.client.ui.input.form.CmsFormRow.getWidgetContainerWidth();
@eval widgetContainerMargin org.opencms.gwt.client.ui.input.form.CmsFormRow.getWidgetContainerLeftMargin();  

div.formOpener {
	width: openerWidth;
	float: left;
	vertical-align: top; 
}

div.formInfo {
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 12px;
	font-weight: bold; 
}

div.formLabel { 
	width: formLabelWidth;
	overflow: hidden;
	vertical-align: top;
	margin-top: 3px;
	line-height: value("constants.css.lineHeight");
	float: left;
}


div.formWidgetContainer {
	width: widgetContainerWidth;
	margin-left: widgetContainerMargin;
}

div.separator {
	width: 100%;
	height: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	/** Use the border color as background because this CSS class behaves like a border. */
	background-color: value("constants.css.borderColor");
}

div.formDescriptionLabel {
	margin-bottom: 5px;
	margin-top: 5px;
}

.subtitleSuffix {
	font-weight: bold;
	margin-left: 8px;
}

.textAreaBox, .selectBoxPopup{}


.formGradientBackground .fieldset-fieldsetVisible, .formGradientBackground .properties-vfsModeSimplePropertiesBox { 
	background: transparent !important; 
}

.formWidgetContainer .checkBox { 
	margin-top: 2px; 
}

.multiCheckboxPanel {
	border: 1px solid value("constants.css.borderColor");
	overflow:hidden;
}




    © 2015 - 2024 Weber Informatics LLC | Privacy Policy