Dark mode style tweaks

This commit is contained in:
Noah 2022-08-31 22:58:32 -07:00
parent 91fcf9f320
commit 31712eba4a
7 changed files with 36 additions and 14 deletions

View File

@ -1,6 +1,28 @@
/*! Bulma Prefers Dark | MIT License | github.com/jloh/bulma-prefers-dark */ /*! Bulma Prefers Dark | MIT License | github.com/jloh/bulma-prefers-dark */
/* Custom edit for nonshy: changed blockquote colors to work better in forums */ /* Custom edit for nonshy: changed blockquote colors to work better in forums */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
/* nonshy custom overrides */
.has-background-primary-light {
background-color:rgba(28, 166, 76, 0.25) !important;
}
.has-background-success-light {
background-color:rgba(28, 166, 76, 0.25) !important
}
.has-background-warning-light {
background-color: rgb(49, 45, 24) !important;
}
.has-background-link-light {
background-color:rgba(15, 129, 204, 0.25) !important;
}
.has-text-dark { /* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
color: #b5b5b5 !important;
}
a.has-text-dark:focus, a.has-text-dark:hover {
color: #d5d5d5 !important;
}
/* end nonshy custom overrides */
html { html {
background-color: #17181c; background-color: #17181c;
} }

View File

@ -141,7 +141,7 @@
<div class="column"> <div class="column">
<div class="card" id="notifications"> <div class="card" id="notifications">
<header class="card-header has-background-warning"> <header class="card-header has-background-warning">
<p class="card-header-title has-text-dark">Notifications</p> <p class="card-header-title has-text-dark-dark">Notifications</p>
</header> </header>
<div class="card-content"> <div class="card-content">

View File

@ -212,7 +212,7 @@
<div class="card mb-5" id="prefs"> <div class="card mb-5" id="prefs">
<header class="card-header has-background-success"> <header class="card-header has-background-success">
<p class="card-header-title"> <p class="card-header-title has-text-dark-dark">
<i class="fa fa-square-check pr-2"></i> <i class="fa fa-square-check pr-2"></i>
Website Preferences Website Preferences
</p> </p>
@ -295,7 +295,7 @@
<div class="card mb-5" id="account"> <div class="card mb-5" id="account">
<header class="card-header has-background-warning"> <header class="card-header has-background-warning">
<p class="card-header-title"> <p class="card-header-title has-text-dark-dark">
<i class="fa fa-gear pr-2"></i> <i class="fa fa-gear pr-2"></i>
Account Settings Account Settings
</p> </p>

View File

@ -77,7 +77,7 @@
<div class="block p-2"> <div class="block p-2">
{{range .Threads}} {{range .Threads}}
{{$Stats := $Root.ThreadMap.Get .ID}} {{$Stats := $Root.ThreadMap.Get .ID}}
<div class="box has-background-success-light has-text-dark"> <div class="box has-background-success-light">
<div class="columns"> <div class="columns">
<div class="column is-2 has-text-centered pt-0 pb-1"> <div class="column is-2 has-text-centered pt-0 pb-1">
<div> <div>
@ -94,8 +94,8 @@
<a href="/u/{{.Comment.User.Username}}">{{.Comment.User.Username}}</a> <a href="/u/{{.Comment.User.Username}}">{{.Comment.User.Username}}</a>
</div> </div>
<div class="column content pt-1 pb-0"> <div class="column content pt-1 pb-0">
<a href="/forum/thread/{{.ID}}" class="has-text-dark"> <a href="/forum/thread/{{.ID}}">
<h2 class="is-size-4 pt-0 has-text-dark"> <h2 class="is-size-4 pt-0">
{{if .Pinned}}<sup class="fa fa-thumbtack has-text-success mr-2 is-size-6" title="Pinned"></sup>{{end}} {{if .Pinned}}<sup class="fa fa-thumbtack has-text-success mr-2 is-size-6" title="Pinned"></sup>{{end}}
{{or .Title "Untitled"}} {{or .Title "Untitled"}}
</h2> </h2>

View File

@ -58,7 +58,7 @@
{{else}} {{else}}
{{range .Forums}} {{range .Forums}}
{{$Stats := $Root.ForumMap.Get .ID}} {{$Stats := $Root.ForumMap.Get .ID}}
<div class="card block has-background-primary-light has-text-dark"> <div class="card block has-background-primary-light">
<div class="card-content"> <div class="card-content">
<div class="columns"> <div class="columns">
<div class="column is-3 pt-0 pb-1"> <div class="column is-3 pt-0 pb-1">
@ -93,8 +93,8 @@
</div> </div>
<div class="column py-1"> <div class="column py-1">
<div class="box has-background-success-light has-text-dark"> <div class="box has-background-success-light">
<h2 class="subtitle has-text-dark mb-1">Latest Post</h2> <h2 class="subtitle mb-1">Latest Post</h2>
{{if $Stats.RecentThread}} {{if $Stats.RecentThread}}
<a href="/forum/thread/{{$Stats.RecentThread.ID}}"> <a href="/forum/thread/{{$Stats.RecentThread.ID}}">
<strong>{{$Stats.RecentThread.Title}}</strong> <strong>{{$Stats.RecentThread.Title}}</strong>
@ -116,7 +116,7 @@
<div class="column is-3 py-1"> <div class="column is-3 py-1">
<div class="columns is-mobile is-gapless"> <div class="columns is-mobile is-gapless">
<div class="column has-text-centered mr-1"> <div class="column has-text-centered mr-1">
<div class="box has-background-warning-light has-text-dark p-2"> <div class="box has-background-warning-light p-2">
<p class="is-size-7">Topics</p> <p class="is-size-7">Topics</p>
{{if $Stats}} {{if $Stats}}
{{$Stats.Threads}} {{$Stats.Threads}}
@ -126,7 +126,7 @@
</div> </div>
</div> </div>
<div class="column has-text-centered mx-1"> <div class="column has-text-centered mx-1">
<div class="box has-background-warning-light has-text-dark p-2"> <div class="box has-background-warning-light p-2">
<p class="is-size-7">Posts</p> <p class="is-size-7">Posts</p>
{{if $Stats}} {{if $Stats}}
{{$Stats.Posts}} {{$Stats.Posts}}
@ -136,7 +136,7 @@
</div> </div>
</div> </div>
<div class="column has-text-centered ml-1"> <div class="column has-text-centered ml-1">
<div class="box has-background-warning-light has-text-dark p-2"> <div class="box has-background-warning-light p-2">
<p class="is-size-7">Users</p> <p class="is-size-7">Users</p>
{{if $Stats}} {{if $Stats}}
{{$Stats.Users}} {{$Stats.Users}}

View File

@ -120,7 +120,7 @@
{{$Root := .}} {{$Root := .}}
<div class="block p-2"> <div class="block p-2">
{{range .Comments}} {{range .Comments}}
<div class="box has-background-link-light has-text-dark"> <div class="box has-background-link-light">
<div class="columns"> <div class="columns">
<div class="column is-2 has-text-centered"> <div class="column is-2 has-text-centered">
<div> <div>

View File

@ -128,7 +128,7 @@
</footer> </footer>
{{else}} {{else}}
<footer class="card-footer"> <footer class="card-footer">
<button type="submit" name="verdict" value="remove" class="card-footer-item button is-danger" <button type="submit" name="verdict" value="remove" class="card-footer-item button is-danger is-outlined"
onclick="return confirm('Are you sure you want to remove this friendship?')"> onclick="return confirm('Are you sure you want to remove this friendship?')">
<span class="icon"><i class="fa fa-xmark"></i></span> <span class="icon"><i class="fa fa-xmark"></i></span>
<span>{{if $Root.IsPending}}Cancel{{else}}Remove{{end}}</span> <span>{{if $Root.IsPending}}Cancel{{else}}Remove{{end}}</span>