/* The darken/lighten is not giving accurate results for the toasters so specific vars for them below. - Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20. - Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20. - Orange background: #ff9933 - The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text. */ /*is not being used anywhere; the same as @redAlert*/ a, a:active { text-decoration: none; color: #C2C2C2; } :host { flex: 1; flex-basis: auto; display: grid; display: -ms-grid; grid-template-rows: 23px 1fr; grid-template-columns: 1fr; grid-template-areas: 'block-tab-header' 'block-tab-content'; -ms-grid-rows: 23px 1fr; -ms-grid-columns: 1fr; } :host .fx-poms-tabs-header { grid-area: block-tab-header; -ms-grid-row: 1; -ms-grid-column: 1; display: grid; grid-template-columns: 1fr 90px; grid-template-rows: 1fr; grid-template-areas: 'vertical-page import'; display: -ms-grid; -ms-grid-columns: 1fr 90px; -ms-grid-rows: 1fr; } :host .fx-poms-tabs-header et-vertical-page { grid-area: vertical-page; -ms-grid-column: 1; -ms-grid-row: 1; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline { display: inline-block; min-width: 90px; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline:first-child .fx-poms-tab-item { margin-left: 2.5px; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item { display: grid; margin: 2px 1.5px -4px 1.5px; border-width: 1px; border-style: solid solid none solid; padding: 4px 4px 4.5px 4px; border-color: #666570; background-color: #1F1F1F; opacity: 0.4; grid-template-columns: 1fr auto; grid-column-gap: 2px; grid-template-rows: 1fr; flex-grow: 0; flex-basis: auto; display: -ms-grid; -ms-grid-columns: 1fr 10px; -ms-grid-rows: 1fr; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item .fx-poms-tab-name { display: block; text-align: center; -ms-grid-row: 1; -ms-grid-column: 1; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item .fx-poms-tab-close { display: block; -ms-grid-row: 1; -ms-grid-column: 2; position: relative; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item .fx-poms-tab-close .icon-cross-mini-2 { right: -5px; position: absolute; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tabs-header-add { display: inline-block; width: 23px; height: 12px; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tabs-header-add .icon-bigger-plus { position: absolute; top: 6px; } :host .fx-poms-tabs-header .fx-poms-tab-item-import { grid-area: import; -ms-grid-column: 2; -ms-grid-row: 1; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; margin: 2px 2.5px -4px 1.5px; border-width: 1px; border-style: solid solid none solid; padding: 2px 4px; border-color: #666570; background-color: #1F1F1F; opacity: 0.4; min-width: 0; } :host .fx-poms-tab-content-container { grid-area: block-tab-content; -ms-grid-row: 2; -ms-grid-column: 1; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; margin: 0; padding: 0; } :host .fx-poms-tab-content-container .fx-poms-tab-content { -ms-grid-row: 1; -ms-grid-column: 1; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; margin: 0; padding: 0; z-index: 1; position: relative; } :host .fx-poms-tabs-header.last-tab et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.empty .fx-poms-tab-close { display: none; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.active, :host .fx-poms-tabs-header .fx-poms-tab-item-import.active { opacity: 1; position: relative; z-index: 2; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.active .fx-poms-tab-name:hover, :host .fx-poms-tabs-header .fx-poms-tab-item-import.active .fx-poms-tab-name:hover { cursor: default; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.empty, :host .fx-poms-tabs-header .fx-poms-tab-item-import.empty { background-color: #2E2E33; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.emphasize-alert, :host .fx-poms-tabs-header .fx-poms-tab-item-import.emphasize-alert { background-color: #ff9933; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Negotiate, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Negotiate { background-color: #DEC763; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Negotiate a, :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Negotiate a:active, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Negotiate a, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Negotiate a:active { color: black; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Negotiate .fx-poms-tab-close, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Negotiate .fx-poms-tab-close { display: none; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Disabled .fx-poms-tab-close, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Disabled .fx-poms-tab-close { display: none; } :host .fx-poms-tabs-header et-vertical-page .fx-poms-tab-item-inline .fx-poms-tab-item.Done, :host .fx-poms-tabs-header .fx-poms-tab-item-import.Done { background-color: #2498BA; } :host fx-poms-order { height: 100%; } :host .fx-poms-service-status-banner { position: absolute; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0.4); display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr; -ms-grid-rows: 1fr auto 1fr; -ms-grid-columns: 1fr; } :host .fx-poms-service-status-banner .fx-poms-service-status-message { grid-column-start: 1; grid-row-start: 2; -ms-grid-column: 1; -ms-grid-row: 2; background-color: #ff9933; } :host .fx-poms-service-status-banner .fx-poms-service-status-message .fx-poms-status-header, :host .fx-poms-service-status-banner .fx-poms-service-status-message .fx-poms-status-text { margin: 5px; font-size: 20px; line-height: 40px; text-transform: none; text-align: center; font-weight: bold; color: white; }