customize css

1 files changed, 63 insertions, 9 deletions

diff --git a/newspipe/static/css/custom.css b/newspipe/static/css/custom.css
index 70a24bf8..65625f0e 100644
--- a/newspipe/static/css/custom.css
+++ b/newspipe/static/css/custom.css
@@ -1,3 +1,13 @@
+:root {
+    /* primary color, for header bar, links, etc. */
+    --main-color: #bc0900;
+    /* right side of header bar, border around some buttons, button hover color */
+    --main-shade: #7f0600;
+    /* color of active button */
+    --main-tint: #ed0b00;
+    /* very light color, not used at present, but designed for the background of (2n+1) table rows */
+    --main-accent: #fcf5f4;
+}
 html {
     position: relative;
     min-height: 100%;
@@ -11,8 +21,9 @@ body {
 img {
     padding: 2px;
 }
-a {
-    color: #3572B0;
+a, a.nav-link {
+    /*color: #3572B0;*/
+    color: var(--main-color);
 }
 
 #sidebar {
@@ -33,28 +44,55 @@ a {
     rgb(255, 255, 255, 1);
 }
 
+a:hover,a.nav-link:hover {
+    color: var(--main-shade);
+}
+
 .bg-newspipe-blue {
     /* background-color: #0082c9; */
-    background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+    /* background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%); */
+    background-image: linear-gradient(40deg, var(--main-color) 0%, var(--main-shade) 100%);
 }
 .btn-primary {
-    background-color: #0082c9;
+    /* background-color: #0082c9; */
+    background-color: var(--main-color);
+    border-color: var(--main-shade);
     opacity: 1;
     color: white;
 }
 .btn-secondary {
-    background-color: #0082c9;
+    /* background-color: #0082c9; */
+    background-color: var(--main-color);
     opacity: 0.6;
     color: white;
 }
+.btn-primary:hover, .btn-secondary {
+    background-color: var(--main-shade);
+}
 
 .btn-outline-primary {
-    border-color: #0082c9;
-    color: #0082c9;
+    /* border-color: #0082c9;
+    color: #0082c9; */
+    border-color: var(--main-color);
+    color: var(--main-color);
+}
+
+.btn-primary:hover {
+    border-color: var(--main-shade);
+}
+
+.btn-primary:active, .btn.btn-primary:active, .btn-secondary:active, a.btn.btn-primary:active {
+    background-color: var(--main-tint);
+    border: var(--main-tint);
+}
+
+.dropdown-item:active, a.dropdown-item:active {
+    background-color: var(--main-tint);
 }
 
 .bg-primary {
-    background-color: #0082c9 !important;
+    /* background-color: #0082c9 !important; */
+    background-color: var(--main-color) !important;
     opacity: 1;
     color: white;
     text-align: center;
@@ -63,7 +101,12 @@ a {
 .badge-light {
     background-color: rgb(246, 248, 250);
     opacity: 1;
-    color: #0082c9 !important;
+    /* color: #0082c9 !important; */
+    color: var(--main-color) !important;
+}
+
+.badge:hover {
+    color: var(--main-shade);
 }
 
 /* Main table for the list of news */
@@ -113,3 +156,14 @@ a {
 .pagination-page-info {
     display: inline;
 }
+
+.fa-square-o::before, .fa-checked-square-o::before, .fa-star-o::before {
+    color: var(--main-color);
+}
+
+/*
+ * Unnecessary
+.table-striped tbody tr:nth-of-type(2n+1) {
+    background-color: var(--main-accent);
+}
+ */