Iterate on color themes + Forum style fixes

* Move the forum box colors into dedicated styles that are easier to
  override for the new theme colors.
* Updated the themes so forums and comment thread background cards now
  match your chosen style.
* Add yellow and orange theme variants.
This commit is contained in:
Noah Petherbridge 2024-11-24 13:22:28 -08:00
parent 391667a94c
commit d8593d89c0
30 changed files with 656 additions and 288 deletions

View File

@ -83,34 +83,52 @@ var (
}
// Website theme color hue choices.
WebsiteThemeHueChoices = []Option{
WebsiteThemeHueChoices = []OptGroup{
{
Label: "Default (no added color; classic nonshy theme)",
Value: "",
Header: "Custom Themes",
Options: []Option{
{
Label: "Default (no added color; classic nonshy theme)",
Value: "",
},
{
Label: "nonshy blue & pink",
Value: "blue-pink",
},
},
},
{
Label: "nonshy blue & pink",
Value: "blue-pink",
},
{
Label: "Pretty in pink",
Value: "pink",
},
{
Label: "Royal purple",
Value: "purple",
},
{
Label: "Cool blue",
Value: "blue",
},
{
Label: "Burnt red",
Value: "red",
},
{
Label: "Leafy green",
Value: "green",
Header: "Just a Splash of Color",
Options: []Option{
{
Label: "Burnt red",
Value: "red",
},
{
Label: "Harvest orange",
Value: "orange",
},
{
Label: "Golden yellow",
Value: "yellow",
},
{
Label: "Leafy green",
Value: "green",
},
{
Label: "Cool blue",
Value: "blue",
},
{
Label: "Pretty in pink",
Value: "pink",
},
{
Label: "Royal purple",
Value: "purple",
},
},
},
}

View File

@ -196,11 +196,11 @@ func Settings() http.HandlerFunc {
// Website theme color: constrain to available options.
for _, field := range []struct {
Name string
Options []config.Option
Options []config.OptGroup
}{
{"website-theme-hue", config.WebsiteThemeHueChoices},
} {
value := utility.StringInOptions(
value := utility.StringInOptGroup(
r.PostFormValue(field.Name),
field.Options,
"",

View File

@ -13,3 +13,17 @@ func StringInOptions(v string, options []config.Option, orDefault string) string
}
return orDefault
}
// StringInOptGroup constrains a string value (posted by the user) to only be one
// of the available values in the Option list enum. Returns the string if OK, or
// else the default string.
func StringInOptGroup(v string, options []config.OptGroup, orDefault string) string {
for _, group := range options {
for _, option := range group.Options {
if v == option.Value {
return v
}
}
}
return orDefault
}

View File

@ -78,3 +78,19 @@ a.has-text-dark:hover {
background-color: #550;
color: #FFC;
}
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #163b27;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #144225;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c2812;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #18163b;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #142842;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #17122c;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1638;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #42143e;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

View File

@ -5,4 +5,21 @@
--bulma-link-l: 50%;
--bulma-scheme-h: 299;
--bulma-scheme-s: 22%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #fbd1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #ddd0f1;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #e7c2ff;
}

View File

@ -4,4 +4,21 @@
--bulma-link-h: 200deg;
--bulma-link-l: 34%;
--bulma-scheme-h: 173;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1f0ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #d6d9ff;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #c2d2ff;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #193b16;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #2e4214;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #122c1f;
}

View File

@ -4,4 +4,21 @@
--bulma-link-l: 18%;
--bulma-scheme-h: 95;
--bulma-link-text: #009900;
}
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1ffd1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #e3f1d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #c2ffe8;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b2816;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #422a14;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c1912;
}

View File

@ -0,0 +1,23 @@
:root {
--bulma-primary-h: 39deg;
--bulma-link-h: 21deg;
--bulma-link-l: 39%;
--bulma-scheme-h: 34;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffe2d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1e8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffcbc2;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1638;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #42143e;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

View File

@ -6,3 +6,19 @@
--bulma-scheme-s: 39%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #fbd1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #ddd0f1;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #e7c2ff;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #37163b;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #3e1442;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

View File

@ -5,4 +5,21 @@
--bulma-link-l: 45%;
--bulma-scheme-h: 293;
--bulma-scheme-s: 23%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #f4d1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1d0ef;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #d7c2ff;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1616;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #421d14;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c1912;
}

View File

@ -4,4 +4,21 @@
--bulma-link-h: 12deg;
--bulma-link-l: 30%;
--bulma-scheme-h: 0;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffd1d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1d8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffd0c2;
}

View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b3516;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #423714;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c2c12;
}

View File

@ -0,0 +1,25 @@
:root {
--bulma-primary-h: 59deg;
--bulma-primary-l: 51%;
--bulma-link-h: 57deg;
--bulma-link-l: 26%;
--bulma-scheme-h: 62;
--bulma-link-text: #999900;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffe2d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1e8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffcbc2;
}

View File

@ -250,4 +250,21 @@ nav.navbar {
position: absolute;
top: 4px;
right: 4px;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1fff8;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #d0f1e2;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffedc2;
}

View File

@ -14,7 +14,7 @@
<div class="columns mt-4">
<div class="column is-one-quarter">
<div class="card">
<div class="card-header has-background-info">
<div class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-gear mr-2"></i>
Settings Menu
@ -344,268 +344,295 @@
</div>
<!-- Look & Feel -->
<div class="card mb-5" id="look">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-palette pr-2"></i>
Look &amp; Feel
</p>
</header>
<div id="look">
<form method="POST" action="/settings">
{{InputCSRF}}
<input type="hidden" name="intent" value="look">
<div class="card-content">
<form method="POST" action="/settings">
<input type="hidden" name="intent" value="look">
{{InputCSRF}}
<p class="block">
On this screen, you may customize the visual appearance of your profile
page. You may set a custom color gradient for your header bar and personalize
the colors of your profile cards.
</p>
<!--
-- Website Theme Section
-->
<h2 class="subtitle">Website Theme <span class="tag is-success">New!</span></h2>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value=""
{{if eq (.CurrentUser.GetProfileField "website-theme") ""}}checked{{end}}>
Automatically match my device's theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="light"
{{if eq (.CurrentUser.GetProfileField "website-theme") "light"}}checked{{end}}>
Always use the light theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="dark"
{{if eq (.CurrentUser.GetProfileField "website-theme") "dark"}}checked{{end}}>
Always use the dark theme
</label>
<p class="help">
This setting controls how the website theme will appear to you while logged in.
By default, the dark theme is used if your device prefers dark, but you can
manually override it to the Light or Dark themes above.
Remember to click "Save Look & Feel" below to see the change!
<div class="card mb-5">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-palette pr-2"></i>
Website Theme
</p>
</div>
</header>
<div class="field">
<label class="label" for="website-theme-hue">
Accent color <span class="tag is-success">New!</span>
</label>
<div class="select is-fullwidth">
<select name="website-theme-hue">
{{range .WebsiteThemeHueChoices}}
<option value="{{.Value}}"
{{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}>
{{.Label}}
</option>
{{end}}
</select>
<div class="card-content">
<!--
-- Website Theme Section
-->
<p class="block">
You may set a custom theme to change the way the {{PrettyTitle}} website looks to you.
Choose between a Light and Dark variant, and set an optional accent color to apply a
new style to the entire website.
</p>
<h2 class="subtitle">Light or Dark Mode</h2>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value=""
{{if eq (.CurrentUser.GetProfileField "website-theme") ""}}checked{{end}}>
Automatically match my device's theme
</label>
</div>
<p class="help">
Select an "accent color" for the website theme. Mix and match these with
the Light and Dark themes! Some accent colors really pop on the dark theme.
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="light"
{{if eq (.CurrentUser.GetProfileField "website-theme") "light"}}checked{{end}}>
Always use the light theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="dark"
{{if eq (.CurrentUser.GetProfileField "website-theme") "dark"}}checked{{end}}>
Always use the dark theme
</label>
<p class="help">
This setting controls how the website theme will appear to you while logged in.
By default, the dark theme is used if your device prefers dark, but you can
manually override it to the Light or Dark themes above.
</p>
</div>
<div class="field">
<label class="label" for="website-theme-hue">
Accent color <span class="tag is-success">New!</span>
</label>
<div class="select is-fullwidth">
<select name="website-theme-hue">
{{range .WebsiteThemeHueChoices}}
<optgroup label="{{.Header}}">
{{range .Options}}
<option value="{{.Value}}"
{{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}>
{{.Label}}
</option>
{{end}}
</optgroup>
{{end}}
</select>
</div>
<p class="help">
Select an "accent color" for the website theme. Mix and match these with
the Light and Dark themes! Some accent colors really pop on the dark theme.
</p>
</div>
<div class="field">
<button type="submit" class="button is-primary">
<i class="fa fa-save mr-2"></i> Apply Website Theme
</button>
</div>
</div>
</div>
<div class="card mb-5">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-palette pr-2"></i>
My Profile Page Look &amp; Feel
</p>
</div>
</header>
<hr>
<div class="card-content">
<!--
-- Profile Header Section
-->
<h2 class="subtitle">Profile Header</h2>
<p class="block">
On this screen, you may customize the visual appearance of your profile
page. You may set a custom color gradient for your header bar and personalize
the colors of your profile cards.
</p>
<div class="field">
<label class="label">Preview</label>
</div>
<!--
-- Profile Header Section
-->
<h2 class="subtitle">Profile Header</h2>
<!-- Header preview hero, should be similar to profile page. -->
<div class="hero is-link is-bold mb-4" id="header-hero-preview">
<div class="hero-body p-4">
<div class="container">
<div class="columns is-mobile is-gapless mt-1 mb-6">
<div class="column is-narrow has-text-centered">
<figure class="profile-photo is-inline-block" style="width: auto; height: auto">
{{template "avatar-48x48" .CurrentUser}}
</figure>
</div>
<div class="field">
<label class="label">Preview</label>
</div>
<div class="column mx-2">
<strong>{{.CurrentUser.NameOrUsername}}</strong>
</div>
{{if and .LoggedIn (not .IsPrivate)}}
<div class="column is-narrow">
<div class="box">
<div style="width: 16px;"></div>
<!-- Header preview hero, should be similar to profile page. -->
<div class="hero is-link is-bold mb-4" id="header-hero-preview">
<div class="hero-body p-4">
<div class="container">
<div class="columns is-mobile is-gapless mt-1 mb-6">
<div class="column is-narrow has-text-centered">
<figure class="profile-photo is-inline-block" style="width: auto; height: auto">
{{template "avatar-48x48" .CurrentUser}}
</figure>
</div>
<div class="column mx-2">
<strong>{{.CurrentUser.NameOrUsername}}</strong>
</div>
{{if and .LoggedIn (not .IsPrivate)}}
<div class="column is-narrow">
<div class="box">
<div style="width: 16px;"></div>
</div>
</div>
{{end}}<!-- if .LoggedIn -->
</div>
{{end}}<!-- if .LoggedIn -->
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Header Gradient</label>
<div class="columns is-mobile">
<div class="column is-narrow">
<input type="color" class="color"
id="hero-color-start"
name="hero-color-start"
{{if ($User.GetProfileField "hero-color-start")}}
value="{{$User.GetProfileField "hero-color-start"}}"
{{else}}
value="{{template "--prof-colorA"}}"
{{end}}
>
</div>
<div class="column is-narrow">
<input type="color" class="color"
id="hero-color-end"
name="hero-color-end"
{{if ($User.GetProfileField "hero-color-end")}}
value="{{$User.GetProfileField "hero-color-end"}}"
{{else}}
value="{{template "--prof-colorB"}}"
{{end}}
>
</div>
<div class="column">
<label class="checkbox">
<input type="checkbox"
id="hero-text-dark"
name="hero-text-dark"
value="true"
{{if eq (.CurrentUser.GetProfileField "hero-text-dark") "true"}}checked{{end}}
<div class="field">
<label class="label">Header Gradient</label>
<div class="columns is-mobile">
<div class="column is-narrow">
<input type="color" class="color"
id="hero-color-start"
name="hero-color-start"
{{if ($User.GetProfileField "hero-color-start")}}
value="{{$User.GetProfileField "hero-color-start"}}"
{{else}}
value="{{template "--prof-colorA"}}"
{{end}}
>
Dark text
</label>
</div>
<div class="column is-narrow">
<input type="color" class="color"
id="hero-color-end"
name="hero-color-end"
{{if ($User.GetProfileField "hero-color-end")}}
value="{{$User.GetProfileField "hero-color-end"}}"
{{else}}
value="{{template "--prof-colorB"}}"
{{end}}
>
</div>
<div class="column">
<label class="checkbox">
<input type="checkbox"
id="hero-text-dark"
name="hero-text-dark"
value="true"
{{if eq (.CurrentUser.GetProfileField "hero-text-dark") "true"}}checked{{end}}
>
Dark text
</label>
</div>
</div>
</div>
</div>
<hr>
<hr>
<!--
-- Profile Page Section
-->
<h2 class="subtitle">Profile Page</h2>
<!--
-- Profile Page Section
-->
<h2 class="subtitle">Profile Page</h2>
<div class="card block" id="profile-card-preview">
<div class="card-header">
<p class="card-header-title">Card Colors</p>
<div class="card block" id="profile-card-preview">
<div class="card-header">
<p class="card-header-title">Card Colors</p>
</div>
<div class="card-body">
<table class="table is-fullwidth">
<tr>
<td>
<strong>Lightness</strong>
</td>
<td>
<div class="select is-fullwidth">
<select id="card-lightness" name="card-lightness">
<option value="">Automatic</option>
<option value="light"{{if eq ($User.GetProfileField "card-lightness") "light"}} selected{{end}}>Light theme (black on white)</option>
<option value="dark"{{if eq ($User.GetProfileField "card-lightness") "dark"}} selected{{end}}>Dark theme (white on black)</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="is-narrow">
<strong>Card Title BG</strong>
</td>
<td>
<input type="color"
id="card-title-bg"
name="card-title-bg"
{{if ($User.GetProfileField "card-title-bg")}}
value="{{$User.GetProfileField "card-title-bg"}}"
{{else}}
value="{{template "--prof-card-bg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Card Title FG</strong>
</td>
<td>
<input type="color"
id="card-title-fg"
name="card-title-fg"
{{if ($User.GetProfileField "card-title-fg")}}
value="{{$User.GetProfileField "card-title-fg"}}"
{{else}}
value="{{template "--prof-card-fg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Link Color</strong>
</td>
<td>
<input type="color"
id="card-link-color"
name="card-link-color"
{{if ($User.GetProfileField "card-link-color")}}
value="{{$User.GetProfileField "card-link-color"}}"
{{else}}
value="{{template "--prof-link-fg"}}"
{{end}}
>
<a href="#" onclick="return false" class="ml-2">
Example
<i class="fa fa-link"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="card-body">
<table class="table is-fullwidth">
<tr>
<td>
<strong>Lightness</strong>
</td>
<td>
<div class="select is-fullwidth">
<select id="card-lightness" name="card-lightness">
<option value="">Automatic</option>
<option value="light"{{if eq ($User.GetProfileField "card-lightness") "light"}} selected{{end}}>Light theme (black on white)</option>
<option value="dark"{{if eq ($User.GetProfileField "card-lightness") "dark"}} selected{{end}}>Dark theme (white on black)</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="is-narrow">
<strong>Card Title BG</strong>
</td>
<td>
<input type="color"
id="card-title-bg"
name="card-title-bg"
{{if ($User.GetProfileField "card-title-bg")}}
value="{{$User.GetProfileField "card-title-bg"}}"
{{else}}
value="{{template "--prof-card-bg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Card Title FG</strong>
</td>
<td>
<input type="color"
id="card-title-fg"
name="card-title-fg"
{{if ($User.GetProfileField "card-title-fg")}}
value="{{$User.GetProfileField "card-title-fg"}}"
{{else}}
value="{{template "--prof-card-fg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Link Color</strong>
</td>
<td>
<input type="color"
id="card-link-color"
name="card-link-color"
{{if ($User.GetProfileField "card-link-color")}}
value="{{$User.GetProfileField "card-link-color"}}"
{{else}}
value="{{template "--prof-link-fg"}}"
{{end}}
>
<a href="#" onclick="return false" class="ml-2">
Example
<i class="fa fa-link"></i>
</a>
</td>
</tr>
</table>
<div class="field">
<label class="label">
Reset Styles
</label>
<label class="checkbox">
<input type="checkbox"
name="reset"
value="true">
Reset to default style
</label>
<p class="help">
If you'd like to reset all your page styles to their default, check
this box and click Save below.
</p>
</div>
<div class="field">
<button type="submit" class="button is-primary">
<i class="fa fa-save mr-2"></i> Save Look &amp; Feel
</button>
</div>
</div>
<div class="field">
<label class="label">
Reset Styles
</label>
<label class="checkbox">
<input type="checkbox"
name="reset"
value="true">
Reset to default style
</label>
<p class="help">
If you'd like to reset all your page styles to their default, check
this box and click Save below.
</p>
</div>
<div class="field">
<button type="submit" class="button is-primary">
<i class="fa fa-save mr-2"></i> Save Look &amp; Feel
</button>
</div>
</form>
</div>
</div>
</form>
</div>
<!-- Website Preferences -->

View File

@ -8,6 +8,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<!-- Bulma theme CSS -->
{{- if eq .WebsiteTheme "light" -}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}">
@ -17,12 +18,18 @@
<link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
{{- end -}}
<!-- User theme hue -->
{{- if and .LoggedIn (.CurrentUser.GetProfileField "website-theme-hue") -}}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{.CurrentUser.GetProfileField "website-theme-hue"}}.css">
{{end}}
<!-- User theme hue -->
{{- if and .LoggedIn (.CurrentUser.GetProfileField "website-theme-hue") }}
{{- $WebsiteThemeHue := .CurrentUser.GetProfileField "website-theme-hue" }}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}.css">
<!-- Dark theme mixin -->
{{- if or (eq .WebsiteTheme "dark") (ne .WebsiteTheme "light") -}}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}-dark.css" {{if ne .WebsiteTheme "dark"}}media="(prefers-color-scheme: dark)"{{end}}>
{{- end -}}
{{- end -}}
<link rel="stylesheet" href="/static/fontawesome-free-6.6.0-web/css/all.css">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<link rel="manifest" href="/manifest.json">
<title>{{template "title" .}} - {{ .Title }}</title>
</head>

View File

@ -1,7 +1,7 @@
{{define "title"}}Chat Rooms{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-bold">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">

View File

@ -1,7 +1,7 @@
{{define "title"}}{{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -108,7 +108,7 @@
<div class="block p-2">
{{range .Threads}}
{{$Stats := $Root.ThreadMap.Get .ID}}
<div class="box has-background-success-light has-text-dark">
<div class="box nonshy-forum-box-1 has-text-dark">
<div class="columns">
<div class="column is-2 has-text-centered pt-0 pb-1">
<!-- Thread starter is blocked? -->
@ -171,7 +171,7 @@
<div class="column is-narrow pb-1 pt-0 px-1">
<div class="columns is-mobile">
<div class="column has-text-centered pr-1">
<div class="box p-2">
<div class="box nonshy-forum-box-3 p-2">
<p class="is-size-7">Replies</p>
{{if $Stats}}
{{$Stats.Replies}}
@ -181,7 +181,7 @@
</div>
</div>
<div class="column has-text-centered pl-1">
<div class="box p-2">
<div class="box nonshy-forum-box-3 p-2">
<p class="is-size-7">Views</p>
{{if $Stats}}
{{$Stats.Views}}

View File

@ -1,7 +1,7 @@
{{define "title"}}Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -154,7 +154,7 @@
{{else}}
{{range .Forums}}
{{$Stats := $Root.ForumMap.Get .ID}}
<div class="card block has-background-primary-light has-text-dark">
<div class="card block nonshy-forum-box-1 has-text-dark">
<div class="card-content">
<div class="columns">
<div class="column is-3 pt-0 pb-1">
@ -230,7 +230,7 @@
</div>
<div class="column py-1">
<div class="box has-background-success-light has-text-dark">
<div class="box nonshy-forum-box-2 has-text-dark">
<h2 class="subtitle mb-1 has-text-dark">Latest Post</h2>
{{if $Stats.RecentThread}}
<a href="/go/comment?id={{$Stats.RecentPost.ID}}">
@ -253,7 +253,7 @@
<div class="column is-3 py-1">
<div class="columns is-mobile is-gapless">
<div class="column has-text-centered mr-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Topics</p>
{{if $Stats}}
{{$Stats.Threads}}
@ -263,7 +263,7 @@
</div>
</div>
<div class="column has-text-centered mx-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Posts</p>
{{if $Stats}}
{{$Stats.Posts}}
@ -273,7 +273,7 @@
</div>
</div>
<div class="column has-text-centered ml-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Users</p>
{{if $Stats}}
{{$Stats.Users}}

View File

@ -1,7 +1,7 @@
{{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>
@ -91,7 +91,7 @@
<div class="p-4">
{{range .RecentPosts}}
{{$User := .Thread.Comment.User}}
<div class="card block has-background-link-light">
<div class="card block nonshy-forum-box-1">
<div class="card-content">
<div class="columns">
<div class="column is-narrow has-text-centered pt-0 pb-1">

View File

@ -1,7 +1,7 @@
{{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>

View File

@ -1,7 +1,7 @@
{{define "title"}}{{.Thread.Title}} - {{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -130,7 +130,7 @@
{{$Root := .}}
<div class="block p-2">
{{range $i, $c := .Comments}}
<div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
<div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
<div class="columns">
<div class="column is-2 has-text-centered">
<!-- Thread starter is blocked? -->

View File

@ -277,7 +277,7 @@
</p>
{{else}}
{{range .Comments}}
<div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
<div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
<div class="columns">
<div class="column is-2 has-text-centered">
<!-- User has no display name distinct from their username? -->