Forum Darkkmode

marens · 2024-03-28 00:29:33

johnraff wrote:

We're talking about making life easier for users? I think the best thing we could do there is cut down the number of themes to about half.

Do we know the answer to these questions:
What will happen if someone uses a style that will be deleted?
Will he be able to choose a new style after logging in?
Or he will get the default style and a new opportunity to choose what he wants?

I'm just thinking about what could happen!?

johnraff · 2024-03-28 04:54:47

marens wrote:

johnraff wrote:
We're talking about making life easier for users? I think the best thing we could do there is cut down the number of themes to about half.
Do we know the answer to these questions:
1) What will happen if someone uses a style that will be deleted?
2) Will he be able to choose a new style after logging in?
3) Or he will get the default style and a new opportunity to choose what he wants?
I'm just thinking about what could happen!?

(added numbers)

1) They'll get a wild unstyled page - not too cool.
It will probably still be possible to find Profile > Display though.

2) Yes, sure. As long as the unstyled page doesn't make it too difficult to find.

3) I don't think the default style will be set automatically.

Anyway, two things we can do:

1) I'll set my theme to eg Air, rename Air.css to something else on the server, log out and back in and see what happens...

2) Anyway before deleting anything, we should ask at least the users who visit the forum what themes they use. Also make a public announcement.

But I still have some changes I want to make to Hydrogen-Dark (simplified font settings). Deletions can come later.

johnraff · 2024-03-28 05:03:45

johnraff wrote:

...maybe it would be better to set the same (font) list everywhere in the file, and not try to use different fonts for different places.

johnraff wrote:

New discovery for me: css Custom Properties. These behave like variables that you can set once at the top of the file and they'll be reused right through. ...Should also be good for setting fonts.

Of course the idea of using a variable to set identical font lists in various parts of the page was nonsense.
If all elements are going to use the same font (I think it looks fine that way, changing only size, weight etc.) then it's only necessary to set the font-family list once at the highest point in the tree, and everywhere else will inherit it.

I'll clean up Hydrogen-Dark.css a bit and make sure it works.

johnraff · 2024-03-28 07:39:56

Latest Hydrogen-Dark:
(updated 2024/03/29)

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

/* Limited Reset
----------------------------------------------------------------*/
html {
    --bg-bull: url(SimpleXBlue/img/bull.png);
    --bg-email: url(SimpleXBlue/img/email.png);
    --bg-feed: url(SimpleXBlue/img/feed.png);
    --bg-ext: url(SimpleXBlue/img/ext.png);
    --bg-exclaim: url(SimpleXBlue/img/exclaim.png);
    --bg-asterisk: url(SimpleXBlue/img/asterisk.png);
    --bg-help: url(SimpleXBlue/img/help.png);
    --fonts-sans: 'Noto Sans', 'Liberation Sans', 'PT Sans', Freesans, 'Open Sans', Geneva, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --fonts-serif: 'Noto serif', 'Liberation Serif', FreeSerif, 'Times New Roman', serif;
    --fonts-mono: 'Noto Mono', Hack, Inconsolata,'Liberation Mono', monospace;
}

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;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}

body {
    font-family: sans-serif;
    font-family: var(--fonts-sans, sans-serif);
}

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

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

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

.pun {
    font-size: 90%;
    line-height: 1.462em;
}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun legend {
    font-size: 1em;
    font-family: inherit;
}

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

.pun pre, .pun code {
    font-family: monospace;
    font-family: var(--fonts-mono, monospace);
    font-size: 1em;
}

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

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

.pun h1 {
    font-size: 2.154em;
    line-height: 1em;
    padding: 7px 0;
}

.pun h2, .pun .hd h2 {
    font-size: 1.462em;
    line-height: 1em;
    padding: 7px 0;
}

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

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

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

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

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

.pun em {
    font-style: italic;
}

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

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

.pun .actions span {
    padding-left: 16px;
    padding-right: 8px;
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
}

/* 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;
    overflow: hidden;
    position: absolute;
    text-indent: -9999em;
    width: 0;
}

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

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

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

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

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

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

.clearl {
    clear: left;
}


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

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

.pun {
    max-width: 1070px;
    margin: 0 auto;
}

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

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

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


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

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

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

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

#brdstats {
    border-style: solid none none none;
    border-width: 2px 0 0 0;
  /* border-color: #cad7e1; */
    margin-top: 24px;
    padding-top: 12px;
}

#quickpost {
    border-style: solid none none none;
    border-width: 2px 0 0 0;
    margin-top: 12px;
    padding-top: 12px;
}

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

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

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

#brdtitle h1 {
  font-weight: 400;
}

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

#brddesc p {
    padding: 0;
}

#brdmenu {
    background: #191C1E;
    -webkit-box-shadow: 0px 2px 4px #151617;
    -moz-box-shadow: 0px 2px 4px #151617;
    box-shadow: 0px 2px 4px #151617;
}

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

#brdmenu li {
 /* display: inline-block;*/
 /* color: #000; */
}

#brdmenu a:link, #brdmenu a:visited {
    border-top-style: solid;
    border-width: 1px;
    display: block;
    min-width: 60px;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    text-align: center;
    font-weight: 400;
}

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

img.logo {
  width:150px;
  padding:0;
  margin: 0 0 5px 0;
}

#brdtitle {
  text-align:center;
}

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

#brdwelcome {
    padding: 20px 0;
}

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

#brdwelcome .conl {
  float: left;
}

#brdwelcome .conr {
  float: right;
}

#brdwelcome li span {

    background: var(--bg-bull) center left no-repeat;

    padding-left: 18px;
    margin-right: 3px;
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
}

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

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

#brdstats .conl {
    float: left;
}

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

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

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

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

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

.pun #modcontrols dd {
    display: inline;
}

.pun #brdfooter #modcontrols dd span {
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
    padding-left: 12px;
    margin-right: 18px;
    white-space: nowrap;
}

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

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

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

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

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

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

.pun #brdfooter #searchlinks dd span {
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
    padding-left: 18px;
    white-space: nowrap;
}

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

.pun #brdfooter #feedlinks span {
    background: var(--bg-feed) center left no-repeat;
    display: inline-block;
    padding-left: 18px;
    white-space: nowrap;
}

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

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

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

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

.pun .linkst .crumbs {
    font-size: 1.462em;
    line-height: 1.211em;
    padding: 6px 0;
/*
    border-top: 1px solid rgb(202, 215, 225);
    border-bottom: 1px solid rgb(202, 215, 225);
*/
}

.pun .linksb .crumbs, .pun .postlinksb .crumbs {
    font-size: 1.154em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#punindex .subscribelink {
    top: 0px;
}

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

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

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

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
    font-size: 1em;
    line-height: 1.462em;
    font-weight: bold;
    margin: 1px 1px 0 1px;
    padding-left: 8px;
    position: absolute;
    left: 0;
    white-space: nowrap;
    z-index: 100;
}

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

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

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

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

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

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

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

.pun .blocktable p {
    padding: 0;
}

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

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

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

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

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

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

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

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

#users1 .tcr {
    width: 25%;
}

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

#debug {
    margin-top: 12px;
}

#debug .tcl {
    width: 10%;
}

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

#debug .tcr {
    width: 90%;
    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;
}

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

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

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

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

.pun .icon {
    float: left;
    border-style: solid;
    border-width: 8px;
    height: 0;
    overflow: hidden;
    width: 0;
}

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

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

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

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

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

.pun .blockpost h2 {
    font-size: 1em;
    line-height: 1.462em;
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 1.462em;
    padding: 0.538em 8px 0.538em 8px;
    font-weight: normal;
    text-align: right;
}

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

#punsearch .blockpost h2 span span {
    white-space: nowrap;
    display: inline-block;
    font-size: 1.077em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pun .blockpost .postfootright li span {
    display: inline-block;
    padding-left: 16px;
    margin-left: 8px;
    line-height: normal;
    background: var(--bg-bull) center left no-repeat;
    font-weight: 300;
}

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

.pun .blockpost .usercontacts .email {
    background: var(--bg-email) left 65% no-repeat;
    padding-right: 10px;
    padding-left: 18px;
    display: inline-block;
    line-height: normal;
    vertical-align: top;
}

.pun .blockpost .usercontacts .website {
    background: var(--bg-ext) left 65% no-repeat;
    padding-right: 10px;
    padding-left: 18px;
    display: inline-block;
    line-height: normal;
    vertical-align: top;
}

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

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

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

/*.pun .postmsg p, .pun .postmsg li, #punhelp p samp {
    font-family: var(--fonts-sans, sans-serif);
}*/

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

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

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

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

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

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

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

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

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

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

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

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

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

.pun .codebox {
    border-style: dashed;
    border-width: 1px;
  /* border-color: #b9c5ce; */
    margin: 0.75em 1em;
    padding: 0;
}

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

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

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

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

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

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

.pun .codebox pre code {
    padding: 0.75em;
    white-space: pre;
}

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

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

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

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

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

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

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

#punedit .blockform h2, #punpost .blockform h2, #postpreview h2, #posterror h2,
.pun #quickpost h2, .pun #reportform h2, #pundelete .blockform h2 {
    font-size: 1em;
    line-height: 1.462em;
    font-weight: bold;
    white-space: nowrap;
    padding: 10px 19px 4px 37px;
    border: 0;
}

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

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

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

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

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

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

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

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

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

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

.pun .error-list li {
    padding-left: 24px;
    background: var(--bg-exclaim) center left no-repeat;
}

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

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

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

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

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

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

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

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

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

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

.pun .required strong {
    background: var(--bg-asterisk) center right no-repeat;
    font-weight: normal;
    padding-right: 14px;
    white-space: pre;
    display: inline-block;
    line-height: normal;
}

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

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

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

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

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

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

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

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

.pun input[type=text], .pun select, .pun textarea {
    font-size: 1em;
    font-family: inherit;
}

.pun textarea, input[type="text"] {
  background-color: #272822;
  color: #F8F8F2;
  border: 1px solid #76715e;
}

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

.pun textarea {
    resize: vertical;
}

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

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

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

.pun .blockform .bblinks li span {
    background: var(--bg-help) center left no-repeat;
    padding-right: 10px;
    padding-left: 20px;
    display: inline-block;
}

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

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

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

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

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

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

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

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


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

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

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

.pun .checklist legend {
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#adintro li span {
    display: inline-block;
    padding-left: 16px;
    margin-left: 8px;
    line-height: normal;
    background: var(--bg-bull) center left no-repeat;
}

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

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

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

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

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

html, body, .pun {
    background: #2E3436;
    color: #bfbfbf;
}

.pun .punwrap {
    background: #2E3436;
    border-color: #3B4245;
    color: #bfbfbf;
}

#announce, #brdmain, #quickpost, #brdstats, #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: #3B4245;
}

.pun a, .pun a:link, .pun a:visited {
    color: #FFF;
}

.pun a:hover, .pun a:active, .pun a:focus {
    color: #FFF;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
    border-color: #3B4245;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
    border-color: #3B4245;
}

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

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
    background: #191C1E;
    border-color: #2E3436;
    color: #bfbfbf;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
    background: #000;
    border-color: #2E3436;
    color: #fff;
}

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

.pun .blocktable .box {
    background: #2E3436;
    border-color: #3B4245 #3B4245;
}

#punindex .blocktable h2, .pun #vf h2 {
    color: #bfbfbf;
}

#adminconsole fieldset th, #adminconsole fieldset td {
    background: #2E3436;
    border-color: #3B4245;
}

.pun #users1 h2 {
    background: #2E3436;
}

.pun .blocktable td {
    border-color: #3B4245;
}

.pun .blocktable th {
    background: #292F30;
    border-color: #3B4245;
    color: #bfbfbf;
}

.pun .blocktable td.tcl span.stickytext {
    color: #bfbfbf;
}

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

.pun .blockpost {
    background: #32383B;
    border-color: #3B4245 #3B4245;
}

.pun .blockpost h2 {
    background: #292F30;
    border-color: #3B4245;
    color: #bfbfbf;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
    background: #2E3436;
    border-color: #3B4245;
}

.pun .blockpost .postfootright li {
    color: #bfbfbf;
}

.pun .postmsg, #punhelp code, #punhelp samp {
    color: #bfbfbf;
}

.pun .postsignature, .pun .postmsg .postedit {
    color: #bfbfbf;
}

.pun .quotebox {
    background: #32383B;
    border-color: #3B4245;
    color: #bfbfbf;
    border-left: 2px solid #bfbfbf;
}

.pun .quotebox cite {
    color: #bfbfbf;
}

.pun .codebox, #punhelp .codebox code {
    background: #32383B;
    color: #DBDBDB;
    border-color: #bfbfbf;
}

.pun .postmsg hr {
    background: #3B4245;
}

.pun .postmsg ins, #punhelp samp ins {
    background-color: #bfbfbf;
    color:#2E3436;
}

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

.pun .blockform .box, #adstats, #adintro, #adalerts, #postpreview, #posterror {
    border-color: #3B4245 #3B4245;
    background: #292F30;
}

#punmisc #rules .box, #punhelp .box {
    border-color: #3B4245 #3B4245;
    background: #2E3436;
}

.pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2,
#pundelete .blockform h2 {
    background: #292F30;
    color: #bfbfbf;
}

.pun .forminfo {
    background: #292F30;
    border-color: #292F30;
}

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

.pun #posterror .error-info, .pun #adalerts p {
    background: #2E3436;
    border-color: #3B4245;
}

#puninstall form#install .error-info {
    background: #2E3436;
    border-color: #3B4245;
    color: #333;
}

.pun .infldset, #adintro .inbox, #adstats .inbox {
    background: #2E3436;
    border-color: #3B4245;
}

.pun label, .pun legend, #adminconsole fieldset th {
    color: #bfbfbf;
}

.pun fieldset p {
    border-color: #3B4245;
}

.pun .blockmenu ul, .pun .blockmenu li {
    border-color: #3B4245;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
    background: #292F30;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
    color: #fff;
    background: #292F30;
    }

.pun #viewprofile .box {
    border-color: #3B4245 #3B4245;
    background: #292F30;
}

.pun #viewprofile dt, #adstats dt {
    color: #bfbfbf;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
    border-color: #3B4245;
}

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

.pun .multiselect {
    color: #bfbfbf;
}

.pun .checklist {
    background: #292F30;
    border-color: #3B4245;
}

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

.pun .icon {
    border-color: #3B4245 #3B4245 #3B4245 #3B4245;
}

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

.pun .inew .icon {
    border-color: #bfbfbf #bfbfbf #bfbfbf #bfbfbf;
}

.modlist {
  display:none;
}

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

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

#announce {
  border: none;
}

::selection {
    background:#191C1E;
    color:#bfbfbf;
}
::-moz-selection {
    background:#191C1E;
    color:#bfbfbf;
}


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

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

    .pun .subscribelink {
        position: static;
        padding: 0;
    }

    .pun .linksb .crumbs, .pun .postlinksb .crumbs {
        font-size: 0.9em;
    }

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

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
    .pun {
        position:relative;
        width:470px;
    }
    img.logo {
        width:200px;
        padding:0;
        margin:10px 0 10px 0;
    }

    .tcr{display: table-cell;}
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    .pun  {
        position:relative;
        width:760px;
    }
    img.logo {
        width:300px;
        padding:0;
        margin:20px 0 10px 0;
    }
    #brddesc p {
        padding: 0;
    }

    #brdmenu ul {
        padding: 0;display:block;
    }

    #brdmenu li {
        float: left;
        display: inline-block;
    }

    #brdmenu a:link, #brdmenu a:visited {
        border-top: 0;
        border-right-style: solid;
        border-width: 1px;
        display: block;
        min-width: 60px;
        padding: 12px 16px 7px 8px;
        white-space: nowrap;
        text-align: left;
        letter-spacing: 0;
        text-transform: none;
    }

    #brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
        text-decoration: none;
    }
    #brdmenu {
        background: #191C1E;
        -webkit-box-shadow: 0px 2px 4px #151617;
        -moz-box-shadow: 0px 2px 4px #151617;
        box-shadow: 0px 2px 4px #151617;
    }

    #brdmenu a, #brdmenu a:link, #brdmenu a:visited {
        background: #191C1E;
        border-color: #2E3436;
        color: #bfbfbf;
    }

    #brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
        background: #000;
        border-color: #2E3436;
        color: #fff;
    }

    #brdwelcome .conr {float:right;}
    .tc2,.tc3 {display: table-cell;}
    .pun .blocktable .tcr {
        width: 20%;
    }
    /*p.modlist {display:inline;}*/
    .pun .blockpost .postright {padding:4px 230px 7px 18px;}
    .pun .blockpost .postleft,
    .pun .blockpost .postfootleft {width:194px;margin-left:-218px;}
    .pun .blockpost .postbody, .pun .blockpost .postfoot {margin-right:-218px;}
    .pun .blockpost .postfootright {padding:7px 270px 7px 18px;}
    .pun .blockpost .postleft dd {display:block;}
    .pun .blockpost .postleft dd.postavatar {display:block;}

    .pun .blockpost h2 {
        text-align: left;
    }

    .pun .blockpost h2 .conr {
        display:block;
        float: right;
        text-align: right;
    }

    .pun .blockpost h2 span {
        margin-left: 236px;
    }

    .pun .crumbs li {
        white-space: nowrap;
        font-size: 90%;
    }

    .pun .foot {
        margin-top:20px;
        margin-bottom: 0px;
    }
    .pun .foot.additional{
        margin-top:0px;
        margin-bottom: 14px;
        border-top: 1px solid #3B4245;
    }

}

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

}

I was quite surprised to see how different the forum looked with Chromium - not just Hydrogen-Dark but all themes look heavier and thicker. What's more, the default un-logged-in Hydrogen is converted to a dark theme, I guess because I set that in my system somewhere. Auto-dark is cool, but I thought the whole thing looks more elegant in Firefox.

Last edited by johnraff (2024-03-29 06:02:47)

johnraff · 2024-03-28 07:59:07

There's a copy of the server style/ directory on GitHub here:
https://github.com/johnraff/fluxbb-snip … ster/style

The latest changes are there now, but I have to maintain this by hand so it might get out of sync sometimes.

Jimbo_G · 2024-03-28 08:04:35

johnraff wrote:

Jimbo_G wrote:
In Hydrogen-Dark in the Profile menu, the heading "Profile menu" and the username are in a serif font, it looks a bit weird...?
I've tried to rationalize the fonts a bit - could you check if that serif font has gone now?

Yes, on my machine (using Firefox) the serif font has gone, a definite improvement

johnraff · 2024-03-29 05:24:17

^Thanks!
Like so many things, there's a lot more to fonts than appears on the surface...

johnraff · 2024-03-29 06:09:12

johnraff wrote:

marens wrote:
Do we know the answer to these questions:
1) What will happen if someone uses a style that will be deleted?
2) Will he be able to choose a new style after logging in?
3) Or he will get the default style and a new opportunity to choose what he wants?
1) They'll get a wild unstyled page - not too cool.
It will probably still be possible to find Profile > Display though.

Yes, even without styles the forum is still usable.

I'll set my theme to eg Air, rename Air.css to something else on the server, log out and back in and see what happens...

This isn't necessary. On Firefox, hit F12 for the Inspector, find the Style Editor tab to see the whole css file being used, Ctrl+A to select all, Delete... and the styling is all gone. Reload the page to get it back.

That Inspector is incredibly useful. Right-click "inspect" on any element of a page to show what css is being used with it. Then you can edit the css...

https://forums.bunsenlabs.org/viewtopic … 72#p133172

marens · 2024-03-30 00:00:21

johnraff wrote:

This isn't necessary. On Firefox, hit F12 for the Inspector ...

Thanks, I didn't know that shortcut or I forgot.

I always use Ctrl+Shift+I.
I'm probably used to it with GTK Inspector.

johnraff · 2024-04-04 08:20:10

Anyway, the original topic was how to offer un-logged-in visitors a dark theme by default. We had the idea of Crunchbang which a lot of people seemed to like, except that it had layout problems with small screens (cellphones).

Thanks to Bronto and Marens we now have several options, but I'd like to not-so-humbly suggest we make Hydrogen-Dark the new default instead of the current Hydrogen. It looks pretty much identical to Crunchbang, but works on cellphones, I think. Of course we should also keep Crunchrex, Hydrogen-invert and Hydrogen-night available too.

No problem with that?

Jimbo_G · 2024-04-04 09:13:29

^ Hydrogen-dark looks great to me, I think it's a good default.

I know website changes are not the priority right now, but I would just point out (for new un-logged visitors) that switching from the BL homepage to the forums is a bit jarring. The page header changes from #272822 to a lighter #2E3436, the logo turns to grayscale (which I think is fine) except that the font rendering looks different and the flame is above the "L" rather than centered above the "E"...

johnraff · 2024-04-04 09:38:36

We have switched to a newer logo for the forums, yes. The flame over the l is meant to suggest a candle.

Agreed, the website styling is pretty different. Some day we could consider redoing the whole css file to move closer to the forum's default theme, but the original web designer did a nice job and I feel reluctant to mess with his work. I guess that top block with the logo and site menu could be restyled to match the forum...

hhh · 2024-04-04 15:52:24

johnraff wrote:

We have switched to a newer logo for the forums, yes. The flame over the l is meant to suggest a candle.

Specifically a Bunsen burner, which was the inspiration for ututo's flame logo. The BunsenLabs name is a reference to Dr. Bunsen Honeydew's laboratory (where mayhem ensued, resulting in destruction, major injury or death) and is from CrunchBang developer @corenominal's references to The Muppet Show. Statler and Waldorf were code-names for two #! releases, they're the grumpy old men in the balconey on the show.

https://www.youtube.com/watch?v=FnblmZdTbYs

Sorry for the Off Topic, but it's fun to reference our roots for those who weren't around then.

altman · 2024-04-04 19:19:06

hhh wrote:

johnraff wrote:
We have switched to a newer logo for the forums, yes. The flame over the l is meant to suggest a candle.
Specifically a Bunsen burner, which was the inspiration for ututo's flame logo. The BunsenLabs name is a reference to Dr. Bunsen Honeydew's laboratory (where mayhem ensued, resulting in destruction, major injury or death) and is from CrunchBang developer @corenominal's references to The Muppet Show. Statler and Waldorf were code-names for two #! releases, they're the grumpy old men in the balconey on the show.
https://www.youtube.com/watch?v=FnblmZdTbYs
Sorry for the Off Topic, but it's fun to reference our roots for those who weren't around then.

Oh, thx @hhh, I always wondered where BunsenLabs came about.

marens · 2024-04-05 00:18:47

johnraff wrote:

Anyway, the original topic was how to offer un-logged-in visitors a dark theme by default. We had the idea of Crunchbang which a lot of people seemed to like, except that it had layout problems with small screens (cellphones).
Thanks to Bronto and Marens we now have several options, but I'd like to not-so-humbly suggest we make Hydrogen-Dark the new default instead of the current Hydrogen. It looks pretty much identical to Crunchbang, but works on cellphones, I think. Of course we should also keep Crunchrex, Hydrogen-invert and Hydrogen-night available too.
No problem with that?

You have my vote.

It may be a little unusual for those who are used to the Hydrogen style (and love it), but they will adapt quickly.

Hydrogen was my favorite theme for this forum, but while testing Hydrogen-night (Hydrogen-invert), I realized that my eyes prefer the dark mode.

You @johnraff spend a lot of time pleasing others and it's ok to do something for yourself.

jonhnraff wrote:

The only style I can stand is "Crunchbang".

I hope everyone has a similar (same) opinion as me, especially since Hydrogen-Dark looks good.

Last edited by marens (2024-04-05 00:34:54)

johnraff · 2024-04-07 01:08:39

OK the default theme - for people who are not logged in, and users who have not selected another theme - is now Hydrogen-Dark.

hhh · 2024-04-07 01:48:46

^ Brilliant! Very original #! forums-ish.

Döbbie03 · 2024-04-07 01:50:17

Brings back some #! memories for sure. Good work.

marens · 2024-04-07 01:55:03

Yes indeed.
It looks very nice.

Nili · 2024-04-07 05:59:59

Once i login, automatically takes me to the DarkGrey styles. For me, this is the most suitable and contemporary.

Crunchbang style is it fine, better than White.

#61 2024-03-28 00:29:33

Re: Forum Darkkmode

#62 2024-03-28 04:54:47

Re: Forum Darkkmode

#63 2024-03-28 05:03:45

Re: Forum Darkkmode

#64 2024-03-28 07:39:56

Re: Forum Darkkmode

#65 2024-03-28 07:59:07

Re: Forum Darkkmode

#66 2024-03-28 08:04:35

Re: Forum Darkkmode

#67 2024-03-29 05:24:17

Re: Forum Darkkmode

#68 2024-03-29 06:09:12

Re: Forum Darkkmode

#69 2024-03-30 00:00:21

Re: Forum Darkkmode

#70 2024-04-04 08:20:10

Re: Forum Darkkmode

#71 2024-04-04 09:13:29

Re: Forum Darkkmode

#72 2024-04-04 09:38:36

Re: Forum Darkkmode

#73 2024-04-04 15:52:24

Re: Forum Darkkmode

#74 2024-04-04 19:19:06

Re: Forum Darkkmode

#75 2024-04-05 00:18:47

Re: Forum Darkkmode

#76 2024-04-07 01:08:39

Re: Forum Darkkmode

#77 2024-04-07 01:48:46

Re: Forum Darkkmode

#78 2024-04-07 01:50:17

Re: Forum Darkkmode

#79 2024-04-07 01:55:03

Re: Forum Darkkmode

#80 2024-04-07 05:59:59

Re: Forum Darkkmode

Board footer