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 the wiki links look like your buttons */
+/* Cards automatically size evenly */
-.stakeholder-count-widget .create-button a {
+.stakeholder-card {
-     display: inline-block;
+    flex: 1 1 140px;            /* grow, shrink, starting width */
-     width: 220px;
+    max-width: 240px;           /* prevents giant stretching on huge screens */
-     padding: 8px 0;
+    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: center;
+     align-items: center;
      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 29: / Line 37: @@
 }
-/* Hover: grey fill, crisp border, slight lift */
+/* Count */
-.stakeholder-count-widget .create-button 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 .create-button a:active {
+.stakeholder-card a {
-     transform: translateY(0);
+     font-size: 0.9em;
-}
+     font-weight: 500;
+/*    color: #b30000; */
-/* Ensure counts look good */
+     text-decoration: none;
-.stakeholder-count-widget-tile .count {
-    display: block;
-     font-size: 1.2em;
-    font-weight: 700;
-     margin-top: 4px;
 }
-/* "See ___" link styling */
+.stakeholder-card a:hover {
-.stakeholder-count-widget-tile .see-link {
+     text-decoration: underline;
-     display: block;
-    margin-top: 2px;
-    font-size: 0.85em;
-    opacity: 0.7;
 }