diff --git a/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss b/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss index 789639c4b992..0b363028ace7 100755 --- a/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss +++ b/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss @@ -82,13 +82,15 @@ $il-standard-filter-add-input-popover-list-button-width: 100%; } .btn-bulky { - border: none; background-color: $il-main-darker-bg; } } .btn-bulky { min-height: 0; + } + + .btn-bulky:not(:focus-visible) { border: none; } diff --git a/templates/default/delos.css b/templates/default/delos.css index 2a6c1de818ff..80e719a5a828 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -2667,22 +2667,6 @@ ol.breadcrumb > li + li:before { .il-drilldown .menulevel, .navbar-form > a { display: inline-flex; vertical-align: middle; - align-items: center; - justify-content: center; - cursor: pointer; - user-select: none; - touch-action: manipulation; - font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; - text-align: center; - line-height: inherit; - font-size: inherit; - font-weight: 400; - text-decoration: none; - min-height: 28px; - min-width: 28px; - font-size: 0.75rem; - padding: 3px 6px; - gap: 6px; } .btn + .btn, .c-input-tree_select > input[type=button] + .btn, .c-drilldown .c-drilldown__menulevel--trigger + .btn, .c-input-tree_select > .btn + input[type=button], .c-input-tree_select > input[type=button] + input[type=button], .c-drilldown .c-input-tree_select > .c-drilldown__menulevel--trigger + input[type=button], .c-drilldown .btn + .c-drilldown__menulevel--trigger, .c-drilldown .c-input-tree_select > input[type=button] + .c-drilldown__menulevel--trigger, .c-drilldown .c-drilldown__menulevel--trigger + .c-drilldown__menulevel--trigger, .il-link.link-bulky + .btn, .c-input-tree_select > .il-link.link-bulky + input[type=button], .c-drilldown .il-link.link-bulky + .c-drilldown__menulevel--trigger, .il-drilldown .menulevel + .btn, @@ -2700,11 +2684,33 @@ ol.breadcrumb > li + li:before { .il-drilldown .navbar-form > .menulevel + a, .navbar-form > a + a { margin-left: 3px; } +.btn, .c-input-tree_select > input[type=button], .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, +.il-drilldown .menulevel, .navbar-form > a { + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + touch-action: manipulation; + font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; + text-align: center; + line-height: inherit; + font-size: inherit; + font-weight: 400; + text-decoration: none; +} .btn:focus-visible, .c-input-tree_select > input[type=button]:focus-visible, .c-drilldown .c-drilldown__menulevel--trigger:focus-visible, .il-link.link-bulky:focus-visible, .il-drilldown .menulevel:focus-visible, .navbar-form > a:focus-visible { outline: 3px solid #0078D7; box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px #FFFFFF; } +.btn, .c-input-tree_select > input[type=button], .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, +.il-drilldown .menulevel, .navbar-form > a { + min-height: 28px; + min-width: 28px; + font-size: 0.75rem; + padding: 3px 6px; + gap: 6px; +} .btn .glyph, .c-input-tree_select > input[type=button] .glyph, .c-drilldown .c-drilldown__menulevel--trigger .glyph, .il-link.link-bulky .glyph, .il-drilldown .menulevel .glyph, .navbar-form > a .glyph, .btn .glyph .glyphicon, @@ -2862,28 +2868,6 @@ input.btn, .c-input-tree_select > input[type=button], .c-drilldown input.c-drill .ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { display: inline-flex; vertical-align: middle; - align-items: center; - justify-content: center; - cursor: pointer; - user-select: none; - touch-action: manipulation; - font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; - text-align: center; - line-height: inherit; - font-size: inherit; - font-weight: 400; - text-decoration: none; - min-height: 2.2rem; - min-width: 2.2rem; - font-size: 0.75rem; - padding: 3px 6px; - gap: 6px; - background-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); - color: #4c6586; - border-width: 1px; - border-style: solid; - border-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); - border-radius: 10px; } .btn-ctrl + .btn-ctrl, .il-viewcontrol-sortation > .btn-default + .btn-ctrl, .il-viewcontrol-sortation > .btn-link + .btn-ctrl, .il-viewcontrol-section > .btn-default + .btn-ctrl, @@ -3742,6 +3726,41 @@ input.btn, .c-input-tree_select > input[type=button], .c-drilldown input.c-drill .ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a + a { margin-left: 3px; } +.btn-ctrl, .il-viewcontrol-sortation > .btn-default, .il-viewcontrol-sortation > .btn-link, +.il-viewcontrol-section > .btn-default, +.il-viewcontrol-section > .btn-link, +.il-viewcontrol-section .btn-group > .btn-default, +.il-viewcontrol-section .btn-group > .btn-link, +.il-viewcontrol-pagination__sectioncontrol > .btn-default, +.il-viewcontrol-pagination__sectioncontrol > .btn-link, +.il-viewcontrol-pagination__num-of-items > .btn-default, +.il-viewcontrol-pagination__num-of-items > .btn-link, +.il-viewcontrol-pagination > .btn-default, +.il-viewcontrol-pagination > .btn-link, +.il-viewcontrol-pagination .dropdown > .btn-default, +.il-viewcontrol-pagination .dropdown > .btn-link, +.il-viewcontrol-pagination .last > .btn-default, +.il-viewcontrol-pagination .last > .btn-link, +.il-viewcontrol-mode > .btn-default, +.il-viewcontrol-mode > .btn-link, .il-viewcontrol-sortation > .btn-default.btn, +.il-viewcontrol-sortation .dropdown > .btn-default.btn, +.il-table-presentation-viewcontrols .l-bar__space-keeper .l-bar__group .l-bar__element > .btn-default.btn, .c-sequence__navigation--back > .btn-default, .c-sequence__navigation--back.navbar-form > a, +.c-sequence__navigation--next > .btn-default, +.c-sequence__navigation--next.navbar-form > a, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link, .ilTableNav > table > tbody > tr > td > .btn-group.c-input-tree_select > input[type=button], +.ilTableNav > table > tbody > tr > td > .dropdown > .btn-default, +.ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + touch-action: manipulation; + font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; + text-align: center; + line-height: inherit; + font-size: inherit; + font-weight: 400; + text-decoration: none; +} .btn-ctrl:focus-visible, .il-viewcontrol-sortation > .btn-default:focus-visible, .il-viewcontrol-sortation > .btn-link:focus-visible, .il-viewcontrol-section > .btn-default:focus-visible, .il-viewcontrol-section > .btn-link:focus-visible, @@ -3768,6 +3787,41 @@ input.btn, .c-input-tree_select > input[type=button], .c-drilldown input.c-drill outline: 3px solid #0078D7; box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px #FFFFFF; } +.btn-ctrl, .il-viewcontrol-sortation > .btn-default, .il-viewcontrol-sortation > .btn-link, +.il-viewcontrol-section > .btn-default, +.il-viewcontrol-section > .btn-link, +.il-viewcontrol-section .btn-group > .btn-default, +.il-viewcontrol-section .btn-group > .btn-link, +.il-viewcontrol-pagination__sectioncontrol > .btn-default, +.il-viewcontrol-pagination__sectioncontrol > .btn-link, +.il-viewcontrol-pagination__num-of-items > .btn-default, +.il-viewcontrol-pagination__num-of-items > .btn-link, +.il-viewcontrol-pagination > .btn-default, +.il-viewcontrol-pagination > .btn-link, +.il-viewcontrol-pagination .dropdown > .btn-default, +.il-viewcontrol-pagination .dropdown > .btn-link, +.il-viewcontrol-pagination .last > .btn-default, +.il-viewcontrol-pagination .last > .btn-link, +.il-viewcontrol-mode > .btn-default, +.il-viewcontrol-mode > .btn-link, .il-viewcontrol-sortation > .btn-default.btn, +.il-viewcontrol-sortation .dropdown > .btn-default.btn, +.il-table-presentation-viewcontrols .l-bar__space-keeper .l-bar__group .l-bar__element > .btn-default.btn, .c-sequence__navigation--back > .btn-default, .c-sequence__navigation--back.navbar-form > a, +.c-sequence__navigation--next > .btn-default, +.c-sequence__navigation--next.navbar-form > a, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link, .ilTableNav > table > tbody > tr > td > .btn-group.c-input-tree_select > input[type=button], +.ilTableNav > table > tbody > tr > td > .dropdown > .btn-default, +.ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { + min-height: 2.2rem; + min-width: 2.2rem; + font-size: 0.75rem; + padding: 3px 6px; + gap: 6px; + background-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); + color: #4c6586; + border-width: 1px; + border-style: solid; + border-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); + border-radius: 10px; +} .btn-ctrl:hover, .il-viewcontrol-sortation > .btn-default:hover, .il-viewcontrol-sortation > .btn-link:hover, .il-viewcontrol-section > .btn-default:hover, .il-viewcontrol-section > .btn-link:hover, @@ -4198,14 +4252,16 @@ button > .glyphicon { background-image: url("../images/media/loader.svg"); background-color: #b0b0b0; border-color: #b0b0b0; - background-repeat: no-repeat; - background-position: right center; - padding-right: 18px; } .il-btn-with-loading-animation:hover { background-color: #b0b0b0; border-color: #b0b0b0; } +.il-btn-with-loading-animation { + background-repeat: no-repeat; + background-position: right center; + padding-right: 18px; +} .minimize, .close, .c-input-tree_select .c-input-tree_select__selection button[type=remove] { font-size: 1.3125rem; @@ -4235,17 +4291,6 @@ button .minimize, button .close, button .c-input-tree_select .c-input-tree_selec white-space: nowrap; padding: 1px 3px; margin: 3px 6px 3px 0; - min-height: 28px; - min-width: 28px; - font-size: 0.75rem; - padding: 3px 6px; - gap: 6px; - background-color: #4c6586; - color: white; - border-width: 1px; - border-style: solid; - border-color: #4c6586; - border-radius: 3px; } .btn-tag.btn-tag-inactive { cursor: default !important; @@ -4275,6 +4320,19 @@ button .minimize, button .close, button .c-input-tree_select .c-input-tree_selec background-color: #75deea; border-color: rgb(132.9, 209.3615384615, 218.1); } +.btn-tag { + min-height: 28px; + min-width: 28px; + font-size: 0.75rem; + padding: 3px 6px; + gap: 6px; + background-color: #4c6586; + color: white; + border-width: 1px; + border-style: solid; + border-color: #4c6586; + border-radius: 3px; +} .btn-tag:hover { text-decoration: none; background-color: rgb(57.5428571429, 76.4714285714, 101.4571428571); @@ -4398,7 +4456,6 @@ button .minimize, button .close, button .c-input-tree_select .c-input-tree_selec border: 1px solid #dddddd; border-radius: 0; box-shadow: none; - /* see bug #24947 */ } .il-card .il-card-image-container { width: 100%; @@ -4412,6 +4469,9 @@ button .minimize, button .close, button .c-input-tree_select .c-input-tree_selec max-height: 100%; margin: auto; } +.il-card { + /* see bug #24947 */ +} .il-card a { overflow: hidden; } @@ -4855,9 +4915,6 @@ hr.il-divider-with-label { .c-entity.__actions .dropdown { height: max-content; } -.c-entity.__secondary-identifier { - grid-area: second-id; -} .c-entity.__secondary-identifier.--string, .c-entity.__secondary-identifier.--shy, .c-entity.__secondary-identifier.--shylink { width: 10rem; } @@ -4867,6 +4924,9 @@ hr.il-divider-with-label { .c-entity.__secondary-identifier.--image { width: 15rem; } +.c-entity.__secondary-identifier { + grid-area: second-id; +} .c-entity.__primary-identifier { grid-area: prim-id; font-weight: 600; @@ -5075,8 +5135,6 @@ hr.il-divider-with-label { border-style: solid; border-color: rgb(84.5, 122.9090909091, 46.0909090909); border-radius: 10px; - min-width: 50%; - width: max-content; } .c-launcher .btn-bulky:hover { text-decoration: none; @@ -5115,6 +5173,10 @@ hr.il-divider-with-label { border-color: rgb(84.5, 122.9090909091, 46.0909090909); color: #000; } +.c-launcher .btn-bulky { + min-width: 50%; + width: max-content; +} .c-launcher .btn-bulky[disabled] { cursor: not-allowed; } @@ -5285,14 +5347,14 @@ main { display: block; } +.il-layout-page-content:focus-visible { + outline: none; +} .il-layout-page-content { display: flex; flex-flow: column; overflow: auto; } -.il-layout-page-content:focus-visible { - outline: none; -} .il-layout-page-content #mainspacekeeper { flex-grow: 1; width: 100%; @@ -5611,16 +5673,16 @@ a[aria-disabled].il-link.link-bulky:hover { } /* common css for characteristic value listing */ -.il-listing-characteristic-value-row { - /* i tried .ilClearFloat, did not work as expected */ - border-top: solid #dddddd 1px; - padding: 12px 0; -} .il-listing-characteristic-value-row::after { display: block; clear: both; content: ""; } +.il-listing-characteristic-value-row { + /* i tried .ilClearFloat, did not work as expected */ + border-top: solid #dddddd 1px; + padding: 12px 0; +} .il-listing-characteristic-value-row:first-child { border-top: none; @@ -5846,6 +5908,12 @@ a[aria-disabled].il-link.link-bulky:hover { .il-maincontrols-slate.il-maincontrols-slate-notification .il-maincontrols-slate-notification-title { padding: 12px; } +.il-maincontrols-slate.il-maincontrols-slate-notification .il-maincontrols-slate-notification-title .btn-bulky .glyph :before { + content: " \e605"; + font-family: "il-icons"; + font-size: 1.0625rem; + margin-right: 10px; +} .il-maincontrols-slate.il-maincontrols-slate-notification .il-maincontrols-slate-notification-title .btn-bulky { margin: -12px; border: none; @@ -5855,12 +5923,6 @@ a[aria-disabled].il-link.link-bulky:hover { background-color: transparent; width: 50%; } -.il-maincontrols-slate.il-maincontrols-slate-notification .il-maincontrols-slate-notification-title .btn-bulky .glyph :before { - content: " \e605"; - font-family: "il-icons"; - font-size: 1.0625rem; - margin-right: 10px; -} .il-maincontrols-slate #il-tag-slate-container .btn-bulky .glyph :before, .il-maincontrols-slate #ilHelpPanel .btn-bulky .glyph :before { content: " \e605"; font-family: "il-icons"; @@ -6014,17 +6076,17 @@ a[aria-disabled].il-link.link-bulky:hover { .il-maincontrols-metabar .il-counter { font-size: 1.4375rem; } +.il-maincontrols-metabar > li > .btn.btn-bulky:focus-visible, .il-maincontrols-metabar > li > a.il-link.link-bulky:focus-visible { + outline: none; + border: 3px solid #0078D7; + box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF; +} .il-maincontrols-metabar > li > .btn.btn-bulky, .il-maincontrols-metabar > li > a.il-link.link-bulky { border: none; background-color: transparent; height: 60px; min-width: 60px; } -.il-maincontrols-metabar > li > .btn.btn-bulky:focus-visible, .il-maincontrols-metabar > li > a.il-link.link-bulky:focus-visible { - outline: none; - border: 3px solid #0078D7; - box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF; -} @media only screen and (max-width: 991px) { .il-maincontrols-metabar > li > .btn.btn-bulky, .il-maincontrols-metabar > li > a.il-link.link-bulky { height: 45px; @@ -6076,14 +6138,16 @@ a[aria-disabled].il-link.link-bulky:hover { background-color: #fafafa; position: absolute; max-width: 500px; +} +.il-metabar-slates .il-maincontrols-slate { + min-width: 500px; +} +.il-metabar-slates { max-height: 90vh; overflow-y: auto; right: 0; top: 60px; } -.il-metabar-slates .il-maincontrols-slate { - min-width: 500px; -} .il-metabar-slates .bulky-label { margin-top: auto; margin-bottom: auto; @@ -6193,20 +6257,6 @@ a[aria-disabled].il-link.link-bulky:hover { .il-mainbar-tools-button .btn-bulky .bulky-label, .il-mainbar-tools-button .il-link.link-bulky .bulky-label, .il-mainbar-tool-trigger-item .btn-bulky .bulky-label, -.il-mainbar-tool-trigger-item .il-link.link-bulky .bulky-label { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ - word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; -} -.il-mainbar-triggers .btn-bulky .bulky-label, -.il-mainbar-triggers .il-link.link-bulky .bulky-label, -.il-mainbar-tools-button .btn-bulky .bulky-label, -.il-mainbar-tools-button .il-link.link-bulky .bulky-label, -.il-mainbar-tool-trigger-item .btn-bulky .bulky-label, .il-mainbar-tool-trigger-item .il-link.link-bulky .bulky-label { position: relative; max-height: 3em; @@ -6228,6 +6278,14 @@ a[aria-disabled].il-link.link-bulky:hover { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.il-mainbar-triggers .btn-bulky .bulky-label, +.il-mainbar-triggers .il-link.link-bulky .bulky-label, +.il-mainbar-tools-button .btn-bulky .bulky-label, +.il-mainbar-tools-button .il-link.link-bulky .bulky-label, +.il-mainbar-tool-trigger-item .btn-bulky .bulky-label, +.il-mainbar-tool-trigger-item .il-link.link-bulky .bulky-label { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .il-mainbar-triggers .btn-bulky .bulky-label, .il-mainbar-triggers .il-link.link-bulky .bulky-label, @@ -6250,6 +6308,14 @@ a[aria-disabled].il-link.link-bulky:hover { display: none; } } +.il-mainbar-triggers .btn-bulky .bulky-label, +.il-mainbar-triggers .il-link.link-bulky .bulky-label, +.il-mainbar-tools-button .btn-bulky .bulky-label, +.il-mainbar-tools-button .il-link.link-bulky .bulky-label, +.il-mainbar-tool-trigger-item .btn-bulky .bulky-label, +.il-mainbar-tool-trigger-item .il-link.link-bulky .bulky-label { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .il-mainbar-triggers .btn-bulky .bulky-label, .il-mainbar-triggers .il-link.link-bulky .bulky-label, @@ -6272,6 +6338,18 @@ a[aria-disabled].il-link.link-bulky:hover { display: none; } } +.il-mainbar-triggers .btn-bulky .bulky-label, +.il-mainbar-triggers .il-link.link-bulky .bulky-label, +.il-mainbar-tools-button .btn-bulky .bulky-label, +.il-mainbar-tools-button .il-link.link-bulky .bulky-label, +.il-mainbar-tool-trigger-item .btn-bulky .bulky-label, +.il-mainbar-tool-trigger-item .il-link.link-bulky .bulky-label { + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} .il-mainbar-triggers .il-mainbar-entries { min-width: 100%; @@ -6455,12 +6533,15 @@ a[aria-disabled].il-link.link-bulky:hover { .il-mainbar-tools-entries .btn-bulky.engaged, .il-mainbar-tools-entries .btn-bulky.engaged, .il-mainbar-tools-entries .il-link.link-bulky.engaged { background-color: white; - color: #2c2c2c; } .il-mainbar-tools-entries .btn-bulky.engaged:not(:focus-visible), .il-mainbar-tools-entries .btn-bulky.engaged:not(:focus-visible), .il-mainbar-tools-entries .il-link.link-bulky.engaged:not(:focus-visible) { border: 0; } +.il-mainbar-tools-entries .btn-bulky.engaged, .il-mainbar-tools-entries .btn-bulky.engaged, +.il-mainbar-tools-entries .il-link.link-bulky.engaged { + color: #2c2c2c; +} .il-mainbar-tools-entries .btn-bulky.engaged .icon, .il-mainbar-tools-entries .btn-bulky.engaged .icon, .il-mainbar-tools-entries .il-link.link-bulky.engaged .icon { filter: invert(60%); @@ -6536,12 +6617,12 @@ a[aria-disabled].il-link.link-bulky:hover { position: relative; } -.il-mainbar-slates > .il-maincontrols-slate.engaged > .il-maincontrols-slate-content { - height: 0px; -} .il-mainbar-slates > .il-maincontrols-slate.engaged > .il-maincontrols-slate-content > :first-child { z-index: 1; } +.il-mainbar-slates > .il-maincontrols-slate.engaged > .il-maincontrols-slate-content { + height: 0px; +} .il-mainbar-slates > .il-maincontrols-slate.engaged > .il-maincontrols-slate-content .panel-secondary { margin-bottom: 0; border: none; @@ -6967,11 +7048,6 @@ code { .c-mode-info__close a:hover { color: white; } -.c-mode-info__label { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ - flex-grow: 1; -} .c-mode-info__label { position: relative; max-height: 1.5em; @@ -6988,6 +7064,9 @@ code { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.c-mode-info__label { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .c-mode-info__label { overflow: hidden; @@ -7000,6 +7079,9 @@ code { display: none; } } +.c-mode-info__label { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .c-mode-info__label { overflow: hidden; @@ -7012,6 +7094,9 @@ code { display: none; } } +.c-mode-info__label { + flex-grow: 1; +} @media only screen and (max-width: 991px) { .c-mode-info__mobile-padding { height: 45px; @@ -7040,16 +7125,6 @@ code { /** nagtive or positive contrast color for text and glyph **/ /** contrast threshold for contrast color **/ /** three color variants for neutral, important, breaking Head Infos **/ -.il-system-info { - line-height: 20px; - padding-top: 6px; - padding-bottom: 6px; - height: 32px; - display: flex; - flex-wrap: nowrap; - flex-direction: row; - justify-content: flex-start; -} .il-system-info.il-system-info-neutral { -webkit-box-shadow: inset 0px -10px 4px -10px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0px -10px 4px -10px rgba(0, 0, 0, 0.25); @@ -7101,6 +7176,16 @@ code { .il-system-info.il-system-info-breaking a.glyph { color: white; } +.il-system-info { + line-height: 20px; + padding-top: 6px; + padding-bottom: 6px; + height: 32px; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + justify-content: flex-start; +} .il-system-info.full { height: auto; overflow: visible; @@ -7154,31 +7239,15 @@ code { Print View ************************************************************** */ -@media print { - .il-system-infos { - display: none; - } -} -.btn, .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, -.il-drilldown .menulevel, .navbar-form > a { - display: inline-flex; - vertical-align: middle; - align-items: center; - justify-content: center; - cursor: pointer; - user-select: none; - touch-action: manipulation; - font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; - text-align: center; - line-height: inherit; - font-size: inherit; - font-weight: 400; - text-decoration: none; - min-height: 28px; - min-width: 28px; - font-size: 0.75rem; - padding: 3px 6px; - gap: 6px; +@media print { + .il-system-infos { + display: none; + } +} +.btn, .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, +.il-drilldown .menulevel, .navbar-form > a { + display: inline-flex; + vertical-align: middle; } .btn + .btn, .c-drilldown .c-drilldown__menulevel--trigger + .btn, .c-drilldown .btn + .c-drilldown__menulevel--trigger, .c-drilldown .c-drilldown__menulevel--trigger + .c-drilldown__menulevel--trigger, .il-link.link-bulky + .btn, .c-drilldown .il-link.link-bulky + .c-drilldown__menulevel--trigger, @@ -7196,12 +7265,36 @@ code { margin-left: 3px; } +.btn, .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, +.il-drilldown .menulevel, .navbar-form > a { + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + touch-action: manipulation; + font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; + text-align: center; + line-height: inherit; + font-size: inherit; + font-weight: 400; + text-decoration: none; +} + .btn:focus-visible, .c-drilldown .c-drilldown__menulevel--trigger:focus-visible, .il-link.link-bulky:focus-visible, .il-drilldown .menulevel:focus-visible, .navbar-form > a:focus-visible { outline: 3px solid #0078D7; box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px #FFFFFF; } +.btn, .c-drilldown .c-drilldown__menulevel--trigger, .il-link.link-bulky, +.il-drilldown .menulevel, .navbar-form > a { + min-height: 28px; + min-width: 28px; + font-size: 0.75rem; + padding: 3px 6px; + gap: 6px; +} + .btn .glyph, .c-drilldown .c-drilldown__menulevel--trigger .glyph, .il-link.link-bulky .glyph, .il-drilldown .menulevel .glyph, .navbar-form > a .glyph, .btn .glyph .glyphicon, @@ -7350,28 +7443,6 @@ input.btn, .c-drilldown input.c-drilldown__menulevel--trigger, input.il-link.lin .ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { display: inline-flex; vertical-align: middle; - align-items: center; - justify-content: center; - cursor: pointer; - user-select: none; - touch-action: manipulation; - font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; - text-align: center; - line-height: inherit; - font-size: inherit; - font-weight: 400; - text-decoration: none; - min-height: 2.2rem; - min-width: 2.2rem; - font-size: 0.75rem; - padding: 3px 6px; - gap: 6px; - background-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); - color: #4c6586; - border-width: 1px; - border-style: solid; - border-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); - border-radius: 10px; } .btn-ctrl + .btn-ctrl, .c-sequence__navigation--back > .btn-default + .btn-ctrl, .c-sequence__navigation--back.navbar-form > a + .btn-ctrl, @@ -7402,6 +7473,24 @@ input.btn, .c-drilldown input.c-drilldown__menulevel--trigger, input.il-link.lin margin-left: 3px; } +.btn-ctrl, .c-sequence__navigation--back > .btn-default, .c-sequence__navigation--back.navbar-form > a, +.c-sequence__navigation--next > .btn-default, +.c-sequence__navigation--next.navbar-form > a, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link, +.ilTableNav > table > tbody > tr > td > .dropdown > .btn-default, +.ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + touch-action: manipulation; + font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif; + text-align: center; + line-height: inherit; + font-size: inherit; + font-weight: 400; + text-decoration: none; +} + .btn-ctrl:focus-visible, .c-sequence__navigation--back > .btn-default:focus-visible, .c-sequence__navigation--back.navbar-form > a:focus-visible, .c-sequence__navigation--next > .btn-default:focus-visible, .c-sequence__navigation--next.navbar-form > a:focus-visible, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link:focus-visible, @@ -7411,6 +7500,24 @@ input.btn, .c-drilldown input.c-drilldown__menulevel--trigger, input.il-link.lin box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px #FFFFFF; } +.btn-ctrl, .c-sequence__navigation--back > .btn-default, .c-sequence__navigation--back.navbar-form > a, +.c-sequence__navigation--next > .btn-default, +.c-sequence__navigation--next.navbar-form > a, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link, +.ilTableNav > table > tbody > tr > td > .dropdown > .btn-default, +.ilTableNav > table > tbody > tr > td > .dropdown.navbar-form > a { + min-height: 2.2rem; + min-width: 2.2rem; + font-size: 0.75rem; + padding: 3px 6px; + gap: 6px; + background-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); + color: #4c6586; + border-width: 1px; + border-style: solid; + border-color: rgb(226.2857142857, 231.6428571429, 238.7142857143); + border-radius: 10px; +} + .btn-ctrl:hover, .c-sequence__navigation--back > .btn-default:hover, .c-sequence__navigation--back.navbar-form > a:hover, .c-sequence__navigation--next > .btn-default:hover, .c-sequence__navigation--next.navbar-form > a:hover, .ilTableNav > table > tbody > tr > td > .btn-group > .btn-link:hover, @@ -7681,9 +7788,6 @@ button > .glyphicon { background-image: url("../images/media/loader.svg"); background-color: #b0b0b0; border-color: #b0b0b0; - background-repeat: no-repeat; - background-position: right center; - padding-right: 18px; } .il-btn-with-loading-animation:hover { @@ -7691,6 +7795,12 @@ button > .glyphicon { border-color: #b0b0b0; } +.il-btn-with-loading-animation { + background-repeat: no-repeat; + background-position: right center; + padding-right: 18px; +} + .minimize, .close { font-size: 1.3125rem; font-weight: 600; @@ -8085,11 +8195,12 @@ button .minimize, button .close { padding: 6px; } .il-filter .input-group .btn-bulky { - border: none; background-color: #f0f0f0; } .il-filter .btn-bulky { min-height: 0; +} +.il-filter .btn-bulky:not(:focus-visible) { border: none; } .il-filter .leftaddon { @@ -8657,10 +8768,6 @@ ul.c-input--has-mustache-variables__definitions > li { .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input { display: grid; grid-template-columns: 25% 75%; - grid-template-rows: repeat(3, max-content) 1fr; - transition-property: grid-template-rows; - transition-duration: 0.3s; - transition-timing-function: ease-in-out; } .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field, .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field { @@ -8671,13 +8778,16 @@ ul.c-input--has-mustache-variables__definitions > li { .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field > .c-input, .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field > .c-input { margin: 0; - padding: 12px 15px; - background-color: #f9f9f9; } .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field > .c-input:first-child, .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field > .c-input:first-child { margin-top: 6px; } +.c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field > .c-input, +.c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field > .c-input { + padding: 12px 15px; + background-color: #f9f9f9; +} .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field > .c-input:hover, .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field > .c-input:has(:focus-visible), .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field > .c-input:hover, .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field > .c-input:has(:focus-visible) { @@ -8699,6 +8809,13 @@ ul.c-input--has-mustache-variables__definitions > li { .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__error-msg { grid-area: error; } +.c-form .c-input[data-il-ui-component=optional-group-field-input], +.c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input { + grid-template-rows: repeat(3, max-content) 1fr; + transition-property: grid-template-rows; + transition-duration: 0.3s; + transition-timing-function: ease-in-out; +} .c-form .c-input[data-il-ui-component=optional-group-field-input] > .c-input__field, .c-form .c-input[data-il-ui-component=switchable-group-field-input] > .c-input__field > .c-input > .c-input__field { transition-property: display; @@ -9037,6 +9154,11 @@ ul.c-input--has-mustache-variables__definitions > li { width: calc(100% - 50.4px); float: left; } +.c-input-tree_select .c-drilldown .c-input-node__select:focus-visible { + outline: none; + border: 3px solid #0078D7; + box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF; +} .c-input-tree_select .c-drilldown .c-input-node__select { min-height: 50.4px; min-width: 50.4px; @@ -9049,15 +9171,6 @@ ul.c-input--has-mustache-variables__definitions > li { border-style: solid; border-color: transparent; border-radius: 0px; - margin-bottom: 2px; - margin-left: 0; - display: none; - float: left; -} -.c-input-tree_select .c-drilldown .c-input-node__select:focus-visible { - outline: none; - border: 3px solid #0078D7; - box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF; } .c-input-tree_select .c-drilldown .c-input-node__select:hover { text-decoration: none; @@ -9094,6 +9207,12 @@ ul.c-input--has-mustache-variables__definitions > li { border-color: transparent; color: #000; } +.c-input-tree_select .c-drilldown .c-input-node__select { + margin-bottom: 2px; + margin-left: 0; + display: none; + float: left; +} .c-input-tree_select .c-drilldown .c-input-node__select:focus-visible { z-index: 100; } @@ -9234,11 +9353,13 @@ ul.c-input--has-mustache-variables__definitions > li { } .c-form .c-input__error-msg { margin-top: 3px; - margin-bottom: 0; } .c-form .c-input__error-msg:first-child { margin-top: 0; } +.c-form .c-input__error-msg { + margin-bottom: 0; +} .c-form .c-input[data-il-ui-component]:not([data-il-ui-component=section-field-input]):has(> .c-input__error-msg) { border-inline-start: 6px solid rgb(255, 214.54, 214.54); padding-left: 9px; @@ -11911,12 +12032,14 @@ div.alert ul { text-color: white; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - min-height: 20px; - font-size: 0.75rem; } .il-table-presentation-row .il-table-presentation-row-expanded .il-table-presentation-details .il-table-presentation-fields blockquote { border-color: #dddddd; } +.il-table-presentation-row .il-table-presentation-row-expanded .il-table-presentation-details .il-table-presentation-fields { + min-height: 20px; + font-size: 0.75rem; +} .il-table-presentation-row .il-table-presentation-row-expanded .il-table-presentation-details .il-table-presentation-fields .il-item-property-name { color: rgb(111.25, 111.25, 111.25); } @@ -14480,15 +14603,15 @@ ul.il-book-obj-selection li { width: 100%; } +.chatroom-centered-checkboxes label { + margin: 0 5px 0 0; +} .chatroom-centered-checkboxes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } -.chatroom-centered-checkboxes label { - margin: 0 5px 0 0; -} @media only screen and (max-width: 991px) { #message-controls .msg-control { @@ -15443,11 +15566,13 @@ div#right_bottom_area iframe { } #il-mcst-img-gallery .modal-content { min-height: 100%; - background-color: black; } #il-mcst-img-gallery .modal-content img { margin: 30px auto 0 auto; } +#il-mcst-img-gallery .modal-content { + background-color: black; +} #il-mcst-img-gallery .modal-title { color: white; } @@ -15632,13 +15757,13 @@ div.ilPrtfToc { margin-top: 40px; } -body.ilPrtfPdfBody { - margin: 0; -} body.ilPrtfPdfBody > div.ilInvisibleBorder { padding: 0; padding-left: 40px; } +body.ilPrtfPdfBody { + margin: 0; +} body.ilPrtfPdfBody h1.ilc_PrintPageTitle { border-bottom: 1px solid #000000; @@ -17385,16 +17510,18 @@ table.calmini { table.calmini tr, table.calmini td, table.calmini th { border: none; padding: 5px 3px; - text-align: center; - vertical-align: middle; - color: #161616; - background-color: transparent; } @media only screen and (max-width: 991px) { table.calmini tr, table.calmini td, table.calmini th { padding: 5px 1px; } } +table.calmini tr, table.calmini td, table.calmini th { + text-align: center; + vertical-align: middle; + color: #161616; + background-color: transparent; +} table.calmini tr { background-color: white; } @@ -19160,16 +19287,6 @@ fieldset[disabled] .checkbox label { .form-horizontal { margin-bottom: 15px; background: white; - /* - // Reset spacing and right align labels, but scope to media queries so that - // labels on narrow viewports stack the same as a default form example. - @media (min-width: $screen-sm-min) { - .control-label { - text-align: right; - margin-bottom: 0; - padding-top: ($il-padding-base-vertical + 1); // Default padding plus a border - } - } */ } .form-horizontal .form-group { margin: 0px; @@ -19223,6 +19340,18 @@ fieldset[disabled] .checkbox label { .form-horizontal .control-label > .asterisk { padding-left: 3px; } +.form-horizontal { + /* + // Reset spacing and right align labels, but scope to media queries so that + // labels on narrow viewports stack the same as a default form example. + @media (min-width: $screen-sm-min) { + .control-label { + text-align: right; + margin-bottom: 0; + padding-top: ($il-padding-base-vertical + 1); // Default padding plus a border + } + } */ +} .ilFormHeader { padding: 12px 0 12px 15px; @@ -19501,18 +19630,18 @@ a#ilHelpClose { } } -.ilStartupSection { - padding-top: 20px; - width: fit-content; - margin-left: auto; - margin-right: auto; -} .ilStartupSection .control-label { width: 33.33%; } .ilStartupSection .control-label + div { width: 66.67%; } +.ilStartupSection { + padding-top: 20px; + width: fit-content; + margin-left: auto; + margin-right: auto; +} @media only screen and (max-width: 991px) { .ilStartupSection { padding-top: 15px; @@ -19543,8 +19672,6 @@ ul.ilStartupSectionLoginLinks li { div.ilStartupSection form.form-horizontal { border: 1px solid #dddddd; border-radius: 3px; - text-align: left; - width: 40em; } div.ilStartupSection form.form-horizontal .ilFormHeader { padding: 9px 15px; @@ -19553,6 +19680,10 @@ div.ilStartupSection form.form-horizontal .ilFormHeader { div.ilStartupSection form.form-horizontal .form-group { margin: 9px 0; } +div.ilStartupSection form.form-horizontal { + text-align: left; + width: 40em; +} @media only screen and (max-width: 991px) { div.ilStartupSection form.form-horizontal { width: auto; @@ -22492,10 +22623,6 @@ div.ilFrame { vertical-align: middle; } -.il-multi-line-cap-2 { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ -} .il-multi-line-cap-2 { position: relative; max-height: 3em; @@ -22512,6 +22639,9 @@ div.ilFrame { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.il-multi-line-cap-2 { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .il-multi-line-cap-2 { overflow: hidden; @@ -22524,6 +22654,9 @@ div.ilFrame { display: none; } } +.il-multi-line-cap-2 { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .il-multi-line-cap-2 { overflow: hidden; @@ -22537,10 +22670,6 @@ div.ilFrame { } } -.il-multi-line-cap-3 { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ -} .il-multi-line-cap-3 { position: relative; max-height: 4.5em; @@ -22557,6 +22686,9 @@ div.ilFrame { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.il-multi-line-cap-3 { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .il-multi-line-cap-3 { overflow: hidden; @@ -22569,6 +22701,9 @@ div.ilFrame { display: none; } } +.il-multi-line-cap-3 { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .il-multi-line-cap-3 { overflow: hidden; @@ -22582,10 +22717,6 @@ div.ilFrame { } } -.il-multi-line-cap-5 { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ -} .il-multi-line-cap-5 { position: relative; max-height: 7.5em; @@ -22602,6 +22733,9 @@ div.ilFrame { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.il-multi-line-cap-5 { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .il-multi-line-cap-5 { overflow: hidden; @@ -22614,6 +22748,9 @@ div.ilFrame { display: none; } } +.il-multi-line-cap-5 { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .il-multi-line-cap-5 { overflow: hidden; @@ -22627,10 +22764,6 @@ div.ilFrame { } } -.il-multi-line-cap-10 { - /* edge, chrome, safari go here... */ - /* may come with next firefox 68, https://caniuse.com/#search=clamp */ -} .il-multi-line-cap-10 { position: relative; max-height: 15em; @@ -22647,6 +22780,9 @@ div.ilFrame { height: 1.5em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 80%); } +.il-multi-line-cap-10 { + /* edge, chrome, safari go here... */ +} @supports (-webkit-line-clamp: 2) { .il-multi-line-cap-10 { overflow: hidden; @@ -22659,6 +22795,9 @@ div.ilFrame { display: none; } } +.il-multi-line-cap-10 { + /* may come with next firefox 68, https://caniuse.com/#search=clamp */ +} @supports (-moz-line-clamp: 2) { .il-multi-line-cap-10 { overflow: hidden;