packages/shared-ui/src/globals.css
* {
box-sizing: border-box;
}
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
"Courier New", monospace;
--bg-color: #fff;
--text-color: #000;
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
}
/* dark themes */
.dark,
.dark ~ * {
--bg-color: #000;
--text-color: #fff;
}
.dark,
.dark ~ * {
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);
}
/* light themes */
.light,
.light ~ * {
--bg-color: #fff;
--text-color: #000;
}
html {
padding: 0;
margin: 0;
}
body,
#root {
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main,
footer {
background: var(--bg-color);
color: var(--text-color);
}
main {
flex-grow: 1;
}
footer {
text-align: center;
padding: 10px;
}
a {
color: inherit;
text-decoration: none;
}
.grow {
flex-grow: 1;
}