What would be the best way to alter CSS on the server side and keep Mailpile up to date?

[Kabouik]

I made quick and dirty changes to the Mailpile UI using Stylus, meaning I do not really have my own version of default.css, but rather a partial list of css attributes to which Stylus gives priority over the originals in default.css.

This works well on individual machines, but Mailpile is installed on a server so I would like to apply the changes directly on the server instead of having to use Stylus and synchronize the custom changes on every machine I use to connect to Mailpile. I'm not sure what is the best way to do it while minimizing the number of manipulations after each git pull.

1. Create a custom.css containing only the changes and reference it after default.css at the top of each Mailpile html files? Seems like a lot of edits to do each time Mailpile is updated (could probably automate it though).
2. Implement my changes into the full default.css and fork the whole Mailpile repository just to maintain my version of this single file? I'm not comfortable with git, not sure how I would need to do that and how much work it would be after each git pull to restore the changes. Additionally, considering I'm not a coder, I find it easier to confine the alterations in a separate file instead of directly modifying the source file.
3. @import both the default style and my custom changes (only the changes, like in Stylus) into a blank default.css file?

Since I was not sure which html files to edit for 1, and I am not comfortable with the git workflow (2), I tried 3 today. It works well so far (I have not challenged it after a git pull though, not totally sure it will work as expected), but I don't know if it is a sound and reliable hack. I would be grateful if someone with more experience could comment and yell at me if this is stupid.

Basically, I've put my Stylus modifications into a /home/user/Mailpile-tweaks/custom.css file on my server, and then made a little script to automate the next steps to make Mailpile take it into account after a git pull:

#!/bin/sh
sudo su
cd /opt/mailpile/default-theme/css

# Backup original default.css
cp default.css default.css.bak

# Import default style and then custom changes into a new .css file (custom.css must be imported after default to get priority) 
mv default.css mailpile.default.css
printf "@import url('mailpile.default.css');\n@import url('custom.css');\n" > default.css
cp /home/user/Mailpile-tweaks/custom.css .
sudo
# Set permissions and exit
chown -R mailpile:mailpile /opt/mailpile
exit

If everything works as expected (and well, I'm not sure), then I would just have to execute this script after each git pull. I am not sure what will happen with the files created or altered by the script when pulling from the repository after a Mailpile update. Will it erase the extra files and revert the altered ones? Will it change them only if new changes have been committed in master?

It's just minor changes to the UI visuals to my own taste here, but there's a nice potential for the end user if the UI can be changed on Mailpile's side with standard Stylus styles, without having to carefully check sources at every update (which a non-coder like me won't really do). Of course there are risks that an update partly breaks the customisation, but at least the source file is intact and kept up to date according to master branch.

For reference, here is the custom.css:

#pile-results td.crypto-and-tags,
#pile-results td.message-nav,
#pile-results td.avatar {
    text-align: right;
    padding-right: 3px;
}
#pile-results td.from {
    width: 305px /* 255+24 */;
}
#notification-bubbles,
#notifications-header {
    background: #E9E9E9;
}
#notifications a,
#notifications a:visited {
    color: rgb(100, 100, 100);
    font-size: 90%;
}
div.notification-bubble {
    padding: 7.5px 7.5px;
    border-top: 1px solid #b3b3b3;
}
#notifications-header span.text,
div.notification-bubble span.text {
    padding-left: 10px;
    padding-bottom: 1px;
    line-height: 16px;
    color: rgba(100, 100, 100, 1);
    font-size: 90%;
}
div.notification-bubble span.icon {
    vertical-align: middle;
    color: rgba(100, 100, 100, 1);
    font-size: 100%;
    line-height: 10px;
}
div.notification-bubble span.action {
    font-style: italic;
    color: rgba(120, 120, 120, 1);
}
#notifications-header {
    margin: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 0;
    padding: 3.5px 6.5px;
    padding-left: 20.5px;
    padding-bottom: 1px;
    font-weight: bold;
    font-variant: small-caps;
}
#content-tall-view,
#content-view,
#sidebar,
#sidebar-bottom {
    background: rgba(233, 233, 233, 0.2);
}
.sub-navigation {
    background: rgba(233, 233, 233, 0.2);
}
.topbar {
    background: rgba(233, 233, 233, 0.2);
}
.form-compose {
    background: rgba(233, 233, 233, 0.2);
}
button,
button.button-primary,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary,
a.button-primary,
button.button-info, input[type="submit"].button-info,
input[type="reset"].button-info,
input[type="button"].button-info, a.button-info {
    color: rgba(120, 120, 120, 1) !important;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
    font: bold;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: #d9d9d9;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0);
}
.form-search button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 36px;
    width: 44px;
    font: bold 18px/40px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgba(120, 120, 120, 1);
    background: #d9d9d9;
    border-radius: 0 0 0 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.form-search {
    border-radius: 0 0 0 0;
    color: #cccccc;
}
button.button-secondary, input[type="submit"].button-secondary,
input[type="reset"].button-secondary,
input[type="button"].button-secondary, a.button-secondary {
    color: #ffffff !important;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0px;
    background: #474846;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0);
}
* {
    border-radius: 0px;
}
.compose-body {
    border-radius: 0px;
}
.compose-options-crypto {
        border-radius: 0px;
}
.compose-subject input[type=text] {
        border-radius: 0px;
}
.compose-from-select {
        border-radius: 0px;
}
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button-primary:hover {
  border: 0;
  background-color: #474846;
  color: #ffffff  !important;
}

.form-search button:hover
{
  border: 0;
  background-color: #474846;
  color: #ffffff  !important;
}

p.paragraph-success, p.paragraph-important, p.paragraph-alert,
p.paragraph-warning {
    border-radius: 0px;
}
.standard input[type="text"], .standard input[type="password"],
.standard input[type="email"], .standard input[type="url"],
.standard input[type="phone"], .standard input[type="address"],
.standard textarea, .standard select {
    border-radius: 0px;
    border: 1px solid #b3b3b3;
}
#pile-results td {
    border-color: #fff;
}
.bulk-actions {
    border-bottom: 0;
}
#terminal {
    opacity: 0.8;
    line-height: 16px;
    font-size: 14px;
}

[BjarniRunar]

Good question. Let me think about it; there are some (very old) mechanisms in place to allow for custom themes, but it's so long since I've touched that code that there may be some bitrot.

[s-m-e]

@BjarniRunar What's the current state of server-side css theming (without customizing Mailpile)?

[Kabouik]

I updated my message above (it's still a customization hack, but works decently). I managed to maintain my custom changes after a git pull, regarding the concerns mentioned in the first post.

[BjarniRunar]

Thanks for the update!

This does point to a straightforward (and much simpler than our partial planned theme support) way to support custom CSS adaptations; if we give the user a way to point to a custom CSS File somewhere on disk, and ensure Mailpile includes a reference to that after default.css in our HTML template, users should be able to override most of our styling (excepting the bits where I am naughty and do styling directly in the HTML, which is arguably a bad habit that should be treated as lazy-programmer-bugs).

Let me sleep on this a little bit more and I'll propose a basic design for implementing this.

[simmonspaul]

Isolating the CSS / Theme adaptation seems like a good idea and would be appreciated.

eg. I can't modify the size of the left sidebar (or font sizes) so my account names are truncated.

Firefox 72.0.1 Docker image rroemhild/docker-mailpile 1.0.0rc5

Thanks