[RFC] [WIP] Userstyle for the forum

seth · 2022-09-15 15:19:45

I've been playing around w/ this.
It's very reduced and silent and less blue and there's a dark mode (augmenting the default forum style)
(You can play around w/ https://developer.mozilla.org/en-US/doc … lor-scheme if your browser is somewhat daylight aware)

Maybe a bit rough around the corners, but should be usable - yell if you find errors or problems (w/ readability)

Edit #1 / Trilby
- brdfooter select bottom margin
- set lateral padding to 4% rather than 6em (so you get more whitespace on a wide output and save screen estate on a narrow window)
Edit #2:
- full bright mode
- unicolor redirect
Edit #3:
- signature
Edit #4:
- round buttons
- 404

:root {
    --color_fg: #333;
    --color_fg2: #111;
    --color_bg: #fafafa;
    --color_bg2: #fbfbfb;
    --color_bg_in: #fdfdfd;
    --color_bg_quote: #f5f5f5;
    --color_code: #46640b;
    --color_quote: #666;
    --color_brd_light: #eee;
    --color_nav_bg:#333;
    --color_nav_fg:#fafafa;
}

/* uncomment below for dark mode */
/*
:root {
    --color_fg: #fafafa;
    --color_fg2: white;
    --color_bg: #333;
    --color_bg2: #323232;
    --color_bg_in: #222;
    --color_bg_quote: #353535;
    --color_code: #ffb31c;
    --color_quote: #aaa;
    --color_brd_light: #2c2c2c;
}
/* end of dark mode */

/* uncomment below for bright header/footer */
/*
:root {
    --color_nav_bg:#fafafa;
    --color_nav_fg:#222;
}

#archnavbar {
    background:var(--color_nav_bg)!important;
    color:var(--color_nav_fg)!important;
}

#archnavbar.anb-forum ul li.anb-selected a, #archnavbar ul li a:hover {
    color:var(--color_nav_fg)!important;
}

#archnavbar #archnavbarlogo {
    background-color:#333!important;
    border: 3pt solid #333 !important;
    border-radius:4pt!important;
    box-shadow: 0 0 3pt #333 !important;
}

/* end of bright header/footer */

/******* from here one hands off … unless you want to mess around ;) *******/
html,
body {
    background: var(--color_nav_bg) !important;
    color: var(--color_nav_fg) !important;
}

/* 404 */
body > center > h1:before {
    content:":(\a";
    white-space: pre;
    font-size:400%;
}
/* end 404 */


div.pun {
    /*background: #333 !important; color:#fafafa!important;*/
    padding: 0!important;
}
#punviewtopic > * {
    background: none!important;
}

.pun .blocktable .box {
    background: var(--color_bg) !important;
}

.pun {
    background: none !important;
}
.punwrap {
    border: none !important;
    color: #999!important;
    padding: 0!important;
}

.infldset {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    border: none !important;
}
.inbox > .pagepost {
    border: none !important;
}
.inbox ul.crumbs li:last-child strong:last-child a {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    color: #d09217 !important;
    background: none !important;
    border-bottom: 1px solid #d09217!important;
}
.pun a:hover,
#brdmain a:hover,
a:hover {
    text-decoration: none !important;
    color: #1793D0 !important;
}

#brdmain > div.blockpost {
    margin-bottom: 8pt !important;
    color: var(--color_quote)!important;
}
#brdmain {
    border: none !important;
    border-top: 4px solid #1793D0!important;
    padding: 4%!important;
    padding-top: 2em!important;
    padding-bottom: 2em!important;
    margin: 0!important;
    background: var(--color_bg) !important;
    color: var(--color_fg)!important;
}
#brdmain span.byuser {
    font-weight: normal!important;
}
#brdheader {
    padding: 18px!important;
    padding-bottom: 0!important;
    background: var(--color_nav_bg)!important;
}
#brdmenu,
#brdmenu * {
    background: none!important;
    border: none!important;
}

.pun div.quotebox {
    border: 1px solid var(--color_brd_light) !important;
    border-left: 4px solid var(--color_quote) !important;
    border-radius: 4pt!important;
    background: var(--color_bg_quote)!important;
    color: var(--color_quote)!important;
}

.pun div.quotebox div.quotebox {
    color: #999!important;
}
.pun div.quotebox div.quotebox cite {
    color: #999!important;
}
.pun div.codebox {
    padding: 1em!important;
    border: 1px dashed var(--color_code) !important;
    border-radius: 4pt!important;
    background: var(--color_bg_in);
    color: var(--color_code) !important;
}
.pun div.codebox pre.vscroll {
    margin-bottom: -1em !important;
    border-bottom: 1px dashed var(--color_code) !important;
}
.inbox tr.roweven {
    background: var(--color_bg2) !important;
    border-top: 1px solid var(--color_brd_light) !important;
    border-bottom: 1px solid var(--color_brd_light) !important;
}

div .blocktable h2 {
    color:var(--color_fg) !important;
}

.pun .blocktable .box {
    margin-bottom: 4pt !important;
}

.pun .blocktable th, .pun #vf th {
    background: var(--color_brd_light) !important;
    border-bottom: 8pt solid var(--color_bg) !important;
    color:var(--color_quote) !important;
}
div.blockpost > h2 {
    background: none !important;
    border: none !important;
}
div.blockpost {
    background: none!important;
    border-bottom: 1px solid var(--color_brd_light)!important;
}
.pun .blockpost, .pun .blockform > *, .pun .blocktable * {
    border-width: 0px!important;
}

/*
div.blockpost div.postright {padding-right:18px!important; }
div.postbody {background:var(--color_bg)!important; box-shadow: 0 1px 3px #aaa !important; width: calc(100% - 252px)!important; margin-right:16px!important;}*/
div.postbody {
    background: var(--color_bg2)!important;
    border-left: 1px solid var(--color_brd_light) !important;
    border-top: 1px solid var(--color_brd_light) !important;
    border-radius: 4pt!important;
}
div.postfoot {
    background: var(--color_bg)!important;
}
.blockpost h2 * {
    color: #999!important;
}
.pun .postmsg,
#punhelp code,
#punhelp samp {
    color: var(--color_fg)!important;
}


div.postsignature {
    border-top: 2px solid var(--color_brd_light) !important;
    /*border-right: 2px solid var(--color_brd_light) !important;
    background: var(--color_bg_quote)!important;*/
    margin-top:0.66em!important;
    max-width:64em!important;
    padding-left:2em!important;
}

div.postsignature p {
    vertical-align:text-bottom!important;
    color: var(--color_quote)!important;
    margin-right:2em!important;
}

div .postsignature hr {
    display:none!important;
}

.blockform * {
    background-color: var(--color_bg) !important;
}
.blockform {
    border: none !important;
    border-top: 2px solid #999 !important;
}

#quickpostform p.buttons,
#edit p.buttons {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    position: relative !important;
    top: -24px !important;
    padding-right: 36px !important;
    text-align: right !important;
    display: flex !important;
    flex-flow: row-reverse !important;
    margin-left: 45em !important;
}
legend {
    color: transparent!important;
}

.checklist legend, #profile legend {
    color: var(--color_fg)!important;
}

#edit p.buttons {
    top: -84px !important;
}
.pun .txtarea textarea,
input.longinput {
    background: var(--color_bg_in) !important;
    border: 2px solid transparent !important;
    border-top: 2px solid var(--color_quote)!important;
    border-bottom: 2px solid var(--color_quote)!important;
    color: var(--color_fg2)!important;
    padding: 0.3em!important;
}
.pun .txtarea textarea:focus,
input.longinput:focus {
    border-color: #1793D0 !important;
    outline: none !important;
}
.pun #quickpost h2,
#punpost .blockform h2,
#punedit .blockform h2,
#posterror h2,
#pundelete .blockform h2 {
    color: #999 !important;
}

select,
input[type="submit"] {
    background: none !important;
    border: 1px solid #999 !important;
    border-radius: 1em !important;
    color: var(--color-fg)!important;
}
input[name="submit"] {
    background: var(--color_brd_light) !important;
    color: var(--color_fg2) !important;
}
input[type="submit"]:hover {
    background: #1793D0 !important;
    border-color: #1793D0 !important;
    color: #fff !important;
}
input[type="submit"]:focus {
    outline: none !important;
    border-color: #1793D0 !important;
}
.pun select {
    padding-left: 1em !important;
    padding-right: 1em !important;
    appearance: none !important;
    border: 1px solid var(--color_quote) !important;
    border-left: 4px solid var(--color_quote) !important;
}

#brdfooter select {
    margin-bottom:1em;
}
.pun select:hover {
    border-color: #1793D0 !important;
}
.pun select:focus {
    background: #1793D0 !important;
    color: white !important;
    outline: none !important;
}

.pun select option {
    background: var(--color_nav_bg) !important;
    color: var(--color_nav_fg) !important;
}

input[type="text"] {
    background: var(--color_bg_in) !important;
    border:1px solid #999!important;
}
input[type="text"]:focus {
    border:1px solid #1793D0!important;
    outline:none!important;
}


.pun .blockform .box,
#adstats,
#adintro,
#postpreview,
#posterror,
.pun #quickpost h2,
#punpost .blockform h2,
#punedit .blockform h2,
#posterror h2,
#pundelete .blockform h2 {
    background: none!important;
}

.pun .icon {
    border-width: 6px !important;
    border-radius: 3px!important;
    border-color: var(--color_bg_in)!important;
}

.pun .inew .icon {
    border-color: #1793D0!important;
}

#archnavbar {
    border: none !important;
    margin: 0 !important;
}
#brdfooter {
    background: var(--color_nav_bg) !important;
    padding: 0 2em 0em 2em !important;
}

#brdfooter * {
    color: var(--color_nav_fg) !important;
}

#brdfooter optgroup {
    background: var(--color_nav_bg)!important;
    color: #1793D0 !important;
}

div.postfoot {
    border:none!important;
}

div.postleft,
div.postfootleft {
    text-align: center !important;
}

#brdmain .postreport a:hover {
    color: #990000 !important;
}
#brdmain .postedit a:hover {
    color: #73BA25 !important;
}
#brdmain .postquote a:hover {
    color: #FFBC00 !important;
}

#punredirect * {
    background: var(--color_nav_bg) !important;
    color:var(--color_nav_fg)!important;
}

Last edited by seth (2022-09-22 08:53:50)

Trilby · 2022-09-15 16:10:21

Looks great. I'm using it now but I've made one change to set #brdmain padding to 2em all around. I'm all for some visual margins, but the 6em on the sides felt like wasted space (though I also had previously adjusted to built in styles to use near full width instead of their fixed widths). I also added larger base font size (16pt for me under :root).

I tried tweaking the #333 color of the headers and footer - but I've not landed on anything here. The contrast from the #333 of those elements to the #fbfbfb of the main content is a bit strong for my taste, but it seems lightening up the #333 would also require changes to the foreground colors there too.

EDIT: I see a potential bug in the resulting behavior when I use the upper-right Topics links (.e.g, "Posted", "New", etc). From those pages, the "Jump to" selection menu at the very bottom left of the page is flush against the bottom which is unappealing. I confirmed that this is in contrast to other pages with the same selection menu (e.g., the Index page or any of the subforum topic listing pages). And as I write this post, I see the same flush-to-bottom issue in the edit post page.

EDIT 2: I suspect the above issue is due to the absence of the "Atom ... Feed" link in the lower right on the problematic pages. It seems that link is taking up just enough vertical space to result in a nice looking margin for the jump-to selection box, but there is no other margin / padding setting maintaining that spacing, so when the atom feed link is absent, it gets scrunched.

Last edited by Trilby (2022-09-16 02:53:26)

seth · 2022-09-15 20:11:28

See the 1st edit for lateral padding and footer select margin.

About the inverted header/footer, I wanted to preserve the original arch header (as it's across all pages, just extending it into the non-content parts of the page) and pick that up for the (non-content) footer (also as a stopblock)
Reversing the hardcoded colors in the #brdfooter elements should™ to for the latter, the former will require overriding the body and archnavbar colors - I might look into a fullbright variant (ie. the entire top is then bright)?

Trilby · 2022-09-15 21:59:37

Thanks, the footer now looks consistent across pages, and the 4% padding looks great.

I may get used to the dark header, and noticed that it does match the main page. Perhaps it was just a bit of an adjustment. Though on vertically short pages (e.g., the brief redirect page right after submitting a post) the big dark area of a footer/empty-body felt like a bit too much darkness.

Last edited by Trilby (2022-09-16 02:55:48)

seth · 2022-09-15 22:20:39

Though on vertically short pages

That's actually an error, driven by the body color which is no longer needed to be inverted (i think) because I removed all the margins and paddings.
Updated the css in teh OP.

Trilby · 2022-09-16 13:48:58

Perfect now. It seems the #punredirect block at the end was needed to get rid of the #333 color taking up most of the vertical space. Though it replaces it with color_nav_bg which was #333 too which threw me at first. But once I set that variable at the top I'm all set and the redirect pages look great.

ugjka · 2022-09-16 13:57:53

I like this, although i feel the separation between posts should be like checker board or a line

Last edited by ugjka (2022-09-16 13:58:08)

seth · 2022-09-16 14:20:20

@ugjka
There's a top/left border on every post (and the post itself is slightly brigther than the board), but it uses a very minor shade which may be a problem if your monitor is bleeding out on bright colors?

ugjka · 2022-09-16 14:51:13

I can kind of see it but it is very subtle. yeah i have shit hardware

seth · 2022-09-16 15:10:21

Try to set --color_brd_light to #ddd
This is btw usually not "shit hardware" but "badly configured hardware" (too much brightness and contrast) - or your eys

Trilby · 2022-09-16 15:18:24

FWIW, the following patch gets the header / footer just right for my personal tastes. This moves the 4px blue bar up to the black header and adds a 1px blue line below the top nav and above the footer nav area.

--- seths.css
+++ trilbyvariant.css
@@ -8,8 +8,8 @@
     --color_code: #46640b;
     --color_quote: #666;
     --color_brd_light: #eee;
-    --color_nav_bg:#333;
-    --color_nav_fg:#fafafa;
+    --color_nav_bg:#eaeaff;
+    --color_nav_fg:#333;
 }
 
 /* uncomment below for dark mode */
@@ -107,7 +107,7 @@
 }
 #brdmain {
     border: none !important;
-    border-top: 4px solid #1793D0!important;
+    border-top: 1px solid #1793D0!important;
     padding: 4%!important;
     padding-top: 2em!important;
     padding-bottom: 2em!important;
@@ -119,6 +119,7 @@
     font-weight: normal!important;
 }
 #brdheader {
+    border-top: 4px solid #1793D0!important;
     padding: 18px!important;
     padding-bottom: 0!important;
     background: var(--color_nav_bg)!important;
@@ -341,6 +342,7 @@
     margin: 0 !important;
 }
 #brdfooter {
+    border-top: 1px solid #1793D0!important;
     background: var(--color_nav_bg) !important;
     padding: 0 2em 0em 2em !important;
 }

ugjka · 2022-09-16 17:24:50

It is OK now

Arch Linux

#1 2022-09-15 15:19:45

[RFC] [WIP] Userstyle for the forum

#2 2022-09-15 16:10:21

Re: [RFC] [WIP] Userstyle for the forum

#3 2022-09-15 20:11:28

Re: [RFC] [WIP] Userstyle for the forum

#4 2022-09-15 21:59:37

Re: [RFC] [WIP] Userstyle for the forum

#5 2022-09-15 22:20:39

Re: [RFC] [WIP] Userstyle for the forum

#6 2022-09-16 13:48:58

Re: [RFC] [WIP] Userstyle for the forum

#7 2022-09-16 13:57:53

Re: [RFC] [WIP] Userstyle for the forum

#8 2022-09-16 14:20:20

Re: [RFC] [WIP] Userstyle for the forum

#9 2022-09-16 14:51:13

Re: [RFC] [WIP] Userstyle for the forum

#10 2022-09-16 15:10:21

Re: [RFC] [WIP] Userstyle for the forum

#11 2022-09-16 15:18:24

Re: [RFC] [WIP] Userstyle for the forum

#12 2022-09-16 17:24:50

Re: [RFC] [WIP] Userstyle for the forum

Board footer