116 lines
2.2 KiB
CSS
116 lines
2.2 KiB
CSS
body {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.filter-btn {
|
|
border-radius: 999px !important;
|
|
padding: 8px 22px;
|
|
font-weight: 500;
|
|
border: 1px solid #e5e7eb;
|
|
background: #f8fafc;
|
|
color: #374151;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: #ffffff;
|
|
color: #111827;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
|
|
#search,
|
|
#tahun {
|
|
border-radius: 14px;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#search:focus,
|
|
#tahun:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
|
|
}
|
|
|
|
|
|
#list-regulasi .card {
|
|
border: none !important;
|
|
border-radius: 18px !important;
|
|
padding: 18px 20px !important;
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
#list-regulasi .card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
|
|
#list-regulasi i {
|
|
background: #e8f0ff;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#list-regulasi h6 {
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
|
|
#list-regulasi small {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
#list-regulasi .btn-light {
|
|
border-radius: 20px;
|
|
background: #f3f4f6;
|
|
border: none;
|
|
font-size: 13px;
|
|
padding: 6px 14px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#list-regulasi .btn-light:hover {
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
#list-regulasi .btn-primary {
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
padding: 6px 16px;
|
|
border: none;
|
|
background: #3b82f6;
|
|
color: #fff;
|
|
/* background: linear-gradient(135deg, #3b82f6, #2563eb);*/
|
|
/* box-shadow: 0 6px 16px rgba(59,130,246,0.25);*/
|
|
}
|
|
|
|
#list-regulasi .btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
#list-regulasi .card {
|
|
flex-direction: column !important;
|
|
align-items: flex-start !important;
|
|
gap: 10px;
|
|
}
|
|
|
|
#list-regulasi .card > div:last-child {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
}
|