Topic: Simple userstyle and Firefox theme

I've put together some custom CSS that simplifies the look of the site, tightens up some margins, reduces text size, and saves some vertical space.

Updated for the redesign. Here's a screenshot of what it looks like: https://i.imgur.com/EuZrJZw.png

Just paste into the custom CSS section of the advanced user settings page, or use a browser plugin like Stylus

body {
    font-size: 80%;
}

div#page {
    margin: 0;
    padding: .25rem .5rem;
}

header {
    margin:0;
}

header#top h1 {
        position: absolute;
        font-size: 1.2em;
        margin: 0 1.35em;
}

header#top menu {
    margin-top: 0px;
    padding: 2px 1rem;
}

header#top menu.main {
    font-size: 106%;
    margin-left: 4em
}

.tag-list-header {
    font-size: .9em !important;
    margin-left: .1em;
    margin-top: .1em;
}

#tag-list > ul {
    margin-bottom: 0;
}

div#page aside#sidebar h1 {
    font-size: 1em;
}

.search-help {
    font-size: 0.8em;
}

#nav-links {
    border: none !important;
    padding: 4px !important;
    border-radius: initial;
}

#add-fav-button {
    box-shadow: none;
}

#remove-fav-button {
    box-shadow: none;
}

.bottom-notices > div {
    border: none;
}

#artist-commentary {
    border: none !important;
    box-shadow: none;
}

#comments {
    padding: .01em 1rem;
    box-shadow: none;
}

#search-box #tags {
    border-radius: 2px 0px 0px 2px;
    box-shadow: none;
}

#search-box button {
    box-shadow: none;
    padding: 1px 5px !important;
    border-radius: 0px 2px 2px 0px;
    background: #e7e7e7 !important
}

.wiki-link {
    margin-right: 0 !important;
}

.search-inc-tag {
   margin: 0px -1px;
}

.search-exl-tag {
    margin-right: 1px;
}

Optional smaller fav button:

.fav-buttons {
    font-size: 1em !important;
    margin-right: .7em !important;
}

Remove tag type headers:

.tag-list-header {
    display: none;
}

I've also made a quick Firefox Color theme to go with it: https://color.firefox.com/?theme=XQAAAAIUAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKlhLliJ51ygIDSHb1doLaygW8Bddi9GoqshZlsLqwbpbODZCBui7Qg-sAra5UM5Vbf4flMlTTRMY4frhLzqzYV1JPal1SK8-J1jzGNCKwK9fKK8PtQ-8oNk2YxeRwQReQS7rvey4HClAHnV6R4GuuG0A4JvkCr522syakes_QSJKTceLDN7GOVuT3mf2YPWWQavRZnTOjE5RPhJ95xd2I0hVfN2H_-LaJAA

There is a code block you can use, eg:
\

\

Chaser said:
There is a code block you can use, eg:
\

\

Thanks, I didn't see that option. I've edited my post.

I'd highly recommend using a normal firefox theme as opposed to Firefox Color, because Firefox Color increases startup time by way more than it logically should.

I took things a little further and wrote out a lot of the box-shadows. Also converted it to a UserCSS file.

/* ==UserStyle==
@name           e621-Flat
@namespace      https://e621.net/forum/show/275884 with edits
@version        1.0.0
@description    Makes e621.net flat and saves some space
@author         Syne Ardwin / RlctntFr
==/UserStyle== */
@-moz-document domain("e621.net") {
    body {
        background-image: none;
        background-color: #152f56;
    }
    #header {
        margin: 0 0 0 0;
        background-color: #031131;
    }
    #subnav {
        margin: 0 0 0 0;
        padding: 2px 20px 0px 15px;
        box-shadow: none;
        border-radius: 0px;
    }
    #ad-leaderboard {
        background: none;
        box-shadow: none;
        top: 0px;
        padding: 0px;
        margin-bottom: 12px;
        left: 3px;
    }
    #ad-leaderboard-content img {
        border-radius: 4px;
        box-shadow: none;
    }
    #content {
        margin: 0 0 0 0;
        box-shadow: none;
        padding: 10px 10px 10px 17px;
        border-radius: 0px;
    }
    .status-notice {
        top: 0px;
    }
    #notices {
        background-color: #152f56;
        padding: 0px;
    }
    #notices > * {
        margin: 5px 10px 0px;
    }

    span.thumb a {
        box-shadow: none;
    }

    input,
    textarea,
    select {
        box-shadow: none;
    }

    #paginator a {
        box-shadow: none;
    }

    .response-list > .comment,
    blockquote,
    .section {
        border-top: none !important;
        box-shadow: none !important;
    }

    .rounded {
        box-shadow: none;
    }
}

Reposition Favorite button, make it vote up automatically.

// ==UserScript==
// @name        ESFav++
// @include     https://e621.net/post/show/*
// @include     https://e926.net/post/show/*
// ==/UserScript==
var li = document.getElementById("add-to-favs");
if (li)
{
  li.style.position = "fixed";
  li.style.right = "0";
  li.style.bottom = "50%";
  li.style.width = "auto";
  li.style.fontSize = "28pt";
  li.style.opacity = "0.8";
  var li = li.children[0];
  if (document.getElementById("voteup").className != "greentext")
  {
     li.setAttribute("onclick",li.getAttribute("onclick").replace("return false;",document.getElementById("voteup").getAttribute("onclick")));
  }
}

I've overhauled this for the new site. Same concept but for the new theme.