added shades to website style

website/doctype/style_settings/custom_template.css

@@ -29,7 +29,7 @@ body {
 {% 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 @@ div.outer {
 }
 {% 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 @@ div.web-footer {
 .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 @@ div.web-footer {
 
 .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 @@ div.web-footer {
 
 .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 @@ div.web-footer {
 
 .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-top-color: #{{ doc.top_bar_foreground or "fffffff"}};
-	border-bottom-color: #{{ doc.top_bar_foreground or "fff"}};
+	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-top-color: #{{ doc.top_bar_background or "0000000"}};
-	border-bottom-color: #{{ doc.top_bar_background or "000"}};
+	border-bottom-color: #{{ doc.top_bar_background or "0000000"}};
 }
 
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
-  color: #{{ doc.top_bar_background or "000"}};
+  color: #{{ doc.top_bar_background or "0000000"}};
-  background-color: #{{ doc.top_bar_foreground or "fff"}};
+  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"}};
+    background-color: #{{ doc.top_bar_background or "0000000"}};
-    color: #{{ doc.top_bar_foreground or "fff"}};
+    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"}};
+    background-color: #{{ doc.top_bar_foreground or "fffffff"}};
-    color: #{{ doc.top_bar_background or "000"}};
+    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-top-color: #{{ doc.top_bar_foreground or "fffffff" }};
-    border-bottom-color: #{{ doc.top_bar_foreground or "fff" }};	
+    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-top-color: #{{ doc.top_bar_background or "0000000" }};
-    border-bottom-color: #{{ doc.top_bar_background or "000" }};
+    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-top-color: #{{ doc.top_bar_background or "0000000" }};
-    border-bottom-color: #{{ doc.top_bar_background or "000" }};	
+    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) }};	
+}

website/doctype/style_settings/style_settings.py

@@ -27,6 +27,7 @@ class DocType:
 	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 @@ class DocType:
 		
 		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
 		

website/utils.py

@@ -302,4 +302,27 @@ def url_for_website(url):
 	if url and not url.lower().startswith("http"):
 		return "files/" + url
 	else:
-		return url
+		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)