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

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Layout: center the whole widget block */
+/* Center the whole widget and lay out cards in a row */
 .stakeholder-count-widget {
      display: flex;
-     justify-content: center;   /* center the row */
+     justify-content: center;
      align-items: flex-start;
      gap: 1.5em;
@@ Line 9: / Line 9: @@
 }
-/* Make each tile uniform + flex-centered */
+/* Individual cards: same size, outline, minimal look */
-.stakeholder-count-widget-tile {
+.stakeholder-card {
-     width: 220px;              /* consistent width */
+     width: 220px;
-     height: 160px;             /* consistent height */
+     height: 160px;
+    padding: 12px 10px;
+    border: 1.5px solid #000001;
+    border-radius: 2px;
+    background-color: #f9f9f9;
      display: flex;
      flex-direction: column;
-     justify-content: space-between;  /* spread content vertically */
+     justify-content: space-between;
-     align-items: center;             /* center horizontally */
+     align-items: center;
-    padding: 12px 0;
      text-align: center;
+    font-size: 0.95em;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    transition:
+        transform 0.15s ease,
+        border-color 0.15s ease,
+        background-color 0.2s ease;
+}
+/* Hover effect, similar to your create button */
+.stakeholder-card:hover {
+    border-color: #000;
+    background-color: #f2f2f2;
+    transform: translateY(-1px);
 }
 /* Count styling */
-.stakeholder-count-widget-tile .count {
+.stakeholder-card .count {
-     font-size: 1.4em;
+     font-size: 1.3em;
      font-weight: 700;
-     margin: 8px 0;
+     margin: 4px 0;
 }
 /* "See ___" link styling */
-.stakeholder-count-widget-tile a {
+.stakeholder-card a {
      font-size: 0.9em;
+    font-weight: 500;
 }