Show sourcecode
The following files exists in this folder. Click to view.
admin.css
344 lines ASCII Unix (LF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
/* Admin dashboard styles */
body {
display: block;
background: #f0f2f5;
}
.admin-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.admin-header h1 {
margin-bottom: 0;
}
.admin-header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* Live indicator */
.live-indicator {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #dcfce7;
color: #166534;
font-size: 0.75rem;
font-weight: 700;
padding: 0.3rem 0.7rem;
border-radius: 20px;
letter-spacing: 0.05em;
user-select: none;
}
.live-indicator::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
animation: live-pulse 2s ease-in-out infinite;
}
.live-indicator.fetching {
background: #dbeafe;
color: #1e40af;
}
.live-indicator.fetching::before {
background: #3b82f6;
animation: none;
}
.live-indicator.error {
background: #fee2e2;
color: #991b1b;
}
.live-indicator.error::before {
background: #dc2626;
animation: none;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Summary cards */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.card {
background: #fff;
border-radius: 10px;
padding: 1.2rem;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
text-align: center;
}
.card-label {
font-size: 0.85rem;
color: #666;
margin-bottom: 0.4rem;
}
.card-value {
font-size: 1.6rem;
font-weight: 700;
color: #16213e;
}
/* Chart layout */
.chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-box {
background: #fff;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.chart-box h2 {
font-size: 1rem;
margin-bottom: 1rem;
color: #16213e;
}
/* Data tables */
.admin-section {
background: #fff;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
margin-bottom: 1.5rem;
}
.admin-section h2 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.table-actions {
margin-bottom: 0.8rem;
}
.btn-sm {
padding: 0.35rem 1rem;
font-size: 0.85rem;
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
thead {
background: #f8f9fa;
}
th, td {
padding: 0.6rem 0.8rem;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
font-weight: 600;
color: #444;
white-space: nowrap;
}
td {
color: #333;
}
tbody tr:hover {
background: #f8f9ff;
}
/* Group badges */
.badge {
display: inline-block;
padding: 0.15rem 0.6rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
text-transform: capitalize;
}
.badge-placebo {
background: #dbeafe;
color: #1e40af;
}
.badge-control {
background: #fef9c3;
color: #854d0e;
}
/* Group header */
.group-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.group-header h2 {
display: flex;
align-items: center;
gap: 0.6rem;
}
.group-header .badge {
font-size: 0.95rem;
padding: 0.25rem 0.8rem;
}
/* Participant accordion */
.participant-accordion {
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 0.5rem;
overflow: hidden;
}
.participant-accordion[open] {
border-color: #c7d2fe;
}
.participant-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
cursor: pointer;
user-select: none;
background: #fafbfc;
transition: background 0.15s;
gap: 1rem;
flex-wrap: wrap;
}
.participant-summary:hover {
background: #f0f4ff;
}
.participant-summary::marker,
.participant-summary::-webkit-details-marker {
color: #9ca3af;
}
.participant-email {
font-weight: 600;
color: #16213e;
font-size: 0.95rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.participant-stats {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.stat-chip {
display: inline-block;
background: #e0e7ff;
color: #3730a3;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.stat-chip-pending {
background: #fef3c7;
color: #92400e;
}
/* Expanded participant details */
.participant-details {
padding: 0.75rem 1rem 1rem;
border-top: 1px solid #e5e7eb;
background: #fff;
}
.detail-meta {
font-size: 0.82rem;
color: #6b7280;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #f3f4f6;
}
.detail-block {
margin-bottom: 1rem;
}
.detail-block:last-child {
margin-bottom: 0;
}
.detail-block h3 {
font-size: 0.9rem;
color: #374151;
margin-bottom: 0.5rem;
}
.detail-block table {
font-size: 0.85rem;
}
.detail-block tfoot td {
border-top: 2px solid #e5e7eb;
border-bottom: none;
background: #f9fafb;
}
/* Responsive */
@media (max-width: 768px) {
.chart-row {
grid-template-columns: 1fr;
}
.admin-header {
flex-direction: column;
align-items: flex-start;
}
}