"ഫലകം:Listofdistricts2/styles.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

← മുൻപത്തെ വ്യത്യാസം

@@ വരി 1: / വരി 1: @@
-/* Container */
+.district-container {
-.district-container  {
+   background: linear-gradient(135deg, #f0f7ff, #ffffff);
-  width: 100%;
+  border: 3px solid #ccc;        /* blue border */
-  margin: 10px auto;
+   border-radius: 12px;               /* rounded corners */
-  padding: 15px;
+   box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* subtle shadow */
-   background: linear-gradient(135deg, #f0f9ff, #ffffff);
+   padding: 20px;                     /* spacing inside */
-   border-radius: 10px;
+  background-color: #ffffff;         /* white background */
-   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+  margin: 10px auto;                 /* center horizontally */
-   border: 3px solid #7BBCE5;
+  max-width: 1200px;
+  width: 96%;
+}
+.district-title {
    text-align: center;
-}
+   color: #004EC3;
-.district-list {
+   font-size: 1.5rem;
-   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: center;
-}
-/* Section title */
-.district-list .district-title {
-   font-size: 1.3rem;
    font-weight: bold;
-   color: #004ec3;
+   margin: 20px 0 15px 0;
-   margin: 15px 0 10px 0;
+  border-bottom: 2px solid #81bffc; /* subtle underline */
+   padding-bottom: 5px;
 }
-/* Items container */
+.district-items p {
-.district-list .district-items {
    display: flex;
    flex-wrap: wrap;
-  justify-content: center;
+   gap: 12px;
-   gap: 10px;
+   margin: 0; /* remove default paragraph spacing */
-   margin: 10px 0 20px 0;
 }
-/* Each item */
+.district-items p a {
-.district-list .district-item {
+   flex: 1 1 calc(12% - 10px); /* 4 per row */
-   flex: 1 1 auto;
+   box-sizing: border-box;
-   min-width: 140px;
-  max-width: 220px;
    background: #ffffff;
    border: 2px solid #0073e6;
    border-radius: 8px;
-   padding: 10px;
+   padding: 5px 8px;
-  color: #004ec3;
-  font-size: 1rem;
    text-align: center;
-   box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
+   text-decoration: none;
+  color: #004EC3;
+  font-size: 0.9rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
    transition: all 0.25s ease;
-  cursor: pointer;
 }
-/* Hover effect – invert colors */
+.district-items p a:hover {
-.district-list .district-item:hover {
+   background: #81bffc;
-   background: #0073e6;
    color: #ffffff;
    transform: translateY(-2px);
-  box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    border-color: #004ec3;
-}
+   font-weight: bold;
-/* Keep small text visible in inverted mode */
-.district-list .district-item:hover small {
-  color: #e6f0ff;
-}
-/* Smaller text for sub-labels */
-.district-list .district-item small {
-  display: block;
-   font-size: 0.85rem;
-  color: #555;
-  margin-top: 4px;
 }
 /* Responsive */
 @media (max-width: 768px) {
-   .district-list .district-item {
+   .district-items p a {
-     min-width: 45%;
+     flex: 1 1 calc(45% - 12px);
-    font-size: 0.95rem;
    }
 }
 @media (max-width: 480px) {
-   .district-list .district-item {
+   .district-items p a {
-     min-width: 100%;
+     flex: 1 1 100%;
-    font-size: 0.9rem;
    }
 }