[ URL      ] : https://notes.fr/2023/11/12/Backup-BackupPC-Dark-CSS-Theme/
[ CATEGORY ] : /Backup/BackupPC
[ TAGS     ] : , , ,
[ AUTHOR   ] : 4L1N3

BackupPC - Dark CSS Theme

BackupPC WebGUI is just ugly… If you want a original dark theme or a modern dark theme, just replace the following CSS files and restart your web server.

Dark Themes

Edit your .css file, for example /usr/share/BackupPC/html/BackupPC_stnd.css

Original CSS to dark

The file :

/*
 * BackupPC modern CSS definitions
 *
 * Version 4.4.0, released 20 Jun 2020.
 *
 * See http: //backuppc.sourceforge.net.
 *
 * AUTHOR
 *   Craig Barratt  <[email protected]>
 *   Ernesto Carrea  <[email protected]>
 *
 * COPYRIGHT
 *   Copyright (C) 2004-2020  Craig Barratt
 */

body {
    font-family: 'Open Sans',Trebuchet MS,Trebuchet,arial,sans-serif,helvetica;
    font-size: 11pt;
    #background-color: white;
    background-color: #202020;
    color: white;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
}

#logo-container a img {
    max-width: 90%;
    padding: 7px;
    background: #eaeaea;
}

button, input[type="button"], input[type="submit"] {
    font-family: 'Open Sans',Trebuchet MS,Trebuchet,arial,sans-serif,helvetica;
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    font-size: 12pt;
    padding: 6px 12px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    outline: 0;
    background-color: #E0E0D7;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: white;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="radio"], select, textarea {
    background-color: white;
    font-family: 'Open Sans',Trebuchet MS,Trebuchet,arial,sans-serif,helvetica;
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    font-size: 11pt;
    padding: 6px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    outline: 0;
    display: inline-block;
    text-align: left;
    width: 90%;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 5px #719ECE;
}

input.inputCompact, select.inputCompact {
    width: auto;
}

textarea {
    min-height: 64px;
}

h1, .h1 {
    font-size: 20pt;
    font-weight: 400;
}

h2, .h2 {
    font-size: 14pt;
    font-weight: 400;
}

a {
    color: #0069ff;
    text-decoration: none;
}

a:hover {
    color: #0088ce;
}

dt {
    color: #3333ff
}

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-size: 10pt;
}

table {
    width: 100%;
    max-width: 1300px;
    border-collapse: collapse;
    font-size: 11pt;
    border: none;
}

table td {
    border: none;
    padding: 4px;
}

.tableStnd, #host_summary_backups, #host_summary_nobackups {
    width: 100%;
    max-width: 1300px;
    border-collapse: collapse;
    font-size: 11pt;
}

.tableStnd td, #host_summary_backups td, #host_summary_nobackups td {
    padding: 4px;
    text-align: left;
    border: 1px solid #DBDBD0;
}

table th, .tableheader {
    font-size: 11pt;
    font-weight: 400;
    #background-color: #f8f8f4;
}

table.sortable a.sortheader {
    #background-color: #f8f8f4;
    font-weight: 400;
    text-decoration: none;
    display: block;
}

table tr td.border {
    padding: 2px;

}

table tr {
    background-color: #202020;
}


table tr td.border input[type="button"] {
    padding: 2px 4px;
}

.editError {
    color: #ac85ff;
    font-weight: bold;
}

.editComment {
    font-size: 10pt;
}

.editTextInput {
    font-family: Courier;
    font-size: 10pt;
}

.fviewheader {
    font-weight: 400;
    font-size: 11pt;
    background-color: #f8f8f4;
    border-collapse: collapse;
    border: 1px solid #DBDBD0;
}

.fviewborder {
    border-collapse: collapse;
    border: 1px solid #DBDBD0;
    font-size: 10pt;
}

.fviewon, .fview, .fviewoff, .fviewbold {
    padding: 0;
}

.fviewoff a, .fviewon a {
    font-size: 10pt;
    text-decoration: none;
    line-height: 15px;
    color: #0069ff;
}

.fviewon {
    background-color: #f0f0e8;
}

.fviewoff {
}

.fview {
}

.fviewbold {
    font-size: 10pt;
    text-decoration: none;
    line-height: 15px;
    font-weight: 700;
}

.histView {
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    background-color: #eeeeee;
    font-size: 10pt;
}

.histViewMis {
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    background-color: #ffdddd;
}

#BpcLogo {
    padding: 16px 8px 8px 24px;
}

#navigation-container {
    position: fixed;
    width: 240px;
    #background-color: #f8f8f6;
    border-right: 2px solid #aaa;
    padding-left: 10px;
}

.NavMenu {
    disabled-border-bottom: 1px solid silver;
    disabled-margin-bottom: 4px;
}

.NavMenu a {
    display: block;
    font-size: 11pt;
    padding: 6px 0px 6px 12px;
    text-decoration: none;
    color: #0088ce;
}
.NavMenu a:hover {
    color: #293552;
    background-color: #def3ff;
    disabled-text-decoration: underline;
}
.NavMenu a.NavCurrent {
    font-weight: 600;
    color: white;
    background-color: #0088ce;
}

.NavMenu .NavTitle {
    font-size: 14pt;
    font-family: 'Open Sans',Trebuchet MS,Trebuchet,arial,sans-serif,helvetica;
    font-weight: 400;
    padding: 4px 0px;
    margin-bottom: 2px;
}

.NavMenu select {
    width: 90%;
}

.BpcTableTabs {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #E0E0D7;
}

.BpcTableTabsTab, .editTabSel, .editTabNoSel {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 6px 12px;
    min-height: 32px;
}

.BpcTableTabsTab:hover, .editTabNoSel:hover {
    background-color: #def3ff;
    cursor: pointer;
}

.BpcTableTabsTab a, .editTabNoSel a {
    display: block;
    min-height: 24px;
}

.BpcTableTabsTab a:hover, .editTabNoSel a:hover {
    color: #676767;
}

.BpcTableTabsTabActive, .editTabSel {
    padding: 6px 12px;
    font-weight: 400;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #0088ce;
}

.BpcTableTabsTabActive:hover, .editTabSel:hover {
    background-color: #0088ce;
}

.BpcTableTabsTabActive a, .editTabSel a {
    color: white;
    display: block;
    min-height: 24px;
}

.BpcTableTabsTabActive a:hover, .editTabSel a:hover {
    color: white;
}


.BpcTableForm {

}

.BpcTableFormRow {}

.BpcTableFormRowHeader, .editHeader {
    font-family: 'Open Sans',Trebuchet MS,Trebuchet,arial,sans-serif,helvetica;
    font-size: 12pt;
    font-weight: 400;
    border-bottom: 1px dotted #E0E0D7;
    padding-top: 16px;
}

.editSubTable {
    border: 1px solid #dfdfdf;
}

.BpcTableFormRowError {}

#BpcHostSearch input[type="text"], .NavMenu input[type="text"] {
    width: 140px;
    margin-bottom: 4px;
}

#BpcHostSearch input[type="submit"], .NavMenu input[type="submit"] {
    padding: 4px;
}

.NavMenu form {
    margin: 0;
    padding: 0;
}

.NavMenu select {
    padding: 4px;
    margin-bottom: 4px;
}

#Content, BpcContentWrapper {
    margin-left: 260px;
}

HanGhoul CSS to dark

https://github.com/HanGhoul/BackupPC-BetterCSS

The file :

:root {
	--clr-bg-body: #353535;
	--clr-bg-nav: #293846;
	--clr-bg-navelement: #151e26;
	--clr-bg-content: #2b2b2b;
	--clr-bg-table-head: #262626;
	--clr-bg-table-zebra: #262626;
	--clr-border: #fff;
	--clr-accent: #00cfff;
	--clr-accent-hover: #00ffcb;
	--clr-text: #fff;
	--clr-text-accent: #000000;
	--clr-warn: #ff001b;
	--clr-warn-hover: #e0505d;
	--clr-info: #f8ac59;
	--clr-a: #00cfff;
	--clr-a-nav: #fff;
}



/* If your vertical screen resolution is less than 1080px set this to 'absolute' to scroll the menu with the page */
#navigation-container {
	position:fixed;
	background:var(--clr-bg-nav);
	border-right:2px solid var(--clr-accent);
	left:0;
	padding:0;
	top:0;
	width:225px;
}

body {
	background:var(--clr-bg-body);
	color:var(--clr-text);
	font-family:"Open Sans";
	font-size:small;
	line-height:1.5;
	margin:0px;
}

table {
	border:none;
	border-collapse:collapse;
	margin:0 0 20px;
	width:100%;
}

table[width="80%"],.sortable,.tableStnd {
	margin-top:20px;
	width:auto;
}

table[cellpadding="2"] {
	margin-bottom:0px;
}

tbody tr:nth-child(even) {
	background:var(--clr-bg-table-zebra);
}

.tableStnd > td,.sortable > td {
	background:var(--clr-bg-table-head);
}

td.border {
	border:1px solid var(--clr-border);
}

.tableheader > td,.sortheader > td,.fviewheader > td {
	background:var(--clr-bg-table-head);
	border:1px solid var(--clr-border);
	font-family:Open Sans Condensed;
	font-size:11pt;
	font-weight:700;
	padding:6px 8px;
}

table.sortable a.sortheader {
	font-size:11pt;
}

.tableStnd,.sortable,.fviewborder {
	border:1px solid var(--clr-border);
	margin-right:20px;
}

tr[bgcolor="#66cc99"] a,tr[bgcolor="#ccffcc"] a,tr[bgcolor="#ff9900"] a {
	color:var(--clr-text-accent);
	text-decoration:underline;
}

tr[bgcolor="#66cc99"] a:hover,tr[bgcolor="#ccffcc"] a:hover,tr[bgcolor="#ff9900"] a:hover {
	text-decoration:none;
}

tr[bgcolor="#66cc99"] > td{
	background:#23c6c8;
	color:var(--clr-text-accent);
	font-weight:600;
}

tr[bgcolor="#ccffcc"] > td {
	background:var(--clr-accent);
	color:var(--clr-text-accent);
	font-weight:600;
}

tr[bgcolor="#ff9900"] > td{
	background:var(--clr-warn);
	color:var(--clr-text-accent);
	font-weight:600;
}

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

dt {
	color:#33f;
}

a:hover {
	color:var(--clr-accent);
}

a.Navbar {
	padding-left:5px;
	padding-right:5px;
}


h1,.h1 {
	display:block;
	margin-top:0px;
	padding:10px 0 0px 10px;
	color:var(--clr-accent);
	font-family:Open Sans Condensed;
	font-size:xx-large;
	font-weight:300;
	text-transform:uppercase;
	background:var(--clr-bg-body);
	border-bottom:2px solid var(--clr-border);
}

h2,.h2,.editHeader {
	padding:16px 0px 0px 10px;
	font-family:Open Sans Condensed;
	font-size:x-large;
	font-weight:300;
	text-transform:uppercase;
	background:var(--clr-bg-body);
}

.editHeader {
	margin-top:20px;
	border-left:none;
	border-right:none;
}

._podblock_[valign="middle"] {
	border:none;
	margin:0px;
	padding:0px;
}

._podblock_ {
	background:var(--clr-bg-body);
	border-bottom:1px solid var(--clr-border);
	color:var(--clr-text);
	display:block;
	font-size:x-large;
	font-weight:300;
	margin-top:0px;
	padding:10px 0 10px 10px;
}

.editTabNoSel {
	border-top:3px solid transparent;
	display:flex;
	float:right;
	font-weight:600;
	margin:-17px 0 0;
	padding:6px;
	width:13%;
}

.editTabNoSel:hover {
	border-top:3px solid var(--clr-accent);
}

.editTabSel {
	border-top:3px solid var(--clr-accent);
	display:flex;
	float:left;
	margin:-17px 0 0;
	padding:6px;
	width:auto;
}

.editTabSel a {
	color:var(--clr-text);
}

.editTabSel b {
	font-weight:600;
}

.editSaveButton {
	float:right;
	font-size:large;
	margin-bottom:0px;
	margin-top:-67px;
}

.editError {
	color:red;
	font-weight:600;
}

.editComment {
	border:none;
	padding:10px 20px 0;
}

.editTextInput {
	font-family:Courier,monospace;
}

form[name="form1"] {
	float:left;
	margin-top:20px;
	margin-bottom:0px;
	margin-left:20px;
	width:95%;
}

form[name="form1"] > td[valign="top"] {
	width:20%;
}

.fviewon {
	background:#ccc;
}

.fviewoff {
	background:var(--clr-bg-content);
}

.fview {
	font-size:9pt;
	line-height:15px;
}

.fview600 {
	font-size:9pt;
	font-weight:600;
	line-height:15px;
}

.histView {
	background:#eee;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	font-size:10pt;
}

.histViewMis {
	background:#fdd;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
}


/* SERVER MENU */
form + div[class="NavTitle"] {
	margin-top:10px;
}

/* HOST MENU */
br + div[class="NavMenu"] {
	z-index:999;
	margin-top:521px;
}

div[class="NavMenu"] + div[class="NavMenu"] {
	z-index:999;
	margin-top:559px;
}

@-moz-document url-prefix() {
	br + div[class="NavMenu"] {
		margin-top:569px;
	}

	div[class="NavMenu"] + div[class="NavMenu"] {
		margin-top:607px;
	}
}

h2.NavTitle { font-size: medium; }

.NavTitle {
	background:var(--clr-bg-navelement);
	border-left:2px solid var(--clr-accent);
	#color:var(--clr-text-accent);
	color: #FFF;
	font-weight:600;
	margin:1px 0px 0px 0px;
	padding:10px 0 10px 18px;
	text-transform:uppercase;
}

.NavMenu a {
	display:block;
	font-family:Asap Condensed;
	font-size:14px;
	color:var(--clr-a-nav);
	background:var(--clr-bg-navelement);
	border-left:2px solid transparent;
	padding:10px 0 10px 18px;
	margin:1px 0px 0px 0px;
}

.NavMenu a:hover {
	background:var(--clr-bg-nav);
	border-left:2px solid var(--clr-accent);
	color:var(--clr-text-accent);
}

.NavMenu a:before {
	display: inline-block;
	width:1em;
	font-family: "Font Awesome 6 Free";
	font-size:14px;
	font-weight:900;
	text-align:center;
	padding-right:20px;
}

/* SERVER MENU ICONS */
.NavMenu a[href="/backuppc/index.cgi?action=status"]:before {
	content:"\f21e";
}

.NavMenu a[href="/backuppc/index.cgi?action=summary"]:before {
	content:"\f233";
}

.NavMenu a[href="/backuppc/index.cgi?action=editConfig"]:before {
	content:"\f1de";
}

.NavMenu a[href="/backuppc/index.cgi?action=editConfig&newMenu=hosts"]:before {
	content:"\f0ad";
}

.NavMenu a[href="/backuppc/index.cgi?action=adminOpts"]:before {
	content:"\f023";
}

.NavMenu a[href="/backuppc/index.cgi?action=view&type=LOG"]:before {
	content:"\f15c";
}

.NavMenu a[href="/backuppc/index.cgi?action=LOGlist"]:before {
	content:"\f187";
}

.NavMenu a[href="/backuppc/index.cgi?action=emailSummary"]:before {
	content:"\f0e0";
}

.NavMenu a[href="/backuppc/index.cgi?action=queue"]:before {
	content:"\f021";
}

.NavMenu a[href="/backuppc/index.cgi?action=view&type=docs"]:before {
	content:"\f02d";
}

.NavMenu a[href="https://github.com/backuppc/backuppc/wiki"]:before {
	content:"\f08e";
}

.NavMenu a[href="/"]:before {
	content:"\f015";
}

/* HOST MENU ICONS */
.NavMenu a[href^="/backuppc/index.cgi?host="]:before {
	content:"\f109";
}

.NavMenu a[href^="/backuppc/index.cgi?action=browse&host="]:before {
	content:"\f0ca";
}

.NavMenu a[href^="/backuppc/index.cgi?action=view&type=LOG&host="]:before {
	content:"\f15c";
}

.NavMenu a[href^="/backuppc/index.cgi?action=LOGlist&host="]:before {
	content:"\f187";
}

.NavMenu a[href^="/backuppc/index.cgi?action=view&type=XferLOGbad&host="]:before {
	content:"\f06a";
}

.NavMenu a[href^="/backuppc/index.cgi?action=view&type=XferErrbad&host="]:before {
	content:"\f12a";
}

.NavMenu a[href^="/backuppc/index.cgi?action=editConfig&host="]:before {
	content:"\f1de";
}

#Content {
	background:var(--clr-bg-content);
	border-bottom:1px solid var(--clr-border);
	position:absolute;
	top:0px;
	right:30px;
	margin-bottom:30px;
	left:255px;
}

p {
	display:block;
	padding:0px 20px;
}

p + p {
	padding:0px;
}

/* TABSEL HOST CONFIG */
p + p > table[border="0"] {
	margin-top:30px;
}
p + p > input[class="editSaveButton"] {
	margin-top:-113px;
}

p > img {
	padding:0px 20px;
}

p > table[class=sortable] {
	margin-left:20px;
}

pre {
	background:var(--clr-bg-table-zebra);
	border-top:1px solid var(--clr-border);
	border-bottom:1px solid var(--clr-border);
	font-family:Courier,monospace;
	font-size:12px;
	line-height:140%;
	padding:6px 12px 6px 12px;
	margin:0px 20px 20px 20px;
	overflow-x:auto;
	overflow-y:visible;
}

tt {
	background-color:var(--clr-bg-table-zebra);
	font-family:Courier,monospace;
}

a > tt {
	background-color:transparent;
}

ul {
	list-style-type:circle;
}

input,select {
	background:var(--clr-bg-content);
	border:1px solid var(--clr-border);
	color:var(--clr-text);
	font-family:Open Sans;
	padding:6px 10px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

.NavMenu > select,.NavMenu > form {
	font-size:13px;
	margin-top:8px;
	margin-bottom:8px;
	margin-left:9%;
	width:80%;
}

.NavMenu > form {
	margin-top:0px;
}

.NavMenu > form > input {
	margin-top:4px;
}

input:focus,select:focus {
	border-color:var(--clr-accent);
	box-shadow:none;
	outline:0;
}

input[style="color: rgb(255, 0, 0);"] {
	color:var(--clr-text-accent) !important;
	background:var(--clr-warn) !important;
	-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
	animation: pulse 0.8s ease-in-out infinite alternate;
}

@-webkit-keyframes pulse {
	0% {
		background: var(--clr-warn);
	}
	50% {
		background: var(--clr-info);
	}
	100% {
		background: var(--clr-warn);
	}
}
@keyframes pulse {
	0% {
		background: var(--clr-warn);
	}
	50% {
		background: var(--clr-info);
	}
	100% {
		background: var(--clr-warn);
	}
}

input[type="submit"],input[type="button"] {
	background:var(--clr-accent);
	border:none;
	color:var(--clr-text-accent);
	font-weight:600;
}

input[type="submit"]:hover,input[type="button"]:hover {
	background:var(--clr-accent-hover);
	border:none;
	cursor:pointer;
}

input[type="submit"]:focus,input[type="button"]:focus {
	border:none;
}

form[name="Confirm"] > p {
	padding:10px 20px 0 0;
}

form[name="ReloadForm"] {
	margin-top:10px;
}

input[value="Reload"] {
	margin-left:10px;
}

form[name="ReloadForm"] > table {
        border:none;
}

br,p:empty,.NavMenu > form {
	display:none;
}

.sortheader,.tableheader,td,.border {
	font-size:13px;
}

p > table,p > .tableStnd {
	margin-left:0px;
}

.tableStnd,#host_summary_backups,form[name="StartStopForm"],form[name="Confirm"] {
	margin-left:20px;
}

input[value="Stop/Dequeue Backup"],input[value="Start Full Backup"],input[value="Start Incr Backup"],input[value="No"],
input[value="Backup Stoppen/Aussetzen"],input[value="Starte vollständiges Backup"],input[value="Starte inkrementelles Backup"],input[value="Nein"] {
	display:block;
	margin-top:10px;
}

input[value="Stop/Dequeue Backup"],input[value="Delete"],input[value="No"],
input[value="Backup Stoppen/Aussetzen"],input[value="Löschen"],input[value="Nein"] {
	background:var(--clr-warn);
}

input[value="Stop/Dequeue Backup"]:hover,input[value="Delete"]:hover,input[value="No"]:hover,
input[value="Backup Stoppen/Aussetzen"]:hover,input[value="Löschen"]:hover,input[value="Nein"]:hover {
	background:var(--clr-warn-hover);
}

form[name="StartStopForm"] > input {
      display:inline;
      margin-top:0px;
      margin-right:10px;
}

#logo-container {
	display: none;
}

Documentation

https://github.com/HanGhoul/BackupPC-BetterCSS

> Partager <