diff options
Diffstat (limited to 'demos/react-fast-refresh-test/src/index.css')
-rw-r--r-- | demos/react-fast-refresh-test/src/index.css | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/demos/react-fast-refresh-test/src/index.css b/demos/react-fast-refresh-test/src/index.css new file mode 100644 index 000000000..0917f6c7a --- /dev/null +++ b/demos/react-fast-refresh-test/src/index.css @@ -0,0 +1,236 @@ +@import "./colors.css"; + +:root { + --heading-font: "Space Mono", system-ui; + --body-font: "IBM Plex Sans", system-ui; + + --color-brand: #02ff00; + --color-brand-muted: rgb(2, 150, 0); + + --padding-horizontal: 90px; + + --page-background: black; + --page-background-alpha: rgba(0, 0, 0, 0.8); + + --result__background-color: black; + --result__primary-color: var(--color-brand); + --result__foreground-color: white; + --result__muted-color: rgb(165, 165, 165); + + --card-width: 352px; + + --page-width: 1152px; + + --snippets_container-background-unfocused: #171717; + --snippets_container-background-focused: #0017e9; + --snippets_container-background: var( + --snippets_container-background-unfocused + ); + --snippets_container-muted-color: rgb(153, 153, 153); +} + +body { + color: white; + margin: 0; + + padding: 0; + font-family: var(--body-font); + background-color: var(--page-background); + color: var(--result__muted-color); + display: flex; + flex-direction: column; + height: 100%; +} + +.Subtitle { + text-align: center; + font-size: 4em; + margin: 0; + padding: 0; + margin-bottom: 0.25em; + + align-items: center; + display: flex; + flex-direction: row; +} + +#reactroot, +#__next, +body, +html { + height: 100%; +} + +.Title { + color: var(--color-brand); + font-family: var(--heading-font); + font-weight: 700; + margin-top: 48px; + font-size: 48px; + text-transform: capitalize; + text-align: center; +} + +.Description { + text-align: center; +} + +.main { + display: flex; + flex-direction: column; + height: 100%; +} + +header, +.main { + width: 650px; + margin: 0 auto; +} + +section { + width: 650px; +} + +header { + margin-bottom: 48px; +} + +footer { + flex-shrink: 0; +} + +#reactroot, +#__next { + display: flex; + flex-direction: column; + justify-content: center; +} + +section { + height: 300px; + display: flex; + flex-direction: column; +} + +.timer { + font-weight: normal; +} + +.ProgressBar-container { + width: 100%; + display: block; + position: relative; + border: 1px solid var(--color-brand-muted); + border-radius: 4px; + + height: 92px; +} + +.ProgressBar { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + background-color: var(--color-brand); + transform-origin: top left; + border-radius: 4px; + transform: scaleX(var(--progress-bar, 0%)); +} + +.Bundler-container { + background-color: var(--snippets_container-background-focused); + font-size: 64px; + font-weight: bold; + color: white; + left: 0; + right: 0; + padding: 0.8em 0.8em; +} + +.Bundler-updateRate { + font-size: 0.8em; + font-weight: normal; + display: flex; + color: var(--result__muted-color); +} + +.interval:before { + content: var(--interval, "16"); +} + +.highlight { + color: white; +} + +.timer:after { + content: var(--timestamp); + font-variant-numeric: tabular-nums; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + display: inline; + font-weight: 500; + color: white; + width: 100%; +} + +.SectionLabel { + font-weight: 300; + font-family: var(--heading-font); + text-align: center; + width: 100%; + font-weight: 700; + margin-top: 24px; +} + +.FooterLabel { + margin-top: 0; + margin-bottom: 12px; +} + +.Spinner-container { + --spinner-muted: rgb(0, 255, 0); + --spinner-primary: rgb(0, 60, 255); + + width: 96px; + height: 96px; + border-radius: 50%; + background-color: var(--page-background); + border-top: 1.1em solid var(--spinner-muted); + border-right: 1.1em solid var(--spinner-muted); + border-bottom: 1.1em solid var(--spinner-muted); + border-left: 1.1em solid var(--spinner-primary); + + transform: rotate(var(--spinner-rotate, 12deg)); +} + +.Spinners { + display: grid; + grid-auto-flow: column; + justify-content: space-between; + + width: 100%; +} + +.Spinner-1.Spinner-container { + --spinner-muted: var(--spinner-1-muted); + --spinner-primary: var(--spinner-1-primary); +} + +.Spinner-2.Spinner-container { + --spinner-muted: var(--spinner-2-muted); + --spinner-primary: var(--spinner-2-primary); +} + +.Spinner-3.Spinner-container { + --spinner-muted: var(--spinner-3-muted); + --spinner-primary: var(--spinner-3-primary); +} + +.Spinner-4.Spinner-container { + --spinner-muted: var(--spinner-4-muted); + --spinner-primary: var(--spinner-4-primary); +} |