ffr-components/es/theme/theme-hcb.css

Fiori styled UI components

/*
  define all variables here for high contrast
*/

html.hcb {
  --fd-color-action-1: #FFFFFF;
  --fd-color-action-2: #FFFFFF;
  --fd-color-action-3: #FFFFFF;
  --fd-color-text-1: #FFFFFF;
  --fd-color-text-2: #000000;
  --fd-color-text-3: #FFFFFF;
  --fd-color-text-4: #FFFFFF;
  --fd-color-text-5: #FFFFFF;
  /* add custom css --fd-color-text-6 */
  --fd-color-text-6: #FFFFFF;
  /* add custom css --fd-color-text-7 */
  --fd-color-text-7: #FFFFFF;
  /* add custom css --fd-color-text-8 */
  --fd-color-text-8: #FFFFFF;
  /* add custom css --fd-color-text-9 */
  --fd-color-text-9: #FFFFFF;
  /* add custom css --fd-color-text-10 */
  --fd-color-text-10: #FFFFFF;
  /* add custom css --fd-color-text-11 */
  --fd-color-text-11: #FFFFFF;
  /* add custom css --fd-color-text-12 */
  --fd-color-text-12: #FFFFFF;
  /* add custom css --fd-color-text-13 */
  --fd-color-text-13: #FFFFFF;
  /* add custom css --fd-color-text-14 */
  --fd-color-text-14: #FFFFFF;
  /* add custom css --fd-color-text-15 */
  --fd-color-text-15: #FFFFFF;
  --fd-color-background-1: #000000;
  --fd-color-background-2: #000000;
  --fd-color-background-3: #000000;
  --fd-color-background-4: #000000;
  --fd-color-background-5: #000000;
  --fd-color-background-6: #000000;
  --fd-color-background-7: #FFFFFF;
  /* add custom css --fd-color-background-8 */
  --fd-color-background-8: #000000;
  /* add custom css --fd-color-background-9 */
  --fd-color-background-9: #2C6FCA;
  /* add custom css --fd-color-background-10 */
  --fd-color-background-10: #000000;
  /* add custom css --fd-color-background-11 */
  --fd-color-background-11: #7a5100;
  --fd-color-background-selected: #0f5d94;
  --fd-color-background-12: #000000;
  /* add custom css --fd-color-background-13 */
  --fd-color-background-13: #000000;
  --fd-color-neutral-1: #000000;
  --fd-color-neutral-2: #000000;
  --fd-color-neutral-3: #FFFFFF;
  --fd-color-neutral-4: #000000;
  --fd-color-neutral-5: #000000;
  --fd-color-neutral-6: #000000;
  --fd-color-status-1: #000000;
  --fd-color-status-2: #000000;
  --fd-color-status-3: #000000;
  --fd-color-status-4: #000000;
  --fd-color-status-5: #000000;
  --fd-color-accent-1: #000000;
  --fd-color-accent-2: #000000;
  --fd-color-accent-3: #000000;
  --fd-color-accent-4: #000000;
  --fd-color-accent-5: #000000;
  --fd-color-accent-6: #000000;
  --fd-color-accent-7: #000000;
  --fd-color-accent-8: #000000;
  --fd-color-accent-9: #000000;
  --fd-color-accent-10: #000000;
  --fd-color-accent-11: #000000;
  --fd-color-accent-12: #000000;
  --fd-color-accent-13: #000000;
  --fd-color-accent-14: #000000;
  --fd-color-accent-15: #000000;
  /* add custom css --fd-color-accent-16 */
  --fd-color-accent-16: #000000;
  /* add custom css --fd-color-accent-17 */
  --fd-color-accent-17: #000000;
  --fd-color-shell-1: #000000;
  --fd-color-shell-2: #000000;
  --fd-color-shell-3: #000000;
  --fd-color-shell-4: #000000;
  --fd-color-shell-5: #000000;
  --fd-color: var(--fd-color-text-1);
  --fd-background-color: var(--fd-color-background-1);
  --fd-color-background-hover: #7a5100;
  --fd-color-background-selected: rgba(10, 110, 209, 0.07);
  --fd-color-background-selected-hover: rgba(10, 110, 209, 0.1);
  --fd-color-background-information: #000000;
  --fd-color-background-positive: #000000;
  --fd-color-background-alert: #000000;
  --fd-color-background-negative: #000000;
  --fd-color-background-default: #000000;
  --fd-color-action: var(--fd-color-action-1);
  --fd-color-action-hover: #7a5100;
  --fd-color-action-focus: #000000;
  --fd-color-action-selected: #000000;
  --fd-color-action-disabled: rgba(10, 110, 209, 0.4);
  --fd-color-action-visited: #000000;
  --fd-color-positive: #000000;
  --fd-color-negative: #000000;
  --fd-color-alert: #000000;
  --fd-forms-color--focus: #000000;
  --fd-forms-color--disabled: #000000;
  --fd-forms-color--active: #000000;
  --fd-forms-background-color: #000000;
  --fd-forms-background-color--disabled: 000000;
  --fd-forms-background-color--check: #000000;
  --fd-forms-background-color--indeterminate: #000000;
  --fd-forms-background-color--check-disabled: rgba(10, 110, 209, 0.4);
  --fd-forms-border-color: #FFFFFF;
  /* add custom css --fd-forms-border-color-1 */
  --fd-forms-border-color-1: #7a5100;
  --fd-forms-border-color--check: #000000;
  --fd-forms-border-color--hover: #0854a0;
  --fd-forms-border-color--focus: #000000;
  --fd-forms-border-color--disabled: #000000;
  --fd-hover-background: #000000;
  --fd-border-color:#FFFFFF;
  --fd-input-border-color-1: #FFFFFF;
  --fd-input-border-color-2: #FFFFFF;
  --fd-input-border-color-3: #FFFFFF;
  --fd-input-border-color-4: #FFFFFF;
  --ffr-border-color-1: #ffffff;
  --ffr-border-shadow-1: rgba(255, 255, 255, 0.1);
  --ffr-border-color-2:#ffffff;
  --ffr-border-shadow-2: rgba(255, 255, 255, 0.1);
}

html.hcb * {
  border-color: var(--fd-forms-border-color) !important;
}

html.hcb .ac-content .ac-content__status {
  color: var(--fd-color-text-1) !important;
}

html.hcb .fd-tabs__item a:focus {
  outline: 1px dashed var(--fd-color-action-1);
}

html.hcb .home-tile {
  color: var(--fd-color-text-1);
  border: 1px solid var(--fd-forms-border-color);
}

html.hcb .donut-center {
  fill: var(--fd-color-text-1);
}

html.hcb .fd-button:hover {
  background: var(--fd-forms-border-color-1);
}

html.hcb .fd-button--emphasized {
  background: var(--fd-color-background-7);
}

html.hcb .fd-button--emphasized:before {
  color: var(--fd-color-text-2);
}

html.hcb .quick-frame.to-dialog {
  border: 1px solid var(--fd-forms-border-color);
}

html.hcb .to-dialog {
  box-shadow: 0 5px 20px 0 var(--fd-color-neutral-3), 0 2px 8px 0 var(--fd-color-neutral-2) !important;
}

html.hcb .fd-form__item textarea:hover, .fd-form__item textarea:focus {
  border-color: var(--fd-forms-border-color-1) !important;
}

html.hcb .fd-form__item .fd-input:hover, .to-dialog .quick-btn__close:hover {
  border: 1px solid var(--fd-forms-border-color-1) !important;
}

html.hcb .to-dialog .quick-btn__close:hover:before {
  color: var(--fd-color-text-8);
}

html.hcb .fd-list-group__item:hover {
  background: var(--fd-color-background-hover);
}

html.hcb .modal-save {
  color: #ffffff !important;
  border: 1px solid var(--fd-forms-border-color);
  background: var(--fd-color-background-1);
}

html.hcb .modal-save:hover {
  background: var(--fd-color-background-7);
  color: var(--fd-color-text-2) !important;
}

html.hcb .fd-button--shell:hover {
  background: var(--fd-color-background-11);
}

html.hcb .fd-tabs__link {
  color: var(--fd-color-text-1);
}

html.hcb .fd-tabs__link:hover {
  color: var(--fd-color-text-8);
}

html.hcb .fd-page__header {
  border-bottom: 1px solid var(--fd-forms-border-color);
}

html.hcb .fd-menu__item {
  color: var(--fd-color-text-1);
}