ABC du WEB: CCS

@charset "UTF-8"; :root { --initial-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --size-body: 85rem; font-size: max(100%, 16px); --cols: 12; --gutter: 2.375rem; --radius: var(--small-gutter); --font-weight-headers: 400; } :root[class*="contrast"] { --font-weight-headers: 500; } :root:not([class*="dys"]) { --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root.dyslexic { --base-font: 'Accessible DfA', var(--initial-font); --font-family-headers: 'Accessible DfA', var(--initial-font); } :root.dyslexic-comic { --base-font: 'Comic Sans MS', var(--initial-font); --font-family-headers: 'Comic Sans MS', var(--initial-font); } :root.initial-font { --initial-font: ""; --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root[class*="dys"] .no-dyslexic, .initial-font { font-family: var(--initial-font); } .font-family-code { font-family: var(--font-family-monospace) !important; } @media (max-width: 19.9375rem) { :root { --gutter: 1.875rem; --font-size: 1.0625rem; } } @media (min-width: 20rem) { :root { --font-size: 1rem; } @media (max-width: 47.9375rem) { :root { --gutter: 1.875rem; } } @media (min-width: 48rem) { @media (min-width: 64rem) { :root { --size-body: 80.625rem; } } } } :root.dyslexic { --font-size: calc(1rem* .9); } :root.dyslexic-comic { --font-size: 1rem; } :root { --lh: 1.55; color-scheme: dark light; --font-family: var(--base-font); --blue: rgb(47, 110, 190); --darkblue: rgb(0, 36, 94); --lightblue: rgb(184, 207, 241); --applegreen: rgb(90, 130, 12); --lightgreen: rgb(212, 249, 201); --limegreen: rgb(210, 225, 0); --green: rgb(42, 129, 62); --orange: rgb(193, 71, 5); --orangered: rgb(255, 69, 0); --raspberry: rgb(205, 0, 55); --red: rgb(213, 43, 30); --yellow: rgb(255, 182, 18); --maroon: rgb(154, 90, 12); --antigua: rgb(130, 196, 206); --lightgray: rgb(211, 211, 211); --whitesmoke: rgb(252, 252, 252); --teal: rgb(0, 122, 124); --carbon: rgb(111, 113, 116); --basic-color: black; --basic-color-reverse: white; --outline-color: var(--link-color, blue); --outline-offset: 0.125rem; --outline-width: 0.125rem; --outline-style: solid; --text-decoration-style: dotted; --text-decoration-color: var(--primary-color); --text-decoration-thickness: 0.0625em; --small-radius: calc(var(--radius) / 2); --font-family-monospace: Consolas, Courier, monospace; --sticky-top: var(--header-outer-height); --negative-gutter: calc(var(--gutter) / 2 * -1); --half-gutter: calc(var(--gutter) / 2); --small-gutter: calc(var(--gutter) / 4); --tiny-gutter: calc(var(--gutter) / 8); --double-gutter: calc(var(--gutter) * 2); --negative-half-gutter: calc(var(--negative-gutter) / 2); --negative-small-gutter: calc(var(--negative-gutter) / 4); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-hero: rgb(212, 207, 205); --background-color-hero-alpha: rgba(0, 0, 0, 0.05); --background-color-menus: rgb(255, 255, 255); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(86, 98, 111); --heading-color: rgb(17, 17, 17); --box-shadow: rgb(219, 219, 219); --box-shadow-light: rgb(219, 219, 219); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.3); --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(39, 124, 58); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-radius: 0.3125rem; --error-color: var(--raspberry); --message-dialog-error: var(--basic-color-reverse); --highlight-sentence: rgb(99, 54, 222); --code-area-background: rgba(73, 29, 29, 0.05); --code-area-foreground: var(--basic-color); --code-area-border: rgb(115, 46, 46); --set-outline-color: var(--green); } :root[class*="contrast"] { filter: contrast(105%); --outline-color: var(--basic-color, blue); --outline-style: solid; --outline-offset: 0.125rem; --outline-width: 0.1875rem; --text-decoration-style: solid; --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(0, 78, 222); --background-color-hero: rgb(239, 239, 241); --background-color-hero-alpha: rgb(236, 238, 241); --text-decoration-color: currentColor; --box-shadow: rgb(186, 186, 186); --primary-color: rgb(50, 50, 50); --heading-color: rgb(0, 0, 0); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-menus: rgb(255, 255, 255); } :root[class*="contrast"] img { filter: contrast(110%); } :root.prefers-contrast { --primary-color: rgb(16, 16, 16); --heading-color: black; } @media (prefers-color-scheme: dark) { :root { --applegreen: rgb(130, 190, 0); --green: yellowgreen; --blue: rgb(138, 180, 249); --limegreen: rgb(255, 253, 0); --carbon: rgb(137, 139, 143); --basic-color: white; --basic-color-reverse: black; --background-color-page: rgb(17, 23, 39); --background-color-secondary: rgb(29, 36, 63); --background-color-hero: rgb(8, 15, 19); --background-color-hero-alpha: rgba(0, 0, 0, 0.15); --background-color-menus: rgb(15, 14, 38); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(175, 191, 209); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(34, 32, 68); --box-shadow-light: rgb(49, 54, 65); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.5); --link-color: rgb(114, 149, 255); --link-color-alternate: var(--yellow); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-secondary-background: rgb(17, 17, 17); --button-secondary-foreground: rgb(218, 218, 218); --error-color: rgb(255, 169, 174); --highlight-sentence: var(--antigua); --code-area-background: rgb(21, 13, 31); --code-area-border: rgb(104, 68, 148); --set-outline-color: var(--antigua); } :root[class*="contrast"] { --primary-color: rgb(238, 238, 238); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(136, 136, 136); --box-shadow-light: var(--box-shadow); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 1); --background-color-page: rgb(17, 21, 25); --background-color-secondary: rgb(17, 21, 25); --background-color-hero: rgb(0, 0, 0); --background-color-hero-alpha: rgb(0, 0, 0); --background-color-menus: var(--background-color-secondary); --link-color: var(--applegreen); --link-color-alternate: rgb(255, 204, 2); --button-secondary-background: rgb(0, 0, 0); } } @media (max-width: 47.9375rem) { :root { --header-outer-height: 3.125rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-width: 48rem) and (max-width: 85.3125rem) { :root { --header-outer-height: 3.75rem; --size-icon-header: calc(var(--header-outer-height) * .4); } } @media (min-width: 85.375rem) { @media (max-height: 85.3125rem) { :root { --header-outer-height: 4.0625rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-height: 85.375rem) { :root { --header-outer-height: 4.375rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } }

ABC du WEB

CCS

Événement de seul-jour

Événement de seul-jour