/* ==================================================================================== */ /* ========================= CAS SharePoint 2013 Template CSS ========================= */ /* =================================== User Controls ==================================== */ /* ==================================================================================== */ /* ==================================================================================== */ /* ---------- CSS Baseline /* ==================================================================================== */ *,*:hover,*:focus,*:active { outline: 0px none; } /* Headers */ #custom #header input { color: rgba(34, 34, 34, 0.85); } #custom .opSubTitle input { color: rgba(34, 34, 34, .45); } /* ==================================================================================== */ /* ---------- Site-Wide Reusable Elements /* ==================================================================================== */ /* CSS Tooltips */ #custom .hasTooltip .tooltip { background-color: rgb(255, 255, 255); border: 1px solid rgba(34, 34, 34, .3); } #custom .hasTooltip .tooltip h6 { background-color: rgba(34, 34, 34, 0.08); color: rgba(34, 34, 34, 0.8); } #custom .hasTooltip .tooltip p { background-color: rgba(34, 34, 34, 0.08); color: rgba(34, 34, 34, 0.75); } /* ==================================================================================== */ /* ---------- Managed Navigation In-Page Navigation Controls /* ==================================================================================== */ /************************************** Panels **************************************************************/ /* Panel 1 - The read-only panel seen before the "Edit Links" button is clicked */ /* Panel 2 - The edit-mode panel seen after the "Edit Links" button is clicked */ /* Panel 3 - The read-only panel seen after changes are made and the "Save" button is clicked */ /* ***************************** Panel Container, Header, and Primary Glyphs ****************************** */ /* From LeftNav: #navEditButton (.fa-cogs) - Launch the #custom #navEditor Interface (Panel 1) in read-only mode */ /* Panel 1: #navEditorCustomEdit (.fa-pencil-square-o) - Proceed to edit-mode (Panel 2) */ /* Panel 2: #navEditorCustomSave (.fa-floppy-o) - Save changes and return to read-only mode (Panel 1/3) */ /* Panel 2: #navEditorCustomCancel (.fa-ban) - Discard Changes and return to read-only mode (Panel 1/3) */ /* Panel 1, 2, or 3: #navEditorClose (.fa-times-circle) - Exit the #custom #navEditor Interface */ /* ******************************************************************************************************** */ #custom #custom #navEditor { background-color: rgba(34, 34, 34, 0.08); border-color: rgba(34, 34, 34, .15); } #custom #navEditorHeader { color: rgba(255, 255, 255, 0.85); background-color: rgb(34, 34, 34); } #custom #navEditButton, #custom #navEditorClose { color: rgba(255, 255, 255, 0.85); } #custom #navEditButton:hover, #custom #navEditorClose:hover { color: rgba(255, 255, 255, 0.4); } /* Custom Buttons are: #navEditorCustomEdit, #navEditorCustomSave, #navEditorCustomCancel */ #custom .navEditor .fa { color: rgb(34, 34, 34); } #custom .navEditor .fa:hover { color: rgba(34, 34, 34, 0.4); } /* Here, we disable/grey-out any buttons that have no functionality on a specific panel. */ /* We also need to hide the tooltip, and make sure that clicking on the link even */ /* though it is greyed out, doesn't do anything - pointer-events: none; will help */ /* but may not be supported by every browser (it is CSS 3+/4) */ #custom .navEditorPanel1 #navEditorCustomSave, #custom .navEditorPanel1 #navEditorCustomCancel, #custom .navEditorPanel2 #navEditorCustomEdit, #custom .navEditorPanel3 #navEditorCustomSave, #custom .navEditorPanel3 #navEditorCustomCancel, #custom .navEditorPanel1 #navEditorCustomSave:hover, #custom .navEditorPanel1 #navEditorCustomCancel:hover, #custom .navEditorPanel2 #navEditorCustomEdit:hover, #custom .navEditorPanel3 #navEditorCustomSave:hover, #custom .navEditorPanel3 #navEditorCustomCancel:hover { cursor: default; color: rgba(34, 34, 34, 0.25); } /* ***************************** Scrolling Area ******************************* */ #custom #navEditor #navEditorContent { border-color: rgba(34, 34, 34, 0.1); } #custom #dragAndDropWithScrollTop span, #custom #dragAndDropWithScrollBottom span { color: rgba(34, 34, 34, .45); background-color: rgba(34, 34, 34, .08); } /* ************************* All Panels' Nav Tree ***************************** */ /* Panel 1's tree structure is: ul.root ul ul ul ~ */ /* Panel 2's tree structure is: ul.root ul ul ul ~ table */ /* Panel 3 is Panel 1 with one extra element that we never want to see. */ /* Root-Level Highlighting */ #custom #navEditor .ms-core-listMenu-selected:link, #custom #navEditor .ms-core-listMenu-selected:visited, #custom #navEditor .ms-core-listMenu-selected { background-color: rgba(34, 34, 34, .08); } /* Branch-Level Highlighting */ #custom #navEditor li > a.ms-core-listMenu-item:hover, #custom #navEditor li > a.ms-core-listMenu-item:active { background-color: rgba(34, 34, 34, 0.05); } #custom #navEditor .ms-core-listMenuEdit:hover { background-color: rgba(34, 34, 34, 0.05); } /* For Panel2, the whole parent container (a table) needs to be highlighted */ /* Miscellaneous Formatting */ #custom #navEditor .ms-navedit-deletelink, #custom #navEditor .ms-navedit-deletelink:hover { color: rgba(34, 34, 34, 0.7); } /* The Show/Hide buttons in Panel 2 */ #custom #navEditor.navEditorPanel2 .ms-navedit-hiddenLink .menu-item-text { color: rgba(34, 34, 34, .25); } /* 'Disabled' Link styling */ /* Nav Root (Level 0) */ #custom #navEditor #navEditorRoot span.menu-item-text { color: rgb(34, 34, 34); border-color: rgba(34, 34, 34, 0.4); } /* Nav Level 1 (normally top-level sub-site) */ #custom #navEditor ul.root ul .menu-item-text, #custom #navEditor ul.root table .menu-item-text { color: rgba(34, 34, 34, .8); } /* Nav Level 2 */ #custom #navEditor ul.root ul ul .menu-item-text, #custom #navEditor ul.root ul table .menu-item-text { color: rgba(34, 34, 34, .72); } /* Nav Level 3 */ #custom #navEditor ul.root ul ul ul .menu-item-text, #custom #navEditor ul.root ul ul table .menu-item-text { color: rgba(34, 34, 34, .64); } /* Nav Level 4 */ #custom #navEditor ul.root ul ul ul ul .menu-item-text, #custom #navEditor ul.root ul ul ul table .menu-item-text { color: rgba(34, 34, 34, .56); } /* Nav Level 5 */ #custom #navEditor ul.root ul ul ul ul ul .menu-item-text, #custom #navEditor ul.root ul ul ul ul table .menu-item-text { color: rgba(34, 34, 34, .48); } /* ==================================================================================== */ /* ---------- Miscellaneous Page Elements /* ==================================================================================== */ /* Help Panels */ #custom .helpPanel { border-color: rgb(255, 255, 255); background-color: rgb(34, 34, 34); color: rgba(255, 255, 255, 0.85); } #custom .helpPanel .helpHeader { background-color: rgba(34, 34, 34, 0.08); color: rgba(255, 255, 255, 0.85); } #custom .helpPanel .helpResizer, #custom .helpPanel .fa-times-circle { color: rgba(255, 255, 255, 0.85); } /* Link Picker Panel */ #custom #linkPicker ul ul {margin-left: 20px;} #custom #linkPicker a { background-color: rgb(34,34,34) !important; padding: 0px !important;} #custom #linkPicker a span { color: rgb(255, 255, 255) !important; } #custom #linkPicker .ms-navedit-editArea {display: none;} #custom #linkPicker .branch>a span { color: rgb(255, 0, 0) !important; } /* ==================================================================================== */ /* ---------- OmniPage Edit Mode Interface /* ==================================================================================== */ /* Validation Messages and Pop-Ups */ body.editMode #custom .ms-formvalidation { background-color: rgb(244, 216, 217); color: rgb(162, 82, 58); border-color: rgb(232, 192, 188); } body.editMode #custom .ms-formvalidation span { color: rgb(162, 82, 58); } body.editMode #custom .mediaAlert .mediaAlertRS { background-color: rgb(255, 241, 157); color: rgb(195, 144, 45); border-color: rgb(245, 216, 125); } body.editMode #custom .mediaAlert .mediaAlertRS span { color: rgb(195, 144, 45); } body.editMode #custom .mediaAlert .mediaAlertOS { background-color: rgb(244, 216, 217); color: rgb(162, 82, 58); border-color: rgb(232, 192, 188); } body.editMode #custom .mediaAlert .mediaAlertOS span { color: rgb(162, 82, 58); } /********************************** OmniPage Interface and Form Elements ************************************/ /* This defines the look and feel of the various form / input elements in Edit Mode */ /* All Input / Form Fields' Shared Styling. The final value, div.ms-rtestate-write[role="textbox"], is */ /* SharePoint's faux textarea built on top of a div element instead of unsing a form field. */ body.editMode #custom input[type="password"], body.editMode #custom input[type="text"], body.editMode #custom input[type="file"], body.editMode #custom select, body.editMode #custom textarea, body.editMode #custom .sp-peoplepicker-topLevel, body.editMode #custom .sp-peoplepicker-topLevelDisabled, body.editMode #custom .sp-peoplepicker-autoFillContainer, body.editMode #custom .ms-inputBox, body.editMode #custom div.ms-rtestate-write[role="textbox"] { background-color: rgb(255, 255, 255); border-color: rgba(34, 34, 34, .25); box-shadow: 1px 1px 3px rgba(34, 34, 34, 0.12); } body.editMode #custom #o1 div.ms-rtestate-write[role="textbox"] { box-shadow: none; border: 0 none; } /* Text Field and Text Area Placeholder Text (Do Not Combine Rules) */ body.editMode #custom #pageContent input:-webkit-input-placeholder, body.editMode #custom #pageContent textarea:-webkit-input-placeholder { color: rgba(34, 34, 34, .25); } body.editMode #custom #pageContent input:-moz-placeholder, body.editMode #custom #pageContent textarea:-moz-placeholder { color: rgba(34, 34, 34, .25); } body.editMode #custom #pageContent input:-ms-input-placeholder, body.editMode #custom #pageContent textarea:-ms-input-placeholder { color: rgba(34, 34, 34, .25); } /* The "▼" button that opens new Body Sections in OmniPage Edit Mode */ #custom #expander { background-color: rgb(34, 34, 34); color: rgb(255, 255, 255); } /******************************************** The Control Box ***********************************************/ /* The Control Box is the set of Page-Level Tools: */ /* Open Image Library, Open Document Library, Enable Web Part Zones, Toggle LeftNav on/off, Choose Layout */ /* ******************************************* Layout Options ********************************************* */ /* When the Layout Selector button (#pL-choiceLayoutButton) is pressed, a sub-menu (#layoutChoices) expands */ /* and becomes visible (a transition effect). From there, five layouts (RRRR, RCCR, etc.) can be selected. */ /* Control Box Basic Layout, Spacing, and Sizing */ body.editMode #custom #controlBox { background-color: rgb(34, 34, 34); } body.editMode #custom #controlBox div { color: rgba(255, 255, 255, 0.65); } body.editMode #custom #controlBox div:hover { color: rgb(255, 255, 255); } body.editMode #custom #controlBox a { color: rgb(255, 255, 255); } /* Page Layout Selection Tool Glyph */ body.editMode #custom #o1 #layoutChoices { background-color: rgb(34, 34, 34); } /* Page Layout Selection Tool Sub-Menu Glyphs, Built Entirely Using CSS */ body.editMode #custom #o1 #layoutRRRR, body.editMode #custom #o1 #layoutCCRR, body.editMode #custom #o1 #layoutRCCR, body.editMode #custom #o1 #layoutRRCC, body.editMode #custom #o1 #layoutCCCC { background-color: rgb(34, 34, 34); border-top: 12px solid rgba(255, 255, 255, 0.45); border-bottom: 12px solid rgba(255, 255, 255, 0.45); } body.editMode #custom #o1 #layoutRRRR:hover, body.editMode #custom #o1 #layoutCCRR:hover, body.editMode #custom #o1 #layoutRCCR:hover, body.editMode #custom #o1 #layoutRRCC:hover, body.editMode #custom #o1 #layoutCCCC:hover { border-color: rgba(255, 255, 255, 0.7); } body.editMode #custom #o1 #layoutRRRR:before, body.editMode #custom #o1 #layoutCCRR:before, body.editMode #custom #o1 #layoutRCCR:before, body.editMode #custom #o1 #layoutRRCC:before, body.editMode #custom #o1 #layoutCCCC:before { background-color: rgb(34, 34, 34); } body.editMode #custom #o1 #layoutRRRR:after, body.editMode #custom #o1 #layoutCCRR:after, body.editMode #custom #o1 #layoutRCCR:after, body.editMode #custom #o1 #layoutRRCC:after, body.editMode #custom #o1 #layoutCCCC:after { background-color: rgb(34, 34, 34); } body.editMode #custom #o1 #layoutRCCR { border-left: 9px solid rgba(255, 255, 255, 0.45); border-right: 9px solid rgba(255, 255, 255, 0.45); border-top-width: 5px; border-bottom-width: 5px; } /* When a Control Box option is toggled (LeftNav, Show Web Parts, Custom Layout), */ /* a corresponding class is added to . If such a class exists, its */ /* corresponding Glyph is highlighted, a visual cue showing if it is on or off. */ /* Web Parts Enabled Glyph */ body.editMode.showWebParts #custom #o1 #showWebPartButton { color: rgba(255, 255, 255, 0.85); } /* LeftNav Hidden */ body.editMode.hideLeftNav #custom #o1 #pL-boolHideLeftNavButton { color: rgba(255, 255, 255, 0.85); } /* Custom Page Layout Selected (includes the Selection Tool and Sub-Menu choice). */ body.editMode.CCRR #custom #o1 #pL-choiceLayoutButton, body.editMode.RCCR #custom #o1 #pL-choiceLayoutButton, body.editMode.RRCC #custom #o1 #pL-choiceLayoutButton, body.editMode.CCCC #custom #o1 #pL-choiceLayoutButton { color: rgba(255, 255, 255, 0.85); } body.editMode.RRRR #custom #o1 #layoutRRRR, body.editMode.CCRR #custom #o1 #layoutCCRR, body.editMode.RCCR #custom #o1 #layoutRCCR, body.editMode.RRCC #custom #o1 #layoutRRCC, body.editMode.CCCC #custom #o1 #layoutCCCC { border-color: rgba(255, 255, 255, 0.85); } /******************************************** The Media Panel ***********************************************/ /* The Media Panel allows a single image or video per OmniPage body section. It's interface, */ /* .media {1-4} Controls, are context-sensitive and show different tools (glyphs) for each supported media */ /* type (currently Images and Video). */ /* Image Layout, Spacing, and Sizing */ body.editMode #custom .opMediaImg .ms-rtestate-field div div, body.editMode #custom .opMediaVid { background-color: rgba(34, 34, 34, .08); } /* Image/Video Caption Layout, Spacing, and Sizing */ body.editMode #custom .opMediaCap .ms-rtestate-field div, body.editMode #custom .opMediaCap .ms-rtestate-field span, body.editMode #custom .opMediaCap .ms-rtestate-field p, body.editMode #custom .opMediaCap .ms-rtestate-field a, body.editMode #custom .opMediaCap .ms-rtestate-field em, body.editMode #custom .opMediaCap .ms-rtestate-field i, body.editMode #custom .opMediaCap .ms-rtestate-field strong, body.editMode #custom .opMediaCap .ms-rtestate-field b { color: rgba(34, 34, 34, .4); } body.editMode #custom .opMediaCap .ms-formfieldvaluecontainer { border-color: rgba(34, 34, 34, .1); } /* The Media Control Bar. Contains buttons/glyphs for image/video addition and removal, sizing, */ /* help popup, and a 'restore to page default' button to fix issues with the editor */ body.editMode #custom .mediaControls { background-color: rgb(34, 34, 34); } body.editMode #custom .mediaControls div { color: rgba(255, 255, 255, 0.65); } body.editMode #custom .mediaControls div:hover { color: rgba(255, 255, 255, 1); } body.editMode #custom .mediaControls .mediaControlResChoices { margin: 26px 0 0 -4px; padding: 3px 4px 3px 5px; position: absolute; background-color: rgb(34, 34, 34); display: none; width: 110px; z-index: 2; } body.editMode #custom .mediaControls .mediaControlResChoices .mediaControlResChoice { float: none; } body.editMode #custom .mediaControls .mediaControlResChoices .mediaControlResChoice.resWarn { color: #FF0000; } .opBody.hasVid .mediaControlResChoice-o, .opBody.hasVid .mediaControlResChoice-fp1, .opBody.hasVid .mediaControlResChoice-fp2, .opBody.col .mediaControlResChoice-50, .opBody.col .mediaControlResChoice-66 { display: none; } /******************************************* Meta-Data Section **********************************************/ /* At the bottom of OmniPage in Edit Mode there are a number of non-content (auxiliary) fields. */ body.editMode #custom #metaDataPanel { background-color: rgba(34, 34, 34, .08); } body.editMode #custom #metaDataPanel input, body.editMode #custom #metaDataPanel textarea, body.editMode #custom #metaDataPanel select { background-color: rgb(255, 255, 255); } body.editMode #custom .metaDataPanelSubText { color: rgba(34, 34, 34, .4); } body.editMode #custom .metaDataPanelSubTitle { color: rgba(34, 34, 34, .55); border-color: rgba(34, 34, 34, .08); color: rgba(34, 34, 34, .3); } /********************************************* Web Part Zones ***********************************************/ /* Each body section has, at its bottom, an optional Web Part Zone. Web Part Zones can have more than one */ /* web part in them. These zones are turned off and on by a button/glyph in the Control Box. */ body.editMode #custom .webPartWrapper { border-color: rgba(34, 34, 34, .1); } body.editMode #custom .webPartWrapper .ms-WPAddButton { background-color: rgba(34, 34, 34, .08); } body.editMode #custom .webPartCaption .ms-formfieldvaluecontainer { border-color: rgba(34, 34, 34, .1); } /* ==================================================================================== */ /* ---------- Story Page Edit Mode Interface /* ==================================================================================== */ body.editMode #custom #storyMetaDataPanel { background-color: rgba(34, 34, 34, .08); } body.editMode #custom #storyMetaDataPanel .fa { background-color: rgb(34, 34, 34); color: rgb(255, 255, 255); } body.editMode #custom #storyMetaDataPanel #synopsis textarea { color: rgba(34, 34, 34, 0.55); } body.editMode #custom #storyMetaDataPanel #blurb div.ms-rtestate-write[role="textbox"] { color: rgba(34, 34, 34, 0.75); box-shadow: 1px 1px 3px rgba(34, 34, 34, 0.12); }