Standardize button styling across UI componentsUnverified
898abf9 parent: f6971ab modified
internal/tmpl/partials/article-card-expanded.html +1 -1 | @@ -35,7 +35,7 @@ | ||
| 35 | 35 | </div> |
| 36 | 36 | {{else}} |
| 37 | 37 | <div class="mt-3 pt-3 border-t border-spot-divider"> |
| 38 | - <a href="/articles/{{.ID}}{{.NavSuffix}}" class="inline-flex items-center gap-1.5 text-[10px] text-spot-secondary hover:text-spot-green uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover hover:bg-spot-green/15 transition"> | |
| 38 | + <a href="/articles/{{.ID}}{{.NavSuffix}}" class="inline-flex items-center gap-1.5 text-[10px] text-spot-text hover:text-spot-green hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider hover:bg-spot-green/10 transition"> | |
| 39 | 39 | Read full article |
| 40 | 40 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg> |
| 41 | 41 | </a> |
| @@ -35,7 +35,7 @@ | |||
| 35 | </div> | 35 | </div> |
| 36 | {{else}} | 36 | {{else}} |
| 37 | <div class="mt-3 pt-3 border-t border-spot-divider"> | 37 | <div class="mt-3 pt-3 border-t border-spot-divider"> |
| 38 | - <a href="/articles/{{.ID}}{{.NavSuffix}}" class="inline-flex items-center gap-1.5 text-[10px] text-spot-secondary hover:text-spot-green uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover hover:bg-spot-green/15 transition"> | 38 | + <a href="/articles/{{.ID}}{{.NavSuffix}}" class="inline-flex items-center gap-1.5 text-[10px] text-spot-text hover:text-spot-green hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider hover:bg-spot-green/10 transition"> |
| 39 | Read full article | 39 | Read full article |
| 40 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg> | 40 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg> |
| 41 | </a> | 41 | </a> |
modified
internal/tmpl/partials/article-card.html +2 -2 | @@ -17,13 +17,13 @@ | ||
| 17 | 17 | </div> |
| 18 | 18 | <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5"> |
| 19 | 19 | {{template "like-button.html" .}} |
| 20 | - <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition w-full"> | |
| 20 | + <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full"> | |
| 21 | 21 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> |
| 22 | 22 | <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span> |
| 23 | 23 | </button> |
| 24 | 24 | {{if .DismissURL}} |
| 25 | 25 | <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" title="Remove from recommendations" |
| 26 | - class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition w-full"> | |
| 26 | + class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full"> | |
| 27 | 27 | <input type="hidden" name="{{.DismissField}}" value="{{.DismissValue}}"> |
| 28 | 28 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> |
| 29 | 29 | <span>Hide</span> |
| @@ -17,13 +17,13 @@ | |||
| 17 | </div> | 17 | </div> |
| 18 | <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5"> | 18 | <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5"> |
| 19 | {{template "like-button.html" .}} | 19 | {{template "like-button.html" .}} |
| 20 | - <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition w-full"> | 20 | + <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full"> |
| 21 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> | 21 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> |
| 22 | <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span> | 22 | <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span> |
| 23 | </button> | 23 | </button> |
| 24 | {{if .DismissURL}} | 24 | {{if .DismissURL}} |
| 25 | <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" title="Remove from recommendations" | 25 | <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" title="Remove from recommendations" |
| 26 | - class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition w-full"> | 26 | + class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full"> |
| 27 | <input type="hidden" name="{{.DismissField}}" value="{{.DismissValue}}"> | 27 | <input type="hidden" name="{{.DismissField}}" value="{{.DismissValue}}"> |
| 28 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> | 28 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> |
| 29 | <span>Hide</span> | 29 | <span>Hide</span> |
modified
internal/tmpl/partials/digest.html +1 -1 | @@ -30,7 +30,7 @@ | ||
| 30 | 30 | <form hx-post="/digest/mark-read" hx-confirm="Mark these articles as read?" hx-target="#digest" hx-swap="outerHTML"> |
| 31 | 31 | {{csrfInput .CSRFToken}} |
| 32 | 32 | {{range .ArticleIDs}}<input type="hidden" name="ids" value="{{.}}">{{end}} |
| 33 | - <button type="submit" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition"> | |
| 33 | + <button type="submit" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition"> | |
| 34 | 34 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> |
| 35 | 35 | <span>Read</span> |
| 36 | 36 | </button> |
| @@ -30,7 +30,7 @@ | |||
| 30 | <form hx-post="/digest/mark-read" hx-confirm="Mark these articles as read?" hx-target="#digest" hx-swap="outerHTML"> | 30 | <form hx-post="/digest/mark-read" hx-confirm="Mark these articles as read?" hx-target="#digest" hx-swap="outerHTML"> |
| 31 | {{csrfInput .CSRFToken}} | 31 | {{csrfInput .CSRFToken}} |
| 32 | {{range .ArticleIDs}}<input type="hidden" name="ids" value="{{.}}">{{end}} | 32 | {{range .ArticleIDs}}<input type="hidden" name="ids" value="{{.}}">{{end}} |
| 33 | - <button type="submit" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/15 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover transition"> | 33 | + <button type="submit" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition"> |
| 34 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> | 34 | <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> |
| 35 | <span>Read</span> | 35 | <span>Read</span> |
| 36 | </button> | 36 | </button> |
modified
internal/tmpl/partials/like-button.html +1 -1 | @@ -1,7 +1,7 @@ | ||
| 1 | 1 | {{define "like-button.html"}} |
| 2 | 2 | <button hx-post="/articles/{{.ID}}/like" hx-target="this" hx-swap="outerHTML" |
| 3 | 3 | title="{{if .HasLiked}}Unlike{{else}}Like{{end}}" |
| 4 | - class="group inline-flex items-center justify-center gap-1 text-[10px] uppercase tracking-button px-2 py-0.5 rounded-pill transition w-full {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25{{else}}text-spot-text bg-spot-hover hover:text-spot-red hover:bg-spot-red/15{{end}}"> | |
| 4 | + class="group inline-flex items-center justify-center gap-1 text-[10px] uppercase tracking-button px-2 py-0.5 rounded-pill transition w-full {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25 border border-spot-red/20{{else}}text-spot-text bg-spot-surface border border-spot-divider hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20{{end}}"> | |
| 5 | 5 | <svg class="w-3 h-3" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg> |
| 6 | 6 | <span>{{.LikeCount}}</span> |
| 7 | 7 | </button> |
| @@ -1,7 +1,7 @@ | |||
| 1 | {{define "like-button.html"}} | 1 | {{define "like-button.html"}} |
| 2 | <button hx-post="/articles/{{.ID}}/like" hx-target="this" hx-swap="outerHTML" | 2 | <button hx-post="/articles/{{.ID}}/like" hx-target="this" hx-swap="outerHTML" |
| 3 | title="{{if .HasLiked}}Unlike{{else}}Like{{end}}" | 3 | title="{{if .HasLiked}}Unlike{{else}}Like{{end}}" |
| 4 | - class="group inline-flex items-center justify-center gap-1 text-[10px] uppercase tracking-button px-2 py-0.5 rounded-pill transition w-full {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25{{else}}text-spot-text bg-spot-hover hover:text-spot-red hover:bg-spot-red/15{{end}}"> | 4 | + class="group inline-flex items-center justify-center gap-1 text-[10px] uppercase tracking-button px-2 py-0.5 rounded-pill transition w-full {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25 border border-spot-red/20{{else}}text-spot-text bg-spot-surface border border-spot-divider hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20{{end}}"> |
| 5 | <svg class="w-3 h-3" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg> | 5 | <svg class="w-3 h-3" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg> |
| 6 | <span>{{.LikeCount}}</span> | 6 | <span>{{.LikeCount}}</span> |
| 7 | </button> | 7 | </button> |
modified
internal/tmpl/partials/trending-card.html +1 -1 | @@ -14,7 +14,7 @@ | ||
| 14 | 14 | </div> |
| 15 | 15 | <div class="flex flex-col items-end shrink-0 gap-1"> |
| 16 | 16 | {{template "like-button.html" (dict "ID" .ArticleID "HasLiked" .HasLiked "LikeCount" .LikeCount)}} |
| 17 | - <span title="Annotations" class="inline-flex items-center gap-1 text-[10px] text-spot-text uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg><span>{{.AnnotationCount}}</span></span> | |
| 17 | + <span title="Annotations" class="inline-flex items-center gap-1 text-[10px] text-spot-text uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg><span>{{.AnnotationCount}}</span></span> | |
| 18 | 18 | </div> |
| 19 | 19 | </div> |
| 20 | 20 | </div> |
| @@ -14,7 +14,7 @@ | |||
| 14 | </div> | 14 | </div> |
| 15 | <div class="flex flex-col items-end shrink-0 gap-1"> | 15 | <div class="flex flex-col items-end shrink-0 gap-1"> |
| 16 | {{template "like-button.html" (dict "ID" .ArticleID "HasLiked" .HasLiked "LikeCount" .LikeCount)}} | 16 | {{template "like-button.html" (dict "ID" .ArticleID "HasLiked" .HasLiked "LikeCount" .LikeCount)}} |
| 17 | - <span title="Annotations" class="inline-flex items-center gap-1 text-[10px] text-spot-text uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-hover"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg><span>{{.AnnotationCount}}</span></span> | 17 | + <span title="Annotations" class="inline-flex items-center gap-1 text-[10px] text-spot-text uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg><span>{{.AnnotationCount}}</span></span> |
| 18 | </div> | 18 | </div> |
| 19 | </div> | 19 | </div> |
| 20 | </div> | 20 | </div> |
modified
static/input.css +2 -2 | @@ -6,7 +6,7 @@ | ||
| 6 | 6 | :root { |
| 7 | 7 | color-scheme: light dark; |
| 8 | 8 | --spot-bg: #f2f0eb; |
| 9 | - --spot-surface: #ffffff; | |
| 9 | + --spot-surface: #fbfaf8; | |
| 10 | 10 | --spot-hover: #edebe9; |
| 11 | 11 | --spot-hover-50: rgba(237,235,233,0.5); |
| 12 | 12 | --spot-text: rgba(0,0,0,0.87); |
| @@ -48,7 +48,7 @@ | ||
| 48 | 48 | [data-theme="light"] { |
| 49 | 49 | color-scheme: light; |
| 50 | 50 | --spot-bg: #f2f0eb; |
| 51 | - --spot-surface: #ffffff; | |
| 51 | + --spot-surface: #fbfaf8; | |
| 52 | 52 | --spot-hover: #edebe9; |
| 53 | 53 | --spot-hover-50: rgba(237,235,233,0.5); |
| 54 | 54 | --spot-text: rgba(0,0,0,0.87); |
| @@ -6,7 +6,7 @@ | |||
| 6 | :root { | 6 | :root { |
| 7 | color-scheme: light dark; | 7 | color-scheme: light dark; |
| 8 | --spot-bg: #f2f0eb; | 8 | --spot-bg: #f2f0eb; |
| 9 | - --spot-surface: #ffffff; | 9 | + --spot-surface: #fbfaf8; |
| 10 | --spot-hover: #edebe9; | 10 | --spot-hover: #edebe9; |
| 11 | --spot-hover-50: rgba(237,235,233,0.5); | 11 | --spot-hover-50: rgba(237,235,233,0.5); |
| 12 | --spot-text: rgba(0,0,0,0.87); | 12 | --spot-text: rgba(0,0,0,0.87); |
| @@ -48,7 +48,7 @@ | |||
| 48 | [data-theme="light"] { | 48 | [data-theme="light"] { |
| 49 | color-scheme: light; | 49 | color-scheme: light; |
| 50 | --spot-bg: #f2f0eb; | 50 | --spot-bg: #f2f0eb; |
| 51 | - --spot-surface: #ffffff; | 51 | + --spot-surface: #fbfaf8; |
| 52 | --spot-hover: #edebe9; | 52 | --spot-hover: #edebe9; |
| 53 | --spot-hover-50: rgba(237,235,233,0.5); | 53 | --spot-hover-50: rgba(237,235,233,0.5); |
| 54 | --spot-text: rgba(0,0,0,0.87); | 54 | --spot-text: rgba(0,0,0,0.87); |