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

← Older edit

@@ Line 1: / Line 1: @@
-/* Dashboard layout */
+/* Layout container */
 .stakeholder-count-widget {
      display: flex;
-     gap: 1em;
+     justify-content: center;
-     flex-wrap: wrap;
+    align-items: flex-start;
-     margin: 1em 0;
+     flex-wrap: wrap;            /* enables wrapping */
+    gap: 1.2em;
+     margin: 1.5em 0;
+    width: 100%;
 }
-/* Make each tile a fixed-width button */
+/* Cards automatically size evenly */
-.stakeholder-count-widget-tile a {
+.stakeholder-card {
+    flex: 1 1 140px;            /* grow, shrink, starting width */
+    max-width: 240px;           /* prevents giant stretching on huge screens */
+    min-width: 120px;           /* below this, wrap instead of squishing */
+    padding: 14px 12px;
+    border: 1px solid #000001;
+    border-radius: 2px;
+    background-color: #f9f9f9;
      display: flex;
      flex-direction: column;
-     justify-content: space-between;
+     justify-content: center;
      align-items: center;
+    text-align: center;
-    width: 220px;
-    min-height: 120px;
-    padding: 10px 0;
-    text-align: center;
-    border: 1.5px solid #000001;
-    border-radius: 2px;
-    background: transparent;
-    color: inherit;
-    text-decoration: none;
-    font-weight: 600;
      font-size: 0.95em;
-     letter-spacing: 0.01em;
+     font-weight: 500;
+    gap: 8px;
      transition:
@@ Line 34: / Line 37: @@
 }
-/* Hover: grey fill, crisp border, slight lift */
+/* Count */
-.stakeholder-count-widget-tile a:hover {
+.stakeholder-card .count {
-     border-color: #000;
+     font-size: 1.7em;
-     background-color: #f2f2f2;
+     font-weight: 700;
-    transform: translateY(-1px);
 }
-/* Active: pressed look */
+/* Links */
-.stakeholder-count-widget-tile a:active {
+.stakeholder-card a {
-     transform: translateY(0);
+     font-size: 0.9em;
-}
+     font-weight: 500;
+/*    color: #b30000; */
-/* Title, count, and link text tweaks */
+     text-decoration: none;
-.stakeholder-count-widget-tile .tile-title {
-    margin-bottom: 4px;
-}
-.stakeholder-count-widget-tile .count {
-     font-size: 1.3em;
-    font-weight: 700;
-     margin: 4px 0;
 }
-.stakeholder-count-widget-tile .see-link {
+.stakeholder-card a:hover {
-     font-size: 0.85em;
+     text-decoration: underline;
-    opacity: 0.7;
-    margin-top: 4px;
 }