changes of ui in dropwon select opptions and bottun colours add

2026-01-31 11:45:26 +05:30
parent a7eec85b8f
commit 438f84e284
12 changed files with 288 additions and 206 deletions
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,4 +1,4 @@
-/* RESET */
+/* ================= RESET ================= */
 * {
    margin: 0;
    padding: 0;
@@ -11,13 +11,12 @@ body {
    display: flex;
 }

-/* NAVBAR */
+/* ================= NAVBAR ================= */
 .navbar {
    width: 100%;
    height: 60px;
    background-color: #007bff;
    display: flex;
-    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
@@ -26,18 +25,6 @@ body {
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    gap: 10px;
-}
-
-.nav-logo {
-    height: 80px;
-    width: auto;
-    filter: brightness(0) invert(1);
-}
-
-.toggle-btn {
-    font-size: 26px;
-    cursor: pointer;
 }

 .nav-left {
@@ -46,7 +33,19 @@ body {
    gap: 15px;
 }

-/* SIDEBAR */
+.nav-logo {
+    height: 46px;
+    filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+    font-size: 26px;
+    cursor: pointer;
+    display: none;
+    /* hidden on desktop */
+}
+
+/* ================= SIDEBAR ================= */
 .sidebar {
    width: 250px;
    background: #ffffff;
@@ -58,15 +57,10 @@ body {
    overflow-y: auto;
    border-right: 1px solid #e5d1be;
    transition: 0.3s;
-
    display: flex;
    flex-direction: column;
 }

-.sidebar.hide {
-    left: -250px;
-}
-
 .sidebar h2 {
    color: #007bff;
    text-align: center;
@@ -88,6 +82,7 @@ body {
    background: #88ccfa;
 }

+/* Submenu */
 .submenu {
    display: none;
    background: #ffffff;
@@ -104,19 +99,16 @@ body {

 .submenu a:hover {
    background: #b3dbf7;
-    color: #007bff;
 }

 /* Logout */
 .sidebar-logout {
    margin-top: auto;
-    padding: 10px 16px;
+    padding: 12px;
    background: #007bff;
    display: flex;
    justify-content: center;
-    align-items: center;
    border-radius: 6px;
-    text-decoration: none;
 }

 .sidebar-logout:hover {
@@ -128,18 +120,12 @@ body {
    height: 22px;
 }

-/* MAIN CONTENT */
+/* ================= MAIN ================= */
 .main {
-    margin-left: 260px;
+    margin-left: 250px;
+    margin-top: 60px;
    padding: 30px;
-    width: calc(100% - 260px);
-    margin-top: 80px;
-    transition: 0.3s;
-}
-
-.main.collapsed {
-    margin-left: 20px;
-    width: calc(100% - 40px);
+    width: calc(100% - 250px);
 }

 /* Container */
@@ -147,62 +133,46 @@ body {
    background: white;
    padding: 40px;
    border-radius: 12px;
-    max-width: 800px;
+    max-width: 900px;
    margin: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
 }

-.header {
-    font-size: 32px;
-    color: #2c3e50;
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-a {
-    text-decoration: none;
-}
-
-
-/* ---------------- RESPONSIVE ---------------- */
-
-/* Tablets */
+/* ================= TABLET ================= */
@media (max-width: 992px) {
    .nav-left h3 {
        font-size: 16px;
+        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
-        max-width: 200px;
    }

    .nav-logo {
-        height: 45px;
+        height: 40px;
    }

+    /* sidebar still visible */
    .sidebar {
        width: 220px;
    }

    .main {
-        margin-left: 0;
-        width: 100%;
-        padding: 20px;
+        margin-left: 220px;
+        width: calc(100% - 220px);
    }
 }

-/* Mobile */
+/* ================= MOBILE ================= */
@media (max-width: 768px) {

    body {
        display: block;
    }

-    /* Navbar */
-    .navbar {
-        height: 56px;
-        padding: 0 12px;
+    /* Show toggle only on mobile */
+    .toggle-btn {
+        display: block;
    }

    .nav-left h3 {
@@ -211,21 +181,14 @@ a {
    }

    .nav-logo {
-        height: 38px;
-    }
-
-    .toggle-btn {
-        font-size: 24px;
+        height: 36px;
    }

    /* Sidebar as drawer */
    .sidebar {
-        position: fixed;
-        top: 56px;
        left: -100%;
        width: 85%;
        max-width: 280px;
-        height: calc(100vh - 56px);
        z-index: 2000;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
    }
@@ -234,10 +197,6 @@ a {
        left: 0;
    }

-    .sidebar.hide {
-        left: -100%;
-    }
-
    /* Main content full width */
    .main {
        margin-left: 0;
@@ -250,20 +209,11 @@ a {
        padding: 20px;
        width: 100%;
    }
-
-    .header {
-        font-size: 22px;
-    }
 }

-/* Very small phones */
+/* ================= VERY SMALL PHONES ================= */
@media (max-width: 480px) {
    .nav-left h3 {
        display: none;
-        /* hide long company name */
-    }
-
-    .header {
-        font-size: 20px;
    }
 }
--- a/static/css/mat_credit.css
+++ b/static/css/mat_credit.css
@@ -1,5 +1,7 @@
-/* ===== CONTAINER ===== */
-.container {
+/* =========================
+   CONTAINER
+========================= */
+.mat-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 25px;
@@ -8,47 +10,91 @@
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
 }

-/* ===== TABLE WRAPPER (FOR SCROLL) ===== */
+.page-title {
+    text-align: center;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+/* =========================
+   YEAR CONTROLS
+========================= */
+.year-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 15px;
+}
+
+.year-controls select {
+    padding: 8px 10px;
+    font-size: 14px;
+    border-radius: 6px;
+    border: 1px solid #ced4da;
+}
+
+.year-controls button {
+    padding: 8px 14px;
+    font-size: 14px;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    background-color: #0d6efd;
+    color: #ffffff;
+}
+
+.year-controls button:hover {
+    background-color: #0b5ed7;
+}
+
+/* =========================
+   TABLE WRAPPER
+========================= */
 .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
 }

-/* ===== TABLE ===== */
+/* =========================
+   TABLE
+========================= */
 #matTable {
    width: 100%;
    min-width: 900px;
-    /* IMPORTANT for horizontal scroll */
    border-collapse: collapse;
    font-size: 14px;
    text-align: center;
 }

-/* ===== HEADER ===== */
+/* =========================
+   HEADER
+========================= */
 #matTable thead th {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #ffffff;
    padding: 12px 8px;
    border: 1px solid #0a58ca;
-    font-weight: 600;
    white-space: nowrap;
 }

-/* ===== BODY CELLS ===== */
+/* =========================
+   BODY CELLS
+========================= */
 #matTable tbody td {
    padding: 8px;
    border: 1px solid #dcdcdc;
    background-color: #ffffff;
 }

-/* ===== FY COLUMN ===== */
 #matTable tbody td:first-child {
    font-weight: 600;
    background-color: #f5f8ff;
 }

-/* ===== INPUT FIELDS ===== */
+/* =========================
+   INPUTS
+========================= */
 #matTable input {
    width: 100%;
    padding: 6px;
@@ -65,7 +111,9 @@
    outline: none;
 }

-/* ===== ACTION BUTTON ===== */
+/* =========================
+   BUTTONS
+========================= */
 #matTable button {
    background-color: #198754;
    border: none;
@@ -80,7 +128,22 @@
    background-color: #157347;
 }

-/* ===== ROW STATES ===== */
+.add-row-btn {
+    background-color: #0d6efd;
+    color: #fff;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.add-row-btn:hover {
+    background-color: #0b5ed7;
+}
+
+/* =========================
+   ROW STATES
+========================= */
 #matTable tbody tr:hover {
    background-color: #f1f6ff;
 }
@@ -94,23 +157,40 @@
    background-color: #e9f7ef !important;
 }

-/* ===== MOBILE RESPONSIVE (TABLE FORMAT + INTERNAL SCROLL) ===== */
+/* =========================
+   ACTION FOOTER
+========================= */
+.action-footer {
+    margin-top: 15px;
+}
+
+/* =========================
+   MOBILE ONLY FIXES
+   (DOES NOT AFFECT DESKTOP)
+========================= */
@media (max-width: 768px) {

-    .container {
+    .mat-container {
        margin: 10px;
        padding: 15px;
    }

-    .table-wrapper {
-        overflow-x: auto;
-        border-radius: 8px;
+    /* YEAR CONTROLS STACKED */
+    .year-controls {
+        flex-direction: column;
+        align-items: stretch;
    }

+    .year-controls select,
+    .year-controls button {
+        width: 100%;
+        font-size: 14px;
+    }
+
+    /* TABLE */
    #matTable {
        font-size: 12px;
        min-width: 800px;
-        /* keeps table structure */
    }

    #matTable input {
@@ -121,4 +201,9 @@
        font-size: 12px;
        padding: 5px 10px;
    }
+
+    /* ADD ROW BUTTON FULL WIDTH */
+    .add-row-btn {
+        width: 50%;
+    }
 }