101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
:root {
|
|
--apple-bg: #FBFBFB;
|
|
--apple-card: #FFFFFF;
|
|
--apple-text: #1D1D1F;
|
|
--apple-text-muted: #86868B;
|
|
--apple-accent: #0071E3;
|
|
--apple-border: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--apple-bg);
|
|
color: var(--apple-text);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
border-bottom: 1px solid var(--apple-border);
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--apple-card);
|
|
border: 1px solid var(--apple-border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table thead th {
|
|
background: #F5F5F7;
|
|
border-bottom: 1px solid var(--apple-border);
|
|
color: var(--apple-text-muted);
|
|
font-weight: 500;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: 16px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid var(--apple-border);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--apple-accent);
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
padding: 8px 20px;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0077ED;
|
|
}
|
|
|
|
.product-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.status-instock {
|
|
color: #34C759;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-outofstock {
|
|
color: #FF3B30;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-input {
|
|
border-radius: 10px;
|
|
border: 1px solid var(--apple-border);
|
|
background-color: #F5F5F7;
|
|
padding: 10px 16px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.search-input:focus {
|
|
background-color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
|
|
border-color: var(--apple-accent);
|
|
outline: none;
|
|
} |