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

Fiori styled UI components

/*
  define all variables here for high contrast
*/

html.hcw {
  --fd-color-action-1: #000000;
  --fd-color-action-2: #000000;
  --fd-color-action-3: #000000;
  --fd-color-text-1: #000000;
  --fd-color-text-2: #000000;
  --fd-color-text-3: #000000;
  --fd-color-text-4: #000000;
  --fd-color-text-5: #000000;
  /* add custom css --fd-color-text-6 */
  --fd-color-text-6: #000000;
  /* add custom css --fd-color-text-7 */
  --fd-color-text-7: #000000;
  /* add custom css --fd-color-text-8 */
  --fd-color-text-8: #000000;
  /* add custom css --fd-color-text-9 */
  --fd-color-text-9: #000000;
  /* add custom css --fd-color-text-10 */
  --fd-color-text-10: #000000;
  /* add custom css --fd-color-text-11 */
  --fd-color-text-11: #000000;
  /* add custom css --fd-color-text-12 */
  --fd-color-text-12: #000000;
  /* add custom css --fd-color-text-13 */
  --fd-color-text-13: #000000;
  /* add custom css --fd-color-text-14 */
  --fd-color-text-14: #000000;
  /* add custom css --fd-color-text-15 */
  --fd-color-text-15: #000000;
  --fd-color-background-1: #FFFFFF;
  --fd-color-background-2: #FFFFFF;
  --fd-color-background-3: #FFFFFF;
  --fd-color-background-4: #FFFFFF;
  --fd-color-background-5: #FFFFFF;
  --fd-color-background-6: #FFFFFF;
  --fd-color-background-7: #000000;
  /* add custom css --fd-color-background-8 */
  --fd-color-background-8: #FFFFFF;
  /* add custom css --fd-color-background-9 */
  --fd-color-background-9: #2C6FCA;
  /* add custom css --fd-color-background-10 */
  --fd-color-background-10: #FFFFFF;
  /* add custom css --fd-color-background-11 */
  --fd-color-background-11: #7a5100;
  --fd-color-background-12:#FFFFFF;
  /* add custom css --fd-color-background-13 */
  --fd-color-background-13: #FFFFFF;
  --fd-color-background-selected: #8fb5ff;
  --fd-color-neutral-1: #FFFFFF;
  --fd-color-neutral-2: #FFFFFF;
  --fd-color-neutral-3: #000000;
  --fd-color-neutral-4: #FFFFFF;
  --fd-color-neutral-5: #FFFFFF;
  --fd-color-neutral-6: #FFFFFF;
  --fd-color-status-1: #FFFFFF;
  --fd-color-status-2: #FFFFFF;
  --fd-color-status-3: #FFFFFF;
  --fd-color-status-4: #FFFFFF;
  --fd-color-status-5: #FFFFFF;
  --fd-color-accent-1: #FFFFFF;
  --fd-color-accent-2: #FFFFFF;
  --fd-color-accent-3: #FFFFFF;
  --fd-color-accent-4: #FFFFFF;
  --fd-color-accent-5: #FFFFFF;
  --fd-color-accent-6: #FFFFFF;
  --fd-color-accent-7: #FFFFFF;
  --fd-color-accent-8: #FFFFFF;
  --fd-color-accent-9: #FFFFFF;
  --fd-color-accent-10: #FFFFFF;
  --fd-color-accent-11: #FFFFFF;
  --fd-color-accent-12: #FFFFFF;
  --fd-color-accent-13: #FFFFFF;
  --fd-color-accent-14: #FFFFFF;
  --fd-color-accent-15: #FFFFFF;
  /* add custom css --fd-color-accent-16 */
  --fd-color-accent-16: #FFFFFF;
  /* add custom css --fd-color-accent-17 */
  --fd-color-accent-17: #FFFFFF;
  --fd-color-shell-1: #FFFFFF;
  --fd-color-shell-2: #FFFFFF;
  --fd-color-shell-3: #FFFFFF;
  --fd-color-shell-4: #FFFFFF;
  --fd-color-shell-5: #FFFFFF;
  --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: #FFFFFF;
  --fd-color-background-positive: #FFFFFF;
  --fd-color-background-alert: #FFFFFF;
  --fd-color-background-negative: #FFFFFF;
  --fd-color-background-default: #FFFFFF;
  --fd-color-action: var(--fd-color-action-1);
  --fd-color-action-hover: #FFFFFF;
  --fd-color-action-focus: #FFFFFF;
  --fd-color-action-selected: #FFFFFF;
  --fd-color-action-disabled: rgba(10, 110, 209, 0.4);
  --fd-color-action-visited: #FFFFFF;
  --fd-color-positive: #FFFFFF;
  --fd-color-negative: #FFFFFF;
  --fd-color-alert: #FFFFFF;
  --fd-forms-color--focus: #FFFFFF;
  --fd-forms-color--disabled: #FFFFFF;
  --fd-forms-color--active: #FFFFFF;
  --fd-forms-background-color: #FFFFFF;
  --fd-forms-background-color--disabled: FFFFFF;
  --fd-forms-background-color--check: #FFFFFF;
  --fd-forms-background-color--indeterminate: #FFFFFF;
  --fd-forms-background-color--check-disabled: rgba(10, 110, 209, 0.4);
  --fd-forms-border-color: #000000;
  /* add custom css --fd-forms-border-color-1 */
  --fd-forms-border-color-1: #7a5100;
  --fd-forms-border-color--check: #FFFFFF;
  --fd-forms-border-color--hover: #0854a0;
  --fd-forms-border-color--focus: #FFFFFF;
  --fd-forms-border-color--disabled: #FFFFFF;
  --fd-hover-background: transparent;
  --fd-border-color: #000000;
  --fd-input-border-color-1: #000000;
  --fd-input-border-color-2: #000000;
  --fd-input-border-color-3: #000000;
  --fd-input-border-color-4: #000000;
  --ffr-border-shadow-1: rgba(0, 0, 0, 0.5);
  --ffr-box-shadow-1:#51555a;
  --ffr-border-color-2: #000000;
}

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

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

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

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

html.hcw .fd-button:hover, html.hcw .ac-content:hover {
  background: #7a5100;
}

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

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

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

html.hcw .modal-save {
  border: none;
  background: rgba(0, 0, 0, .5);
}

html.hcw .modal-save:hover {
  background: rgba(0, 0, 0, 1);
}


html.hcw .sap-icon--overflow::before {
  color: var(--fd-color-text-1);
}

html.hcw .quick-frame {
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.8) !important;
}

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

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

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

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

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

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