added shades to website style
diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css
index 24353f9..208c7dd 100644
--- a/website/doctype/style_settings/custom_template.css
+++ b/website/doctype/style_settings/custom_template.css
@@ -29,7 +29,7 @@
{% endif %}
div.outer {
- background-color: #{{ doc.page_background or "fff" }};
+ background-color: #{{ doc.page_background or "fffffff" }};
}
{% if doc.google_web_font_for_heading or doc.heading_font %}h1, h2, h3, h4, h5 {
@@ -54,14 +54,14 @@
}
{% else %}
div.web-footer {
- border-top: 1px solid #eee;
+ border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
padding-top: 10px;
}
{% endif %}
/* Bootstrap Navbar */
.navbar-inverse .navbar-inner {
- background-color: #{{ doc.top_bar_background or "444"}};
+ background-color: #{{ doc.top_bar_background or "444444"}};
background-repeat: repeat-x;
border-color: transparent;
background-image: none;
@@ -71,13 +71,13 @@
.navbar-inverse .brand:hover,
.navbar-inverse .brand:focus,
.navbar-inverse .nav > li > a {
- color: #{{ doc.top_bar_foreground or "fff"}};
+ color: #{{ doc.top_bar_foreground or "fffffff"}};
text-shadow: none;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
- color: #{{ doc.top_bar_background or "000"}};
+ color: #{{ doc.top_bar_background or "0000000"}};
}
.navbar-inverse .navbar-text {
@@ -86,14 +86,14 @@
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
- color: #{{ doc.top_bar_foreground or "fff"}};
+ color: #{{ doc.top_bar_foreground or "fffffff"}};
background-color: transparent;
}
.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
- color: #{{ doc.top_bar_foreground or "fff"}};
+ color: #{{ doc.top_bar_foreground or "fffffff"}};
background-color: transparent;
}
@@ -103,7 +103,7 @@
.navbar-inverse .navbar-link:hover,
.navbar-inverse .navbar-link:focus {
- color: #{{ doc.top_bar_foreground or "fff"}};
+ color: #{{ doc.top_bar_foreground or "fffffff"}};
}
.navbar-fixed-top .navbar-inner,
@@ -126,47 +126,90 @@
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown > .dropdown-toggle:hover .caret {
- border-top-color: #{{ doc.top_bar_foreground or "fff"}};
- border-bottom-color: #{{ doc.top_bar_foreground or "fff"}};
+ border-top-color: #{{ doc.top_bar_foreground or "fffffff"}};
+ border-bottom-color: #{{ doc.top_bar_foreground or "fffffff"}};
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle:hover .caret {
- border-top-color: #{{ doc.top_bar_background or "000"}};
- border-bottom-color: #{{ doc.top_bar_background or "000"}};
+ border-top-color: #{{ doc.top_bar_background or "0000000"}};
+ border-bottom-color: #{{ doc.top_bar_background or "0000000"}};
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
- color: #{{ doc.top_bar_background or "000"}};
- background-color: #{{ doc.top_bar_foreground or "fff"}};
+ color: #{{ doc.top_bar_background or "0000000"}};
+ background-color: #{{ doc.top_bar_foreground or "fffffff"}};
}
@media (max-width: 800px) {
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
- background-color: #{{ doc.top_bar_background or "000"}};
- color: #{{ doc.top_bar_foreground or "fff"}};
+ background-color: #{{ doc.top_bar_background or "0000000"}};
+ color: #{{ doc.top_bar_foreground or "fffffff"}};
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
- background-color: #{{ doc.top_bar_foreground or "fff"}};
- color: #{{ doc.top_bar_background or "000"}};
+ background-color: #{{ doc.top_bar_foreground or "fffffff"}};
+ color: #{{ doc.top_bar_background or "0000000"}};
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: #{{ doc.top_bar_foreground or "fff" }};
- border-bottom-color: #{{ doc.top_bar_foreground or "fff" }};
+ border-top-color: #{{ doc.top_bar_foreground or "fffffff" }};
+ border-bottom-color: #{{ doc.top_bar_foreground or "fffffff" }};
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle:hover .caret {
- border-top-color: #{{ doc.top_bar_background or "000" }};
- border-bottom-color: #{{ doc.top_bar_background or "000" }};
+ border-top-color: #{{ doc.top_bar_background or "0000000" }};
+ border-bottom-color: #{{ doc.top_bar_background or "0000000" }};
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle:hover .caret {
- border-top-color: #{{ doc.top_bar_background or "000" }};
- border-bottom-color: #{{ doc.top_bar_background or "000" }};
+ border-top-color: #{{ doc.top_bar_background or "0000000" }};
+ border-bottom-color: #{{ doc.top_bar_background or "0000000" }};
}
}
+
+.breadcrumb {
+ background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 5) }};
+}
+
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+ background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 5) }};
+}
+
+.table-hover tbody tr:hover td,
+.table-hover tbody tr:hover th {
+ background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 10) }};
+}
+
+.table-bordered {
+ border: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
+}
+
+.table th,
+.table td {
+ border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
+}
+
+.table-bordered th,
+.table-bordered td {
+ border-left: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
+}
+
+
+
+.hero-unit {
+ background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
+}
+
+pre, code {
+ background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 5) }};
+}
+
+hr {
+ border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }};
+ border-bottom: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 5) }};
+}
diff --git a/website/doctype/style_settings/style_settings.py b/website/doctype/style_settings/style_settings.py
index 91ca0a5..1cc3467 100644
--- a/website/doctype/style_settings/style_settings.py
+++ b/website/doctype/style_settings/style_settings.py
@@ -27,6 +27,7 @@
def validate(self):
"""make custom css"""
from jinja2 import Template
+ from website.utils import get_hex_shade
import os
self.validate_colors()
@@ -38,7 +39,7 @@
self.prepare()
- self.doc.custom_css = temp.render(doc = self.doc)
+ self.doc.custom_css = temp.render(doc = self.doc, get_hex_shade=get_hex_shade)
if self.doc.add_css:
self.doc.custom_css += '\n\n/* User CSS */\n\n' + self.doc.add_css
diff --git a/website/utils.py b/website/utils.py
index 0f62d26..b38d2b3 100644
--- a/website/utils.py
+++ b/website/utils.py
@@ -302,4 +302,27 @@
if url and not url.lower().startswith("http"):
return "files/" + url
else:
- return url
\ No newline at end of file
+ return url
+
+def get_hex_shade(color, percent):
+ # switch dark and light shades
+ if int(color, 16) > int("808080", 16):
+ percent = -percent
+
+ # stronger diff for darker shades
+ if int(color, 16) < int("333333", 16):
+ percent = percent * 2
+
+ def p(c):
+ v = int(c, 16) + int(int('ff', 16) * (float(percent)/100))
+ if v < 0:
+ v=0
+ if v > 255:
+ v=255
+ h = hex(v)[2:]
+ if len(h) < 2:
+ h = "0" + h
+ return h
+
+ r, g, b = color[0:2], color[2:4], color[4:6]
+ return p(r) + p(g) + p(b)
\ No newline at end of file