website/web/templates/partials/themes.html
Noah Petherbridge cca449090a Forum Search, User Profile Statistics
* Add a Search page to the forums to filter by user ID and find threads and
  replies matching your search terms, with "quoted phrases" and -negation
  support.
* On user profile pages, add an "Activity" box showing statistics on their
  forum threads/comments, likes given/received, photo counts, etc.
* On the "Newest" and Search page for Forums: show an indicator whenever a
  post includes an attached photo.
2024-01-06 16:44:05 -08:00

99 lines
3.2 KiB
HTML

<!-- Theme helpers -->
<!-- Default profile header gradient colors -->
{{define "--prof-colorA"}}#0f81cc{{end}}
{{define "--prof-colorB"}}#7683cc{{end}}
{{define "--prof-card-bg"}}#485fc7{{end}}
{{define "--prof-card-fg"}}#f7f7f7{{end}}
{{define "--prof-link-fg"}}#0099ff{{end}}
{{define "profile-theme-hero-style"}}
{{$colorA := or (.GetProfileField "hero-color-start") "#0f81cc"}}
{{$colorB := or (.GetProfileField "hero-color-end") "#7683cc"}}
section.hero {
background-image: linear-gradient(141deg, {{$colorA}}, {{$colorB}}) !important;
}
.hero h1.title {
color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important;
}
{{end}}
<!-- Parameter: .User -->
{{define "profile-theme-style"}}
{{$cardTitleBG := or (.GetProfileField "card-title-bg") "#485fc7"}}
{{$cardTitleFG := or (.GetProfileField "card-title-fg") "#f7f7f7"}}
{{$cardLinkFG := or (.GetProfileField "card-link-color") "#0099ff"}}
{{$cardLightness := .GetProfileField "card-lightness"}}
<style type="text/css">
{{template "profile-theme-hero-style" .}}
header.card-header {
background-color: {{$cardTitleBG}} !important;
}
p.card-header-title {
color: {{$cardTitleFG}} !important;
}
{{if eq $cardLightness "light"}}
div.box, .container div.card-content, table.table, table.table strong {
background-color: #fff;
color: #4a4a4a;
}
div.tag {
background-color: #ccc;
color: #4a4a4a;
}
/* More text color overrides (h1's etc. look light on prefers-dark color schemes) */
.container div.card-content .content * {
color: #4a4a4a;
}
/* Slightly less light on dark theme devices */
@media (prefers-color-scheme: dark) {
div.box, .container div.card-content, table.table, table.table strong {
background-color: #e4e4e4;
color: #4a4a4a;
}
}
{{else if eq $cardLightness "dark"}}
div.box, .container div.card-content, table.table, table.table strong {
background-color: #4a4a4a;
color: #f5f5f5;
}
div.tag {
background-color: #333;
color: #f5f5f5;
}
/* More text color overrides (h1's etc. look dark on prefers-light color schemes) */
.container div.card-content .content * {
color: #f5f5f5;
}
/* Even darker on dark theme devices */
@media (prefers-color-scheme: dark) {
div.box, .container div.card-content, table.table, table.table strong {
background-color: #0a0a0a;
color: #b5b5b5;
}
}
{{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}}