From 27da8470b77862a1c9f1800f60e879a229e3a4db Mon Sep 17 00:00:00 2001 From: Stephen Abello Date: Tue, 15 Jun 2021 15:03:50 +0200 Subject: [PATCH] =?UTF-8?q?Harmonize=20setup=20look=20with=20backoffice=20?= =?UTF-8?q?one=20and=20force=20navigation=20buttons=20to=20remain=20at=20t?= =?UTF-8?q?he=20same=20position=20at=20every=20setup=20step=20=F0=9F=99=89?= =?UTF-8?q?=F0=9F=99=89=F0=9F=99=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/setup.css | 1231 ++++++++++++++++++-------- css/setup.scss | 40 +- setup/wizardcontroller.class.inc.php | 12 +- setup/wizardsteps.class.inc.php | 12 +- 4 files changed, 919 insertions(+), 376 deletions(-) diff --git a/css/setup.css b/css/setup.css index 04a4e25ca..570adfbcb 100644 --- a/css/setup.css +++ b/css/setup.css @@ -380,6 +380,17 @@ /* 30px */ /* 36px */ /* 48px */ +/* Value Common weight name (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) */ +/* 100 Thin (Harline) */ +/* 200 Extra Light (Ultra Light) */ +/* 300 Light */ +/* 400 Normal (Regular) */ +/* 500 Medium */ +/* 600 Semi Bold (Demi Bold) */ +/* 700 Bold */ +/* 800 Extra Bold (Ultra Bold) */ +/* 900 Black (Heavy) */ +/* 950 Extra Black (Ultra Black) */ :root { --ibo-font-size-50: 0.83rem; --ibo-font-size-100: 1rem; @@ -393,6 +404,23 @@ --ibo-font-size-500: 3rem; --ibo-font-size-550: 4rem; } +:root { + --ibo-font-weight-100: 100; + --ibo-font-weight-200: 200; + --ibo-font-weight-300: 300; + --ibo-font-weight-400: 400; + --ibo-font-weight-500: 500; + --ibo-font-weight-600: 600; + --ibo-font-weight-700: 700; + --ibo-font-weight-800: 800; + --ibo-font-weight-900: 900; + --ibo-font-weight-950: 950; +} +:root { + --ibo-font-family-base: Raleway; + --ibo-font-family-monospace: monospace; + --ibo-font-family-code: monospace; +} /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -573,7 +601,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se /* NOTE: Those helpers allow to easily use an icon from libs. like FontAwesome or FontCombodo within a CSS rule (eg. ::after) */ /* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */ /******************************************************************************************************************************/ -.dataTables_scrollHead thead tr th.sorting::after, .ibo-breadcrumbs--item:not(:last-child)::after { +.dataTables_scrollHead thead tr th.sorting::after, .ibo-breadcrumbs--item:not(:last-child)::after, .ibo-sort-order::after { font-family: "Font Awesome 5 Free"; font-weight: 900; -webkit-font-smoothing: antialiased; @@ -600,46 +628,119 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se * * You should have received a copy of the GNU Affero General Public License */ -/* Fonts - Value Common weight name (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - 100 Thin (Hairline) - 200 Extra Light (Ultra Light) - 300 Light - 400 Normal (Regular) - 500 Medium - 600 Semi Bold (Demi Bold) - 700 Bold - 800 Extra Bold (Ultra Bold) - 900 Black (Heavy) - 950 Extra Black (Ultra Black) +/* + * SCSS helpers for font sizes (use in SCSS files) + * + * Use them to only redefine the font size instead of the global font defnition, this way if the container's font changes + * the other properties will be propagated (weight, style) + * + * Usage: @extend %ibo-font-size-XXX; */ -.ibo-font-ral-nor-50, .ibo-navigation-menu--menu-filter-hotkey, .ibo-activity-panel--tab-title-draft-indicator, .ibo-activity-entry--sub-information { +.ibo-font-size-50, .ibo-activity-panel--tab-title-draft-indicator, .ibo-activity-entry--sub-information { font-size: 0.83rem; - font-family: "Raleway", "sans-serif"; - font-weight: 400; - -webkit-font-feature-settings: "lnum"; - -moz-font-feature-settings: "lnum"; - font-feature-settings: "lnum"; } -.ibo-font-ral-nor-100, .ui-datepicker .ui-datepicker-title select, .ui-multiselect-checkboxes label, .ibo-breadcrumbs--item, .ibo-quick-create--drawer, .ibo-global-search--drawer, .ibo-navigation-menu--notifications--item--bottom-text, .ibo-field--fullscreen-toggler, .object-ref-icon.text_decoration, .object-ref-icon-disabled.text_decoration, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-organization, body, .dataModelSchema text, .tooltipD3 { +.ibo-font-size-100, .dataTables_paginate a.paginate_button, .ibo-quick-create--drawer, .ibo-global-search--drawer, .ibo-dashlet-header-dynamic--label, .ibo-datatable--toolbar, .ibo-field--fullscreen-toggler, .object-ref-icon.text_decoration, .object-ref-icon-disabled.text_decoration, .ibo-criterion-area, .ibo-dashboard-editor--properties table td .ibo-field, .ibo-dashboard--available-dashlets table td .ibo-field, .ibo-dashlet--properties table td .ibo-field { font-size: 1rem; - font-family: "Raleway", "sans-serif"; - font-weight: 400; - -webkit-font-feature-settings: "lnum"; - -moz-font-feature-settings: "lnum"; - font-feature-settings: "lnum"; } -.ibo-font-ral-nor-150, .ibo-breadcrumbs--item-icon, .ibo-popover-menu--item, .ui-menu-item, .ui-multiselect-checkboxes li, .ibo-input-select-icon--menu--item, .graph_config .toolkit_menu.graph > ul > li ul li, .ibo-navigation-menu--notifications--item--content, .ibo-title--subtitle, .ibo-field, .ibo-navigation-menu--menu-nodes ul li > a, .ibo-navigation-menu--menu-nodes ul li > span, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-notifications, .ibo-tab-container--tabs-list, .ibo-activity-entry--medallion, .ibo-datamodel-viewer--details .ibo-panel--subtitle, .ibo-global-search--result--title { +.ibo-font-size-150, .ibo-alert, .ibo-breadcrumbs--item-icon, .ibo-panel--subtitle, .ibo-panel--body, .ibo-dashlet-badge--action-create, .ibo-field, .sf_results_placeholder, .ibo-input-file-select--container .ibo-input-file-select .ibo-input-file-select--file-name, .ibo-tab-container--tabs-list, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title, .ibo-activity-entry--medallion { font-size: 1.17rem; - font-family: "Raleway", "sans-serif"; +} +.ibo-font-size-200, .dataTables_paginate a.paginate_button.previous, .dataTables_paginate a.paginate_button.next { + font-size: 1.33rem; +} +.ibo-font-size-250, .ibo-collapsible-section .ibo-collapsible-section--header .ibo-collapsible-section--title, .ibo-fieldset-legend, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title, legend, .ibo-top-bar--toolbar-dashboard-title, .ibo-tab-container--tab-container--label > span, .ibo-dashboard-editor--properties-title { + font-size: 1.5rem; +} +.ibo-font-size-300, .ibo-title--for-object-details, .ibo-tab--temporary-remote-content--button { + font-size: 1.67rem; +} +.ibo-font-size-350, .ibo-panel--title, .ibo-dashlet-header-static--body, .ibo-title-for-dashlet--title { + font-size: 1.83rem; +} +.ibo-font-size-400 { + font-size: 2rem; +} +.ibo-font-size-450 { + font-size: 2.5rem; +} +.ibo-font-size-500 { + font-size: 3rem; +} +.ibo-font-size-550 { + font-size: 4rem; +} +/* + * SCSS helpers for font weights (use in SCSS files) + * + * Use them to only redefine the font weight instead of the global font defnition, this way if the container's font changes + * the other properties will be propagated (size, style) + * + * Usage: @extend %ibo-font-weight-XXX; + */ +.ibo-font-weight-100 { + font-weight: 100; +} +.ibo-font-weight-200 { + font-weight: 200; +} +.ibo-font-weight-300 { + font-weight: 300; +} +.ibo-font-weight-400 { + font-weight: 400; +} +.ibo-font-weight-500 { + font-weight: 500; +} +.ibo-font-weight-600, .ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ui-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ui-multiselect-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-input-select-icon--menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .graph_config .toolkit_menu.graph > ul > li .ibo-navigation-menu--notifications-show-all-multiple ~ ul .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-field--label { + font-weight: 600; +} +.ibo-font-weight-700, ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title, .ibo-alert .ibo-alert--title, .ibo-tab-container--tab-header.ui-tabs-active, .ui-tabs-active.ibo-tab-container--extra-tabs-container { + font-weight: 700; +} +.ibo-font-weight-800 { + font-weight: 800; +} +.ibo-font-weight-900 { + font-weight: 900; +} +.ibo-font-weight-950 { + font-weight: 950; +} +/* + * SCSS helpers for global font definition (use in SCSS files) + * + * Use this only when you want to completely redefine the font, otherwise use the other helpers above + * + * Usage: @extend %ibo-font-XXX-YYY; + */ +.ibo-font-ral-nor-50, .ibo-navigation-menu--menu-filter-hotkey { + font-size: 0.83rem; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-nor-200, .ibo-collapsible-section .ibo-collapsible-section--body, .ibo-panel--body, .ibo-navigation-menu--menu-group { +.ibo-font-ral-nor-100, .ui-datepicker .ui-datepicker-title select, .ui-multiselect-checkboxes label, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-organization, .dataModelSchema text, .tooltipD3 { + font-size: 1rem; + font-family: "Raleway", "sans-serif", "system-ui"; + font-weight: 400; + -webkit-font-feature-settings: "lnum"; + -moz-font-feature-settings: "lnum"; + font-feature-settings: "lnum"; +} +.ibo-font-ral-nor-150, .ibo-title--subtitle, .ibo-navigation-menu--menu-nodes ul li > a, .ibo-navigation-menu--menu-nodes ul li > span, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-notifications, .ibo-datamodel-viewer--details .ibo-panel--subtitle, .ibo-global-search--result--title { + font-size: 1.17rem; + font-family: "Raleway", "sans-serif", "system-ui"; + font-weight: 400; + -webkit-font-feature-settings: "lnum"; + -moz-font-feature-settings: "lnum"; + font-feature-settings: "lnum"; +} +.ibo-font-ral-nor-200, .ibo-collapsible-section .ibo-collapsible-section--body, .ibo-navigation-menu--menu-group { font-size: 1.33rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -647,7 +748,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-250, .ui-dialog-title, .ibo-navigation-menu--user-info .ibo-navigation-menu--user-welcome-message, .ibo-welcome-popup--text { font-size: 1.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -655,15 +756,15 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-300, .ibo-quick-create--input.selectize-control.single .selectize-input > input, .ibo-quick-create--input.selectize-control.single .selectize-input.input-active > input, .ibo-quick-create--input.selectize-control.single .selectize-input > .item, .ibo-quick-create--input.selectize-control.single .selectize-input.input-active > .item, .ibo-global-search--input, .ibo-global-search--input:hover, .ibo-global-search--input:focus, .ibo-global-search--input:active { font-size: 1.67rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-nor-350, .ibo-title-for-dashlet--title, .ibo-navigation-menu--menu-nodes-title { +.ibo-font-ral-nor-350, .ibo-navigation-menu--menu-nodes-title { font-size: 1.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -671,7 +772,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-400, .ibo-quick-create--icon, .ibo-global-search--icon { font-size: 2rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -679,7 +780,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-450 { font-size: 2.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -687,7 +788,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-500 { font-size: 3rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -695,7 +796,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-nor-550 { font-size: 4rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -703,55 +804,55 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-med-50 { font-size: 0.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-100, .dataTables_paginate a.paginate_button, .dataTable th, .dataTable td, .ibo-dashlet-header-dynamic--label, .ibo-datatable--toolbar, .ibo-criterion-area, .ibo-field-badge, .ibo-dashboard-editor--properties table td .ibo-field, .ibo-dashboard--available-dashlets table td .ibo-field, .ibo-dashlet--properties table td .ibo-field { +.ibo-font-ral-med-100, .dataTable th, .dataTable td, .ibo-breadcrumbs--item, body { font-size: 1rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-150, .ui-multiselect-checkboxes li, .ibo-alert, .ibo-dashlet-badge--action-create, .sf_results_placeholder, .ibo-input-file-select--container .ibo-input-file-select .ibo-input-file-select--file-name, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title, .ibo-object-details .ibo-panel--subtitle { +.ibo-font-ral-med-150, .ui-multiselect-checkboxes li { font-size: 1.17rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-200, .dataTables_paginate a.paginate_button.previous, .dataTables_paginate a.paginate_button.next { +.ibo-font-ral-med-200 { font-size: 1.33rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-250, .ibo-collapsible-section .ibo-collapsible-section--header .ibo-collapsible-section--title, .ibo-panel--subtitle, .ibo-dashlet-badge--action-list, .ibo-fieldset-legend, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title, .ibo-top-bar--toolbar-dashboard-title, .ibo-tab-container--tab-container--label > span, .ibo-dashboard-editor--properties-title { +.ibo-font-ral-med-250, .ibo-dashlet-badge--action-list { font-size: 1.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-300, .ibo-title--for-object-details, .ibo-tab--temporary-remote-content--button { +.ibo-font-ral-med-300 { font-size: 1.67rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-med-350, .ibo-dashlet-header-static--body, .ibo-object-details .ibo-panel--title { +.ibo-font-ral-med-350 { font-size: 1.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -759,7 +860,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-med-400 { font-size: 2rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -767,7 +868,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-med-450 { font-size: 2.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -775,7 +876,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-med-500 { font-size: 3rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -783,7 +884,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-med-550 { font-size: 4rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 500; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -791,31 +892,31 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-50, .ibo-field--label > .ibo-has-description::after, .ibo-navigation-menu--menu-filter-clear { font-size: 0.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-bol-100, ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title, .ui-multiselect-header ul, .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label, .ibo-navigation-menu--menu-node-counter, #tooltipD3_top { +.ibo-font-ral-bol-100, .ui-multiselect-header ul, .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label, .ibo-navigation-menu--menu-node-counter, #tooltipD3_top { font-size: 1rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-bol-150, .ibo-alert .ibo-alert--title, .ibo-tab-container--tab-header.ui-tabs-active, .ui-tabs-active.ibo-tab-container--extra-tabs-container { +.ibo-font-ral-bol-150 { font-size: 1.17rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-bol-200, .ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ui-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ui-multiselect-menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-input-select-icon--menu .ibo-navigation-menu--notifications-show-all-multiple--counter, .graph_config .toolkit_menu.graph > ul > li .ibo-navigation-menu--notifications-show-all-multiple ~ ul .ibo-navigation-menu--notifications-show-all-multiple--counter, .ibo-dashlet-header-dynamic--count { +.ibo-font-ral-bol-200, .ibo-dashlet-header-dynamic--count { font-size: 1.33rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -823,7 +924,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-250, .ibo-dashboard--top-bar .ibo-dashboard--top-bar-title { font-size: 1.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -831,7 +932,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-300 { font-size: 1.67rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -839,7 +940,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-350 { font-size: 1.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -847,7 +948,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-400 { font-size: 2rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -855,7 +956,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-450, .ibo-dashlet-badge--action-list-count { font-size: 2.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -863,7 +964,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-500 { font-size: 3rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -871,7 +972,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-bol-550 { font-size: 4rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 700; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -879,7 +980,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-50 { font-size: 0.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -887,7 +988,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-100, .dataTables_paginate a.paginate_button.current, .dataTables_scrollHead thead tr th, .ibo-button, .ui-dialog .ui-button, .ui-datepicker-current, .ui-datepicker-close, .ibo-prop--apply > span, .ibo-prop--cancel > span, .sf_results_placeholder button, .sfc_fg_button, .ibo-dashboard-editor--delete-dashlet-icon, .ibo-block-csv--download-link { font-size: 1rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -895,7 +996,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-150 { font-size: 1.17rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -903,15 +1004,15 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-200 { font-size: 1.33rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } -.ibo-font-ral-sembol-250, .ibo-panel--title { +.ibo-font-ral-sembol-250 { font-size: 1.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -919,7 +1020,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-300, .ibo-welcome-popup--text > div > div:first-child { font-size: 1.67rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -927,7 +1028,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-350 { font-size: 1.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -935,7 +1036,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-400 { font-size: 2rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -943,7 +1044,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-450 { font-size: 2.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -951,7 +1052,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-500 { font-size: 3rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -959,7 +1060,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-sembol-550 { font-size: 4rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 600; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; @@ -967,7 +1068,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-50, .ibo-navigation-menu--menu-filter-hint { font-size: 0.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -976,7 +1077,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-100, .ibo-quick-create--compartment--placeholder-hint, .ibo-global-search--compartment--placeholder-hint, .ibo-navigation-menu--menu--placeholder-hint, .ibo-activity-panel--body--placeholder-hint { font-size: 1rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -985,7 +1086,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-150 { font-size: 1.17rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -994,7 +1095,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-200 { font-size: 1.33rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1003,7 +1104,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-250 { font-size: 1.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1012,7 +1113,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-300 { font-size: 1.67rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1021,7 +1122,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-350 { font-size: 1.83rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1030,7 +1131,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-400 { font-size: 2rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1039,7 +1140,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-450 { font-size: 2.5rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1048,7 +1149,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-500 { font-size: 3rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; @@ -1057,13 +1158,91 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se } .ibo-font-ral-ita-550 { font-size: 4rem; - font-family: "Raleway", "sans-serif"; + font-family: "Raleway", "sans-serif", "system-ui"; font-weight: 400; font-style: italic; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } +.ibo-font-code-50 { + font-size: 0.83rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-100 { + font-size: 1rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-150, .ibo-is-code, .ibo-queryoql { + font-size: 1.17rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-200 { + font-size: 1.33rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-250 { + font-size: 1.5rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-300 { + font-size: 1.67rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-350 { + font-size: 1.83rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-400 { + font-size: 2rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-450 { + font-size: 2.5rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-500 { + font-size: 3rem; + font-family: "monospace"; + font-weight: 400; +} +.ibo-font-code-550 { + font-size: 4rem; + font-family: "monospace"; + font-weight: 400; +} +/* + * CSS classes for font sizes (use in HTML markup, JS scripts) + * + * Use them to only redefine the font size instead of the global font defnition, this way if the container's font changes + * the other properties will be propagated (weight, style) + * + * Usage: .ibo-font-size-XXX; + */ +/* + * CSS classes for font weights (use in HTML markup, JS scripts) + * + * Use them to only redefine the font weight instead of the global font defnition, this way if the container's font changes + * the other properties will be propagated (size, style) + * + * Usage: .ibo-font-weight-XXX; + */ +/* + * CSS classes for global font wrappers (use in HTML markup, JS scripts) + * + * Use this only when you want to completely redefine the font, otherwise use the other helpers + * + * Usage: .ibo-font-XXX-YYY; + */ /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -1081,6 +1260,7 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se * * You should have received a copy of the GNU Affero General Public License */ +/* SCSS variables */ /**************/ /* Visibility */ /**************/ @@ -1093,6 +1273,14 @@ ul.cke_autocomplete_panel, .ibo-quick-create--input.selectize-control.single .se display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */ } +.ibo-is-transparent { + opacity: 0 !important; + /* Note: !important is necessary as it needs to overload any standard rules */ +} +.ibo-is-opaque { + opacity: 1 !important; + /* Note: !important is necessary as it needs to overload any standard rules */ +} /****************************/ /* Disposition / alignement */ /****************************/ @@ -1152,7 +1340,7 @@ body.ibo-has-fullscreen-descendant { /****************/ /* Text helpers */ /****************/ -.ibo-text-truncated-with-ellipsis, .ibo-button--label, .ibo-breadcrumbs--item-label, .ibo-quick-create--compartment-element, .ibo-quick-create--compartment-results--element > .option, .ibo-global-search--compartment-element, .ibo-dashlet-badge--action-list-label, .attribute-set .attribute-set-item, .selectize-control.multi .selectize-input.ibo-input-set .attribute-set-item, .selectize-control.multi .ibo-quick-create--input.selectize-control.single .ibo-input-set.selectize-input.input-active .attribute-set-item, .ibo-quick-create--input.selectize-control.single .selectize-control.multi .ibo-input-set.selectize-input.input-active .attribute-set-item, .ibo-navigation-menu--menu-group-title, .ibo-navigation-menu--menu-nodes-title, .ibo-tab-container--tab-toggler, .ibo-tab-container--extra-tabs-list-toggler, .ibo-tab-container--tab-toggler-label, .ibo-tab-container--extra-tab-toggler, .ibo-activity-panel--tab-title-text, .ibo-activity-panel--filter-option { +.ibo-text-truncated-with-ellipsis, .ui-dialog .ui-dialog-title, .ibo-button--label, .ibo-breadcrumbs--item-label, .ibo-quick-create--compartment-element, .ibo-quick-create--compartment-results--element > .option, .ibo-global-search--compartment-element, .ibo-dashlet-badge--action-list-label, .attribute-set .attribute-set-item, .selectize-control.multi .selectize-input.ibo-input-set .attribute-set-item, .selectize-control.multi .ibo-quick-create--input.selectize-control.single .ibo-input-set.selectize-input.input-active .attribute-set-item, .ibo-quick-create--input.selectize-control.single .selectize-control.multi .ibo-input-set.selectize-input.input-active .attribute-set-item, .ibo-navigation-menu--menu-group-title, .ibo-navigation-menu--menu-nodes-title, .ibo-tab-container--tab-toggler, .ibo-tab-container--extra-tabs-list-toggler, .ibo-tab-container--tab-toggler-label, .ibo-tab-container--extra-tab-toggler, .ibo-activity-panel--tab-title-text, .ibo-activity-panel--filter-option { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; @@ -1164,6 +1352,31 @@ body.ibo-has-fullscreen-descendant { .dataTables_paginate a.paginate_button:hover, .dataTables_paginate .ibo-quick-create--compartment-results--element > .paginate_button.option:hover, .ibo-dashlet-badge--action-list:hover, .ibo-dashlet-badge--action-list:active:hover, .ibo-field--fullscreen-toggler:hover, .search_form_handler a:hover, .search_form_handler .ibo-quick-create--compartment-results--element > .option:hover, .ibo-navigation-menu--menu-filter-clear:hover, .ibo-navigation-menu--menu-filter-hint-close:hover, .ibo-tab-container--tab-toggler:hover, .ibo-tab-container--extra-tabs-list-toggler:hover, .ibo-activity-panel--load-more-entries:hover, .dataTables_paginate a.paginate_button:active, .ibo-dashlet-badge--action-list:hover:active, .ibo-dashlet-badge--action-list:active, .ibo-field--fullscreen-toggler:active, .search_form_handler a:active, .ibo-navigation-menu--menu-filter-clear:active, .ibo-navigation-menu--menu-filter-hint-close:active, .ibo-tab-container--tab-toggler:active, .ibo-tab-container--extra-tabs-list-toggler:active, .ibo-activity-panel--load-more-entries:active { color: inherit; } +.ibo-is-code { + background-color: #f2f2f2; + padding: 1.25rem 1.5rem; +} +/***********************************************************************/ +/* Sticky headers */ +/* */ +/* Used as a trigger to make an element stick to another during scroll */ +/***********************************************************************/ +.ibo-sticky-sentinel { + position: absolute; + left: 0; + right: 0; + visibility: hidden; +} +.ibo-sticky-sentinel-top { + top: 0; + height: 0; + /* To be overloaded by use cases */ +} +.ibo-sticky-sentinel-bottom { + bottom: 0; + height: 0; + /* To be overloaded by use cases */ +} /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -1400,7 +1613,7 @@ article, aside, figure, footer, header, hgroup, section { display: block; } body, button, input, select, textarea { - font-family: "Raleway"; + font-family: "Raleway", "sans-serif", "system-ui"; } code, pre { -moz-osx-font-smoothing: auto; @@ -1408,9 +1621,9 @@ code, pre { font-family: monospace; } body { - color: #4a4a4a; - font-size: 1em; - font-weight: 400; + color: #212934; + font-size: 1rem; + font-weight: 500; line-height: 1.5; } a { @@ -9068,13 +9281,13 @@ a.has-text-danger-dark:hover, .ibo-quick-create--compartment-results--element > font-weight: 700 !important; } .is-family-primary { - font-family: "Raleway" !important; + font-family: "Raleway", "sans-serif", "system-ui" !important; } .is-family-secondary { - font-family: "Raleway" !important; + font-family: "Raleway", "sans-serif", "system-ui" !important; } .is-family-sans-serif { - font-family: "Raleway" !important; + font-family: "Raleway", "sans-serif", "system-ui" !important; } .is-family-monospace { font-family: monospace !important; @@ -10188,10 +10401,9 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title { .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 0; - white-space: nowrap; width: 100%; - overflow: hidden; - text-overflow: ellipsis; + padding-right: 24px; + /* To avoid title being visible behind the closing "X" */ } .ui-dialog .ui-dialog-titlebar-close { position: absolute; @@ -10374,6 +10586,8 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title { background-color: white; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12); + z-index: 11 !important; + padding: 0px 8px 5px 8px; } .ui-datepicker .ui-datepicker-header { position: relative; @@ -10413,8 +10627,21 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title { } .ui-datepicker td span, .ui-datepicker td a { display: block; - padding: 0.2em; - text-align: right; + padding: 0.2em 0; + text-align: center; + width: 23px; + border-radius: 100%; + color: #c05621; +} +.ui-datepicker td span.ui-state-active, .ui-datepicker td a.ui-state-active { + background-color: #c05621; + color: floralwhite; +} +.ui-datepicker td span.ui-state-highlight:not(.ui-state-active), .ui-datepicker td a.ui-state-highlight:not(.ui-state-active) { + background-color: #feebc8; +} +.ui-datepicker td span.ui-state-hover:not(.ui-state-active), .ui-datepicker td a.ui-state-hover:not(.ui-state-active) { + color: #7b341e; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; @@ -10589,6 +10816,15 @@ ul.cke_autocomplete_panel .ibo-vendors-ckeditor--autocomplete-item-title { width: auto; display: inline; } +.ui-helper-hidden-accessible { + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} .ui-multiselect { width: auto !important; padding-left: 0.7em !important; @@ -10730,7 +10966,6 @@ button.ui-multiselect > span { opacity: 1; } .dataTables_scrollHeadInner { - margin-bottom: 4px; border-bottom: 1px solid #ccd4db; } .dataTable th, .dataTable td { @@ -10744,6 +10979,27 @@ button.ui-multiselect > span { .dataTable tr:nth-child(even) { background-color: #f2f2f2; } +.dataTable tr.ibo-is-red { + background-color: #fce8e8; +} +.dataTable tr.ibo-is-danger, .dataTable tr.ibo-dashboard-editor--delete-dashlet-icon { + background-color: #fed7d7; +} +.dataTable tr.ibo-is-alert { + background-color: #fed7d7; +} +.dataTable tr.ibo-is-orange { + background-color: floralwhite; +} +.dataTable tr.ibo-is-warning { + background-color: #feebc8; +} +.dataTable tr.ibo-is-blue { + background-color: #bee3f8; +} +.dataTable tr.ibo-is-info { + background-color: #bee3f8; +} .treeview, .treeview ul { padding: 0; margin: 0; @@ -10802,6 +11058,20 @@ button.ui-multiselect > span { .filetree span.file { background: url('..//images/tv-file.gif') 0 0 no-repeat; } +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.blockUI.blockOverlay { + background-color: #f2f2f2; +} +.blockUI.blockMsg { + font-size: 6em; + text-align: center; + color: #6e7a8a; + border: none; + background-color: transparent; +} /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -12407,6 +12677,12 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga * You should have received a copy of the GNU Affero General Public License */ /* SCSS variables */ +/* - Base variables for the block */ +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--title, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--subtitle, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--icon, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--titles, .ibo-object-details.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--header-left { + transition: all 0.15s linear; +} +/* - Specific variables for the block */ +/* Should always be above the body */ .ibo-panel.ibo-is-primary > .ibo-panel--body::before, .sf_results_placeholder button.ibo-panel > .ibo-panel--body::before, .ibo-panel.ibo-block-csv--download-link > .ibo-panel--body::before { position: absolute; top: 0; @@ -12587,6 +12863,9 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .ibo-panel + .ibo-panel { margin-top: 24px; } +.ibo-panel { + position: relative; +} .ibo-panel.ibo-has-icon .ibo-panel--titles { padding-left: 16px; } @@ -12612,6 +12891,8 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga padding-left: calc(72px + 16px); } .ibo-panel--header { + position: relative; + z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; @@ -12653,9 +12934,10 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga } .ibo-panel--body { position: relative; + z-index: 1; padding: 32px 16px 24px 16px; background-color: white; - border: solid 1px #ccd4db; + border: 1px solid #ccd4db; border-radius: 5px; overflow: hidden; /* To force highlight color to be cropped by the border radius */ @@ -12673,6 +12955,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .ibo-panel--collapsible-toggler--closed { display: none; } +/* Collapsible rules */ .ibo-panel:not(.ibo-is-opened) .ibo-panel--collapsible-toggler--closed { display: block; } @@ -12682,6 +12965,50 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .ibo-panel:not(.ibo-is-opened) .ibo-panel--body { display: none; } +/* Sticky header rules */ +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header { + position: sticky; + top: 0; + /* Default, stick on the top of the panel. Custom integrations should be done in the "blocks-integrations" partials */ + border: transparent; + /* To avoid visual glitch during transition, otherwise the border looks black first */ + /* All transitions should have a specific duration except for the header's "top" property otherwise it feels laggy */ + /* - The header itself */ + transition-property: all, top, background-color; + transition-duration: 0.15s, 0s, 0s; + transition-timing-function: linear; + /* - Impacted descendants (we don't put "*" as it can get shaky otherwise) */ +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--title, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--subtitle, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--icon, .ibo-panel.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--titles { + /* Transition rules */ +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking { + padding-top: 4px; + padding-bottom: 4px; + background-color: #f8f9fa; + border: 1px solid #ccd4db; + align-items: center; +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking .ibo-panel--title { + font-size: 1.17rem; +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking .ibo-panel--subtitle { + font-size: 1rem; +} +.ibo-panel.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header { + /* Transition rules */ +} +.ibo-panel.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header.ibo-is-sticking .ibo-panel--icon { + bottom: -12px; + width: 48px; + height: 48px; + min-width: 48px; + min-height: 48px; + border: 1px solid #ccd4db; +} +.ibo-panel.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header.ibo-is-sticking .ibo-panel--titles { + padding-left: calc(48px + 16px); +} /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 @@ -12693,7 +13020,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga /* SCSS variables */ /* Rules */ .ibo-dashlet { - width: 100%; + width: calc(100% - 24px); margin: calc(24px / 2) calc(24px / 2); } .ibo-dashlet.dashlet-selected { @@ -12853,7 +13180,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga display: inline; } .ibo-input--label-left { - margin-leftt: 5px; + margin-left: 5px; display: inline; } .disabled { @@ -13003,13 +13330,10 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga position: relative; display: flex; } -.ibo-input-select-wrapper--with-buttons:hover .ibo-input-select--action-buttons { - opacity: 1; -} .ibo-input-select-container { display: flex; } -.ibo-input-select-wrapper--with-buttons::after { +.ibo-input-select-wrapper--with-buttons:not(.ibo-input-select-autocomplete-wrapper)::after { position: absolute; content: "\f0d7"; font-family: "Font Awesome 5 Free"; @@ -13029,7 +13353,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga display: flex; height: 28px; margin-top: 0px; - margin-right: 20px; + margin-right: 3px; font-size: 1rem; background-color: inherit; color: #404b5a; @@ -13038,14 +13362,13 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga bottom: 0; top: 0; right: 0; - opacity: 0; - -webkit-transition: all 2300ms ease-in-out; - -moz-transition: all 200ms ease-in-out; - -ms-transition: all 200ms ease-in-out; - -o-transition: all 200ms ease-in-out; - transition: all 200ms ease-in-out; +} +.ibo-input-select-wrapper .ibo-input-select--action-buttons, .ui_tpicker_hour_slider .ibo-input-select--action-buttons, .ui_tpicker_minute_slider .ibo-input-select--action-buttons, .ui_tpicker_second_slider .ibo-input-select--action-buttons { + margin-right: 20px; } .ibo-input-select--action-button { + display: flex; + align-items: center; padding-left: 6px; padding-right: 2px; float: right; @@ -13061,32 +13384,6 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga background-color: #f5fafd; color: #495c68; } -.ui-helper-hidden-accessible { - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -#stuff { - opacity: 0; - -webkit-transition: all 500ms ease-in-out; - -moz-transition: all 500ms ease-in-out; - -ms-transition: all 500ms ease-in-out; - -o-transition: all 500ms ease-in-out; - transition: all 500ms ease-in-out; -} -#hover { - width: 80px; - height: 20px; - background-color: green; - margin-bottom: 15px; -} -#hover:hover + #stuff { - opacity: 1; -} .ibo-input-select-icon > img { max-height: 100%; max-width: 100%; @@ -13160,6 +13457,10 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .selectize-control.multi .selectize-input.ibo-input-set, .selectize-control.multi .ibo-quick-create--input.selectize-control.single .ibo-input-set.selectize-input.input-active, .ibo-quick-create--input.selectize-control.single .selectize-control.multi .ibo-input-set.selectize-input.input-active { padding: 5px 8px; } +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ .ibo-input-text { min-height: 12rem; padding: 10px 12px; @@ -13221,7 +13522,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga } /* Rules */ .ibo-pill { - max-width: 120px; + max-width: 240px; margin: 4px 8px; padding: 6px 10px; border-radius: 3px; @@ -13319,16 +13620,6 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .ibo-datatable-panel > .ibo-panel--body { padding: 32px 0px 24px; } -.ibo-datatable-panel { - /* Above the table */ -} -.ibo-datatable-panel:first-child { - margin-bottom: 48px; - /* below the table */ -} -.ibo-datatable-panel:not(:first-child) { - margin-top: 48px; -} .ibo-datatable--selection-validation-buttons-toolbar { clear: both; margin-top: 10px; @@ -13341,6 +13632,21 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga margin: 0; padding: 0px 4px; } +.ibo-sort-order::after { + color: #dd6c20; +} +.ibo-sort-order.ibo-is-descending::after { + content: '\f0dd'; +} +.ibo-sort-order.ibo-is-ascending::after { + content: '\f0de'; +} +.ibo-sort-order.ibo-is-none::after { + content: '\f0dc'; +} +.itop-fieldsorter > .selected { + background-color: #bee3f8; +} /*! * copyright Copyright (C) 2010-2021 Combodo SARL * license http://opensource.org/licenses/AGPL-3.0 @@ -13349,10 +13655,10 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga * copyright Copyright (C) 2010-2021 Combodo SARL * license http://opensource.org/licenses/AGPL-3.0 */ -.ibo-fieldset ~ .ibo-fieldset:not(.ibo-column) { +.ibo-fieldset ~ .ibo-fieldset:not(.ibo-column), fieldset ~ .ibo-fieldset:not(.ibo-column), .ibo-fieldset ~ fieldset:not(.ibo-column) { margin-top: 48px; } -.ibo-fieldset-legend, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title { +.ibo-fieldset-legend, .ibo-dashboard-editor--properties-subtitle, .ibo-dashboard--available-dashlet--title, .ibo-dashlet--properties--title, legend { width: 100%; margin-bottom: 16px; padding-bottom: 4px; @@ -13364,11 +13670,23 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga */ /* SCSS variables */ /* SCSS rules */ +.ibo-field { + /* Avoid value to overflow from its container with very long strings (typically URLs) */ + /* Note: Some types of attribute must be excluding as it can alter their rendering */ +} +.ibo-field:not([data-attribute-type="AttributeBlob"]):not([data-attribute-type="AttributeFile"]):not([data-attribute-type="AttributeImage"]) { + /* We need the rule to apply for the class and all its descendants */ +} +.ibo-field:not([data-attribute-type="AttributeBlob"]):not([data-attribute-type="AttributeFile"]):not([data-attribute-type="AttributeImage"]) .ibo-field--value * { + word-break: break-word; + white-space: pre-wrap; +} .ibo-field ~ .ibo-field { margin-top: 16px; } +/* Large field = Label on top, value below */ .ibo-field-large { - display: inherit; + display: block; } .ibo-field-large .ibo-field--label { position: relative; @@ -13378,7 +13696,33 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga align-items: center; max-width: initial; width: 100%; + /* For custom fields (eg. request templates) only */ } +.ibo-field-large .ibo-field-small .ibo-field--label { + display: table-cell; + vertical-align: top; + padding-right: 10px; + min-width: 100px; + max-width: 145px; + width: 30%; + /* Fullscreen mode */ +} +.ibo-field-large.ibo-is-fullscreen { + background-color: white; +} +.ibo-field-large.ibo-is-fullscreen .ibo-field--label { + position: fixed; + width: 100%; + min-width: initial; + max-width: initial; + padding: 4px 8px; + background-color: #f8f9fa; + border-bottom: 1px solid #ccd4db; +} +.ibo-field-large.ibo-is-fullscreen .ibo-field--value { + padding: 36px 8px 4px 8px; +} +/* Small field = Label on the left, value on the right */ .ibo-field-small { display: table; width: 100%; @@ -13388,6 +13732,15 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga vertical-align: top; padding-right: 10px; } +.ibo-field--fullscreen-toggler { + width: 20px; + height: 20px; + border-radius: 5px; + cursor: pointer; +} +.ibo-field--fullscreen-toggler:hover { + background-color: #f2f2f2; +} .ibo-field--label { min-width: 100px; max-width: 145px; @@ -13400,24 +13753,10 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga cursor: pointer; color: #929fb1; } -.ibo-field--fullscreen-toggler { - width: 20px; - height: 20px; - border-radius: 5px; - cursor: pointer; -} -.ibo-field--fullscreen-toggler:hover { - background-color: #f2f2f2; -} .ibo-field--value { display: table; width: 100%; color: #6e7a8a; - /* Avoid value to overflow from its container with very long strings (typically URLs) */ -} -.ibo-field--value * { - word-break: break-word; - white-space: pre-wrap; /* Hack to force a table to fit its container without overflow (see N°2127) */ /* Note that along with with, we now display a "expand" icon on large fields so we can have a better view of its content */ } @@ -13432,6 +13771,25 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga } .ibo-field--comments > input[type="checkbox"] { margin-left: 5px; + float: right; +} +.ibo-field--comments > .multi_values, .ibo-field--comments > .mono_value { + float: right; +} +/********************************************************/ +/* Shameful zone, CSS classes not following conventions */ +/* To be reworked */ +/********************************************************/ +.mailto, .tel { + white-space: nowrap; +} +.mailto .text_decoration, .tel .text_decoration { + margin-right: 0.5rem; + font-size: 0.9em; + /* Mind the "em" instead of "rem" as we want the decoration to be size relatively to the text itself, not the page */ +} +.object-ref-icon.text_decoration, .object-ref-icon-disabled.text_decoration { + margin-right: 0.5rem; } .multi_values, .mono_value { display: inline-block; @@ -13449,31 +13807,6 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .multi_values { background-color: #c33; } -/* Fullscreen mode */ -.ibo-field-large.ibo-is-fullscreen { - background-color: white; -} -.ibo-field-large.ibo-is-fullscreen .ibo-field--label { - position: fixed; - width: 100%; - min-width: initial; - max-width: initial; - padding: 4px 8px; - background-color: #f8f9fa; - border-bottom: 1px solid #ccd4db; -} -.ibo-field-large.ibo-is-fullscreen .ibo-field--value { - padding: 36px 8px 4px 8px; -} -.mailto, .tel { - white-space: nowrap; -} -.mailto .text_decoration, .tel .text_decoration { - margin-right: 0.5rem; -} -.object-ref-icon.text_decoration, .object-ref-icon-disabled.text_decoration { - margin-right: 0.5rem; -} /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 @@ -13528,6 +13861,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ +/* Minus 2 because the criteria expands between the search form panel and the results area */ /* IMPORTANT: All the code below do NOT follow the coding convention and has NOT been refactored to the UIBlock system */ .search_box { box-sizing: border-box; @@ -14119,6 +14453,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga margin-right: 0.5em; } .ibo-search-form-panel { + z-index: 3; margin-bottom: 8px; } .ibo-search-form-panel .ibo-panel--body { @@ -14131,6 +14466,44 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga .ibo-search-form { padding-top: 24px; } +.sfm_tg_title { + display: none; +} +.ibo-criterion-group:empty ~ .sf_more_criterion .sfm_tg_title { + display: unset; +} +.sf_results_area { + z-index: 1; +} +/***********************/ +/* Sticky header rules */ +/***********************/ +.ibo-search-form-panel .ibo-panel--body.ibo-is-sticking { + position: fixed; + border-radius: 0; + border-bottom-color: transparent; +} +.sf_results_area .ibo-datatable-panel.ibo-is-sticking .ibo-panel--header { + z-index: 0; +} +.sf_results_area .ibo-datatable-panel.ibo-is-sticking .ibo-datatable--toolbar { + position: fixed; + z-index: 2; + padding-bottom: 4px; + background-color: white; + border-left: 1px solid #ccd4db; + border-right: 1px solid #ccd4db; +} +.sf_results_area .ibo-datatable-panel.ibo-is-sticking .dataTables_scrollHead { + position: fixed !important; + /* Important is required as the property is already set in the style attribute by the JS lib */ + z-index: 2; + background-color: white; + border-left: 1px solid #ccd4db !important; + /* Unfortunately the !important is necessary to overload the lib style attribute */ + border-right: 1px solid #ccd4db !important; + /* Unfortunately the !important is necessary to overload the lib style attribute */ +} /*! * copyright Copyright (C) 2010-2021 Combodo SARL * license http://opensource.org/licenses/AGPL-3.0 @@ -14141,6 +14514,9 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga border-radius: 3px; display: inline; } +.ibo-field-badge--decoration + .ibo-field-badge--label { + margin-left: 0.5rem; +} /*! * copyright Copyright (C) 2010-2021 Combodo SARL * license http://opensource.org/licenses/AGPL-3.0 @@ -14818,17 +15194,10 @@ input:checked + .slider:before { #ibo-center-container.ibo-center-container--with-side-content { display: flex; align-items: stretch; - overflow: hidden; - /* Only the content areas should scroll */ -} -#ibo-center-container.ibo-center-container--with-side-content > * { - height: 100%; } #ibo-center-container.ibo-center-container--with-side-content #ibo-main-content { flex-grow: 1; /* To occupy maximum width, side content will handle its width */ - overflow-x: auto; - /* To avoid main content to be too wide when the blocks within it have no width constraints. This way it will occupy only the remaining space left by the side part. */ } .ibo-v-spacer { padding-top: 1em; @@ -14837,12 +15206,6 @@ input:checked + .slider:before { background-color: white; border-left: 1px solid #ccd4db; } -.ibo-code { - font-family: monospace; - font-size: 1.17rem; - background-color: #f2f2f2; - padding: 1.25rem 1.5rem; -} /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 @@ -14998,6 +15361,12 @@ input:checked + .slider:before { flex-shrink: 1; padding: 0 16px; flex-basis: 10%; + display: flex; + flex-direction: column; +} +.ibo-mini-column > .ibo-button, .ui-dialog .ibo-mini-column > .ui-button, .ibo-mini-column > .ui-datepicker-current, .ibo-mini-column > .ui-datepicker-close, .ibo-prop--apply.ibo-mini-column > span, .ibo-prop--cancel.ibo-mini-column > span, .sf_results_placeholder .ibo-mini-column > button, .ibo-mini-column > .sfc_fg_button, .ibo-mini-column > .ibo-dashboard-editor--delete-dashlet-icon, .ibo-mini-column > .ibo-block-csv--download-link { + margin-left: 0; + margin-right: 0; } .ibo-mini-column:not(:last-child) { margin-bottom: 48px; @@ -15076,6 +15445,7 @@ input:checked + .slider:before { width: calc(100% + (2 * 24px)); margin: calc(-1 * 24px / 2) calc(-1 * 24px / 2); /* Because of the margin all around the dashlets, we need to compensate it */ + min-width: 0; /* Compensate negative margin on inner borders to simulate egal dashlets spacing between columns */ } .ibo-dashboard--grid-column:not(:last-child) { @@ -15300,6 +15670,27 @@ input:checked + .ibo-dashboard--slider:after { border-radius: 100%; background-color: #404b5a; } +/* Sticky header rules */ +.ibo-object-details.ibo-has-sticky-header > .ibo-panel--header { + /* All transitions should have a specific duration except for the header's "top" property otherwise it feels laggy */ + /* - Impacted descendants (we don't put "*" as it can get shaky otherwise) */ +} +.ibo-object-details.ibo-has-sticky-header > .ibo-panel--header .ibo-panel--header-left { + /* Transition rules */ +} +.ibo-object-details.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking .ibo-object-details--object-class { + display: none; + /* Make space by hiding unnecessary info */ +} +.ibo-object-details.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header { + /* Transition rules */ +} +.ibo-object-details.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header.ibo-is-sticking .ibo-panel--header-left { + padding-left: 48px; +} +.ibo-object-details.ibo-has-sticky-header.ibo-has-icon.ibo-has-medallion-icon > .ibo-panel--header.ibo-is-sticking .ibo-panel--titles { + padding-left: 32px; +} /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 @@ -15953,98 +16344,77 @@ a.ibo-notification-entry--short-description { display: block; } /*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 + * Copyright (C) 2013-2021 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License */ /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ -.ibo-dashboard--grid-row .ibo-dashlet-header-static { - margin-top: 12px; -} -.ibo-dashboard--grid-row:first-child .ibo-dashlet:first-child .ibo-dashlet-header-static { - margin-top: 0; -} -/*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 - */ -.ibo-details .ibo-prop--apply > span, .ibo-details .ibo-prop--cancel > span { - display: unset; -} -.ibo-details .ibo-prop--apply { - display: table-column; -} -.ibo-details { - margin-top: 5px; -} -/*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 - */ -.ibo-activity-panel--tab-entry-form .ibo-caselog-entry-form { - padding-bottom: 14px; - border-bottom: 1px solid #aebecd; -} -/*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 - */ -.ibo-panel > .ibo-panel--body > .ibo-tab-container { - margin-top: -24px; - margin-left: -16px; - margin-right: -16px; - height: 80vh; -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tab-container-list { - height: 100%; - overflow-y: auto; - flex-grow: 1; -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical { - display: flex; - flex-direction: row; -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list { - padding-top: 50px; - flex-direction: column; - height: auto; - padding-left: unset; - margin-right: unset; - min-width: calc(32px + 90px + 32px); -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container { - height: 50px; - width: 100%; - justify-content: left; -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container > .ibo-tab-container--tab-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--extra-tabs-list-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container > .ibo-tab-container--extra-tabs-list-toggler { - width: 100%; - justify-content: left; -} -.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tab-container { - flex-grow: 1; - margin-left: unset; -} -.ibo-panel .ibo-panel--body .ibo-datatable { +.ibo-block-csv textarea { width: 100%; + min-height: 10em; + margin-top: 10px; } +/*! + * Copyright (C) 2013-2021 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ -.ibo-object-details.ibo-has-medallion-icon > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list { - padding-left: calc(32px + 96px + 32px - 24px); +.ibo-table-preview { + margin-top: 20px; + overflow-x: auto; } -.ibo-blocklist--empty-text, .ibo-blocklist--create-new { - text-align: center; +.ibo-table-preview th { + padding: 5px; + border-width: 1px 1px 0; + border-style: groove groove none; + background: #f2f2f2; } -.ibo-blocklist--medallion > .ibo-medallion-icon--image { - margin: 0 auto; +.ibo-table-preview td { + padding-right: 5px; + padding-left: 5px; + border-width: 0 1px; + border-style: none groove; } -.ibo-blocklist--medallion > .ibo-medallion-icon--description { - flex-grow: 1; +.ibo-table-preview tr:last-child td { + border-bottom-width: 1px; + border-bottom-style: groove; +} +.ibo-preview-header { + margin-bottom: 5px; +} +#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf { + margin-top: 24px; } /*! * @copyright Copyright (C) 2010-2021 Combodo SARL @@ -16100,8 +16470,8 @@ body { } #ibo-top-bar, #ibo-main-content { /* Align both elements content for a slicker touch */ - padding-left: 48px; - padding-right: 48px; + padding-left: 36px; + padding-right: 36px; } #ibo-top-container { z-index: 20; @@ -16116,10 +16486,17 @@ body { z-index: 10; flex-grow: 1; /* To occupy all height available */ + overflow: hidden; + /* Only the content areas should scroll */ +} +#ibo-center-container > * { + height: 100%; } #ibo-main-content { - padding-top: 24px; - padding-bottom: 24px; + padding-top: 16px; + padding-bottom: 16px; + overflow: auto; + /* For scroll to happen in the main content instead of the center content */ } #ibo-main-content > .ibo-panel { margin-left: auto; @@ -16517,42 +16894,183 @@ tr.row_added td { bottom: 10px; } /*! - * Copyright (C) 2013-2021 Combodo SARL - * - * This file is part of iTop. - * - * iTop is free software; you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * iTop is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 */ /*! * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ -.ibo-block-csv textarea { +.ibo-dashboard--grid-row .ibo-dashlet-header-static { + margin-top: 12px; +} +.ibo-dashboard--grid-row:first-child .ibo-dashlet:first-child .ibo-dashlet-header-static { + margin-top: 0; +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ibo-details .ibo-prop--apply > span, .ibo-details .ibo-prop--cancel > span { + display: unset; +} +.ibo-details .ibo-prop--apply { + display: table-column; +} +.ibo-details { + margin-top: 5px; +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ibo-activity-panel--tab-entry-form .ibo-caselog-entry-form { + padding-bottom: 14px; + border-bottom: 1px solid #aebecd; +} +.ibo-panel .ibo-panel--body .ibo-datatable { width: 100%; - min-height: 10em; - margin-top: 10px; } -.ibo-block-indirect-links--edit--dialog { - overflow: hidden !important; +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ibo-panel > .ibo-panel--body > .ibo-tab-container { + margin-top: -24px; + margin-left: -16px; + margin-right: -16px; + margin-bottom: -24px; } -.ibo-block-indirect-links--edit--dialog > form { - overflow: auto; +.ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tab-container-list { + height: 100%; + overflow-y: auto; + flex-grow: 1; } -.ibo-block-indirect-links--edit--dialog .ibo-datatable--selection-validation-buttons-toolbar { - position: absolute; - bottom: 5px; +.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical { + display: flex; + flex-direction: row; +} +.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list { + padding-top: 50px; + flex-direction: column; + height: auto; + padding-left: unset; + margin-right: unset; + min-width: calc(32px + 90px + 32px); +} +.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container { + height: 50px; + width: 100%; + justify-content: left; +} +.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container > .ibo-tab-container--tab-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--extra-tabs-list-toggler, .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--extra-tabs-container > .ibo-tab-container--extra-tabs-list-toggler { + width: 100%; + justify-content: left; +} +.ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tab-container { + flex-grow: 1; + margin-left: unset; + /* Sticky header rules */ +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tabs-list.ibo-is-sticking { + position: fixed; + z-index: 10; +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list.ibo-is-sticking { + padding-left: 0; +} +.ibo-panel.ibo-has-sticky-header > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list.ibo-is-sticking .ibo-tab-container--tab-toggler, .ibo-panel.ibo-has-sticky-header > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list.ibo-is-sticking .ibo-tab-container--extra-tabs-list-toggler, .ibo-panel.ibo-has-sticky-header > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list.ibo-is-sticking .ibo-tab-container--extra-tabs-list-toggler { + font-size: 1rem; +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +#ibo-main-content { + /* + * Careful: Here we get all the "descendants" instead of the first closest panel in the main content, which could cause some glitches in the future. + * For now we decided to stay that way for the following reasons, if that changes in the future keep the repercussions on descendants panels in mind. + * - We don't have nested sticky panels (yet) + * - We don't want to hardcode the main content's markup selector if not necessary as it could change in the future (and is already different in read-only vs edition) + * - Unlike in JS, there no easy way to find the closest descendant + */ +} +#ibo-main-content .ibo-panel.ibo-has-sticky-header { + /* Stickable header rules */ +} +#ibo-main-content .ibo-panel.ibo-has-sticky-header > .ibo-sticky-sentinel-top { + top: -16px; + height: 16px; +} +#ibo-main-content .ibo-panel.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking { + top: -16px; +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ui-dialog-content { + /* + * Careful: Here we get all the "descendants" instead of the first closest panel in the modal, which could cause some glitches in the future. + * For now we decided to stay that way for the following reasons, if that changes in the future keep the repercussions on descendants panels in mind. + * - We don't have nested sticky panels (yet) + * - We don't want to hardcode the modal's markup selector if not necessary as it could change in the future (and is already different in read-only vs edition) + * - Unlike in JS, there no easy way to find the closest descendant + */ +} +.ui-dialog-content .ibo-panel.ibo-has-sticky-header { + /* Sticky header rules */ +} +.ui-dialog-content .ibo-panel.ibo-has-sticky-header > .ibo-sticky-sentinel-top { + top: -16px; + height: 16px; +} +.ui-dialog-content .ibo-panel.ibo-has-sticky-header > .ibo-panel--header.ibo-is-sticking { + top: -16px; +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ibo-object-details.ibo-has-medallion-icon > .ibo-panel--body > .ibo-tab-container:not(.ibo-is-vertical) > .ibo-tab-container--tabs-list { + padding-left: calc(32px + 96px + 32px - 24px); +} +.ibo-blocklist--empty-text, .ibo-blocklist--create-new { + text-align: center; +} +.ibo-blocklist--medallion { + flex-direction: column; + align-items: center; +} +.ibo-blocklist--medallion > .ibo-medallion-icon--image { + margin: 0 auto; +} +.ibo-blocklist--medallion > .ibo-medallion-icon--image ~ .ibo-medallion-icon--description { + margin-top: 12px; +} +.ibo-blocklist--medallion > .ibo-medallion-icon--description { + flex-grow: 1; + text-align: center; +} +.ibo-datatable .attribute-set .attribute-set-item { + display: inline; + margin: 0; + padding: 0 6px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12); +} +/*! + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ +.ui-dialog .blockUI.blockOverlay { background-color: white; } +.ibo-datatable .blockUI.blockOverlay { + background-color: white; +} +.ibo-datatable .blockUI.blockMsg { + font-size: 2em; +} /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -16570,36 +17088,6 @@ tr.row_added td { * * You should have received a copy of the GNU Affero General Public License */ -/*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 - */ -.ibo-table-preview { - margin-top: 20px; - overflow-x: auto; -} -.ibo-table-preview th { - padding: 5px; - border-width: 1px 1px 0; - border-style: groove groove none; - background: #f2f2f2; -} -.ibo-table-preview td { - padding-right: 5px; - padding-left: 5px; - border-width: 0 1px; - border-style: none groove; -} -.ibo-table-preview tr:last-child td { - border-bottom-width: 1px; - border-bottom-style: groove; -} -.ibo-preview-header { - margin-bottom: 5px; -} -#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf { - margin-top: 24px; -} /*! * Copyright (C) 2013-2021 Combodo SARL * @@ -16655,8 +17143,10 @@ tr.row_added td { } /* Theme */ body { - background-color: #eee; - color: #1A202C; + display: flex; + flex-direction: column; + background-color: #f8f9fa; + color: #212934; margin: 0; padding: 0; font-size: 10pt; @@ -16668,7 +17158,7 @@ h1 { font-size: 16pt; } h2 { - color: #1A202C; + color: #212934; font-size: 14pt; font-weight: normal; } @@ -16836,7 +17326,6 @@ fieldset > legend { max-height: 48px; } .module-selection-body { - height: 28em; overflow: auto; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; background-color: #F7FAFC; @@ -16857,6 +17346,10 @@ body { width: 800px; margin-left: auto; margin-right: auto; + height: 100%; + display: flex; + flex-direction: column; + padding: 20px 0; } #ibo_setup_container pre { white-space: pre-wrap; @@ -16866,11 +17359,11 @@ body { } #ibo_setup_container .ibo-setup--header { background-color: #fff; - padding: 20px; - border: 3px solid #CBD2D9; - margin-top: 50px; + padding: 0 20px; + border: 3px solid #ccd4db; height: 80px; border-bottom: none; + border-radius: 3px 3px 0 0; } #ibo_setup_container .ibo-setup--header img { border: 0; @@ -16883,8 +17376,30 @@ body { #ibo_setup_container .ibo-setup--body { background-color: #fff; padding: 20px; - border: 3px solid #CBD2D9; + border: 3px solid #ccd4db; border-top: none; + flex-grow: 1; + overflow: auto; + border-radius: 0 0 3px 3px; +} +#ibo_setup_container .ibo-setup--body .ibo-setup--wizard { + width: 100%; + display: flex; + flex-direction: column; + height: 100%; +} +#ibo_setup_container .ibo-setup--body .ibo-setup--wizard .ibo-setup--wizard--content { + overflow: auto; +} +#ibo_setup_container .ibo-setup--body .ibo-setup--wizard .ibo-setup--wizard--buttons-container { + margin-top: auto; +} +#ibo_setup_container .ibo-setup--body .ibo-setup--wizard .ibo-setup--wizard--buttons-container tr { + display: flex; + justify-content: flex-end; +} +#ibo_setup_container .ibo-setup--body .ibo-setup--wizard .ibo-setup--wizard--buttons-container button { + margin-left: 8px; } #ibo_setup_container .ibo-setup--body .itop-setup--message { margin-top: 16px; @@ -16904,10 +17419,10 @@ body { #ibo_setup_container .ibo-setup--body .ibo-setup--upgrade-info { margin-top: 5px; } -#ibo_setup_container .ibo-setup--body .ibo-fieldset { +#ibo_setup_container .ibo-setup--body .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset { margin-top: 25px; } -#ibo_setup_container .ibo-setup--body .ibo-fieldset ~ .ibo-fieldset { +#ibo_setup_container .ibo-setup--body .ibo-fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ .ibo-fieldset, #ibo_setup_container .ibo-setup--body .ibo-fieldset ~ fieldset, #ibo_setup_container .ibo-setup--body fieldset ~ fieldset { margin-top: 25px; } #ibo_setup_container .ibo-setup--body .ibo-field { diff --git a/css/setup.scss b/css/setup.scss index ead62a1a7..7b21f4c13 100644 --- a/css/setup.scss +++ b/css/setup.scss @@ -22,8 +22,8 @@ $approot-relative: '../' !default; @import "backoffice/main"; -$content-border-color: #CBD2D9 !default; -$default-font-color: #1A202C !default; +$content-border-color: $ibo-color-grey-400 !default; +$default-font-color: $ibo-color-grey-900 !default; $legend-border-color: #718096 !default; $link-default-color: #1c94c4 !default; $link-hover-color: #EA7D1E !default; @@ -89,7 +89,9 @@ $progress-bar-error-bg-color: #F56565 !default; /* Theme */ body { - background-color: #eee; + display: flex; + flex-direction: column; + background-color: $ibo-color-grey-100; color: $default-font-color; margin: 0; padding: 0; @@ -307,7 +309,6 @@ fieldset { } .module-selection-body { - height: 28em; overflow: auto; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06) !important; background-color: #F7FAFC; @@ -340,6 +341,11 @@ body { width: 800px; margin-left: auto; margin-right: auto; + + height: 100%; + display: flex; + flex-direction: column; + padding: 20px 0; pre { white-space: pre-wrap; @@ -355,11 +361,11 @@ body { .ibo-setup--header { background-color: #fff; - padding: 20px; + padding: 0 20px; border: 3px solid $content-border-color; - margin-top: 50px; height: 80px; border-bottom: none; + border-radius: $ibo-border-radius-300 $ibo-border-radius-300 0 0; img { border: 0; @@ -377,7 +383,29 @@ body { padding: 20px; border: 3px solid $content-border-color; border-top: none; + flex-grow: 1; + overflow: auto; + border-radius: 0 0 $ibo-border-radius-300 $ibo-border-radius-300; + .ibo-setup--wizard{ + width: 100%; + display: flex; + flex-direction: column; + height: 100%; + .ibo-setup--wizard--content{ + overflow: auto; + } + .ibo-setup--wizard--buttons-container{ + margin-top: auto; + tr{ + display: flex; + justify-content: flex-end; + } + button { + margin-left: 8px; + } + } + } .itop-setup--message { margin-top: 16px; } diff --git a/setup/wizardcontroller.class.inc.php b/setup/wizardcontroller.class.inc.php index 8038ddfaa..eeb3dea54 100644 --- a/setup/wizardcontroller.class.inc.php +++ b/setup/wizardcontroller.class.inc.php @@ -190,8 +190,10 @@ class WizardController $oPage->add_linked_script('../setup/setup.js'); $oPage->add_script("function CanMoveForward()\n{\n".$oStep->JSCanMoveForward()."\n}\n"); $oPage->add_script("function CanMoveBackward()\n{\n".$oStep->JSCanMoveBackward()."\n}\n"); - $oPage->add('
'); + $oPage->add(''); + $oPage->add('
'); $oStep->Display($oPage); + $oPage->add('
'); // Add the back / next buttons and the hidden form // to store the parameters @@ -203,14 +205,14 @@ class WizardController } $oPage->add(''); - $oPage->add(''); + $oPage->add('
'); if ((count($this->aSteps) > 0) && ($oStep->CanMoveBackward())) { - $oPage->add(''); + $oPage->add(''); } if ($oStep->CanMoveForward()) { - $oPage->add(''); + $oPage->add(''); } $oPage->add('
'); $oPage->add("
"); @@ -432,7 +434,7 @@ abstract class WizardStep */ public function GetNextButtonLabel() { - return ' Next >> '; + return 'Next'; } /** diff --git a/setup/wizardsteps.class.inc.php b/setup/wizardsteps.class.inc.php index 8c50b8b27..ca5179940 100644 --- a/setup/wizardsteps.class.inc.php +++ b/setup/wizardsteps.class.inc.php @@ -64,7 +64,7 @@ class WizStepWelcome extends WizardStep */ public function GetNextButtonLabel() { - return ' Continue >> '; + return 'Continue'; } public function GetPossibleSteps() @@ -123,11 +123,11 @@ EOF break; } } - $sStyle = 'style="display:none;max-height:196px;overflow:auto;"'; - $sToggleButtons = ''; + $sStyle = 'style="display:none;overflow:auto;"'; + $sToggleButtons = ''; if (count($aErrors)> 0) { - $sStyle = 'style="max-height:196px;overflow:auto;"'; + $sStyle = 'overflow:auto;"'; $sTitle = count($aErrors).' Error(s), '.count($aWarnings).' Warning(s).'; $sH2Class = 'text-error'; } @@ -2155,7 +2155,7 @@ class WizStepSummary extends WizardStep */ public function GetNextButtonLabel() { - return ' Install ! '; + return 'Install'; } public function CanMoveForward() @@ -2180,7 +2180,6 @@ class WizStepSummary extends WizardStep $oPage->add_style( <<