From 860f3ceada9ca4b4fdd7308449b30e34dd67838d Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Wed, 13 Mar 2013 12:50:08 +0530 Subject: [PATCH] added shades to website style --- .../style_settings/custom_template.css | 91 ++++++++++++++----- .../doctype/style_settings/style_settings.py | 3 +- website/utils.py | 25 ++++- 3 files changed, 93 insertions(+), 26 deletions(-) diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css index 24353f97e03..208c7dd30a6 100644 --- a/website/doctype/style_settings/custom_template.css +++ b/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-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 91ca0a579e2..1cc3467d78c 100644 --- a/website/doctype/style_settings/style_settings.py +++ b/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 diff --git a/website/utils.py b/website/utils.py index 0f62d26b630..b38d2b31a9f 100644 --- a/website/utils.py +++ b/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 \ 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