aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--newspipe/static/css/custom.css72
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);
+}
+ */
bgstack15