Admin Control Panel v2.0

✎ Editing: cadastrar_evento.css ← Back

:root{
    --bg:#f6f7f9;
    --card:#fff;
    --text:#111827;
    --muted:#6b7280;
    --primary:#ff2b67;
    --primary-600:#e0265c;
    --border:#e5e7eb;
    --danger:#ef4444;
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{
    padding-top: 70px;
    background:var(--bg);
    color:var(--text);
    font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  }
  
  /* ===== Layout ===== */
  .container{
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
  }
  
  .h1{
    font-size: 22px;
    font-weight: 700;
    margin: 6px 0 14px;
    display:flex; align-items:center; gap:10px;
  }
  
  .card{
    background:var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    padding: 18px;
    margin-bottom: 16px;
  }
  
  .card h2{ font-size: 18px; margin: 0 0 12px; }
  .muted{ color: var(--muted); }
  
  /* ===== Grids ===== */
  .grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .grid-3{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
  }
  .grid-4{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
  }
  
  /* ===== Form ===== */
  .form-row{ display:flex; flex-direction:column; gap:8px; min-width:0; }
  .label{ font-weight:600; font-size:13px; color:#374151; }
  
  /* controles (inclui date/time) */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="file"],
  select,
  textarea{
    width:100%;
    border:1px solid var(--border);
    background:#fff;
    border-radius:10px;
    padding:12px 12px;
    min-height: 44px;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  
  textarea{ min-height: 110px; resize: vertical; }
  input[type="file"]{ padding: 10px; min-height: auto; }
  
  /* foco consistente */
  input:focus,
  select:focus,
  textarea:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,43,103,.12);
  }
  
  /* iOS: evita zoom ao focar */
  @supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px; }
  }
  
  /* números: mantém setas visíveis, mas padroniza altura */
  input[type="number"]{
    -moz-appearance: textfield;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{
    height: 44px;
  }
  
  /* date/time: garante alinhamento do ícone nativo */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator{
    opacity:.75;
    cursor:pointer;
  }
  
  /* ajuda abaixo do campo */
  .help{ font-size:12px; color:var(--muted); }
  
  /* ===== Buttons ===== */
  .actions{ display:flex; gap:10px; flex-wrap:wrap; }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 10px 14px; border-radius:10px; border:1px solid transparent;
    background:#f3f4f6; color:#111; cursor:pointer; font-weight:600;
    transition: filter .2s ease, background .2s ease, border-color .2s ease;
    text-decoration:none; white-space:nowrap;
  }
  .btn:hover{ filter:brightness(.97); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ background:var(--primary-600); }
  
  .btn-outline{ background:#fff; border-color:var(--border); }
  .btn-danger{ background:#fee2e2; color:#b91c1c; }
  
  /* ===== Table ===== */
  .table{
    width:100%; border-collapse:collapse;
    border:1px solid var(--border); border-radius:12px; overflow:hidden;
  }
  .table th,.table td{
    padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:14px;
  }
  .table th{ background:#fafafa; color:#374151; font-weight:600; }
  .table tr:last-child td{ border-bottom:0; }
  
  .badge{
    display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#3730a3;
  }
  
  /* feedback */
  .ok{ color:#16a34a; font-weight:600; }
  .err{ color:#dc2626; font-weight:600; }
  
  /* ===== Responsive ===== */
  @media (max-width: 900px){
    .grid-3,.grid-4{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 680px){
    .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
    .card{ padding: 16px; }
  
    /* botões empilham melhor */
    .actions{ flex-direction: column; align-items: stretch; }
    .actions .btn{ width:100%; }
  
    /* tabela vira "cards" legíveis */
    .table{ border-radius:12px; }
    .table thead{ display:none; }
    .table tbody tr{
      display:block;
      border-bottom:1px solid var(--border);
      background:#fff;
      margin: 0;
    }
    .table td{
      display:flex;
      justify-content:space-between;
      gap:14px;
      border-bottom:0;
      padding:10px 12px;
    }
    .table td::before{
      content: attr(data-label);
      font-weight:600; color:#374151;
    }
    .table tbody tr + tr{ border-top:1px solid var(--border); }
  }

Cancel