core-styles.demo.css

/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */
/*! core-styles.demo.css */:root{--global-font-family--sans:"-apple-system","BlinkMacSystemFont","Segoe UI","Helvetica","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji";--sans:var(--global-font-family--sans)}:is(:where(:is(.c-recognition--style-dark,:is(.o-section--style-dark,.section--dark),.col-dark,.s-footer):not(:is(.c-recognition--style-light,:is(.o-section--style-muted,.section--muted),:is(.o-section--style-light,.section--light),:is(.c-card--standard,.card--standard),:is(.c-card--standard-1,.c-card--standard-2,.c-card--standard-3),:is(.c-card--plain,.card--plain,[class*=card--plain-])) *))){--global-color-accent--xxx-light:#fff;--global-color-accent--xx-light:#dfeafe;--global-color-accent--x-light:#caddfe;--global-color-accent--light:#aac7ff;--global-color-accent--normal:#3d6acc;--global-color-accent--dark:#039;--global-color-accent--x-dark:#026;--global-color-accent--xx-dark:#013;--global-color-accent--xxx-dark:#021230}:is(:where(:is(.c-recognition--style-dark,:is(.o-section--style-dark,.section--dark),.col-dark,.s-footer) :is(.c-recognition--style-light,:is(.o-section--style-muted,.section--muted),:is(.o-section--style-light,.section--light),:is(.c-card--standard,.card--standard),:is(.c-card--standard-1,.c-card--standard-2,.c-card--standard-3),:is(.c-card--plain,.card--plain,[class*=card--plain-])))){--global-color-accent--xxx-light:#dfeafe;--global-color-accent--xx-light:#caddfe;--global-color-accent--x-light:#aac7ff;--global-color-accent--light:#3d6acc;--global-color-accent--normal:#039;--global-color-accent--dark:#026;--global-color-accent--x-dark:#013;--global-color-accent--xx-dark:#021230;--global-color-accent--xxx-dark:#000a22}body{font-family:var(--global-font-family--sans);line-height:1.4}html{font-size:62.5%}body{font-size:1.6rem}:is(main>dl:not(.no-demo-styles)):is(dt,dd){color:#484848;font-family:var(--global-font-family--sans);line-height:normal}:is(main>dl:not(.no-demo-styles)) dt{font-size:1.6rem;margin-bottom:10px}:is(main>dl:not(.no-demo-styles)) dt{font-weight:var(--bold)}:is(main>dl:not(.no-demo-styles)) dl dt{font-weight:var(--medium)}:is(main>dl:not(.no-demo-styles)) dl dl dt{font-weight:var(--regular)}:is(main>dl:not(.no-demo-styles)) dt:not(:first-of-type){margin-top:20px}:is(main>dl:not(.no-demo-styles)) dd{margin-bottom:10px;margin-left:25px}:is(main>dl:not(.no-demo-styles)) dl:not(.no-demo-styles){margin-block:0;padding-left:unset}body>main{margin-inline:auto;padding-block:1em;width:80vw}body:has(main>section){--color-light:var(--global-color-primary--xx-light);--color-dark:var(--global-color-primary--x-light);background-color:var(--color-dark);background:repeating-linear-gradient(90deg,var(--color-dark),var(--color-dark) 1px,var(--color-light) 1px,var(--color-light) 20px)}hr{margin-bottom:var(--global-space--hr-buffer-below);margin-top:var(--global-space--hr-buffer-above)}body:has(body>.o-section){--color-light:var(--global-color-primary--xx-light);--color-dark:var(--global-color-primary--x-light);background-color:var(--color-dark);background:repeating-linear-gradient(-45deg,var(--color-dark),var(--color-dark) 1px,var(--color-light) 1px,var(--color-light) 20px)}.x-link{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.5;pointer-events:none}.x-link--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.5;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed;text-decoration-thickness:var(--global-border-width--normal)}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-message,[class*=message--])>:first-child{margin-top:0}:is(.c-message,[class*=message--])>:last-child{margin-bottom:0}:is(.c-message--scope-inline,.message--scope-inline)>*{display:inline}:is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-inline,.message--scope-inline):before{color:var(--icon-color);margin-right:.5ch}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-success--x-dark)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{content:"✓"}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-warning--dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-danger--dark);color:var(--global-color-danger--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-section,.message--scope-section){border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}:is(.c-message--type-info,.message--type-info):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}:is(.c-message--type-extra,.message--type-extra):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}:is(.c-message--scope-global,.message--scope-global){background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);border-width:0;color:var(--global-color-primary--xx-light);padding-block:8px;padding-inline:12px;text-align:center}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link]))){color:var(--global-color-accent--normal);text-decoration:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link]))):hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed;text-decoration-thickness:var(--global-border-width--normal)}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link]))):active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link]))):is(*,:hover,:active){color:inherit}.demo-grid{display:grid;gap:var(--global-space--grid-gap)}.demo-grid>figure{margin:unset}.demo-grid--plain{--min-width:400px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min-width)),1fr))}.demo-grid--boxes>*{border:var(--global-border--normal);padding:10px;text-align:center}.demo-grid--square{--size:115px;grid-template-columns:repeat(auto-fill,var(--size))}.demo-grid--square:before{content:"";grid-column:1/1;grid-row:1/1;padding-bottom:100%;width:0}.demo-grid--square>:first-child{grid-column:1/1;grid-row:1/1}.demo-narrow-paragraphs p{margin:10px;max-width:40ch}