admin-frontend/src/app/styles.css - master - DaniilSk/DesignLab

admin-frontend/src/app/styles.css
108 строк2 KB
Даниил
feat(admin): initialize admin frontend
13 июл 2026, 23:42
13 июл 2026, 23:421cc58f6
:root {
  --bg: #f0f0f0;
  --panel: #ffffff;
  --text: #131313;
  --muted: rgba(19, 19, 19, 0.56);
  --pink: #f382b5;
  --black: #131313;
  --radius: 24px;
  font-family: "TT Travels", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; }

.admin-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-header h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}

.page-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.panel {
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.button.secondary { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px rgba(19,19,19,.1); }
.button.danger { background: #e5484d; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field span { color: var(--muted); font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(19,19,19,.12);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
}

.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px; border-bottom: 1px solid rgba(19,19,19,.08); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }

.status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243,130,181,.16);
  color: #a52668;
  font-weight: 800;
  font-size: 12px;
}

.empty, .error { color: var(--muted); padding: 24px; }
.error { color: #b42318; }

@media (max-width: 900px) {
  .grid.cols-4, .grid.cols-2 { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
}