Customizable style.css

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)
+    }
 
 }
 

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;
+}
+

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>

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 {