learning_ai_notes/web/src/app/globals.css

102 lines
1.8 KiB
CSS

@import "tailwindcss";
* {
box-sizing: border-box;
}
html {
background: var(--ml-bg-canvas);
}
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(180deg, var(--ml-bg-canvas) 0%, #0b1020 100%);
color: var(--ml-text-primary);
font-family: var(--ml-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
}
.app-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 280px 1fr;
}
.sidebar {
border-right: 1px solid var(--ml-border-default);
background: rgba(12, 17, 31, 0.82);
backdrop-filter: blur(16px);
}
.main-panel {
min-width: 0;
padding: var(--ml-space-8);
}
.surface-card {
border: 1px solid var(--ml-border-default);
border-radius: var(--ml-radius-md);
background: rgba(18, 23, 37, 0.86);
box-shadow: var(--ml-elevation-md);
}
.surface-muted {
border: 1px solid var(--ml-border-default);
border-radius: var(--ml-radius-sm);
background: rgba(26, 35, 53, 0.72);
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--ml-radius-pill);
padding: 6px 10px;
background: rgba(90, 140, 255, 0.14);
color: var(--ml-text-primary);
font-size: var(--ml-fs-sm);
}
.input-shell {
width: 100%;
border: 1px solid var(--ml-border-default);
border-radius: var(--ml-radius-sm);
background: rgba(10, 15, 28, 0.88);
color: var(--ml-text-primary);
padding: 12px 14px;
}
.page-grid {
display: grid;
gap: var(--ml-space-6);
}
@media (max-width: 980px) {
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
border-right: 0;
border-bottom: 1px solid var(--ml-border-default);
}
}