Custom logo and styles

[smartin77]

Added env variables to add custom logo and css style from mounted source. See updated readme for details.

[microbearlogist]

Some update regarding this pull request?

[wheelybird]

To be frank I'm concerned about overloading the amount of configuration parameters there are. This was only ever meant to be a simple UI for basic (mostly POSIX) account management. I've already lost track of config options myself.
Saying that, looking at this PR again it doesn't seem to onerous and I can see the utility. So I'll look at including this with the next update.

[microbearlogist]

Yes, I understand your reluctance to see the project stray (even further) from its original mission.

So thank you doubly for your understanding.

[microbearlogist]

You are right, I understand your reluctance to see the project stray (even further) from its original mission.

So thank you doubly for your understanding.

[voc0der]

Appreciate this project greatly in general wheely, +1 to this PR IMO, just reviewed the source change intents and this is much cleaner than mounting files in ~ /opt/ldap-user-manager folder to override styles.

Just look at how configurable this is: https://www.authelia.com/configuration/methods/environment/ ... :) And we all love authelia..

[wheelybird]

@netsamurai fair enough. I'll try and merge/release this as soon as I get some time.

[voc0der]

I am(was) NetSamurai and was able to test and build this.. it's voc0der/ldap-user-manager:latest

https://hub.docker.com/r/voc0der/ldap-user-manager if someone else wants to use this version until its built and released on official.

In short, it works great. Thanks!!

As a bonus, here's my custom.css for dark mode:

body {
    background-color: #212121 !important;
}

div.container-fluid {
    background-color: #212121 !important;
}

div.container-fluid a {
    color: #e0e0e0 !important;
}

div.container-fluid a:hover{
    color: #90caf9 !important;
}

a {
    color: #90caf9 !important
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #e0e0e0 !important;
    color: #1e1e1e !important;
}

.table-striped tr:nth-child(even) {
    background-color: #292929 !important;
    border-color: #292929 !important;
    color: #e0e0e0 !important;
}

.table-striped tr:nth-child(odd) {
    background-color: #212121 !important;
    border-color: #292929 !important;
    color: #e0e0e0 !important;
}

input.form-control {
    background-color: #212121 !important;
    color: #e0e0e0 !important;
}

button.btn-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

button.btn-default {
    background-color: #212121 !important;
    color: #e0e0e0 !important;
}

div.panel {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

div.panel-heading {
    background-color: #1e1e1e !important;
    border-color: #292929 !important;
    color: #e0e0e0 !important;

}

div.panel-default {
    border-color: #292929 !important;
}

ul > li.list-group-item {
    background-color: unset !important;
}

input.btn-sm {
    background-color: #1e1e1e !important;
    border-color: #e0e0e0 !important;
    color: #e0e0e0 !important;
}

div.well {
    background-color: unset !important;
}

.table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead > tr > th {
    background-color: #1e1e1e !important;
}

.list-group-item.active, .list-group-item.active:focus {
    background-color: #90caf9 !important;
    color: #1e1e1e !important;
}

.glyphicon {
    background-color: unset !important;
}

a.selector {
    background-color: unset !important;
}

I kinda hacked it together by copying another apps coloration.