feat: add citrus-design stylesheet to define custom admin theme and component styling

2026-04-29 07:41:44 +03:00
parent 956b2ade61
commit 4829a8ae97
1 changed files with 108 additions and 0 deletions
@@ -164,6 +164,114 @@
        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 {
        padding: 4px 10px !important;
        font-size: 12.5px !important;