User Themes refactor

Instead of fighting to override Bulma CSS classes, add user-theme-*
classes for simpler styling.

pkg/controller/account/profile.go

@@ -40,7 +40,8 @@ func Profile() http.HandlerFunc {
 			}
 
 			vars := map[string]interface{}{
-				"User": user,
+				"User":           user,
+				"IsExternalView": true,
 			}
 			if err := tmpl.Execute(w, r, vars); err != nil {
 				http.Error(w, err.Error(), http.StatusInternalServerError)

web/templates/account/profile.html

@@ -2,7 +2,7 @@
 {{define "content"}}
 {{template "profile-theme-style" .User}}
 <div class="container">
-    <section class="hero {{if and .LoggedIn (not .IsPrivate)}}is-info{{else}}is-light is-bold{{end}}">
+    <section class="hero {{if and .LoggedIn (not .IsPrivate)}}is-info{{else}}is-light is-bold{{end}} {{if not .IsExternalView}}user-theme-hero{{end}}">
         <div class="hero-body">
             <div class="container">
                 <div class="columns">
@@ -313,7 +313,7 @@
 
             <div class="column is-two-thirds">
                 <div class="card block">
-                    <header class="card-header has-background-link">
+                    <header class="card-header has-background-link user-theme-card-title">
                         <div class="card-header-title">
                             <div class="columns is-mobile is-gapless nonshy-fullwidth">
                                 <div class="column">
@@ -330,7 +330,7 @@
                         </div>
                     </header>
 
-                    <div class="card-content">
+                    <div class="card-content user-theme-card-body">
                         <div class="content">
                             {{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "about_me"))) "n/a"}}
                         </div>
@@ -338,7 +338,7 @@
                 </div>
 
                 <div class="card block">
-                    <header class="card-header has-background-link">
+                    <header class="card-header has-background-link user-theme-card-title">
                         <div class="card-header-title">
                             <div class="columns is-mobile is-gapless nonshy-fullwidth">
                                 <div class="column">
@@ -355,7 +355,7 @@
                         </div>
                     </header>
 
-                    <div class="card-content">
+                    <div class="card-content user-theme-card-body">
                         <div class="content">
                             {{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "interests"))) "n/a"}}
                         </div>
@@ -363,7 +363,7 @@
                 </div>
 
                 <div class="card block">
-                    <header class="card-header has-background-link">
+                    <header class="card-header has-background-link user-theme-card-title">
                         <div class="card-header-title">
                             <div class="columns is-mobile is-gapless nonshy-fullwidth">
                                 <div class="column">
@@ -380,7 +380,7 @@
                         </div>
                     </header>
 
-                    <div class="card-content">
+                    <div class="card-content user-theme-card-body">
                         <div class="content">
                             {{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "music_movies"))) "n/a"}}
                         </div>
@@ -390,14 +390,14 @@
 
             <div class="column">
                 <div class="card block">
-                    <header class="card-header has-background-info">
+                    <header class="card-header has-background-info user-theme-card-title">
                         <p class="card-header-title has-text-light">
                             <i class="fa fa-user pr-2"></i>
                             About {{.User.Username}}
                         </p>
                     </header>
 
-                    <div class="card-content">
+                    <div class="card-content user-theme-card-body">
                         <table class="table is-fullwidth" style="font-size: small">
                             <tr>
                                 <td class="has-text-right">
@@ -476,14 +476,14 @@
                 </div>
 
                 <div class="card block">
-                    <header class="card-header has-background-info">
+                    <header class="card-header has-background-info user-theme-card-title">
                         <p class="card-header-title has-text-light">
                             <i class="fa fa-chart-line pr-2"></i>
                             Activity
                         </p>
                     </header>
 
-                    <div class="card-content">
+                    <div class="card-content user-theme-card-body">
                         
                         <!-- Lazy load the statistics card-->
                         <div hx-get="/htmx/user/profile/activity?username={{.User.Username}}" hx-trigger="load">

web/templates/partials/themes.html

@@ -24,97 +24,84 @@ section.hero {
     {{$cardTitleFG := or (.GetProfileField "card-title-fg") "#f7f7f7"}}
     {{$cardLinkFG := or (.GetProfileField "card-link-color") "#0099ff"}}
     {{$cardLightness := .GetProfileField "card-lightness"}}
+    {{$heroA := or (.GetProfileField "hero-color-start") "#0f81cc"}}
+    {{$heroB := or (.GetProfileField "hero-color-end") "#7683cc"}}
     <style type="text/css">
-        {{template "profile-theme-hero-style" .}}
+        /* Hero banner */
-        header.card-header {
+        .user-theme-hero {
+            background-image: linear-gradient(141deg, {{$heroA}}, {{$heroB}}) !important;
+
+            .title, .subtitle {
+                color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important;
+            }
+        }
+
+        /* Card Title colors */
+        .user-theme-card-title {
             background-color: {{$cardTitleBG}} !important;
-        }
+
-        p.card-header-title {
+            * {
-            color: {{$cardTitleFG}} !important;
+                color: {{$cardTitleFG}} !important;
+            }
+
+            .button.is-outlined {
+                border-color: {{$cardTitleFG}} !important;
+            }
         }
 
+        /* Card Body colors */
+        .user-theme-card-body {
+            a {
+                color: {{$cardLinkFG}} !important;
+            }
+        }
+
+        /* Forced light theme overrides */
         {{if eq $cardLightness "light"}}
-        div.box, .container div.card-content, table.table, table.table strong, td {
+            .user-theme-card-body {
-            background-color: #fff !important;
+                background-color: #fff !important;
-            color: #4a4a4a !important;
+                color: #4a4a4a !important;
-        }
-        aside.menu ul.menu-list li a {
-            background-color: #ccc !important;
-            color: #4a4a4a !important;
-        }
-        blockquote, pre, code {
-            background-color: #ccc !important;
-            color: #4a4a4a;
-        }
-        div.tag {
-            background-color: #ccc;
-            color: #4a4a4a;
-        }
-        strong {
-            color: #4a4a4a;
-        }
 
-        /* More text color overrides (h1's etc. look light on prefers-dark color schemes) */
+                * {
-        .container div.card-content .content * {
+                    color: #4a4a4a !important;
-            color: #4a4a4a;
+                }
-        }
 
-        /* Slightly less light on dark theme devices */
+                a > * {
-        @media (prefers-color-scheme: dark) {
+                    color: {{$cardLinkFG}} !important;
-            div.box, .container div.card-content, table.table, table.table strong {
+                }
-                background-color: #e4e4e4;
+
-                color: #4a4a4a;
+                blockquote, pre, code, .tag {
+                    background-color: #ccc !important;
+                    color: #4a4a4a m !important;
+                }
+
+                .table {
+                    background-color: inherit;
+                }
             }
-        }
         {{else if eq $cardLightness "dark"}}
-        div.box, .container div.card-content, table.table, table.table strong, td {
+            .user-theme-card-body {
-            background-color: #4a4a4a !important;
+                    background-color: #4a4a4a !important;
-            color: #f5f5f5 !important;
+                    color: #f5f5f5 !important;
-        }
-        aside.menu ul.menu-list li a {
-            background-color: #1a1a1a !important;
-            color: #f5f5f5 !important;
-        }
-        blockquote, pre, code {
-            background-color: #1a1a1a !important;
-            color: #f5f5f5;
-        }
-        div.tag {
-            background-color: #333;
-            color: #f5f5f5;
-        }
-        strong {
-            color: #f5f5f5;
-        }
 
-        /* More text color overrides (h1's etc. look dark on prefers-light color schemes) */
+                    * {
-        .container div.card-content .content * {
+                        color: #f5f5f5 !important;
-            color: #f5f5f5;
+                    }
-        }
 
-        /* Even darker on dark theme devices */
+                    a > * {
-        @media (prefers-color-scheme: dark) {
+                        color: {{$cardLinkFG}} !important;
-            div.box, .container div.card-content, table.table, table.table strong {
+                    }
-                background-color: #0a0a0a;
+
-                color: #b5b5b5;
+                    blockquote, pre, code, .tag {
-            }
+                        background-color: #1a1a1a !important;
-        }
+                        color: #f5f5f5 m !important;
+                    }
+
+                    .table {
+                        background-color: inherit;
+                    }
+                }
         {{end}}
-
-        .container div.card-content a {
-            color: {{$cardLinkFG}} !important;
-        }
-        .card-content .menu-list li a {
-            color: inherit !important;
-        }
-        .container div.card-content a:hover {
-            color: inherit;
-        }
-
-        /* Override link color for the Activity box, so users don't set black-on-black and wreck the links */
-        .card-content table a.has-text-info {
-            color: #3e8ed0 !important;
-        }
     </style>
 {{end}}