@decaf-ts/styles/dist/core.css

template for ts projects

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..900&display=swap");
html,
body,
* {
  font-family: var(--dcf-font-family);
  font-style: normal;
}

.dcf-text-lead {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--dfc-color-dark-tint);
}

.dcf-text-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--dfc-color-medium);
}

.dcf-text-meta > a {
  color: var(--dfc-color-medium);
}

.dcf-text-meta > a:hover {
  color: var(--dfc-color-medium-shade);
  text-decoration: none;
}

.dcf-text-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.dcf-text-large {
  font-size: 1.5rem;
  line-height: 1.5;
}

.dcf-text-default {
  font-size: 16px;
  line-height: 1.5;
}

.dcf-text-light {
  font-weight: 300;
}

.dcf-text-normal {
  font-weight: 400;
}

.dcf-text-bold {
  font-weight: 700;
}

.dcf-text-lighter {
  font-weight: lighter;
}

.dcf-text-bolder {
  font-weight: bolder;
}

.dcf-text-italic {
  font-style: italic;
}

.dcf-text-capitalize {
  text-transform: capitalize !important;
}

.dcf-text-uppercase {
  text-transform: uppercase !important;
}

.dcf-text-lowercase {
  text-transform: lowercase !important;
}

.dcf-text-left {
  text-align: left !important;
}

.dcf-text-right {
  text-align: right !important;
}

.dcf-text-center {
  text-align: center !important;
}

.dcf-text-justify {
  text-align: justify !important;
}

/* Phone landscape and bigger */
@media (min-width: 576px) {
  .dcf-text-left\@s {
    text-align: left !important;
  }
  .dcf-text-right\@s {
    text-align: right !important;
  }
  .dcf-text-center\@s {
    text-align: center !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 768px) {
  .dcf-text-left\@m {
    text-align: left !important;
  }
  .dcf-text-right\@m {
    text-align: right !important;
  }
  .dcf-text-center\@m {
    text-align: center !important;
  }
}
/* Desktop and bigger */
@media (min-width: 992px) {
  .dcf-text-left\@l {
    text-align: left !important;
  }
  .dcf-text-right\@l {
    text-align: right !important;
  }
  .dcf-text-center\@l {
    text-align: center !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1200px) {
  .dcf-text-left\@xl {
    text-align: left !important;
  }
  .dcf-text-right\@xl {
    text-align: right !important;
  }
  .dcf-text-center\@xl {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .dcf-text-left\@2xl {
    text-align: left !important;
  }
  .dcf-text-right\@2xl {
    text-align: right !important;
  }
  .dcf-text-center\@2xl {
    text-align: center !important;
  }
}
/*
 * Vertical
 */
.dcf-text-top {
  vertical-align: top !important;
}

.dcf-text-middle {
  vertical-align: middle !important;
}

.dcf-text-bottom {
  vertical-align: bottom !important;
}

.dcf-text-baseline {
  vertical-align: baseline !important;
}

.dcf-color-primary {
  color: var(--dcf-color-primary) !important;
}

.dcf-color-secondary {
  color: var(--dcf-color-secondary) !important;
}

.dcf-color-tertiary {
  color: var(--dcf-color-tertiary) !important;
}

.dcf-color-success {
  color: var(--dcf-color-success) !important;
}

.dcf-color-warning {
  color: var(--dcf-color-warning) !important;
}

.dcf-color-danger {
  color: var(--dcf-color-danger) !important;
}

.dcf-color-light {
  color: var(--dcf-color-light) !important;
}

.dcf-color-medium {
  color: var(--dcf-color-medium) !important;
}

.dcf-color-dark {
  color: var(--dcf-color-dark) !important;
}

.dcf-color-gray-0 {
  color: var(--dcf-color-gray-0) !important;
}

.dcf-color-gray-1 {
  color: var(--dcf-color-gray-1) !important;
}

.dcf-color-gray-2 {
  color: var(--dcf-color-gray-2) !important;
}

.dcf-color-gray-3 {
  color: var(--dcf-color-gray-3) !important;
}

.dcf-color-gray-4 {
  color: var(--dcf-color-gray-4) !important;
}

.dcf-color-gray-5 {
  color: var(--dcf-color-gray-5) !important;
}

.dcf-color-gray-6 {
  color: var(--dcf-color-gray-6) !important;
}

.dcf-color-gray-7 {
  color: var(--dcf-color-gray-7) !important;
}

.dcf-color-gray-8 {
  color: var(--dcf-color-gray-8) !important;
}

.dcf-color-gray-9 {
  color: var(--dcf-color-gray-9) !important;
}

.dcf-color-gray-10 {
  color: var(--dcf-color-gray-10) !important;
}

:root {
  --dcf-default-dynamic-font: "Inter", sans-serif;
  --dcf-input-fill-background: #ffffff;
  --dcf-card-background: #fff;
  --dcf-content-background: var(--dcf-color-gray-1);
  --dcf-text-color: #414651;
  --dcf-width-s: 576px;
  --dcf-width-m: 768px;
  --dcf-width-l: 992px;
  --dcf-width-xl: 1200px;
  --dcf-border-radius: 8px;
  --dcf-border-radius-xsmall: 4px;
  --dcf-border-radius-small: 6px;
  --dcf-border-radius-large: 12px;
  --dcf-spacement: 1.25rem;
  --dcf-spacement-xsmall: 0.3125rem;
  --dcf-spacement-small: 0.625rem;
  --dcf-spacement-medium: 1.875rem;
  --dcf-spacement-large: 2.5rem;
  --dcf-spacement-xlarge: 4.375rem;
  --dcf-spacement-2xlarge: 8.75rem;
  --dcf-margin: 1.25rem;
  --dcf-margin-xsmall: 0.3125rem;
  --dcf-margin-small: 0.625rem;
  --dcf-margin-medium: 1.875rem;
  --dcf-margin-large: 2.5rem;
  --dcf-margin-xlarge: 4.375rem;
  --dcf-margin-2xlarge: 8.75rem;
  --dcf-padding: 1.875rem;
  --dcf-padding-xsmall: 0.625rem;
  --dcf-padding-small: 0.9375rem;
  --dcf-padding-medium: 1.875rem;
  --dcf-padding-large: 2.5rem;
  --dcf-padding-xlarge: 4.375rem;
  --dcf-padding-2xlarge: 8.75rem;
  --dcf-box-shadow: 0px 3px 12px rgba(47, 43, 61, 0.14);
  --dcf-box-shadow-small: 0px 3px 12px rgba(47, 43, 61, 0.07);
  --dcf-box-shadow-medium: 0px 6px 24px rgba(47, 43, 61, 0.14);
  --dcf-box-shadow-large: 0px 12px 24px rgba(47, 43, 61, 0.28);
  --dcf-box-shadow-xlarge: 0px 24px 48px rgba(47, 43, 61, 0.56);
  --dcf-color-primary: #3460dc;
  --dcf-color-primary-rgb: 52, 96, 220;
  --dcf-color-primary-contrast: #ffffff;
  --dcf-color-primary-contrast-rgb: 255, 255, 255;
  --dcf-color-primary-shade: #2e54c2;
  --dcf-color-primary-tint: #4870e0;
  --dcf-color-secondary-rgb: 72, 65, 128;
  --dcf-color-secondary-contrast: #ffffff;
  --dcf-color-secondary-contrast-rgb: 255, 255, 255;
  --dcf-color-secondary-shade: #3f3971;
  --dcf-color-secondary-tint: #5a548d;
  --dcf-color-tertiary: #6030ff;
  --dcf-color-tertiary-rgb: 96, 48, 255;
  --dcf-color-tertiary-contrast: #ffffff;
  --dcf-color-tertiary-contrast-rgb: 255, 255, 255;
  --dcf-color-tertiary-shade: #542ae0;
  --dcf-color-tertiary-tint: #7045ff;
  --dcf-color-success: #2dd55b;
  --dcf-color-success-rgb: 45, 213, 91;
  --dcf-color-success-contrast: #000000;
  --dcf-color-success-contrast-rgb: 0, 0, 0;
  --dcf-color-success-shade: #28bb50;
  --dcf-color-success-tint: #42d96b;
  --dcf-color-warning: #ffc409;
  --dcf-color-warning-rgb: 255, 196, 9;
  --dcf-color-warning-contrast: #000000;
  --dcf-color-warning-contrast-rgb: 0, 0, 0;
  --dcf-color-warning-shade: #e0ac08;
  --dcf-color-warning-tint: #ffca22;
  --dcf-color-danger: #c5000f;
  --dcf-color-danger-rgb: 197, 0, 15;
  --dcf-color-danger-contrast: #ffffff;
  --dcf-color-danger-contrast-rgb: 255, 255, 255;
  --dcf-color-danger-shade: #ad000d;
  --dcf-color-danger-tint: #cb1a27;
  --dcf-color-light: #f5f5f5;
  --dcf-color-light-rgb: 242, 244, 247;
  --dcf-color-light-contrast: #000000;
  --dcf-color-light-contrast-rgb: 0, 0, 0;
  --dcf-color-light-shade: #d5d7da;
  --dcf-color-light-tint: #f9fafb;
  --dcf-color-medium: #535862;
  --dcf-color-medium-rgb: 102, 112, 133;
  --dcf-color-medium-contrast: #000000;
  --dcf-color-medium-contrast-rgb: 0, 0, 0;
  --dcf-color-medium-shade: #475467;
  --dcf-color-medium-tint: #98a2b3;
  --dcf-color-dark: #182230;
  --dcf-color-dark-rgb: 24, 34, 48;
  --dcf-color-dark-contrast: #ffffff;
  --dcf-color-dark-contrast-rgb: 255, 255, 255;
  --dcf-color-dark-shade: #101828;
  --dcf-color-dark-tint: #414651;
  --dcf-color-gray-0: #f9fafb;
  --dcf-color-gray-1: #f5f5f5;
  --dcf-color-gray-2: #e9eaeb;
  --dcf-color-gray-3: #d5d7da;
  --dcf-color-gray-4: #98a2b3;
  --dcf-color-gray-5: #535862;
  --dcf-color-gray-6: #475467;
  --dcf-color-gray-7: #414651;
  --dcf-color-gray-8: #182230;
  --dcf-color-gray-9: #101828;
  --dcf-color-gray-10: #0c111d;
}

.dcf-palette-dark {
  --dcf-content-background: transparent;
  --dcf-input-fill-background: var(--dcf-color-step-100);
  --dcf-text-color: #ffffff;
  /*
   * iOS Dark Theme
   * -------------------------------------------
   */
}
.dcf-palette-dark.ios body {
  --dcf-background-color: #25293c;
  --dcf-background-color-rgb: 37, 41, 60;
  --dcf-text-color: #ffffff;
  --dcf-text-color-rgb: 255, 255, 255;
  --dcf-color-step-50: #0d0d0d;
  --dcf-color-step-100: #1a1a1a;
  --dcf-color-step-150: #262626;
  --dcf-color-step-200: #333333;
  --dcf-color-step-250: #404040;
  --dcf-color-step-300: #4d4d4d;
  --dcf-color-step-350: #595959;
  --dcf-color-step-400: #666666;
  --dcf-color-step-450: #737373;
  --dcf-color-step-500: #808080;
  --dcf-color-step-550: #8c8c8c;
  --dcf-color-step-600: #999999;
  --dcf-color-step-650: #a6a6a6;
  --dcf-color-step-700: #b3b3b3;
  --dcf-color-step-750: #bfbfbf;
  --dcf-color-step-800: #cccccc;
  --dcf-color-step-850: #d9d9d9;
  --dcf-color-step-900: #e6e6e6;
  --dcf-color-step-950: #f2f2f2;
  --dcf-item-background: #2f3349;
  --dcf-card-background: #2f3349;
  --dcf-input-fill-background: var(--dcf-card-background);
}
.dcf-palette-dark.ios ion-modal {
  --dcf-background-color: var(--dcf-color-step-100);
  --dcf-toolbar-background: var(--dcf-color-step-150);
  --dcf-toolbar-border-color: var(--dcf-color-step-250);
}
.dcf-palette-dark {
  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */
}
.dcf-palette-dark.md body {
  --dcf-background-color: #25293c;
  --dcf-background-color-rgb: 37, 41, 60;
  --dcf-text-color: #ffffff;
  --dcf-text-color-rgb: 255, 255, 255;
  --dcf-border-color: #222222;
  --dcf-color-step-50: #2f3349;
  --dcf-color-step-100: #2a2a2a;
  --dcf-color-step-150: #363636;
  --dcf-color-step-200: #414141;
  --dcf-color-step-250: #4d4d4d;
  --dcf-color-step-300: #595959;
  --dcf-color-step-350: #656565;
  --dcf-color-step-400: #717171;
  --dcf-color-step-450: #7d7d7d;
  --dcf-color-step-500: #898989;
  --dcf-color-step-550: #949494;
  --dcf-color-step-600: #a0a0a0;
  --dcf-color-step-650: #acacac;
  --dcf-color-step-700: #b8b8b8;
  --dcf-color-step-750: #c4c4c4;
  --dcf-color-step-800: #d0d0d0;
  --dcf-color-step-850: #dbdbdb;
  --dcf-color-step-900: #e7e7e7;
  --dcf-color-step-950: #f3f3f3;
  --dcf-item-background: #2f3349;
  --dcf-toolbar-background: #2f3349;
  --dcf-tab-bar-background: #31354d;
  --dcf-card-background: #2f3349;
  --dcf-input-fill-background: var(--dcf-card-background);
}

html {
  --dcf-dynamic-font: var(--dcf-default-dynamic-font);
}

ion-card {
  color: var(--dcf-text-color);
}

.dcf-palette-dark ion-select,
.dcf-palette-dark ion-textarea,
.dcf-palette-dark ion-radio-group,
.dcf-palette-dark ion-input {
  --placeholder-color: var(--dcf-color-gray-1) !important;
}
.dcf-palette-dark ion-select ion-label,
.dcf-palette-dark ion-select label, .dcf-palette-dark ion-select::part(label),
.dcf-palette-dark ion-textarea ion-label,
.dcf-palette-dark ion-textarea label,
.dcf-palette-dark ion-textarea::part(label),
.dcf-palette-dark ion-radio-group ion-label,
.dcf-palette-dark ion-radio-group label,
.dcf-palette-dark ion-radio-group::part(label),
.dcf-palette-dark ion-input ion-label,
.dcf-palette-dark ion-input label,
.dcf-palette-dark ion-input::part(label) {
  color: var(--dcf-color-gray-3) !important;
}
.dcf-palette-dark ion-select:not(:hover),
.dcf-palette-dark ion-textarea:not(:hover),
.dcf-palette-dark ion-radio-group:not(:hover),
.dcf-palette-dark ion-input:not(:hover) {
  --border-color: var(--dcf-color-step-500) !important;
}
.dcf-palette-dark ion-select::part(text) {
  color: var(--dcf-color-gray-2);
}
.dcf-palette-dark .dcf-icon ion-icon {
  color: var(--dcf-text-color) !important;
}
.dcf-palette-dark .dcf-icon svg {
  fill: var(--dcf-text-color);
  fill-opacity: 0.25 !important;
  stroke: var(--dcf-text-color) !important;
}
.dcf-palette-dark .dcf-icon svg * {
  fill: var(--dcf-color-primary) !important;
  stroke: var(--dcf-color-gray-1) !important;
}
.dcf-palette-dark * {
  scrollbar-color: var(--dcf-color-dark) transparent;
}
.dcf-palette-dark ion-content {
  scrollbar-color: var(--dcf-card-background) transparent;
}

html:not(.dcf-palette-dark) {
  /* Firefox */
}
html:not(.dcf-palette-dark) *:not(:hover) {
  scrollbar-color: var(--dcf-color-gray-2) transparent !important;
}
html:not(.dcf-palette-dark) * {
  scrollbar-width: thin !important; /*  */
  scrollbar-color: var(--dcf-color-gray-4) transparent;
}
html:not(.dcf-palette-dark) ion-content {
  scrollbar-color: var(--dcf-card-background) transparent;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-track {
  background: transparent;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}