sqlite-forum.css

/* uglyduck.ca */
*{box-sizing:border-box;}body{font:16px/1.5 "Georgia",serif;margin:0 auto;max-width:66ch;padding:1rem;}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;margin:2.5rem 0 1rem;}ul li, ol li{margin-top:0.5rem;}a,a:visited{color:black;}a:hover{color:dodgerblue;}img{height:auto;max-width:100%;}pre{border: 1px solid lightgrey;overflow:auto;}code{color:orangered;display:inline-block;}pre code{padding:1rem;}blockquote{border-left:5px solid lightgrey;font-size:120%;font-style:italic;margin:2rem 0;padding:1rem;}table{border-collapse:collapse;margin:2rem 0;text-align:left;width:100%;}tr{border-bottom:1px solid lightgrey;}th,td{padding:0.5rem;}hr{background:lightgrey;border:0;height:1px;margin:2rem 0;}

/* mods to uglyduck */
body {font: 21px}
blockquote {font-size: 100%; padding: 0; padding-left: 1rem;}
h1.title {margin-bottom: -3px; font-family: serif; font-size: 180%;}
a { color: blue !important; }

/********* barebones for buttons and form fields *********/
html {
  
  /* default theme: light background, dark text, blue accent */

  /* white */
  --theme-hue: 0;	
  
  /* blue */
	--accent-hue: 194;

  /* #555555 button color; button:hover border */
  --text-color-softer: hsl(var(--theme-hue), 0%, 33%);

  /* #22222 text color; button:hover:focus color */
  --text-color-normal: hsl(var(--theme-hue), 0%, 13%);

  /* #bbbbbb button border */
  --border-color: hsl(var(--theme-hue), 0%, 73%);	

  /* transparent body background; textarea,select background */
  --background-color: white;

  /* #d1d1d1 textarea,select,code,td,hr border	 */
  --border-color-softer: hsl(var(--theme-hue), 0%, 82%);

  /* blue */
  --accent-hue: 194;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: var(--text-color-softer);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  box-sizing: border-box; }

input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: var(--text-color-normal);
  border-color: var(--text-color-softer);
  outline: 0; }



/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: var(--background-color);
  border: 1px solid var(--border-color-softer);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--accent-color);
  outline: 0; }
/**********************************/

/* tweaks to sqlite forum classes ***************/
.title {
    text-align: center;
    float: unset;
    line-height: 1rem;
}
.title h1 {
    display:block;
    color: darkblue;
}
.title h1:after {
    content: " ";
    color: #777;
    font-weight: normal;
}
.status {
    font-family: sans-serif;
    position: absolute;
    top: 0;
    right: 25px;
}
.mainmenu {
    border: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-radius: 0;
    background: unset !important;
}
.content p {
  line-height: 2rem;
}
.forumHierRoot {
  padding: 2rem;
}
div.forumHier, div.forumTime {
  border: none;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  border-radius: 0 10px;
  padding: 10px;
  background-color: #f5f5f5;
}
pre {
  padding: 1rem;
  background-color: lightgrey;
  font-family: menlo, consolas, monospace;
  font-size: 12px;
}

 /* Spacing for mobile */
@media screen and (min-width: 600px) {
}

@media screen and (min-width: 900px) {
}

/* Spacing for desktop */
@media screen and (min-width: 1024px) {
  body { width: 75%; }
}

/* Special declarations for narrow desktop or wide mobile */
@media screen and (min-width: 1200px) {
  body { width: 50%; }
}

Firefox instructions:

1. Install Man in the Middle add-on https://github.com/dangkyokhoang/Man-in-the-Middle

2. Add a content script (the last item in MITM settings)

• give it whatever name you want. I called is sqliteforum
• in the Code (Required) section add the css at https://gist.github.com/punkish/309666d1a001061a521048869edc73cd
• in the Script type section choose css
• in the URL filters (Required) section, add the following rules

/www\.sqlite\.org\/forum\/forummain.*/
/www\.sqlite\.org\/forum\/forumpost.*/

• enable the rule

That's it.

Safari instructions:

1. Buy Cascadea and install it
2. Create a rule
3. Add the css

That's it.