Template:Stakeholder count widget/styles.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* Center the whole widget and lay out cards in a row */
+/* Layout container */
 .stakeholder-count-widget {
      display: flex;
      justify-content: center;
      align-items: flex-start;
-     gap: 1.5em;
+     flex-wrap: wrap;            /* enables wrapping */
-     flex-wrap: wrap;
+     gap: 1.2em;
      margin: 1.5em 0;
+    width: 100%;
 }
-/* Individual cards: same size, outline, minimal look */
+/* Cards automatically size evenly */
 .stakeholder-card {
-     width: 220px;
+     flex: 1 1 140px;            /* grow, shrink, starting width */
-     height: 160px;
+    max-width: 240px;           /* prevents giant stretching on huge screens */
-     padding: 12px 10px;
+     min-width: 120px;           /* below this, wrap instead of squishing */
-     border: 1.5px solid #000001;
+     padding: 14px 12px;
+     border: 1px solid #000001;
      border-radius: 2px;
      background-color: #f9f9f9;
@@ Line 21: / Line 23: @@
      display: flex;
      flex-direction: column;
-     justify-content: space-between;
+     justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 0.95em;
-     font-weight: 600;
+     font-weight: 500;
-     letter-spacing: 0.01em;
+     gap: 8px;
      transition:
@@ Line 35: / Line 37: @@
 }
-/* Hover effect, similar to your create button */
+/* Count */
-.stakeholder-card:hover {
-    border-color: #000;
-    background-color: #f2f2f2;
-    transform: translateY(-1px);
-}
-/* Count styling */
 .stakeholder-card .count {
-     font-size: 1.3em;
+     font-size: 1.7em;
      font-weight: 700;
-    margin: 4px 0;
 }
-/* "See ___" link styling */
+/* Links */
 .stakeholder-card a {
      font-size: 0.9em;
      font-weight: 500;
+/*    color: #b30000; */
+    text-decoration: none;
+}
+.stakeholder-card a:hover {
+    text-decoration: underline;
 }