CSS

The screenshots in the documentation use a Material Design CSS Extension we created.

This can be added directly to Webmin > Configuration > Webmin Themes

In addition to making the screens a bit more vivid, it also increaes the size of objects on the page as well as padding, making it easier to work with

  1     .row.icons-row .icons-container {
  2     border-radius: 25px!important;
  3     -webkit-filter: none!important;
  4     filter: none!important;
  5     }
  6
  7     html[data-theme="brown"] #sidebar {
  8     background:
  9     darkslategray!important;}
 10
 11     .panel-default>.panel-heading {
 12     color: #fff;
 13     background-color: rgb(0, 188, 212)!important;text-align:left !important;
 14
 15     }
 16
 17     .panel-default>.panel-heading, .panel-default {
 18     border-top-left-radius: 5px !important;
 19     border-top-right-radius: 5px !important;
 20     }
 21     .panel-default , .panel{
 22     border-bottom-left-radius: 5px !important;border-top:0 !important;border-top-width: 0px;
 23     border-bottom-right-radius: 5px !important;
 24     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
 25     }
 26
 27     .row.icons-row .icons-container:not(.highlighted) {
 28     border-radius: 5px !important;
 29     background: rgb(255, 255, 255) !important;
 30     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
 31     }
 32
 33     h2.form-signin-heading {
 34     display: none !important;
 35     }
 36
 37     i.wbm-webmin {
 38     display: none !important;
 39     }
 40
 41     .card {
 42     font-size: .875rem;
 43     font-weight: 400
 44     }
 45
 46     .btn:not(.btn-round), button.btn:not(.btn-round), .csf-container input[type='submit']:not(.btn-round), .csf-container button.input:not(.btn-round), input[type='submit']:not(.btn-round) {
 47     text-align: center;
 48     vertical-align: middle;
 49     font-size: 1rem;
 50     line-height: 1.5;
 51     border-radius: 0.325em !important;
 52     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 53     text-transform: uppercase;
 54     cursor: pointer;
 55     border: 0;
 56     outline: 0;
 57     transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1) !important;
 58     will-change: box-shadow,transform;
 59     color: rgba(0,0,0,.87);
 60     background-color: rgb(255, 255, 255);
 61     border-color: rgb(204, 204, 204) !important;
 62     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
 63     margin-left: 0 !important;
 64     margin-right: 0 !important
 65     }
 66
 67     html[data-script-name*='settings-editor_read.cgi'] #content .CodeMirror+.ui_form_end_buttons .btn {
 68     margin-left: 0 !important;
 69     margin-right: 0 !important
 70     }
 71
 72     html[data-script-name*='settings-editor_read.cgi'] #content .CodeMirror+.ui_form_end_buttons td:last-child .btn {
 73     margin-left: 0 !important;
 74     margin-right: 5px !important
 75     }
 76
 77     .btn-group .btn,.btn {
 78     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
 79     }
 80
 81     .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
 82     border-top-right-radius: 0 !important;
 83     border-bottom-right-radius: 0 !important;
 84     }
 85
 86     .btn-group>.btn:last-child:not(:first-child):not(.dropdown-toggle) {
 87     border-top-left-radius: 0 !important;
 88     border-bottom-left-radius: 0 !important;
 89     }
 90
 91     body .btn.btn-primary {
 92     color: rgb(255, 255, 255) !important;
 93     background-color: rgb(63, 81, 181) !important;
 94     border-color: rgb(63, 81, 181) !important;
 95     }
 96     body .btn.btn-default {
 97     color: rgba(0, 0, 0, 0.87);
 98     background-color: rgba(153, 153, 153, 0.2);
 99     border-color: rgba(153, 153, 153, 0.2);
100     }
101     body .btn.btn-success {
102     color: rgb(255, 255, 255) !important;
103     background-color: rgb(76, 175, 80) !important;
104     border-color: rgb(76, 175, 80) !important;
105     }
106
107     .btn.btn-secondary {
108     color: rgb(255, 255, 255) !important;
109     background-color: rgb(108, 117, 125) !important;
110     border-color: rgb(108, 117, 125) !important;
111     }
112
113     .btn.btn-info, .btn.btn-inverse, .btn.ui_link.btn-inverse,.btn-tiny, .ui_link.btn.btn-inverse.btn-tiny.ui_link_replaced, .btn-inverse {
114     color: rgb(255, 255, 255) !important;
115     background-color: rgb(3, 169, 244) !important;
116     border-color: rgb(3, 169, 244) !important;
117     }
118
119     .btn.btn-info:hover, .btn.btn-inverse:hover, .btn.ui_link.btn-inverse:hover,.btn-tiny:hover, .ui_link.btn.btn-inverse.btn-tiny.ui_link_replaced:hover, .btn-inverse:hover,
120
121     .btn.btn-inverse:hover, .btn.ui_link.btn-inverse:hover, .btn-tiny:hover, .ui_link.btn.btn-inverse.btn-tiny.ui_link_replaced:hover, .btn-inverse:hover{
122     border-color: rgb(255, 255, 255) !important;background-color: rgb(3, 169, 244) !important;
123     }
124
125     .btn:hover {
126     cursor: pointer !important;
127     }
128     .btn.btn-warning {
129     color: rgb(255, 255, 255) !important;
130     background-color: rgb(255, 87, 34) !important;
131     border-color: rgb(255, 87, 34) !important;
132     }
133
134     .btn.btn-danger {
135     color: rgb(255, 255, 255) !important;
136     background-color: rgb(244, 67, 54) !important;
137     border-color: rgb(244, 67, 54) !important;
138     }
139
140     .alert-success {
141     color: rgb(40, 91, 42);
142     background-color: rgb(219, 239, 220);
143     border-color: rgb(205, 233, 206);
144     }.alert-danger {
145     color: rgb(127, 35, 28);
146     background-color: rgb(253, 217, 215);
147     border-color: rgb(252, 202, 199);
148     }.alert-primary {
149     color: rgb(33, 42, 94);
150     background-color: rgb(217, 220, 240);
151     border-color: rgb(201, 206, 234);
152     }.alert-secondary {
153     color: rgb(56, 61, 65);
154     background-color: rgb(226, 227, 229);
155     border-color: rgb(214, 216, 219);
156     }.alert-warning {
157     color: rgb(133, 45, 18);
158     background-color: rgb(255, 221, 211);
159     border-color: rgb(255, 208, 193);
160     }.alert-info {
161     color: rgb(2, 88, 127);
162     background-color: rgb(205, 238, 253);
163     border-color: rgb(184, 231, 252);
164     }.alert-light {
165     color: rgb(127, 127, 127);
166     background-color: rgb(253, 253, 253);
167     border-color: rgb(252, 252, 252);
168     }.alert-dark {
169     color: rgb(34, 34, 34);
170     background-color: rgb(217, 217, 217);
171     border-color: rgb(202, 202, 202);
172     }
173     #right-side-tabs .btn-tiny.ui_submit.ui_form_end_submit, #content #system-status .btn-tiny.ui_submit.ui_form_end_submit {
174     line-height: 21px;
175     padding: 5px 12px !important;    height: 32px !important;
176     }
177     .table-subtable tbody tr td, .panel-body .table-subtable tr th, .panel-body .table-subtable tr td, .table-subtable tbody tr td, .panel-body tr th, .panel-body tr td {
178     padding: .75rem !important;
179     }
180
181     body.csf .dataTables_filter input[type='search'], body .dataTables_filter input[type='search'], .csf-container input[type='text'], .csf-container input[type='search'], .csf-container input, .csf-container select, input[id^='CSF'], input[type='button'], input[type='reset'], input[name]:not([type='image']):not([type='checkbox']):not([type='radio']):not(.btn):not(.session_login), input[name]:not([type='image']):not(.sidebar-search):not([type='button']):not([type='checkbox']):not([type='radio']):not(.btn), .csf-container input[type='text'], .csf-container input[type='search'], .chooser_button, .form-control {
182     font-size: 1rem;
183     box-sizing: content-box;
184     width: 100%;
185     height: 3rem;
186     margin: 0;
187     padding: 0;
188     -webkit-transition: box-shadow .3s,border .3s;
189     transition: box-shadow .3s,border .3s;
190     border: none;
191     border-bottom: 1px solid rgb(158, 158, 158);
192     border-radius: 0;
193     outline: 0;
194     background-color: rgba(0, 0, 0, 0);
195     box-shadow: none;font-size:16px;padding-left:5px;padding-right:5px;
196     }
197
198     input[name]:not([type='image']):not([type='checkbox']):not([type='radio']):not(.btn):not(.session_login):focus, input[name]:not([type='image']):not(.sidebar-search):not([type='button']):not([type='checkbox']):not([type='radio']):not(.btn):focus, .csf-container input[type='text']:focus, .csf-container input[type='search']:focus, .chooser_button:focus, .form-control:focus{
199     border-bottom-width:2px;border-bottom-color :  rgb(63, 81, 181)
200     }
201
202     li.user-link, li.user-link span, li.user-link, li.user-link i {
203     background: rgb(85, 189, 212);
204     color: rgb(255, 255, 255) !important;
205     border-radius: 5px !important;
206     border: 0 !important;
207     line-height: 18px;
208     }
209     html[data-theme="brown"] #sidebar .form-group .form-control.sidebar-search::placeholder{
210     color:#bbb !important
211     }
212     html[data-theme="brown"] #sidebar .form-group .form-control.sidebar-search{
213     color: #fff!important;
214     }

Above can be pasted into Theme Extensions