You are not logged in.

#1 2024-04-07 05:04:17

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 12,874
Website

The default forum style is now dark.

These days there is an increasing preference for dark themes, so the default forum style has been switched from Hydrogen to Hydrogen-Dark. This style applies for forum visitors who are not logged in, and will be the initial style for newly registered members.

As before, members are free to choose their preferred style from those available at Profile > Display > Styles

Hydrogen-Dark is based on the Hydrogen style, but has been tweaked to resemble the existing Crunchbang style, which had layout issues with small-screen devices. Along with Hydrogen-Dark, three other new styles have been added: Crunchrex, Hydrogen-invert and Hydrogen-night. Please try, and choose your favourite.

Original discussion here: https://forums.bunsenlabs.org/viewtopic.php?id=8684


...elevator in the Brain Hotel, broken down but just as well...
( a boring Japan blog (currently paused), now on Bluesky, there's also some GitStuff )

Introduction to the Bunsenlabs Boron Desktop

Offline

#2 2024-04-07 05:11:15

hhh
Gaucho
From: High in the Custerdome
Registered: 2015-09-17
Posts: 16,396
Website

Re: The default forum style is now dark.

I want to post the coffee clip from Airplane! here, but I've got a drinking problem.

*drains glass of orange juice into forehead*


I don't care what you do at home. Would you care to explain?

Offline

#3 2024-04-07 05:53:49

or1o9
Member
Registered: 2017-11-15
Posts: 247

Re: The default forum style is now dark.

Thanks, looking very good on my 14" screen. Great move in my opinion, very soothing & cool

Offline

#4 2024-04-07 07:37:02

Döbbie03
Resident Metalhead
From: New Zealand
Registered: 2015-09-29
Posts: 3,934

Re: The default forum style is now dark.

I still prefer the light one, but it's nice to know that there is an excellent dark alternative.


"All we are is dust in the wind, dude"
                                       - Theodore "Ted" Logan
"Led Zeppelin didn't write tunes that everybody liked, they left that to the Bee Gees."
                                       - Wayne Campbell

Offline

#5 2024-04-07 08:29:19

unklar
Back to the roots 1.9
From: #! BL
Registered: 2015-10-31
Posts: 2,765

Re: The default forum style is now dark.

or1o9 wrote:

Thanks, looking very good on my 14" screen. Great move in my opinion, very soothing & cool

+1 "very soothing & cool"  wink

Thanks the Team.

Online

#6 2024-04-07 10:44:38

altman
Member
From: Canada
Registered: 2015-10-24
Posts: 619

Re: The default forum style is now dark.

Looks nice, I was wondering what was that this morning ! lol (where I am).

Thx for the hard work in there.

Last edited by altman (2024-04-07 10:45:06)


My Linux installs are as in my music; it s on Metal

Offline

#7 2024-04-07 23:25:04

marens
Member
From: World without M$
Registered: 2023-02-02
Posts: 1,008

Re: The default forum style is now dark.

Dobbie03 wrote:

I still prefer the light one, but it's nice to know that there is an excellent dark alternative.

If you want, you can restore the old Hydrogen style (when you are not logged in).

Save the Hydrogen-Old.css file in the same folder as userContent.css:

@-moz-document domain(forums.bunsenlabs.org) {

#brdmenu {
  background: unset !important;
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: unset !important;
  box-shadow: unset !important;
  padding: unset !important;
  margin: unset !important;
}

  img.logo {
    width: unset !important;
    padding: unset !important;
    margin: unset !important;
  }
  
  #brdmenu li {
    float: none !important;
  }  
  
  .infldset label.conl input,
  .infldset label.conl.required input,
  .infldset label.conl input#author {
    background: unset !important;
    color: unset !important;
  }  
  

/*
  Hydrogen.css
*/
/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* Limited Reset
----------------------------------------------------------------*/

html, body, .pun table, .pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3, .pun h4, .pun h5, .pun pre, .pun blockquote,
.pun ul, .pun ol, .pun li, .pun dl, .pun dt, .pun dd, .pun th, .pun td, .pun fieldset, .pun legend .pun img,
.pun abbr, .pun cite {
	border: 0 !important;
	font-style: normal !important;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
  text-rendering: optimizeLegibility !important;
}

.pun ul, .pun ol {
	list-style: none !important;
}

.pun select {
	padding-bottom: 1px !important;
	padding-top: 1px !important;
	padding-right: 1px !important;
}

/* Content Defaults
----------------------------------------------------------------*/

.pun {
	font: 81.25%/1.462em 'Open Sans', sans-serif !important;
}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun legend {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 1em !important;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace !important;
  font-size: 2em !important;
}

.pun pre, .pun code {
	font-family: "Ubuntu Mono", monospace !important;
	font-size: 1em !important;
}

.pun pre code {
	font-size: 1em !important;
}

.pun table {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border: 0 !important;
	empty-cells: show !important;
	width: 100% !important;
}

.pun h1 {
	font:2.154em/1em 'Ubuntu' !important;
	padding: 7px 0 !important;
}

.pun h2, .pun .hd h2 {
	font: 1.462em/1em 'Ubuntu' !important;
	padding: 7px 0 !important;
}

.pun h3 {
	font-size: 1.154em !important;
	line-height: 1.267em !important;
	padding: 7px 0 !important;
}

.pun h4 {
	font-size: 1.077em !important;
	font-weight: bold !important;
	padding: 7px 0 !important;
}

.pun h5, .pun h6 {
	font-size: 1em !important;
	font-weight: bold !important;
	padding: 7px 0 !important;
}

.pun p, .pun ul, .pun ol, .pun dl, .pun th, .pun td, .pun legend {
	padding: 7px 0 !important;
}

.pun strong, .pun th, .pun span.warntext, .pun p.warntext {
	font-weight: 600 !important;
}

.pun em {
	font-style: italic !important;
}

.pun a, .pun a:link, .pun a:visited {
	text-decoration: none !important;
}

.pun a:hover, .pun a:active, .pun a:focus {
	text-decoration: underline !important;
}

.pun .actions span {
	padding-left: 16px !important;
	padding-right: 8px !important;
	background: url(Air/img/bull.png) center left no-repeat !important;
	display: inline-block !important;
	line-height: normal !important;
}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #debug h2, #brdstats .conl dt, #brdstats .conr dt, #modcontrols dt,
#searchlinks dt, div.postright h3, .pun .subscribelink span, #announce .hd, #reportform h2, #punmoderate #vf h2,
#punviewforum #vf h2, .pun .required strong span, .pun .icon div {
	display: block !important;
	overflow: hidden !important;
	position: absolute !important;
	text-indent: -9999em !important;
	width: 0 !important;
}

/* Generic Float Clear
----------------------------------------------------------------*/

.pun .inbox, .pun #brdmain, .pun .crumbs, .pun .pagepost, .pun .block2col {
	min-height: 1px !important;
}

* html .pun .inbox, * html .pun #brdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: inline-block !important;
}

* html .pun .inbox, * html .pun #bdrdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: block !important;
}

.pun .inbox:after, .pun #brdmain:after, .pun .crumbs:after, .pun .pagepost:after, .pun .block2col:after {
	content: " " !important;
	display: block !important;
	height: 0 !important;
	font-size: 0 !important;
	clear: both !important;
	visibility: hidden !important;
}

.pun .block2col .inbox:after {
	content: none !important;
	clear: none !important;
}

.clearl {
	clear: left !important;
}


/*****************************************************************
2. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

.pun {
	max-width: 1070px !important;
	margin: 0 auto !important;
	padding: 30px 40px !important;
}

#punredirect, #punmaint {
	padding: 60px 20% 12px 20% !important;
}

#puninstall, #pundb_update {
	padding: 20px 10% !important;
}

.pun .punwrap {
	border: 1px solid !important;
	padding: 18px !important;
}

#punredirect h2, #punmaint h2 {
	border-bottom-style: dotted !important;
	border-bottom-width: 1px !important;
	margin-bottom: 3px !important;
}

* {
	scrollbar-width: thin !important;
	scrollbar-color: #2365B0 hsla(0,0%,100%,.1) !important;
}

/* Section Spacing and Borders
----------------------------------------------------------------*/

#brdmain {
	border-style: solid none !important;
	border-width: 0px 0 !important;
  border-color: #cad7e1 !important;
	margin-bottom: 12px !important;
	padding: 0px 0 !important;
}

#punindex #brdmain {
	padding-top: 0 !important;
}

#punredirect #brdmain, #punmaint #brdmain {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#brdstats {
	border-style: solid none none none !important;
	border-width: 0px 0 0 0 !important;
  border-color: #cad7e1 !important;
	margin-top: 0px !important;
	padding-top: 0px !important;
}

#quickpost {
	margin-top: 12px !important;
	padding-top: 12px !important;
}

#announce {
	border-style: solid none none none !important;
	border-width: 2px 0 0 0 !important;
	padding-top: 3px !important;
}

/*****************************************************************
3. COMMON BOARD ELEMENTS
*****************************************************************/

/* Logo, Description and Main Menu
----------------------------------------------------------------*/

#brdtitle h1 {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 400 !important;
}

#brddesc {
	border-top-style: dotted !important;
	border-top-width: 1px !important;
	padding: 10px 0 !important;
}

#brddesc p {
	padding: 0 !important;
}

#brdmenu ul {
	padding: 0 !important;
  text-align:center !important;
}

#brdmenu li {
  display: inline-block !important;
  color: #000 !important;
}

#brdmenu a:link, #brdmenu a:visited {
	border-right-style: solid !important;
	border-width: 1px !important;
	display: block !important;
	min-width: 60px !important;
	padding: 12px 16px 12px 8px !important;
	white-space: nowrap !important;
  text-align: center !important;
  font-weight: 300 !important;
}

#brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
	text-decoration: underline !important;
  background: inherit !important;
}

img.logo {
  height:72px !important;
  padding:0 !important;
  margin:0 !important;
}

#brdtitle {
  text-align:center !important;
}

/* Welcome Box
----------------------------------------------------------------*/

#brdwelcome {
	padding: 6px 0 !important;
}

#brdwelcome .conl, #brdwelcome .conr, #brdwelcome p, #brdwelcome li {
	display: inline !important;
	padding: 0 !important;
}

#brdwelcome .conl {
  float: left !important;
}

#brdwelcome .conr {
  float: right !important;
}

#brdwelcome li span {
	background: url(Air/img/bull.png) center left no-repeat !important;
	padding-left: 18px !important;
	margin-right: 3px !important;
	display: inline-block !important;
	line-height: normal !important;
	white-space: nowrap !important;
}

#brdwelcome .conl li:first-child span {
	padding-left: 0 !important;
	background: none !important;
}

/* Stats
----------------------------------------------------------------*/

#brdstats .conl {
	float: left !important;
}

#brdstats .conr {
	float: right !important;
	text-align: right !important;
}

#brdstats #onlinelist {
	border-top-style: dotted !important;
	border-top-width: 1px !important;
	clear: both !important;
}

#brdstats #onlinelist dt, #brdstats #onlinelist dd {
	display: inline !important;
}

/* Footer
----------------------------------------------------------------*/

.pun #modcontrols {
	border-style: none none dotted none !important;
	border-width: 0 0 1px 0 !important;
	margin-bottom: 4px !important;
	text-align: center !important;
	width: 100% !important;
}

.pun #modcontrols dd {
	display: inline !important;
}

.pun #brdfooter #modcontrols dd span {
	background: url(Air/img/bull.png) center left no-repeat !important;
	display: inline-block !important;
	line-height: normal !important;
	padding-left: 18px !important;
	white-space: nowrap !important;
}

.pun #brdfooter .conl {
	float: left !important;
}

.pun #brdfooter .conr {
	text-align: right !important;
	float: right !important;
}

.pun #brdfooter #poweredby a {
	font-size: 1.077em !important;
	font-weight: bold !important;
}

.pun #brdfooter p#poweredby {
  line-height: 1.5 !important;
}

.pun #brdfooter #qjump {
	padding-top: 5px !important;
}

.pun #brdfooter #qjump * {
	white-space: nowrap !important;
}

.pun #brdfooter #searchlinks dd span {
	background: url(Air/img/bull.png) center left no-repeat !important;
	display: inline-block !important;
	line-height: normal !important;
	padding-left: 18px !important;
	white-space: nowrap !important;
}

.pun #brdfooter #feedlinks {
	padding-bottom: 0 !important;
}

.pun #brdfooter #feedlinks span {
	background: url(Air/img/feed.png) center left no-repeat !important;
	display: inline-block !important;
	padding-left: 18px !important;
	white-space: nowrap !important;
}

.pun #debugtime {
	border-style: dotted none none none !important;
	border-width: 1px 0 0 0 !important;
	margin-top: 7px !important;
	text-align: center !important;
}

/* Breadcrumbs, Postlink, Pagination
----------------------------------------------------------------*/

.pun .linkst .inbox, .pun .linksb .inbox, .pun .postlinksb .inbox {
	overflow: hidden !important;
}

.pun .linksb, .pun .postlinksb, .pun .linkst, .pun .crumbs {
	clear: both !important;
	position: relative !important;
}

.pun .linkst .crumbs {
	font-family: "Ubuntu", sans-serif !important;
	font-size: 1.462em !important;
	line-height: 1.211em !important;
	padding: 6px 0 !important;
  border-top: 1px solid rgb(202, 215, 225) !important;
  border-bottom: 1px solid rgb(202, 215, 225) !important;
}

.pun .linksb .crumbs, .pun .postlinksb .crumbs {
	font-family: "Ubuntu", sans-serif !important;
	font-size: 1.154em !important;
}

.pun .linkst .crumbsplus .pagepost {
	border-top-style: dotted !important;
	border-top-width: 0px !important;
}

.pun .linksb .crumbsplus .pagepost, .pun .postlinksb .crumbsplus .pagepost {
	border-bottom-style: dotted !important;
	border-bottom-width: 1px !important;
}

.pun .postlinksb .crumbs {
	margin-right: 11em !important;
}

.pun .crumbs li {
	float: left !important;
	padding-right: 0.4em !important;
	white-space: nowrap !important;
}

.pun .crumbs li strong {
	font-weight: normal !important;
}

.pun .pagelink {
	float: left !important;
	white-space: nowrap !important;
}

.pun .pagelink strong, .pun .pagelink a, .pun .pagelink span.spacer {
	border-style: none none none solid !important;
	border-width: 0 0 0 1px !important;
	display: inline-block !important;
	padding: 0 12px 0 10px !important;
	margin-right: -6px !important;
}

.pun .pagelink .item1 {
	border: 0 !important;
}

.pun .pagelink .pages-label {
	display: inline-block !important;
}

.pun .postlink {
	float: right !important;
	font-weight: 600 !important;
	text-align: right !important;
}

.pun .modbuttons {
	float: right !important;
	padding: 5px 0 3px 0 !important;
}

.pun .modbuttons input {
	margin-left: 8px !important;
}

.pun .subscribelink {
	position: absolute !important;
	right: 0 !important;
	text-align: right !important;
	top: 33px !important;
}

#punindex .subscribelink {
	top: 0px !important;
}

#punindex .linksb {
	height: 12px !important;
	margin-bottom:12px !important;
}

/*****************************************************************
4. MAIN TABLES
*****************************************************************/

.pun #brdmain .blocktable {
	position: relative !important;
}

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
	font: 1em/1.462em "Open Sans", sans-serif !important;
	font-weight: bold !important;
	margin: 1px 1px 0 1px !important;
	padding-left: 8px !important;
	position: absolute !important;
	left: 0 !important;
	white-space: nowrap !important;
	z-index: 100 !important;
}

#punindex .blocktable th.tcl, #punsearch #vf th.tcl {
	font-size: 0 !important;
	text-indent: -9999em !important;
}

.pun .blocktable .box {
	border-style: solid !important;
	border-width: 1px !important;
	margin-bottom: -1px !important;
	overflow: hidden !important;
	position: relative !important;
}

* html .pun .blocktable .box {
	display: inline-block !important;
}

.pun .blocktable table {
	table-layout: fixed !important;
	margin-bottom: -1px !important;
}

.pun .blocktable th {
	padding: 7px 8px !important;
	border-style: none none solid none !important;
	border-width: 1px !important;
	text-align: left !important;
}

.pun .blocktable td {
	padding: 7px 8px !important;
	line-height: 1.3077em !important;
	border-style: none none solid none !important;
	border-width: 1px !important;
	text-align: left !important;
}

.pun .blocktable h3 {
	font-size: 1.077em !important;
	font-weight: 600 !important;
	padding: 0 !important;
}

.pun .blocktable p {
	padding: 0 !important;
}

.pun .blocktable .tcl p {
	padding: 5px 0 0 0 !important;
}

.pun .blocktable .tcl {
	width: auto !important;
}

.pun .blocktable .tc2, .pun .blocktable .tc3, .pun .blocktable .tcmod {
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center !important;
	width: 11% !important;
}

.pun .blocktable .tcr {
	width: 30% !important;
}

.pun .blocktable td .newtext, .pun .blocktable td .pagestext, .pun .blocktable td .byuser {
	white-space: nowrap !important;
}

.pun .blocktable .tcl h3 span.newtext {
	font-size: 0.929em !important;
	font-weight: normal !important;
}

.pun #vf td.tcl span.stickytext, .pun #vf td.tcl span.closedtext {
	font-size: 1em !important;
	font-weight: bold !important;
}

#punsearch #vf .tc2 {
	padding-left: 8px !important;
	padding-right: 8px !important;
	text-align: left !important;
	width: 18% !important;
}

#users1 .tcr {
	width: 25% !important;
}

#users1 .tc2 {
	padding-left: 8px !important;
	padding-right: 8px !important;
	text-align: left !important;
	width: 25% !important;
}

#debug {
	margin-top: 12px !important;
}

#debug .tcl {
	width: 10% !important;
}

#punredirect #debug .tcl, #punmaint #debug .tcl {
	width: 20% !important;
}

#debug .tcr {
	width: 90% !important;
	white-space: normal
}

#punindex .tcr .byuser {
	display: block
}

#punindex td.tc2, #punindex td.tc3, #punindex td.tcr, .pun #vf td.tc2, .pun #vf td.tc3,
.pun #vf td.tcr, #punindex td.tcl div.forumdesc, .pun #vf td.tcl span {
	font-size: 0.923em !important;
}

.pun #vf td.tcl a {
	font-weight: bold !important;
}

.pun #vf td.tcl span a {
	font-weight: normal !important;
}

.pun .blocktable .tclcon {
	min-height: 1px !important;
	overflow: hidden !important;
	padding: 0 11px 0 12px !important;
	position: relative !important;
}

.pun .blocktable .tclcon div {
	width: 100% !important;
	overflow: hidden !important;
}

.pun .icon {
	float: left !important;
  font-weight: 600 !important;
  font-size: 1.077em !important;
}

div.icon::before {
  content: "■" !important;
}

.pun .iposted .ipost {
	font-weight: bold !important;
	left: 0 !important;
	padding-left: 4px !important;
	position: absolute !important;
	text-align: center !important;
	top: 0 !important;
	width: 8px !important;
}

/*****************************************************************
MAIN POSTS
*****************************************************************/

/* Structure
----------------------------------------------------------------*/

.pun .blockpost {
	border-style: solid !important;
	border-width: 1px !important;
	margin-bottom: -1px !important;
	overflow: hidden !important;
	position: relative !important;
}

* html .pun .blockpost {
	display: inline-block !important;
}

.pun .blockpost h2 {
	font: 1em/1.462em "Open Sans", sans-serif !important;
	white-space: nowrap !important;
	border-bottom-style: solid !important;
	border-bottom-width: 1px !important;
	height: 1.462em !important;
	padding: 0.538em 8px 0.538em 236px !important;
	font-weight: normal !important;
}

#punsearch .blockpost h2 {
	height: auto !important;
	padding-left: 36px !important;
	white-space: normal !important;
}

#punsearch .blockpost h2 span span {
	white-space: nowrap !important;
	display: inline-block !important;
	font: 1.077em "Trebuchet MS", "Open Sans", sans-serif !important;
}

#punsearch .blockpost .icon {
	position: absolute !important;
	top: 0 !important;
	margin-top: -2.154em !important;
}

.pun .blockpost h2 .conr {
	float: right !important;
	text-align: right !important;
}

.pun .blockpost .inbox {
	float: right !important;
	position: relative !important;
	width: 100% !important;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	border-left-style: solid !important;
	border-left-width: 1px !important;
	float: right !important;
	margin-right: -218px !important;
	position: relative !important;
	text-align: left !important;
	width: 100% !important;
}

.pun .blockpost .postleft, .pun .blockpost .postfootleft {
	width: 194px !important;
	padding: 7px 12px 7px 12px !important;
	float: left !important;
	margin-left: -218px !important;
	position: relative !important;
}

.pun .blockpost .postleft dl {
	padding: 0 !important;
}

#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
	display: block !important;
	position: absolute !important;
	padding: 0.538em 0 0.538em 12px !important;
	height: 1.462em !important;
	top: -2.615em !important;
	left: 0 !important;
	overflow: hidden !important;
	width: 206px !important;
}

.pun .blockpost dt strong {
	font-size: 1.231em !important;
	font-weight: bold !important;
}

.pun .blockpost .postleft dd {
	font-size: 0.923em !important;
}

.pun .blockpost .postleft .usertitle {
	padding: 4px 0 6px 0 !important;
	font-size: 1em !important;
}

.pun .blockpost .postleft .postavatar {
	display: block !important;
	margin: 0 0 4px 0 !important;
}

.pun .blockpost .postright {
	position: relative !important;
	padding: 4px 230px 7px 18px !important;
}

.pun .postmsg {
	width:100% !important;
	overflow: hidden !important;
	word-wrap: break-word !important;
}

.pun .blockpost .postfootright {
	position: relative !important;
	padding: 7px 230px 7px 18px !important;
	text-align: right !important;
}

.pun .postfoot p, .pun .postfoot ul {
	padding: 0 !important;
}

.pun .blockpost .postfootright li {
	display: inline !important;
}

.pun .blockpost .postfootright li span {
	display: inline-block !important;
	padding-left: 16px !important;
	margin-left: 8px !important;
	line-height: normal !important;
	background: url(Air/img/bull.png) center left no-repeat !important;
  font-weight: 300 !important;
}

.pun .blockpost .usercontacts {
	padding: 7px 0 !important;
}

.pun .blockpost .usercontacts .email {
	background: url(Air/img/email.png) left 65% no-repeat !important;
	margin-right: 5px !important;
	padding-left: 21px !important;
	display: inline-block !important;
	line-height: normal !important;
}

.pun .blockpost .usercontacts .website {
	background: url(Air/img/ext.png) left 65% no-repeat !important;
	padding-left: 18px !important;
	display: inline-block !important;
	line-height: normal !important;
}

.pun .postsignature hr {
	border:none !important;
	height: 1px !important;
	margin-left: 0px !important;
	text-align: left !important;
}

/* Content (includes other user content)
----------------------------------------------------------------*/

.pun .usercontent {
	padding: 7px 0 !important;
}

.pun .postmsg p, .pun .postmsg li, #punhelp p samp {
	font-family: "Open Sans", sans-serif !important;
}

.pun .usercontent h1, .pun .usercontent h2, .pun .usercontent h3,
.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
	padding: 7px 0 0 0 !important;
}

#rules-block .usercontent h3
{
  padding: 7px 0 7px 0 !important;
  font-weight: 600 !important;
}

.pun .postmsg h5, #punhelp h5 {
	font-size: 1.231em !important;
	font-weight: bold !important;
	padding: 7px 0 !important;
}

.pun .usercontent ul, .pun .postmsg ul {
	list-style: disc !important;
	padding: 4px 13px 4px 30px !important;
}

.pun .usercontent ol, .pun .postmsg ol {
	list-style: decimal !important;
	padding: 4px 13px 4px 30px !important;
}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
	list-style: lower-alpha !important;
}

.pun .usercontent li, .pun .postmsg li {
	padding: 0 3px !important;
}

.pun .usercontent li p, .pun .postmsg li p {
	padding: 0 !important;
}

.pun span.bbu {
	text-decoration: underline !important;
}

.pun span.bbs, .pun del {
	text-decoration: line-through !important;
}

.pun .postmsg ins, #punhelp samp ins {
	text-decoration: none !important;
}

.pun .blockpost .postmsg .postedit {
	font-size: 0.857em !important;
}

.pun .blockform .postsignature, .pun .blockpost .postsignature {
	font-size: 0.923em !important;
}

.pun .codebox {
	border-style: solid !important;
	border-width: 1px !important;
  border-color: #b9c5ce !important;
	margin: 0.75em 1em !important;
	padding: 0 !important;
}

.pun .quotebox {
	border-style: solid !important;
	border-width: 1px 1px 1px 3px !important;
	margin: 0.75em 1em !important;
	padding: 0 0.75em !important;
}

.pun .quotebox cite {
	display: block !important;
	padding: 0.75em 0 0 0 !important;
	font-weight: bold !important;
	line-height: 1.462em !important;
}

.pun .quotebox blockquote {
	overflow: hidden !important;
	width: 100% !important;
}

.pun .codebox pre {
	overflow: auto !important;
	width: 100% !important;
	direction: ltr !important;
	text-align: left !important;
}

* html .pun .codebox pre {
	padding-bottom: 10px !important;
}

*:first-child+html .pun .codebox pre {
	padding-bottom: 10px !important;
}

.pun .codebox pre code {
	padding: 0.5em !important;
	white-space: pre !important;
}

.pun div[class*=codebox] pre code {
	display: inline-block !important;
}

* html .pun .codebox pre code {
	display: block !important;
}

.pun .codebox pre.vscroll {
	height: 32em !important;
	overflow: auto !important;
	overflow-y: auto
}

.pun .postmsg img, #punhelp samp img {
	vertical-align: text-top !important;
}

.pun .postmsg .postimg img {
	max-width: 98% !important;
	vertical-align: middle !important;
	margin: 7px 0.5em 7px 0 !important;
	border: 1px solid #787878 !important;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-style: solid !important;
	border-width: 2px !important;
}

/*****************************************************************
MAIN FORMS
*****************************************************************/

#punedit .blockform h2, #punpost .blockform h2, #postpreview h2, #posterror h2,
.pun #quickpost h2, .pun #reportform h2, #pundelete .blockform h2 {
	font: 1em/1.462em "Open Sans", sans-serif !important;
	font-weight: bold !important;
	white-space: nowrap !important;
	padding: 10px 19px 4px 37px !important;
	border: 0 !important;
}

#punpost .blockform h2, #punedit .blockform h2,.pun #quickpost h2,
#pundelete .blockform h2 {
	margin: 1px 1px 0 1px !important;
	width: 25em !important;
	position: absolute !important;
	z-index: 100 !important;
}

.pun #quickpost legend, #punpost legend, #punedit legend {
	width: 25em !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.pun .blockform .box {
	border-style: solid !important;
	border-width: 1px !important;
	padding-bottom: 12px !important;
}

.pun #posterror {
	border-style: solid !important;
	border-width: 1px !important;
}

.pun #posterror .box {
	padding: 0 18px 12px 18px !important;
}

* html .pun .blockform .box, * html .pun #posterror {
	display: inline-block !important;
}

.pun .blockform .forminfo, .pun .error-info {
	padding: 12px 18px !important;
	border-style: solid !important;
	border-width: 1px !important;
	position: relative !important;
}

.pun .blockform .forminfo {
	margin-top: 12px !important;
}

#pundelete .blockform .forminfo {
	margin-top: 33px !important;
}

.pun .forminfo h3 {
	padding-bottom: 0 !important;
}

.pun .error-list li {
	padding-left: 24px !important;
	background: url(Air/img/exclaim.png) center left no-repeat !important;
}

.pun .inform {
	padding: 0 18px !important;
}

.pun legend {
	font-weight: bold !important;
	padding: 10px 19px 4px 19px !important;
}

* html .pun legend {
	margin-left: -7px !important;
}

*:first-child+html .pun legend {
	margin-left: -7px !important;
}

.pun .infldset {
	border-style: solid !important;
	border-width: 1px !important;
	padding: 12px 18px !important;
}

#punregister #rules .infldset {
	padding: 5px 18px !important;
}

.pun fieldset p {
	padding: 0 0 7px 0 !important;
	width: 100% !important;
}

.pun fieldset .usercontent p {
	padding: 7px 0 !important;
}

.pun fieldset label {
	display: block !important;
	padding: 0 0 7px 0 !important;
}

.pun label em {
	font-weight: normal !important;
	font-style: normal !important;
}

.pun .required strong {
	background: url(Air/img/asterisk.png) center right no-repeat !important;
	font-weight: normal !important;
	padding-right: 14px !important;
	white-space: pre !important;
	display: inline-block !important;
	line-height: normal !important;
}

.pun label input, .pun label select, .pun label textarea {
	margin-top: 2px !important;
}

.pun label.conl {
	display: inline-block !important;
	padding-right: 12px !important;
}

.pun form .buttons {
	padding: 8px 19px 8px 34px !important;
	margin-bottom: -12px !important;
}

.pun .blockform .buttons input {
	margin-right: 12px !important;
}

.pun .rbox {
	padding: 3px 0 !important;
}

.pun .rbox label {
	padding: 3px 0 3px 1.75em !important;
	position: relative !important;
	min-height: 1px !important;
}

* html .pun .rbox label {
	text-indent: -3px !important;
	height: 1% !important;
}

.pun .rbox input {
	margin: 3px 0.75em 3px -1.75em !important;
	float: left !important;
	position: relative !important;
	vertical-align: middle !important;
	padding: 0 !important;
	height: 1em !important;
	width: 1em !important;
}

.pun input[type=text], .pun select, .pun textarea {
	font-family: "Open Sans", sans-serif !important;
  font-size: 1em !important;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace !important;
  font-size: 1.3em !important;
}

.pun .txtarea textarea, .pun input.longinput {
	width: 98% !important;
}

.pun textarea {
	resize: vertical !important;
}

.pun #quickpost .txtarea {
	padding-right: 12px !important;
	position: relative !important;
}

.pun .blockform .bblinks {
	padding-top: 0 !important;
}

.pun .blockform .bblinks li {
	display: inline !important;
}

.pun .blockform .bblinks li span {
	background: url(Air/img/help.png) center left no-repeat !important;
	margin-right: 8px !important;
	padding-left: 20px !important;
	display: inline-block !important;
}

.pun #quickpost .bblinks {
	padding-top: 0 !important;
}

.pun #quickpost .bblinks li {
	display: inline !important;
}

.pun #login p.clearb {
	border-top-style: dotted !important;
	border-top-width: 1px !important;
	font-size: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	margin-top: 7px !important;
	overflow: hidden !important;
	padding-bottom: 3px !important;
	padding-top: 7px !important;
	text-indent: -9999em !important;
	width: 100% !important;
}

.pun #postreview {
	padding-top: 12px !important;
}

.pun #postpreview, .pun #posterror {
	margin-bottom: 12px !important;
}

.pun #postpreview .postright {
	padding: 0 !important;
}

.pun #postpreview .postbody {
	border-style: solid !important;
	border-width: 1px !important;
	float: none !important;
	margin: 0 18px 12px 18px !important;
	padding: 0 !important;
	padding: 4px 18px 4px 18px !important;
	width: auto !important;
}

.pun span.email {
	background: url(Air/img/email.png) left 65% no-repeat !important;
	margin-right: 5px !important;
	padding-left: 21px !important;
	display: inline-block !important;
	line-height: normal !important;
}

.pun span.website {
	background: url(Air/img/ext.png) left 65% no-repeat !important;
	padding-left: 18px !important;
	display: inline-block !important;
	line-height: normal !important;
}

#punmisc #rules .box {
	border-style: solid !important;
	border-width: 1px !important;
	padding: 5px 18px !important;
}


#punhelp .box {
	border-style: solid !important;
	border-width: 1px !important;
	padding: 7px 12px !important;
}

.pun .multiselect {
	float: left !important;
	padding-bottom: 7px !important;
}

.pun .checklist {
	border-width: 1px !important;
	border-style: solid !important;
	max-height: 9em !important;
	width: 20em !important;
	overflow: auto !important;
	padding: 0.25em 0.5em !important;
	margin: 0.25em 16px 0 0.15em !important;
}

.pun .checklist legend {
	padding: 0 !important;
}

.pun .checklist legend span {
	width: auto !important;
	max-width: 25em !important;
}

/*****************************************************************
PROFILES (+ ADMIN MENU)
*****************************************************************/

/* Profile / Admin
----------------------------------------------------------------*/

.pun .blockmenu {
	width: 13em !important;
	float: left !important;
	padding-bottom: 12px !important;
}

.pun .block2col .blockform, .pun .block2col .block {
	margin-left: 15em !important;
}

.pun .blockmenu .block2 {
	padding-top: 19px !important;
}

.pun .blockmenu ul {
	border-top-style: dotted !important;
	border-top-width: 1px !important;
	padding: 0 !important;
}

.pun .blockmenu li {
	border-bottom-style: dotted !important;
	border-bottom-width: 1px !important;
	font-weight: bold !important;
	padding: 0 !important;
}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
	display: block !important;
	padding: 9px 6px 3px 6px !important;
	min-height: 1px !important;
	text-decoration: none !important;
}

* html .pun .blockmenu a:link,  * html .pun .blockmenu a:visited {
	height: 1% !important;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	text-decoration: none !important;
}

#viewprofile .box {
	border-style: solid !important;
	border-width: 1px !important;
	padding-bottom: 18px !important;
}

#viewprofile dt, #adstats dt {
	padding: 7px 0 !important;
	position: absolute !important;
	width: 13em !important;
	left: 0 !important;
}

#viewprofile dl {
	border-style: solid none none none !important;
	border-width: 1px !important;
	margin: 7px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	position: relative !important;
}

#adintro, #adstats, #adalerts {
	border-style: solid !important;
	border-width: 1px !important;
	padding: 18px !important;
}

#adintro li span {
	display: inline-block !important;
	padding-left: 16px !important;
	margin-left: 8px !important;
	line-height: normal !important;
	background: url(Air/img/bull.png) center left no-repeat !important;
}

#adstats .inbox, #adintro .inbox, #adalerts p {
	border-style: solid !important;
	border-width: 1px !important;
	padding: 18px !important;
}

#adstats dl {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	position: relative !important;
}

#viewprofile dd, #adstats dd {
	border-style: none none solid none !important;
	border-width: 1px !important;
	padding: 7px 0 7px 13em !important;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Basic defaults and Common Items
----------------------------------------------------------------*/

html, body, .pun {
	background: #f6f9fc !important;
	color: #4d4d4d !important;
}

.pun .punwrap {
	background: #fff !important;
	border-color: #cad7e1 !important;
	color: #566579 !important;
}

#brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols,
#punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink * {
	border-color: #b9c5ce !important;
}

.pun a, .pun a:link, .pun a:visited {
	color: #2365B0 !important;
}

.pun a:hover, .pun a:active, .pun a:focus {
	color: #b50000 !important;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-color: #22538a !important;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
	border-color: #b50000 !important;
}

/* Primary Navigation
----------------------------------------------------------------*/

#brdmenu {
	background: #fff !important;
}

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
	background: #fff !important;
	border-color: #fff !important;
	color: #4d4d4d !important;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
	border-color: #fff !important;
	color: #000 !important;
}

/* Main Tables
----------------------------------------------------------------*/

.pun .blocktable .box {
	background: #fcfdfe !important;
	border-color: #b9c5ce #d9e1e7 !important;
}

#punindex .blocktable h2, .pun #vf h2 {
	color: #357082 !important;
}

#adminconsole fieldset th, #adminconsole fieldset td {
	background: #f6f9fc !important;
	border-color: #dfe6ee !important;
}

.pun #users1 h2 {
	background: #fff !important;
}

.pun .blocktable td {
	border-color: #dfe6ee !important;
}

.pun .blocktable th {
	background: #ebf1f5 !important;
	border-color: #cad7e1 !important;
	color: #357082 !important;
}

.pun .blocktable td.tcl span.stickytext {
	color: #3399CC !important;
}

/* Main Posts
----------------------------------------------------------------*/

.pun .blockpost {
	background: #f6f9fc !important;
	border-color: #b9c5ce #d9e1e7 !important;
}

.pun .blockpost h2 {
	background: #ebf1f5 !important;
	border-color: #cad7e1 !important;
	color: #357082 !important;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	background: #fcfdfe !important;
	border-color: #dfe6ee !important;
}

.pun .blockpost .postfootright li {
	color: #fcfdfe !important;
}

.pun .postmsg, #punhelp code, #punhelp samp {
	color: #4d4d4d !important;
}

.pun .postsignature, .pun .postmsg .postedit {
	color: #566579 !important;
}

.pun .quotebox {
	background: #f8f9f0 !important;
	border-color: #7aadbd !important;
	color: #566579 !important;
}

.pun .quotebox cite {
	color: #357082 !important;
}

.pun .codebox, #punhelp .codebox code {
	background: #ebf1f5 !important;
	color: #4d4d4d !important;
}

.pun .postmsg hr {
	background: #b9c5ce !important;
}

.pun .postmsg ins, #punhelp samp ins {
	background-color: #ff0 !important;
}

/* Main Forms + Profile
----------------------------------------------------------------*/

.pun .blockform .box, #adstats, #adintro, #adalerts, #postpreview, #posterror {
	border-color: #b9c5ce #d9e1e7 !important;
	background: #ebf1f5 !important;
}

#punmisc #rules .box, #punhelp .box {
	border-color: #b9c5ce #d9e1e7 !important;
	background: #f6f9fc !important;
}

.pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2,
#pundelete .blockform h2 {
	background: #ebf1f5 !important;
	color: #357082 !important;
}

.pun .forminfo {
	background: #fff !important;
	border-color: #dfe6ee !important;
}

#puninstall form#install .forminfo {
	background: #44699c !important;
	color: #fff !important;
}

.pun #posterror .error-info, .pun #adalerts p {
	background: #ffffe1 !important;
	border-color: #dfe6ee !important;
}

#puninstall form#install .error-info {
	background: #ffffe1 !important;
	border-color: #dfe6ee !important;
	color: #4d4d4d !important;
}

.pun .infldset, #adintro .inbox, #adstats .inbox {
	background: #f6f9fc !important;
	border-color: #dfe6ee !important;
}

.pun label, .pun legend, #adminconsole fieldset th {
	color: #357082 !important;
}

.pun fieldset p {
	border-color: #b9c5ce !important;
}

.pun .blockmenu ul, .pun .blockmenu li {
	border-color: #b9c5ce !important;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	background: #ffffe6 !important;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
	color: #4d4d4d !important;
	background: #f6f9fc !important;
	}

.pun #viewprofile .box {
	border-color: #b9c5ce #d9e1e7 !important;
	background: #ebf1f5 !important;
}

.pun #viewprofile dt, #adstats dt {
	color: #357082 !important;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
	border-color: #dfe6ee !important;
}

#adminconsole fieldset td.nodefault {
	background: #d59b9b !important;
}

.pun .multiselect {
	color: #357082 !important;
}

.pun .checklist {
	background: white !important;
	border-color: #ccc !important;
}

/* Status Indicators
----------------------------------------------------------------*/

.pun .icon {
	border-color: #e8ecf1 #d4d9dd #dfe3e8 #e8ecf1 !important;
  color: #d4d4d4 !important;
}

.pun .iredirect .icon {
	border-color: #b9c5ce !important;
	border-width: 1px !important;
	padding: 7px !important;
}

.pun .inew .icon {
	border-color: #91b3d9 #87a8d1 #6c85bb #7292c3 !important;
  color: #b30000 !important;
}

.modlist {
  display:none !important;
}

div.forumdesc {
  margin: 2px 0 0 0 !important;
}

div#announce-block {
  background-color: rgba(224,255,186,.4) !important;
  padding: 0px 20px !important;
  margin: 5px 0px 10px 0px !important;
  border: 1px solid #00aa00 !important;
}

#announce {
  border: none !important;
}

@media all and (max-width:799px)
{
	.pun .blockmenu {
		width: 100% !important;
		float:none !important;
		display:block !important;
		padding-bottom: 0 !important;
	}

	.pun .block2col .blockform, .pun .block2col .block {
		margin-left: 0em !important;
	}

	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.pun .postlinksb .crumbs,
	.punwrap .byuser, .punwrap #brdmain .byuser,
	#poweredby, #feedlinks,
	#qjump,
	.postfootleft,
	img.logo { display:none !important; }
	.pun { max-width:none !important; padding:0 !important; }
	.pun .punwrap { padding:9px !important; }
	.pun .blockpost { background-color:#ebf1f5 !important;}
	.pun .blockpost .postleft { width:0 !important; padding:0 !important; margin-left:0px !important; float:0 !important; }
	.pun .blockpost .postleft dd, .postleft img  { display:none !important; }
	.pun .blockpost .postbody { border-left:none !important; float:right !important; margin-right:0px !important; }
	.pun .blockpost h2 .conr { display:none !important; }
	.pun .blockpost h2 { float:right !important; border-bottom:0 !important;}
	.pun .blockpost .postright { padding:9px !important; margin-right:0px !important; }
	.pun .blockpost .postmsg p:first-child { padding-top:0 !important; margin-top:0px !important;}
	.pun .blockpost .postbody { border-top: 1px solid #cad7e1 !important; }
	.pun .blockpost .codebox { margin:0 !important; }
	.pun .blockpost .quotebox { margin:5px !important; }
	.pun .blockpost .quotebox blockquote { margin-top:0.75em !important; }
	.pun .blockpost .postfoot { float:left !important; border:none !important; }
	.pun .blockpost .postfootright { padding:0 !important; margin: 0 9px 9px 0 !important;}
	.pun .blockpost .postfootright ul li span { padding:0 !important; background:none !important; }
	.pun .inform { padding:0 !important;}
	.pun #quickpost > h2 { display:none !important;}
	.pun .inform > fieldset > legend { display:none !important; }
	.pun #quickpost .txtarea { padding:5px !important; }
	.pun #quickpost .txtarea textarea { width:100% !important;border-radius:0px !important;}
	#ezbbctoolbar , .bblinks{ display:none  !important; }
	.pun .linkst .crumbs { font-size: inherit !important; }
	#brdmenu a:link { padding:0 !important; min-width:0 !important; }
	#brdmenu ul li { padding-right:5px !important;}
	#brdmenu ul li:last-child { border-right: none !important; }
	#brdwelcome > .conl { display:none !important; }
	#brdwelcome > .conr { float:left !important; }
	#brdwelcome li span { background:none !important; padding-left:0 !important; }
	#brdstats .box .inbox dl:not(:last-child) { display:none !important; }
	.pun .postlinksb .crumbs { padding-bottom:5px !important;}
}

@media only screen and (min-width: 900px) {
  /* Style adjustments for viewports 900px and over go here */
    .pun  {
        position: relative !important;
        width: unset !important;
    }
}
    
}

Open the file userContent.css and add a line at the beginning:

@import url(Hydrogen-Old.css);

Restart Firefox.

P.S.
I did a similar thing to be able to use my Hydrogen-night style.
When I'm not logged in, it looks like this:

Hydrogen-Old:                           Hydrogen-night:
blforum-old.png    blforum-dark.png

Last edited by marens (2024-04-09 02:04:14)


If people would know how little brain is ruling the world, they would die of fear.

Offline

#8 2024-04-08 03:15:24

or1o9
Member
Registered: 2017-11-15
Posts: 247

Re: The default forum style is now dark.

And it looks even better on the phone! Do check the forums on the phone occasionally and it looks really great there now. A major improvement in my opinion. smile

Offline

#9 2024-04-08 06:51:42

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 12,874
Website

Re: The default forum style is now dark.

^Thanks! The main motivation there was to improve usability on phones. "Crunchbang" was already fine (IMO) for larger displays.


...elevator in the Brain Hotel, broken down but just as well...
( a boring Japan blog (currently paused), now on Bluesky, there's also some GitStuff )

Introduction to the Bunsenlabs Boron Desktop

Offline

#10 2024-04-08 07:08:04

Döbbie03
Resident Metalhead
From: New Zealand
Registered: 2015-09-29
Posts: 3,934

Re: The default forum style is now dark.

marens wrote:
Dobbie03 wrote:

I still prefer the light one, but it's nice to know that there is an excellent dark alternative.

If you want, you can restore the old Hydrogen style (when you are not logged in).

Thanks but I am always logged in big_smile


"All we are is dust in the wind, dude"
                                       - Theodore "Ted" Logan
"Led Zeppelin didn't write tunes that everybody liked, they left that to the Bee Gees."
                                       - Wayne Campbell

Offline

#11 2024-04-08 12:26:59

grubernd
Member
From: Graz, AT
Registered: 2020-01-04
Posts: 48

Re: The default forum style is now dark.

Nice. Now I can see immediately if I'm logged in. smile

PS: The tendency towards dark themes is mostly because people neither set their screens nor their workspace lights for proper viewing. If either one is done well a dark theme will be hard to read and stressful after some time. The people that really need a dark theme because of overly sensitive eyes are few and far between.

Offline

#12 2024-04-09 04:56:17

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 12,874
Website

Re: The default forum style is now dark.

grubernd wrote:

The tendency towards dark themes is mostly because people neither set their screens nor their workspace lights for proper viewing. If either one is done well a dark theme will be hard to read and stressful after some time.

Just a minute - you're saying that if you set your screen and room lights correctly, it will make dark themes hard to read?

??


...elevator in the Brain Hotel, broken down but just as well...
( a boring Japan blog (currently paused), now on Bluesky, there's also some GitStuff )

Introduction to the Bunsenlabs Boron Desktop

Offline

#13 2024-04-09 06:54:19

unklar
Back to the roots 1.9
From: #! BL
Registered: 2015-10-31
Posts: 2,765

Re: The default forum style is now dark.

or1o9 wrote:

And it looks even better on the phone! Do check the forums on the phone occasionally and it looks really great there now. A major improvement in my opinion. smile

Full agreement.
However, I always open the first post, not the most recent one.
This can be frustrating with long threads over several pages.

Is it the same for you? Maybe @johnraff can do something about it.    wink

Online

#14 2024-04-09 08:31:55

grubernd
Member
From: Graz, AT
Registered: 2020-01-04
Posts: 48

Re: The default forum style is now dark.

johnraff wrote:

Just a minute [..]

Pretty much, yes.

Of course there are all kinds of rules and recommendations for workplace lighting and a lot of devices to do proper calibration for color and brightness*. In lack of those: a ~600 lumen ~4200K lamp above your desk, a piece of printed text in 10 to 12pt (laser printer preferred) on white paper and then black text on white on the screen should match the paper .. very very roughly.

If you do that and then switch to a black theme, the text and colors will be hard to read, especially if you spend more than a few minutes staring at them.

In general modern screens are _way_ too bright on their default settings. (Also too blue, but's that another topic.) The iiyama 24" I am looking at right now is at 5% brightness and nice to work on. Currently I spend around 10 hours a day in front of it, coding and writing my bachelor thesis. My eyes thank me.

*) I'm a photographer and image editor by my previous training and work, so getting colors to look right and good is part of my profession.

Offline

#15 2024-04-09 08:46:21

brontosaurusrex
Middle Office
Registered: 2015-09-29
Posts: 2,760

Re: The default forum style is now dark.

@grubernd, Very interesting. Can you elaborate on why 4200K? (That's neither day nor lamp temp afaik).

a piece of printed text in 10 to 12pt (laser printer preferred) on white paper and then black text on white on the screen should match the paper .. very very roughly.

Noted.

Online

#16 2024-04-09 10:00:23

grubernd
Member
From: Graz, AT
Registered: 2020-01-04
Posts: 48

Re: The default forum style is now dark.

brontosaurusrex wrote:

@grubernd, Very interesting. Can you elaborate on why 4200K? (That's neither day nor lamp temp afaik).

Well spotted. Classic "tungsten" lamps are being faded out. The modern LED equivalents are meant for living room or general lighting, personally I like them best for rather dim/indirect mood lights. Full daylight temperature and spectrum lamps are overkill unless you work with truly color sensitive stuff - but then you want a professional lamp which is not what we talk about here.

The ~4200K are a good compromise and are rather cheap despite the high quality these days - I like the ones from the swedish shop that doesn't sell you furniture but projects to assemble. But other manufacturers have equivalent offerings.

They are also nice everywhere where you want to _see_ something with colors. Kitchen, workbench - or the place someone puts on makeup.

Offline

#17 2024-04-10 00:18:44

marens
Member
From: World without M$
Registered: 2023-02-02
Posts: 1,008

Re: The default forum style is now dark.

grubernd wrote:

Nice. Now I can see immediately if I'm logged in. smile

PS: The tendency towards dark themes is mostly because people neither set their screens nor their workspace lights for proper viewing. If either one is done well a dark theme will be hard to read and stressful after some time. The people that really need a dark theme because of overly sensitive eyes are few and far between.

I do not think so.
Your opinion is too general and it is impossible to draw such a conclusion.

...

Dark mode or not, I need some extra eye protection, especially at night.
Not because I have a problem, I'm just trying to prevent it.

I've been using command-line tool redshift (not redshift-gtk with GUI) for years.
Here is what the author Jon Lund Steffensen says (from man redshift output):

DESCRIPTION
       redshift adjusts the color temperature of your screen according to your
       surroundings. This may help your eyes hurt less or reduce the risk  for
       delayed  sleep phase syndrome if you are working in front of the screen
       at night.

       The color temperature is set according to the position of  the  sun.  A
       different  color  temperature  is  set during night and daytime. During
       twilight and early morning, the color temperature transitions  smoothly
       from  night  to  daytime temperature to allow your eyes to slowly adapt
       over a period of about an hour. At night the color  temperature  should
       be set to match the lamps in your room. This is typically a low temper‐
       ature at around 3000K-4000K (default is 4500K).  During  the  day,  the
       color temperature should match the light from outside, typically around
       5500K-6500K (default is 6500K). The light has a higher  temperature  on
       an overcast day.
       
       ...
       
Default temperature values:
              Daytime: 6500K, night: 4500K
              
       ...              

I manually adjusted the redshift config file for my location (latitude, longitude) and eyes (temp-day=5840, temp-night=4480).
Set it once (testing may take several days/nights), add to autostart applications and forget it.

Redshift tracks the sunrise/sunset for your location, and the day/night transition takes about an hour (half an hour before and half an hour after).
Everything happens automatically and imperceptibly for the eyes.

P.S.
When you install a new distro >> Copy the redshift.conf file from the old one and Paste into the ~/.config folder.
If necessary: sudo apt install redshift and add to autostart applications.


If people would know how little brain is ruling the world, they would die of fear.

Offline

#18 2024-04-10 02:27:50

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 12,874
Website

Re: The default forum style is now dark.

unklar wrote:

I always open the first post, not the most recent one.
This can be frustrating with long threads over several pages.

Is this because the [ New posts ] text is too small, and you hit the thread title text by mistake?
I don't find that problem myself. Here's a screenshot from my phone:
u8dtMDgm.jpeg
But if that is the case, it might be fixable.


...elevator in the Brain Hotel, broken down but just as well...
( a boring Japan blog (currently paused), now on Bluesky, there's also some GitStuff )

Introduction to the Bunsenlabs Boron Desktop

Offline

#19 2024-04-10 06:28:20

Döbbie03
Resident Metalhead
From: New Zealand
Registered: 2015-09-29
Posts: 3,934

Re: The default forum style is now dark.

brontosaurusrex wrote:

@grubernd, Very interesting. Can you elaborate on why 4200K? (That's neither day nor lamp temp afaik).

a piece of printed text in 10 to 12pt (laser printer preferred) on white paper and then black text on white on the screen should match the paper .. very very roughly.

Noted.

Just wonder if we are talking CRI here (Colour Rendering Index) rather than the colour temp? I

t has been a few years since I have been involved in lighting and I never really looked into CRI and if it effects monitors and I might have the wrong end of the stick here.


"All we are is dust in the wind, dude"
                                       - Theodore "Ted" Logan
"Led Zeppelin didn't write tunes that everybody liked, they left that to the Bee Gees."
                                       - Wayne Campbell

Offline

#20 2024-04-10 07:55:52

unklar
Back to the roots 1.9
From: #! BL
Registered: 2015-10-31
Posts: 2,765

Re: The default forum style is now dark.

johnraff wrote:
unklar wrote:

I always open the first post, not the most recent one.
This can be frustrating with long threads over several pages.

Is this because the [ New posts ] text is too small, and you hit the thread title text by mistake?
I don't find that problem myself. Here's a screenshot from my phone:
https://i.imgur.com/u8dtMDgm.jpeg
But if that is the case, it might be fixable.

Thank you johnraff.
I am missing the NEW in both the logged out and logged in modes.
FOSS Browser and Privacy Browser are active.

I will try a picture.    wink

Edit:
This is Privacy Browser (same in FOSS Browser)
460254346_privacy_browser.jpg

Last edited by unklar (2024-04-10 09:03:36)

Online

Board footer

Powered by FluxBB