feat: add citrus-design stylesheet to define custom admin theme and component styling
This commit is contained in:
@@ -164,6 +164,114 @@
|
|||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- BUTTONS REFACTOR (Premium Look) --- */
|
||||||
|
.btn {
|
||||||
|
font-family: 'Inter', sans-serif !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
border-radius: 10px !important; /* Modern rounded corners */
|
||||||
|
padding: 8px 18px !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
gap: 8px !important; /* Spacing for icons */
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn i {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(0px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #3b82f6 !important; /* Modern Blue */
|
||||||
|
border-color: #3b82f6 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #2563eb !important;
|
||||||
|
border-color: #2563eb !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #64748b !important;
|
||||||
|
border-color: #64748b !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: #475569 !important;
|
||||||
|
border-color: #475569 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background-color: #10b981 !important;
|
||||||
|
border-color: #10b981 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
background-color: #059669 !important;
|
||||||
|
border-color: #059669 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background-color: #06b6d4 !important;
|
||||||
|
border-color: #06b6d4 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background-color: #f59e0b !important;
|
||||||
|
border-color: #f59e0b !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background-color: #ef4444 !important;
|
||||||
|
border-color: #ef4444 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small and Large variants */
|
||||||
|
.btn-sm {
|
||||||
|
padding: 5px 12px !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
padding: 12px 24px !important;
|
||||||
|
font-size: 15px !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outline Buttons */
|
||||||
|
.btn-outline-primary {
|
||||||
|
border-color: #3b82f6 !important;
|
||||||
|
color: #3b82f6 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary:hover {
|
||||||
|
background: #3b82f6 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-main li ul li a {
|
.nav-main li ul li a {
|
||||||
padding: 4px 10px !important;
|
padding: 4px 10px !important;
|
||||||
font-size: 12.5px !important;
|
font-size: 12.5px !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user