Eberton
24650484f1
Projeto ainda em desenvolvimento. Enviado para o repositório para manter estado atual.
150 lines
3.1 KiB
CSS
150 lines
3.1 KiB
CSS
/* ===== PAGE HEADER ===== */
|
|
.batch_title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.batch_title h1 {
|
|
font-size: var(--font-xl);
|
|
color: var(--color-text-dark);
|
|
margin: 0;
|
|
margin-right: var(--space-lg);
|
|
}
|
|
|
|
/* ===== SEARCH FORM ===== */
|
|
.form_batch_search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.form_batch_search label {
|
|
font-size: var(--font-sm);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.form_batch_search input {
|
|
height: 32px;
|
|
padding: 0 var(--space-sm);
|
|
font-size: var(--font-sm);
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: var(--border-radius-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.form_batch_search input:focus {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.form_batch_search button {
|
|
height: 32px;
|
|
padding: 0 var(--space-sm);
|
|
border: none;
|
|
border-radius: var(--border-radius-sm);
|
|
background: var(--color-primary);
|
|
color: var(--color-text-light);
|
|
cursor: pointer;
|
|
transition: background var(--transition-speed);
|
|
}
|
|
|
|
.form_batch_search button:hover {
|
|
background: var(--color-secondary);
|
|
}
|
|
|
|
/* ===== CLEAR FILTER ===== */
|
|
.btn-clear-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 32px;
|
|
padding: 0 var(--space-sm);
|
|
background: var(--color-danger-light);
|
|
color: var(--color-danger);
|
|
border-radius: var(--border-radius-sm);
|
|
text-decoration: none;
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.btn-clear-filter:hover {
|
|
background: var(--color-danger);
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
/* ===== NEW BUTTON ===== */
|
|
.batch_title > a {
|
|
height: 32px;
|
|
padding: 0 var(--space-md);
|
|
background: var(--color-success);
|
|
color: var(--color-text-light);
|
|
border-radius: var(--border-radius-sm);
|
|
text-decoration: none;
|
|
font-size: var(--font-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
transition: background var(--transition-speed);
|
|
}
|
|
|
|
.batch_title > a:hover {
|
|
background: var(--color-success);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ===== TABLE ===== */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--color-bg-white);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
table th {
|
|
text-align: left;
|
|
padding: var(--space-sm);
|
|
font-size: var(--font-sm);
|
|
background: var(--color-bg-dark);
|
|
color: var(--color-text-light);
|
|
font-weight: 500;
|
|
}
|
|
|
|
table td {
|
|
padding: var(--space-sm);
|
|
font-size: var(--font-md);
|
|
border-bottom: 1px solid var(--color-border-subtle);
|
|
}
|
|
|
|
table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
table tbody tr:hover {
|
|
background: var(--color-bg-light);
|
|
}
|
|
|
|
/* ===== ACTION ICONS ===== */
|
|
table a {
|
|
color: var(--color-primary);
|
|
transition: color var(--transition-speed);
|
|
}
|
|
|
|
table a:hover {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
/* DELETE BUTTON */
|
|
.btn-icon-trash {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-danger);
|
|
cursor: pointer;
|
|
transition: color var(--transition-speed);
|
|
}
|
|
|
|
.btn-icon-trash:hover {
|
|
color: var(--color-danger);
|
|
opacity: 0.7;
|
|
} |