added shades to website style
This commit is contained in:
Rushabh Mehta
parent
2eddd8ad68
commit
860f3ceada
@ -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) }};
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
Loading…
x
Reference in New Issue
Block a user