Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/graphieros/tiny-spark. An elegant, reactive and responsive sparkline chart solution without dependency. tiny-spark.graphieros.com
chart sparkline universal
Something went wrong. Try again.
1.6 kB · 107 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108:root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400;
color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424;
font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a { font-weight: 500; color: #646cff; text-decoration: inherit;}a:hover { color: #535bf2;}
body { margin: 0; display: flex; place-items: center; min-height: 100vh;}
h1 { font-size: 3.2em; line-height: 1.1;}
#app { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center;}
.logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms;}.logo:hover { filter: drop-shadow(0 0 2em #646cffaa);}.logo.vanilla:hover { filter: drop-shadow(0 0 2em #3178c6aa);}
.card { padding: 2em;}
.read-the-docs { color: #888;}
button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s;}button:hover { border-color: #646cff;}button:focus,button:focus-visible { outline: 4px auto -webkit-focus-ring-color;}
@media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; }}
.tiny-spark { background-color: #9A9A9A;}
#app { width: 100%;}
.tiny-spark-tooltip { will-change: top, left;}