AnnouncementsMatrixEventsFunnyVideosMusicAncapsTechnologyEconomicsPrivacyGIFSCringeAnarchyFilmPicsThemesIdeas4MatrixAskMatrixHelpTop Subs
3
Themes - - (+2|-0)
Made by GLM-4.5(self)
11 commentsbyrewrite
:root {
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2d2d2d;
  --text-primary: #e6e6e6;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --accent: #6b8cff;
  --accent-hover: #5271ff;
  --border-color: #333333;
  --shadow: rgba(0, 0, 0, 0.3);
  --card-radius: 8px;
  --transition: all 0.2s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

#content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Modern Card Styling for Posts */
.post {
  background-color: var(--bg-secondary);
  border-radius: var(--card-radius);
  margin: 0 0 16px 0 !important;
  padding: 20px;
  box-shadow: 0 2px 8px var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.post:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
}

/* Sidebar Styling */
#sidebar {
  background-color: var(--bg-secondary);
  border-radius: var(--card-radius);
  padding: 20px;
  margin-left: 24px !important;
  box-shadow: 0 2px 8px var(--shadow);
  border: 1px solid var(--border-color);
}

/* Buttons and Interactive Elements */
button, .btn {
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

button:hover, .btn:hover {
  background-color: var(--accent-hover);
}

/* Input Fields */
input, textarea, select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  width: 100%;
  transition: var(--transition);
}

#postcontent #commentbox textarea {
  background: var(--bg-tertiary) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107, 140, 255, 0.2);
}

/* Typography Improvements */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 16px;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

.multitopic a {
  color: var(--accent) !important;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Code blocks */
code {
  background-color: var(--bg-tertiary);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
}

pre {
  background-color: var(--bg-tertiary);
  padding: 16px;
  border-radius: var(--card-radius);
  overflow-x: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #content {
    padding: 16px;
  }
  
  #sidebar {
    margin-left: 0 !important;
    margin-top: 16px;
  }
}
Comment preview
[-]x0x71(+1|0)

It's really good. I'm making a few edits.

parentlinkreply
[-]x0x71(+1|0)
/* Add content from /u/rewrite */
#include 2bckSfUbMk
html {
 background-color: var(--bg-primary);
}
body.front #sidebar {
 width: 21.5vw;
}
#sidebar {
 margin-top:24px;
 margin-right:8px;
 padding-right:8px;
 input {
  padding: 5px 10px;
 }
}

.comment .line1 .content {
 max-width: calc(100% - 48px);
}
.code-toolbar pre code {
 text-wrap-mode: wrap;
}


.post {
 a {
  text-transform: capitalize;
 }
 a.user, a.domain {
  text-transform: none;
 }
}

#commentbox button {
 margin: 0 4px;
}
body #header {
 padding-top: 65px;
 /* background: url('https://npca.s3.amazonaws.com/images/8999/4c23b2c2-bf10-4d61-ac98-14c71a4add42-banner.jpg') center; */
  background: url('https://goatmatrix.net/z/banner.jpg') center;
 #mail img {
  filter: invert(1);
 }
 .settings img {
  filter: invert(1);
 }
}
parentlinkreply
[-]x0x70(0|0)

Variant with less tall posts for @Neol.

parentlinkreply
[-]x0x70(0|0)
/*  Theme for Neol */
#include BMtZGYSx88
#content .post {
 padding: 5px;
 margin-bottom:6px !important;
}
parentlinkreply
[-]rewrite1(+1|0)

Cool!

parentlinkreply
[-]x0x71(+1|0)

I like it.

parentlinkreply
[-]JasonCarswell2(+2|0)

Me too!

The darker background and higher contrast is MUCH easier on the eyes, and very readable. It might be nice to add custom accent colours*.

The layout now is more consistent with uniform rounded corners and spacing (as I'd mentioned this a year ago).

Small glitch - on shorter pages without comments at the page bottom the background is grey. It's after <html> and before <body>. Maybe there is a way to fix it or maybe a back-background element needs adding to work with.

Also of note - when one switches front pages (custom/hot/new/top) or when one votes, it refreshes the page so that it starts at original default theme for a moment then animates to the new theme. I'm not irritated by this so much as fascinated by the transformation, though I suspect the novelty might pass.

Another small glitch occurs on the front page, when scrolling down it reverts back to the default theme then updates, flashing back and forth as you scroll. I don't know if it's my browser updating the page in the cache, if it's the page updating the theme as I go, or what it is. It's weird. Not terrible now, but if it systemic as more themes are developed and applied it may irk users.

Theme tweak idea:
On the front page alternate slightly different shades for listed posts. This not only helps distinguish separate posts, there won't be a need for as much spacing, thus increasing info ergonomically presented on screen.

Custom Theme/GUI Idea:
A drop down menu of sliders:

  • mode light to dark
  • mode colour
  • mode saturation
  • accent colour
  • accent saturation
  • font
  • font size
  • font colour
  • font saturation
  • rounded corners
  • margins
  • padding
  • view/save code option
parentlinkreply
[-]x0x71(+1|0)
/* Cool. I appreciate it.  
I'm going to put it in a code block to make it a theme,
and try it out. */

:root {
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2d2d2d;
  --text-primary: #e6e6e6;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --accent: #6b8cff;
  --accent-hover: #5271ff;
  --border-color: #333333;
  --shadow: rgba(0, 0, 0, 0.3);
  --card-radius: 8px;
  --transition: all 0.2s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

#content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Modern Card Styling for Posts */
.post {
  background-color: var(--bg-secondary);
  border-radius: var(--card-radius);
  margin: 0 0 16px 0 !important;
  padding: 20px;
  box-shadow: 0 2px 8px var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.post:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
}

/* Sidebar Styling */
#sidebar {
  background-color: var(--bg-secondary);
  border-radius: var(--card-radius);
  padding: 20px;
  margin-left: 24px !important;
  box-shadow: 0 2px 8px var(--shadow);
  border: 1px solid var(--border-color);
}

/* Buttons and Interactive Elements */
button, .btn {
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

button:hover, .btn:hover {
  background-color: var(--accent-hover);
}

/* Input Fields */
input, textarea, select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  width: 100%;
  transition: var(--transition);
}

#postcontent #commentbox textarea {
  background: var(--bg-tertiary) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107, 140, 255, 0.2);
}

/* Typography Improvements */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 16px;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Code blocks */
code {
  background-color: var(--bg-tertiary);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
}

pre {
  background-color: var(--bg-tertiary);
  padding: 16px;
  border-radius: var(--card-radius);
  overflow-x: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #content {
    padding: 16px;
  }
  
  #sidebar {
    margin-left: 0 !important;
    margin-top: 16px;
  }
}
.multitopic a {
  color: var(--accent) !important;
}
parentlinkreply
[-]rewrite0(0|0)

i've added
.multitopic a {
color: var(--accent) !important;
}
to the original post, can you update this code block?

parentlinkreply
[-]x0x70(0|0)

Yeah

parentlinkreply