/* * The default styles in the WCM Rendering Portlet for items and fields that are inplace editable. * These styles are contributed to the theme in the HTML . * * These styles can be overridden by customers if required. Typically, customers would do this * by contributing (or overriding) their own style to the theme after these styles. * Alternatively, individual tags can be styled using the 'class' attribute on the EditableElement * and EditableProperty tags, or the global config value 'inplaceEdit.defaultClasses' can be set. * * Note that these styles are used for both LTR and RTL languages, and so therefore all styles * applied to left must also be applied to right. * * The general style here is light blue for editing, light red for errors. This may not work for customer * sites that are light blue or light red. In this case, they'd want to use the override. * * The default class applied to inplace editable fields is 'wcm-default-inplace-editable'. This can be * overridden in the EditableElement and EditableProperty tags. */ /*********************** START INPLACE EDITABLE FIELDS STYLES ********************************/ /* set min height to make sure the content region is editable when it is empty */ .wcm-default-inplace-editable .wcm-inplace-content-region { min-height: 18px; } /* Ensure there is a gap between the editable region and its border (which is 1px), so that the border is always shown. */ .wcm-default-inplace-editable > .wcm-inplace-content-region { padding: 1px; } /* Ensure inplace edit fields with format="span" are positioned inline when editing and also have a min-width so when the element is editable even when its content is empty*/ .wpthemeControlBody span.wcm-default-inplace-editable { display: inline-block; min-width: 5px; } /* All borders that we add around the editable field will have these styles applied */ .wpthemeControlBody .wcm-default-inplace-editable { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /* Styles for the placeholder text */ .wcm-default-inplace-editable .placeholder { color: gray; font-style: italic; overflow: hidden; } /************************************************************************* * Styles for editable fields on hover *************************************************************************/ /* Style for editable fields when hovering over the containing web content viewer portlet - Show light box around all editable fields in the current portlet. */ .wpthemeControlBody:hover .wcm-default-inplace-editable, /* Apply style when the portlet has hover */ .wpthemeControlBody.wpthemeMenuRefNode .wcm-default-inplace-editable /* Apply styles when the Portlet CAM menu is open */ { -moz-box-shadow: inset 0 0 0px 1px rgba(212, 212, 212, 0.5) !important; -webkit-box-shadow: inset 0 0 0px 1px rgba(212, 212, 212, 0.5)!important; box-shadow: inset 0 0 0px 1px rgba(212, 212, 212, 0.5) !important; } /* Style for editable field while hovering over the field (i.e. while its CAM menu is open). * Blue border around field. (The selector needs to be more specific than the grey border above) */ .wpthemeControlBody .wcm-default-inplace-editable.wpthemeMenuRefNode /* Apply styles while the field's CAM menu is open */ { -moz-box-shadow: inset 0 0 0px 1px rgba(38, 120, 113, 0.5) !important; -webkit-box-shadow: inset 0 0 0px rgba(38, 120, 113, 0.5) !important; box-shadow: inset 0 0 0px 1px rgba(38, 120, 113, 0.5) !important; } /* Style when editable fields are being saved and re-rendered. This style is also used while the Rich Text Editor is loading. */ .wpthemeControlBody:hover .wcm-default-inplace-editable.saving { opacity: 0.5; } /* Style when editable fields are loading value from server.*/ .wpthemeControlBody:hover .wcm-default-inplace-editable.loading { opacity: 0.5; } /* Style when editable fields are loading editor resource from server.*/ .wpthemeControlBody:hover .wcm-default-inplace-editable.loadingEditorResource { opacity: 0.5; } /************************************************************************* * Styles for editable fields with errors *************************************************************************/ /* Style for editable fields in error when hovering over the containing web content viewer portlet Show red box around all in error fields in the current portlet. */ .wpthemeControlBody:hover .wcm-default-inplace-editable.error, /* editable field has error and hover */ .wpthemeControlBody.wpthemeMenuRefNode .wcm-default-inplace-editable.error, /* editable field has error and Portlet CAM menu is open */ .wcm-default-inplace-editable.error.wpthemeMenuRefNode, /* editable field has error and menu hover */ .wcm-default-inplace-editable.error /* editable field has error */ { -moz-box-shadow: inset 0 0 0px 1px rgba(240, 129, 55, 0.45) !important; -webkit-box-shadow: inset 0 0 0px 1px rgba(240, 129, 55, 0.45) !important; box-shadow: inset 0 0 0px 1px rgba(240, 129, 55, 0.45) !important; } /* Icon for editable fields in error when hovered over */ .wcm-default-inplace-editable.error .wcminplace-link-edit { background-image: url('../images/label_error.png'); background-repeat: no-repeat; background-position: left 6px center; padding-left: 24px !important; } /************************************************************************* * Styles for the CAM menus for editable fields *************************************************************************/ /* Styles for entire CAM menu on hover. White background, green text. */ .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList { padding: 0px 2px 0px 2px; background-color: rgb(229, 241, 238) !important; border: 0px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; -moz-box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 1) !important; -webkit-box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 1) !important; box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 1) !important; font-size: 0.9em; color: rgb(38,120,113); font-weight: normal; } /** Styles for the entire CAM menu while the field is being edited. Green background, white text. */ .wcm-default-inplace-editable.editing .wpthemeMenu .wpthemeMenuInlineList { background-color: rgb(38,120,113) !important; color: #ffffff; } /** Align menu with the edge of the editable region - no margin */ .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList li.wpthemeFirst { margin-left: 0px; } /** Style for all menu items on hover. Never changes with hover/focus state. Transparent background - we'll inherit the background of the entire menu */ .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList li, .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList li:hover, .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList li:focus, .wcm-default-inplace-editable .wpthemeMenu .wpthemeMenuInlineList li:active { font-weight: bold; color: rgb(38,120,113); background-color: rgba(0, 0, 0, 0) !important; } /** Styles for all menu items in edit state */ .wcm-default-inplace-editable.editing .wpthemeMenu .wpthemeMenuInlineList li, .wcm-default-inplace-editable.editing .wpthemeMenu .wpthemeMenuInlineList li:hover, .wcm-default-inplace-editable.editing .wpthemeMenu .wpthemeMenuInlineList li:focus, .wcm-default-inplace-editable.editing .wpthemeMenu .wpthemeMenuInlineList li:active { color: #ffffff; font-weight: bold; background-color: rgb(38,120,113) !important; } /* Header entry of the CAM menu - allow space for icon */ .wcminplace-link-edit { /** Hide the vertical bar that is a default in the menus. Do this for both LTR and RTL languages */ border-right: 0 none !important; border-left: 0 none !important; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding-left: 7px !important; } /** Visually hide the save and cancel links (but text is still available for the screen-reader) */ .wcminplace-link-save,.wcminplace-link-cancel { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } /** used by "inplace" editing only. Hide the original text when user start to edit it */ .dijitOffScreen { position: absolute !important; left: -10000px !important; top: -10000px !important; } /*********************** END INPLACE EDIT STYLES ********************************/ /********************* START PORTLET MENU (Open Read Form, Open Edit Form etc.) STYLES ********************************/ /* Style the Header entries of the Portlet Level Menu */ .wcm-default-inplace-portlet-header-entry { font-weight: normal !important; } /* Style for the entries in the Portlet Level Menu */ .wcm-default-inplace-portlet-entry { text-indent: 9px; } /* Style for the workflow label (e.g. "Published" or "Draft") in the header of the Portlet Level Menu */ .wcm-default-inplace-workflow-label { font-style: italic; /* Text is grey - but needs to be dark enough to maintain minimum contrast (4.5:1) when highlighted with light blue background */ color: #666666; font-weight: normal; font-size: 90%; } /********************* END PORTLET MENU STYLES ********************************/ /********************* START CONCURRENT EDITS OVERLAY STYLES ********************************/ /* Styles for the 'Loading...' overlay. These styles add to the styles in the theme's wpthemeOverlay */ .wcm-default-inplace-overlay { display: block; left: 0; top: 0; } /* Styles for the 'Loading...' overlay's spinning image. These styles add to the styles in the theme's wpthemeOverlayImg */ .wcm-default-inplace-overlay-image { position: fixed; } /********************* END CONCURRENT EDITS OVERLAY STYLES ********************************/ /********************* START EMBEDDED CKEDITOR STYLES ********************************/ /* Styles for the CKEditor. Hide the status bar when it's shown at the top (which it is for the inline CK4 editor). */ .cke_top .cke_status_container { display: none; } /* Styles for the CKEditor. Style display:block so that CKEditor 4 behaves like CKeditor 3. */ .cke_chrome { display: block !important; } /* Ck editor's contentEditable div must use overflow:auto, so any margins within the content expand the editor, instead of extending outside the editor */ .wcm-default-inplace-editable .cke_editable { overflow: auto; } /********************* END EMBEDDED CKEDITOR STYLES ********************************/