app/global.css
/* stylelint-disable custom-property-pattern -- RainbowKit does not use kebab-case */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Zen+Kaku+Gothic+Antique&family=Zen+Kaku+Gothic+New&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--quick-nav-display: none;
--component-highlights-item-width: calc(100vw - 100px);
--developer-experience-code-window-background: var(--slate-12);
--palette-orange: #f45f2d;
/* light theme variables */
--palette-bg-hovered: #f6f8fb;
--palette-white: #f0f2f7;
--palette-grey-secondary: #e9e9e9;
/* definitions */
--color-background: var(--palette-white);
--color-background-secondary: #fff;
--color-background-hovered: var(--palette-bg-hovered);
--color-text: #16181a;
--color-text-secondary: #8e8e8e;
color-scheme: light;
}
/* dark theme variables */
.dark {
--quick-nav-display: none;
/* Palette - black */
--palette-orange: #f45f2d;
--palette-bg-black: #16181a;
--palette-bg-black-secondary: #202426;
--palette-bg-hovered: #313537;
/* definitions */
--color-background: var(--palette-bg-black);
--color-background-secondary: var(--palette-bg-black-secondary);
--color-background-hovered: var(--palette-bg-hovered);
--color-text: #fff;
--color-text-secondary: #8e8e8e;
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: auto;
min-height: 100%;
margin: 0;
background-color: var(--color-background);
color: var(--color-text);
font-family: Inter, sans-serif;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.bg-secondary {
background-color: var(--color-background-secondary);
}
.bg-primary {
background-color: var(--color-background);
}
.bg-hovered {
background-color: var(--color-background-hovered);
}
.bg-monarch-orange {
background-color: var(--palette-orange);
}
a {
text-decoration: underline;
}
h1 {
color: var(--color-text);
font-size: 2rem;
font-weight: 400;
line-height: 1.1;
padding-top: 2rem;
padding-bottom: 0.5rem;
}
.table-header {
background-color: var(--color-background-secondary);
font-size: 0.8em;
color: grey;
}
.table-header th {
padding: 1rem;
text-align: center;
}
.table-body {
background-color: var(--color-background-secondary);
border-left: 2px solid var(--color-background-secondary);
}
.table-body td {
padding: 1rem;
text-align: center;
}
.table-body tr:not(.no-hover-effect tr, .no-hover-effect tr):hover {
background-color: var(--palette-bg-hovered);
border-left: 2px solid var(--palette-orange);
}
.table-body-focused {
background-color: var(--palette-bg-hovered);
border-left: 2px solid var(--palette-orange);
}
svg {
display: block;
overflow: visible;
vertical-align: middle;
}
ul {
padding-inline-start: 0;
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, 'Inter', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-feature-settings: normal;
font-size: 14px;
font-variation-settings: normal;
}
/* stylelint-disable-next-line */
#__next {
position: relative;
z-index: 0;
}
@keyframes textSwap {
0%,
50% {
opacity: 1;
}
60%,
100% {
opacity: 0;
}
}
.text-swap {
animation: textSwap 6s infinite;
}
.text-blue {
color: blue;
}
.text-primary {
color: var(--color-text);
}
.text-secondary {
color: var(--color-text-secondary);
}
.steps-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.step {
display: flex;
align-items: center;
position: relative;
margin-bottom: 16px;
}
.step-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
}
.loading-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 3px solid rgba(0, 0, 0, 0.2);
border-top: 3px solid #000;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.step-label {
display: flex;
flex-direction: column;
}
/* Add this at the end of your global.css file */
.custom-scrollbar {
scrollbar-width: none;
scrollbar-color: var(--color-text-secondary) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
width: 2px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--color-text-secondary);
border-radius: 20px;
border: transparent;
}