/* As in the license, Zymonic is provided without warranty or support unless purchased separately, however... If you email zymonic-support@zednax.com your issue will be noted and may receive a response. For security issues, please contact zymonic-security@zednax.com and someone will respond within 8 working hours. =head1 AUTHOR Alex Masidlover et al. CPAN ID: MODAUTHOR Zednax Limited alex.masidlover@zednax.com http://www.zednax.com =head1 COPYRIGHT This program is free software licensed under the... Zymonic Public License 1.0 The full text of the license can be found in the LICENSE file included with this module. Other licenses may be acceptable if including parts of Zymonic in larger projects, please contact Zednax for details */ /* Colour Palette - as at 30/11/22 this is a first attempt at rationalisation the huge number of colours (mainly different greys). The aim is for each colour to have a meaning in the UI rather than a use, i.e., decoration-border NOT menu-border so that all the 'things' with the same 'purpose' in the UI change colour together. When changing colours please consult ARM before adding any to this list or before using something in the wrong context. What we will be aiming to do is where a colour needs changing or adding, look at the existing list and see what colours have the same or similar _use_ and see if we can rename them to be more generic so that the name covers the old and new use. Once we get down to a sensible number of colours we will add a theme management system to Zymonic by adding a table in the DB with a field for each colour use and then output a new :root { [colour list] } in the of the html after the default CSS. */ :root { /* Palette */ /* UI Elements */ --desktop-background: #E4E4E4; --shadow: #777; --decoration-foreground: #e1e1e1; --decoration-foreground-disabled: #a1d1e8; --decoration-background: #367fa9; --decoration-background-fade: #327399; --decoration-inactive-background: #a9a9a9; --decoration-border: #2b82ac; --decoration-foreground-text: #01658a; --decoration-shadow: rgba(0, 0, 0, 0.2); --decoration-background-active: #006892; --decoration-background-active-fade: #006f9c; --decoration-dark: rgba(102, 102, 102, 0.1); --block-background: #F6F6F6; --overlay: #000; --focus-shadow: rgba(81, 203, 238, 1); /* Form colours */ --form-background: #ffffff; --form-border: #333333; --form-text: #222222; --form-inactive-border:#d3d3d3; --form-inactive-background: #f1f1f1; --form-inactive-text: #555555; --form-active-border: #aaaaaa; --recorded-added: #367fa954; --record-border: #999; /* Notification colours */ --error-background: #FFDDDD; --error-border: #FF7400; --error-text: #ff0000; --error-highlight: #ff0000; --warning-highlight: yellow; --has-changed: #fff300; --negative-change: red; --positive-change: green; --disabled-text: grey; /* Information colours - check these are not being used for any data */ --information-background: #ffffff; --information-text: #000000; --information-border: #FF7400; --information-alternate-background: #cccccc; --information-alternate-border: #a1a1a1; --information-alternate-text: #666666; --information-alternate-background-hover: #aaa; /* ?? */ /* data colours */ --deleted-data: #666; --data-background: #ffffff; --data-label-background: #e2e2e2; --data-label-border: #99999996; --data-checked: #367fa9; --data-border: #000000; --result-table-background: #ffffff; --result-row-alternate-background: #f3f7fa; --result-row-border: #999999; --result-row-narrow-border: blue; --result-level-one: #eee; --result-level-two: #ddd; --result-level-threee: #ccc; --result-level-four: #bbb; --result-level-five: #aaa; /* Action (links/buttons) */ --action: #333333; --action-hover: #ccc; --darkbackground-action: #fff; /* Font sizes */ --default-text-size: 13px; --form-data-text-size: 13px; --form-info-text-size: 13px; --decoration-text-size: 13px; --table-data-text-size: 12px; --small-label-text-size: 9px; --icon-text-size: 20px; } /* Increase font-size on high-res devices, particularly iOS as it auto-scales the whole page if the input text size is less than 16px. */ @media screen and (-webkit-min-device-pixel-ratio:2), screen and (min-resolution: 200dpi) { :root { --default-text-size: 16px; --form-data-text-size: 16px; --form-info-text-size: 14px; --decoration-text-size: 16px; --table-data-text-size: 14px; --small-label-text-size: 12px; --icon-text-size: 20px; } } /* General Presentation and Layout */ html { overflow-y: scroll; } body { background-color: var(--desktop-background); /*MCL Preference */ background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; font-size: var(--default-text-size); margin: 0px; margin-left: 0.5em; margin-right: 0.5em; border: hidden; font-family: "Noto Sans","Noto Sans Symbols","Noto Sans Symbols 2", arial; } /* Single Block Mode */ .SingleBlock { margin-right: -50%; left: 50%; transform: translate(-50%, 0); max-width: 1000px; width: 100%; position: absolute; } #ZymonicInlineAuth { padding-bottom: 1em; } table { font-size: var(--table-data-text-size); } th { font-variant: small-caps; font-weight: normal; } .filtertable tbody { font-size: var(--table-data-text-size); } .shadow { -moz-box-shadow: 3px 3px 4px var(--shadow); -webkit-box-shadow: 3px 3px 4px var(--shadow); box-shadow: 3px 3px 4px var(--shadow); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='var(--shadow)')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='var(--shadow)'); } * { scrollbar-width: thin; scrollbar-color: var(--decoration-background) var(--decoration-foreground);} *::-webkit-scrollbar { width: 14px;} *::-webkit-scrollbar-track { background: var(--decoration-foreground);} *::-webkit-scrollbar-thumb { background-color: var(--decoration-background); border-radius: 30px; border: 3px solid var(--decoration-background); } a { color: var(--action); cursor: pointer; } a:link { color: var(--action); text-decoration: none; cursor: pointer; } a:visited { color: var(--action); text-decoration: none; cursor: pointer; } a:hover { color: var(--decoration-foreground-text); text-decoration: none; cursor: pointer; } a:active { color: var(--action); text-decoration: none; cursor: pointer; } img { border: 0; } .ifEmpty { display: inline; position: relative; left: 0 !important; z-index: 0; } .ifEmpty label { display: none; width: 10em; text-transform: none; font-size: var(--form-info-text-size); top: 0; } .ifEmpty:hover label { display: inline; left: 20px !important; position: absolute; top: 5px; } .ifEmpty input { display: inline; cursor: pointer; height: 17px; width: 15px; border:1px solid red; } .ifEmpty>input[type="checkbox"] { -webkit-appearance: none; border: 1px solid var(--data-border) !important; width: 17px !important; min-width: 17px !important; height:17px !important; padding:0px !important; } .ifEmpty>input[type="checkbox"]:checked::after { content: "\2713"; white-space: pre; font-size: var(--form-data-text-size); font-weight: bold; background: var(--data-background); color:var(--action); width: 100%; height: 100%; display: inline-block; text-align: center; } label { color: var(--action); display: inline-block; margin: 0px .5em; width: auto; } .FieldContainsError input { background-color: var(--error-background); border-color: var(--error-border) !important } .inputError { left: 0; z-index: 4; text-align: left; } .notice.inputError { margin: 0.1em; position: absolute; } .inputError span { margin-right: 5px; } .ZymonicFile .inputError { text-align: left; top: 3em; } .ZymonicSubForm>fieldset>.inputError { position: initial; } .HorizontalFormTableCell .inputError { position: inherit; z-index: 15; } /* errors on first row will go into the tables headers and be formatted differently, handle that here */ .HorizontalFormTableHeader .inputError { font-weight: normal; top: 0.2em; } /* hide all messages except the first, and show them all on hover */ .HorizontalFormTableCell .inputError span { display: none; } .HorizontalFormTableCell .inputError span:first-child, .HorizontalFormTableCell .inputError:hover span { display: block; } /* add a "..." to indicate there are more messages which will show on hover, but hide it if there is only 1, in CSS last-child is applied after first child, so we show the first, but remove it if first is also last */ .HorizontalFormTableCell .inputError span:first-child::after { content: " (show more)"; } .HorizontalFormTableCell .inputError span:last-child::after { content: ""; } .HorizontalFormTable label { margin: 0; /* Do not set 0 height on this without checking what happens if you grow and shrinking the pick list horizontal form */ } .HorizontalFormTableCell div.ZymonicField { padding: 0 5px 0px 5px; text-align: left; } .HorizontalFormTable .ZymonicChoice { margin-top: 30px; } .HorizontalFormTableCell .HTMLFieldInputWrapper { margin-top: 3px; } .HorizontalFormTable .ZymonicField { width: auto; min-width: auto; margin: 0; } .HorizontalFormTable .ZymonicField input { width: inherit; text-align: left; max-width: 140px; } .HorizontalFormTable .ChoiceCheckbox input { width: 26px; } .HorizontalFormTable .ChoiceButtons input { width: 20px; } .HorizontalFormTable .ChoiceButtons { min-width: 65px; } .HorizontalFormTable .ChoiceCheckbox { text-align: center; } li.FieldGroupContainsError.ui-state-active, li.FieldGroupContainsError.ui-state-default, li.FieldGroupContainsError { background: none repeat scroll 0 0 var(--error-background); } .FieldGroupHeader .notice { display: none; position: absolute; bottom: 2em; z-index: 1; } .FieldGroupHeader:hover .notice { display: block; } .FieldGroupNotLoaded::after { content: " (...)"; padding-right: 0.5em; } .FieldGroupNotLoaded { opacity: 0.5; } .FieldLabelDiv { position: relative; display: inline-block; /*! padding-bottom: 6px; */ vertical-align: top; } .ZymonicFile input { max-width: 19em; } /* Do not hide the File Options Label it is needed for the 'upload' variant where it shows the filename */ .ZymonicFileOptionsLabel { display: inline-block; padding: 6px 7px; } .ZymonicFileOptions { display: inline-block; padding-top: 10px; } .ZymonicFileOptions label { width: 27em; } .ZymonicFileOptions label span { width: 6em; display: inline-block; } /* Check this in atropos ticket attachments after any changes */ .ZymonicFileOptions { vertical-align: top; display: inline-block; } input[type=file]::file-selector-button { border-color: var(--decoration-background); background-color: var(--decoration-background); cursor: pointer; color: var(--form-background); width: var(--decoration-foreground); } .FileFieldPreview { text-align: center; } .FileFieldPreview img { float: left; margin: 0; } .HorizontalFormTableCell .ZymonicFileOptionsLabel { position: initial !important; } .HorizontalFormTableCell .ZymonicFileOptions label { display: inline-block; height: auto; } .FieldShortDescription, .RequiredFieldHelp { padding: 0.5em; margin-top: 0.5em; border-color: var(--information-border); border-style: solid; border-width: 1px; background-color: var(--information-background); color: black; display: none; /* Things are visually better without this, but LF results move when the LF search field loses focus thus making it impossible to select the result first time */ position: absolute; z-index: 8; text-align: left; min-height: 15px; font-variant: initial; max-width: 80%; } .RequiredFieldMarker:hover .RequiredFieldHelp { display: block; font-size: var(--form-info-text-size); } .FieldLabelSpan:hover .FieldShortDescription { display: block; } /* Enable focus help based on class */ .focusHelpEnabled .hasFocus.ZymonicField .FieldShortDescription { display:block; padding: 0.5em; bottom: 0.5em; width: 17em; } /* Always display help for devices that can't hover */ @media (hover: none) { .hasFocus.ZymonicField .FieldShortDescription { display:block; padding: 0.5em; bottom: 0.5em; width: 17em; } } .FormShortDescription { padding: 0.5em; margin-top: 0.5em; border-color: var(--information-border); border-style: solid; border-width: 1px; background-color: var(--information-background); color: var(--information-text); } /* .SystemNotice { position:relative; margin: 2.5em; top:20px; width: 15em; color: red; }*/ #Notices { color: var(--information-background); } #Notices .MenuList { width: auto; background-color: var(--decoration-foreground); padding-right: 0.8em; color: var(--information-border); } #menubar a[href="#"] { background-position: 8px center; border-radius: 5px; color: var(--decoration-foreground); width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; } #menubar li#Notices ul li { background: none; } .notice { padding: 0.5em; margin: 25px 0.5em; border-color: var(--information-border); border-style: solid; border-width: 1px; background-color: var(--information-background); color: var(--information-text); min-height: 15px; } /* Page Layout */ #Content { position: relative; } #TheLocations { width: 100%; } #Location_Right { display: inline-block; vertical-align: top; width: 78%; float: right; } #Location_Left { display: inline-block; vertical-align: top; width: 22%; float: left; } #Location_Left .ZymonicField { width: 93%; min-width: 340px; } #Location_Left .FieldLabelDiv label { width: 90px; } #Location_Left .FilterSearchForm { max-width: 88%; } #Location_Left .reportresults { overflow-x: hidden; } #Location_Main { display: inline-block; vertical-align: top; width: 100%; } #statusbar { background-color: var(--decoration-background); background-image: url("zymonic-menu.png"); background-position: 8px center; background-repeat: no-repeat; border-radius: 5px; color: var(--decoration-foreground); height: 3.5em; /*! margin-top: 2px; */ width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; font-variant: small-caps; } #statusbar .Pages { margin-left: 20px; } /* Menu bar */ #menulist { background-color: var(--decoration-foreground); } #menubar, ul.MenuList { padding: 0; margin: 0; list-style: none; z-index: 9999; background-color: var(--decoration-background); padding-top: 5px; border-radius: 5px; } #menubar a { display: block; width: 100%; } #menubar>li { float: left; padding-left: 10px; padding-bottom: 2px; text-shadow: 0.5px 0.5px 0.5px var(--shadow); margin-top: 10px; } ul.MenuList { position: absolute; width: 12em; top: 19px; border-radius: 5px; border-style: solid; border-top-style: none; border-width: 1px; left: -999em; background-color: var(--decoration-foreground); } ul.MenuList li { padding-top: 10px; padding-bottom: 3px; padding-left: 10px; border-style: none; border-top-style: solid; border-width: 1px; text-shadow: none; min-height: 20px; background-image: url(zymonic_go.png); background-position: 98% 50%; background-repeat: no-repeat; border-color: var(--decoration-foreground-text); word-break: break-all; } #menubar li:hover ul.MenuList, #menubar li.sfhover ul.MenuList { left: auto; } div.BlockAction:hover ul.MenuList { left: initial; margin-left: -18em; } /* disable hover showing for specific class, make it show or not based on class */ .MenuListPopup:hover ul.MenuList { left: initial !important; } .MenuListPopup.MenuListPopupHidden ul.MenuList { left: -999em !important; } .MenuListPopup.MenuListPopupHidden ul.MenuList { left: -999em; } .MenuListPopup ul.MenuList { left: initial; margin-left: -18em; } .PageMenuItemLabel { display: block; font-weight: bold; color: var(--decoration-foreground-text); } .PageMenuItemValue { color: var(--decoration-foreground-text); } #menubar li.AuthState { float: right; width: 10em; } #menubar li.DeveloperOptions { float: right; width: initial; } li.DeveloperOptions ul li { background: none; } #menubar li.PageMenuItem.ZymonicDebugInfo { float: right; width: initial; position: inherit; margin-top: 17px; } li.PageMenuItem.ZymonicDebugInfo img { margin-top: -3px; } /* disable hover showing for specific class, make it show or not based on class */ .BlockAction.MenuListPopup ul.MenuList { width: 25em; left: initial; margin-left: -23em; } .BlockAction.MenuListPopup.MenuListPopupHidden ul.MenuList { left: -999em; } .BlockAction.MenuListPopup:hover ul.MenuList { margin-left: -23em; } .ZymonicDebugInfo ul.MenuList li { background: none; padding: 7px; } .ZymonicDebugInfo ul.MenuList li a { text-decoration: none; pointer-events: none; cursor: default; } .ZymonicDebugInfo img { width: 16px; } /* Blocks */ .Block { border-radius: 5px; position: relative; margin: 0.2em; background: var(--block-background); } .BlockError { background: var(--error-background); margin: 1em; border: 1px solid var(--shadow); padding: 2px; } .BlockObject { position: static; margin: 0.2em; } .BlockLoadButton { margin: 0.5em 0.5em 1em; } .BlockControls { /* position: static; margin-top: -1.9em; and below added */ border-radius: 5px; background: var(--decoration-background); position: relative; padding-top: 0.4em; height: 2.5em; /*MCL Preference */ padding-right: 7em; } .BlockControls > .NewBlockContent { color: var(--has-changed); } .DragAction { position: absolute; z-index: 1; filter: alpha(opacity=100); opacity: 1; width: 100%; padding-top: 0.4em; margin-top: -0.4em; height: 2.1em; z-index: 1; } .BlockAction { /*float: left; changed and added display inline */ float: inherit; display: inline; margin: 0.5em; background-color: var(--decoration-background); padding-left: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; width: 17px; height: 17px; z-index: 1; position: relative; } .BlockAction a { text-decoration: none; color: var(--decoration-foreground); text-transform: none; cursor: pointer; } .BlocckAction a:link { text-transform: none; color: var(--action); text-decoration: none; cursor: pointer; } .BlockAction a:visited { text-decoration: none; color: var(--action); text-transform: none; cursor: pointer; } .BlockAction a:hover { text-transform: none; text-decoration: none; color: var(--decoration-foreground-text); cursor: pointer; } .BlockAction a:active { text-transform: none; color: var(--action); text-decoration: none; cursor: pointer; } .UpAction { background-image: url(up.gif); background-repeat: no-repeat; } .DownAction { background-image: url(down.gif); background-repeat: no-repeat; } .BlockTitleField { color: var(--decoration-foreground); } .BlockTitle { color: var(--decoration-foreground); /*MCL Preference */ margin-left: 50px; position: absolute; top: 0.2em; left: 5em; /*text-shadow: 0.5px 0.5px 0.5px #999999; MCL Preference */ font-variant: small-caps; overflow: hidden; width: calc(85% - 18.5em); text-overflow: ellipsis; height: 17px; white-space: nowrap; } /* refresh and reset are never seen together, one is on process the other on filter so position them in the same place */ .BlockRefreshAction, .BlockAction.resetfilterbutton { margin: 0; position: absolute; right: 4.5em; background: transparent !important; top: 0px; } .ZymonicTransitionBlockMenuItem { margin: 0; padding: 0.25em 0.75em; float: right; } .HelpAction { color: var(--information-text); background: transparent; margin: 0; padding: 0.25em; position: absolute; right: 2em; top: 0.15em; } .ZymonicDebugInfo { color: var(--information-text); background: transparent; margin: 0; padding: 0.25em; position: absolute; right: 0.5em; top: 0.15em; } .Separator { clear: both; height: 1px; } .FieldSeparator { clear: both; } /* Fields/Filter Actions */ .FilterAction { margin-right: 1.5em; } .FilterActionsGlobal { margin-top: 5px; display: inline-flex; } .FilterActionsGlobal .FilterAction { display: inline-block; /*! vertical-align: middle; */ } .FilterButtonArea .resultsperpage { vertical-align: top; font-variant: small-caps; margin-top: 1px; } .FilterButtonArea { border-radius: 5px; border: 1px solid var(--shadow); margin-top: 0px; display: inline-flex; position: absolute; top: 10px; z-index: 1005; background-color: var(--information-background); width: auto; /*MCL Preference */ font-size: var(--small-label-text-size); padding: 20px 10px; min-width: 550px; visibility: hidden; opacity: 0; transition: all 0.5s; transition-delay: 0.5s; } .FilterButtonWrapper { /*! float: right; */ position: absolute; left: 35px; top: 8px; cursor: pointer; z-index: 2; } .FilterButtonWrapper:hover .FilterButtonArea { visibility: visible; opacity: 1; transition: all 0s; } .ZymonicSubFilter .FilterButtonWrapper { float: none; position: relative; cursor: pointer; background: var(--information-alternate-background); border: 1px solid var(--information-alternate-border); border-radius: 5px; display: inline-block; } .ZymonicSubFilter .FilterButtonArea { position: absolute; } .ZymonicSubFilter .FilterButtonIcon { display: inline-block; margin: 5px; } .ZymonicSubFilter .resultcount { position: initial; padding: 6px 6px 5px; color: var(--information-alternate-text); margin-top: -1px; display: inline-block; } .ZymonicSubFilter .FilterButtonWrapper .FilterGroupResultCountContainer { display: inline-block; } .ZymonicSubFilter { width: 100%; } .ZymonicSubFilter .reportresults { /* margin-top: 25px; */ } .ZymonicDisabled, .ZymonicDisabled span { color: var(--disabled-text); } /* .FilterActionGlobal .FilterActionLink { display: block; background-image:url(backgrnd.gif); border-color:#333333; border-style: solid; border-width: 1px 1px 1px 2px; padding: 2px 2px 2px 2px; margin-top: 2px; } */ .FilterActionGlobal .FilterActionLink:hover { /* style global link like button */ text-decoration: none; } .FilterActionLinkContent { text-transform: none; } .FilterActionLocal { display: inline; } .FilterActionIcon { border: none; padding: 2px; } .FilterActionIcon img { margin-top: 2px; margin-bottom: 2px; } .FilterActionButton { display: inline; } .FilterActionCell { width: 4em; } /* position the transition result just underneath the summary message */ .FilterActionTransitionResultSummary { display: block; min-width: 265px; } .FilterActionTransitionResult { color: #000000; position: absolute; z-index: 1; margin: 5px 0 0 -5px; } /* hide the success message, its a duplicate of the summary message */ .FilterActionTransitionResult .SuccessfulTransition>p { display: none; } .FilterActionErrorSummary { display: block; min-width: 265px; } a.FilterActionErrorSummary { color: var(--error-text); } .FilterActionError { color: var(--information-text); position: absolute; z-index: 1; margin: 5px 0 0 -5px; background: var(--information-background); border: 1px solid black; padding: 5px; max-width: 500px; } .FilterActionError ul { padding-left: 10px; margin: 3px 0 8px; } .FilterActionError li { list-style-type: none; } /* Field */ .ZymonicField { /*! margin: 5px 5px 0 0; */ display: inline-block; } .FoFaPQuery .ZymonicField { width: auto; } .FoFaPQuery .ZymonicFieldLabel { display: none; } div.ReadOnlyFieldValue { display: inline-block; vertical-align: top; margin: 0; background: transparent; min-width: 75px; margin-top: 5.5px; /* The following two lines ensure that Locked/Readonly fields don't expand outside of the block - particularly for pre/code */ overflow: hidden; overflow-wrap: anywhere; } .filterdata div.ReadOnlyFieldValue { max-height: 100px; overflow-y: auto; } /* this is setting a min on the filter results as well - QUERY will this work???*/ #SLocation_Right .filterdata .ReadOnlyFieldValue { /*! min-width: 0px; */ } #SLocation_Right .ReadOnlyFieldValue { /*! min-width: 165px; */ display: inline-block; } #SLocation_Right .filterdata .ReadOnlyFieldValue span {margin-top:5px;} .record_container .ReadOnlyFieldValue { margin-top: 5px; display: inline-block; font-size: var(--form-data-text-size); } .ZymonicFieldLabel { display: inline-flex; overflow: hidden; padding: 6px 7px; width: 17em; margin: 4px; background: var(--data-label-background); border: 1px solid var(--data-label-border) !important; font-size: var(--form-data-text-size); } .FieldPrefix { position: absolute; right: 1em; } .FieldContainer { display: contents; } /* The aim with input sizing is for there to be a limited number of 'sensible' sizes which scale with the surrounding block right down to a ~400px mobile screen. It is expected that small will be numeric inputs, medium will be for text that is likely to be modest in length (one or two words) and the unconstrained (that will fill all space) will be for fields likely to be used for descriptions. */ /* See also the LinkedFieldDisplayField versions of these as they need slightly different widths to accoutn for the padding that makes them look like inputs */ .ZymonicField textarea, .HTMLFieldDisplayDiv, .ZymonicField input { display: inline-block; /* vertical-align was aligning the top of the padded input with the top of the text - thus looking very wonky */ /* vertical-align: text-top; */ width: 75%; min-width: 19em input; box-sizing: border-box; } .ZymonicField.small .FieldContainer input { width: 10%; min-width: 5em; } .ZymonicField.medium .FieldContainer input, .ZymonicField .FieldContainer select, .ZymonicField select, .ZymonicField.ZymonicDateTime input, .TimeTime.TimeCapture input, .DateTime.DateCapture input { width: 19em; min-width: 19em; } /* iPhones auto-zoom if any field input is smaller than 16px */ input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea { font-size: var(--form-data-text-size); } /* .ZymonicField select { display: inline-block; width: 225px; margin-right: 25px; -moz-appearance: none; -webkit-appearance: none; background: url("../select.png") no-repeat right; background-color: rgba(0, 0, 0, 0); background-color: #FFF; padding-left: 5px; } */ .LinkedFieldFilter { position: absolute; z-index: 10; border: 1px solid; top: 10px; background: var(--block-background); width: 90%; left: 5%; padding:5px; box-shadow: 10px 10px 30px; } .LinkedFieldFilter .FilterButtonWrapper { background:var(--data-label-background); padding: 3px; border: 1px solid var(--data-label-border); } .LinkedFieldFilter .FilterGroupResultCountContainer { background: var(--data-label-background); padding: 2px 3px 2px 7px; color:var(--action);; border: 1px solid var(--data-label-border); /* margin-top:.5px; */ } .LinkedFieldOpenButton { max-width: none; margin-bottom: 3px; } .LinkedFieldLabels { display: inline-block; } .LinkedFieldCloseButton { display: inline-block; margin: 0 5px 5px; font-size: var(--icon-text-size); font-weight: bold; cursor: pointer; } .LinkedFieldFilter .filtertable tr:hover { background: var(--action-hover); cursor: pointer; } .reportresults.narrowmode table tr:nth-child(even).LFselectable:hover, .LFselectable:hover { background-color: var(--action-hover); cursor:pointer; } .LinkedFieldFilter .FilterActionCell { display: none; } .LinkedFieldDisplayField.ReadOnlyFieldValue span { margin-top:0; border: 1px dotted var(--data-border); padding: 5px 1.5em 6px 0.5em; width: 17em; min-height:15px; margin-left: 4px; } .ZymonicField.LinkedFieldDisplayField { } .LFSelectedValueActions { display: inline-block; margin: 5px; } .LFOpenButtonWrapper { display: inline-block; } .LFActionsLabel { margin-right: 5px; vertical-align: top; } .ZymonicHTML .LinkedFieldDisplayField.ReadOnlyFieldValue span { width: 75%; min-width: 19em; height: auto; min-height: 15px; } .ZymonicField.small .LinkedFieldDisplayField.ReadOnlyFieldValue span { width: 10%; min-width: 2em; } .LinkedFieldDisplayField .ifEmpty { display: none; } /* Level1 FieldGroup - most likely to be FG displayfields */ .FieldGroupLevel1 { border: none; } /* Multiple Choice Linked Fields */ .MultipleChoiceLinkedFieldResults table {width:auto; min-width: 60%; } .ZymonicMultipleChoiceLinkedField .FieldLabelDiv, .ZymonicMultipleChoiceLinkedField .LinkedFieldOpenButton { vertical-align: text-top; } .resultsperpage select { display: inline-block; width: 60px; -moz-appearance: none; -webkit-appearance: none; background: url("../select.png") no-repeat right; background-color: rgba(0, 0, 0, 0); background-color: var(--information-background); } .ZymonicFieldHidden { display: none !important; width: 0; } div.ReportField.ZymonicFieldHidden { display: none !important; width: 0; } .ReportField.ZymonicChoice { padding-top: 0; min-width: auto; margin: 0; } .ReportField.LFSelectable { display: inline-block; margin: 0 0px 0 0px; padding: 0; } .ReportField.LFSelectable:hover { display: inline-block; margin: 0 0px 0 0px; padding: 0; } .LFSelectable:hover { background: var(--result-row-alternate-background); cursor: pointer; } .ZymonicSubForm { width: 100%; } /* This doesn't affect horizontal forms because of the 'div' */ .ZymonicSubForm div.record { margin: 4px 2px 6px 0px; box-shadow: 2px 2px 3px var(--shadow); border: none; } .ZymonicFieldChanged .ifEmpty { left: 15px; } .records_per_page { width: auto; display: inline; } .MultipleRecordsRefreshNavigation { display: inline-block; } .helpicon { float: left; } .ChoiceButtons { display: inline-block; min-width: 175px; font-variant: small-caps; } .ChoiceButtons table { width:100%; } .ChoiceButtons tr { display:inline-block; width:30%; margin:0; padding:0; } .ChoiceButtons td { margin:0 0 10px 0; } .UserInputButtons td { height: 26px; } .UserInputButtons { display: inline-block; min-width: 175px; } .ZymonicMultipleChoice > .MultipleValueMatchAll { display: inline-block; position: relative; } .MultipleChoiceLinkedFieldClearAll, .MultipleValueMatchAll { display: inline-block; } .PasswordConfirmation { padding-top: 5px; } .DateTime { display: inline-block; } .DateTime.DateCapture label { display: none; } .DateTime.DateCapture label { margin-left: -5px; font-variant: small-caps; } .DateTime input { background-image:url("data:image/svg+xml;utf8,dd / mm / yyyy"); background-repeat: no-repeat; } .DateTime input:focus { background-image: none; } .TimeTime.TimeCapture label { margin-left: -5px; font-variant: small-caps; } .TimeTime.TimeCapture label { display: none; } .TimeTime input { background-image:url("data:image/svg+xml;utf8,hh:mm"); background-repeat: no-repeat; } .TimeTime input:focus { background-image: none; } .TimeTime.TimeCapture { display: inline-block; } .ZymonicField.ZymonicDateTime > select { width: 9.5em; min-width: 9.5em; } .notice.inputError.DateTime { position: relative; } /* This class can be used to add validation styling (not currently requried) .FieldIsValid { background-image: url(/zymonic-tick.png); background-repeat: no-repeat; background-position: 98% 40%; add padding to right so nothing can cover up the tick image padding: 0 20px 0 0; - Do not do this here! put it in the Zymonic Field div if you must, since it makes fields move as you fill a form out } */ /* Form Layout */ .FieldGroupSetMenu { float: left; width: 10%; } .FieldGroupSetMenu ul { list-style-image: none; list-style-position: outside; list-style-type: none; padding: 0; margin: 0; text-transform: uppercase; } .FieldGroupSetMenu ul li { border-top: 1px solid; } fieldset { border: none; margin: 0; padding: 0 0 0.5em 0; } fieldset legend { display: none; } .FieldGroupSetContainer { } .FieldGroupSetContainer fieldset legend { display: none; } .FieldGroupSetContainer textarea { margin-top:4px;min-height:30px } .FieldGroupSetMenuSelected { background-color: var(--form-background); } .FieldGroupSetSelected { float: left; width: 100%; background-color: var(--form-background); visibility: visible; overflow: auto; } .FieldGroupSetNotSelected { float: left; width: 0; visibility: hidden; overflow: hidden; } .multipleRecordForm { border-top: 1px solid; } .FormMessage { padding: 0.5em; margin: 0.5em; border-color: var(--information-border); border-style: solid; border-width: 1px; background-color: var(--form-background); color: var(--information-text); } .RequiredFieldGroupMarker { display: inline; } .TransitionButton { display: inline-block; margin: 3px 0px 3px 0px; } .FieldGroupSetShortDesc { clear: both; display: none; } .HorizontalFormTableCell { border: none; border-width: 1px; border-right-style: dashed; text-align: left; } .HorizontalFormTableUtilityCell { border: none; } .narrowmode table td.HorizontalFormTableUtilityCell { /* display: none !important; */ } .HorizontalFormTableHeader { text-align: center; } .HorizontalFormTableCell .int, .HorizontalFormTableCell .float, .HorizontalFormTableCell .double, .HorizontalFormTableCell .decimal { text-align: right; } .HorizontalFormTableCell div.ReadOnlyFieldValue {min-width: auto;} .ZymonicFormHorizontalHeadersRow { height: 45px; vertical-align: top;} .ZymonicFormTableFieldLabel { text-align: center; vertical-align: top; width: 100%; } .PrintFormLink { display: block; margin: 5px 5px 0; } /* Input Form controls */ select { border: 1px solid var(--data-border); padding: 0px 5px; height: 32px; margin: 5px 5px 0 5px; background-color: var(--data-background); display: inline-block; } select:focus { border-color: var(--field-focused-border); box-shadow: 0 0 5px var(--field-focused-shadow); outline: none; } select[multiple] { height: 70px; background: var(--data-background); } input:focus { box-shadow: 0 0 5px var(--focus-shadow) !important; border-color: var(--focus-shadow) !important ; outline: none !important ;; } input { border-color: var(--data-border); border-style: solid; border-width: 1px 1px 1px 1px; padding: 6px; margin-top: 4px; margin-left: 5px; vertical-align: text-top; height: 32px; /* Used for the focus colour change transition */ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; /* width: 165px; */ background: var(--data-background); } input[type="checkbox"]:focus { box-shadow: 4px 4px 2px var(--shadow); } input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 1px solid var(--data-border); width: 17px; min-width: 17px; height:17px; padding:0px; } input[type="checkbox"]:checked::after { content: "\2713"; white-space: pre; font-weight: bold; background: var(--data-background); color:var(--action); width: 100%; height: 100%; display: inline-block; text-align: center; } input[type=text]::-ms-clear { border-color: var(--data-border); border-style: solid; border-width: 1px 1px 1px 1px; border-radius: 3px; padding: 4px; margin: 5px 5px 0 5px; background: var(--data-background); cursor: pointer; } /* Radio Buttons Only works if html is: */ .ZymonicRadio label { display: inline-block; padding: .3em .5em .7em .5em; border: 1px solid var(--decoration-background); transition: all 0.3s; /*! border-radius: 1em; */ height: 1em; margin-top: .3em; cursor: pointer; vertical-align: text-top; } /* to re-style radio buttons we're using the label but we can't hide the input since we need to retain them in the tab-order - we also use focus detection on th sibling input to make it visually obvious that the 'radio' has focus */ .ZymonicRadio input[type="checkbox"], .ZymonicRadio input[type="radio"] { width: 1px; height: 1px; margin: 0; margin-top: 4px; outline: none; border: 1px solid transparent; background-color: transparent; position: absolute; -webkit-appearance: none; appearance: none; } .ZymonicRadio input[type="checkbox"]:checked + label, .ZymonicRadio input[type="radio"]:checked + label { border: solid 1px var(--decoration-background); background-color: var(--decoration-background); color: var(--form-background); } .ZymonicRadio input[type="checkbox"]:focus + label, .ZymonicRadio input[type="radio"]:focus + label { box-shadow: 0 0 5px var(--focus-shadow); } .ZymonicRadio input:focus { box-shadow: none !important; outline: none !important ; border: none; } .MultipleValueButtonChoice { display: inline-block; } button { border-color: var(--action); border-style: solid; border-width: 1px 1px 1px 1px; border-radius: 3px; color: var(--action); padding: 5px; margin: 7px 5px 0 5px; background: var(--darkbackground-action); font: var(--default-text-size); cursor: pointer; /*! font-variant: small-caps; */ max-width: 220px; width: auto; } button:disabled { background: var(--action-hover); color: var(--disabled-text); cursor: default; } button.ZymonicFormButton { margin: 7px 5px 5px 5px; } button:hover {background:var(--action-hover); } .fakeButton { border-color: var(--action); border-style: solid; border-width: 1px 1px 1px 1px; border-radius: 3px; padding: 5px; margin: 5px; background: var(--darkbackground-action); cursor: pointer; } .imgbutton { border: none; } input:focus { box-shadow: 0 0 5px var(--field-focused-shadow); border-color: var(--field-focused-shadow); outline: none; } input[type=hidden] { visibility: hidden; height: 0px; width: 0px; } textarea { font-family: inherit; display: inline; border-color: var(--data-border); border-style: solid; border-width: 1px 1px 1px 1px; left: 100%; top: 0px; margin-left: 5px; height: 45px; vertical-align: text-top; padding-top: 5px; } textarea:focus { border-color: var(--field-focused-border); box-shadow: 0 0 5px var(--field-focused-shadow); outline: none; } .reportlayoutmode { display: inline-block; margin-left: 8px; } .ZymonicRadio.ReportLayoutModeRadio { display: inline-block; padding-top: 3px; padding-bottom: 0px; } .FieldContainsError .ReportLayoutModeRadio input { border: none; } .reportresults { overflow: auto; width: 100%; padding: 5px 0; } /* Note that inline-table appears not to work in Safari and grid is the only option for narrowmode */ .reportresults.narrowmode table { border: 0; } .reportresults.narrowmode table caption { font-size: var(--table-data-text-size); } .reportresults.narrowmode table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .reportresults.narrowmode table tr { border-bottom: 3px solid var((--decoration-background)); display: grid; margin-bottom: 2px; border: 1px solid solid var(--record-border); } .reportresults.narrowmode table td { text-align: right; border: 1px solid var(--data-label-background ); display: inline-grid; text-align: left; margin: 0.1em; /* border-radius: 5px; */ border-collapse: separate; font-size: var(--form-data-text-size); } .narrowmode tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(23em, 1fr)); } .narrowmode .filterdata { height: auto; } .narrowmode div.ReadOnlyFieldValue { overflow-wrap: anywhere; font-size: var(--form-data-text-size); } .reportresults.narrowmode table td.hiddenreportfield { display: none; } .reportresults.narrowmode table td::before { content: attr(data-label); float: left; /*font-weight: bold;*/ text-transform: uppercase; font-size: var(--small-label-text-size); } .reportresults.narrowmode table td:last-child { /* border-bottom: 0; */ } .reportresults.narrowmode table tr:nth-child(even) { background: var(--result-row-alternate-background); border: 1px solid var(--result-row-narrow-border); } /* Horizontal Form Narrow Mode */ .horizontalform.record_container { overflow-x: auto; } .horizontalformlayoutmode { display: inline-block; margin-left: 8px; } .record_container.narrowmode table tr.ZymonicFormHorizontalHeadersRow{ display: none; } .record_container.narrowmode table { border: 0; } .narrowmode .HorizontalFormTableCell div.ZymonicField { text-align: left; } .record_container.narrowmode table caption { font-size: var(--table-data-text-size); } .record_container.narrowmode table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .record_container.narrowmode table tr { border-bottom: 3px solid var((--decoration-background)); display: grid; margin-bottom: 2px; border: 1px solid solid var(--record-border); } .record_container.narrowmode table th.HorizontalFormTableUtilityCell, .record_container.narrowmode table td.HorizontalFormTableUtilityCell { border: none; } .record_container.narrowmode table th { background: var(--result-row-alternate-background); font-weight: bold; } .record_container.narrowmode table th, .record_container.narrowmode table td { text-align: right; border: 1px solid var(--data-label-background ); display: inline-grid; text-align: left; margin: 0.1em; /* border-radius: 5px; */ border-collapse: separate; font-size: var(--form-data-text-size); min-height: 3em; } .record_container.narrowmode div.ReadOnlyFieldValue { overflow-wrap: anywhere; font-size: var(--form-data-text-size); } .record_container.narrowmode table td.hiddenreportfield { display: none; } .record_container.narrowmode table th::before, .record_container.narrowmode table td::before { content: attr(data-label); float: left; /*font-weight: bold;*/ text-transform: uppercase; font-size: var(--small-label-text-size); } .record_container.narrowmode table td:last-child { /* border-bottom: 0; */ } .record_container.narrowmode table tr:nth-child(even) { background: var(--result-row-alternate-background); border: 1px solid var(--result-row-narrow-border); } /* for sortable mode, to make it clear what is sortable */ .ZymonicSortableRecord td { border-top: 1px dotted; } .ZymonicSortableRecord td.HorizontalFormTableUtilityCell { border: none; } .ZymonicFormRecordBeingSorted { background: var(--information-alternate-background); border: 1px dashed var(--information-alternate-border); } /* Error/info messages */ .reportresults p { margin: 0px 14px; } .reportresults table tr td { /*! padding: 3px; */ } .Filter { width: 100%; } /* Ensure fields in and out of FGs line up... */ .Zymonic .ui-tabs-panel { padding: 1em 0 0px !important; /* min-height: 60px;*/ margin: 0; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { font-variant: small-caps; padding: 0em 0.5em; } .ui-sortable { list-style: none; width: 100%; padding: 0; } .ZymonicLogo { background: none repeat scroll 0 0 var(--information-background); border-radius: 5px 5px 5px 5px; color: var(--information-text); margin-bottom: 10px; padding: 10px; width: 216px; clear: left; } .Pages { display: inline; } .FilterField { float: left; } .NoticeList { list-style: none; position: absolute; z-index: 10; } .DateTimeInput { float: left; } .PostDateTimeInputs { clear: left; } /* Filter Classes */ /* This is the old table CSS - but it applies to every table generated by Zymonic which seems far too general to me. table { border: 1px solid #333333; -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#FFFFFF; width: 99%; margin: 1px; font-size:11px; border-collapse:collapse; } tr { border: 1px solid #333333; } td { border: 1px solid #333333; white-space: wrap; padding: .1em; } th { border: 1px solid #333333; }*/ .filtertable { width: 99.5%; padding: 0px; margin: 2px auto; border: 1px solid var(--result-row-border); background: var(--result-table-background); border-collapse: collapse; } .filtertable tr td { vertical-align: middle; } .filtertable th { border: 1px solid var(--data-border); text-align: center; padding: 3px; } .filterdata { border: 1px solid var(--result-row-border); padding: 0px 0 5px 5px; border-left: none; border-right: inherit; height: 35px; } /* align numeric filter data to the right */ .filterdata.int, .filterdata.float, .filterdata.double, .filterdata.decimal { text-align: right; } .filterdata.datetime { display: table-cell; } .filtertable .ZymonicDateTime { max-width: 125px; margin-top: 0; } #SLocation_Left .filtertable th { display: none; } .treecell { white-space: nowrap; padding: 0px; } .treegraphics { display: inline; } .branchlabel { display: inline; vertical-align: super; padding-left: 3px; } .ReportField { display: inline; margin: 0 10px 0 0px; } .treeimg { display: inline; position: relative; } .ti-back { width: 20px; position: absolute; left: 0px; top: -10px; z-index: 3; display: none; } .ti-fore { z-index: 10; border: 0; } .filterbutton { display: inline-block; margin-bottom: 2px; margin-top: -5px; } .resultcount { position: absolute; color: var(--decoration-foreground); font-weight: bold; top: 4px; left: 25px; font-size: var(--decoration-text-size); } .needs_refresh { position: absolute; font-weight: bold; top: 5px; left: 30px; font-size: var(--decoration-text-size); color: var(--has-changed); } .FilterGroupResultCount { margin-right: 5px; } .resultsperpage { margin-right: 4px; } /* User Filter Ordering */ .PreviousSequenceLink { float: left; } .NextSequenceLink { float: right; } .OrderByLink { clear: both; } .FieldOrderAscending, .FieldOrderDescending { background: var(--information-alternate-background); } th.FieldOrderAscending a::after { content: " v"; } th.FieldOrderDescending a::after { content: " ^"; } .FieldCanOrderBy a { display: block; width: 100%; height: 100%; } .FieldCanOrderBy a:hover { background: var(--information-alternate-background-hover); } /* unused? */ th div.TableDragHandle { width: 100%; height: 10px; background: #DDD; } /* Group result highlighting */ .result_level_1 { background-color: var(--result-level-one); font-weight: bold; border-style: solid; border-left: none; border-right: none; } .result_level_2 { background-color: var(--result-level-two); font-weight: bold; border-style: solid; border-left: none; border-right: none; } .result_level_3 { background-color: var(--result-level-three); font-weight: bold; border-style: solid; border-left: none; border-right: none; } .result_level_4 { background-color: var(--result-level-four); font-weight: bold; border-style: solid; border-left: none; border-right: none; } .result_level_5 { background-color: var(--result-level-five); font-weight: bold; border-style: solid; border-left: none; border-right: none; } /* Navigation */ .navigation { display: inline; } .nav { display: inline; margin-left: 2px; vertical-align: bottom; cursor: pointer; } .naverr { display: block; margin: 5px 0; } .nav input { display: inline; text-align: center; width: 50px; } .recordsperpage { padding: 10px 5px 0 0; font-variant: small-caps; } .recordsperpage select { width: 60px; padding-left: 5px; } /* HTML Field editor */ .ZymonicFieldChangedShow~div.cke div { background-color: var(--has-changed); } .ZymonicFieldChangedShow~.HTMLFieldDisplayDiv { background-color: var(--has-changed); } .ZymonicFieldChangedShow { background-color: var(--has-changed); } .ZymonicFieldGroupChangedShow { background: var(--has-changed); } .ZymonicFieldGroupChangedShow>a { background-color: var(--has-changed); } /* ReportField highlighting for conditional formatting */ .highlight_info { background-color: var(--information-background); } .highlight_error { background-color: var(--error-highlight); } .highlight_field_error { background-color: var(--error-highlight); } .highlight_warning { background-color: var(--warning-highlight); } .highlight_help { padding: 0.5em; margin: 0.5em 0.3em 0; background-color: var(--form-background); border-color: var(--information-border); border-style: solid; border-width: 1px; } .FieldGroupSetInner.FieldContainsError { background: var(--error-background); } .CondFormatLoginButton { display: inline-block; vertical-align: text-top; } .CondFormatLoginButton button { margin: 4px 5px 0 5px; } .CondFormatChangePasswordButton { display: inline-block; vertical-align: text-top; } .CondFormatChangePasswordButton button { margin: 4px 5px 0 5px; } /* Colorbox (currently just for re-login) */ /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: var(--overlay); } #cboxTopLeft { width: 14px; height: 14px; background: url(/cb/controls.png) no-repeat 0 0; } #cboxTopCenter { height: 14px; background: url(/cb/border.png) repeat-x top left; } #cboxTopRight { width: 14px; height: 14px; background: url(/cb/controls.png) no-repeat -36px 0; } #cboxBottomLeft { width: 14px; height: 43px; background: url(/cb/controls.png) no-repeat 0 -32px; } #cboxBottomCenter { height: 43px; background: url(/cb/border.png) repeat-x bottom left; } #cboxBottomRight { width: 14px; height: 43px; background: url(/cb/controls.png) no-repeat -36px -32px; } #cboxMiddleLeft { width: 14px; background: url(/cb/controls.png) repeat-y -175px 0; } #cboxMiddleRight { width: 14px; background: url(/cb/controls.png) repeat-y -211px 0; } #cboxContent { background: var(--decoration-foreground); overflow: visible; } #cboxLoadedContent { margin-bottom: 5px; } #cboxLoadingOverlay { background: url(/cb/loading_background.png) no-repeat center center; } #cboxLoadingGraphic { background: url(/cb/loading.gif) no-repeat center center; } #cboxTitle { position: absolute; bottom: -25px; left: 0; text-align: center; width: 100%; font-weight: bold; color: var(--decoration-background); } #cboxCurrent { position: absolute; bottom: -25px; left: 58px; font-weight: bold; color: var(--decoration-background); } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { position: absolute; bottom: -29px; background: url(/cb/controls.png) no-repeat 0px 0px; width: 23px; height: 23px; text-indent: -9999px; } #cboxPrevious { left: 0px; background-position: -51px -25px; } #cboxPrevious.hover { background-position: -51px 0px; } #cboxNext { left: 27px; background-position: -75px -25px; } #cboxNext.hover { background-position: -75px 0px; } #cboxClose { display: none; right: 0; background-position: -100px -25px; } #cboxClose.hover { background-position: -100px 0px; } .cboxSlideshow_on #cboxSlideshow { background-position: -125px 0px; right: 27px; } .cboxSlideshow_on #cboxSlideshow.hover { background-position: -150px 0px; } .cboxSlideshow_off #cboxSlideshow { background-position: -150px -25px; right: 27px; } .cboxSlideshow_off #cboxSlideshow.hover { background-position: -125px 0px; } /* No bullets on block */ ul.block { list-style-type: none; padding: 0; } /* Generic class to hide things, and show things */ .hidden { display: none; } .hidden.show { display: initial; } .line_break_message { font-variant: small-caps; } /* make choice checkboxs line up */ .ChoiceCheckbox { display: inline-block; } .ChoiceCheckbox input, .FilterActionCheckboxContainer input { height: 28px; width: 28px; -webkit-appearance: none; border: 1px solid var(--data-border); background: var(--data-background); padding: 0; margin-top: 4px; cursor: pointer; } .ChoiceCheckbox input[type="checkbox"]:checked::after { content: "\2713"; white-space: pre; font-size: var(--icon-text-size); background: var(--data-checked); color: var(--data-background); display: inline-block; text-align: center; padding-top:2px; } .ChoiceButtons input { height: 25px; width: 25px; -webkit-appearance: none; border: 1px solid var(--data-border); border-radius: 100%; cursor: pointer; min-width: 0; } .ChoiceButtons input[type="checkbox"]:checked::after { content: none; } .UserInputButtons input { height: 20px; width: 20px; -webkit-appearance: none; border: 1px solid var(--data-border); background: var(--data-background); border-radius: 100%; padding: 0; } .ZymonicChoice { /* Not sure why but inline-flex on this class stops the input / select dropping under the label when the block gets very narrow */ /* display: inline-flex; */ } /* These removes the jQuery widget headers from within the blocks on a Search Field */ /* OpenFOP links */ .OpenFOPLink { border: 1px solid var(--data-border); padding: 6px; margin: 5px 3px 0 3px; background: var(--data-background); border-radius: 4px; max-width: 200px; text-align: center; float: right; position: relative; } .OpenFOPLink:link { color: var(--data-border); text-decoration: none; cursor: pointer; } .OpenFOPLink:visited { color: var(--data-border); text-decoration: none; cursor: pointer; } .OpenFOPLink:hover { color: var(--data-border); text-decoration: none; cursor: pointer; background: var(--action-hover); } .OpenFOPLink:active { color: var(--data-border); text-decoration: none; cursor: pointer; } .HTMLFieldInputWrapper { display: contents; } .HTMLFieldDisplayDiv { border: 1px solid var(--data-border); margin: 4px 4px 4px 4px; padding: 6px; min-height: 2.3em; background: var(--data-background); overflow: hidden; overflow-wrap: anywhere; display: inline-block; } .HTMLFieldDisplayDiv pre { white-space: break-spaces; } .ZymonicHTML .ReadOnlyFieldValue { margin-top: 0px; } .ReadOnlyFieldValue { margin-left: 10px; /* Inline Block added because CSS indents the first line if you use margin-left without block / inline block ?!? */ display: inline-block; } /* The CSS needs to specify ZymonicField input to avoid properties from the .ZymonicField input rule from overriding these rules */ .ZymonicField input.HTMLTabStopField { width: 1px; min-width: 0px; height: 1px; margin: 0; margin-top: 4px; outline: none; border: 1px solid transparent; background-color: transparent; position: absolute; } .ZymonicProcess .ZymonicHTML .FieldLabelDiv { top: 0; } .ZymonicDateTime { /*! display: inline-block; */ width: 100%; } .ZymonicDateTime .ifEmpty { position: relative; left: -1px; } .ZymonicDateTime .ifEmpty:hover label { display: inline; left: -20px; position: absolute; top: 15px; } .filtertable .ZymonicDateTime { min-width: auto; } .TransitionResultActions h3 { padding: 0 1em; } .TransitionResultActionsTab { font-weight: bold; } .TransitionResultActions .TransitionResultActionsContainer { /* Padding here was causing the process to expand and overflow on a 360px screen - do not reinstate without testing on phone screen */ /* padding: 1em; */ display: flex; flex-flow: row wrap; } .TransitionResultActionFailureTab a { background-color: var(--error-background); } .ConditionResults { padding: 0.5em; margin: 0.5em; border-color: var(--information-border); border-style: solid; border-width: 1px; background-color: var(--data-background); color: var(--data-border); min-height: 15px; } /* don't show border if results within a notice, i.e. transition failure conditions */ .notice>.ConditionResults { padding: 0; margin: 0.5em; border: none; } .ConditionResults>div { padding: 0; margin: 0.5em; } .ActionResult { display: inline-block; /* Width here was causing the process to expand and overflow on a 360px screen - do not increase without testing on phone screen */ width: 19em; padding-left: 2em; margin: 0 1em 1em 0; vertical-align: top; overflow-x: auto; } .ActionResult .ConditionResults { /* Width here was causing the process to expand and overflow on a 360px screen - do not reinstate without testing on phone screen */ /* width: 28em; */ margin: 0; } .SuccessfulTransition p {margin:10px 5px} .ActionDisplayName { float: left; /* display as list so we can add bullet points */ display: list-item; list-style-type:disclosure-open; } .ActionInformationLink { padding: 0; float: left; margin: 0 0 0 3%; max-width: 27%; } .ActionInformation a { color: var(--information-border); text-decoration: underline; text-underline-offset: 5px; line-height:20px; word-wrap: break-word; } .ActionInformation a:hover { color:var(--decoration-foreground-text); } .ActionMessage, .ActionInformation, .ActionError { margin: 0 0 0 3%; padding: 0; clear: left; word-break: break-all; } .ActionError { color: var(--error-text); } .ActionMessage { color: var(--data-checked); } .ActionMessageContainsCode { white-space: pre; } div.ZymonicRecordJustAdded { background: var(--has-changed); } .ZymonicFilterResultFieldDeleted, td.ZymonicFilterResultFieldDeleted, td.ZymonicFilterResultFieldDeleted div.ReadOnlyFieldValue { /* can be used to highlight deleted filter result fields, if desired */ color: var(--deleted-data); font-style: italic; } .ZymonicDeleted { color: var(--deleted-data); font-style: italic; } .DeleteTransition > button { color: var(--negative-change); border-color: var(--negative-change); } .FilterDeletedDataMessage { padding: 0.5em; margin: 0.5em; border-color: var(--error-border); border-style: solid; border-width: 1px; background-color: var(--error-background); color: var(--deleted-data); min-height: 15px; font-style: italic; } .UsedCachedMVMessage { line-height: 30px; float: left; border: solid 1px var(--has-changed); background-color: var(--information-background); padding-left: 5px; padding-right: 5px; margin-left: 10px; margin-top: 5px; } .FilterUpdatedDataMessage { padding: 0.2em 0.5em; margin-top: -1px; color: var(--has-changed); line-height: 30px; border: 1px solid (var(--information-alternate-border)); } .ZymonicSubFilter .UsedCachedMVMessage { position: absolute; top: 1.5em; } /* Hide the message on menus (left) - to be removed when we come up with another way to manage the message */ .List_Left .UsedCachedMVMessage { display: none } /* to remove styling on text area used to display raw xml */ .ZymonicXMLDisplay { white-space: pre; } /* style ServerPID fields */ .ZymonicServerPIDFieldProcessInfo span::before { content: "("; } .ZymonicServerPIDFieldProcessInfo span::after { content: ")"; } .ZymonicServerPIDFieldProcessInfo table { border-collapse: collapse; } .ZymonicServerPIDFieldProcessInfo table th { font-weight: bold; } .ZymonicServerPIDFieldProcessInfo table td { border: 1px solid black; padding: 2px 5px; } /* set min height to fixed so cancel icon always shows */ .ZymonicBlockLoadingWithCancel { min-height: 145px; } .ZymonicLoadingCancel:hover { background: var(--action-hover); } .ZymonicLoadingCancel { display: block; margin: 20px auto; background: var(--darkbackground-action); font-weight: bold; padding: 10px 30px; width: 40px; border-radius: 5px; height:20px !important; } /* jquery UI overrides */ .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 2.3; text-decoration: none; list-style: none; } .ui-widget-header { border: 0px solid var(--information-alternate-background); /*! background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; */ color: var(--information-alternate-text); } .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 1px; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0 0 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 1px 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .ui-widget-content { background: var(--form-background) url(/jquery/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: var(--form-text); } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid var(--form-inactive-border); background: var(--form-inactive-background); font-weight: normal; color: var(--form-inactive-text); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: var(--form-background); font-weight: var(--form-active-border); color: var(--form-text); } /* for mobile screens */ @media only screen and (min-width: 768px) and (max-width: 959px) { #Location_Left {width: 100%;display: block;} #Location_Right {width: 100%} .ZymonicLogo {clear:both;} } @media only screen and (max-width: 767px) { #Location_Left {width: 100%;display: block;} #Location_Right {width: 100%} .ZymonicLogo {clear:both;} } @media only screen and (min-width: 620px) and (max-width: 767px) { #Location_Left {width: 100%;display: block;} #Location_Right {width: 100%} .ZymonicLogo {clear:both;} } @media only screen and (min-width: 480px) and (max-width: 619px) { #Location_Left {width: 100%;display: block;} #Location_Right {width: 100%} .ZymonicLogo {clear:both;} } @media only screen and (max-width: 479px) { #Location_Left {width: 100%;display: block;} #Location_Right {width: 100%} .ZymonicLogo {clear:both;} .LinkedFieldFilter { width: auto; left: auto; } } /* for printouts and generated reports which generated PDFs from HTML */ @media print { /* make the main zymonic form will the screen width */ body>.ZymonicForm { width: 100%; } /* hide the field group tabs list and show the fieldgroup labels within the fieldsets */ .FieldGroupHeaderContainer { display: none; } .FieldGroupSetContainer, .NoFieldGroupSetContainer { border-radius: 5px; margin: 0.5em; padding: 1em; background: #F6F6F6; display: block; } /* hide and field groups with no visible content */ .NoFieldGroupSetContainer.NoVisibleContent { display: none; } .NoFieldGroupSetContainer { margin-top: 13px; } .FieldGroupSetContainer fieldset legend { display: block; font-size: var(--decoration-text-size); font-weight: bold; } .ZymonicSubForm fieldset legend, .ZymonicSubFilter fieldset legend, .ZymonicFilter fieldset legend { display: none; } /* nested field groups should have no spacing */ .ZymonicSubForm .FieldGroupSetContainer, .ZymonicSubFilter .FieldGroupSetContainer { margin: 0; padding: 0; } /* hide filter stuff for subfilters */ .FilterDeletedDataMessage { display: none; } .FilterSearchForm { display: none; } .FilterButtonWrapper { display: none; } /* vertical align tree view descriptions */ .treecell { vertical-align: top; } /* hide LF filters */ .LinkedFieldFilter { display: none; } /* hide clear all options */ .MultipleChoiceLinkedFieldClearAll, .MCLFRemoveAll, .MultipleValueMatchAll { display: none; } /* remove highlight */ .MultipleChoiceLinkedFieldResults { background: inherit; } /* hide unselected options */ option:checked { display: list-item; } option { display: none; } /* Do not hide the File Options Label it is needed for the 'upload' variant where it shows the filename */ .ZymonicFileOptionsLabel { display: inline-block; padding: 6px 7px; } .fupload_label { /* width: 10em; */ } /* hide form actions buttons and navigation */ .ZymonicFormButton, .FormNavigation { display: none; } /* hide placeholders */ .ZymonicPlaceholderRecord { display: none; } /* show inputs as plain text */ .FieldLabelDiv { font-weight: bold; margin-top: 4px; } .ZymonicFieldLabel label { display: inline; overflow: hidden; min-width: 18em; width:auto; } .ZymonicField input { border-style: none; display: inline; background: inherit; width: 60%; } /* hide any action result links, can't click them when printed */ .ActionInformation a:link { display: none; } } td.hidden { display: table-cell; } td.hiddenreportfield { display: none; } /* Desktop CSS */ #DesktopStatusbar { background-color: var(--decoration-background); background-image: url("zymonic-menu.png"); background-position: 8px center; background-repeat: no-repeat; border-radius: 5px; color: var(--decoration-foreground); width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; z-index: 100; position: fixed; top: 0; } #DesktopStatusbar .Pages { margin-left: 20px; margin-top: 15px; } #DesktopLocations { width: 100%; clear: both; margin-top: 3.5em; } .DesktopBlock { border-radius: 5px; position: relative; margin: 0.2em; background: var(--block-background); border-top: 1px solid var(--block-background); } .DesktopBlockObject { width: 100%; height: 95%; } #DesktopNotificationsbar { background-color: var(--decoration-background); border-radius: 5px; color: var(--decoration-foreground); min-height: 2em; width: 100%; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 100; position: fixed; bottom: 0; } #DesktopNotices { background-color: var(--decoration-background); border-radius: 5px; color: var(--decoration-foreground); border-radius: 5px; position: fixed; bottom: 1.5em; list-style: none; padding: 5px; } a#searchresultmenu { /* Fix the width so the changing result count doesn't make the entry drop on to the next line */ width: 25em; } #ZZsearch { vertical-align: inherit ; height:25px; } .new_notifications { color: var(--information-border); } #notification_label { cursor: pointer; /* font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif; */ } #notifications { padding: 5px; width: 130px; display: inline-block; } #open_blocks { display: inline-block; width: calc(100% - 150px); } #open_block_list { margin: 0; padding: 0; } #open_block_list>li { display: inline-block; background-image: linear-gradient(to bottom, var(--decoration-background), var(--decoration-background-fade)); /* font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif; */ margin: 0; padding: 5px 15px 5px 15px; border-radius: 4px; border-right: 1px solid var(--decoration-background-fade); } #open_block_list a { color: var(--decoration-foreground) !important; font-size: var(--decoration-text-size); } #search { top: -75%; right: 4em; z-index: 99999; position: relative; float: right; } #search_result_count { padding: 3px; font-size: var(--decoration-text-size); } /* Now done server side .BlockAction.MaximiseAction a::after { content: "\1f5d6"; white-space: pre; } .BlockAction.MinimiseAction a::after { content: "\1f5d5"; white-space: pre; } .BlockAction.RestoreAction a::after { content: "\1f5d7"; white-space: pre; } */ .BlockAction.MinimiseAction, .BlockAction.MaximiseAction, .BlockAction.RestoreAction { font-size: var(--icon-text-size); color: var(--decoration-foreground); float: right; margin-top: -3px; margin-right: 3px; margin-left: 0px; margin-bottom: 0px; /* Important this is needed for Safari */ padding: 0px; } .BlockAction.MaximiseAction a, .BlockAction.MinimiseAction a, .BlockAction.RestoreAction a { color:var(--decoration-foreground); } #open_block_list>li.blockIsMinimised { background: var(--decoration-inactive-background); } @import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700); .sm-blue { background: transparent; border-radius: 8px; box-shadow: 0 1px 4px var(--decoration-shadow); } .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active { padding: 10px 20px; /* make room for the toggle button (sub indicator) */ padding-right: 58px; background: var(--decoration-background); background-image: linear-gradient(to bottom, var(--decoration-background), var(--decoration-background-fade)); color: var(--decoration-foreground); /* font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif; */ font-size: 18px; font-weight: bold; line-height: 23px; text-decoration: none; text-shadow: 0 1px 0 var(--decoration-shadow); } .sm-blue a.current { background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); color: var(--decoration-foreground); } .sm-blue > li > a { color: var(--decoration-foreground); } .sm-blue a.disabled { color: var(--decoration-foreground-disabled); } .sm-blue a .sub-arrow { position: absolute; top: 50%; margin-top: -17px; left: auto; right: 4px; width: 34px; height: 34px; overflow: hidden; font: bold 16px/34px monospace !important; text-align: center; text-shadow: none; background: var(--decoration-shadow); border-radius: 4px; } .sm-blue a .sub-arrow::before { content: '+'; } .sm-blue a.highlighted .sub-arrow::before { content: '-'; } .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { border-radius: 8px 8px 0 0; } .sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { border-radius: 0 0 8px 8px; } .sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted { border-radius: 0; } .sm-blue ul { background: var(--decoration-foreground); } .sm-blue ul ul { background: var(--decoration-dark); } .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active { background: transparent; color: var(--decoration-foreground-text); font-size: var(--decoration-text-size); text-shadow: none; border-left: 8px solid transparent; } .sm-blue ul a.current { background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); color: var(--decoration-foreground); } .sm-blue ul a.disabled { color: var(--decoration-foreground-disabled); } .sm-blue ul ul a, .sm-blue ul ul a:hover, .sm-blue ul ul a:focus, .sm-blue ul ul a:active { border-left: 16px solid transparent; } .sm-blue ul ul ul a, .sm-blue ul ul ul a:hover, .sm-blue ul ul ul a:focus, .sm-blue ul ul ul a:active { border-left: 24px solid transparent; } .sm-blue ul ul ul ul a, .sm-blue ul ul ul ul a:hover, .sm-blue ul ul ul ul a:focus, .sm-blue ul ul ul ul a:active { border-left: 32px solid transparent; } .sm-blue ul ul ul ul ul a, .sm-blue ul ul ul ul ul a:hover, .sm-blue ul ul ul ul ul a:focus, .sm-blue ul ul ul ul ul a:active { border-left: 40px solid transparent; } .sm-blue ul li { border-top: 1px solid var(--decoration-dark); } .sm-blue ul li:first-child { border-top: 0; } @media (min-width: 768px) { /* Switch to desktop layout ----------------------------------------------- These transform the menu tree from collapsible to desktop (navbar + dropdowns) -----------------------------------------------*/ /* start... (it's not recommended editing these rules) */ .sm-blue ul { position: absolute; width: 12em; } .sm-blue li { float: left; } .sm-blue.sm-rtl li { float: right; } .sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li { float: none; } .sm-blue a { white-space: nowrap; } .sm-blue ul a, .sm-blue.sm-vertical a { white-space: normal; } .sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a { white-space: nowrap; } /* ...end */ .sm-blue { background: var(--decoration-background); background-image: linear-gradient(to bottom, var(--decoration-background), var(--decoration-background-fade)); border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { padding: 5px 20px; background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); /*! color: #fff !important; */ font-size: var(--decoration-text-size); font-weight: normal; line-height: 30px; } .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); } .sm-blue a.current { background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); color: var(--form-background); } .sm-blue a.disabled { background: var(--decoration-background); background-image: linear-gradient(to bottom, var(--decoration-background), var(--decoration-background-fade)); color: var(--decoration-foreground-disabled); } .sm-blue a .sub-arrow { top: auto; margin-top: 0; bottom: 2px; left: 50%; margin-left: -5px; right: auto; width: 0; height: 0; border-width: 5px; border-style: solid dashed dashed dashed; border-color: var(--decoration-foreground-disabled) transparent transparent transparent; background: transparent; border-radius: 0; } .sm-blue a .sub-arrow::before { display: none; } .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { border-radius: 8px 0 0 8px; } .sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a { border-radius: 0 8px 8px 0 !important; } .sm-blue > li { border-left: 1px solid var(--decoration-border); } .sm-blue > li:first-child { border-left: 0; } .sm-blue ul { border: 1px solid var(--decoration-inactive-background); padding: 7px 0; background: var(--decoration-foreground); border-radius: 0 0 4px 4px !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2); } .sm-blue ul ul { border-radius: 4px !important; background: var(--decoration-foreground); } .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { border: 0 !important; padding: 5px 20px; background: transparent; color: (--decoration-border); border-radius: 0 !important; font-size: var(--decoration-text-size); } .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { background: var(--decoration-background-active); background-image: linear-gradient(to bottom, var(--decoration-background-active), var(--decoration-background-active-fade)); color: var(--decoration-foreground); } .sm-blue ul a.current { background: var(--decoration-background); background-image: linear-gradient(to bottom, var(--decoration-background), var(--decoration-background-fade)); color: var(--decoration-foreground); } .sm-blue ul a.disabled { background: var(--decoration-foreground); color: var(--decoration-foreground-disabled); } .sm-blue ul a .sub-arrow { top: 50%; margin-top: -5px; bottom: auto; left: auto; margin-left: 0; right: 10px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent var(--decoration-foreground-disabled); } .sm-blue ul li { border: 0; } .sm-blue .scroll-up, .sm-blue .scroll-down { position: absolute; display: none; visibility: hidden; overflow: hidden; background: var(--decoration-foreground); height: 20px; } .sm-blue .scroll-up-arrow, .sm-blue .scroll-down-arrow { position: absolute; top: -2px; left: 50%; margin-left: -8px; width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: dashed dashed solid dashed; border-color: transparent transparent var(--decoration-border) transparent; } .sm-blue .scroll-down-arrow { top: 6px; border-style: solid dashed dashed dashed; border-color: var(--decoration-border) transparent transparent transparent; } .sm-blue.sm-rtl.sm-vertical a .sub-arrow { right: auto; left: 10px; border-style: dashed solid dashed dashed; border-color: transparent var(--decoration-foreground-disabled) transparent transparent; } .sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a { border-radius: 0 8px 8px 0; } .sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a { border-radius: 8px 0 0 8px !important; } .sm-blue.sm-rtl > li:first-child { border-left: 1px solid var(--decoration-border); } .sm-blue.sm-rtl > li:last-child { border-left: 0; } .sm-blue.sm-rtl ul a .sub-arrow { right: auto; left: 10px; border-style: dashed solid dashed dashed; border-color: transparent var(--decoration-foreground-disabled) transparent transparent; } .sm-blue.sm-vertical { box-shadow: 0 1px 4px var(--decoration-shadow); } .sm-blue.sm-vertical a { padding: 9px 23px; } .sm-blue.sm-vertical a .sub-arrow { top: 50%; margin-top: -5px; bottom: auto; left: auto; margin-left: 0; right: 10px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent var(--decoration-foreground-disabled); } .sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a { border-radius: 8px 8px 0 0; } .sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a { border-radius: 0 0 8px 8px !important; } .sm-blue.sm-vertical > li { border-left: 0 !important; } .sm-blue.sm-vertical ul { border-radius: 4px !important; } .sm-blue.sm-vertical ul a { padding: 9px 23px; } } /*# sourceMappingURL=sm-blue.css.map */ /* Taken from crystal_bos_main.css */ @media (min-width:767px) { .sidebar-collapse .main-sidebar, .sidebar-collapse .main-header, .sidebar-collapse .content, .sidebar-collapse .content-header { margin-left: -50px; } } @media (max-width:767px) { #menubar li.Pages { width: 6em; } #menubar li.AuthState { width: 6em; } } .ZymonicProcess[id$="Authentication_Process"] .notice span { display: block; } /* Hide the password change fields until required */ .AuthenticatedState .zz_change_password_from_authenticated_div { display: none; } .AuthenticatedState .zz_new_password { display: none; } .AuthenticatedState .zz_new_password { display: none; } #ZymonicInlinePasswordChange .zz_show_password_change, .zz_change_password_state .zz_show_password_change { display: none; } @media only screen and (max-width: 479px) { #Location_Main { width: 100%; } #Location_Left { width: 100%; float: none; } #Location_Right { width: 100%; float: none; } } /*Icons */ .csv_download { position: relative; top: -5px; } .html_download { position: relative; top: -5px; } .pdf_download { position: relative; top: -5px; right: 10px; cursor: pointer; } .csv_download img { display: none; } .html_download img { display: none; } .pdf_download img { display: none; } .csv_download::after { content: "\2b63"; white-space: pre; font-size: var(--icon-text-size); } .csv_download::before { content: "CSV"; white-space: pre; color: var(--information-border); font-weight: bold; font-size: var(--icon-text-size); } .html_download::after { content: "\2b63"; white-space: pre; font-size: var(--icon-text-size); } .html_download::before { content: "HTML"; white-space: pre; color: var(--information-border); font-weight: bold; font-size: var(--small-label-text-size); } .pdf_download::after { content: "\2b63"; white-space: pre; font-size: var(--icon-text-size); color: var(--information-background); } .pdf_download::before { content: "PDF"; white-space: pre; color: var(--information-background); font-weight: bold; font-size: var(--small-label-text-size); } .FilterActionEdit img { display: none; } .FilterActionEdit::before { content: "\1f589"; white-space: pre; color: var(--information-border); font-size: var(--icon-text-size); cursor: pointer; } .ZymonicField.hidden { display: none; } .ZymonicField.hidden.show { display: initial; } /* set multiple fields, e.g. check all */ .ZymonicFieldSetMultiple .FieldLabelSpan { display: inline-block; min-width: 100px; } /* form search fields */ .HorizontalFormTableHeader .ZymonicFieldFormSearch .ZymonicField label { display: table; width: 100%; } .ZymonicFieldFormSearch .FieldLabelSpan { min-width: 100px; } /* revision history filter */ td.ZymonicDifferentFromPrevious { background: var(--has-changed); } td.ZymonicDifferentFromPrevious.ZymonicDateTimeDifference, td.ZymonicDifferentFromPrevious.ZymonicNumericDifference { background: none; } .ZymonicPositiveDifference { color: var(--positive-change); } .ZymonicNegativeDifference { color: var(--negative-change); } /* toolkit GUI tweaks */ .zz_toolkit_output .ReadOnlyFieldValue { white-space: pre; font-family: "Lucida Console", Courier, monospace;; } fieldset div { display: grid;} .FilterSearchForm .HTMLFieldInputWrapper {margin:0 !important;} .FilterSearchForm .HTMLFieldInputWrapper textarea { min-height: 30px; } .FilterSearchForm textarea { height: 19px; /* margin-top: -0.5em; */ } .FilterSearchForm fieldset {padding: 0} /* process history report, ensure actions results are never too cramped */ th.zz_phr_action_results, th.zz_phr_run_in_background_action_result { min-width: 300px; } [id*="ztsm_barcode_print_process_ztsm_barcode_print_header_reprinting_form"][id*="ZZDELETE"] { display: none !important; }