/** * Master CSS to be used for all FlowChief web applications (ASP and ASP.NET modules). * */ /******************** Color definitions *********************/ :root { /* Corporate Idendity */ --color-fc-blue: #007DC2; /* (not to be used anywhere in a software module) */ --color-fc-gray: #B3B3B3; /* (product neutral color, usually not needed in a software module) */ --color-pcs-blue: #00A0E3; --color-pcs-blue-dark: #0077AA; /* (to be used for links) */ --color-pcs-blue-light: #98D8F3; /* (to be used for e.g. highlight of selected row */ --color-egem-green: #B0CB1F; --color-egem-green-dark: #849817; /* (to be used fo links, needed for better contrast) */ --color-egem-green-light: #DEE9A4; /* (to be used for e.g. highlight of selected row */ --color-remote-orange: #EB9811; --color-portal-red: #C02222; } :root { --color-accent: var(--color-pcs-blue); --color-accent-dark: var(--color-pcs-blue-dark); --color-accent-light: var(--color-pcs-blue-light); /* Text colors: */ --color-text: #141823; --color-text-header: #9197A3; --color-text-comment: #606060; /* Menu */ --color-menu-text: #FFFFFF; --color-menu-background: #424F5A; --color-menu-background-hover: #5E6972; --color-menu-background-selected: #343F48; /* (additionally a bottom line in product color) */ /* Background colors: */ --color-background: #FFFFFF; --color-background-highlight: #7F7F7F; --color-group-background: #FCFCFC; /* Tables */ --color-table-header-text: var(--color-text-header); --color-table-border: #E9EAED; --color-table-blocktitle: #E9EAED; --color-border-staticvalue: #7F9DB9; /* Pager */ --color-pager-border: #D9D9D9; /* Buttons */ --color-button-text: #FFFFFF; --color-button-text-disabled: #F0F0F0; --color-button-background: var(--color-accent); --color-button-background-hover: #989898; --color-button-background-disabled: #CCCCCC; /* LightButtons*/ --color-light-button-text: #FFFFFF; --color-light-button-text-disabled: #F0F0F0; --color-light-button-background: #A6A6A6; --color-light-button-background-hover: var(--color-accent); --color-light-button-background-disabled: #CCCCCC; /* Text-/Icon-Button */ --color-text-button-hover: #F5F5F5; /* CheckBox / RadioButton */ --color-checkbox: var(--color-accent); --color-checkbox-hover: #989898; --color-checkbox-disabled: #CCCCCC; /* Input Fields */ --color-input-text: var(--color-text); --color-input-placeholer: #C3C7CD; --color-input-focus: var(--color-accent); --color-input-border: #D3D6DB; --color-input-background: var(--color-background); --color-input-background-disabled: #EBEBE4; /* Color Context Menu */ --color-context-menu-text: #141823; --color-context-menu-background: #FFFFFF; --color-context-menu-background-hover: #EEEEEE; --color-context-menu-disabled: #A0A0A0; /* Color warning levels */ --color-warning-limit-low: #ffea00; --color-warning-limit-middle: #ff9303; --color-warning-limit-high: #ff2700; } /* ============= */ /* HTML elements */ /* ============= */ /* General / global */ /* ---------------- */ [hidden] { /* Make hidding things importent otherwise they are visible whenever display is set to something*/ display: none !important; } html { font-size: 0.75em; /* equals 12px if the browser has 16px default font-size wich is most browsers default */ } body { background-color: var(--color-background); color: var(--color-text); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1rem; } svg { font-family: sans-serif; /* Override Browser default value in SVG files */ } table /* NOTE (11.07.2011): doesn't inherit by default from */ { font-size: 1rem; /* Quirks mode can't inherit from (see following statement) */ font-size: inherit; /* inherit from (not supported in Quirks mode) */ font-family: inherit; } /* Headlines */ /* --------- */ h1 { color: var(--color-text-header); text-transform: uppercase; font-size: 2.17rem; letter-spacing: 1px; margin-top: 0px; } h2 { color: var(--color-text-header); text-transform: uppercase; font-size: 1.167rem; letter-spacing: 1px; margin: 5px 0px 5px 0px; } h3 { color: var(--color-text-header); text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; margin: 7px 0px 7px 0px; } h4 { color: var(--color-text-header); text-transform: uppercase; font-size: 0.917rem; letter-spacing: 1px; margin: 7px 0px 7px 0px; } /* Links */ /* ----- */ a { color: var(--color-accent-dark); } a:link { color: var(--color-accent-dark); text-decoration: none; } a:visited { color: var(--color-accent-dark); text-decoration: none; } a:hover { color: var(--color-accent); /* keep original blue for a light hover effect */ text-decoration: underline; } a:active { color: var(--color-accent-dark); text-decoration: underline; } a:focus { color: var(--color-accent-dark); text-decoration: underline; } a.HiddenLink, a.HiddenLink:link, a.HiddenLink:visited, a.HiddenLink:active, a.HiddenLink:focus { color: var(--color-text); } a.HiddenLink:hover { color: var(--color-accent); } /* Tables (general) */ /* ---------------- */ thead { display: table-header-group; } tfoot { display: table-footer-group; } th { vertical-align: middle; /* (26.04.2019 VM) Must not change this general default alignment here to prevent compatibility of all modules! */ } td { vertical-align: middle; /* (26.04.2019 VM) Must not change this general default alignment here to prevent compatibility of all modules! */ } /* Forms */ /* ----- */ form { margin: 0; /* should not influence layout */ } /* TextBoxes */ /* --------- */ input[type="text"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="password"], input[type="color"], input[type="file"], input[type="number"], input[type="month"], input[type="week"], textarea { margin: 0; appearance: none; box-shadow: none; border-radius: 0; background-color: var(--color-input-background); color: var(--color-text); font-size: 1.33rem; font-family: inherit; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; border: solid 1px var(--color-input-border); } input[type="text"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="password"]:focus, input[type="color"]:focus, input[type="file"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--color-input-focus); outline: none; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: var(--color-input-placeholer) !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--color-input-placeholer) !important; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--color-input-placeholer) !important; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--color-input-placeholer) !important; } /* CheckBoxes / RadioButtons*/ /* ------------------------ */ input[type="checkbox"], input[type="radio"] { background: transparent none repeat scroll 0 0; border: medium none; margin-right: 0.75em; width: auto; } input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked), input[type="radio"]:checked, input[type="radio"]:not(:checked) { background: transparent none repeat scroll 0 0; margin: 0; padding: 0; position: fixed; -ms-transform: scale(0); /* IE */ -moz-transform: scale(0); /* FF */ -webkit-transform: scale(0); /* Safari and Chrome */ -o-transform: scale(0); /* Opera */ margin-left: -12px; } input[type="checkbox"] + label, input[type="radio"] + label { cursor: pointer; } input[type="checkbox"]:checked + label::before, input[type="checkbox"]:not(:checked) + label::before, input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before { background: white none repeat scroll 0 0; border: 1px solid var(--color-checkbox); content: " "; display: inline-block; height: 1em; margin-right: .5em; position: relative; top: 4px; width: 1em; } input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before { border-radius: 30px; } input[type="checkbox"]:hover + label::before, input[type="radio"]:hover + label::before { background: var(--color-checkbox-hover) none repeat scroll 0 0; box-shadow: 0 0 0 2px white inset; } input[type="checkbox"]:focus + label, input[type="radio"]:focus + label { color: var(--color-checkbox); text-decoration: underline; } input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before { background: var(--color-checkbox) none repeat scroll 0 0; box-shadow: 0 0 0 2px white inset; } input[type="checkbox"]:disabled + label::before, input[type="radio"]:disabled + label::before { background-color: inherit; box-shadow: inherit; border-color: var(--color-checkbox-disabled); } input[type="checkbox"]:checked:disabled + label::before, input[type="radio"]:checked:disabled + label::before { background-color: var(--color-checkbox-disabled); box-shadow: 0 0 0 2px white inset; } input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label { cursor: default; color: var(--color-checkbox-disabled); } /* Disabled inputs */ textarea:disabled, input:not([type]):disabled, input[type="color" i]:disabled, input[type="date" i]:disabled, input[type="datetime" i]:disabled, input[type="datetime-local" i]:disabled, input[type="email" i]:disabled, input[type="month" i]:disabled, input[type="password" i]:disabled, input[type="number" i]:disabled, input[type="search" i]:disabled, input[type="tel" i]:disabled, input[type="text" i]:disabled, input[type="time" i]:disabled, input[type="url" i]:disabled, input[type="week" i]:disabled, input[type="image"]:disabled, select:disabled { background-color: var(--color-input-background-disabled); opacity: 1; } textarea:read-only, input:not([type]):read-only, input[type="color" i]:read-only, input[type="date" i]:read-only, input[type="datetime" i]:read-only, input[type="datetime-local" i]:read-only, input[type="email" i]:read-only, input[type="month" i]:read-only, input[type="password" i]:read-only, input[type="number" i]:read-only, input[type="search" i]:read-only, input[type="tel" i]:read-only, input[type="text" i]:read-only, input[type="time" i]:read-only, input[type="url" i]:read-only, input[type="week" i]:read-only{ background-color: var(--color-input-background-disabled); opacity: 1; } /* DropDownLists */ /* ------------- */ select { background-color: var(--color-input-background); font-size: 1.33rem; color: var(--color-input-text); border-radius: 0; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; padding-right: 4px; border: solid 1px var(--color-input-border); text-transform: none; /* Disable Safari round corners but keep the triangle */ /* THIS DOESNT WORK BECAUSE OF BROWSER INCOMPATIBILITIES (EDGE) -webkit-appearance: none; -webkit-padding-end: 2rem; -webkit-border-radius:0; background-image: url("data:image/svg+xml;utf8,"); background-position: 100% 50%; background-repeat: no-repeat; */ } select:focus { border-color: var(--color-input-focus); outline: none; } /* Buttons */ /* ------- */ button, input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; border-radius: 0px; background-color: var(--color-button-background); color: var(--color-button-text); cursor: pointer; padding: 8px 16px; text-decoration: none; border: none; margin-left: 2px; margin-right: 2px; margin-bottom: 2px; } button:not([hidden]), input[type="button"]:not([hidden]), input[type="submit"]:not([hidden]), input[type="reset"]:not([hidden]) { display: inline-block; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { background-color: var(--color-button-background-hover); } button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled { background-color: var(--color-light-button-background-disabled); color: var(--color-light-button-text-disabled); cursor: default; } button.LightButton, input.LightButton[type="button"], input.LightButton[type="submit"], input.LightButton[type="reset"] { background-color: var(--color-light-button-background); } button.LightButton:hover, input.LightButton[type="button"]:hover, input.LightButton[type="submit"]:hover, input.LightButton[type="reset"]:hover { background-color: var(--color-light-button-background-hover); } button.LightButton:disabled, input.LightButton[type="button"]:disabled, input.LightButton[type="submit"]:disabled, input.LightButton[type="reset"]:disabled { background-color: var(--color-light-button-background-disabled); color: var(--color-light-button-text-disabled); cursor: default; } /* ============ */ /* Login dialog */ /* ============ */ /*
*/ .LoginDialog { border-radius: 0; border-style: solid; border-width: 1px; border-color: var(--color-accent); background-color: var(--color-group-background); padding: 10px; margin: 5px 5px 3px 5px; font-size: 1.33rem; display: inline-block; } .LoginDialog input[type="text"], .LoginDialog input[type="password"] { border: none; border-bottom: solid 2px var(--color-background-highlight); transition: border 0.3s; background-color: Transparent; width: 200px; color: inherit; border-radius: 0; margin: 0px; padding: 0px; } .LoginDialog input[type="text"]:focus, .LoginDialog input[type="password"]:focus { border-bottom: solid 2px var(--color-accent); } .LoginDialog > table { } .LoginDialog > table > tr { } .LoginDialog > table > tr > td, .LoginDialog > table > tbody > tr > td { vertical-align: top; padding: 2px 5px 2px 5px; } .LoginDialog > table > thead > tr > th { font-weight: bold; font-size: 1.33rem; text-transform: uppercase; color: var(--color-accent); background-color: var(--color-table-blocktitle); vertical-align: top; text-align: left; padding: 25px 5px 5px 5px; } .LoginDialog > table > thead + tfoot + tbody > tr:first-child > td, .LoginDialog > table > thead + tbody > tr:first-child > td { padding-top: 30px; } /* =========== */ /* Filter form */ /* =========== */ /*
*/ .FilterForm { border-radius: 0; border-style: solid; border-width: 1px; border-color: var(--color-accent); background-color: var(--color-group-background); padding: 10px; font-size: 1.33rem; display: inline-block; } .FilterForm > table { } .FilterForm > table > tr { } .FilterForm > table > tr > th, .FilterForm > table > tbody > tr > th { color: var(--color-text-header); vertical-align: top; padding: 2px 5px 2px 5px; } .FilterForm > table > tr > td, .FilterForm > table > tbody > tr > td { vertical-align: top; padding: 0.12em 0.3em 0.12em 0.3em; } /*
markup, but in most browsers not matching, because becomes inserted automatically (see below) */ .DataGridView > table > thead > tr > th, /* Regular headline */ .DataGridView > table > tbody > tr > th, /* Headline directly in or browser default if not used */ .DataGridView > table > tfoot > tr > th, /* Repeated headline in footer */ .DataGridView > div > table > tr > th, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > thead > tr > th, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > tbody > tr > th, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > tfoot > tr > th /* Needed for asp:GridView because this control will be rendered as div containing a table */ { color: var(--color-table-header-text); border: 1px none var(--color-table-border); font-size: 0.917rem; font-weight: bold; text-transform: uppercase; padding: 0.8em 0.4em 0.15em; } /* Overwrite the style */ .DataGridView > table > tfoot > tr > th, /* Repeated headline in footer */ .DataGridView > div > table > tfoot > tr > th /* Needed for asp:GridView because this control will be rendered as div containing a table */ { border-style: none; padding-top: 0.15em; padding-bottom: 0.8em; } .DataGridView > table > tr > td, .DataGridView > table > tbody > tr > td, .DataGridView > div > table > tr > td, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > tbody > tr > td /* Needed for asp:GridView because this control will be rendered as div containing a table */ { padding: 0.5em 0.35em; border: 1px none var(--color-table-border); } .DataGridView > table > tr:last-of-type > td, .DataGridView > table > tbody > tr:last-of-type > td, .DataGridView > div > table > tr:last-of-type > td, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > tbody > tr:last-of-type > td /* Needed for asp:GridView because this control will be rendered as div containing a table */ { border-bottom-style: none; } .DataGridView th a:link /* sortable column headers not draw as normal link */ { color: inherit; } .DataGridView th a:visited { color: inherit; } .DataGridView th a:hover { color: inherit; } .DataGridView th a:active { color: inherit; } .DataGridView th a:focus { color: inherit; } .DataGridView .UnitRow { text-transform: none; font-size: smaller; font-weight: normal; } .DataGridView .FilterRow { } .DataGridView .FilterRow select { max-width: 150px; color: inherit; } .DataGridView .FilterRow th { padding-top: 0.8em; padding-bottom: 0.8em; } .DataGridView .FilterRow td { color: var(--color-text-header); } .DataGridView .AlternateRow { background-color: var(--color-background); } .DataGridView .SelectedRow { } .DataGridView .SelectedRow td { border-top-style: solid; border-top-width: 2px; border-top-color: var(--color-accent); border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--color-accent); color: var(--color-accent); font-weight: bold; } .DataGridView .Weekend { background-color: var(--color-table-blocktitle); } /* for summaries on bottom of tables */ .DataGridView .SummaryRow, .DataGridView > table > tfoot > tr { } .DataGridView .SummaryRow td, .DataGridView > table > tfoot > tr > td { height: 2.8em; } /*
for block captions */ .FilterForm > table > tr > *.BlockTitle, .FilterForm > table > tbody > tr > *.BlockTitle { color: var(--color-text-header); background-color: var(--color-table-blocktitle); font-weight: bold; vertical-align: top; padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 0.3em; padding-right: 0.3em; } /* for field captions */ .FilterForm > table > tr > td.Caption, .FilterForm > table > tbody > tr > td.Caption, .FilterForm legend, .FilterForm div.TopToLeftLabel > label /*BG*/ /* !!!!!!!!!! PRÜFEN, OB DAS ALLGEMEINGÜTLIG IST !!!!!!*/ { color: var(--color-text-header); font-weight: bold; } /* for fields with static values */ .FilterForm > table > tr > td.StaticValue, .FilterForm > table > tbody > tr > td.StaticValue { border: solid 1px var(--color-border-staticvalue); background-color: var(--color-background); padding-top: 0.2em; padding-bottom: 0.2em; } /* for field comments */ .FilterForm .Comment { color: var(--color-text-comment); font-size: smaller; } /* ============== */ /* Data grid view */ /* ============== */ /*
*/ .DataGridView { border-radius: 0; border-style: solid; border-width: 1px; border-color: var(--color-accent); background-color: var(--color-group-background); padding: 10px; display: inline-block; font-size: 1rem; } .DataGridView > table, .DataGridView > div > table /* Needed for asp:GridView because this control will be rendered as div containing a table */ { border-collapse: collapse !important; } .DataGridView > table > tr, .DataGridView > table > thead > tr, .DataGridView > table > tfoot > tr, .DataGridView > table > tbody > tr, .DataGridView > div > table > tr, .DataGridView > div > table > thead > tr, .DataGridView > div > table > tfoot > tr, .DataGridView > div > table > tbody > tr { border: 1px none var(--color-table-border); border-top-style: solid; } .DataGridView > table > tr:first-of-type, .DataGridView > table > thead > tr:first-of-type, .DataGridView > div > table > tr:first-of-type, /* Needed for asp:GridView because this control will be rendered as div containing a table */ .DataGridView > div > table > thead > tr:first-of-type /* Needed for asp:GridView because this control will be rendered as div containing a table */ { border-top: none; } .DataGridView > table > tr > th, /* Headline w/o
for block captions */ .DataGridView .BlockTitle { font-weight: bold; font-size: 1rem; text-transform: uppercase; color: var(--color-text-header); background-color: var(--color-table-blocktitle); border-top: solid 1px var(--color-table-border); border-bottom: solid 1px var(--color-table-border); vertical-align: top; text-align: left; padding-top: 2em; padding-bottom: 0.4em; } /*
for captions inside summary rows */ .DataGridView .SummaryRow .Caption, .DataGridView > table > tfoot > tr > td.Caption { color: var(--color-text-header); font-weight: bold; } /* for values inside summary rows */ .DataGridView .SummaryRow .Value, .DataGridView > table > tfoot > tr > td.Value { } .HighlightHoverRow { } .HighlightHoverRow > table > tbody > tr[onclick]:hover > td, .HighlightHoverRow > table > tbody > tr.HasOnclick:hover > td, .HighlightHoverRow > table > tbody > tr[onclick].hovered > td, .HighlightHoverRow > table > tbody > tr.HasOnclick.hovered > td { border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent); color: var(--color-accent); cursor: pointer; } /* ============== */ /* Data form view */ /* ============== */ /*
*/ .DataFormView { border-radius: 0; border-style: solid; border-width: 1px; border-color: var(--color-accent); background-color: var(--color-group-background); font-size: 1.33rem; padding: 10px; display: inline-block; } .DataFormView > table { border-collapse: collapse; } .DataFormView > table > tr, .DataFormView > table > tbody > tr { vertical-align: top; } .DataFormView > table > tr > th, .DataFormView > table > tbody > tr > th { color: var(--color-text-header); border-style: none; border-width: 1px; border-color: var(--color-table-border); border-bottom-style: solid; text-align: left; vertical-align: top; font-weight: normal; padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.6em; padding-bottom: 0.6em; } .DataFormView > table > tr > td, .DataFormView > table > tbody > tr > td { border-style: none; border-width: 1px; border-color: var(--color-table-border); border-bottom-style: solid; vertical-align: top; padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.6em; padding-bottom: 0.6em; } .DataFormView > table > tr:last-of-type > th, .DataFormView > table > tbody > tr:last-of-type > th, .DataFormView > table > tr:last-of-type > td, .DataFormView > table > tbody > tr:last-of-type > td { border-bottom-style: none; } /*
for block captions */ .DataFormView > table > tr > *.BlockTitle, .DataFormView > table > tbody > tr > *.BlockTitle { padding-top: 2em; text-transform: uppercase; font-size: 1rem; font-weight: bold; background-color: var(--color-table-blocktitle); } /* for field comments */ .DataFormView .Comment, .DataFormView .Description { color: var(--color-text-comment); font-size: smaller; } /* ============== */ /* Tree view */ /* ============== */ /*
*/ .TreeView { border-radius: 0; border-style: solid; border-width: 1px; border-color: var(--color-accent); background-color: var(--color-group-background); padding: 10px; } .TreeView:not([hidden]) { display: inline-block; } .TreeView img { margin-right: 3px; max-width: 16px; max-height: 16px; } .TreeView a { cursor: pointer; color: var(--color-text); text-decoration: none; } .TreeView a:link, .TreeView a:visited, .TreeView a:hover, .TreeView a:active, .TreeView a:focus { color: var(--color-text); } .TreeView a:hover { font-weight: bold; text-decoration: none; } .TreeView .SelectedNode > a, .TreeView .SelectedNode > * > a { font-weight: bold; } /*