From fbbcf95bdd090a4d423087c938fde62563c858b5 Mon Sep 17 00:00:00 2001
From: vexorian <vexorian@gmail.com>
Date: Sun, 21 Mar 2021 18:12:19 -0400
Subject: [PATCH] Customizable style.css

---
 index.js                     |  5 ++++
 resources/default-custom.css | 14 ++++++++++
 web/public/index.html        |  1 +
 web/public/style.css         | 52 +++++++++++++++---------------------
 4 files changed, 42 insertions(+), 30 deletions(-)
 create mode 100644 resources/default-custom.css

diff --git a/index.js b/index.js
index 6eaf637..c592560 100644
--- a/index.js
+++ b/index.js
@@ -199,6 +199,7 @@ app.use('/cache/images', express.static(path.join(process.env.DATABASE, 'cache/i
 app.use('/favicon.svg', express.static(
     path.join(__dirname, 'resources/favicon.svg')
 ) );
+app.use('/custom.css', express.static(path.join(process.env.DATABASE, 'custom.css')))
 
 // API Routers
 app.use(api.router(db, channelDB, fillerDB, xmltvInterval, guideService, m3uService, eventService ))
@@ -243,6 +244,10 @@ function initDB(db, channelDB) {
         let data = fs.readFileSync(path.resolve(path.join(__dirname, 'resources/loading-screen.png')))
         fs.writeFileSync(process.env.DATABASE + '/images/loading-screen.png', data)
     }
+    if (!fs.existsSync( path.join(process.env.DATABASE, 'custom.css') )) {
+        let data = fs.readFileSync(path.resolve(path.join(__dirname, 'resources', 'default-custom.css')))
+        fs.writeFileSync( path.join(process.env.DATABASE, 'custom.css'), data)
+    }
 
 }
 
diff --git a/resources/default-custom.css b/resources/default-custom.css
new file mode 100644
index 0000000..2293389
--- /dev/null
+++ b/resources/default-custom.css
@@ -0,0 +1,14 @@
+/** For example : */
+
+
+
+:root {
+    --guide-text :  #F0F0f0;
+    --guide-header-even:  #423cd4ff;
+    --guide-header-odd: #262198ff;
+    --guide-color-a:  #212121;
+    --guide-color-b:  #515151;
+    --guide-color-c:  #313131;
+    --guide-color-d: #414141;
+}
+
diff --git a/web/public/index.html b/web/public/index.html
index b39f56d..0e1d92e 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
     <link href="style.css" rel="stylesheet">
+    <link href="custom.css" rel="stylesheet">
     <script src="version.js"></script>
     <script src="bundle.js"></script>
 </head>
diff --git a/web/public/style.css b/web/public/style.css
index 92643a7..8055fb6 100644
--- a/web/public/style.css
+++ b/web/public/style.css
@@ -1,3 +1,14 @@
+:root {
+  --guide-text :  #F0F0f0;
+  --guide-header-even:  #423cd4ff;
+  --guide-header-odd: #262198ff;
+  --guide-color-a:  #212121;
+  --guide-color-b:  #515151;
+  --guide-color-c:  #313131;
+  --guide-color-d: #414141;
+}
+
+
 .pull-right { float: right; }
 
 .modal-semi-body {
@@ -5,14 +16,6 @@
   flex: 1 1 auto;
 }
 
-.commercials-panel {
-  background-color: rgb(70, 70, 70);
-  border-top: 1px solid #daa104;
-  border-left-color: #daa104;
-  border-right-color: #daa104;
-  color: white
-}
-
 .plex-panel {
   margin: 0;
   padding: 0;
@@ -27,25 +30,15 @@
   padding-right: 0.2em
 }
 
-.list-group-item-video {
-  background-color: rgb(70, 70, 70);
-  border-top: 1px solid #daa104;
-  border-left-color: #daa104;
-  border-right-color: #daa104;
-  color: white
-}
-.list-group-item-video .fa-plus-circle {
+
+.fa-plus-circle {
   color: #daa104;
 }
 
-.list-group-item-video:hover .fa-plus-circle {
+.fa-plus-circle {
   color: #000;
 }
 
-.list-group-item-video:hover {
-  background-color: #daa104;
-  color: #000 !important;
-}
 .list-group.list-group-root .list-group-item {
   border-radius: 0;
   border-width: 1px 0 0 0;
@@ -157,8 +150,7 @@ table.tvguide {
   position: sticky;
   top: 0;
   bottom: 0;
-  background: white;
-  border-bottom: 1px solid black;
+  /*border-bottom: 1px solid black;*/
 }
 
 .tvguide th.guidenav {
@@ -168,7 +160,7 @@ table.tvguide {
 
 
 .tvguide td, .tvguide th {
-  color: #F0F0f0;
+  color: var(--guide-text);
   border-top: 0;
   height: 3.5em;
   padding-top: 0;
@@ -208,27 +200,27 @@ table.tvguide {
 
 
 .tvguide th.even {
-  background: #423cd4ff;
+  background: var(--guide-header-even);
 }
 
 .tvguide th.odd {
-  background: #262198ff;
+  background: var(--guide-header-odd);
 }
 
 .tvguide tr.odd td.even {
-  background: #212121;
+  background: var(--guide-color-a);
 }
 
 .tvguide tr.odd td.odd {
-  background: #515151;;
+  background: var(--guide-color-b);
 }
 
 .tvguide tr.even td.odd {
-  background: #313131
+  background: var(--guide-color-c);
 }
 
 .tvguide tr.even td.even {
-  background: #414141;
+  background: var(--guide-color-d) ;
 }
 
 .tvguide td .play-channel {