/* ============================================================================
SMART TEACHER — Design System
Main entry point. Imports tokens, components, and provides base styles.
============================================================================
USAGE (PWA Teacher — desktop + mobile):
USAGE (TWA Student / Parent — inside Telegram):
Add class="twa" or data-twa to or .
FILE STRUCTURE:
design-tokens.css — CSS custom properties (colors, spacing, typography)
components.css — All UI component styles
twa-theme.css — Telegram Web App theme overrides
design-system.css — This file: imports + base/reset + utilities
============================================================================ */
@import url('./design-tokens.css');
@import url('./components.css');
/* ============================================================================
1. CSS RESET & BASE STYLES
Minimal, modern reset for consistent cross-browser rendering.
============================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: var(--text-base);
font-weight: var(--weight-normal);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
min-height: 100dvh;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: var(--color-primary-600);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
color: var(--color-text);
}
/* Focus visible for accessibility */
:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--color-neutral-300);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-400);
}
/* ============================================================================
2. TYPOGRAPHY UTILITIES
============================================================================ */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.text-primary { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-primary-600); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-danger { color: var(--color-danger-600); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================================
3. LAYOUT UTILITIES
============================================================================ */
/* App layout with sidebar (desktop PWA) */
/*
HTML:
*/
.app-layout {
display: flex;
min-height: 100vh;
min-height: 100dvh;
}
.app-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.app-main {
margin-left: var(--sidebar-width);
}
.app-main--sidebar-collapsed {
margin-left: var(--sidebar-width-collapsed);
}
}
/* App header */
/*
HTML:
*/
.app-header {
position: sticky;
top: 0;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--header-height);
padding: 0 var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
z-index: var(--z-sticky);
}
.app-header__title {
flex: 1;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-header__actions {
display: flex;
align-items: center;
gap: var(--space-1);
}
.app-header__menu-btn {
margin-left: calc(var(--space-2) * -1);
}
@media (min-width: 1024px) {
.app-header__menu-btn {
display: none;
}
}
/* Main content area */
.app-content {
flex: 1;
padding: var(--space-4);
padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
}
/* Add bottom padding when bottom nav is present */
.app-content--with-bottom-nav {
padding-bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
.app-content {
padding: var(--space-6);
}
}
@media (min-width: 1024px) {
.app-content {
padding: var(--space-8);
}
}
/* ============================================================================
4. FLEX / GRID HELPERS
============================================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.grid { display: grid; }
/* ============================================================================
5. SPACING UTILITIES
============================================================================ */
/* Margin */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* ============================================================================
6. DISPLAY & VISIBILITY
============================================================================ */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Responsive visibility */
@media (max-width: 479px) {
.hide-on-mobile { display: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
.hide-on-small-tablet { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.hide-on-tablet { display: none !important; }
}
@media (min-width: 1024px) {
.hide-on-desktop { display: none !important; }
}
@media (max-width: 767px) {
.show-on-tablet-up { display: none !important; }
}
@media (max-width: 1023px) {
.show-on-desktop { display: none !important; }
}
/* ============================================================================
7. RESPONSIVE TYPOGRAPHY SCALING
============================================================================ */
@media (min-width: 768px) {
:root {
--text-base: 0.9375rem; /* 15px */
--text-md: 1rem; /* 16px */
--text-lg: 1.1875rem; /* 19px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.625rem; /* 26px */
--text-3xl: 2rem; /* 32px */
}
}
@media (min-width: 1024px) {
:root {
--text-base: 1rem; /* 16px */
--text-md: 1.0625rem; /* 17px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
}
}
/* ============================================================================
8. PAGE-LEVEL PATTERNS
============================================================================ */
/* Page title section */
/*
HTML:
*/
.page-header {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
.page-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.page-header__title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin: 0;
}
.page-header__subtitle {
font-size: var(--text-base);
color: var(--color-text-secondary);
margin: var(--space-1) 0 0;
}
/* Section */
/*
HTML:
*/
.section {
margin-bottom: var(--space-8);
}
.section__title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
margin: 0 0 var(--space-4);
}
/* Toolbar (filters row) */
/*
HTML:
*/
.toolbar {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
@media (min-width: 480px) {
.toolbar {
flex-direction: row;
align-items: center;
}
.toolbar .search-bar {
flex: 1;
max-width: 360px;
}
.toolbar .select-wrapper {
width: auto;
min-width: 160px;
}
}
/* Content list (alternative to card-grid) */
.content-list {
display: flex;
flex-direction: column;
}
.content-list__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-divider);
transition: background-color var(--duration-fast) var(--ease-default);
}
.content-list__item:last-child {
border-bottom: none;
}
.content-list__item:hover {
background-color: var(--color-surface-hover);
}
.content-list__item--clickable {
cursor: pointer;
}
/* ============================================================================
9. OVERLAY FOR MOBILE SIDEBAR
============================================================================ */
/*
HTML (add when sidebar is open on mobile):
*/
.sidebar-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: calc(var(--z-sidebar) - 1);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-slow) var(--ease-default);
}
.sidebar-overlay--visible {
opacity: 1;
pointer-events: auto;
}
/* ============================================================================
10. PRINT STYLES
============================================================================ */
@media print {
.sidebar,
.bottom-nav,
.fab,
.toast-container,
.app-header__menu-btn {
display: none !important;
}
.app-main {
margin-left: 0 !important;
}
body {
background: white;
color: black;
}
.card {
box-shadow: none;
border: 1px solid #ddd;
break-inside: avoid;
}
}