@decaf-ts/styles
Version:
template for ts projects
1 lines • 11 kB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..900&display=swap");*,body,html{font-family:var(--dcf-font-family);font-style:normal}.dcf-text-lead{color:var(--dfc-color-dark-tint);font-size:1.5rem;line-height:1.5}.dcf-text-meta{font-size:.875rem;line-height:1.4}.dcf-text-meta,.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:.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}.dcf-text-uppercase{text-transform:uppercase}.dcf-text-lowercase{text-transform:lowercase}.dcf-text-left{text-align:left!important}.dcf-text-right{text-align:right!important}.dcf-text-center{text-align:center}.dcf-text-justify{text-align:justify}@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}}@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}}@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}}@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}}@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}}.dcf-text-top{vertical-align:top}.dcf-text-middle{vertical-align:middle}.dcf-text-bottom{vertical-align:bottom}.dcf-text-baseline{vertical-align:baseline}.dcf-color-primary{color:var(--dcf-color-primary)}.dcf-color-secondary{color:var(--dcf-color-secondary)}.dcf-color-tertiary{color:var(--dcf-color-tertiary)}.dcf-color-success{color:var(--dcf-color-success)}.dcf-color-warning{color:var(--dcf-color-warning)}.dcf-color-danger{color:var(--dcf-color-danger)}.dcf-color-light{color:var(--dcf-color-light)}.dcf-color-medium{color:var(--dcf-color-medium)}.dcf-color-dark{color:var(--dcf-color-dark)}.dcf-color-gray-0{color:var(--dcf-color-gray-0)}.dcf-color-gray-1{color:var(--dcf-color-gray-1)}.dcf-color-gray-2{color:var(--dcf-color-gray-2)}.dcf-color-gray-3{color:var(--dcf-color-gray-3)}.dcf-color-gray-4{color:var(--dcf-color-gray-4)}.dcf-color-gray-5{color:var(--dcf-color-gray-5)}.dcf-color-gray-6{color:var(--dcf-color-gray-6)}.dcf-color-gray-7{color:var(--dcf-color-gray-7)}.dcf-color-gray-8{color:var(--dcf-color-gray-8)}.dcf-color-gray-9{color:var(--dcf-color-gray-9)}.dcf-color-gray-10{color:var(--dcf-color-gray-10)}:root{--dcf-default-dynamic-font:"Inter",sans-serif;--dcf-input-fill-background:#fff;--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,.14);--dcf-box-shadow-small:0px 3px 12px rgba(47,43,61,.07);--dcf-box-shadow-medium:0px 6px 24px rgba(47,43,61,.14);--dcf-box-shadow-large:0px 12px 24px rgba(47,43,61,.28);--dcf-box-shadow-xlarge:0px 24px 48px rgba(47,43,61,.56);--dcf-color-primary:#3460dc;--dcf-color-primary-rgb:52,96,220;--dcf-color-primary-contrast:#fff;--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:#fff;--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:#fff;--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:#000;--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:#000;--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:#fff;--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:#000;--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:#000;--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:#fff;--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:#fff}.dcf-palette-dark.ios body{--dcf-background-color:#25293c;--dcf-background-color-rgb:37,41,60;--dcf-text-color:#fff;--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:#333;--dcf-color-step-250:#404040;--dcf-color-step-300:#4d4d4d;--dcf-color-step-350:#595959;--dcf-color-step-400:#666;--dcf-color-step-450:#737373;--dcf-color-step-500:grey;--dcf-color-step-550:#8c8c8c;--dcf-color-step-600:#999;--dcf-color-step-650:#a6a6a6;--dcf-color-step-700:#b3b3b3;--dcf-color-step-750:#bfbfbf;--dcf-color-step-800:#ccc;--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.md body{--dcf-background-color:#25293c;--dcf-background-color-rgb:37,41,60;--dcf-text-color:#fff;--dcf-text-color-rgb:255,255,255;--dcf-border-color:#222;--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-input,.dcf-palette-dark ion-radio-group,.dcf-palette-dark ion-select,.dcf-palette-dark ion-textarea{--placeholder-color:var(--dcf-color-gray-1)}.dcf-palette-dark ion-input ion-label,.dcf-palette-dark ion-input label,.dcf-palette-dark ion-input::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-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){color:var(--dcf-color-gray-3)}.dcf-palette-dark ion-input:not(:hover),.dcf-palette-dark ion-radio-group:not(:hover),.dcf-palette-dark ion-select:not(:hover),.dcf-palette-dark ion-textarea:not(:hover){--border-color:var(--dcf-color-step-500)}.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)}.dcf-palette-dark .dcf-icon svg{fill:var(--dcf-text-color);fill-opacity:.25;stroke:var(--dcf-text-color)}.dcf-palette-dark .dcf-icon svg *{fill:var(--dcf-color-primary);stroke:var(--dcf-color-gray-1)}.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) :not(:hover){scrollbar-color:var(--dcf-color-gray-2) transparent}html:not(.dcf-palette-dark) *{scrollbar-color:var(--dcf-color-gray-4) transparent;scrollbar-width:thin}html:not(.dcf-palette-dark) ion-content{scrollbar-color:var(--dcf-card-background) transparent}html:not(.dcf-palette-dark) ::-webkit-scrollbar{height:8px;width:8px}html:not(.dcf-palette-dark) ::-webkit-scrollbar-track{background:transparent}html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb{background-clip:content-box;background-color:rgba(0,0,0,.35);border:2px solid transparent;border-radius:8px}html:not(.dcf-palette-dark) ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.5)}