Browse Source

Music: red badge counts + outline action buttons with green depress hover

- .badge: color #fff -> var(--wp--preset--color--link,#67000a). Bootstrap badges
  had a colored bg; without it the white text was near-invisible on the light
  .list-group-item. Fixes the music last.fm counts and analytics hit-counts.
- Action buttons (.daveo-radio-btn + .btn-dark): drop the solid dark fill for a
  WP-style outline in the site dark blue (slate-deep #484c57), tighter 4px radius,
  and a subtle raised drop-shadow that presses down on hover (translateY + shadow
  collapse) while the border/text/icon turn the footer link-hover green (#25c2a0).
  Search submit (in .input-group) opts out so it stays joined to the field.
windhamdavid 20 hours ago
parent
commit
55bd2c459b
3 changed files with 39 additions and 11 deletions
  1. 5 3
      css/styles.css
  2. 34 8
      style.css
  3. 0 0
      v4-style.min.css

+ 5 - 3
css/styles.css

@@ -40,15 +40,17 @@ body { color: #232323; }
   height: auto;
 }
 
-/* badge: last.fm stat counts (music) + analytics hit counts. Matches the */
-/* former bootstrap/badge output exactly (incl. the theme's top:-1px nudge). */
+/* badge: last.fm stat counts (music) + analytics hit counts. Bootstrap badges had
+   a colored background; without it the old color:#fff was near-invisible white text
+   on the light .list-group-item. Use the site link red (matches the Studio admonition
+   / search button) so the counts read on the light card. */
 .badge {
   display: inline-block;
   padding: 0.35em 0.65em;
   font-size: 0.75em;
   font-weight: 700;
   line-height: 1;
-  color: #fff;
+  color: var(--wp--preset--color--link, #67000a);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;

+ 34 - 8
style.css

@@ -1399,22 +1399,48 @@ nav.wp-block-query-pagination {
 	font-size: 1rem;
 }
 /* "Daveo Radio" CTA โ€” playback now lives on /radio, so the Music page links there. */
+/* Action buttons โ€” WordPress-style outline in the site's dark blue (slate-deep),
+   a tighter radius than WP's default, and a subtle raised drop-shadow that presses
+   down on hover (translateY + shadow collapse). Shared by the music Daveo Radio
+   button and the desk Scroll / Archive / Load-More buttons (was a solid dark fill).
+   The search submit (inside .input-group) opts out below so it stays joined to the
+   field. */
+.daveo-radio-btn,
+.btn-dark {
+	background: transparent;
+	background-color: transparent;
+	color: #484c57;
+	border: 2px solid #484c57;
+	border-radius: 4px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
+	transition: transform .1s ease, box-shadow .1s ease, color .15s ease, border-color .15s ease;
+}
+.daveo-radio-btn:hover,
+.daveo-radio-btn:active,
+.btn-dark:hover,
+.btn-dark:active {
+	color: #25c2a0;          /* footer link-hover green */
+	background-color: transparent;
+	border-color: #25c2a0;
+	transform: translateY(2px);
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+}
 .daveo-radio-btn {
 	display: inline-block;
-	background: #484c57;
-	color: #fff;
 	padding: 0.7rem 1.5rem;
-	border-radius: 6px;
 	font-size: 1.05rem;
 	line-height: 1.2;
 	text-decoration: none;
 	white-space: nowrap;
-	transition: background 0.2s ease;
 }
-.daveo-radio-btn:hover,
-.daveo-radio-btn:focus {
-	background: #25c2a0;
-	color: #fff;
+/* Search submit stays joined to the input โ€” keep it flat (no lift/shadow). */
+.input-group .btn-dark {
+	box-shadow: none;
+}
+.input-group .btn-dark:hover,
+.input-group .btn-dark:active {
+	transform: none;
+	box-shadow: none;
 }
 .daveo-radio-btn .dw-icon {
 	width: 1em;

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff