@ -0,0 +1,118 @@ | |||||
# -*- coding: utf-8 -*- | |||||
import os | |||||
import shlex | |||||
import shutil | |||||
import sys | |||||
import datetime | |||||
from invoke import task | |||||
from invoke.main import program | |||||
from invoke.util import cd | |||||
from pelican import main as pelican_main | |||||
from pelican.server import ComplexHTTPRequestHandler, RootedHTTPServer | |||||
from pelican.settings import DEFAULT_CONFIG, get_settings_from_file | |||||
SETTINGS_FILE_BASE = 'pelicanconf.py' | |||||
SETTINGS = {} | |||||
SETTINGS.update(DEFAULT_CONFIG) | |||||
LOCAL_SETTINGS = get_settings_from_file(SETTINGS_FILE_BASE) | |||||
SETTINGS.update(LOCAL_SETTINGS) | |||||
CONFIG = { | |||||
'settings_base': SETTINGS_FILE_BASE, | |||||
'settings_publish': 'publishconf.py', | |||||
# Output path. Can be absolute or relative to tasks.py. Default: 'output' | |||||
'deploy_path': SETTINGS['OUTPUT_PATH'], | |||||
# Host and port for `serve` | |||||
'host': 'localhost', | |||||
'port': 8000, | |||||
} | |||||
@task | |||||
def clean(c): | |||||
"""Remove generated files""" | |||||
if os.path.isdir(CONFIG['deploy_path']): | |||||
shutil.rmtree(CONFIG['deploy_path']) | |||||
os.makedirs(CONFIG['deploy_path']) | |||||
@task | |||||
def build(c): | |||||
"""Build local version of site""" | |||||
pelican_run('-s {settings_base}'.format(**CONFIG)) | |||||
@task | |||||
def rebuild(c): | |||||
"""`build` with the delete switch""" | |||||
pelican_run('-d -s {settings_base}'.format(**CONFIG)) | |||||
@task | |||||
def regenerate(c): | |||||
"""Automatically regenerate site upon file modification""" | |||||
pelican_run('-r -s {settings_base}'.format(**CONFIG)) | |||||
@task | |||||
def serve(c): | |||||
"""Serve site at http://$HOST:$PORT/ (default is localhost:8000)""" | |||||
class AddressReuseTCPServer(RootedHTTPServer): | |||||
allow_reuse_address = True | |||||
server = AddressReuseTCPServer( | |||||
CONFIG['deploy_path'], | |||||
(CONFIG['host'], CONFIG['port']), | |||||
ComplexHTTPRequestHandler) | |||||
sys.stderr.write('Serving at {host}:{port} ...\n'.format(**CONFIG)) | |||||
server.serve_forever() | |||||
@task | |||||
def reserve(c): | |||||
"""`build`, then `serve`""" | |||||
build(c) | |||||
serve(c) | |||||
@task | |||||
def preview(c): | |||||
"""Build production version of site""" | |||||
pelican_run('-s {settings_publish}'.format(**CONFIG)) | |||||
@task | |||||
def livereload(c): | |||||
"""Automatically reload browser tab upon file modification.""" | |||||
from livereload import Server | |||||
build(c) | |||||
server = Server() | |||||
# Watch the base settings file | |||||
server.watch(CONFIG['settings_base'], lambda: build(c)) | |||||
# Watch content source files | |||||
content_file_extensions = ['.md', '.rst'] | |||||
for extension in content_file_extensions: | |||||
content_blob = '{0}/**/*{1}'.format(SETTINGS['PATH'], extension) | |||||
server.watch(content_blob, lambda: build(c)) | |||||
# Watch the theme's templates and static assets | |||||
theme_path = SETTINGS['THEME'] | |||||
server.watch('{}/templates/*.html'.format(theme_path), lambda: build(c)) | |||||
static_file_extensions = ['.css', '.js'] | |||||
for extension in static_file_extensions: | |||||
static_file = '{0}/static/**/*{1}'.format(theme_path, extension) | |||||
server.watch(static_file, lambda: build(c)) | |||||
# Serve output path on configured host and port | |||||
server.serve(host=CONFIG['host'], port=CONFIG['port'], root=CONFIG['deploy_path']) | |||||
@task | |||||
def publish(c): | |||||
"""Publish to production via rsync""" | |||||
pelican_run('-s {settings_publish}'.format(**CONFIG)) | |||||
c.run( | |||||
'rsync --delete --exclude ".DS_Store" -pthrvz -c ' | |||||
'-e "ssh -p {ssh_port}" ' | |||||
'{} {ssh_user}@{ssh_host}:{ssh_path}'.format( | |||||
CONFIG['deploy_path'].rstrip('/') + '/', | |||||
**CONFIG)) | |||||
def pelican_run(cmd): | |||||
cmd += ' ' + program.core.remainder # allows to pass-through args to pelican | |||||
pelican_main(shlex.split(cmd)) |
@ -0,0 +1,381 @@ | |||||
# [5.3.0](https://github.com/Pelican-Elegant/elegant/compare/V5.2.1...V5.3.0) (2020-02-05) | |||||
### Bug Fixes | |||||
- **gallery:** change gallery grid to fit on smaller screens ([d4c1c50](https://github.com/Pelican-Elegant/elegant/commit/d4c1c506d24c61e18089d303ea88bb69db077135)) | |||||
- **gallery:** replace photoswipe-gallery with elegant-gallery ([17a05da](https://github.com/Pelican-Elegant/elegant/commit/17a05daec5d3aa077b96175e97ae5feda6884d9e)) | |||||
### Features | |||||
- **comments:** add support for CommentBox ([c56e61e](https://github.com/Pelican-Elegant/elegant/commit/c56e61eb60a84d4d65ca2e55e068b6f0f3a87ee1)) | |||||
## [5.2.1](https://github.com/Pelican-Elegant/elegant/compare/V5.2.0...V5.2.1) (2020-02-04) | |||||
### Bug Fixes | |||||
- **blockquote:** regression introduced in last version ([2aace21](https://github.com/Pelican-Elegant/elegant/commit/2aace21d633e11527a224c7201abad5fef811ce3)) | |||||
# [5.2.0](https://github.com/Pelican-Elegant/elegant/compare/V5.1.0...V5.2.0) (2020-02-03) | |||||
### Bug Fixes | |||||
- regression introduced due to cache busting ([b953a38](https://github.com/Pelican-Elegant/elegant/commit/b953a382d77e99884b82800d7392ceb8eae8d77d)) | |||||
- **archives:** at smaller screen layout does not make the best use of available space ([a289e9d](https://github.com/Pelican-Elegant/elegant/commit/a289e9db411b6abeb79a6028a3b0778070f6f553)) | |||||
- **syntax:** code blocks with line numbers do not have the correct border radius ([3a34a3e](https://github.com/Pelican-Elegant/elegant/commit/3a34a3e6b9741e44bc34d723627b0da162fdfa82)) | |||||
- **syntax:** improve the font size and height of download button ([07595b3](https://github.com/Pelican-Elegant/elegant/commit/07595b3dbd31feef16aee3e907d3c4fc34574e0d)) | |||||
- **typography:** fix font size and style of TOC ([2d597ab](https://github.com/Pelican-Elegant/elegant/commit/2d597abd095de8ce8ac72d8ae77b4914d9daeeed)), closes [#509](https://github.com/Pelican-Elegant/elegant/issues/509) | |||||
- Categories and Tags pages do not have space below the header ([d78f4e5](https://github.com/Pelican-Elegant/elegant/commit/d78f4e5add9ca7778967d4c5da02053187c3cbd4)) | |||||
- remove invalid CSS rule ([368cb2c](https://github.com/Pelican-Elegant/elegant/commit/368cb2cad4b00b40446e7ad1d5357228e48ec34c)) | |||||
- use consistent color for border ([c85b7b8](https://github.com/Pelican-Elegant/elegant/commit/c85b7b84d6ac64a73941ad73ba031fd2f4ddac0f)) | |||||
- use darker color for the site name ([19f37ca](https://github.com/Pelican-Elegant/elegant/commit/19f37caf937bd864aaf6b1532078936ad79edf1d)) | |||||
- **article:** use loclate_date attribute instead of hardcoding the date format ([1da552c](https://github.com/Pelican-Elegant/elegant/commit/1da552c94775766657f4ee9a0c05e7bcd7f1adf9)), closes [#552](https://github.com/Pelican-Elegant/elegant/issues/552) | |||||
- **bootstrap:** WIP. add Bootstrapv2.3.2 sources file to the project ([43ee8eb](https://github.com/Pelican-Elegant/elegant/commit/43ee8eb2ad6ba22bac6660bdb514857dadf9bcab)), closes [#429](https://github.com/Pelican-Elegant/elegant/issues/429) | |||||
- **seo:** regression introduced in PR [#556](https://github.com/Pelican-Elegant/elegant/issues/556) ([28bcb85](https://github.com/Pelican-Elegant/elegant/commit/28bcb8592cf595761d96904b004df3f425259849)), closes [#505](https://github.com/Pelican-Elegant/elegant/issues/505) | |||||
- **typography:** about me and my projects heading is not on one line ([6a7989c](https://github.com/Pelican-Elegant/elegant/commit/6a7989cc17f46a4ee1075dfe66b03d858956e7c7)) | |||||
- **typography:** font size of superscript number in categories and tags page ([d0a7162](https://github.com/Pelican-Elegant/elegant/commit/d0a71622bfe23e86478b7727e590dbf8e3a7b87f)) | |||||
- **typography:** override Bootstrap base font ([f6a83a6](https://github.com/Pelican-Elegant/elegant/commit/f6a83a6f31e24754e5001260336b89e9107e1053)), closes [#429](https://github.com/Pelican-Elegant/elegant/issues/429) | |||||
- **typography:** top menu bar does not have correct height ([d30ce82](https://github.com/Pelican-Elegant/elegant/commit/d30ce82aa8ba366555cbeee55ffb08e70110df0a)) | |||||
- **typography:** use consistent font and color for project list ([477a467](https://github.com/Pelican-Elegant/elegant/commit/477a467bd4bf69a86d71bceb3ac2385b43c57a8c)) | |||||
- **typography:** use consistent font in the footer ([eeb0e30](https://github.com/Pelican-Elegant/elegant/commit/eeb0e30be3664c86e7b37a151cf1992daa7fd46e)) | |||||
### Features | |||||
- add support cache busting ([cde0dc5](https://github.com/Pelican-Elegant/elegant/commit/cde0dc54c68412d8db43ea371e98e6d14e99b9d2)) | |||||
- **categories:** change background color of uncollapsed Category ([6cc11b8](https://github.com/Pelican-Elegant/elegant/commit/6cc11b8efe8a3c97ccfeddc244a5b84465fff1fb)) | |||||
- **gallery:** add support for PhotoSwipe image gallery using raw HTML ([ad1bcea](https://github.com/Pelican-Elegant/elegant/commit/ad1bcea67f5515c8c448e1c7009f3ba01965d574)), closes [#567](https://github.com/Pelican-Elegant/elegant/issues/567) | |||||
- **js:** combine and minify all JS files into one to improve load speed ([f5047d4](https://github.com/Pelican-Elegant/elegant/commit/f5047d4cbce02a187f1b04f11f026817ed1757d9)) | |||||
- **search:** improve search results page look ([73fa743](https://github.com/Pelican-Elegant/elegant/commit/73fa743723ebbf35b6cd0e0f51c9497634b1474c)), closes [#573](https://github.com/Pelican-Elegant/elegant/issues/573) [#275](https://github.com/Pelican-Elegant/elegant/issues/275) | |||||
- **search:** replace tipue_search with lunr.js ([9d60af1](https://github.com/Pelican-Elegant/elegant/commit/9d60af14c4065cee90289e48705714865dbbcb9e)), closes [#275](https://github.com/Pelican-Elegant/elegant/issues/275) | |||||
- **SEO:** Add header and documentation for Claiming Website on Yandex ([2bb691d](https://github.com/Pelican-Elegant/elegant/commit/2bb691d3bd02f9d586206814992306383640a84c)) | |||||
- **SEO:** add SEO and SMO meta keywords in site's home page ([c5be0eb](https://github.com/Pelican-Elegant/elegant/commit/c5be0eb7f9e98c9938ae96ca8eb9c48c7482993e)) | |||||
- **sharing:** Enable customizing the sharing links ([f3e262f](https://github.com/Pelican-Elegant/elegant/commit/f3e262f3dc6a2b1a4356014e524018603d899fb2)) | |||||
- **syntax:** add copy to clipboard button for every code snippet ([6f73317](https://github.com/Pelican-Elegant/elegant/commit/6f733179b80d8225af71bc5945be1fddd98b40ae)), closes [#574](https://github.com/Pelican-Elegant/elegant/issues/574) [#525](https://github.com/Pelican-Elegant/elegant/issues/525) | |||||
- **syntax:** add support for highlighting lines in code snippets ([ba2de8c](https://github.com/Pelican-Elegant/elegant/commit/ba2de8ccf971b1e77abe24960532f664e00ef9d9)), closes [#520](https://github.com/Pelican-Elegant/elegant/issues/520) | |||||
- **syntax:** add support for liquid_tags.include_code plugin ([0550a3a](https://github.com/Pelican-Elegant/elegant/commit/0550a3ab2fa5526a6db7e233f755cdfa36f9db38)), closes [#518](https://github.com/Pelican-Elegant/elegant/issues/518) | |||||
- **syntax:** use Gruvbox syntax highlighting theme ([0b50ab1](https://github.com/Pelican-Elegant/elegant/commit/0b50ab1565dd1fa700cea9e4c6cb963bd9591b9f)) | |||||
- **typography:** use consistent fonts ([8b7a8bd](https://github.com/Pelican-Elegant/elegant/commit/8b7a8bd3c828baf1dd3434b75a5bd050a4279495)), closes [#429](https://github.com/Pelican-Elegant/elegant/issues/429) | |||||
- **typography:** use consistent style for timestamps in tags, categories and archives pages ([a421dcd](https://github.com/Pelican-Elegant/elegant/commit/a421dcdbc42d87bcff2bfdeb3f3f19e5e6e8c3c2)) | |||||
- **typography:** use dns-prefetch and preconnect to improve font load time ([e4bd582](https://github.com/Pelican-Elegant/elegant/commit/e4bd582858df6925bbc5c0dff59e62b1cd8c5390)) | |||||
- **typography:** use responsive fonts ([39acdbf](https://github.com/Pelican-Elegant/elegant/commit/39acdbf4503ee9cdd7163672cba28c24b47d6647)) | |||||
# [5.1.0](https://github.com/Pelican-Elegant/elegant/compare/V5.0.1...V5.1.0) (2019-12-05) | |||||
### Bug Fixes | |||||
- **applause:** applause_button tag does not auto close ([d37e691](https://github.com/Pelican-Elegant/elegant/commit/d37e691e0592bded8dd42531ceacfa61147ad078)) | |||||
- **typography:** make headings align to the left instead of justify ([101285e](https://github.com/Pelican-Elegant/elegant/commit/101285e0884ea365e9e3272e6f914fe373fa27fb)) | |||||
### Features | |||||
- **applause:** add option to set applause_button_id ([8eda9a4](https://github.com/Pelican-Elegant/elegant/commit/8eda9a4cc7c588ff09a520e9f7fa183d1fb11031)) | |||||
- **applause:** add support for applause button ([e4872fd](https://github.com/Pelican-Elegant/elegant/commit/e4872fd558964c3007c516fc616314c88de49eef)), closes [#532](https://github.com/Pelican-Elegant/elegant/issues/532) | |||||
- **applause:** simplify filter option ([9f8b60f](https://github.com/Pelican-Elegant/elegant/commit/9f8b60fc3cbc08e7e21cef08f7e44658131677dd)) | |||||
## [5.0.1](https://github.com/Pelican-Elegant/elegant/compare/V5.0.0...V5.0.1) (2019-12-04) | |||||
### Bug Fixes | |||||
- **blockquote:** close quote is not aligned properly ([80a85c7](https://github.com/Pelican-Elegant/elegant/commit/80a85c714a16cd01c53831347ac1f18b397dda1a)) | |||||
- **typography:** remove unit from line height ([10286a1](https://github.com/Pelican-Elegant/elegant/commit/10286a13fade3248cc752a3ac5416257920d07bf)) | |||||
# [5.0.0](https://github.com/Pelican-Elegant/elegant/compare/V4.0.0...V5.0.0) (2019-12-02) | |||||
### Bug Fixes | |||||
- **css:** linter warning ([a5f5c81](https://github.com/Pelican-Elegant/elegant/commit/a5f5c8170a61683edf5737918b7fe3cae1b67c00)) | |||||
- **page:** social profiles appear in the sidebar ([c17077c](https://github.com/Pelican-Elegant/elegant/commit/c17077cbd24811bb91e48610ac13d76328e5398d)), closes [#534](https://github.com/Pelican-Elegant/elegant/issues/534) | |||||
- **social:** reduce icon size in the sidebar ([4e0dc41](https://github.com/Pelican-Elegant/elegant/commit/4e0dc415c114bb07304605c9b1c153e372f1fa4b)), closes [#490](https://github.com/Pelican-Elegant/elegant/issues/490) | |||||
- **typography:** adjust heading sizes and set small font-style to italic ([d3bbf04](https://github.com/Pelican-Elegant/elegant/commit/d3bbf04eabcd89bdb2f039b11fac7a6150729e90)) | |||||
- **typography:** remove border from headings in archive page ([817bea8](https://github.com/Pelican-Elegant/elegant/commit/817bea8d091e99b6d6e5fc3dcc63ba6f627c5b66)) | |||||
### Features | |||||
- **blockquote:** improve blockquote look ([068d50a](https://github.com/Pelican-Elegant/elegant/commit/068d50a455d57e4706525908b174bbc4606c6fb6)) | |||||
- **border:** change border radius of tags and code blocks to match rest of the theme ([5d0285f](https://github.com/Pelican-Elegant/elegant/commit/5d0285f156a5da734b438868674c632b897625ef)), closes [#521](https://github.com/Pelican-Elegant/elegant/issues/521) | |||||
- **border:** have consistent border radius ([7307467](https://github.com/Pelican-Elegant/elegant/commit/7307467579d4ab1931987e48b83224eb666e9e5e)), closes [#521](https://github.com/Pelican-Elegant/elegant/issues/521) | |||||
- **code-block:** minor refine code-block style ([2ba2232](https://github.com/Pelican-Elegant/elegant/commit/2ba22321b35961ebc18dbb2c25f1db535fad64ed)) | |||||
- **css:** use PostCSS for processing CSS files ([2b88865](https://github.com/Pelican-Elegant/elegant/commit/2b88865a36780257ac42173b949b5d7b4df516e9)), closes [#354](https://github.com/Pelican-Elegant/elegant/issues/354) | |||||
- **links:** add new style and improve existing style for hyperlinks ([87fd3d3](https://github.com/Pelican-Elegant/elegant/commit/87fd3d3f88cebac83ca04460ef41e7356df0ccd2)), closes [#533](https://github.com/Pelican-Elegant/elegant/issues/533) [#519](https://github.com/Pelican-Elegant/elegant/issues/519) | |||||
- **permalink:** improve permalink look ([8059ca8](https://github.com/Pelican-Elegant/elegant/commit/8059ca84b77ab82bffd1ed80f010235f9ca57ed6)) | |||||
- **security:** use rel="noopener noreferrer" with all target="\_blank" ([4c843e9](https://github.com/Pelican-Elegant/elegant/commit/4c843e9a0c66bb2656ef5df4411d4c891c493a11)) <!-- yaspeller ignore --> | |||||
- **typography:** code inside heading is consistently 80% of the size ([7180b49](https://github.com/Pelican-Elegant/elegant/commit/7180b49ebb659d00a82f10769269e6236057e42c)), closes [#508](https://github.com/Pelican-Elegant/elegant/issues/508) | |||||
- **typography:** headings sizes and other properties are consistent ([afa99ab](https://github.com/Pelican-Elegant/elegant/commit/afa99ab89baf715a68627552152b7163ea0534b9)), closes [#508](https://github.com/Pelican-Elegant/elegant/issues/508) [#521](https://github.com/Pelican-Elegant/elegant/issues/521) | |||||
- **typography:** use darker color for article heading and increase border size ([1922075](https://github.com/Pelican-Elegant/elegant/commit/19220758aabf431ae3566b950436fe04a3ee21a8)) | |||||
### BREAKING CHANGES | |||||
- **links:** Style of muted links have been changed slightly. It is | |||||
still muted but has modern animation. | |||||
# [4.0.0](https://github.com/Pelican-Elegant/elegant/compare/V3.2.0...V4.0.0) (2019-08-22) | |||||
### Bug Fixes | |||||
- **admonition:** an artifact in border behind the title ([88113c3](https://github.com/Pelican-Elegant/elegant/commit/88113c3)) | |||||
- **admonition:** reduce border radius to match radii of other components ([de08d20](https://github.com/Pelican-Elegant/elegant/commit/de08d20)), closes [#490](https://github.com/Pelican-Elegant/elegant/issues/490) | |||||
- **admonition:** remove box shadow ([d059db8](https://github.com/Pelican-Elegant/elegant/commit/d059db8)), closes [#490](https://github.com/Pelican-Elegant/elegant/issues/490) | |||||
- **admonition:** remove text-shadow from heading ([1c889da](https://github.com/Pelican-Elegant/elegant/commit/1c889da)), closes [#490](https://github.com/Pelican-Elegant/elegant/issues/490) | |||||
- **clean URL:** default URL of categories, tags and archives fails on some servers ([3c7df6a](https://github.com/Pelican-Elegant/elegant/commit/3c7df6a)), closes [#280](https://github.com/Pelican-Elegant/elegant/issues/280) [#276](https://github.com/Pelican-Elegant/elegant/issues/276) | |||||
- **comments:** W3C validation errors ([76a1f26](https://github.com/Pelican-Elegant/elegant/commit/76a1f26)) | |||||
- **disqus:** remove SITEURL condition to show Disqus comments section ([753d5a5](https://github.com/Pelican-Elegant/elegant/commit/753d5a5)) | |||||
- **lang:** do not override default value of DEFAULT_LANG set by Pelican ([d6c60c2](https://github.com/Pelican-Elegant/elegant/commit/d6c60c2)) <!-- yaspeller ignore --> | |||||
- **social:** reduce icon sizes in the sidebar ([c769ba3](https://github.com/Pelican-Elegant/elegant/commit/c769ba3)) | |||||
- **social:** use nofollow for social links in the sidebar ([50cff87](https://github.com/Pelican-Elegant/elegant/commit/50cff87)) | |||||
- **social:** W3C validation error ([ec4521e](https://github.com/Pelican-Elegant/elegant/commit/ec4521e)) | |||||
- **table:** reduce border radius to match radii of other components ([7eaaa96](https://github.com/Pelican-Elegant/elegant/commit/7eaaa96)) | |||||
- **w3c validation:** remove incorrect usage of article tag ([e8231e0](https://github.com/Pelican-Elegant/elegant/commit/e8231e0)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
- **w3c validation:** remove obsolete charset attribute ([8deb285](https://github.com/Pelican-Elegant/elegant/commit/8deb285)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
- **w3c validation:** remove redundant article tag ([d07c27e](https://github.com/Pelican-Elegant/elegant/commit/d07c27e)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
- **w3c validation:** remove redundant sections without heading ([df9221f](https://github.com/Pelican-Elegant/elegant/commit/df9221f)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
- **w3c validation:** remove type and language attributes ([b700224](https://github.com/Pelican-Elegant/elegant/commit/b700224)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
- **w3c validation:** update CSS rules ([0b78d46](https://github.com/Pelican-Elegant/elegant/commit/0b78d46)), closes [#251](https://github.com/Pelican-Elegant/elegant/issues/251) | |||||
### Features | |||||
- **404:** auto fill search box with URL fragment that was not found ([c0a7f47](https://github.com/Pelican-Elegant/elegant/commit/c0a7f47)) | |||||
- **admonition:** add box shadow ([246f826](https://github.com/Pelican-Elegant/elegant/commit/246f826)) | |||||
- **admonition:** border color should match the title color ([1adadbe](https://github.com/Pelican-Elegant/elegant/commit/1adadbe)) | |||||
- **admonition:** increase contrast of title ([7fb82cc](https://github.com/Pelican-Elegant/elegant/commit/7fb82cc)) | |||||
- **admonition:** use svg image instead of font-awesome icon ([e7c4029](https://github.com/Pelican-Elegant/elegant/commit/e7c4029)), closes [#487](https://github.com/Pelican-Elegant/elegant/issues/487) <!-- yaspeller ignore --> | |||||
- **clean url:** support clean URL for search page ([088791e](https://github.com/Pelican-Elegant/elegant/commit/088791e)) | |||||
- **comments:** add support for utterances comment system ([a2151cc](https://github.com/Pelican-Elegant/elegant/commit/a2151cc)), closes [#288](https://github.com/Pelican-Elegant/elegant/issues/288) | |||||
- **quotes:** improve style and remove font-awesome for quote icon ([9ef3ac8](https://github.com/Pelican-Elegant/elegant/commit/9ef3ac8)), closes [#487](https://github.com/Pelican-Elegant/elegant/issues/487) | |||||
- **social:** add icons for 7 more websites ([8dcf8fa](https://github.com/Pelican-Elegant/elegant/commit/8dcf8fa)), closes [#494](https://github.com/Pelican-Elegant/elegant/issues/494) | |||||
- **social:** use svg icons instead of font-awesome ([19f458b](https://github.com/Pelican-Elegant/elegant/commit/19f458b)) <!-- yaspeller ignore --> | |||||
- **table:** add style rule to make tables pop out ([6a8500b](https://github.com/Pelican-Elegant/elegant/commit/6a8500b)), closes [#440](https://github.com/Pelican-Elegant/elegant/issues/440) | |||||
### Performance Improvements | |||||
- **admonition:** add attributes to svg images ([a740a60](https://github.com/Pelican-Elegant/elegant/commit/a740a60)) <!-- yaspeller ignore --> | |||||
- **requests:** remove font awesome ([7c20145](https://github.com/Pelican-Elegant/elegant/commit/7c20145)), closes [#487](https://github.com/Pelican-Elegant/elegant/issues/487) | |||||
### BREAKING CHANGES | |||||
- **requests:** We have removed font awesome. Now we use svg images for all icons. This will result in one less web request, which in turn will improve your websites performance. <!-- yaspeller ignore --> | |||||
- **social:** Style customization and configuration of social icons | |||||
in the sidebar has changed. | |||||
New icons have better colors and bigger sizes. | |||||
- **clean URL:** To enable clean URLs for tags, categories and archives, | |||||
first configure your server to support clean URLs. Then set `TAGS_URL`, | |||||
`CATEGORIES_URL` and `ARCHIVES_URL` to `"tags"`, `"categories"` and | |||||
`"archives"` respectively. | |||||
# [3.2.0](https://github.com/Pelican-Elegant/elegant/compare/V3.1.0...V3.2.0) (2019-07-30) | |||||
### Bug Fixes | |||||
- **freelists:** open FreeLists subscription form in a new tab ([f81657c](https://github.com/Pelican-Elegant/elegant/commit/f81657c)) <!-- yaspeller ignore --> | |||||
- **freelists:** replace deprecated subscription form with button ([9bfe3c1](https://github.com/Pelican-Elegant/elegant/commit/9bfe3c1)), closes [#412](https://github.com/Pelican-Elegant/elegant/issues/412) | |||||
- **freelists:** remove unused include ([27f0831](https://github.com/Pelican-Elegant/elegant/commit/27f0831)) | |||||
### Features | |||||
- **comments:** reduce transition duration from 500 to 200 ([b86e13d](https://github.com/Pelican-Elegant/elegant/commit/b86e13d)) | |||||
- **favicon:** add 180x180 dimension shortcut icon support ([dd2ed24](https://github.com/Pelican-Elegant/elegant/commit/dd2ed24)) | |||||
- **filter:** add black list, white list feature for Disqus ([4887aec](https://github.com/Pelican-Elegant/elegant/commit/4887aec)) | |||||
- **filter:** add black list, white list feature for FreeLists ([2407cc8](https://github.com/Pelican-Elegant/elegant/commit/2407cc8)) | |||||
- **filter:** add black list, white list feature for Mailchimp ([b96122d](https://github.com/Pelican-Elegant/elegant/commit/b96122d)) | |||||
# [3.1.0](https://github.com/Pelican-Elegant/elegant/compare/V3.0.0...V3.1.0) (2019-07-14) | |||||
### Bug Fixes | |||||
- **article:** fix regression introduced in 7ca7331c0 ([2c23961](https://github.com/Pelican-Elegant/elegant/commit/2c23961)) | |||||
- **authors:** title attribute was not closed in quotes ([de1d05b](https://github.com/Pelican-Elegant/elegant/commit/de1d05b)) | |||||
- **gist:** embedded Github gist are not laid out correctly ([0416433](https://github.com/Pelican-Elegant/elegant/commit/0416433)), closes [#123](https://github.com/Pelican-Elegant/elegant/issues/123) | |||||
- **reST:** indents in line blocks is not preserved ([e1429c5](https://github.com/Pelican-Elegant/elegant/commit/e1429c5)), closes [#144](https://github.com/Pelican-Elegant/elegant/issues/144) | |||||
### Features | |||||
- **article:** make article subtitle italic ([7ca7331](https://github.com/Pelican-Elegant/elegant/commit/7ca7331)), closes [#284](https://github.com/Pelican-Elegant/elegant/issues/284) | |||||
- **authors:** add line above authors section ([35a35b0](https://github.com/Pelican-Elegant/elegant/commit/35a35b0)) | |||||
- **authors:** add support for avatar ([cc92230](https://github.com/Pelican-Elegant/elegant/commit/cc92230)), closes [#362](https://github.com/Pelican-Elegant/elegant/issues/362) | |||||
- **authors:** make authors URL nofollow ([07bf415](https://github.com/Pelican-Elegant/elegant/commit/07bf415)) | |||||
- **authors:** move authors below share links section ([b81555a](https://github.com/Pelican-Elegant/elegant/commit/b81555a)) | |||||
- **authors:** open author url in a new window ([f97b47a](https://github.com/Pelican-Elegant/elegant/commit/f97b47a)) | |||||
- **Chinese:** add better font support for Chinese language ([2711aa0](https://github.com/Pelican-Elegant/elegant/commit/2711aa0)), closes [#134](https://github.com/Pelican-Elegant/elegant/issues/134) | |||||
- **modified:** show Last Updated only if the difference between created and modified is more than a day ([b0eac79](https://github.com/Pelican-Elegant/elegant/commit/b0eac79)) | |||||
- **monetization:** add BestAzon support ([6d8a23c](https://github.com/Pelican-Elegant/elegant/commit/6d8a23c)) | |||||
# [3.0.0](https://github.com/Pelican-Elegant/elegant/compare/V2.5.0...V3.0.0) (2019-07-03) | |||||
### Bug Fixes | |||||
- **admonition:** links should inherit the admonition color ([60c9184](https://github.com/Pelican-Elegant/elegant/commit/60c9184)) | |||||
- **freelists:** use SUBSCRIBE_BUTTON_TITLE instead of generic GO ([c346d1f](https://github.com/Pelican-Elegant/elegant/commit/c346d1f)) | |||||
- **home:** remove redundant title ([808cd1d](https://github.com/Pelican-Elegant/elegant/commit/808cd1d)) | |||||
### Features | |||||
- **home:** write about me in markdown, reST or AsciiDoc ([9b5b2ec](https://github.com/Pelican-Elegant/elegant/commit/9b5b2ec)), closes [#85](https://github.com/Pelican-Elegant/elegant/issues/85) | |||||
- **menu:** set home URL to root if SITEURL is not ([23e0b94](https://github.com/Pelican-Elegant/elegant/commit/23e0b94)) | |||||
### BREAKING CHANGES | |||||
- **home:** Previously LANDING_PAGE_ABOUT was a dictionary that contained html tags. We used it | |||||
to create landing page. But users have demanded from the very beginning to be able to write the | |||||
landing page in markdown. This patch adds this feature. But in order to use it, you have to update | |||||
your configuration. | |||||
# [2.5.0](https://github.com/Pelican-Elegant/elegant/compare/V2.4.0...V2.5.0) (2019-06-30) | |||||
### Features | |||||
- **comments:** replace disqus_identifier with comment_id ([3aa4e24](https://github.com/Pelican-Elegant/elegant/commit/3aa4e24)) | |||||
# [2.4.0](https://github.com/Pelican-Elegant/elegant/compare/V2.3.0...V2.4.0) (2019-06-30) | |||||
### Features | |||||
- **footer:** make external links Nofollow ([137a02a](https://github.com/Pelican-Elegant/elegant/commit/137a02a)) | |||||
- **footer:** move site subtitle to the center ([b5baa11](https://github.com/Pelican-Elegant/elegant/commit/b5baa11)) | |||||
- **footer:** open exit links in new tab ([8fd9f28](https://github.com/Pelican-Elegant/elegant/commit/8fd9f28)) | |||||
- **footer:** optionally show the host information ([9de2dab](https://github.com/Pelican-Elegant/elegant/commit/9de2dab)) | |||||
- **footer:** powered by message is always aligned to the right ([5e47b7c](https://github.com/Pelican-Elegant/elegant/commit/5e47b7c)) | |||||
- **footer:** remove fixed height by using flexbox for sticky footer ([d9d84e1](https://github.com/Pelican-Elegant/elegant/commit/d9d84e1)) <!-- yaspeller ignore --> | |||||
- **footer:** use flexbox instead of list for items in the footer ([bef7db9](https://github.com/Pelican-Elegant/elegant/commit/bef7db9)) <!-- yaspeller ignore --> | |||||
- **onelink:** add Amazon Affiliate Disclosure ([cbfa6ac](https://github.com/Pelican-Elegant/elegant/commit/cbfa6ac)) | |||||
# Version 2.3.0 | |||||
## Project Management | |||||
- Documentation is hosted at https://elegant.oncrashreboot.com/ | |||||
- Host and build documentation using Netlify | |||||
- `elegant.oncrashreboot.com` domain is the final home of documentation. It shall never change | |||||
- Delete github pages and related repositories | |||||
## Features | |||||
- New: FontAwesome updated to version 4.7.0 <!-- yaspeller ignore --> | |||||
- New: `Photos` plugin support for photo gallery creation | |||||
- New: Lightbox support for `Photos` plugin | |||||
- Fixed: Amazon One Link div is in the header | |||||
- Fixed: Separated claims for Google and Bing into individual includes | |||||
## Documentation | |||||
- New: Help article on claim Google and Bing | |||||
## CI | |||||
- New: Enable deploy previews for every pull request | |||||
- New: Add spell check for every pull request, and `master` and `next` branches | |||||
- New: Add git hooks to format the code | |||||
- New: Add commit Zen support | |||||
- New: Add html5validator, which along with w3c_validator, makes for two html validation tools in the CI | |||||
- New: Improve CI build times | |||||
- Remove: peru for downloading plugins and themes | |||||
- New: Add pull request template | |||||
# Version 2.2 | |||||
- New: TipueSearch updated to 7.1 | |||||
- New: Use `PROJECTS_TITLE` to customize project list title. (default My Projects) | |||||
- Changed: Reading Time is displayed only if it is greater than `READING_TIME_LOWER_LIMIT` variable (default 4 min) | |||||
- Changed: Project documentation has been moved inside the Elegant repository | |||||
- Removed: Google Plus author | |||||
# Version 2.0 | |||||
- Link to your social profiles | |||||
- Upgraded to Twitter Bootstrap 2.3.2 | |||||
- Upgraded to Tipue Search 3.1 | |||||
- Support for `custom.css` | |||||
- [Stat Counter Analytics ](http://statcounter.com/) support | |||||
- Google Universal Analytics support | |||||
- Support for custom icons for social profiles | |||||
- Support for Pelican (>3.3) new metadata `modified` | |||||
- Support for Social Media Tags | |||||
- Support for Google Authorship | |||||
- Translations support | |||||
- `article.comments_intro` that overrides `COMMENTS_INTRO`. Now you can define | |||||
article specific comments introduction | |||||
- Add Disqus comments to Pages | |||||
- All customizable variables consolidated in a single `_defaults.html`, making | |||||
it easier for you to customize or even _localize_ the theme | |||||
- Adds author blurbs at the end of the article | |||||
## Performance | |||||
- Performance improvement- 4x faster output | |||||
- Reduce number of HTTP requests using `assets` plugin | |||||
- Shortcut icons, like favicon, are disabled by default. Set | |||||
`USE_SHORTCUT_ICONS` to true to enable it | |||||
## Visual Style | |||||
- Email newsletter subscriber form style matches rest of the theme | |||||
- Article images have a visible border | |||||
- Block quotes have a quote icon instead of a thick line on left | |||||
- Article's paragraph font size is bigger, for better readability | |||||
- Remove unnecessary padding in sidebar's tag list | |||||
- Archives page and recent posts on home page have better presentation | |||||
- Time stamps in categories and tags pages are justified | |||||
- Line number in code block is hidden on tablets and phones to save space for | |||||
content | |||||
- More sizes of image for Apple Touch icons | |||||
- Fixed: Nested lists have different font sizes | |||||
- Fixed: CSS style rules for literal block in reST is missing | |||||
- Fixed: Long lines in code block will wrap to next line | |||||
- Fixed: Code block will not play nice with line numbers | |||||
- Fixed: Subscribe button changes its size on smaller screens | |||||
- Fixed: Articles under tag heading on tags page are not sorted | |||||
- Fixed: URL scheme for blogs which are not published to the root folder | |||||
- Fixed: Footer is always under the fold even on smaller length web pages | |||||
- Fixed: Site Name and top navigation menu move to left on wide displays | |||||
- Fixed: Page link is not active in the navbar if `SAVE_PAGE_AS` is not set to | |||||
default | |||||
## Plugins | |||||
- Use `neighbor` plugin to show next and previous articles | |||||
- Use `assets` plugin to minify CSS and JS files | |||||
- Support for `share_post` plugin | |||||
- Support for `related_posts` plugin | |||||
- Support for `multi_part` plugin | |||||
- Support for `post_stats` plugin | |||||
## Behaviour | |||||
- Search results link open in the same window, which is consistent with | |||||
internet search engines | |||||
- Comments section message changes when user toggles it | |||||
- Fixed: Clicking Search button in 404.html does not trigger search | |||||
# Version 1.3 | |||||
- Next and previous article navigation is placed below comments section so that article's content and comments appear together | |||||
- Article title and site name in `<title>` tag is separated by `·` which is cleaner and more subtle than `-` | |||||
- Subtitle of articles and pages is added in `<title>` tag along with main title | |||||
- Description metadata tag on Home Page uses `SITE_DESCRIPTION` | |||||
- Bug fix: Expand comments section if URL points to a comment | |||||
- Bug fix: CSS style of links in an unordered list inside article content is different from article links | |||||
# Version 1.2 | |||||
- RSS and Atom feed links | |||||
- CSS style for permanent links added. It is visible only user hovers over the heading | |||||
- Block quote is indented towards left | |||||
- Bug fix: Hyperlink dashed underline is not visible on Chrome | |||||
- Bug fix: Text in list goes beyond list marker when text is long and overflows to next line | |||||
- Bug fix: Disqus comment count is always 0 | |||||
# Version 1.1 | |||||
- Add template for pages. Pages do not have tags, category and Disqus comments | |||||
- Keep style of a hyperlink in `modified` metadata consisted with the theme | |||||
- Add `keywords` metadata tag that uses keywords, tags and category attribute of articles and pages | |||||
- Validate search form for empty strings | |||||
- If `RECENT_ARTICLES_COUNT` is undefined, set it to 10. So that Pelican does not throw critical error | |||||
- Bug fix: Path of search.html in search form action should always be absolute | |||||
- Bug fix: Copyright metadata tag should be set to the author, instead of the license | |||||
- Bug fix: Close metadata tags | |||||
- Bug fix: ID of search form in 404 page should be different from the ID of search form in main navigation | |||||
- Bug fix: Links in ordered list in an article do not conform to the link style in rest of the article | |||||
# Version 1.0 | |||||
- Initial release |
@ -1,45 +1,7 @@ | |||||
Where do I start? | |||||
================= | |||||
# Contributions | |||||
See issues tagged with [Pull Request | |||||
Welcomed](https://github.com/talha131/pelican-elegant/issues?labels=Pull+Request+Welcomed). | |||||
I, @talha131, do not plan to work on these issues. You are more than welcome to | |||||
pick them up. | |||||
We welcome contributions to the Elegant project! | |||||
New Features and Styles | |||||
======================= | |||||
If you are considering contributing, [please read this](https://elegant.oncrashreboot.com/invitation-to-participate.html). | |||||
If you plan to add new features to the theme, please make sure | |||||
1. You set sensible defaults so that theme works out of the box, without | |||||
forcing user to set any variable | |||||
2. Your feature should not effect readability and reading experience | |||||
3. It should not be distracting for the reader | |||||
Follow the code style of the existing codebase | |||||
============================================== | |||||
1. Use single ('') rather than double ("") quotation marks for Jinja strings | |||||
1. In Jinja print statements, surround the variable with spaces inside curly | |||||
braces, for example `{{ foo.bar }}` | |||||
1. Use double ("") quotation marks around HTML attributes | |||||
1. End files with a newline | |||||
CSS Formatting Rules | |||||
-------------------- | |||||
1. Font name's first letter should be capital | |||||
2. Add a space after comma | |||||
3. Declarations should be sorted alphabetically | |||||
4. Use a single space between the last selector and the opening brace that | |||||
begins the declaration block | |||||
5. Group together related classes and identities | |||||
6. Add a space after colon | |||||
7. Remove leading 0s | |||||
8. Remove unit specification after 0 values | |||||
9. Use three digit Hex notation for colors whereever possible | |||||
10. User hyphen `-` instead of underscore `_` in class and identity names | |||||
Refer to [Google's HTML/CSS Style | |||||
Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) for | |||||
all other formatting rules. | |||||
If you have a patch ready for pull request, [please read this before contributing](https://elegant.oncrashreboot.com/how-to-contribute.html). |
@ -0,0 +1,21 @@ | |||||
MIT License | |||||
Copyright (c) 2012 Contributors to Pelican-Elegant Project | |||||
Permission is hereby granted, free of charge, to any person obtaining a copy | |||||
of this software and associated documentation files (the "Software"), to deal | |||||
in the Software without restriction, including without limitation the rights | |||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||||
copies of the Software, and to permit persons to whom the Software is | |||||
furnished to do so, subject to the following conditions: | |||||
The above copyright notice and this permission notice shall be included in all | |||||
copies or substantial portions of the Software. | |||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |||||
SOFTWARE. |
@ -0,0 +1,128 @@ | |||||
# Contributor Covenant Code of Conduct | |||||
## Our Pledge | |||||
We as members, contributors, and leaders pledge to make participation in our | |||||
community a harassment-free experience for everyone, regardless of age, body | |||||
size, visible or invisible disability, ethnicity, sex characteristics, gender | |||||
identity and expression, level of experience, education, socio-economic status, | |||||
nationality, personal appearance, race, religion, or sexual identity | |||||
and orientation. | |||||
We pledge to act and interact in ways that contribute to an open, welcoming, | |||||
diverse, inclusive, and healthy community. | |||||
## Our Standards | |||||
Examples of behavior that contributes to a positive environment for our | |||||
community include: | |||||
- Demonstrating empathy and kindness toward other people | |||||
- Being respectful of differing opinions, viewpoints, and experiences | |||||
- Giving and gracefully accepting constructive feedback | |||||
- Accepting responsibility and apologizing to those affected by our mistakes, | |||||
and learning from the experience | |||||
- Focusing on what is best not just for us as individuals, but for the | |||||
overall community | |||||
Examples of unacceptable behavior include: | |||||
- The use of sexualized language or imagery, and sexual attention or | |||||
advances of any kind | |||||
- Trolling, insulting or derogatory comments, and personal or political attacks | |||||
- Public or private harassment | |||||
- Publishing others' private information, such as a physical or email | |||||
address, without their explicit permission | |||||
- Other conduct which could reasonably be considered inappropriate in a | |||||
professional setting | |||||
## Enforcement Responsibilities | |||||
Community leaders are responsible for clarifying and enforcing our standards of | |||||
acceptable behavior and will take appropriate and fair corrective action in | |||||
response to any behavior that they deem inappropriate, threatening, offensive, | |||||
or harmful. | |||||
Community leaders have the right and responsibility to remove, edit, or reject | |||||
comments, commits, code, wiki edits, issues, and other contributions that are | |||||
not aligned to this Code of Conduct, and will communicate reasons for moderation | |||||
decisions when appropriate. | |||||
## Scope | |||||
This Code of Conduct applies within all community spaces, and also applies when | |||||
an individual is officially representing the community in public spaces. | |||||
Examples of representing our community include using an official e-mail address, | |||||
posting via an official social media account, or acting as an appointed | |||||
representative at an online or offline event. | |||||
## Enforcement | |||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be | |||||
reported to the community leaders responsible for enforcement at | |||||
[INSERT CONTACT METHOD]. | |||||
All complaints will be reviewed and investigated promptly and fairly. | |||||
All community leaders are obligated to respect the privacy and security of the | |||||
reporter of any incident. | |||||
## Enforcement Guidelines | |||||
Community leaders will follow these Community Impact Guidelines in determining | |||||
the consequences for any action they deem in violation of this Code of Conduct: | |||||
### 1. Correction | |||||
**Community Impact**: Use of inappropriate language or other behavior deemed | |||||
unprofessional or unwelcome in the community. | |||||
**Consequence**: A private, written warning from community leaders, providing | |||||
clarity around the nature of the violation and an explanation of why the | |||||
behavior was inappropriate. A public apology may be requested. | |||||
### 2. Warning | |||||
**Community Impact**: A violation through a single incident or series | |||||
of actions. | |||||
**Consequence**: A warning with consequences for continued behavior. No | |||||
interaction with the people involved, including unsolicited interaction with | |||||
those enforcing the Code of Conduct, for a specified period of time. This | |||||
includes avoiding interactions in community spaces as well as external channels | |||||
like social media. Violating these terms may lead to a temporary or | |||||
permanent ban. | |||||
### 3. Temporary Ban | |||||
**Community Impact**: A serious violation of community standards, including | |||||
sustained inappropriate behavior. | |||||
**Consequence**: A temporary ban from any sort of interaction or public | |||||
communication with the community for a specified period of time. No public or | |||||
private interaction with the people involved, including unsolicited interaction | |||||
with those enforcing the Code of Conduct, is allowed during this period. | |||||
Violating these terms may lead to a permanent ban. | |||||
### 4. Permanent Ban | |||||
**Community Impact**: Demonstrating a pattern of violation of community | |||||
standards, including sustained inappropriate behavior, harassment of an | |||||
individual, or aggression toward or disparagement of classes of individuals. | |||||
**Consequence**: A permanent ban from any sort of public interaction within | |||||
the community. | |||||
## Attribution | |||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], | |||||
version 2.0, available at | |||||
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. | |||||
Community Impact Guidelines were inspired by [Mozilla's code of conduct | |||||
enforcement ladder](https://github.com/mozilla/diversity). | |||||
[homepage]: https://www.contributor-covenant.org | |||||
For answers to common questions about this code of conduct, see the FAQ at | |||||
https://www.contributor-covenant.org/faq. Translations are available at | |||||
https://www.contributor-covenant.org/translations. |
@ -0,0 +1,158 @@ | |||||
import fs from "fs"; | |||||
import path from "path"; | |||||
import { src, dest, watch, parallel, series } from "gulp"; | |||||
import { exec } from "child_process"; | |||||
import { create as browserSyncCreate } from "browser-sync"; | |||||
import run from "gulp-run-command"; | |||||
import postcss from "gulp-postcss"; | |||||
import magician from "postcss-font-magician"; | |||||
import cssnano from "cssnano"; | |||||
import postcssPresetEnv from "postcss-preset-env"; | |||||
import rfs from "rfs"; | |||||
import concat from "gulp-concat"; | |||||
import terser from "gulp-terser"; | |||||
const browserSync = browserSyncCreate(); | |||||
const path404 = path.join(__dirname, "documentation/output/404.html"); | |||||
const content_404 = () => | |||||
fs.existsSync(path404) ? fs.readFileSync(path404) : null; | |||||
const cleanOutput = () => exec("cd documentation && rm -rf outout/"); | |||||
const buildContent = () => exec("cd documentation && invoke build"); | |||||
const compileBootstrapLess = () => | |||||
exec( | |||||
"node_modules/recess/bin/recess --compile static/bootstrap/bootstrap.less > static/css/bootstrap.css" | |||||
); | |||||
const compileResponsiveLess = () => | |||||
exec( | |||||
"node_modules/recess/bin/recess --compile static/bootstrap/responsive.less > static/css/bootstrap_responsive.css" | |||||
); | |||||
const reload = cb => { | |||||
browserSync.init( | |||||
{ | |||||
ui: { | |||||
port: 9002 | |||||
}, | |||||
server: { | |||||
baseDir: "documentation/output", | |||||
serveStaticOptions: { | |||||
extensions: ["html"] | |||||
} | |||||
}, | |||||
files: "documentation/output/*.html", | |||||
port: 9001 | |||||
}, | |||||
(_, bs) => { | |||||
bs.addMiddleware("*", (_, res) => { | |||||
res.write(content_404()); | |||||
res.end(); | |||||
}); | |||||
} | |||||
); | |||||
cb(); | |||||
}; | |||||
const watchFiles = () => { | |||||
watch( | |||||
[ | |||||
"documentation/content/**/*.md", | |||||
"documentation/content/**/*.rest", | |||||
"documentation/pelicanconf.py", | |||||
"documentation/publishconf.py", | |||||
"templates/**/*.html", | |||||
"static/**/*.css", | |||||
"static/**/*.less", | |||||
"static/**/*.js", | |||||
"!static/**/bootstrap.css", | |||||
"!static/**/bootstrap_responsive.css", | |||||
"!static/**/elegant.prod.9e9d5ce754.css", | |||||
"!static/js/elegant.prod.9e9d5ce754.js" | |||||
], | |||||
{ ignoreInitial: false }, | |||||
buildAll | |||||
); | |||||
}; | |||||
const pathProdCSS = path.join( | |||||
__dirname, | |||||
"static/css/elegant.prod.9e9d5ce754.css" | |||||
); | |||||
const rmProdCSS = cb => { | |||||
if (fs.existsSync(pathProdCSS)) { | |||||
fs.unlinkSync(pathProdCSS); | |||||
} | |||||
cb(); | |||||
}; | |||||
const minifyJS = () => { | |||||
return src([ | |||||
"static/applause-button/applause-button.js", | |||||
"static/photoswipe/photoswipe.js", | |||||
"static/photoswipe/photoswipe-ui-default.js", | |||||
"static/photoswipe/photoswipe-array-from-dom.js", | |||||
"static/lunr/lunr.js", | |||||
"static/clipboard/clipboard.js", | |||||
"static/js/copy-to-clipboard.js", | |||||
"static/js/lunr-search-result.js", | |||||
"!static/js/elegant.prod.9e9d5ce754.js" | |||||
]) | |||||
.pipe(concat("elegant.prod.9e9d5ce754.js")) | |||||
.pipe(terser()) | |||||
.pipe(dest("static/js/")); | |||||
}; | |||||
const compileCSS = () => { | |||||
const plugins = [ | |||||
// postcssPresetEnv comes with autoprefixer | |||||
postcssPresetEnv({ stage: 1 }), | |||||
magician({}), | |||||
rfs(), | |||||
cssnano() | |||||
]; | |||||
return src([ | |||||
"static/applause-button/applause-button.css", | |||||
"static/photoswipe/photoswipe.css", | |||||
"static/photoswipe/default-skin/default-skin.css", | |||||
"static/css/*.css", | |||||
"!static/css/elegant.prod.9e9d5ce754.css" | |||||
]) | |||||
.pipe(postcss(plugins)) | |||||
.pipe(concat("elegant.prod.9e9d5ce754.css")) | |||||
.pipe(dest("static/css/")); | |||||
}; | |||||
const buildAll = series( | |||||
rmProdCSS, | |||||
compileBootstrapLess, | |||||
compileResponsiveLess, | |||||
compileCSS, | |||||
minifyJS, | |||||
buildContent | |||||
); | |||||
exports.validate = run("jinja-ninja templates"); | |||||
exports.js = minifyJS; | |||||
exports.css = series( | |||||
rmProdCSS, | |||||
compileBootstrapLess, | |||||
compileResponsiveLess, | |||||
compileCSS | |||||
); | |||||
const build = series( | |||||
compileBootstrapLess, | |||||
compileResponsiveLess, | |||||
compileCSS, | |||||
minifyJS, | |||||
cleanOutput, | |||||
buildContent | |||||
); | |||||
exports.build = build; | |||||
const elegant = series(build, parallel(watchFiles, reload)); | |||||
exports.elegant = elegant; | |||||
exports.default = elegant; |
@ -0,0 +1,4 @@ | |||||
[build] | |||||
base = "./documentation" | |||||
publish = "./documentation/output" | |||||
command = "invoke plugins-sync publish" |
@ -0,0 +1,38 @@ | |||||
{ | |||||
"name": "Pelican-Elegant", | |||||
"devDependencies": { | |||||
"@semantic-release/changelog": "^5.0.0", | |||||
"@semantic-release/exec": "^5.0.0", | |||||
"@semantic-release/git": "^9.0.0", | |||||
"babel-core": "^6.26.3", | |||||
"babel-preset-es2015": "^6.24.1", | |||||
"browser-sync": "^2.26.7", | |||||
"cssnano": "^4.1.10", | |||||
"cz-conventional-changelog": "3.1.0", | |||||
"gulp": "^4.0.2", | |||||
"gulp-concat": "^2.6.1", | |||||
"gulp-postcss": "^8.0.0", | |||||
"gulp-run-command": "^0.0.10", | |||||
"gulp-terser": "^1.2.0", | |||||
"postcss-font-magician": "^2.3.1", | |||||
"postcss-preset-env": "^6.7.0", | |||||
"recess": "^1.1.9", | |||||
"rfs": "^9.0.2", | |||||
"semantic-release": "^17.0.4" | |||||
}, | |||||
"config": { | |||||
"commitizen": { | |||||
"path": "./node_modules/cz-conventional-changelog" | |||||
} | |||||
}, | |||||
"babel": { | |||||
"presets": [ | |||||
"es2015" | |||||
] | |||||
}, | |||||
"dependencies": {}, | |||||
"browserslist": [ | |||||
"defaults", | |||||
"IE 10" | |||||
] | |||||
} |
@ -0,0 +1,212 @@ | |||||
applause-button { | |||||
position: relative; | |||||
cursor: pointer; | |||||
} | |||||
applause-button .style-root { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
} | |||||
applause-button .style-root:after { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
content: " "; | |||||
display: block; | |||||
border-radius: 50%; | |||||
border: 1px solid; | |||||
} | |||||
applause-button .style-root:hover:after:not(.clap-limit-exceeded) { | |||||
border-color: inherit; | |||||
} | |||||
applause-button.loading { | |||||
opacity: 0.5; | |||||
} | |||||
applause-button .shockwave { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
border-radius: 50%; | |||||
} | |||||
applause-button svg { | |||||
position: absolute; | |||||
width: 60%; | |||||
height: 60%; | |||||
margin-left: 20%; | |||||
margin-top: 20%; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
opacity: 0.8; | |||||
stroke: none; | |||||
overflow: visible !important; | |||||
} | |||||
applause-button svg g.flat { | |||||
visibility: hidden; | |||||
} | |||||
applause-button svg g.outline { | |||||
visibility: visible; | |||||
} | |||||
applause-button.clapped svg g.flat { | |||||
visibility: visible; | |||||
} | |||||
applause-button.clapped svg g.outline { | |||||
visibility: hidden; | |||||
} | |||||
applause-button .count-container { | |||||
position: absolute; | |||||
top: -40%; | |||||
width: 100%; | |||||
color: gray; | |||||
user-select: none; | |||||
} | |||||
applause-button .count-container .count { | |||||
margin-left: 50%; | |||||
transform: translateX(-50%); | |||||
width: 1000px; | |||||
text-align: center; | |||||
} | |||||
applause-button g.sparkle circle { | |||||
opacity: 0; | |||||
stroke-width: 0; | |||||
} | |||||
applause-button g.sparkle g:nth-child(1) { | |||||
transform: rotate(0deg) translateX(10px); | |||||
} | |||||
applause-button g.sparkle g:nth-child(2) { | |||||
transform: rotate(72deg) translateX(10px); | |||||
} | |||||
applause-button g.sparkle g:nth-child(3) { | |||||
transform: rotate(144deg) translateX(10px); | |||||
} | |||||
applause-button g.sparkle g:nth-child(4) { | |||||
transform: rotate(216deg) translateX(10px); | |||||
} | |||||
applause-button g.sparkle g:nth-child(5) { | |||||
transform: rotate(288deg) translateX(10px); | |||||
} | |||||
applause-button:hover:not(.clapped) .shockwave { | |||||
animation-name: shockwave; | |||||
animation-duration: 1s; | |||||
animation-iteration-count: infinite; | |||||
animation-timing-function: ease-in; | |||||
} | |||||
applause-button.clap { | |||||
animation-name: pulse; | |||||
animation-duration: 0.5s; | |||||
animation-iteration-count: 1; | |||||
} | |||||
applause-button.clap .sparkle circle { | |||||
animation-name: explode; | |||||
animation-duration: 0.5s; | |||||
animation-iteration-count: 1; | |||||
} | |||||
applause-button.clap .count { | |||||
animation-name: hideThenShow; | |||||
animation-duration: 0.5s; | |||||
animation-iteration-count: 1; | |||||
} | |||||
@keyframes explode { | |||||
0% { | |||||
transform: translateX(10px); | |||||
opacity: 0; | |||||
} | |||||
20% { | |||||
opacity: 1; | |||||
} | |||||
50% { | |||||
opacity: 1; | |||||
} | |||||
100% { | |||||
opacity: 0; | |||||
transform: translateX(25px); | |||||
} | |||||
} | |||||
@keyframes shockwave { | |||||
0% { | |||||
transform: scale(1); | |||||
box-shadow: 0 0 2px; | |||||
opacity: 1; | |||||
} | |||||
100% { | |||||
transform: scale(1); | |||||
opacity: 0; | |||||
box-shadow: 0 0 50px, inset 0 0 10px; | |||||
} | |||||
} | |||||
@keyframes pulse { | |||||
0% { | |||||
transform: scale(1); | |||||
} | |||||
50% { | |||||
transform: scale(1.1); | |||||
} | |||||
100% { | |||||
transform: scale(1); | |||||
} | |||||
} | |||||
@keyframes hideThenShow { | |||||
0% { | |||||
opacity: 1; | |||||
transform: translateY(0); | |||||
} | |||||
20% { | |||||
opacity: 0; | |||||
transform: translateY(-10px); | |||||
} | |||||
50% { | |||||
transform: translateY(10px); | |||||
} | |||||
80% { | |||||
transform: translateY(10px); | |||||
opacity: 0; | |||||
} | |||||
100% { | |||||
opacity: 1; | |||||
transform: translateY(0); | |||||
} | |||||
} |
@ -0,0 +1,34 @@ | |||||
// | |||||
// Accordion | |||||
// -------------------------------------------------- | |||||
// Parent container | |||||
.accordion { | |||||
margin-bottom: @baseLineHeight; | |||||
} | |||||
// Group == heading + body | |||||
.accordion-group { | |||||
margin-bottom: 2px; | |||||
border: 1px solid #e5e5e5; | |||||
.border-radius(@baseBorderRadius); | |||||
} | |||||
.accordion-heading { | |||||
border-bottom: 0; | |||||
} | |||||
.accordion-heading .accordion-toggle { | |||||
display: block; | |||||
padding: 8px 15px; | |||||
} | |||||
// General toggle styles | |||||
.accordion-toggle { | |||||
cursor: pointer; | |||||
} | |||||
// Inner needs the styles because you can't animate properly with any styles on the element | |||||
.accordion-inner { | |||||
padding: 9px 15px; | |||||
border-top: 1px solid #e5e5e5; | |||||
} |
@ -0,0 +1,79 @@ | |||||
// | |||||
// Alerts | |||||
// -------------------------------------------------- | |||||
// Base styles | |||||
// ------------------------- | |||||
.alert { | |||||
padding: 8px 35px 8px 14px; | |||||
margin-bottom: @baseLineHeight; | |||||
text-shadow: 0 1px 0 rgba(255,255,255,.5); | |||||
background-color: @warningBackground; | |||||
border: 1px solid @warningBorder; | |||||
.border-radius(@baseBorderRadius); | |||||
} | |||||
.alert, | |||||
.alert h4 { | |||||
// Specified for the h4 to prevent conflicts of changing @headingsColor | |||||
color: @warningText; | |||||
} | |||||
.alert h4 { | |||||
margin: 0; | |||||
} | |||||
// Adjust close link position | |||||
.alert .close { | |||||
position: relative; | |||||
top: -2px; | |||||
right: -21px; | |||||
line-height: @baseLineHeight; | |||||
} | |||||
// Alternate styles | |||||
// ------------------------- | |||||
.alert-success { | |||||
background-color: @successBackground; | |||||
border-color: @successBorder; | |||||
color: @successText; | |||||
} | |||||
.alert-success h4 { | |||||
color: @successText; | |||||
} | |||||
.alert-danger, | |||||
.alert-error { | |||||
background-color: @errorBackground; | |||||
border-color: @errorBorder; | |||||
color: @errorText; | |||||
} | |||||
.alert-danger h4, | |||||
.alert-error h4 { | |||||
color: @errorText; | |||||
} | |||||
.alert-info { | |||||
background-color: @infoBackground; | |||||
border-color: @infoBorder; | |||||
color: @infoText; | |||||
} | |||||
.alert-info h4 { | |||||
color: @infoText; | |||||
} | |||||
// Block alerts | |||||
// ------------------------- | |||||
.alert-block { | |||||
padding-top: 14px; | |||||
padding-bottom: 14px; | |||||
} | |||||
.alert-block > p, | |||||
.alert-block > ul { | |||||
margin-bottom: 0; | |||||
} | |||||
.alert-block p + p { | |||||
margin-top: 5px; | |||||
} |
@ -0,0 +1,63 @@ | |||||
/*! | |||||
* Bootstrap v2.3.2 | |||||
* | |||||
* Copyright 2013 Twitter, Inc | |||||
* Licensed under the Apache License v2.0 | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Designed and built with all the love in the world by @mdo and @fat. | |||||
*/ | |||||
// Core variables and mixins | |||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc | |||||
@import "mixins.less"; | |||||
// CSS Reset | |||||
@import "reset.less"; | |||||
// Grid system and page structure | |||||
@import "scaffolding.less"; | |||||
@import "grid.less"; | |||||
@import "layouts.less"; | |||||
// Base CSS | |||||
@import "type.less"; | |||||
@import "code.less"; | |||||
@import "forms.less"; | |||||
@import "tables.less"; | |||||
// Components: common | |||||
@import "sprites.less"; | |||||
@import "dropdowns.less"; | |||||
@import "wells.less"; | |||||
@import "component-animations.less"; | |||||
@import "close.less"; | |||||
// Components: Buttons & Alerts | |||||
@import "buttons.less"; | |||||
@import "button-groups.less"; | |||||
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less | |||||
// Components: Nav | |||||
@import "navs.less"; | |||||
@import "navbar.less"; | |||||
@import "breadcrumbs.less"; | |||||
@import "pagination.less"; | |||||
@import "pager.less"; | |||||
// Components: Popovers | |||||
@import "modals.less"; | |||||
@import "tooltip.less"; | |||||
@import "popovers.less"; | |||||
// Components: Misc | |||||
@import "thumbnails.less"; | |||||
@import "media.less"; | |||||
@import "labels-badges.less"; | |||||
@import "progress-bars.less"; | |||||
@import "accordion.less"; | |||||
@import "carousel.less"; | |||||
@import "hero-unit.less"; | |||||
// Utility classes | |||||
@import "utilities.less"; // Has to be last to override when necessary |
@ -0,0 +1,24 @@ | |||||
// | |||||
// Breadcrumbs | |||||
// -------------------------------------------------- | |||||
.breadcrumb { | |||||
padding: 8px 15px; | |||||
margin: 0 0 @baseLineHeight; | |||||
list-style: none; | |||||
background-color: #f5f5f5; | |||||
.border-radius(@baseBorderRadius); | |||||
> li { | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
text-shadow: 0 1px 0 @white; | |||||
> .divider { | |||||
padding: 0 5px; | |||||
color: #ccc; | |||||
} | |||||
} | |||||
> .active { | |||||
color: @grayLight; | |||||
} | |||||
} |
@ -0,0 +1,229 @@ | |||||
// | |||||
// Button groups | |||||
// -------------------------------------------------- | |||||
// Make the div behave like a button | |||||
.btn-group { | |||||
position: relative; | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
font-size: 0; // remove as part 1 of font-size inline-block hack | |||||
vertical-align: middle; // match .btn alignment given font-size hack above | |||||
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) | |||||
.ie7-restore-left-whitespace(); | |||||
} | |||||
// Space out series of button groups | |||||
.btn-group + .btn-group { | |||||
margin-left: 5px; | |||||
} | |||||
// Optional: Group multiple button groups together for a toolbar | |||||
.btn-toolbar { | |||||
font-size: 0; // Hack to remove whitespace that results from using inline-block | |||||
margin-top: @baseLineHeight / 2; | |||||
margin-bottom: @baseLineHeight / 2; | |||||
> .btn + .btn, | |||||
> .btn-group + .btn, | |||||
> .btn + .btn-group { | |||||
margin-left: 5px; | |||||
} | |||||
} | |||||
// Float them, remove border radius, then re-add to first and last elements | |||||
.btn-group > .btn { | |||||
position: relative; | |||||
.border-radius(0); | |||||
} | |||||
.btn-group > .btn + .btn { | |||||
margin-left: -1px; | |||||
} | |||||
.btn-group > .btn, | |||||
.btn-group > .dropdown-menu, | |||||
.btn-group > .popover { | |||||
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack | |||||
} | |||||
// Reset fonts for other sizes | |||||
.btn-group > .btn-mini { | |||||
font-size: @fontSizeMini; | |||||
} | |||||
.btn-group > .btn-small { | |||||
font-size: @fontSizeSmall; | |||||
} | |||||
.btn-group > .btn-large { | |||||
font-size: @fontSizeLarge; | |||||
} | |||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match | |||||
.btn-group > .btn:first-child { | |||||
margin-left: 0; | |||||
.border-top-left-radius(@baseBorderRadius); | |||||
.border-bottom-left-radius(@baseBorderRadius); | |||||
} | |||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it | |||||
.btn-group > .btn:last-child, | |||||
.btn-group > .dropdown-toggle { | |||||
.border-top-right-radius(@baseBorderRadius); | |||||
.border-bottom-right-radius(@baseBorderRadius); | |||||
} | |||||
// Reset corners for large buttons | |||||
.btn-group > .btn.large:first-child { | |||||
margin-left: 0; | |||||
.border-top-left-radius(@borderRadiusLarge); | |||||
.border-bottom-left-radius(@borderRadiusLarge); | |||||
} | |||||
.btn-group > .btn.large:last-child, | |||||
.btn-group > .large.dropdown-toggle { | |||||
.border-top-right-radius(@borderRadiusLarge); | |||||
.border-bottom-right-radius(@borderRadiusLarge); | |||||
} | |||||
// On hover/focus/active, bring the proper btn to front | |||||
.btn-group > .btn:hover, | |||||
.btn-group > .btn:focus, | |||||
.btn-group > .btn:active, | |||||
.btn-group > .btn.active { | |||||
z-index: 2; | |||||
} | |||||
// On active and open, don't show outline | |||||
.btn-group .dropdown-toggle:active, | |||||
.btn-group.open .dropdown-toggle { | |||||
outline: 0; | |||||
} | |||||
// Split button dropdowns | |||||
// ---------------------- | |||||
// Give the line between buttons some depth | |||||
.btn-group > .btn + .dropdown-toggle { | |||||
padding-left: 8px; | |||||
padding-right: 8px; | |||||
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); | |||||
*padding-top: 5px; | |||||
*padding-bottom: 5px; | |||||
} | |||||
.btn-group > .btn-mini + .dropdown-toggle { | |||||
padding-left: 5px; | |||||
padding-right: 5px; | |||||
*padding-top: 2px; | |||||
*padding-bottom: 2px; | |||||
} | |||||
.btn-group > .btn-small + .dropdown-toggle { | |||||
*padding-top: 5px; | |||||
*padding-bottom: 4px; | |||||
} | |||||
.btn-group > .btn-large + .dropdown-toggle { | |||||
padding-left: 12px; | |||||
padding-right: 12px; | |||||
*padding-top: 7px; | |||||
*padding-bottom: 7px; | |||||
} | |||||
.btn-group.open { | |||||
// The clickable button for toggling the menu | |||||
// Remove the gradient and set the same inset shadow as the :active state | |||||
.dropdown-toggle { | |||||
background-image: none; | |||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); | |||||
} | |||||
// Keep the hover's background when dropdown is open | |||||
.btn.dropdown-toggle { | |||||
background-color: @btnBackgroundHighlight; | |||||
} | |||||
.btn-primary.dropdown-toggle { | |||||
background-color: @btnPrimaryBackgroundHighlight; | |||||
} | |||||
.btn-warning.dropdown-toggle { | |||||
background-color: @btnWarningBackgroundHighlight; | |||||
} | |||||
.btn-danger.dropdown-toggle { | |||||
background-color: @btnDangerBackgroundHighlight; | |||||
} | |||||
.btn-success.dropdown-toggle { | |||||
background-color: @btnSuccessBackgroundHighlight; | |||||
} | |||||
.btn-info.dropdown-toggle { | |||||
background-color: @btnInfoBackgroundHighlight; | |||||
} | |||||
.btn-inverse.dropdown-toggle { | |||||
background-color: @btnInverseBackgroundHighlight; | |||||
} | |||||
} | |||||
// Reposition the caret | |||||
.btn .caret { | |||||
margin-top: 8px; | |||||
margin-left: 0; | |||||
} | |||||
// Carets in other button sizes | |||||
.btn-large .caret { | |||||
margin-top: 6px; | |||||
} | |||||
.btn-large .caret { | |||||
border-left-width: 5px; | |||||
border-right-width: 5px; | |||||
border-top-width: 5px; | |||||
} | |||||
.btn-mini .caret, | |||||
.btn-small .caret { | |||||
margin-top: 8px; | |||||
} | |||||
// Upside down carets for .dropup | |||||
.dropup .btn-large .caret { | |||||
border-bottom-width: 5px; | |||||
} | |||||
// Account for other colors | |||||
.btn-primary, | |||||
.btn-warning, | |||||
.btn-danger, | |||||
.btn-info, | |||||
.btn-success, | |||||
.btn-inverse { | |||||
.caret { | |||||
border-top-color: @white; | |||||
border-bottom-color: @white; | |||||
} | |||||
} | |||||
// Vertical button groups | |||||
// ---------------------- | |||||
.btn-group-vertical { | |||||
display: inline-block; // makes buttons only take up the width they need | |||||
.ie7-inline-block(); | |||||
} | |||||
.btn-group-vertical > .btn { | |||||
display: block; | |||||
float: none; | |||||
max-width: 100%; | |||||
.border-radius(0); | |||||
} | |||||
.btn-group-vertical > .btn + .btn { | |||||
margin-left: 0; | |||||
margin-top: -1px; | |||||
} | |||||
.btn-group-vertical > .btn:first-child { | |||||
.border-radius(@baseBorderRadius @baseBorderRadius 0 0); | |||||
} | |||||
.btn-group-vertical > .btn:last-child { | |||||
.border-radius(0 0 @baseBorderRadius @baseBorderRadius); | |||||
} | |||||
.btn-group-vertical > .btn-large:first-child { | |||||
.border-radius(@borderRadiusLarge @borderRadiusLarge 0 0); | |||||
} | |||||
.btn-group-vertical > .btn-large:last-child { | |||||
.border-radius(0 0 @borderRadiusLarge @borderRadiusLarge); | |||||
} |
@ -0,0 +1,228 @@ | |||||
// | |||||
// Buttons | |||||
// -------------------------------------------------- | |||||
// Base styles | |||||
// -------------------------------------------------- | |||||
// Core | |||||
.btn { | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
padding: 4px 12px; | |||||
margin-bottom: 0; // For input.btn | |||||
font-size: @baseFontSize; | |||||
line-height: @baseLineHeight; | |||||
text-align: center; | |||||
vertical-align: middle; | |||||
cursor: pointer; | |||||
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); | |||||
border: 1px solid @btnBorder; | |||||
*border: 0; // Remove the border to prevent IE7's black border on input:focus | |||||
border-bottom-color: darken(@btnBorder, 10%); | |||||
.border-radius(@baseBorderRadius); | |||||
.ie7-restore-left-whitespace(); // Give IE7 some love | |||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); | |||||
// Hover/focus state | |||||
&:hover, | |||||
&:focus { | |||||
color: @grayDark; | |||||
text-decoration: none; | |||||
background-position: 0 -15px; | |||||
// transition is only when going to hover/focus, otherwise the background | |||||
// behind the gradient (there for IE<=9 fallback) gets mismatched | |||||
.transition(background-position .1s linear); | |||||
} | |||||
// Focus state for keyboard and accessibility | |||||
&:focus { | |||||
.tab-focus(); | |||||
} | |||||
// Active state | |||||
&.active, | |||||
&:active { | |||||
background-image: none; | |||||
outline: 0; | |||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); | |||||
} | |||||
// Disabled state | |||||
&.disabled, | |||||
&[disabled] { | |||||
cursor: default; | |||||
background-image: none; | |||||
.opacity(65); | |||||
.box-shadow(none); | |||||
} | |||||
} | |||||
// Button Sizes | |||||
// -------------------------------------------------- | |||||
// Large | |||||
.btn-large { | |||||
padding: @paddingLarge; | |||||
font-size: @fontSizeLarge; | |||||
.border-radius(@borderRadiusLarge); | |||||
} | |||||
.btn-large [class^="icon-"], | |||||
.btn-large [class*=" icon-"] { | |||||
margin-top: 4px; | |||||
} | |||||
// Small | |||||
.btn-small { | |||||
padding: @paddingSmall; | |||||
font-size: @fontSizeSmall; | |||||
.border-radius(@borderRadiusSmall); | |||||
} | |||||
.btn-small [class^="icon-"], | |||||
.btn-small [class*=" icon-"] { | |||||
margin-top: 0; | |||||
} | |||||
.btn-mini [class^="icon-"], | |||||
.btn-mini [class*=" icon-"] { | |||||
margin-top: -1px; | |||||
} | |||||
// Mini | |||||
.btn-mini { | |||||
padding: @paddingMini; | |||||
font-size: @fontSizeMini; | |||||
.border-radius(@borderRadiusSmall); | |||||
} | |||||
// Block button | |||||
// ------------------------- | |||||
.btn-block { | |||||
display: block; | |||||
width: 100%; | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
.box-sizing(border-box); | |||||
} | |||||
// Vertically space out multiple block buttons | |||||
.btn-block + .btn-block { | |||||
margin-top: 5px; | |||||
} | |||||
// Specificity overrides | |||||
input[type="submit"], | |||||
input[type="reset"], | |||||
input[type="button"] { | |||||
&.btn-block { | |||||
width: 100%; | |||||
} | |||||
} | |||||
// Alternate buttons | |||||
// -------------------------------------------------- | |||||
// Provide *some* extra contrast for those who can get it | |||||
.btn-primary.active, | |||||
.btn-warning.active, | |||||
.btn-danger.active, | |||||
.btn-success.active, | |||||
.btn-info.active, | |||||
.btn-inverse.active { | |||||
color: rgba(255,255,255,.75); | |||||
} | |||||
// Set the backgrounds | |||||
// ------------------------- | |||||
.btn-primary { | |||||
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); | |||||
} | |||||
// Warning appears are orange | |||||
.btn-warning { | |||||
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); | |||||
} | |||||
// Danger and error appear as red | |||||
.btn-danger { | |||||
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); | |||||
} | |||||
// Success appears as green | |||||
.btn-success { | |||||
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); | |||||
} | |||||
// Info appears as a neutral blue | |||||
.btn-info { | |||||
.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); | |||||
} | |||||
// Inverse appears as dark gray | |||||
.btn-inverse { | |||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); | |||||
} | |||||
// Cross-browser Jank | |||||
// -------------------------------------------------- | |||||
button.btn, | |||||
input[type="submit"].btn { | |||||
// Firefox 3.6 only I believe | |||||
&::-moz-focus-inner { | |||||
padding: 0; | |||||
border: 0; | |||||
} | |||||
// IE7 has some default padding on button controls | |||||
*padding-top: 3px; | |||||
*padding-bottom: 3px; | |||||
&.btn-large { | |||||
*padding-top: 7px; | |||||
*padding-bottom: 7px; | |||||
} | |||||
&.btn-small { | |||||
*padding-top: 3px; | |||||
*padding-bottom: 3px; | |||||
} | |||||
&.btn-mini { | |||||
*padding-top: 1px; | |||||
*padding-bottom: 1px; | |||||
} | |||||
} | |||||
// Link buttons | |||||
// -------------------------------------------------- | |||||
// Make a button look and behave like a link | |||||
.btn-link, | |||||
.btn-link:active, | |||||
.btn-link[disabled] { | |||||
background-color: transparent; | |||||
background-image: none; | |||||
.box-shadow(none); | |||||
} | |||||
.btn-link { | |||||
border-color: transparent; | |||||
cursor: pointer; | |||||
color: @linkColor; | |||||
.border-radius(0); | |||||
} | |||||
.btn-link:hover, | |||||
.btn-link:focus { | |||||
color: @linkColorHover; | |||||
text-decoration: underline; | |||||
background-color: transparent; | |||||
} | |||||
.btn-link[disabled]:hover, | |||||
.btn-link[disabled]:focus { | |||||
color: @grayDark; | |||||
text-decoration: none; | |||||
} |
@ -0,0 +1,158 @@ | |||||
// | |||||
// Carousel | |||||
// -------------------------------------------------- | |||||
.carousel { | |||||
position: relative; | |||||
margin-bottom: @baseLineHeight; | |||||
line-height: 1; | |||||
} | |||||
.carousel-inner { | |||||
overflow: hidden; | |||||
width: 100%; | |||||
position: relative; | |||||
} | |||||
.carousel-inner { | |||||
> .item { | |||||
display: none; | |||||
position: relative; | |||||
.transition(.6s ease-in-out left); | |||||
// Account for jankitude on images | |||||
> img, | |||||
> a > img { | |||||
display: block; | |||||
line-height: 1; | |||||
} | |||||
} | |||||
> .active, | |||||
> .next, | |||||
> .prev { display: block; } | |||||
> .active { | |||||
left: 0; | |||||
} | |||||
> .next, | |||||
> .prev { | |||||
position: absolute; | |||||
top: 0; | |||||
width: 100%; | |||||
} | |||||
> .next { | |||||
left: 100%; | |||||
} | |||||
> .prev { | |||||
left: -100%; | |||||
} | |||||
> .next.left, | |||||
> .prev.right { | |||||
left: 0; | |||||
} | |||||
> .active.left { | |||||
left: -100%; | |||||
} | |||||
> .active.right { | |||||
left: 100%; | |||||
} | |||||
} | |||||
// Left/right controls for nav | |||||
// --------------------------- | |||||
.carousel-control { | |||||
position: absolute; | |||||
top: 40%; | |||||
left: 15px; | |||||
width: 40px; | |||||
height: 40px; | |||||
margin-top: -20px; | |||||
font-size: 60px; | |||||
font-weight: 100; | |||||
line-height: 30px; | |||||
color: @white; | |||||
text-align: center; | |||||
background: @grayDarker; | |||||
border: 3px solid @white; | |||||
.border-radius(23px); | |||||
.opacity(50); | |||||
// we can't have this transition here | |||||
// because webkit cancels the carousel | |||||
// animation if you trip this while | |||||
// in the middle of another animation | |||||
// ;_; | |||||
// .transition(opacity .2s linear); | |||||
// Reposition the right one | |||||
&.right { | |||||
left: auto; | |||||
right: 15px; | |||||
} | |||||
// Hover/focus state | |||||
&:hover, | |||||
&:focus { | |||||
color: @white; | |||||
text-decoration: none; | |||||
.opacity(90); | |||||
} | |||||
} | |||||
// Carousel indicator pips | |||||
// ----------------------------- | |||||
.carousel-indicators { | |||||
position: absolute; | |||||
top: 15px; | |||||
right: 15px; | |||||
z-index: 5; | |||||
margin: 0; | |||||
list-style: none; | |||||
li { | |||||
display: block; | |||||
float: left; | |||||
width: 10px; | |||||
height: 10px; | |||||
margin-left: 5px; | |||||
text-indent: -999px; | |||||
background-color: #ccc; | |||||
background-color: rgba(255,255,255,.25); | |||||
border-radius: 5px; | |||||
} | |||||
.active { | |||||
background-color: #fff; | |||||
} | |||||
} | |||||
// Caption for text below images | |||||
// ----------------------------- | |||||
.carousel-caption { | |||||
position: absolute; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
padding: 15px; | |||||
background: @grayDark; | |||||
background: rgba(0,0,0,.75); | |||||
} | |||||
.carousel-caption h4, | |||||
.carousel-caption p { | |||||
color: @white; | |||||
line-height: @baseLineHeight; | |||||
} | |||||
.carousel-caption h4 { | |||||
margin: 0 0 5px; | |||||
} | |||||
.carousel-caption p { | |||||
margin-bottom: 0; | |||||
} |
@ -0,0 +1,32 @@ | |||||
// | |||||
// Close icons | |||||
// -------------------------------------------------- | |||||
.close { | |||||
float: right; | |||||
font-size: 20px; | |||||
font-weight: bold; | |||||
line-height: @baseLineHeight; | |||||
color: @black; | |||||
text-shadow: 0 1px 0 rgba(255,255,255,1); | |||||
.opacity(20); | |||||
&:hover, | |||||
&:focus { | |||||
color: @black; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
.opacity(40); | |||||
} | |||||
} | |||||
// Additional properties for button version | |||||
// iOS requires the button element instead of an anchor tag. | |||||
// If you want the anchor version, it requires `href="#"`. | |||||
button.close { | |||||
padding: 0; | |||||
cursor: pointer; | |||||
background: transparent; | |||||
border: 0; | |||||
-webkit-appearance: none; | |||||
} |
@ -0,0 +1,56 @@ | |||||
// | |||||
// Code (inline and blocK) | |||||
// -------------------------------------------------- | |||||
// Inline and block code styles | |||||
code, | |||||
pre { | |||||
padding: 0 3px 2px; | |||||
font-size: @baseFontSize - 2; | |||||
color: @grayDark; | |||||
.border-radius(3px); | |||||
} | |||||
// Inline code | |||||
code { | |||||
padding: 2px 4px; | |||||
color: #d14; | |||||
background-color: #f7f7f9; | |||||
border: 1px solid #e1e1e8; | |||||
white-space: nowrap; | |||||
} | |||||
// Blocks of code | |||||
pre { | |||||
display: block; | |||||
padding: (@baseLineHeight - 1) / 2; | |||||
margin: 0 0 @baseLineHeight / 2; | |||||
font-size: @baseFontSize - 1; // 14px to 13px | |||||
line-height: @baseLineHeight; | |||||
word-break: break-all; | |||||
word-wrap: break-word; | |||||
white-space: pre; | |||||
white-space: pre-wrap; | |||||
// Make prettyprint styles more spaced out for readability | |||||
&.prettyprint { | |||||
margin-bottom: @baseLineHeight; | |||||
} | |||||
// Account for some code outputs that place code tags in pre tags | |||||
code { | |||||
padding: 0; | |||||
color: inherit; | |||||
white-space: pre; | |||||
white-space: pre-wrap; | |||||
background-color: transparent; | |||||
border: 0; | |||||
} | |||||
} | |||||
// Enable scrollable blocks of code | |||||
.pre-scrollable { | |||||
max-height: 340px; | |||||
overflow-y: scroll; | |||||
} |
@ -0,0 +1,22 @@ | |||||
// | |||||
// Component animations | |||||
// -------------------------------------------------- | |||||
.fade { | |||||
opacity: 0; | |||||
.transition(opacity .15s linear); | |||||
&.in { | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.collapse { | |||||
position: relative; | |||||
height: 0; | |||||
overflow: hidden; | |||||
.transition(height .35s ease); | |||||
&.in { | |||||
height: auto; | |||||
} | |||||
} |
@ -0,0 +1,248 @@ | |||||
// | |||||
// Dropdown menus | |||||
// -------------------------------------------------- | |||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns | |||||
.dropup, | |||||
.dropdown { | |||||
position: relative; | |||||
} | |||||
.dropdown-toggle { | |||||
// The caret makes the toggle a bit too tall in IE7 | |||||
*margin-bottom: -3px; | |||||
} | |||||
.dropdown-toggle:active, | |||||
.open .dropdown-toggle { | |||||
outline: 0; | |||||
} | |||||
// Dropdown arrow/caret | |||||
// -------------------- | |||||
.caret { | |||||
display: inline-block; | |||||
width: 0; | |||||
height: 0; | |||||
vertical-align: top; | |||||
border-top: 4px solid @black; | |||||
border-right: 4px solid transparent; | |||||
border-left: 4px solid transparent; | |||||
content: ""; | |||||
} | |||||
// Place the caret | |||||
.dropdown .caret { | |||||
margin-top: 8px; | |||||
margin-left: 2px; | |||||
} | |||||
// The dropdown menu (ul) | |||||
// ---------------------- | |||||
.dropdown-menu { | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
z-index: @zindexDropdown; | |||||
display: none; // none by default, but block on "open" of the menu | |||||
float: left; | |||||
min-width: 160px; | |||||
padding: 5px 0; | |||||
margin: 2px 0 0; // override default ul | |||||
list-style: none; | |||||
background-color: @dropdownBackground; | |||||
border: 1px solid #ccc; // Fallback for IE7-8 | |||||
border: 1px solid @dropdownBorder; | |||||
*border-right-width: 2px; | |||||
*border-bottom-width: 2px; | |||||
.border-radius(6px); | |||||
.box-shadow(0 5px 10px rgba(0,0,0,.2)); | |||||
-webkit-background-clip: padding-box; | |||||
-moz-background-clip: padding; | |||||
background-clip: padding-box; | |||||
// Aligns the dropdown menu to right | |||||
&.pull-right { | |||||
right: 0; | |||||
left: auto; | |||||
} | |||||
// Dividers (basically an hr) within the dropdown | |||||
.divider { | |||||
.nav-divider(@dropdownDividerTop, @dropdownDividerBottom); | |||||
} | |||||
// Links within the dropdown menu | |||||
> li > a { | |||||
display: block; | |||||
padding: 3px 20px; | |||||
clear: both; | |||||
font-weight: normal; | |||||
line-height: @baseLineHeight; | |||||
color: @dropdownLinkColor; | |||||
white-space: nowrap; | |||||
} | |||||
} | |||||
// Hover/Focus state | |||||
// ----------- | |||||
.dropdown-menu > li > a:hover, | |||||
.dropdown-menu > li > a:focus, | |||||
.dropdown-submenu:hover > a, | |||||
.dropdown-submenu:focus > a { | |||||
text-decoration: none; | |||||
color: @dropdownLinkColorHover; | |||||
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); | |||||
} | |||||
// Active state | |||||
// ------------ | |||||
.dropdown-menu > .active > a, | |||||
.dropdown-menu > .active > a:hover, | |||||
.dropdown-menu > .active > a:focus { | |||||
color: @dropdownLinkColorActive; | |||||
text-decoration: none; | |||||
outline: 0; | |||||
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); | |||||
} | |||||
// Disabled state | |||||
// -------------- | |||||
// Gray out text and ensure the hover/focus state remains gray | |||||
.dropdown-menu > .disabled > a, | |||||
.dropdown-menu > .disabled > a:hover, | |||||
.dropdown-menu > .disabled > a:focus { | |||||
color: @grayLight; | |||||
} | |||||
// Nuke hover/focus effects | |||||
.dropdown-menu > .disabled > a:hover, | |||||
.dropdown-menu > .disabled > a:focus { | |||||
text-decoration: none; | |||||
background-color: transparent; | |||||
background-image: none; // Remove CSS gradient | |||||
.reset-filter(); | |||||
cursor: default; | |||||
} | |||||
// Open state for the dropdown | |||||
// --------------------------- | |||||
.open { | |||||
// IE7's z-index only goes to the nearest positioned ancestor, which would | |||||
// make the menu appear below buttons that appeared later on the page | |||||
*z-index: @zindexDropdown; | |||||
& > .dropdown-menu { | |||||
display: block; | |||||
} | |||||
} | |||||
// Backdrop to catch body clicks on mobile, etc. | |||||
// --------------------------- | |||||
.dropdown-backdrop { | |||||
position: fixed; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
top: 0; | |||||
z-index: @zindexDropdown - 10; | |||||
} | |||||
// Right aligned dropdowns | |||||
// --------------------------- | |||||
.pull-right > .dropdown-menu { | |||||
right: 0; | |||||
left: auto; | |||||
} | |||||
// Allow for dropdowns to go bottom up (aka, dropup-menu) | |||||
// ------------------------------------------------------ | |||||
// Just add .dropup after the standard .dropdown class and you're set, bro. | |||||
// TODO: abstract this so that the navbar fixed styles are not placed here? | |||||
.dropup, | |||||
.navbar-fixed-bottom .dropdown { | |||||
// Reverse the caret | |||||
.caret { | |||||
border-top: 0; | |||||
border-bottom: 4px solid @black; | |||||
content: ""; | |||||
} | |||||
// Different positioning for bottom up menu | |||||
.dropdown-menu { | |||||
top: auto; | |||||
bottom: 100%; | |||||
margin-bottom: 1px; | |||||
} | |||||
} | |||||
// Sub menus | |||||
// --------------------------- | |||||
.dropdown-submenu { | |||||
position: relative; | |||||
} | |||||
// Default dropdowns | |||||
.dropdown-submenu > .dropdown-menu { | |||||
top: 0; | |||||
left: 100%; | |||||
margin-top: -6px; | |||||
margin-left: -1px; | |||||
.border-radius(0 6px 6px 6px); | |||||
} | |||||
.dropdown-submenu:hover > .dropdown-menu { | |||||
display: block; | |||||
} | |||||
// Dropups | |||||
.dropup .dropdown-submenu > .dropdown-menu { | |||||
top: auto; | |||||
bottom: 0; | |||||
margin-top: 0; | |||||
margin-bottom: -2px; | |||||
.border-radius(5px 5px 5px 0); | |||||
} | |||||
// Caret to indicate there is a submenu | |||||
.dropdown-submenu > a:after { | |||||
display: block; | |||||
content: " "; | |||||
float: right; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
border-width: 5px 0 5px 5px; | |||||
border-left-color: darken(@dropdownBackground, 20%); | |||||
margin-top: 5px; | |||||
margin-right: -10px; | |||||
} | |||||
.dropdown-submenu:hover > a:after { | |||||
border-left-color: @dropdownLinkColorHover; | |||||
} | |||||
// Left aligned submenus | |||||
.dropdown-submenu.pull-left { | |||||
// Undo the float | |||||
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. | |||||
float: none; | |||||
// Positioning the submenu | |||||
> .dropdown-menu { | |||||
left: -100%; | |||||
margin-left: 10px; | |||||
.border-radius(6px 0 6px 6px); | |||||
} | |||||
} | |||||
// Tweak nav headers | |||||
// ----------------- | |||||
// Increase padding from 15px to 20px on sides | |||||
.dropdown .dropdown-menu .nav-header { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
} | |||||
// Typeahead | |||||
// --------- | |||||
.typeahead { | |||||
z-index: 1051; | |||||
margin-top: 2px; // give it some space to breathe | |||||
.border-radius(@baseBorderRadius); | |||||
} |
@ -0,0 +1,690 @@ | |||||
// | |||||
// Forms | |||||
// -------------------------------------------------- | |||||
// GENERAL STYLES | |||||
// -------------- | |||||
// Make all forms have space below them | |||||
form { | |||||
margin: 0 0 @baseLineHeight; | |||||
} | |||||
fieldset { | |||||
padding: 0; | |||||
margin: 0; | |||||
border: 0; | |||||
} | |||||
// Groups of fields with labels on top (legends) | |||||
legend { | |||||
display: block; | |||||
width: 100%; | |||||
padding: 0; | |||||
margin-bottom: @baseLineHeight; | |||||
font-size: @baseFontSize * 1.5; | |||||
line-height: @baseLineHeight * 2; | |||||
color: @grayDark; | |||||
border: 0; | |||||
border-bottom: 1px solid #e5e5e5; | |||||
// Small | |||||
small { | |||||
font-size: @baseLineHeight * .75; | |||||
color: @grayLight; | |||||
} | |||||
} | |||||
// Set font for forms | |||||
label, | |||||
input, | |||||
button, | |||||
select, | |||||
textarea { | |||||
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here | |||||
} | |||||
input, | |||||
button, | |||||
select, | |||||
textarea { | |||||
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) | |||||
} | |||||
// Identify controls by their labels | |||||
label { | |||||
display: block; | |||||
margin-bottom: 5px; | |||||
} | |||||
// Form controls | |||||
// ------------------------- | |||||
// Shared size and type resets | |||||
select, | |||||
textarea, | |||||
input[type="text"], | |||||
input[type="password"], | |||||
input[type="datetime"], | |||||
input[type="datetime-local"], | |||||
input[type="date"], | |||||
input[type="month"], | |||||
input[type="time"], | |||||
input[type="week"], | |||||
input[type="number"], | |||||
input[type="email"], | |||||
input[type="url"], | |||||
input[type="search"], | |||||
input[type="tel"], | |||||
input[type="color"], | |||||
.uneditable-input { | |||||
display: inline-block; | |||||
height: @baseLineHeight; | |||||
padding: 4px 6px; | |||||
margin-bottom: @baseLineHeight / 2; | |||||
font-size: @baseFontSize; | |||||
line-height: @baseLineHeight; | |||||
color: @gray; | |||||
.border-radius(@inputBorderRadius); | |||||
vertical-align: middle; | |||||
} | |||||
// Reset appearance properties for textual inputs and textarea | |||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) | |||||
input, | |||||
textarea, | |||||
.uneditable-input { | |||||
width: 206px; // plus 12px padding and 2px border | |||||
} | |||||
// Reset height since textareas have rows | |||||
textarea { | |||||
height: auto; | |||||
} | |||||
// Everything else | |||||
textarea, | |||||
input[type="text"], | |||||
input[type="password"], | |||||
input[type="datetime"], | |||||
input[type="datetime-local"], | |||||
input[type="date"], | |||||
input[type="month"], | |||||
input[type="time"], | |||||
input[type="week"], | |||||
input[type="number"], | |||||
input[type="email"], | |||||
input[type="url"], | |||||
input[type="search"], | |||||
input[type="tel"], | |||||
input[type="color"], | |||||
.uneditable-input { | |||||
background-color: @inputBackground; | |||||
border: 1px solid @inputBorder; | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); | |||||
.transition(~"border linear .2s, box-shadow linear .2s"); | |||||
// Focus state | |||||
&:focus { | |||||
border-color: rgba(82,168,236,.8); | |||||
outline: 0; | |||||
outline: thin dotted \9; /* IE6-9 */ | |||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); | |||||
} | |||||
} | |||||
// Position radios and checkboxes better | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
margin: 4px 0 0; | |||||
*margin-top: 0; /* IE7 */ | |||||
margin-top: 1px \9; /* IE8-9 */ | |||||
line-height: normal; | |||||
} | |||||
// Reset width of input images, buttons, radios, checkboxes | |||||
input[type="file"], | |||||
input[type="image"], | |||||
input[type="submit"], | |||||
input[type="reset"], | |||||
input[type="button"], | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
width: auto; // Override of generic input selector | |||||
} | |||||
// Set the height of select and file controls to match text inputs | |||||
select, | |||||
input[type="file"] { | |||||
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ | |||||
*margin-top: 4px; /* For IE7, add top margin to align select with labels */ | |||||
line-height: @inputHeight; | |||||
} | |||||
// Make select elements obey height by applying a border | |||||
select { | |||||
width: 220px; // default input width + 10px of padding that doesn't get applied | |||||
border: 1px solid @inputBorder; | |||||
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color | |||||
} | |||||
// Make multiple select elements height not fixed | |||||
select[multiple], | |||||
select[size] { | |||||
height: auto; | |||||
} | |||||
// Focus for select, file, radio, and checkbox | |||||
select:focus, | |||||
input[type="file"]:focus, | |||||
input[type="radio"]:focus, | |||||
input[type="checkbox"]:focus { | |||||
.tab-focus(); | |||||
} | |||||
// Uneditable inputs | |||||
// ------------------------- | |||||
// Make uneditable inputs look inactive | |||||
.uneditable-input, | |||||
.uneditable-textarea { | |||||
color: @grayLight; | |||||
background-color: darken(@inputBackground, 1%); | |||||
border-color: @inputBorder; | |||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); | |||||
cursor: not-allowed; | |||||
} | |||||
// For text that needs to appear as an input but should not be an input | |||||
.uneditable-input { | |||||
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does | |||||
white-space: nowrap; | |||||
} | |||||
// Make uneditable textareas behave like a textarea | |||||
.uneditable-textarea { | |||||
width: auto; | |||||
height: auto; | |||||
} | |||||
// Placeholder | |||||
// ------------------------- | |||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector | |||||
input, | |||||
textarea { | |||||
.placeholder(); | |||||
} | |||||
// CHECKBOXES & RADIOS | |||||
// ------------------- | |||||
// Indent the labels to position radios/checkboxes as hanging | |||||
.radio, | |||||
.checkbox { | |||||
min-height: @baseLineHeight; // clear the floating input if there is no label text | |||||
padding-left: 20px; | |||||
} | |||||
.radio input[type="radio"], | |||||
.checkbox input[type="checkbox"] { | |||||
float: left; | |||||
margin-left: -20px; | |||||
} | |||||
// Move the options list down to align with labels | |||||
.controls > .radio:first-child, | |||||
.controls > .checkbox:first-child { | |||||
padding-top: 5px; // has to be padding because margin collaspes | |||||
} | |||||
// Radios and checkboxes on same line | |||||
// TODO v3: Convert .inline to .control-inline | |||||
.radio.inline, | |||||
.checkbox.inline { | |||||
display: inline-block; | |||||
padding-top: 5px; | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
} | |||||
.radio.inline + .radio.inline, | |||||
.checkbox.inline + .checkbox.inline { | |||||
margin-left: 10px; // space out consecutive inline controls | |||||
} | |||||
// INPUT SIZES | |||||
// ----------- | |||||
// General classes for quick sizes | |||||
.input-mini { width: 60px; } | |||||
.input-small { width: 90px; } | |||||
.input-medium { width: 150px; } | |||||
.input-large { width: 210px; } | |||||
.input-xlarge { width: 270px; } | |||||
.input-xxlarge { width: 530px; } | |||||
// Grid style input sizes | |||||
input[class*="span"], | |||||
select[class*="span"], | |||||
textarea[class*="span"], | |||||
.uneditable-input[class*="span"], | |||||
// Redeclare since the fluid row class is more specific | |||||
.row-fluid input[class*="span"], | |||||
.row-fluid select[class*="span"], | |||||
.row-fluid textarea[class*="span"], | |||||
.row-fluid .uneditable-input[class*="span"] { | |||||
float: none; | |||||
margin-left: 0; | |||||
} | |||||
// Ensure input-prepend/append never wraps | |||||
.input-append input[class*="span"], | |||||
.input-append .uneditable-input[class*="span"], | |||||
.input-prepend input[class*="span"], | |||||
.input-prepend .uneditable-input[class*="span"], | |||||
.row-fluid input[class*="span"], | |||||
.row-fluid select[class*="span"], | |||||
.row-fluid textarea[class*="span"], | |||||
.row-fluid .uneditable-input[class*="span"], | |||||
.row-fluid .input-prepend [class*="span"], | |||||
.row-fluid .input-append [class*="span"] { | |||||
display: inline-block; | |||||
} | |||||
// GRID SIZING FOR INPUTS | |||||
// ---------------------- | |||||
// Grid sizes | |||||
#grid > .input(@gridColumnWidth, @gridGutterWidth); | |||||
// Control row for multiple inputs per line | |||||
.controls-row { | |||||
.clearfix(); // Clear the float from controls | |||||
} | |||||
// Float to collapse white-space for proper grid alignment | |||||
.controls-row [class*="span"], | |||||
// Redeclare the fluid grid collapse since we undo the float for inputs | |||||
.row-fluid .controls-row [class*="span"] { | |||||
float: left; | |||||
} | |||||
// Explicity set top padding on all checkboxes/radios, not just first-child | |||||
.controls-row .checkbox[class*="span"], | |||||
.controls-row .radio[class*="span"] { | |||||
padding-top: 5px; | |||||
} | |||||
// DISABLED STATE | |||||
// -------------- | |||||
// Disabled and read-only inputs | |||||
input[disabled], | |||||
select[disabled], | |||||
textarea[disabled], | |||||
input[readonly], | |||||
select[readonly], | |||||
textarea[readonly] { | |||||
cursor: not-allowed; | |||||
background-color: @inputDisabledBackground; | |||||
} | |||||
// Explicitly reset the colors here | |||||
input[type="radio"][disabled], | |||||
input[type="checkbox"][disabled], | |||||
input[type="radio"][readonly], | |||||
input[type="checkbox"][readonly] { | |||||
background-color: transparent; | |||||
} | |||||
// FORM FIELD FEEDBACK STATES | |||||
// -------------------------- | |||||
// Warning | |||||
.control-group.warning { | |||||
.formFieldState(@warningText, @warningText, @warningBackground); | |||||
} | |||||
// Error | |||||
.control-group.error { | |||||
.formFieldState(@errorText, @errorText, @errorBackground); | |||||
} | |||||
// Success | |||||
.control-group.success { | |||||
.formFieldState(@successText, @successText, @successBackground); | |||||
} | |||||
// Success | |||||
.control-group.info { | |||||
.formFieldState(@infoText, @infoText, @infoBackground); | |||||
} | |||||
// HTML5 invalid states | |||||
// Shares styles with the .control-group.error above | |||||
input:focus:invalid, | |||||
textarea:focus:invalid, | |||||
select:focus:invalid { | |||||
color: #b94a48; | |||||
border-color: #ee5f5b; | |||||
&:focus { | |||||
border-color: darken(#ee5f5b, 10%); | |||||
@shadow: 0 0 6px lighten(#ee5f5b, 20%); | |||||
.box-shadow(@shadow); | |||||
} | |||||
} | |||||
// FORM ACTIONS | |||||
// ------------ | |||||
.form-actions { | |||||
padding: (@baseLineHeight - 1) 20px @baseLineHeight; | |||||
margin-top: @baseLineHeight; | |||||
margin-bottom: @baseLineHeight; | |||||
background-color: @formActionsBackground; | |||||
border-top: 1px solid #e5e5e5; | |||||
.clearfix(); // Adding clearfix to allow for .pull-right button containers | |||||
} | |||||
// HELP TEXT | |||||
// --------- | |||||
.help-block, | |||||
.help-inline { | |||||
color: lighten(@textColor, 15%); // lighten the text some for contrast | |||||
} | |||||
.help-block { | |||||
display: block; // account for any element using help-block | |||||
margin-bottom: @baseLineHeight / 2; | |||||
} | |||||
.help-inline { | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
vertical-align: middle; | |||||
padding-left: 5px; | |||||
} | |||||
// INPUT GROUPS | |||||
// ------------ | |||||
// Allow us to put symbols and text within the input field for a cleaner look | |||||
.input-append, | |||||
.input-prepend { | |||||
display: inline-block; | |||||
margin-bottom: @baseLineHeight / 2; | |||||
vertical-align: middle; | |||||
font-size: 0; // white space collapse hack | |||||
white-space: nowrap; // Prevent span and input from separating | |||||
// Reset the white space collapse hack | |||||
input, | |||||
select, | |||||
.uneditable-input, | |||||
.dropdown-menu, | |||||
.popover { | |||||
font-size: @baseFontSize; | |||||
} | |||||
input, | |||||
select, | |||||
.uneditable-input { | |||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness | |||||
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms | |||||
*margin-left: 0; | |||||
vertical-align: top; | |||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); | |||||
// Make input on top when focused so blue border and shadow always show | |||||
&:focus { | |||||
z-index: 2; | |||||
} | |||||
} | |||||
.add-on { | |||||
display: inline-block; | |||||
width: auto; | |||||
height: @baseLineHeight; | |||||
min-width: 16px; | |||||
padding: 4px 5px; | |||||
font-size: @baseFontSize; | |||||
font-weight: normal; | |||||
line-height: @baseLineHeight; | |||||
text-align: center; | |||||
text-shadow: 0 1px 0 @white; | |||||
background-color: @grayLighter; | |||||
border: 1px solid #ccc; | |||||
} | |||||
.add-on, | |||||
.btn, | |||||
.btn-group > .dropdown-toggle { | |||||
vertical-align: top; | |||||
.border-radius(0); | |||||
} | |||||
.active { | |||||
background-color: lighten(@green, 30); | |||||
border-color: @green; | |||||
} | |||||
} | |||||
.input-prepend { | |||||
.add-on, | |||||
.btn { | |||||
margin-right: -1px; | |||||
} | |||||
.add-on:first-child, | |||||
.btn:first-child { | |||||
// FYI, `.btn:first-child` accounts for a button group that's prepended | |||||
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); | |||||
} | |||||
} | |||||
.input-append { | |||||
input, | |||||
select, | |||||
.uneditable-input { | |||||
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); | |||||
+ .btn-group .btn:last-child { | |||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); | |||||
} | |||||
} | |||||
.add-on, | |||||
.btn, | |||||
.btn-group { | |||||
margin-left: -1px; | |||||
} | |||||
.add-on:last-child, | |||||
.btn:last-child, | |||||
.btn-group:last-child > .dropdown-toggle { | |||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); | |||||
} | |||||
} | |||||
// Remove all border-radius for inputs with both prepend and append | |||||
.input-prepend.input-append { | |||||
input, | |||||
select, | |||||
.uneditable-input { | |||||
.border-radius(0); | |||||
+ .btn-group .btn { | |||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); | |||||
} | |||||
} | |||||
.add-on:first-child, | |||||
.btn:first-child { | |||||
margin-right: -1px; | |||||
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); | |||||
} | |||||
.add-on:last-child, | |||||
.btn:last-child { | |||||
margin-left: -1px; | |||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); | |||||
} | |||||
.btn-group:first-child { | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
// SEARCH FORM | |||||
// ----------- | |||||
input.search-query { | |||||
padding-right: 14px; | |||||
padding-right: 4px \9; | |||||
padding-left: 14px; | |||||
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ | |||||
margin-bottom: 0; // Remove the default margin on all inputs | |||||
.border-radius(15px); | |||||
} | |||||
/* Allow for input prepend/append in search forms */ | |||||
.form-search .input-append .search-query, | |||||
.form-search .input-prepend .search-query { | |||||
.border-radius(0); // Override due to specificity | |||||
} | |||||
.form-search .input-append .search-query { | |||||
.border-radius(14px 0 0 14px); | |||||
} | |||||
.form-search .input-append .btn { | |||||
.border-radius(0 14px 14px 0); | |||||
} | |||||
.form-search .input-prepend .search-query { | |||||
.border-radius(0 14px 14px 0); | |||||
} | |||||
.form-search .input-prepend .btn { | |||||
.border-radius(14px 0 0 14px); | |||||
} | |||||
// HORIZONTAL & VERTICAL FORMS | |||||
// --------------------------- | |||||
// Common properties | |||||
// ----------------- | |||||
.form-search, | |||||
.form-inline, | |||||
.form-horizontal { | |||||
input, | |||||
textarea, | |||||
select, | |||||
.help-inline, | |||||
.uneditable-input, | |||||
.input-prepend, | |||||
.input-append { | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
} | |||||
// Re-hide hidden elements due to specifity | |||||
.hide { | |||||
display: none; | |||||
} | |||||
} | |||||
.form-search label, | |||||
.form-inline label, | |||||
.form-search .btn-group, | |||||
.form-inline .btn-group { | |||||
display: inline-block; | |||||
} | |||||
// Remove margin for input-prepend/-append | |||||
.form-search .input-append, | |||||
.form-inline .input-append, | |||||
.form-search .input-prepend, | |||||
.form-inline .input-prepend { | |||||
margin-bottom: 0; | |||||
} | |||||
// Inline checkbox/radio labels (remove padding on left) | |||||
.form-search .radio, | |||||
.form-search .checkbox, | |||||
.form-inline .radio, | |||||
.form-inline .checkbox { | |||||
padding-left: 0; | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
} | |||||
// Remove float and margin, set to inline-block | |||||
.form-search .radio input[type="radio"], | |||||
.form-search .checkbox input[type="checkbox"], | |||||
.form-inline .radio input[type="radio"], | |||||
.form-inline .checkbox input[type="checkbox"] { | |||||
float: left; | |||||
margin-right: 3px; | |||||
margin-left: 0; | |||||
} | |||||
// Margin to space out fieldsets | |||||
.control-group { | |||||
margin-bottom: @baseLineHeight / 2; | |||||
} | |||||
// Legend collapses margin, so next element is responsible for spacing | |||||
legend + .control-group { | |||||
margin-top: @baseLineHeight; | |||||
-webkit-margin-top-collapse: separate; | |||||
} | |||||
// Horizontal-specific styles | |||||
// -------------------------- | |||||
.form-horizontal { | |||||
// Increase spacing between groups | |||||
.control-group { | |||||
margin-bottom: @baseLineHeight; | |||||
.clearfix(); | |||||
} | |||||
// Float the labels left | |||||
.control-label { | |||||
float: left; | |||||
width: @horizontalComponentOffset - 20; | |||||
padding-top: 5px; | |||||
text-align: right; | |||||
} | |||||
// Move over all input controls and content | |||||
.controls { | |||||
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend | |||||
// don't inherit the margin of the parent, in this case .controls | |||||
*display: inline-block; | |||||
*padding-left: 20px; | |||||
margin-left: @horizontalComponentOffset; | |||||
*margin-left: 0; | |||||
&:first-child { | |||||
*padding-left: @horizontalComponentOffset; | |||||
} | |||||
} | |||||
// Remove bottom margin on block level help text since that's accounted for on .control-group | |||||
.help-block { | |||||
margin-bottom: 0; | |||||
} | |||||
// And apply it only to .help-block instances that follow a form control | |||||
input, | |||||
select, | |||||
textarea, | |||||
.uneditable-input, | |||||
.input-prepend, | |||||
.input-append { | |||||
+ .help-block { | |||||
margin-top: @baseLineHeight / 2; | |||||
} | |||||
} | |||||
// Move over buttons in .form-actions to align with .controls | |||||
.form-actions { | |||||
padding-left: @horizontalComponentOffset; | |||||
} | |||||
} |
@ -0,0 +1,21 @@ | |||||
// | |||||
// Grid system | |||||
// -------------------------------------------------- | |||||
// Fixed (940px) | |||||
#grid > .core(@gridColumnWidth, @gridGutterWidth); | |||||
// Fluid (940px) | |||||
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); | |||||
// Reset utility classes due to specificity | |||||
[class*="span"].hide, | |||||
.row-fluid [class*="span"].hide { | |||||
display: none; | |||||
} | |||||
[class*="span"].pull-right, | |||||
.row-fluid [class*="span"].pull-right { | |||||
float: right; | |||||
} |
@ -0,0 +1,25 @@ | |||||
// | |||||
// Hero unit | |||||
// -------------------------------------------------- | |||||
.hero-unit { | |||||
padding: 60px; | |||||
margin-bottom: 30px; | |||||
font-size: 18px; | |||||
font-weight: 200; | |||||
line-height: @baseLineHeight * 1.5; | |||||
color: @heroUnitLeadColor; | |||||
background-color: @heroUnitBackground; | |||||
.border-radius(6px); | |||||
h1 { | |||||
margin-bottom: 0; | |||||
font-size: 60px; | |||||
line-height: 1; | |||||
color: @heroUnitHeadingColor; | |||||
letter-spacing: -1px; | |||||
} | |||||
li { | |||||
line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less | |||||
} | |||||
} |
@ -0,0 +1,84 @@ | |||||
// | |||||
// Labels and badges | |||||
// -------------------------------------------------- | |||||
// Base classes | |||||
.label, | |||||
.badge { | |||||
display: inline-block; | |||||
padding: 2px 4px; | |||||
font-size: @baseFontSize * .846; | |||||
font-weight: bold; | |||||
line-height: 14px; // ensure proper line-height if floated | |||||
color: @white; | |||||
vertical-align: baseline; | |||||
white-space: nowrap; | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |||||
background-color: @grayLight; | |||||
} | |||||
// Set unique padding and border-radii | |||||
.label { | |||||
.border-radius(3px); | |||||
} | |||||
.badge { | |||||
padding-left: 9px; | |||||
padding-right: 9px; | |||||
.border-radius(9px); | |||||
} | |||||
// Empty labels/badges collapse | |||||
.label, | |||||
.badge { | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
} | |||||
// Hover/focus state, but only for links | |||||
a { | |||||
&.label:hover, | |||||
&.label:focus, | |||||
&.badge:hover, | |||||
&.badge:focus { | |||||
color: @white; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
// Colors | |||||
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) | |||||
.label, | |||||
.badge { | |||||
// Important (red) | |||||
&-important { background-color: @errorText; } | |||||
&-important[href] { background-color: darken(@errorText, 10%); } | |||||
// Warnings (orange) | |||||
&-warning { background-color: @orange; } | |||||
&-warning[href] { background-color: darken(@orange, 10%); } | |||||
// Success (green) | |||||
&-success { background-color: @successText; } | |||||
&-success[href] { background-color: darken(@successText, 10%); } | |||||
// Info (turquoise) | |||||
&-info { background-color: @infoText; } | |||||
&-info[href] { background-color: darken(@infoText, 10%); } | |||||
// Inverse (black) | |||||
&-inverse { background-color: @grayDark; } | |||||
&-inverse[href] { background-color: darken(@grayDark, 10%); } | |||||
} | |||||
// Quick fix for labels/badges in buttons | |||||
.btn { | |||||
.label, | |||||
.badge { | |||||
position: relative; | |||||
top: -1px; | |||||
} | |||||
} | |||||
.btn-mini { | |||||
.label, | |||||
.badge { | |||||
top: 0; | |||||
} | |||||
} |
@ -0,0 +1,16 @@ | |||||
// | |||||
// Layouts | |||||
// -------------------------------------------------- | |||||
// Container (centered, fixed-width layouts) | |||||
.container { | |||||
.container-fixed(); | |||||
} | |||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content) | |||||
.container-fluid { | |||||
padding-right: @gridGutterWidth; | |||||
padding-left: @gridGutterWidth; | |||||
.clearfix(); | |||||
} |
@ -0,0 +1,55 @@ | |||||
// Media objects | |||||
// Source: http://stubbornella.org/content/?p=497 | |||||
// -------------------------------------------------- | |||||
// Common styles | |||||
// ------------------------- | |||||
// Clear the floats | |||||
.media, | |||||
.media-body { | |||||
overflow: hidden; | |||||
*overflow: visible; | |||||
zoom: 1; | |||||
} | |||||
// Proper spacing between instances of .media | |||||
.media, | |||||
.media .media { | |||||
margin-top: 15px; | |||||
} | |||||
.media:first-child { | |||||
margin-top: 0; | |||||
} | |||||
// For images and videos, set to block | |||||
.media-object { | |||||
display: block; | |||||
} | |||||
// Reset margins on headings for tighter default spacing | |||||
.media-heading { | |||||
margin: 0 0 5px; | |||||
} | |||||
// Media image alignment | |||||
// ------------------------- | |||||
.media > .pull-left { | |||||
margin-right: 10px; | |||||
} | |||||
.media > .pull-right { | |||||
margin-left: 10px; | |||||
} | |||||
// Media list variation | |||||
// ------------------------- | |||||
// Undo default ul/ol styles | |||||
.media-list { | |||||
margin-left: 0; | |||||
list-style: none; | |||||
} |
@ -0,0 +1,702 @@ | |||||
// | |||||
// Mixins | |||||
// -------------------------------------------------- | |||||
// UTILITY MIXINS | |||||
// -------------------------------------------------- | |||||
// Clearfix | |||||
// -------- | |||||
// For clearing floats like a boss h5bp.com/q | |||||
.clearfix { | |||||
*zoom: 1; | |||||
&:before, | |||||
&:after { | |||||
display: table; | |||||
content: ""; | |||||
// Fixes Opera/contenteditable bug: | |||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 | |||||
line-height: 0; | |||||
} | |||||
&:after { | |||||
clear: both; | |||||
} | |||||
} | |||||
// Webkit-style focus | |||||
// ------------------ | |||||
.tab-focus() { | |||||
// Default | |||||
outline: thin dotted #333; | |||||
// Webkit | |||||
outline: 5px auto -webkit-focus-ring-color; | |||||
outline-offset: -2px; | |||||
} | |||||
// Center-align a block level element | |||||
// ---------------------------------- | |||||
.center-block() { | |||||
display: block; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
// IE7 inline-block | |||||
// ---------------- | |||||
.ie7-inline-block() { | |||||
*display: inline; /* IE7 inline-block hack */ | |||||
*zoom: 1; | |||||
} | |||||
// IE7 likes to collapse whitespace on either side of the inline-block elements. | |||||
// Ems because we're attempting to match the width of a space character. Left | |||||
// version is for form buttons, which typically come after other elements, and | |||||
// right version is for icons, which come before. Applying both is ok, but it will | |||||
// mean that space between those elements will be .6em (~2 space characters) in IE7, | |||||
// instead of the 1 space in other browsers. | |||||
.ie7-restore-left-whitespace() { | |||||
*margin-left: .3em; | |||||
&:first-child { | |||||
*margin-left: 0; | |||||
} | |||||
} | |||||
.ie7-restore-right-whitespace() { | |||||
*margin-right: .3em; | |||||
} | |||||
// Sizing shortcuts | |||||
// ------------------------- | |||||
.size(@height, @width) { | |||||
width: @width; | |||||
height: @height; | |||||
} | |||||
.square(@size) { | |||||
.size(@size, @size); | |||||
} | |||||
// Placeholder text | |||||
// ------------------------- | |||||
.placeholder(@color: @placeholderText) { | |||||
&:-moz-placeholder { | |||||
color: @color; | |||||
} | |||||
&:-ms-input-placeholder { | |||||
color: @color; | |||||
} | |||||
&::-webkit-input-placeholder { | |||||
color: @color; | |||||
} | |||||
} | |||||
// Text overflow | |||||
// ------------------------- | |||||
// Requires inline-block or block for proper styling | |||||
.text-overflow() { | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
white-space: nowrap; | |||||
} | |||||
// CSS image replacement | |||||
// ------------------------- | |||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 | |||||
.hide-text { | |||||
font: 0/0 a; | |||||
color: transparent; | |||||
text-shadow: none; | |||||
background-color: transparent; | |||||
border: 0; | |||||
} | |||||
// FONTS | |||||
// -------------------------------------------------- | |||||
#font { | |||||
#family { | |||||
.serif() { | |||||
font-family: @serifFontFamily; | |||||
} | |||||
.sans-serif() { | |||||
font-family: @sansFontFamily; | |||||
} | |||||
.monospace() { | |||||
font-family: @monoFontFamily; | |||||
} | |||||
} | |||||
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { | |||||
font-size: @size; | |||||
font-weight: @weight; | |||||
line-height: @lineHeight; | |||||
} | |||||
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { | |||||
#font > #family > .serif; | |||||
#font > .shorthand(@size, @weight, @lineHeight); | |||||
} | |||||
.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { | |||||
#font > #family > .sans-serif; | |||||
#font > .shorthand(@size, @weight, @lineHeight); | |||||
} | |||||
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { | |||||
#font > #family > .monospace; | |||||
#font > .shorthand(@size, @weight, @lineHeight); | |||||
} | |||||
} | |||||
// FORMS | |||||
// -------------------------------------------------- | |||||
// Block level inputs | |||||
.input-block-level { | |||||
display: block; | |||||
width: 100%; | |||||
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) | |||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements | |||||
} | |||||
// Mixin for form field states | |||||
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { | |||||
// Set the text color | |||||
.control-label, | |||||
.help-block, | |||||
.help-inline { | |||||
color: @textColor; | |||||
} | |||||
// Style inputs accordingly | |||||
.checkbox, | |||||
.radio, | |||||
input, | |||||
select, | |||||
textarea { | |||||
color: @textColor; | |||||
} | |||||
input, | |||||
select, | |||||
textarea { | |||||
border-color: @borderColor; | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work | |||||
&:focus { | |||||
border-color: darken(@borderColor, 10%); | |||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); | |||||
.box-shadow(@shadow); | |||||
} | |||||
} | |||||
// Give a small background color for input-prepend/-append | |||||
.input-prepend .add-on, | |||||
.input-append .add-on { | |||||
color: @textColor; | |||||
background-color: @backgroundColor; | |||||
border-color: @textColor; | |||||
} | |||||
} | |||||
// CSS3 PROPERTIES | |||||
// -------------------------------------------------- | |||||
// Border Radius | |||||
.border-radius(@radius) { | |||||
-webkit-border-radius: @radius; | |||||
-moz-border-radius: @radius; | |||||
border-radius: @radius; | |||||
} | |||||
// Single Corner Border Radius | |||||
.border-top-left-radius(@radius) { | |||||
-webkit-border-top-left-radius: @radius; | |||||
-moz-border-radius-topleft: @radius; | |||||
border-top-left-radius: @radius; | |||||
} | |||||
.border-top-right-radius(@radius) { | |||||
-webkit-border-top-right-radius: @radius; | |||||
-moz-border-radius-topright: @radius; | |||||
border-top-right-radius: @radius; | |||||
} | |||||
.border-bottom-right-radius(@radius) { | |||||
-webkit-border-bottom-right-radius: @radius; | |||||
-moz-border-radius-bottomright: @radius; | |||||
border-bottom-right-radius: @radius; | |||||
} | |||||
.border-bottom-left-radius(@radius) { | |||||
-webkit-border-bottom-left-radius: @radius; | |||||
-moz-border-radius-bottomleft: @radius; | |||||
border-bottom-left-radius: @radius; | |||||
} | |||||
// Single Side Border Radius | |||||
.border-top-radius(@radius) { | |||||
.border-top-right-radius(@radius); | |||||
.border-top-left-radius(@radius); | |||||
} | |||||
.border-right-radius(@radius) { | |||||
.border-top-right-radius(@radius); | |||||
.border-bottom-right-radius(@radius); | |||||
} | |||||
.border-bottom-radius(@radius) { | |||||
.border-bottom-right-radius(@radius); | |||||
.border-bottom-left-radius(@radius); | |||||
} | |||||
.border-left-radius(@radius) { | |||||
.border-top-left-radius(@radius); | |||||
.border-bottom-left-radius(@radius); | |||||
} | |||||
// Drop shadows | |||||
.box-shadow(@shadow) { | |||||
-webkit-box-shadow: @shadow; | |||||
-moz-box-shadow: @shadow; | |||||
box-shadow: @shadow; | |||||
} | |||||
// Transitions | |||||
.transition(@transition) { | |||||
-webkit-transition: @transition; | |||||
-moz-transition: @transition; | |||||
-o-transition: @transition; | |||||
transition: @transition; | |||||
} | |||||
.transition-delay(@transition-delay) { | |||||
-webkit-transition-delay: @transition-delay; | |||||
-moz-transition-delay: @transition-delay; | |||||
-o-transition-delay: @transition-delay; | |||||
transition-delay: @transition-delay; | |||||
} | |||||
.transition-duration(@transition-duration) { | |||||
-webkit-transition-duration: @transition-duration; | |||||
-moz-transition-duration: @transition-duration; | |||||
-o-transition-duration: @transition-duration; | |||||
transition-duration: @transition-duration; | |||||
} | |||||
// Transformations | |||||
.rotate(@degrees) { | |||||
-webkit-transform: rotate(@degrees); | |||||
-moz-transform: rotate(@degrees); | |||||
-ms-transform: rotate(@degrees); | |||||
-o-transform: rotate(@degrees); | |||||
transform: rotate(@degrees); | |||||
} | |||||
.scale(@ratio) { | |||||
-webkit-transform: scale(@ratio); | |||||
-moz-transform: scale(@ratio); | |||||
-ms-transform: scale(@ratio); | |||||
-o-transform: scale(@ratio); | |||||
transform: scale(@ratio); | |||||
} | |||||
.translate(@x, @y) { | |||||
-webkit-transform: translate(@x, @y); | |||||
-moz-transform: translate(@x, @y); | |||||
-ms-transform: translate(@x, @y); | |||||
-o-transform: translate(@x, @y); | |||||
transform: translate(@x, @y); | |||||
} | |||||
.skew(@x, @y) { | |||||
-webkit-transform: skew(@x, @y); | |||||
-moz-transform: skew(@x, @y); | |||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885 | |||||
-o-transform: skew(@x, @y); | |||||
transform: skew(@x, @y); | |||||
-webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 | |||||
} | |||||
.translate3d(@x, @y, @z) { | |||||
-webkit-transform: translate3d(@x, @y, @z); | |||||
-moz-transform: translate3d(@x, @y, @z); | |||||
-o-transform: translate3d(@x, @y, @z); | |||||
transform: translate3d(@x, @y, @z); | |||||
} | |||||
// Backface visibility | |||||
// Prevent browsers from flickering when using CSS 3D transforms. | |||||
// Default value is `visible`, but can be changed to `hidden | |||||
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples | |||||
.backface-visibility(@visibility){ | |||||
-webkit-backface-visibility: @visibility; | |||||
-moz-backface-visibility: @visibility; | |||||
backface-visibility: @visibility; | |||||
} | |||||
// Background clipping | |||||
// Heads up: FF 3.6 and under need "padding" instead of "padding-box" | |||||
.background-clip(@clip) { | |||||
-webkit-background-clip: @clip; | |||||
-moz-background-clip: @clip; | |||||
background-clip: @clip; | |||||
} | |||||
// Background sizing | |||||
.background-size(@size) { | |||||
-webkit-background-size: @size; | |||||
-moz-background-size: @size; | |||||
-o-background-size: @size; | |||||
background-size: @size; | |||||
} | |||||
// Box sizing | |||||
.box-sizing(@boxmodel) { | |||||
-webkit-box-sizing: @boxmodel; | |||||
-moz-box-sizing: @boxmodel; | |||||
box-sizing: @boxmodel; | |||||
} | |||||
// User select | |||||
// For selecting text on the page | |||||
.user-select(@select) { | |||||
-webkit-user-select: @select; | |||||
-moz-user-select: @select; | |||||
-ms-user-select: @select; | |||||
-o-user-select: @select; | |||||
user-select: @select; | |||||
} | |||||
// Resize anything | |||||
.resizable(@direction) { | |||||
resize: @direction; // Options: horizontal, vertical, both | |||||
overflow: auto; // Safari fix | |||||
} | |||||
// CSS3 Content Columns | |||||
.content-columns(@columnCount, @columnGap: @gridGutterWidth) { | |||||
-webkit-column-count: @columnCount; | |||||
-moz-column-count: @columnCount; | |||||
column-count: @columnCount; | |||||
-webkit-column-gap: @columnGap; | |||||
-moz-column-gap: @columnGap; | |||||
column-gap: @columnGap; | |||||
} | |||||
// Optional hyphenation | |||||
.hyphens(@mode: auto) { | |||||
word-wrap: break-word; | |||||
-webkit-hyphens: @mode; | |||||
-moz-hyphens: @mode; | |||||
-ms-hyphens: @mode; | |||||
-o-hyphens: @mode; | |||||
hyphens: @mode; | |||||
} | |||||
// Opacity | |||||
.opacity(@opacity) { | |||||
opacity: @opacity / 100; | |||||
filter: ~"alpha(opacity=@{opacity})"; | |||||
} | |||||
// BACKGROUNDS | |||||
// -------------------------------------------------- | |||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay) | |||||
#translucent { | |||||
.background(@color: @white, @alpha: 1) { | |||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); | |||||
} | |||||
.border(@color: @white, @alpha: 1) { | |||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); | |||||
.background-clip(padding-box); | |||||
} | |||||
} | |||||
// Gradient Bar Colors for buttons and alerts | |||||
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { | |||||
color: @textColor; | |||||
text-shadow: @textShadow; | |||||
#gradient > .vertical(@primaryColor, @secondaryColor); | |||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); | |||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); | |||||
} | |||||
// Gradients | |||||
#gradient { | |||||
.horizontal(@startColor: #555, @endColor: #333) { | |||||
background-color: @endColor; | |||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ | |||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ | |||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ | |||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 | |||||
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 | |||||
background-repeat: repeat-x; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down | |||||
} | |||||
.vertical(@startColor: #555, @endColor: #333) { | |||||
background-color: mix(@startColor, @endColor, 60%); | |||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ | |||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ | |||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ | |||||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 | |||||
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 | |||||
background-repeat: repeat-x; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down | |||||
} | |||||
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) { | |||||
background-color: @endColor; | |||||
background-repeat: repeat-x; | |||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ | |||||
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ | |||||
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 | |||||
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 | |||||
} | |||||
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { | |||||
background-color: mix(@midColor, @endColor, 80%); | |||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); | |||||
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); | |||||
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); | |||||
background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); | |||||
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); | |||||
background-repeat: no-repeat; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback | |||||
} | |||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { | |||||
background-color: mix(@midColor, @endColor, 80%); | |||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); | |||||
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); | |||||
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); | |||||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); | |||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); | |||||
background-repeat: no-repeat; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback | |||||
} | |||||
.radial(@innerColor: #555, @outerColor: #333) { | |||||
background-color: @outerColor; | |||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); | |||||
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); | |||||
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); | |||||
background-image: -o-radial-gradient(circle, @innerColor, @outerColor); | |||||
background-repeat: no-repeat; | |||||
} | |||||
.striped(@color: #555, @angle: 45deg) { | |||||
background-color: @color; | |||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); | |||||
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); | |||||
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); | |||||
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); | |||||
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); | |||||
} | |||||
} | |||||
// Reset filters for IE | |||||
.reset-filter() { | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); | |||||
} | |||||
// COMPONENT MIXINS | |||||
// -------------------------------------------------- | |||||
// Horizontal dividers | |||||
// ------------------------- | |||||
// Dividers (basically an hr) within dropdowns and nav lists | |||||
.nav-divider(@top: #e5e5e5, @bottom: @white) { | |||||
// IE7 needs a set width since we gave a height. Restricting just | |||||
// to IE7 to keep the 1px left/right space in other browsers. | |||||
// It is unclear where IE is getting the extra space that we need | |||||
// to negative-margin away, but so it goes. | |||||
*width: 100%; | |||||
height: 1px; | |||||
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px | |||||
*margin: -5px 0 5px; | |||||
overflow: hidden; | |||||
background-color: @top; | |||||
border-bottom: 1px solid @bottom; | |||||
} | |||||
// Button backgrounds | |||||
// ------------------ | |||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { | |||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 | |||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow); | |||||
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||||
.reset-filter(); | |||||
// in these cases the gradient won't cover the background, so we override | |||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { | |||||
color: @textColor; | |||||
background-color: @endColor; | |||||
*background-color: darken(@endColor, 5%); | |||||
} | |||||
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves | |||||
&:active, | |||||
&.active { | |||||
background-color: darken(@endColor, 10%) e("\9"); | |||||
} | |||||
} | |||||
// Navbar vertical align | |||||
// ------------------------- | |||||
// Vertically center elements in the navbar. | |||||
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. | |||||
.navbarVerticalAlign(@elementHeight) { | |||||
margin-top: (@navbarHeight - @elementHeight) / 2; | |||||
} | |||||
// Grid System | |||||
// ----------- | |||||
// Centered container element | |||||
.container-fixed() { | |||||
margin-right: auto; | |||||
margin-left: auto; | |||||
.clearfix(); | |||||
} | |||||
// Table columns | |||||
.tableColumns(@columnSpan: 1) { | |||||
float: none; // undo default grid column styles | |||||
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells | |||||
margin-left: 0; // undo default grid column styles | |||||
} | |||||
// Make a Grid | |||||
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior | |||||
.makeRow() { | |||||
margin-left: @gridGutterWidth * -1; | |||||
.clearfix(); | |||||
} | |||||
.makeColumn(@columns: 1, @offset: 0) { | |||||
float: left; | |||||
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); | |||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); | |||||
} | |||||
// The Grid | |||||
#grid { | |||||
.core (@gridColumnWidth, @gridGutterWidth) { | |||||
.spanX (@index) when (@index > 0) { | |||||
.span@{index} { .span(@index); } | |||||
.spanX(@index - 1); | |||||
} | |||||
.spanX (0) {} | |||||
.offsetX (@index) when (@index > 0) { | |||||
.offset@{index} { .offset(@index); } | |||||
.offsetX(@index - 1); | |||||
} | |||||
.offsetX (0) {} | |||||
.offset (@columns) { | |||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); | |||||
} | |||||
.span (@columns) { | |||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); | |||||
} | |||||
.row { | |||||
margin-left: @gridGutterWidth * -1; | |||||
.clearfix(); | |||||
} | |||||
[class*="span"] { | |||||
float: left; | |||||
min-height: 1px; // prevent collapsing columns | |||||
margin-left: @gridGutterWidth; | |||||
} | |||||
// Set the container width, and override it for fixed navbars in media queries | |||||
.container, | |||||
.navbar-static-top .container, | |||||
.navbar-fixed-top .container, | |||||
.navbar-fixed-bottom .container { .span(@gridColumns); } | |||||
// generate .spanX and .offsetX | |||||
.spanX (@gridColumns); | |||||
.offsetX (@gridColumns); | |||||
} | |||||
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { | |||||
.spanX (@index) when (@index > 0) { | |||||
.span@{index} { .span(@index); } | |||||
.spanX(@index - 1); | |||||
} | |||||
.spanX (0) {} | |||||
.offsetX (@index) when (@index > 0) { | |||||
.offset@{index} { .offset(@index); } | |||||
.offset@{index}:first-child { .offsetFirstChild(@index); } | |||||
.offsetX(@index - 1); | |||||
} | |||||
.offsetX (0) {} | |||||
.offset (@columns) { | |||||
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); | |||||
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); | |||||
} | |||||
.offsetFirstChild (@columns) { | |||||
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); | |||||
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); | |||||
} | |||||
.span (@columns) { | |||||
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); | |||||
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); | |||||
} | |||||
.row-fluid { | |||||
width: 100%; | |||||
.clearfix(); | |||||
[class*="span"] { | |||||
.input-block-level(); | |||||
float: left; | |||||
margin-left: @fluidGridGutterWidth; | |||||
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); | |||||
} | |||||
[class*="span"]:first-child { | |||||
margin-left: 0; | |||||
} | |||||
// Space grid-sized controls properly if multiple per line | |||||
.controls-row [class*="span"] + [class*="span"] { | |||||
margin-left: @fluidGridGutterWidth; | |||||
} | |||||
// generate .spanX and .offsetX | |||||
.spanX (@gridColumns); | |||||
.offsetX (@gridColumns); | |||||
} | |||||
} | |||||
.input(@gridColumnWidth, @gridGutterWidth) { | |||||
.spanX (@index) when (@index > 0) { | |||||
input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); } | |||||
.spanX(@index - 1); | |||||
} | |||||
.spanX (0) {} | |||||
.span(@columns) { | |||||
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; | |||||
} | |||||
input, | |||||
textarea, | |||||
.uneditable-input { | |||||
margin-left: 0; // override margin-left from core grid system | |||||
} | |||||
// Space grid-sized controls properly if multiple per line | |||||
.controls-row [class*="span"] + [class*="span"] { | |||||
margin-left: @gridGutterWidth; | |||||
} | |||||
// generate .spanX | |||||
.spanX (@gridColumns); | |||||
} | |||||
} |
@ -0,0 +1,95 @@ | |||||
// | |||||
// Modals | |||||
// -------------------------------------------------- | |||||
// Background | |||||
.modal-backdrop { | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
left: 0; | |||||
z-index: @zindexModalBackdrop; | |||||
background-color: @black; | |||||
// Fade for backdrop | |||||
&.fade { opacity: 0; } | |||||
} | |||||
.modal-backdrop, | |||||
.modal-backdrop.fade.in { | |||||
.opacity(80); | |||||
} | |||||
// Base modal | |||||
.modal { | |||||
position: fixed; | |||||
top: 10%; | |||||
left: 50%; | |||||
z-index: @zindexModal; | |||||
width: 560px; | |||||
margin-left: -280px; | |||||
background-color: @white; | |||||
border: 1px solid #999; | |||||
border: 1px solid rgba(0,0,0,.3); | |||||
*border: 1px solid #999; /* IE6-7 */ | |||||
.border-radius(6px); | |||||
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); | |||||
.background-clip(padding-box); | |||||
// Remove focus outline from opened modal | |||||
outline: none; | |||||
&.fade { | |||||
.transition(e('opacity .3s linear, top .3s ease-out')); | |||||
top: -25%; | |||||
} | |||||
&.fade.in { top: 10%; } | |||||
} | |||||
.modal-header { | |||||
padding: 9px 15px; | |||||
border-bottom: 1px solid #eee; | |||||
// Close icon | |||||
.close { margin-top: 2px; } | |||||
// Heading | |||||
h3 { | |||||
margin: 0; | |||||
line-height: 30px; | |||||
} | |||||
} | |||||
// Body (where all modal content resides) | |||||
.modal-body { | |||||
position: relative; | |||||
overflow-y: auto; | |||||
max-height: 400px; | |||||
padding: 15px; | |||||
} | |||||
// Remove bottom margin if need be | |||||
.modal-form { | |||||
margin-bottom: 0; | |||||
} | |||||
// Footer (for actions) | |||||
.modal-footer { | |||||
padding: 14px 15px 15px; | |||||
margin-bottom: 0; | |||||
text-align: right; // right align buttons | |||||
background-color: #f5f5f5; | |||||
border-top: 1px solid #ddd; | |||||
.border-radius(0 0 6px 6px); | |||||
.box-shadow(inset 0 1px 0 @white); | |||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons | |||||
// Properly space out buttons | |||||
.btn + .btn { | |||||
margin-left: 5px; | |||||
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | |||||
} | |||||
// but override that for button groups | |||||
.btn-group .btn + .btn { | |||||
margin-left: -1px; | |||||
} | |||||
// and override it for block buttons as well | |||||
.btn-block + .btn-block { | |||||
margin-left: 0; | |||||
} | |||||
} |
@ -0,0 +1,494 @@ | |||||
// | |||||
// Navbars (Redux) | |||||
// -------------------------------------------------- | |||||
// COMMON STYLES | |||||
// ------------- | |||||
// Base class and wrapper | |||||
.navbar { | |||||
overflow: visible; | |||||
margin-bottom: @baseLineHeight; | |||||
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar | |||||
*position: relative; | |||||
*z-index: 2; | |||||
} | |||||
// Inner for background effects | |||||
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present | |||||
.navbar-inner { | |||||
min-height: @navbarHeight; | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); | |||||
border: 1px solid @navbarBorder; | |||||
.border-radius(@baseBorderRadius); | |||||
.box-shadow(0 1px 4px rgba(0,0,0,.065)); | |||||
// Prevent floats from breaking the navbar | |||||
.clearfix(); | |||||
} | |||||
// Set width to auto for default container | |||||
// We then reset it for fixed navbars in the #gridSystem mixin | |||||
.navbar .container { | |||||
width: auto; | |||||
} | |||||
// Override the default collapsed state | |||||
.nav-collapse.collapse { | |||||
height: auto; | |||||
overflow: visible; | |||||
} | |||||
// Brand: website or project name | |||||
// ------------------------- | |||||
.navbar .brand { | |||||
float: left; | |||||
display: block; | |||||
// Vertically center the text given @navbarHeight | |||||
padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2); | |||||
margin-left: -20px; // negative indent to left-align the text down the page | |||||
font-size: 20px; | |||||
font-weight: 200; | |||||
color: @navbarBrandColor; | |||||
text-shadow: 0 1px 0 @navbarBackgroundHighlight; | |||||
&:hover, | |||||
&:focus { | |||||
text-decoration: none; | |||||
} | |||||
} | |||||
// Plain text in topbar | |||||
// ------------------------- | |||||
.navbar-text { | |||||
margin-bottom: 0; | |||||
line-height: @navbarHeight; | |||||
color: @navbarText; | |||||
} | |||||
// Janky solution for now to account for links outside the .nav | |||||
// ------------------------- | |||||
.navbar-link { | |||||
color: @navbarLinkColor; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbarLinkColorHover; | |||||
} | |||||
} | |||||
// Dividers in navbar | |||||
// ------------------------- | |||||
.navbar .divider-vertical { | |||||
height: @navbarHeight; | |||||
margin: 0 9px; | |||||
border-left: 1px solid @navbarBackground; | |||||
border-right: 1px solid @navbarBackgroundHighlight; | |||||
} | |||||
// Buttons in navbar | |||||
// ------------------------- | |||||
.navbar .btn, | |||||
.navbar .btn-group { | |||||
.navbarVerticalAlign(30px); // Vertically center in navbar | |||||
} | |||||
.navbar .btn-group .btn, | |||||
.navbar .input-prepend .btn, | |||||
.navbar .input-append .btn, | |||||
.navbar .input-prepend .btn-group, | |||||
.navbar .input-append .btn-group { | |||||
margin-top: 0; // then undo the margin here so we don't accidentally double it | |||||
} | |||||
// Navbar forms | |||||
// ------------------------- | |||||
.navbar-form { | |||||
margin-bottom: 0; // remove default bottom margin | |||||
.clearfix(); | |||||
input, | |||||
select, | |||||
.radio, | |||||
.checkbox { | |||||
.navbarVerticalAlign(30px); // Vertically center in navbar | |||||
} | |||||
input, | |||||
select, | |||||
.btn { | |||||
display: inline-block; | |||||
margin-bottom: 0; | |||||
} | |||||
input[type="image"], | |||||
input[type="checkbox"], | |||||
input[type="radio"] { | |||||
margin-top: 3px; | |||||
} | |||||
.input-append, | |||||
.input-prepend { | |||||
margin-top: 5px; | |||||
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left | |||||
input { | |||||
margin-top: 0; // remove the margin on top since it's on the parent | |||||
} | |||||
} | |||||
} | |||||
// Navbar search | |||||
// ------------------------- | |||||
.navbar-search { | |||||
position: relative; | |||||
float: left; | |||||
.navbarVerticalAlign(30px); // Vertically center in navbar | |||||
margin-bottom: 0; | |||||
.search-query { | |||||
margin-bottom: 0; | |||||
padding: 4px 14px; | |||||
#font > .sans-serif(13px, normal, 1); | |||||
.border-radius(15px); // redeclare because of specificity of the type attribute | |||||
} | |||||
} | |||||
// Static navbar | |||||
// ------------------------- | |||||
.navbar-static-top { | |||||
position: static; | |||||
margin-bottom: 0; // remove 18px margin for default navbar | |||||
.navbar-inner { | |||||
.border-radius(0); | |||||
} | |||||
} | |||||
// Fixed navbar | |||||
// ------------------------- | |||||
// Shared (top/bottom) styles | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom { | |||||
position: fixed; | |||||
right: 0; | |||||
left: 0; | |||||
z-index: @zindexFixedNavbar; | |||||
margin-bottom: 0; // remove 18px margin for default navbar | |||||
} | |||||
.navbar-fixed-top .navbar-inner, | |||||
.navbar-static-top .navbar-inner { | |||||
border-width: 0 0 1px; | |||||
} | |||||
.navbar-fixed-bottom .navbar-inner { | |||||
border-width: 1px 0 0; | |||||
} | |||||
.navbar-fixed-top .navbar-inner, | |||||
.navbar-fixed-bottom .navbar-inner { | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
.border-radius(0); | |||||
} | |||||
// Reset container width | |||||
// Required here as we reset the width earlier on and the grid mixins don't override early enough | |||||
.navbar-static-top .container, | |||||
.navbar-fixed-top .container, | |||||
.navbar-fixed-bottom .container { | |||||
#grid > .core > .span(@gridColumns); | |||||
} | |||||
// Fixed to top | |||||
.navbar-fixed-top { | |||||
top: 0; | |||||
} | |||||
.navbar-fixed-top, | |||||
.navbar-static-top { | |||||
.navbar-inner { | |||||
.box-shadow(~"0 1px 10px rgba(0,0,0,.1)"); | |||||
} | |||||
} | |||||
// Fixed to bottom | |||||
.navbar-fixed-bottom { | |||||
bottom: 0; | |||||
.navbar-inner { | |||||
.box-shadow(~"0 -1px 10px rgba(0,0,0,.1)"); | |||||
} | |||||
} | |||||
// NAVIGATION | |||||
// ---------- | |||||
.navbar .nav { | |||||
position: relative; | |||||
left: 0; | |||||
display: block; | |||||
float: left; | |||||
margin: 0 10px 0 0; | |||||
} | |||||
.navbar .nav.pull-right { | |||||
float: right; // redeclare due to specificity | |||||
margin-right: 0; // remove margin on float right nav | |||||
} | |||||
.navbar .nav > li { | |||||
float: left; | |||||
} | |||||
// Links | |||||
.navbar .nav > li > a { | |||||
color: @navbarLinkColor; | |||||
text-decoration: none; | |||||
text-shadow: 0 1px 0 @navbarBackgroundHighlight; | |||||
} | |||||
.navbar .nav .dropdown-toggle .caret { | |||||
margin-top: 8px; | |||||
} | |||||
// Hover/focus | |||||
.navbar .nav > li > a:focus, | |||||
.navbar .nav > li > a:hover { | |||||
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active | |||||
color: @navbarLinkColorHover; | |||||
text-decoration: none; | |||||
} | |||||
// Active nav items | |||||
.navbar .nav > .active > a, | |||||
.navbar .nav > .active > a:hover, | |||||
.navbar .nav > .active > a:focus { | |||||
color: @navbarLinkColorActive; | |||||
text-decoration: none; | |||||
background-color: @navbarLinkBackgroundActive; | |||||
.box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); | |||||
} | |||||
// Navbar button for toggling navbar items in responsive layouts | |||||
// These definitions need to come after '.navbar .btn' | |||||
.navbar .btn-navbar { | |||||
display: none; | |||||
float: right; | |||||
padding: 7px 10px; | |||||
margin-left: 5px; | |||||
margin-right: 5px; | |||||
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); | |||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); | |||||
} | |||||
.navbar .btn-navbar .icon-bar { | |||||
display: block; | |||||
width: 18px; | |||||
height: 2px; | |||||
background-color: #f5f5f5; | |||||
.border-radius(1px); | |||||
.box-shadow(0 1px 0 rgba(0,0,0,.25)); | |||||
} | |||||
.btn-navbar .icon-bar + .icon-bar { | |||||
margin-top: 3px; | |||||
} | |||||
// Dropdown menus | |||||
// -------------- | |||||
// Menu position and menu carets | |||||
.navbar .nav > li > .dropdown-menu { | |||||
&:before { | |||||
content: ''; | |||||
display: inline-block; | |||||
border-left: 7px solid transparent; | |||||
border-right: 7px solid transparent; | |||||
border-bottom: 7px solid #ccc; | |||||
border-bottom-color: @dropdownBorder; | |||||
position: absolute; | |||||
top: -7px; | |||||
left: 9px; | |||||
} | |||||
&:after { | |||||
content: ''; | |||||
display: inline-block; | |||||
border-left: 6px solid transparent; | |||||
border-right: 6px solid transparent; | |||||
border-bottom: 6px solid @dropdownBackground; | |||||
position: absolute; | |||||
top: -6px; | |||||
left: 10px; | |||||
} | |||||
} | |||||
// Menu position and menu caret support for dropups via extra dropup class | |||||
.navbar-fixed-bottom .nav > li > .dropdown-menu { | |||||
&:before { | |||||
border-top: 7px solid #ccc; | |||||
border-top-color: @dropdownBorder; | |||||
border-bottom: 0; | |||||
bottom: -7px; | |||||
top: auto; | |||||
} | |||||
&:after { | |||||
border-top: 6px solid @dropdownBackground; | |||||
border-bottom: 0; | |||||
bottom: -6px; | |||||
top: auto; | |||||
} | |||||
} | |||||
// Caret should match text color on hover/focus | |||||
.navbar .nav li.dropdown > a:hover .caret, | |||||
.navbar .nav li.dropdown > a:focus .caret { | |||||
border-top-color: @navbarLinkColorHover; | |||||
border-bottom-color: @navbarLinkColorHover; | |||||
} | |||||
// Remove background color from open dropdown | |||||
.navbar .nav li.dropdown.open > .dropdown-toggle, | |||||
.navbar .nav li.dropdown.active > .dropdown-toggle, | |||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle { | |||||
background-color: @navbarLinkBackgroundActive; | |||||
color: @navbarLinkColorActive; | |||||
} | |||||
.navbar .nav li.dropdown > .dropdown-toggle .caret { | |||||
border-top-color: @navbarLinkColor; | |||||
border-bottom-color: @navbarLinkColor; | |||||
} | |||||
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, | |||||
.navbar .nav li.dropdown.active > .dropdown-toggle .caret, | |||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { | |||||
border-top-color: @navbarLinkColorActive; | |||||
border-bottom-color: @navbarLinkColorActive; | |||||
} | |||||
// Right aligned menus need alt position | |||||
.navbar .pull-right > li > .dropdown-menu, | |||||
.navbar .nav > li > .dropdown-menu.pull-right { | |||||
left: auto; | |||||
right: 0; | |||||
&:before { | |||||
left: auto; | |||||
right: 12px; | |||||
} | |||||
&:after { | |||||
left: auto; | |||||
right: 13px; | |||||
} | |||||
.dropdown-menu { | |||||
left: auto; | |||||
right: 100%; | |||||
margin-left: 0; | |||||
margin-right: -1px; | |||||
.border-radius(6px 0 6px 6px); | |||||
} | |||||
} | |||||
// Inverted navbar | |||||
// ------------------------- | |||||
.navbar-inverse { | |||||
.navbar-inner { | |||||
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); | |||||
border-color: @navbarInverseBorder; | |||||
} | |||||
.brand, | |||||
.nav > li > a { | |||||
color: @navbarInverseLinkColor; | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbarInverseLinkColorHover; | |||||
} | |||||
} | |||||
.brand { | |||||
color: @navbarInverseBrandColor; | |||||
} | |||||
.navbar-text { | |||||
color: @navbarInverseText; | |||||
} | |||||
.nav > li > a:focus, | |||||
.nav > li > a:hover { | |||||
background-color: @navbarInverseLinkBackgroundHover; | |||||
color: @navbarInverseLinkColorHover; | |||||
} | |||||
.nav .active > a, | |||||
.nav .active > a:hover, | |||||
.nav .active > a:focus { | |||||
color: @navbarInverseLinkColorActive; | |||||
background-color: @navbarInverseLinkBackgroundActive; | |||||
} | |||||
// Inline text links | |||||
.navbar-link { | |||||
color: @navbarInverseLinkColor; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbarInverseLinkColorHover; | |||||
} | |||||
} | |||||
// Dividers in navbar | |||||
.divider-vertical { | |||||
border-left-color: @navbarInverseBackground; | |||||
border-right-color: @navbarInverseBackgroundHighlight; | |||||
} | |||||
// Dropdowns | |||||
.nav li.dropdown.open > .dropdown-toggle, | |||||
.nav li.dropdown.active > .dropdown-toggle, | |||||
.nav li.dropdown.open.active > .dropdown-toggle { | |||||
background-color: @navbarInverseLinkBackgroundActive; | |||||
color: @navbarInverseLinkColorActive; | |||||
} | |||||
.nav li.dropdown > a:hover .caret, | |||||
.nav li.dropdown > a:focus .caret { | |||||
border-top-color: @navbarInverseLinkColorActive; | |||||
border-bottom-color: @navbarInverseLinkColorActive; | |||||
} | |||||
.nav li.dropdown > .dropdown-toggle .caret { | |||||
border-top-color: @navbarInverseLinkColor; | |||||
border-bottom-color: @navbarInverseLinkColor; | |||||
} | |||||
.nav li.dropdown.open > .dropdown-toggle .caret, | |||||
.nav li.dropdown.active > .dropdown-toggle .caret, | |||||
.nav li.dropdown.open.active > .dropdown-toggle .caret { | |||||
border-top-color: @navbarInverseLinkColorActive; | |||||
border-bottom-color: @navbarInverseLinkColorActive; | |||||
} | |||||
// Navbar search | |||||
.navbar-search { | |||||
.search-query { | |||||
color: @white; | |||||
background-color: @navbarInverseSearchBackground; | |||||
border-color: @navbarInverseSearchBorder; | |||||
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); | |||||
.transition(none); | |||||
.placeholder(@navbarInverseSearchPlaceholderColor); | |||||
// Focus states (we use .focused since IE7-8 and down doesn't support :focus) | |||||
&:focus, | |||||
&.focused { | |||||
padding: 5px 15px; | |||||
color: @grayDark; | |||||
text-shadow: 0 1px 0 @white; | |||||
background-color: @navbarInverseSearchBackgroundFocus; | |||||
border: 0; | |||||
.box-shadow(0 0 3px rgba(0,0,0,.15)); | |||||
outline: 0; | |||||
} | |||||
} | |||||
} | |||||
// Navbar collapse button | |||||
.btn-navbar { | |||||
.buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%)); | |||||
} | |||||
} |
@ -0,0 +1,409 @@ | |||||
// | |||||
// Navs | |||||
// -------------------------------------------------- | |||||
// BASE CLASS | |||||
// ---------- | |||||
.nav { | |||||
margin-left: 0; | |||||
margin-bottom: @baseLineHeight; | |||||
list-style: none; | |||||
} | |||||
// Make links block level | |||||
.nav > li > a { | |||||
display: block; | |||||
} | |||||
.nav > li > a:hover, | |||||
.nav > li > a:focus { | |||||
text-decoration: none; | |||||
background-color: @grayLighter; | |||||
} | |||||
// Prevent IE8 from misplacing imgs | |||||
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | |||||
.nav > li > a > img { | |||||
max-width: none; | |||||
} | |||||
// Redeclare pull classes because of specifity | |||||
.nav > .pull-right { | |||||
float: right; | |||||
} | |||||
// Nav headers (for dropdowns and lists) | |||||
.nav-header { | |||||
display: block; | |||||
padding: 3px 15px; | |||||
font-size: 11px; | |||||
font-weight: bold; | |||||
line-height: @baseLineHeight; | |||||
color: @grayLight; | |||||
text-shadow: 0 1px 0 rgba(255,255,255,.5); | |||||
text-transform: uppercase; | |||||
} | |||||
// Space them out when they follow another list item (link) | |||||
.nav li + .nav-header { | |||||
margin-top: 9px; | |||||
} | |||||
// NAV LIST | |||||
// -------- | |||||
.nav-list { | |||||
padding-left: 15px; | |||||
padding-right: 15px; | |||||
margin-bottom: 0; | |||||
} | |||||
.nav-list > li > a, | |||||
.nav-list .nav-header { | |||||
margin-left: -15px; | |||||
margin-right: -15px; | |||||
text-shadow: 0 1px 0 rgba(255,255,255,.5); | |||||
} | |||||
.nav-list > li > a { | |||||
padding: 3px 15px; | |||||
} | |||||
.nav-list > .active > a, | |||||
.nav-list > .active > a:hover, | |||||
.nav-list > .active > a:focus { | |||||
color: @white; | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2); | |||||
background-color: @linkColor; | |||||
} | |||||
.nav-list [class^="icon-"], | |||||
.nav-list [class*=" icon-"] { | |||||
margin-right: 2px; | |||||
} | |||||
// Dividers (basically an hr) within the dropdown | |||||
.nav-list .divider { | |||||
.nav-divider(); | |||||
} | |||||
// TABS AND PILLS | |||||
// ------------- | |||||
// Common styles | |||||
.nav-tabs, | |||||
.nav-pills { | |||||
.clearfix(); | |||||
} | |||||
.nav-tabs > li, | |||||
.nav-pills > li { | |||||
float: left; | |||||
} | |||||
.nav-tabs > li > a, | |||||
.nav-pills > li > a { | |||||
padding-right: 12px; | |||||
padding-left: 12px; | |||||
margin-right: 2px; | |||||
line-height: 14px; // keeps the overall height an even number | |||||
} | |||||
// TABS | |||||
// ---- | |||||
// Give the tabs something to sit on | |||||
.nav-tabs { | |||||
border-bottom: 1px solid #ddd; | |||||
} | |||||
// Make the list-items overlay the bottom border | |||||
.nav-tabs > li { | |||||
margin-bottom: -1px; | |||||
} | |||||
// Actual tabs (as links) | |||||
.nav-tabs > li > a { | |||||
padding-top: 8px; | |||||
padding-bottom: 8px; | |||||
line-height: @baseLineHeight; | |||||
border: 1px solid transparent; | |||||
.border-radius(4px 4px 0 0); | |||||
&:hover, | |||||
&:focus { | |||||
border-color: @grayLighter @grayLighter #ddd; | |||||
} | |||||
} | |||||
// Active state, and it's :hover/:focus to override normal :hover/:focus | |||||
.nav-tabs > .active > a, | |||||
.nav-tabs > .active > a:hover, | |||||
.nav-tabs > .active > a:focus { | |||||
color: @gray; | |||||
background-color: @bodyBackground; | |||||
border: 1px solid #ddd; | |||||
border-bottom-color: transparent; | |||||
cursor: default; | |||||
} | |||||
// PILLS | |||||
// ----- | |||||
// Links rendered as pills | |||||
.nav-pills > li > a { | |||||
padding-top: 8px; | |||||
padding-bottom: 8px; | |||||
margin-top: 2px; | |||||
margin-bottom: 2px; | |||||
.border-radius(5px); | |||||
} | |||||
// Active state | |||||
.nav-pills > .active > a, | |||||
.nav-pills > .active > a:hover, | |||||
.nav-pills > .active > a:focus { | |||||
color: @white; | |||||
background-color: @linkColor; | |||||
} | |||||
// STACKED NAV | |||||
// ----------- | |||||
// Stacked tabs and pills | |||||
.nav-stacked > li { | |||||
float: none; | |||||
} | |||||
.nav-stacked > li > a { | |||||
margin-right: 0; // no need for the gap between nav items | |||||
} | |||||
// Tabs | |||||
.nav-tabs.nav-stacked { | |||||
border-bottom: 0; | |||||
} | |||||
.nav-tabs.nav-stacked > li > a { | |||||
border: 1px solid #ddd; | |||||
.border-radius(0); | |||||
} | |||||
.nav-tabs.nav-stacked > li:first-child > a { | |||||
.border-top-radius(4px); | |||||
} | |||||
.nav-tabs.nav-stacked > li:last-child > a { | |||||
.border-bottom-radius(4px); | |||||
} | |||||
.nav-tabs.nav-stacked > li > a:hover, | |||||
.nav-tabs.nav-stacked > li > a:focus { | |||||
border-color: #ddd; | |||||
z-index: 2; | |||||
} | |||||
// Pills | |||||
.nav-pills.nav-stacked > li > a { | |||||
margin-bottom: 3px; | |||||
} | |||||
.nav-pills.nav-stacked > li:last-child > a { | |||||
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs | |||||
} | |||||
// DROPDOWNS | |||||
// --------- | |||||
.nav-tabs .dropdown-menu { | |||||
.border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu | |||||
} | |||||
.nav-pills .dropdown-menu { | |||||
.border-radius(6px); // make rounded corners match the pills | |||||
} | |||||
// Default dropdown links | |||||
// ------------------------- | |||||
// Make carets use linkColor to start | |||||
.nav .dropdown-toggle .caret { | |||||
border-top-color: @linkColor; | |||||
border-bottom-color: @linkColor; | |||||
margin-top: 6px; | |||||
} | |||||
.nav .dropdown-toggle:hover .caret, | |||||
.nav .dropdown-toggle:focus .caret { | |||||
border-top-color: @linkColorHover; | |||||
border-bottom-color: @linkColorHover; | |||||
} | |||||
/* move down carets for tabs */ | |||||
.nav-tabs .dropdown-toggle .caret { | |||||
margin-top: 8px; | |||||
} | |||||
// Active dropdown links | |||||
// ------------------------- | |||||
.nav .active .dropdown-toggle .caret { | |||||
border-top-color: #fff; | |||||
border-bottom-color: #fff; | |||||
} | |||||
.nav-tabs .active .dropdown-toggle .caret { | |||||
border-top-color: @gray; | |||||
border-bottom-color: @gray; | |||||
} | |||||
// Active:hover/:focus dropdown links | |||||
// ------------------------- | |||||
.nav > .dropdown.active > a:hover, | |||||
.nav > .dropdown.active > a:focus { | |||||
cursor: pointer; | |||||
} | |||||
// Open dropdowns | |||||
// ------------------------- | |||||
.nav-tabs .open .dropdown-toggle, | |||||
.nav-pills .open .dropdown-toggle, | |||||
.nav > li.dropdown.open.active > a:hover, | |||||
.nav > li.dropdown.open.active > a:focus { | |||||
color: @white; | |||||
background-color: @grayLight; | |||||
border-color: @grayLight; | |||||
} | |||||
.nav li.dropdown.open .caret, | |||||
.nav li.dropdown.open.active .caret, | |||||
.nav li.dropdown.open a:hover .caret, | |||||
.nav li.dropdown.open a:focus .caret { | |||||
border-top-color: @white; | |||||
border-bottom-color: @white; | |||||
.opacity(100); | |||||
} | |||||
// Dropdowns in stacked tabs | |||||
.tabs-stacked .open > a:hover, | |||||
.tabs-stacked .open > a:focus { | |||||
border-color: @grayLight; | |||||
} | |||||
// TABBABLE | |||||
// -------- | |||||
// COMMON STYLES | |||||
// ------------- | |||||
// Clear any floats | |||||
.tabbable { | |||||
.clearfix(); | |||||
} | |||||
.tab-content { | |||||
overflow: auto; // prevent content from running below tabs | |||||
} | |||||
// Remove border on bottom, left, right | |||||
.tabs-below > .nav-tabs, | |||||
.tabs-right > .nav-tabs, | |||||
.tabs-left > .nav-tabs { | |||||
border-bottom: 0; | |||||
} | |||||
// Show/hide tabbable areas | |||||
.tab-content > .tab-pane, | |||||
.pill-content > .pill-pane { | |||||
display: none; | |||||
} | |||||
.tab-content > .active, | |||||
.pill-content > .active { | |||||
display: block; | |||||
} | |||||
// BOTTOM | |||||
// ------ | |||||
.tabs-below > .nav-tabs { | |||||
border-top: 1px solid #ddd; | |||||
} | |||||
.tabs-below > .nav-tabs > li { | |||||
margin-top: -1px; | |||||
margin-bottom: 0; | |||||
} | |||||
.tabs-below > .nav-tabs > li > a { | |||||
.border-radius(0 0 4px 4px); | |||||
&:hover, | |||||
&:focus { | |||||
border-bottom-color: transparent; | |||||
border-top-color: #ddd; | |||||
} | |||||
} | |||||
.tabs-below > .nav-tabs > .active > a, | |||||
.tabs-below > .nav-tabs > .active > a:hover, | |||||
.tabs-below > .nav-tabs > .active > a:focus { | |||||
border-color: transparent #ddd #ddd #ddd; | |||||
} | |||||
// LEFT & RIGHT | |||||
// ------------ | |||||
// Common styles | |||||
.tabs-left > .nav-tabs > li, | |||||
.tabs-right > .nav-tabs > li { | |||||
float: none; | |||||
} | |||||
.tabs-left > .nav-tabs > li > a, | |||||
.tabs-right > .nav-tabs > li > a { | |||||
min-width: 74px; | |||||
margin-right: 0; | |||||
margin-bottom: 3px; | |||||
} | |||||
// Tabs on the left | |||||
.tabs-left > .nav-tabs { | |||||
float: left; | |||||
margin-right: 19px; | |||||
border-right: 1px solid #ddd; | |||||
} | |||||
.tabs-left > .nav-tabs > li > a { | |||||
margin-right: -1px; | |||||
.border-radius(4px 0 0 4px); | |||||
} | |||||
.tabs-left > .nav-tabs > li > a:hover, | |||||
.tabs-left > .nav-tabs > li > a:focus { | |||||
border-color: @grayLighter #ddd @grayLighter @grayLighter; | |||||
} | |||||
.tabs-left > .nav-tabs .active > a, | |||||
.tabs-left > .nav-tabs .active > a:hover, | |||||
.tabs-left > .nav-tabs .active > a:focus { | |||||
border-color: #ddd transparent #ddd #ddd; | |||||
*border-right-color: @white; | |||||
} | |||||
// Tabs on the right | |||||
.tabs-right > .nav-tabs { | |||||
float: right; | |||||
margin-left: 19px; | |||||
border-left: 1px solid #ddd; | |||||
} | |||||
.tabs-right > .nav-tabs > li > a { | |||||
margin-left: -1px; | |||||
.border-radius(0 4px 4px 0); | |||||
} | |||||
.tabs-right > .nav-tabs > li > a:hover, | |||||
.tabs-right > .nav-tabs > li > a:focus { | |||||
border-color: @grayLighter @grayLighter @grayLighter #ddd; | |||||
} | |||||
.tabs-right > .nav-tabs .active > a, | |||||
.tabs-right > .nav-tabs .active > a:hover, | |||||
.tabs-right > .nav-tabs .active > a:focus { | |||||
border-color: #ddd #ddd #ddd transparent; | |||||
*border-left-color: @white; | |||||
} | |||||
// DISABLED STATES | |||||
// --------------- | |||||
// Gray out text | |||||
.nav > .disabled > a { | |||||
color: @grayLight; | |||||
} | |||||
// Nuke hover/focus effects | |||||
.nav > .disabled > a:hover, | |||||
.nav > .disabled > a:focus { | |||||
text-decoration: none; | |||||
background-color: transparent; | |||||
cursor: default; | |||||
} |
@ -0,0 +1,43 @@ | |||||
// | |||||
// Pager pagination | |||||
// -------------------------------------------------- | |||||
.pager { | |||||
margin: @baseLineHeight 0; | |||||
list-style: none; | |||||
text-align: center; | |||||
.clearfix(); | |||||
} | |||||
.pager li { | |||||
display: inline; | |||||
} | |||||
.pager li > a, | |||||
.pager li > span { | |||||
display: inline-block; | |||||
padding: 5px 14px; | |||||
background-color: #fff; | |||||
border: 1px solid #ddd; | |||||
.border-radius(15px); | |||||
} | |||||
.pager li > a:hover, | |||||
.pager li > a:focus { | |||||
text-decoration: none; | |||||
background-color: #f5f5f5; | |||||
} | |||||
.pager .next > a, | |||||
.pager .next > span { | |||||
float: right; | |||||
} | |||||
.pager .previous > a, | |||||
.pager .previous > span { | |||||
float: left; | |||||
} | |||||
.pager .disabled > a, | |||||
.pager .disabled > a:hover, | |||||
.pager .disabled > a:focus, | |||||
.pager .disabled > span { | |||||
color: @grayLight; | |||||
background-color: #fff; | |||||
cursor: default; | |||||
} |
@ -0,0 +1,123 @@ | |||||
// | |||||
// Pagination (multiple pages) | |||||
// -------------------------------------------------- | |||||
// Space out pagination from surrounding content | |||||
.pagination { | |||||
margin: @baseLineHeight 0; | |||||
} | |||||
.pagination ul { | |||||
// Allow for text-based alignment | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
// Reset default ul styles | |||||
margin-left: 0; | |||||
margin-bottom: 0; | |||||
// Visuals | |||||
.border-radius(@baseBorderRadius); | |||||
.box-shadow(0 1px 2px rgba(0,0,0,.05)); | |||||
} | |||||
.pagination ul > li { | |||||
display: inline; // Remove list-style and block-level defaults | |||||
} | |||||
.pagination ul > li > a, | |||||
.pagination ul > li > span { | |||||
float: left; // Collapse white-space | |||||
padding: 4px 12px; | |||||
line-height: @baseLineHeight; | |||||
text-decoration: none; | |||||
background-color: @paginationBackground; | |||||
border: 1px solid @paginationBorder; | |||||
border-left-width: 0; | |||||
} | |||||
.pagination ul > li > a:hover, | |||||
.pagination ul > li > a:focus, | |||||
.pagination ul > .active > a, | |||||
.pagination ul > .active > span { | |||||
background-color: @paginationActiveBackground; | |||||
} | |||||
.pagination ul > .active > a, | |||||
.pagination ul > .active > span { | |||||
color: @grayLight; | |||||
cursor: default; | |||||
} | |||||
.pagination ul > .disabled > span, | |||||
.pagination ul > .disabled > a, | |||||
.pagination ul > .disabled > a:hover, | |||||
.pagination ul > .disabled > a:focus { | |||||
color: @grayLight; | |||||
background-color: transparent; | |||||
cursor: default; | |||||
} | |||||
.pagination ul > li:first-child > a, | |||||
.pagination ul > li:first-child > span { | |||||
border-left-width: 1px; | |||||
.border-left-radius(@baseBorderRadius); | |||||
} | |||||
.pagination ul > li:last-child > a, | |||||
.pagination ul > li:last-child > span { | |||||
.border-right-radius(@baseBorderRadius); | |||||
} | |||||
// Alignment | |||||
// -------------------------------------------------- | |||||
.pagination-centered { | |||||
text-align: center; | |||||
} | |||||
.pagination-right { | |||||
text-align: right; | |||||
} | |||||
// Sizing | |||||
// -------------------------------------------------- | |||||
// Large | |||||
.pagination-large { | |||||
ul > li > a, | |||||
ul > li > span { | |||||
padding: @paddingLarge; | |||||
font-size: @fontSizeLarge; | |||||
} | |||||
ul > li:first-child > a, | |||||
ul > li:first-child > span { | |||||
.border-left-radius(@borderRadiusLarge); | |||||
} | |||||
ul > li:last-child > a, | |||||
ul > li:last-child > span { | |||||
.border-right-radius(@borderRadiusLarge); | |||||
} | |||||
} | |||||
// Small and mini | |||||
.pagination-mini, | |||||
.pagination-small { | |||||
ul > li:first-child > a, | |||||
ul > li:first-child > span { | |||||
.border-left-radius(@borderRadiusSmall); | |||||
} | |||||
ul > li:last-child > a, | |||||
ul > li:last-child > span { | |||||
.border-right-radius(@borderRadiusSmall); | |||||
} | |||||
} | |||||
// Small | |||||
.pagination-small { | |||||
ul > li > a, | |||||
ul > li > span { | |||||
padding: @paddingSmall; | |||||
font-size: @fontSizeSmall; | |||||
} | |||||
} | |||||
// Mini | |||||
.pagination-mini { | |||||
ul > li > a, | |||||
ul > li > span { | |||||
padding: @paddingMini; | |||||
font-size: @fontSizeMini; | |||||
} | |||||
} |
@ -0,0 +1,133 @@ | |||||
// | |||||
// Popovers | |||||
// -------------------------------------------------- | |||||
.popover { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
z-index: @zindexPopover; | |||||
display: none; | |||||
max-width: 276px; | |||||
padding: 1px; | |||||
text-align: left; // Reset given new insertion method | |||||
background-color: @popoverBackground; | |||||
-webkit-background-clip: padding-box; | |||||
-moz-background-clip: padding; | |||||
background-clip: padding-box; | |||||
border: 1px solid #ccc; | |||||
border: 1px solid rgba(0,0,0,.2); | |||||
.border-radius(6px); | |||||
.box-shadow(0 5px 10px rgba(0,0,0,.2)); | |||||
// Overrides for proper insertion | |||||
white-space: normal; | |||||
// Offset the popover to account for the popover arrow | |||||
&.top { margin-top: -10px; } | |||||
&.right { margin-left: 10px; } | |||||
&.bottom { margin-top: 10px; } | |||||
&.left { margin-left: -10px; } | |||||
} | |||||
.popover-title { | |||||
margin: 0; // reset heading margin | |||||
padding: 8px 14px; | |||||
font-size: 14px; | |||||
font-weight: normal; | |||||
line-height: 18px; | |||||
background-color: @popoverTitleBackground; | |||||
border-bottom: 1px solid darken(@popoverTitleBackground, 5%); | |||||
.border-radius(5px 5px 0 0); | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
} | |||||
.popover-content { | |||||
padding: 9px 14px; | |||||
} | |||||
// Arrows | |||||
// | |||||
// .arrow is outer, .arrow:after is inner | |||||
.popover .arrow, | |||||
.popover .arrow:after { | |||||
position: absolute; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
} | |||||
.popover .arrow { | |||||
border-width: @popoverArrowOuterWidth; | |||||
} | |||||
.popover .arrow:after { | |||||
border-width: @popoverArrowWidth; | |||||
content: ""; | |||||
} | |||||
.popover { | |||||
&.top .arrow { | |||||
left: 50%; | |||||
margin-left: -@popoverArrowOuterWidth; | |||||
border-bottom-width: 0; | |||||
border-top-color: #999; // IE8 fallback | |||||
border-top-color: @popoverArrowOuterColor; | |||||
bottom: -@popoverArrowOuterWidth; | |||||
&:after { | |||||
bottom: 1px; | |||||
margin-left: -@popoverArrowWidth; | |||||
border-bottom-width: 0; | |||||
border-top-color: @popoverArrowColor; | |||||
} | |||||
} | |||||
&.right .arrow { | |||||
top: 50%; | |||||
left: -@popoverArrowOuterWidth; | |||||
margin-top: -@popoverArrowOuterWidth; | |||||
border-left-width: 0; | |||||
border-right-color: #999; // IE8 fallback | |||||
border-right-color: @popoverArrowOuterColor; | |||||
&:after { | |||||
left: 1px; | |||||
bottom: -@popoverArrowWidth; | |||||
border-left-width: 0; | |||||
border-right-color: @popoverArrowColor; | |||||
} | |||||
} | |||||
&.bottom .arrow { | |||||
left: 50%; | |||||
margin-left: -@popoverArrowOuterWidth; | |||||
border-top-width: 0; | |||||
border-bottom-color: #999; // IE8 fallback | |||||
border-bottom-color: @popoverArrowOuterColor; | |||||
top: -@popoverArrowOuterWidth; | |||||
&:after { | |||||
top: 1px; | |||||
margin-left: -@popoverArrowWidth; | |||||
border-top-width: 0; | |||||
border-bottom-color: @popoverArrowColor; | |||||
} | |||||
} | |||||
&.left .arrow { | |||||
top: 50%; | |||||
right: -@popoverArrowOuterWidth; | |||||
margin-top: -@popoverArrowOuterWidth; | |||||
border-right-width: 0; | |||||
border-left-color: #999; // IE8 fallback | |||||
border-left-color: @popoverArrowOuterColor; | |||||
&:after { | |||||
right: 1px; | |||||
border-right-width: 0; | |||||
border-left-color: @popoverArrowColor; | |||||
bottom: -@popoverArrowWidth; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,122 @@ | |||||
// | |||||
// Progress bars | |||||
// -------------------------------------------------- | |||||
// ANIMATIONS | |||||
// ---------- | |||||
// Webkit | |||||
@-webkit-keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// Firefox | |||||
@-moz-keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// IE9 | |||||
@-ms-keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// Opera | |||||
@-o-keyframes progress-bar-stripes { | |||||
from { background-position: 0 0; } | |||||
to { background-position: 40px 0; } | |||||
} | |||||
// Spec | |||||
@keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// THE BARS | |||||
// -------- | |||||
// Outer container | |||||
.progress { | |||||
overflow: hidden; | |||||
height: @baseLineHeight; | |||||
margin-bottom: @baseLineHeight; | |||||
#gradient > .vertical(#f5f5f5, #f9f9f9); | |||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); | |||||
.border-radius(@baseBorderRadius); | |||||
} | |||||
// Bar of progress | |||||
.progress .bar { | |||||
width: 0%; | |||||
height: 100%; | |||||
color: @white; | |||||
float: left; | |||||
font-size: 12px; | |||||
text-align: center; | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |||||
#gradient > .vertical(#149bdf, #0480be); | |||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); | |||||
.box-sizing(border-box); | |||||
.transition(width .6s ease); | |||||
} | |||||
.progress .bar + .bar { | |||||
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); | |||||
} | |||||
// Striped bars | |||||
.progress-striped .bar { | |||||
#gradient > .striped(#149bdf); | |||||
.background-size(40px 40px); | |||||
} | |||||
// Call animation for the active one | |||||
.progress.active .bar { | |||||
-webkit-animation: progress-bar-stripes 2s linear infinite; | |||||
-moz-animation: progress-bar-stripes 2s linear infinite; | |||||
-ms-animation: progress-bar-stripes 2s linear infinite; | |||||
-o-animation: progress-bar-stripes 2s linear infinite; | |||||
animation: progress-bar-stripes 2s linear infinite; | |||||
} | |||||
// COLORS | |||||
// ------ | |||||
// Danger (red) | |||||
.progress-danger .bar, .progress .bar-danger { | |||||
#gradient > .vertical(#ee5f5b, #c43c35); | |||||
} | |||||
.progress-danger.progress-striped .bar, .progress-striped .bar-danger { | |||||
#gradient > .striped(#ee5f5b); | |||||
} | |||||
// Success (green) | |||||
.progress-success .bar, .progress .bar-success { | |||||
#gradient > .vertical(#62c462, #57a957); | |||||
} | |||||
.progress-success.progress-striped .bar, .progress-striped .bar-success { | |||||
#gradient > .striped(#62c462); | |||||
} | |||||
// Info (teal) | |||||
.progress-info .bar, .progress .bar-info { | |||||
#gradient > .vertical(#5bc0de, #339bb9); | |||||
} | |||||
.progress-info.progress-striped .bar, .progress-striped .bar-info { | |||||
#gradient > .striped(#5bc0de); | |||||
} | |||||
// Warning (orange) | |||||
.progress-warning .bar, .progress .bar-warning { | |||||
#gradient > .vertical(lighten(@orange, 15%), @orange); | |||||
} | |||||
.progress-warning.progress-striped .bar, .progress-striped .bar-warning { | |||||
#gradient > .striped(lighten(@orange, 15%)); | |||||
} |
@ -0,0 +1,216 @@ | |||||
// | |||||
// Reset CSS | |||||
// Adapted from http://github.com/necolas/normalize.css | |||||
// -------------------------------------------------- | |||||
// Display in IE6-9 and FF3 | |||||
// ------------------------- | |||||
article, | |||||
aside, | |||||
details, | |||||
figcaption, | |||||
figure, | |||||
footer, | |||||
header, | |||||
hgroup, | |||||
nav, | |||||
section { | |||||
display: block; | |||||
} | |||||
// Display block in IE6-9 and FF3 | |||||
// ------------------------- | |||||
audio, | |||||
canvas, | |||||
video { | |||||
display: inline-block; | |||||
*display: inline; | |||||
*zoom: 1; | |||||
} | |||||
// Prevents modern browsers from displaying 'audio' without controls | |||||
// ------------------------- | |||||
audio:not([controls]) { | |||||
display: none; | |||||
} | |||||
// Base settings | |||||
// ------------------------- | |||||
html { | |||||
font-size: 100%; | |||||
-webkit-text-size-adjust: 100%; | |||||
-ms-text-size-adjust: 100%; | |||||
} | |||||
// Focus states | |||||
a:focus { | |||||
.tab-focus(); | |||||
} | |||||
// Hover & Active | |||||
a:hover, | |||||
a:active { | |||||
outline: 0; | |||||
} | |||||
// Prevents sub and sup affecting line-height in all browsers | |||||
// ------------------------- | |||||
sub, | |||||
sup { | |||||
position: relative; | |||||
font-size: 75%; | |||||
line-height: 0; | |||||
vertical-align: baseline; | |||||
} | |||||
sup { | |||||
top: -0.5em; | |||||
} | |||||
sub { | |||||
bottom: -0.25em; | |||||
} | |||||
// Img border in a's and image quality | |||||
// ------------------------- | |||||
img { | |||||
/* Responsive images (ensure images don't scale beyond their parents) */ | |||||
max-width: 100%; /* Part 1: Set a maxium relative to the parent */ | |||||
width: auto\9; /* IE7-8 need help adjusting responsive images */ | |||||
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ | |||||
vertical-align: middle; | |||||
border: 0; | |||||
-ms-interpolation-mode: bicubic; | |||||
} | |||||
// Prevent max-width from affecting Google Maps | |||||
#map_canvas img, | |||||
.google-maps img { | |||||
max-width: none; | |||||
} | |||||
// Forms | |||||
// ------------------------- | |||||
// Font size in all browsers, margin changes, misc consistency | |||||
button, | |||||
input, | |||||
select, | |||||
textarea { | |||||
margin: 0; | |||||
font-size: 100%; | |||||
vertical-align: middle; | |||||
} | |||||
button, | |||||
input { | |||||
*overflow: visible; // Inner spacing ie IE6/7 | |||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet | |||||
} | |||||
button::-moz-focus-inner, | |||||
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 | |||||
padding: 0; | |||||
border: 0; | |||||
} | |||||
button, | |||||
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. | |||||
input[type="reset"], | |||||
input[type="submit"] { | |||||
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. | |||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. | |||||
} | |||||
label, | |||||
select, | |||||
button, | |||||
input[type="button"], | |||||
input[type="reset"], | |||||
input[type="submit"], | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. | |||||
} | |||||
input[type="search"] { // Appearance in Safari/Chrome | |||||
.box-sizing(content-box); | |||||
-webkit-appearance: textfield; | |||||
} | |||||
input[type="search"]::-webkit-search-decoration, | |||||
input[type="search"]::-webkit-search-cancel-button { | |||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 | |||||
} | |||||
textarea { | |||||
overflow: auto; // Remove vertical scrollbar in IE6-9 | |||||
vertical-align: top; // Readability and alignment cross-browser | |||||
} | |||||
// Printing | |||||
// ------------------------- | |||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css | |||||
@media print { | |||||
* { | |||||
text-shadow: none !important; | |||||
color: #000 !important; // Black prints faster: h5bp.com/s | |||||
background: transparent !important; | |||||
box-shadow: none !important; | |||||
} | |||||
a, | |||||
a:visited { | |||||
text-decoration: underline; | |||||
} | |||||
a[href]:after { | |||||
content: " (" attr(href) ")"; | |||||
} | |||||
abbr[title]:after { | |||||
content: " (" attr(title) ")"; | |||||
} | |||||
// Don't show links for images, or javascript/internal links | |||||
.ir a:after, | |||||
a[href^="javascript:"]:after, | |||||
a[href^="#"]:after { | |||||
content: ""; | |||||
} | |||||
pre, | |||||
blockquote { | |||||
border: 1px solid #999; | |||||
page-break-inside: avoid; | |||||
} | |||||
thead { | |||||
display: table-header-group; // h5bp.com/t | |||||
} | |||||
tr, | |||||
img { | |||||
page-break-inside: avoid; | |||||
} | |||||
img { | |||||
max-width: 100% !important; | |||||
} | |||||
@page { | |||||
margin: 0.5cm; | |||||
} | |||||
p, | |||||
h2, | |||||
h3 { | |||||
orphans: 3; | |||||
widows: 3; | |||||
} | |||||
h2, | |||||
h3 { | |||||
page-break-after: avoid; | |||||
} | |||||
} |
@ -0,0 +1,28 @@ | |||||
// | |||||
// Responsive: Large desktop and up | |||||
// -------------------------------------------------- | |||||
@media (min-width: 1200px) { | |||||
// Fixed grid | |||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200); | |||||
// Fluid grid | |||||
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200); | |||||
// Input grid | |||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200); | |||||
// Thumbnails | |||||
.thumbnails { | |||||
margin-left: -@gridGutterWidth1200; | |||||
} | |||||
.thumbnails > li { | |||||
margin-left: @gridGutterWidth1200; | |||||
} | |||||
.row-fluid .thumbnails { | |||||
margin-left: 0; | |||||
} | |||||
} |
@ -0,0 +1,193 @@ | |||||
// | |||||
// Responsive: Landscape phone to desktop/tablet | |||||
// -------------------------------------------------- | |||||
@media (max-width: 767px) { | |||||
// Padding to set content in a bit | |||||
body { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
} | |||||
// Negative indent the now static "fixed" navbar | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom, | |||||
.navbar-static-top { | |||||
margin-left: -20px; | |||||
margin-right: -20px; | |||||
} | |||||
// Remove padding on container given explicit padding set on body | |||||
.container-fluid { | |||||
padding: 0; | |||||
} | |||||
// TYPOGRAPHY | |||||
// ---------- | |||||
// Reset horizontal dl | |||||
.dl-horizontal { | |||||
dt { | |||||
float: none; | |||||
clear: none; | |||||
width: auto; | |||||
text-align: left; | |||||
} | |||||
dd { | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
// GRID & CONTAINERS | |||||
// ----------------- | |||||
// Remove width from containers | |||||
.container { | |||||
width: auto; | |||||
} | |||||
// Fluid rows | |||||
.row-fluid { | |||||
width: 100%; | |||||
} | |||||
// Undo negative margin on rows and thumbnails | |||||
.row, | |||||
.thumbnails { | |||||
margin-left: 0; | |||||
} | |||||
.thumbnails > li { | |||||
float: none; | |||||
margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present | |||||
} | |||||
// Make all grid-sized elements block level again | |||||
[class*="span"], | |||||
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing | |||||
.row-fluid [class*="span"] { | |||||
float: none; | |||||
display: block; | |||||
width: 100%; | |||||
margin-left: 0; | |||||
.box-sizing(border-box); | |||||
} | |||||
.span12, | |||||
.row-fluid .span12 { | |||||
width: 100%; | |||||
.box-sizing(border-box); | |||||
} | |||||
.row-fluid [class*="offset"]:first-child { | |||||
margin-left: 0; | |||||
} | |||||
// FORM FIELDS | |||||
// ----------- | |||||
// Make span* classes full width | |||||
.input-large, | |||||
.input-xlarge, | |||||
.input-xxlarge, | |||||
input[class*="span"], | |||||
select[class*="span"], | |||||
textarea[class*="span"], | |||||
.uneditable-input { | |||||
.input-block-level(); | |||||
} | |||||
// But don't let it screw up prepend/append inputs | |||||
.input-prepend input, | |||||
.input-append input, | |||||
.input-prepend input[class*="span"], | |||||
.input-append input[class*="span"] { | |||||
display: inline-block; // redeclare so they don't wrap to new lines | |||||
width: auto; | |||||
} | |||||
.controls-row [class*="span"] + [class*="span"] { | |||||
margin-left: 0; | |||||
} | |||||
// Modals | |||||
.modal { | |||||
position: fixed; | |||||
top: 20px; | |||||
left: 20px; | |||||
right: 20px; | |||||
width: auto; | |||||
margin: 0; | |||||
&.fade { top: -100px; } | |||||
&.fade.in { top: 20px; } | |||||
} | |||||
} | |||||
// UP TO LANDSCAPE PHONE | |||||
// --------------------- | |||||
@media (max-width: 480px) { | |||||
// Smooth out the collapsing/expanding nav | |||||
.nav-collapse { | |||||
-webkit-transform: translate3d(0, 0, 0); // activate the GPU | |||||
} | |||||
// Block level the page header small tag for readability | |||||
.page-header h1 small { | |||||
display: block; | |||||
line-height: @baseLineHeight; | |||||
} | |||||
// Update checkboxes for iOS | |||||
input[type="checkbox"], | |||||
input[type="radio"] { | |||||
border: 1px solid #ccc; | |||||
} | |||||
// Remove the horizontal form styles | |||||
.form-horizontal { | |||||
.control-label { | |||||
float: none; | |||||
width: auto; | |||||
padding-top: 0; | |||||
text-align: left; | |||||
} | |||||
// Move over all input controls and content | |||||
.controls { | |||||
margin-left: 0; | |||||
} | |||||
// Move the options list down to align with labels | |||||
.control-list { | |||||
padding-top: 0; // has to be padding because margin collaspes | |||||
} | |||||
// Move over buttons in .form-actions to align with .controls | |||||
.form-actions { | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
} | |||||
} | |||||
// Medias | |||||
// Reset float and spacing to stack | |||||
.media .pull-left, | |||||
.media .pull-right { | |||||
float: none; | |||||
display: block; | |||||
margin-bottom: 10px; | |||||
} | |||||
// Remove side margins since we stack instead of indent | |||||
.media-object { | |||||
margin-right: 0; | |||||
margin-left: 0; | |||||
} | |||||
// Modals | |||||
.modal { | |||||
top: 10px; | |||||
left: 10px; | |||||
right: 10px; | |||||
} | |||||
.modal-header .close { | |||||
padding: 10px; | |||||
margin: -10px; | |||||
} | |||||
// Carousel | |||||
.carousel-caption { | |||||
position: static; | |||||
} | |||||
} |
@ -0,0 +1,19 @@ | |||||
// | |||||
// Responsive: Tablet to desktop | |||||
// -------------------------------------------------- | |||||
@media (min-width: 768px) and (max-width: 979px) { | |||||
// Fixed grid | |||||
#grid > .core(@gridColumnWidth768, @gridGutterWidth768); | |||||
// Fluid grid | |||||
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768); | |||||
// Input grid | |||||
#grid > .input(@gridColumnWidth768, @gridGutterWidth768); | |||||
// No need to reset .thumbnails here since it's the same @gridGutterWidth | |||||
} |
@ -0,0 +1,189 @@ | |||||
// | |||||
// Responsive: Navbar | |||||
// -------------------------------------------------- | |||||
// TABLETS AND BELOW | |||||
// ----------------- | |||||
@media (max-width: @navbarCollapseWidth) { | |||||
// UNFIX THE TOPBAR | |||||
// ---------------- | |||||
// Remove any padding from the body | |||||
body { | |||||
padding-top: 0; | |||||
} | |||||
// Unfix the navbars | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom { | |||||
position: static; | |||||
} | |||||
.navbar-fixed-top { | |||||
margin-bottom: @baseLineHeight; | |||||
} | |||||
.navbar-fixed-bottom { | |||||
margin-top: @baseLineHeight; | |||||
} | |||||
.navbar-fixed-top .navbar-inner, | |||||
.navbar-fixed-bottom .navbar-inner { | |||||
padding: 5px; | |||||
} | |||||
.navbar .container { | |||||
width: auto; | |||||
padding: 0; | |||||
} | |||||
// Account for brand name | |||||
.navbar .brand { | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
margin: 0 0 0 -5px; | |||||
} | |||||
// COLLAPSIBLE NAVBAR | |||||
// ------------------ | |||||
// Nav collapse clears brand | |||||
.nav-collapse { | |||||
clear: both; | |||||
} | |||||
// Block-level the nav | |||||
.nav-collapse .nav { | |||||
float: none; | |||||
margin: 0 0 (@baseLineHeight / 2); | |||||
} | |||||
.nav-collapse .nav > li { | |||||
float: none; | |||||
} | |||||
.nav-collapse .nav > li > a { | |||||
margin-bottom: 2px; | |||||
} | |||||
.nav-collapse .nav > .divider-vertical { | |||||
display: none; | |||||
} | |||||
.nav-collapse .nav .nav-header { | |||||
color: @navbarText; | |||||
text-shadow: none; | |||||
} | |||||
// Nav and dropdown links in navbar | |||||
.nav-collapse .nav > li > a, | |||||
.nav-collapse .dropdown-menu a { | |||||
padding: 9px 15px; | |||||
font-weight: bold; | |||||
color: @navbarLinkColor; | |||||
.border-radius(3px); | |||||
} | |||||
// Buttons | |||||
.nav-collapse .btn { | |||||
padding: 4px 10px 4px; | |||||
font-weight: normal; | |||||
.border-radius(@baseBorderRadius); | |||||
} | |||||
.nav-collapse .dropdown-menu li + li a { | |||||
margin-bottom: 2px; | |||||
} | |||||
.nav-collapse .nav > li > a:hover, | |||||
.nav-collapse .nav > li > a:focus, | |||||
.nav-collapse .dropdown-menu a:hover, | |||||
.nav-collapse .dropdown-menu a:focus { | |||||
background-color: @navbarBackground; | |||||
} | |||||
.navbar-inverse .nav-collapse .nav > li > a, | |||||
.navbar-inverse .nav-collapse .dropdown-menu a { | |||||
color: @navbarInverseLinkColor; | |||||
} | |||||
.navbar-inverse .nav-collapse .nav > li > a:hover, | |||||
.navbar-inverse .nav-collapse .nav > li > a:focus, | |||||
.navbar-inverse .nav-collapse .dropdown-menu a:hover, | |||||
.navbar-inverse .nav-collapse .dropdown-menu a:focus { | |||||
background-color: @navbarInverseBackground; | |||||
} | |||||
// Buttons in the navbar | |||||
.nav-collapse.in .btn-group { | |||||
margin-top: 5px; | |||||
padding: 0; | |||||
} | |||||
// Dropdowns in the navbar | |||||
.nav-collapse .dropdown-menu { | |||||
position: static; | |||||
top: auto; | |||||
left: auto; | |||||
float: none; | |||||
display: none; | |||||
max-width: none; | |||||
margin: 0 15px; | |||||
padding: 0; | |||||
background-color: transparent; | |||||
border: none; | |||||
.border-radius(0); | |||||
.box-shadow(none); | |||||
} | |||||
.nav-collapse .open > .dropdown-menu { | |||||
display: block; | |||||
} | |||||
.nav-collapse .dropdown-menu:before, | |||||
.nav-collapse .dropdown-menu:after { | |||||
display: none; | |||||
} | |||||
.nav-collapse .dropdown-menu .divider { | |||||
display: none; | |||||
} | |||||
.nav-collapse .nav > li > .dropdown-menu { | |||||
&:before, | |||||
&:after { | |||||
display: none; | |||||
} | |||||
} | |||||
// Forms in navbar | |||||
.nav-collapse .navbar-form, | |||||
.nav-collapse .navbar-search { | |||||
float: none; | |||||
padding: (@baseLineHeight / 2) 15px; | |||||
margin: (@baseLineHeight / 2) 0; | |||||
border-top: 1px solid @navbarBackground; | |||||
border-bottom: 1px solid @navbarBackground; | |||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); | |||||
} | |||||
.navbar-inverse .nav-collapse .navbar-form, | |||||
.navbar-inverse .nav-collapse .navbar-search { | |||||
border-top-color: @navbarInverseBackground; | |||||
border-bottom-color: @navbarInverseBackground; | |||||
} | |||||
// Pull right (secondary) nav content | |||||
.navbar .nav-collapse .nav.pull-right { | |||||
float: none; | |||||
margin-left: 0; | |||||
} | |||||
// Hide everything in the navbar save .brand and toggle button */ | |||||
.nav-collapse, | |||||
.nav-collapse.collapse { | |||||
overflow: hidden; | |||||
height: 0; | |||||
} | |||||
// Navbar button | |||||
.navbar .btn-navbar { | |||||
display: block; | |||||
} | |||||
// STATIC NAVBAR | |||||
// ------------- | |||||
.navbar-static .navbar-inner { | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
} | |||||
} | |||||
// DEFAULT DESKTOP | |||||
// --------------- | |||||
@media (min-width: @navbarCollapseDesktopWidth) { | |||||
// Required to make the collapsing navbar work on regular desktops | |||||
.nav-collapse.collapse { | |||||
height: auto !important; | |||||
overflow: visible !important; | |||||
} | |||||
} |
@ -0,0 +1,59 @@ | |||||
// | |||||
// Responsive: Utility classes | |||||
// -------------------------------------------------- | |||||
// IE10 Metro responsive | |||||
// Required for Windows 8 Metro split-screen snapping with IE10 | |||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ | |||||
@-ms-viewport{ | |||||
width: device-width; | |||||
} | |||||
// Hide from screenreaders and browsers | |||||
// Credit: HTML5 Boilerplate | |||||
.hidden { | |||||
display: none; | |||||
visibility: hidden; | |||||
} | |||||
// Visibility utilities | |||||
// For desktops | |||||
.visible-phone { display: none !important; } | |||||
.visible-tablet { display: none !important; } | |||||
.hidden-phone { } | |||||
.hidden-tablet { } | |||||
.hidden-desktop { display: none !important; } | |||||
.visible-desktop { display: inherit !important; } | |||||
// Tablets & small desktops only | |||||
@media (min-width: 768px) and (max-width: 979px) { | |||||
// Hide everything else | |||||
.hidden-desktop { display: inherit !important; } | |||||
.visible-desktop { display: none !important ; } | |||||
// Show | |||||
.visible-tablet { display: inherit !important; } | |||||
// Hide | |||||
.hidden-tablet { display: none !important; } | |||||
} | |||||
// Phones only | |||||
@media (max-width: 767px) { | |||||
// Hide everything else | |||||
.hidden-desktop { display: inherit !important; } | |||||
.visible-desktop { display: none !important; } | |||||
// Show | |||||
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior | |||||
// Hide | |||||
.hidden-phone { display: none !important; } | |||||
} | |||||
// Print utilities | |||||
.visible-print { display: none !important; } | |||||
.hidden-print { } | |||||
@media print { | |||||
.visible-print { display: inherit !important; } | |||||
.hidden-print { display: none !important; } | |||||
} |
@ -0,0 +1,48 @@ | |||||
/*! | |||||
* Bootstrap Responsive v2.3.2 | |||||
* | |||||
* Copyright 2013 Twitter, Inc | |||||
* Licensed under the Apache License v2.0 | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Designed and built with all the love in the world by @mdo and @fat. | |||||
*/ | |||||
// Responsive.less | |||||
// For phone and tablet devices | |||||
// ------------------------------------------------------------- | |||||
// REPEAT VARIABLES & MIXINS | |||||
// ------------------------- | |||||
// Required since we compile the responsive stuff separately | |||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc | |||||
@import "mixins.less"; | |||||
// RESPONSIVE CLASSES | |||||
// ------------------ | |||||
@import "responsive-utilities.less"; | |||||
// MEDIA QUERIES | |||||
// ------------------ | |||||
// Large desktops | |||||
@import "responsive-1200px-min.less"; | |||||
// Tablets to regular desktops | |||||
@import "responsive-768px-979px.less"; | |||||
// Phones to portrait tablets and narrow desktops | |||||
@import "responsive-767px-max.less"; | |||||
// RESPONSIVE NAVBAR | |||||
// ------------------ | |||||
// From 979px and below, show a button to toggle navbar contents | |||||
@import "responsive-navbar.less"; |
@ -0,0 +1,51 @@ | |||||
// | |||||
// Scaffolding | |||||
// -------------------------------------------------- | |||||
// Body reset | |||||
// ------------------------- | |||||
body { | |||||
font-size: @baseFontSize; | |||||
line-height: @baseLineHeight; | |||||
color: @textColor; | |||||
background-color: @bodyBackground; | |||||
} | |||||
// Links | |||||
// ------------------------- | |||||
a { | |||||
color: @linkColor; | |||||
text-decoration: none; | |||||
} | |||||
a:hover, | |||||
a:focus { | |||||
color: @linkColorHover; | |||||
text-decoration: underline; | |||||
} | |||||
// Images | |||||
// ------------------------- | |||||
// Rounded corners | |||||
.img-rounded { | |||||
.border-radius(6px); | |||||
} | |||||
// Add polaroid-esque trim | |||||
.img-polaroid { | |||||
padding: 4px; | |||||
background-color: #fff; | |||||
border: 1px solid #ccc; | |||||
border: 1px solid rgba(0,0,0,.2); | |||||
.box-shadow(0 1px 3px rgba(0,0,0,.1)); | |||||
} | |||||
// Perfect circle | |||||
.img-circle { | |||||
.border-radius(500px); // crank the border-radius so it works with most reasonably sized images | |||||
} |
@ -0,0 +1,197 @@ | |||||
// | |||||
// Sprites | |||||
// -------------------------------------------------- | |||||
// ICONS | |||||
// ----- | |||||
// All icons receive the styles of the <i> tag with a base class | |||||
// of .i and are then given a unique class to add width, height, | |||||
// and background-position. Your resulting HTML will look like | |||||
// <i class="icon-inbox"></i>. | |||||
// For the white version of the icons, just add the .icon-white class: | |||||
// <i class="icon-inbox icon-white"></i> | |||||
[class^="icon-"], | |||||
[class*=" icon-"] { | |||||
display: inline-block; | |||||
width: 14px; | |||||
height: 14px; | |||||
.ie7-restore-right-whitespace(); | |||||
line-height: 14px; | |||||
vertical-align: text-top; | |||||
background-image: url("@{iconSpritePath}"); | |||||
background-position: 14px 14px; | |||||
background-repeat: no-repeat; | |||||
margin-top: 1px; | |||||
} | |||||
/* White icons with optional class, or on hover/focus/active states of certain elements */ | |||||
.icon-white, | |||||
.nav-pills > .active > a > [class^="icon-"], | |||||
.nav-pills > .active > a > [class*=" icon-"], | |||||
.nav-list > .active > a > [class^="icon-"], | |||||
.nav-list > .active > a > [class*=" icon-"], | |||||
.navbar-inverse .nav > .active > a > [class^="icon-"], | |||||
.navbar-inverse .nav > .active > a > [class*=" icon-"], | |||||
.dropdown-menu > li > a:hover > [class^="icon-"], | |||||
.dropdown-menu > li > a:focus > [class^="icon-"], | |||||
.dropdown-menu > li > a:hover > [class*=" icon-"], | |||||
.dropdown-menu > li > a:focus > [class*=" icon-"], | |||||
.dropdown-menu > .active > a > [class^="icon-"], | |||||
.dropdown-menu > .active > a > [class*=" icon-"], | |||||
.dropdown-submenu:hover > a > [class^="icon-"], | |||||
.dropdown-submenu:focus > a > [class^="icon-"], | |||||
.dropdown-submenu:hover > a > [class*=" icon-"], | |||||
.dropdown-submenu:focus > a > [class*=" icon-"] { | |||||
background-image: url("@{iconWhiteSpritePath}"); | |||||
} | |||||
.icon-glass { background-position: 0 0; } | |||||
.icon-music { background-position: -24px 0; } | |||||
.icon-search { background-position: -48px 0; } | |||||
.icon-envelope { background-position: -72px 0; } | |||||
.icon-heart { background-position: -96px 0; } | |||||
.icon-star { background-position: -120px 0; } | |||||
.icon-star-empty { background-position: -144px 0; } | |||||
.icon-user { background-position: -168px 0; } | |||||
.icon-film { background-position: -192px 0; } | |||||
.icon-th-large { background-position: -216px 0; } | |||||
.icon-th { background-position: -240px 0; } | |||||
.icon-th-list { background-position: -264px 0; } | |||||
.icon-ok { background-position: -288px 0; } | |||||
.icon-remove { background-position: -312px 0; } | |||||
.icon-zoom-in { background-position: -336px 0; } | |||||
.icon-zoom-out { background-position: -360px 0; } | |||||
.icon-off { background-position: -384px 0; } | |||||
.icon-signal { background-position: -408px 0; } | |||||
.icon-cog { background-position: -432px 0; } | |||||
.icon-trash { background-position: -456px 0; } | |||||
.icon-home { background-position: 0 -24px; } | |||||
.icon-file { background-position: -24px -24px; } | |||||
.icon-time { background-position: -48px -24px; } | |||||
.icon-road { background-position: -72px -24px; } | |||||
.icon-download-alt { background-position: -96px -24px; } | |||||
.icon-download { background-position: -120px -24px; } | |||||
.icon-upload { background-position: -144px -24px; } | |||||
.icon-inbox { background-position: -168px -24px; } | |||||
.icon-play-circle { background-position: -192px -24px; } | |||||
.icon-repeat { background-position: -216px -24px; } | |||||
.icon-refresh { background-position: -240px -24px; } | |||||
.icon-list-alt { background-position: -264px -24px; } | |||||
.icon-lock { background-position: -287px -24px; } // 1px off | |||||
.icon-flag { background-position: -312px -24px; } | |||||
.icon-headphones { background-position: -336px -24px; } | |||||
.icon-volume-off { background-position: -360px -24px; } | |||||
.icon-volume-down { background-position: -384px -24px; } | |||||
.icon-volume-up { background-position: -408px -24px; } | |||||
.icon-qrcode { background-position: -432px -24px; } | |||||
.icon-barcode { background-position: -456px -24px; } | |||||
.icon-tag { background-position: 0 -48px; } | |||||
.icon-tags { background-position: -25px -48px; } // 1px off | |||||
.icon-book { background-position: -48px -48px; } | |||||
.icon-bookmark { background-position: -72px -48px; } | |||||
.icon-print { background-position: -96px -48px; } | |||||
.icon-camera { background-position: -120px -48px; } | |||||
.icon-font { background-position: -144px -48px; } | |||||
.icon-bold { background-position: -167px -48px; } // 1px off | |||||
.icon-italic { background-position: -192px -48px; } | |||||
.icon-text-height { background-position: -216px -48px; } | |||||
.icon-text-width { background-position: -240px -48px; } | |||||
.icon-align-left { background-position: -264px -48px; } | |||||
.icon-align-center { background-position: -288px -48px; } | |||||
.icon-align-right { background-position: -312px -48px; } | |||||
.icon-align-justify { background-position: -336px -48px; } | |||||
.icon-list { background-position: -360px -48px; } | |||||
.icon-indent-left { background-position: -384px -48px; } | |||||
.icon-indent-right { background-position: -408px -48px; } | |||||
.icon-facetime-video { background-position: -432px -48px; } | |||||
.icon-picture { background-position: -456px -48px; } | |||||
.icon-pencil { background-position: 0 -72px; } | |||||
.icon-map-marker { background-position: -24px -72px; } | |||||
.icon-adjust { background-position: -48px -72px; } | |||||
.icon-tint { background-position: -72px -72px; } | |||||
.icon-edit { background-position: -96px -72px; } | |||||
.icon-share { background-position: -120px -72px; } | |||||
.icon-check { background-position: -144px -72px; } | |||||
.icon-move { background-position: -168px -72px; } | |||||
.icon-step-backward { background-position: -192px -72px; } | |||||
.icon-fast-backward { background-position: -216px -72px; } | |||||
.icon-backward { background-position: -240px -72px; } | |||||
.icon-play { background-position: -264px -72px; } | |||||
.icon-pause { background-position: -288px -72px; } | |||||
.icon-stop { background-position: -312px -72px; } | |||||
.icon-forward { background-position: -336px -72px; } | |||||
.icon-fast-forward { background-position: -360px -72px; } | |||||
.icon-step-forward { background-position: -384px -72px; } | |||||
.icon-eject { background-position: -408px -72px; } | |||||
.icon-chevron-left { background-position: -432px -72px; } | |||||
.icon-chevron-right { background-position: -456px -72px; } | |||||
.icon-plus-sign { background-position: 0 -96px; } | |||||
.icon-minus-sign { background-position: -24px -96px; } | |||||
.icon-remove-sign { background-position: -48px -96px; } | |||||
.icon-ok-sign { background-position: -72px -96px; } | |||||
.icon-question-sign { background-position: -96px -96px; } | |||||
.icon-info-sign { background-position: -120px -96px; } | |||||
.icon-screenshot { background-position: -144px -96px; } | |||||
.icon-remove-circle { background-position: -168px -96px; } | |||||
.icon-ok-circle { background-position: -192px -96px; } | |||||
.icon-ban-circle { background-position: -216px -96px; } | |||||
.icon-arrow-left { background-position: -240px -96px; } | |||||
.icon-arrow-right { background-position: -264px -96px; } | |||||
.icon-arrow-up { background-position: -289px -96px; } // 1px off | |||||
.icon-arrow-down { background-position: -312px -96px; } | |||||
.icon-share-alt { background-position: -336px -96px; } | |||||
.icon-resize-full { background-position: -360px -96px; } | |||||
.icon-resize-small { background-position: -384px -96px; } | |||||
.icon-plus { background-position: -408px -96px; } | |||||
.icon-minus { background-position: -433px -96px; } | |||||
.icon-asterisk { background-position: -456px -96px; } | |||||
.icon-exclamation-sign { background-position: 0 -120px; } | |||||
.icon-gift { background-position: -24px -120px; } | |||||
.icon-leaf { background-position: -48px -120px; } | |||||
.icon-fire { background-position: -72px -120px; } | |||||
.icon-eye-open { background-position: -96px -120px; } | |||||
.icon-eye-close { background-position: -120px -120px; } | |||||
.icon-warning-sign { background-position: -144px -120px; } | |||||
.icon-plane { background-position: -168px -120px; } | |||||
.icon-calendar { background-position: -192px -120px; } | |||||
.icon-random { background-position: -216px -120px; width: 16px; } | |||||
.icon-comment { background-position: -240px -120px; } | |||||
.icon-magnet { background-position: -264px -120px; } | |||||
.icon-chevron-up { background-position: -288px -120px; } | |||||
.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off | |||||
.icon-retweet { background-position: -336px -120px; } | |||||
.icon-shopping-cart { background-position: -360px -120px; } | |||||
.icon-folder-close { background-position: -384px -120px; width: 16px; } | |||||
.icon-folder-open { background-position: -408px -120px; width: 16px; } | |||||
.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off | |||||
.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off | |||||
.icon-hdd { background-position: 0 -144px; } | |||||
.icon-bullhorn { background-position: -24px -144px; } | |||||
.icon-bell { background-position: -48px -144px; } | |||||
.icon-certificate { background-position: -72px -144px; } | |||||
.icon-thumbs-up { background-position: -96px -144px; } | |||||
.icon-thumbs-down { background-position: -120px -144px; } | |||||
.icon-hand-right { background-position: -144px -144px; } | |||||
.icon-hand-left { background-position: -168px -144px; } | |||||
.icon-hand-up { background-position: -192px -144px; } | |||||
.icon-hand-down { background-position: -216px -144px; } | |||||
.icon-circle-arrow-right { background-position: -240px -144px; } | |||||
.icon-circle-arrow-left { background-position: -264px -144px; } | |||||
.icon-circle-arrow-up { background-position: -288px -144px; } | |||||
.icon-circle-arrow-down { background-position: -312px -144px; } | |||||
.icon-globe { background-position: -336px -144px; } | |||||
.icon-wrench { background-position: -360px -144px; } | |||||
.icon-tasks { background-position: -384px -144px; } | |||||
.icon-filter { background-position: -408px -144px; } | |||||
.icon-briefcase { background-position: -432px -144px; } | |||||
.icon-fullscreen { background-position: -456px -144px; } |
@ -0,0 +1,244 @@ | |||||
// | |||||
// Tables | |||||
// -------------------------------------------------- | |||||
// BASE TABLES | |||||
// ----------------- | |||||
table { | |||||
max-width: 100%; | |||||
background-color: @tableBackground; | |||||
border-collapse: collapse; | |||||
border-spacing: 0; | |||||
} | |||||
// BASELINE STYLES | |||||
// --------------- | |||||
.table { | |||||
width: 100%; | |||||
margin-bottom: @baseLineHeight; | |||||
// Cells | |||||
th, | |||||
td { | |||||
padding: 8px; | |||||
line-height: @baseLineHeight; | |||||
text-align: left; | |||||
vertical-align: top; | |||||
border-top: 1px solid @tableBorder; | |||||
} | |||||
th { | |||||
font-weight: bold; | |||||
} | |||||
// Bottom align for column headings | |||||
thead th { | |||||
vertical-align: bottom; | |||||
} | |||||
// Remove top border from thead by default | |||||
caption + thead tr:first-child th, | |||||
caption + thead tr:first-child td, | |||||
colgroup + thead tr:first-child th, | |||||
colgroup + thead tr:first-child td, | |||||
thead:first-child tr:first-child th, | |||||
thead:first-child tr:first-child td { | |||||
border-top: 0; | |||||
} | |||||
// Account for multiple tbody instances | |||||
tbody + tbody { | |||||
border-top: 2px solid @tableBorder; | |||||
} | |||||
// Nesting | |||||
.table { | |||||
background-color: @bodyBackground; | |||||
} | |||||
} | |||||
// CONDENSED TABLE W/ HALF PADDING | |||||
// ------------------------------- | |||||
.table-condensed { | |||||
th, | |||||
td { | |||||
padding: 4px 5px; | |||||
} | |||||
} | |||||
// BORDERED VERSION | |||||
// ---------------- | |||||
.table-bordered { | |||||
border: 1px solid @tableBorder; | |||||
border-collapse: separate; // Done so we can round those corners! | |||||
*border-collapse: collapse; // IE7 can't round corners anyway | |||||
border-left: 0; | |||||
.border-radius(@baseBorderRadius); | |||||
th, | |||||
td { | |||||
border-left: 1px solid @tableBorder; | |||||
} | |||||
// Prevent a double border | |||||
caption + thead tr:first-child th, | |||||
caption + tbody tr:first-child th, | |||||
caption + tbody tr:first-child td, | |||||
colgroup + thead tr:first-child th, | |||||
colgroup + tbody tr:first-child th, | |||||
colgroup + tbody tr:first-child td, | |||||
thead:first-child tr:first-child th, | |||||
tbody:first-child tr:first-child th, | |||||
tbody:first-child tr:first-child td { | |||||
border-top: 0; | |||||
} | |||||
// For first th/td in the first row in the first thead or tbody | |||||
thead:first-child tr:first-child > th:first-child, | |||||
tbody:first-child tr:first-child > td:first-child, | |||||
tbody:first-child tr:first-child > th:first-child { | |||||
.border-top-left-radius(@baseBorderRadius); | |||||
} | |||||
// For last th/td in the first row in the first thead or tbody | |||||
thead:first-child tr:first-child > th:last-child, | |||||
tbody:first-child tr:first-child > td:last-child, | |||||
tbody:first-child tr:first-child > th:last-child { | |||||
.border-top-right-radius(@baseBorderRadius); | |||||
} | |||||
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot | |||||
thead:last-child tr:last-child > th:first-child, | |||||
tbody:last-child tr:last-child > td:first-child, | |||||
tbody:last-child tr:last-child > th:first-child, | |||||
tfoot:last-child tr:last-child > td:first-child, | |||||
tfoot:last-child tr:last-child > th:first-child { | |||||
.border-bottom-left-radius(@baseBorderRadius); | |||||
} | |||||
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot | |||||
thead:last-child tr:last-child > th:last-child, | |||||
tbody:last-child tr:last-child > td:last-child, | |||||
tbody:last-child tr:last-child > th:last-child, | |||||
tfoot:last-child tr:last-child > td:last-child, | |||||
tfoot:last-child tr:last-child > th:last-child { | |||||
.border-bottom-right-radius(@baseBorderRadius); | |||||
} | |||||
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot | |||||
tfoot + tbody:last-child tr:last-child td:first-child { | |||||
.border-bottom-left-radius(0); | |||||
} | |||||
tfoot + tbody:last-child tr:last-child td:last-child { | |||||
.border-bottom-right-radius(0); | |||||
} | |||||
// Special fixes to round the left border on the first td/th | |||||
caption + thead tr:first-child th:first-child, | |||||
caption + tbody tr:first-child td:first-child, | |||||
colgroup + thead tr:first-child th:first-child, | |||||
colgroup + tbody tr:first-child td:first-child { | |||||
.border-top-left-radius(@baseBorderRadius); | |||||
} | |||||
caption + thead tr:first-child th:last-child, | |||||
caption + tbody tr:first-child td:last-child, | |||||
colgroup + thead tr:first-child th:last-child, | |||||
colgroup + tbody tr:first-child td:last-child { | |||||
.border-top-right-radius(@baseBorderRadius); | |||||
} | |||||
} | |||||
// ZEBRA-STRIPING | |||||
// -------------- | |||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds) | |||||
.table-striped { | |||||
tbody { | |||||
> tr:nth-child(odd) > td, | |||||
> tr:nth-child(odd) > th { | |||||
background-color: @tableBackgroundAccent; | |||||
} | |||||
} | |||||
} | |||||
// HOVER EFFECT | |||||
// ------------ | |||||
// Placed here since it has to come after the potential zebra striping | |||||
.table-hover { | |||||
tbody { | |||||
tr:hover > td, | |||||
tr:hover > th { | |||||
background-color: @tableBackgroundHover; | |||||
} | |||||
} | |||||
} | |||||
// TABLE CELL SIZING | |||||
// ----------------- | |||||
// Reset default grid behavior | |||||
table td[class*="span"], | |||||
table th[class*="span"], | |||||
.row-fluid table td[class*="span"], | |||||
.row-fluid table th[class*="span"] { | |||||
display: table-cell; | |||||
float: none; // undo default grid column styles | |||||
margin-left: 0; // undo default grid column styles | |||||
} | |||||
// Change the column widths to account for td/th padding | |||||
.table td, | |||||
.table th { | |||||
&.span1 { .tableColumns(1); } | |||||
&.span2 { .tableColumns(2); } | |||||
&.span3 { .tableColumns(3); } | |||||
&.span4 { .tableColumns(4); } | |||||
&.span5 { .tableColumns(5); } | |||||
&.span6 { .tableColumns(6); } | |||||
&.span7 { .tableColumns(7); } | |||||
&.span8 { .tableColumns(8); } | |||||
&.span9 { .tableColumns(9); } | |||||
&.span10 { .tableColumns(10); } | |||||
&.span11 { .tableColumns(11); } | |||||
&.span12 { .tableColumns(12); } | |||||
} | |||||
// TABLE BACKGROUNDS | |||||
// ----------------- | |||||
// Exact selectors below required to override .table-striped | |||||
.table tbody tr { | |||||
&.success > td { | |||||
background-color: @successBackground; | |||||
} | |||||
&.error > td { | |||||
background-color: @errorBackground; | |||||
} | |||||
&.warning > td { | |||||
background-color: @warningBackground; | |||||
} | |||||
&.info > td { | |||||
background-color: @infoBackground; | |||||
} | |||||
} | |||||
// Hover states for .table-hover | |||||
.table-hover tbody tr { | |||||
&.success:hover > td { | |||||
background-color: darken(@successBackground, 5%); | |||||
} | |||||
&.error:hover > td { | |||||
background-color: darken(@errorBackground, 5%); | |||||
} | |||||
&.warning:hover > td { | |||||
background-color: darken(@warningBackground, 5%); | |||||
} | |||||
&.info:hover > td { | |||||
background-color: darken(@infoBackground, 5%); | |||||
} | |||||
} |
@ -0,0 +1,53 @@ | |||||
// | |||||
// Thumbnails | |||||
// -------------------------------------------------- | |||||
// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files | |||||
// Make wrapper ul behave like the grid | |||||
.thumbnails { | |||||
margin-left: -@gridGutterWidth; | |||||
list-style: none; | |||||
.clearfix(); | |||||
} | |||||
// Fluid rows have no left margin | |||||
.row-fluid .thumbnails { | |||||
margin-left: 0; | |||||
} | |||||
// Float li to make thumbnails appear in a row | |||||
.thumbnails > li { | |||||
float: left; // Explicity set the float since we don't require .span* classes | |||||
margin-bottom: @baseLineHeight; | |||||
margin-left: @gridGutterWidth; | |||||
} | |||||
// The actual thumbnail (can be `a` or `div`) | |||||
.thumbnail { | |||||
display: block; | |||||
padding: 4px; | |||||
line-height: @baseLineHeight; | |||||
border: 1px solid #ddd; | |||||
.border-radius(@baseBorderRadius); | |||||
.box-shadow(0 1px 3px rgba(0,0,0,.055)); | |||||
.transition(all .2s ease-in-out); | |||||
} | |||||
// Add a hover/focus state for linked versions only | |||||
a.thumbnail:hover, | |||||
a.thumbnail:focus { | |||||
border-color: @linkColor; | |||||
.box-shadow(0 1px 4px rgba(0,105,214,.25)); | |||||
} | |||||
// Images and captions | |||||
.thumbnail > img { | |||||
display: block; | |||||
max-width: 100%; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
.thumbnail .caption { | |||||
padding: 9px; | |||||
color: @gray; | |||||
} |
@ -0,0 +1,70 @@ | |||||
// | |||||
// Tooltips | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.tooltip { | |||||
position: absolute; | |||||
z-index: @zindexTooltip; | |||||
display: block; | |||||
visibility: visible; | |||||
font-size: 11px; | |||||
line-height: 1.4; | |||||
.opacity(0); | |||||
&.in { .opacity(80); } | |||||
&.top { margin-top: -3px; padding: 5px 0; } | |||||
&.right { margin-left: 3px; padding: 0 5px; } | |||||
&.bottom { margin-top: 3px; padding: 5px 0; } | |||||
&.left { margin-left: -3px; padding: 0 5px; } | |||||
} | |||||
// Wrapper for the tooltip content | |||||
.tooltip-inner { | |||||
max-width: 200px; | |||||
padding: 8px; | |||||
color: @tooltipColor; | |||||
text-align: center; | |||||
text-decoration: none; | |||||
background-color: @tooltipBackground; | |||||
.border-radius(@baseBorderRadius); | |||||
} | |||||
// Arrows | |||||
.tooltip-arrow { | |||||
position: absolute; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
} | |||||
.tooltip { | |||||
&.top .tooltip-arrow { | |||||
bottom: 0; | |||||
left: 50%; | |||||
margin-left: -@tooltipArrowWidth; | |||||
border-width: @tooltipArrowWidth @tooltipArrowWidth 0; | |||||
border-top-color: @tooltipArrowColor; | |||||
} | |||||
&.right .tooltip-arrow { | |||||
top: 50%; | |||||
left: 0; | |||||
margin-top: -@tooltipArrowWidth; | |||||
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; | |||||
border-right-color: @tooltipArrowColor; | |||||
} | |||||
&.left .tooltip-arrow { | |||||
top: 50%; | |||||
right: 0; | |||||
margin-top: -@tooltipArrowWidth; | |||||
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; | |||||
border-left-color: @tooltipArrowColor; | |||||
} | |||||
&.bottom .tooltip-arrow { | |||||
top: 0; | |||||
left: 50%; | |||||
margin-left: -@tooltipArrowWidth; | |||||
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; | |||||
border-bottom-color: @tooltipArrowColor; | |||||
} | |||||
} |
@ -0,0 +1,152 @@ | |||||
// | |||||
// Typography | |||||
// -------------------------------------------------- | |||||
// Body text | |||||
// ------------------------- | |||||
p { | |||||
margin: 0 0 @baseLineHeight / 2; | |||||
} | |||||
.lead { | |||||
margin-bottom: @baseLineHeight; | |||||
font-size: @baseFontSize * 1.5; | |||||
font-weight: 200; | |||||
line-height: @baseLineHeight * 1.5; | |||||
} | |||||
// Emphasis & misc | |||||
// ------------------------- | |||||
// Ex: 14px base font * 85% = about 12px | |||||
small { font-size: 85%; } | |||||
strong { font-weight: bold; } | |||||
em { font-style: italic; } | |||||
cite { font-style: normal; } | |||||
// Utility classes | |||||
.muted { color: @grayLight; } | |||||
a.muted:hover, | |||||
a.muted:focus { color: darken(@grayLight, 10%); } | |||||
.text-warning { color: @warningText; } | |||||
a.text-warning:hover, | |||||
a.text-warning:focus { color: darken(@warningText, 10%); } | |||||
.text-error { color: @errorText; } | |||||
a.text-error:hover, | |||||
a.text-error:focus { color: darken(@errorText, 10%); } | |||||
.text-info { color: @infoText; } | |||||
a.text-info:hover, | |||||
a.text-info:focus { color: darken(@infoText, 10%); } | |||||
.text-success { color: @successText; } | |||||
a.text-success:hover, | |||||
a.text-success:focus { color: darken(@successText, 10%); } | |||||
.text-left { text-align: left; } | |||||
.text-right { text-align: right; } | |||||
.text-center { text-align: center; } | |||||
// Lists | |||||
// -------------------------------------------------- | |||||
// Unordered and Ordered lists | |||||
ul, ol { | |||||
padding: 0; | |||||
margin: 0 0 @baseLineHeight / 2 25px; | |||||
} | |||||
ul ul, | |||||
ul ol, | |||||
ol ol, | |||||
ol ul { | |||||
margin-bottom: 0; | |||||
} | |||||
li { | |||||
line-height: @baseLineHeight; | |||||
} | |||||
// Remove default list styles | |||||
ul.unstyled, | |||||
ol.unstyled { | |||||
margin-left: 0; | |||||
list-style: none; | |||||
} | |||||
// Single-line list items | |||||
ul.inline, | |||||
ol.inline { | |||||
margin-left: 0; | |||||
list-style: none; | |||||
> li { | |||||
display: inline-block; | |||||
.ie7-inline-block(); | |||||
padding-left: 5px; | |||||
padding-right: 5px; | |||||
} | |||||
} | |||||
// Description Lists | |||||
dl { | |||||
margin-bottom: @baseLineHeight; | |||||
} | |||||
dt, | |||||
dd { | |||||
line-height: @baseLineHeight; | |||||
} | |||||
dt { | |||||
font-weight: bold; | |||||
} | |||||
dd { | |||||
margin-left: @baseLineHeight / 2; | |||||
} | |||||
// Horizontal layout (like forms) | |||||
.dl-horizontal { | |||||
.clearfix(); // Ensure dl clears floats if empty dd elements present | |||||
dt { | |||||
float: left; | |||||
width: @horizontalComponentOffset - 20; | |||||
clear: left; | |||||
text-align: right; | |||||
.text-overflow(); | |||||
} | |||||
dd { | |||||
margin-left: @horizontalComponentOffset; | |||||
} | |||||
} | |||||
// MISC | |||||
// ---- | |||||
// Horizontal rules | |||||
hr { | |||||
margin: @baseLineHeight 0; | |||||
border: 0; | |||||
border-top: 1px solid @hrBorder; | |||||
border-bottom: 1px solid @white; | |||||
} | |||||
// Abbreviations and acronyms | |||||
abbr[title], | |||||
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 | |||||
abbr[data-original-title] { | |||||
cursor: help; | |||||
border-bottom: 1px dotted @grayLight; | |||||
} | |||||
abbr.initialism { | |||||
font-size: 90%; | |||||
text-transform: uppercase; | |||||
} | |||||
// Addresses | |||||
address { | |||||
display: block; | |||||
margin-bottom: @baseLineHeight; | |||||
font-style: normal; | |||||
line-height: @baseLineHeight; | |||||
} |
@ -0,0 +1,30 @@ | |||||
// | |||||
// Utility classes | |||||
// -------------------------------------------------- | |||||
// Quick floats | |||||
.pull-right { | |||||
float: right; | |||||
} | |||||
.pull-left { | |||||
float: left; | |||||
} | |||||
// Toggling content | |||||
.hide { | |||||
display: none; | |||||
} | |||||
.show { | |||||
display: block; | |||||
} | |||||
// Visibility | |||||
.invisible { | |||||
visibility: hidden; | |||||
} | |||||
// For Affix plugin | |||||
.affix { | |||||
position: fixed; | |||||
} |
@ -0,0 +1,301 @@ | |||||
// | |||||
// Variables | |||||
// -------------------------------------------------- | |||||
// Global values | |||||
// -------------------------------------------------- | |||||
// Grays | |||||
// ------------------------- | |||||
@black: #000; | |||||
@grayDarker: #222; | |||||
@grayDark: #333; | |||||
@gray: #555; | |||||
@grayLight: #999; | |||||
@grayLighter: #eee; | |||||
@white: #fff; | |||||
// Accent colors | |||||
// ------------------------- | |||||
@blue: #049cdb; | |||||
@blueDark: #0064cd; | |||||
@green: #46a546; | |||||
@red: #9d261d; | |||||
@yellow: #ffc40d; | |||||
@orange: #f89406; | |||||
@pink: #c3325f; | |||||
@purple: #7a43b6; | |||||
// Scaffolding | |||||
// ------------------------- | |||||
@bodyBackground: @white; | |||||
@textColor: @grayDark; | |||||
// Links | |||||
// ------------------------- | |||||
@linkColor: #08c; | |||||
@linkColorHover: darken(@linkColor, 15%); | |||||
// Typography | |||||
// ------------------------- | |||||
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; | |||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif; | |||||
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; | |||||
@baseFontSize: 14px; | |||||
@baseFontFamily: @sansFontFamily; | |||||
@baseLineHeight: 20px; | |||||
@altFontFamily: @serifFontFamily; | |||||
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily | |||||
@headingsFontWeight: bold; // instead of browser default, bold | |||||
@headingsColor: inherit; // empty to use BS default, @textColor | |||||
// Component sizing | |||||
// ------------------------- | |||||
// Based on 14px font-size and 20px line-height | |||||
@fontSizeLarge: @baseFontSize * 1.25; // ~18px | |||||
@fontSizeSmall: @baseFontSize * 0.85; // ~12px | |||||
@fontSizeMini: @baseFontSize * 0.75; // ~11px | |||||
@paddingLarge: 11px 19px; // 44px | |||||
@paddingSmall: 2px 10px; // 26px | |||||
@paddingMini: 0 6px; // 22px | |||||
@baseBorderRadius: 4px; | |||||
@borderRadiusLarge: 6px; | |||||
@borderRadiusSmall: 3px; | |||||
// Tables | |||||
// ------------------------- | |||||
@tableBackground: transparent; // overall background-color | |||||
@tableBackgroundAccent: #f9f9f9; // for striping | |||||
@tableBackgroundHover: #f5f5f5; // for hover | |||||
@tableBorder: #ddd; // table and cell border | |||||
// Buttons | |||||
// ------------------------- | |||||
@btnBackground: @white; | |||||
@btnBackgroundHighlight: darken(@white, 10%); | |||||
@btnBorder: #ccc; | |||||
@btnPrimaryBackground: @linkColor; | |||||
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); | |||||
@btnInfoBackground: #5bc0de; | |||||
@btnInfoBackgroundHighlight: #2f96b4; | |||||
@btnSuccessBackground: #62c462; | |||||
@btnSuccessBackgroundHighlight: #51a351; | |||||
@btnWarningBackground: lighten(@orange, 15%); | |||||
@btnWarningBackgroundHighlight: @orange; | |||||
@btnDangerBackground: #ee5f5b; | |||||
@btnDangerBackgroundHighlight: #bd362f; | |||||
@btnInverseBackground: #444; | |||||
@btnInverseBackgroundHighlight: @grayDarker; | |||||
// Forms | |||||
// ------------------------- | |||||
@inputBackground: @white; | |||||
@inputBorder: #ccc; | |||||
@inputBorderRadius: @baseBorderRadius; | |||||
@inputDisabledBackground: @grayLighter; | |||||
@formActionsBackground: #f5f5f5; | |||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border | |||||
// Dropdowns | |||||
// ------------------------- | |||||
@dropdownBackground: @white; | |||||
@dropdownBorder: rgba(0,0,0,.2); | |||||
@dropdownDividerTop: #e5e5e5; | |||||
@dropdownDividerBottom: @white; | |||||
@dropdownLinkColor: @grayDark; | |||||
@dropdownLinkColorHover: @white; | |||||
@dropdownLinkColorActive: @white; | |||||
@dropdownLinkBackgroundActive: @linkColor; | |||||
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; | |||||
// COMPONENT VARIABLES | |||||
// -------------------------------------------------- | |||||
// Z-index master list | |||||
// ------------------------- | |||||
// Used for a bird's eye view of components dependent on the z-axis | |||||
// Try to avoid customizing these :) | |||||
@zindexDropdown: 1000; | |||||
@zindexPopover: 1010; | |||||
@zindexTooltip: 1030; | |||||
@zindexFixedNavbar: 1030; | |||||
@zindexModalBackdrop: 1040; | |||||
@zindexModal: 1050; | |||||
// Sprite icons path | |||||
// ------------------------- | |||||
@iconSpritePath: "../img/glyphicons-halflings.png"; | |||||
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; | |||||
// Input placeholder text color | |||||
// ------------------------- | |||||
@placeholderText: @grayLight; | |||||
// Hr border color | |||||
// ------------------------- | |||||
@hrBorder: @grayLighter; | |||||
// Horizontal forms & lists | |||||
// ------------------------- | |||||
@horizontalComponentOffset: 180px; | |||||
// Wells | |||||
// ------------------------- | |||||
@wellBackground: #f5f5f5; | |||||
// Navbar | |||||
// ------------------------- | |||||
@navbarCollapseWidth: 979px; | |||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; | |||||
@navbarHeight: 40px; | |||||
@navbarBackgroundHighlight: #ffffff; | |||||
@navbarBackground: darken(@navbarBackgroundHighlight, 5%); | |||||
@navbarBorder: darken(@navbarBackground, 12%); | |||||
@navbarText: #777; | |||||
@navbarLinkColor: #777; | |||||
@navbarLinkColorHover: @grayDark; | |||||
@navbarLinkColorActive: @gray; | |||||
@navbarLinkBackgroundHover: transparent; | |||||
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); | |||||
@navbarBrandColor: @navbarLinkColor; | |||||
// Inverted navbar | |||||
@navbarInverseBackground: #111111; | |||||
@navbarInverseBackgroundHighlight: #222222; | |||||
@navbarInverseBorder: #252525; | |||||
@navbarInverseText: @grayLight; | |||||
@navbarInverseLinkColor: @grayLight; | |||||
@navbarInverseLinkColorHover: @white; | |||||
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; | |||||
@navbarInverseLinkBackgroundHover: transparent; | |||||
@navbarInverseLinkBackgroundActive: @navbarInverseBackground; | |||||
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); | |||||
@navbarInverseSearchBackgroundFocus: @white; | |||||
@navbarInverseSearchBorder: @navbarInverseBackground; | |||||
@navbarInverseSearchPlaceholderColor: #ccc; | |||||
@navbarInverseBrandColor: @navbarInverseLinkColor; | |||||
// Pagination | |||||
// ------------------------- | |||||
@paginationBackground: #fff; | |||||
@paginationBorder: #ddd; | |||||
@paginationActiveBackground: #f5f5f5; | |||||
// Hero unit | |||||
// ------------------------- | |||||
@heroUnitBackground: @grayLighter; | |||||
@heroUnitHeadingColor: inherit; | |||||
@heroUnitLeadColor: inherit; | |||||
// Form states and alerts | |||||
// ------------------------- | |||||
@warningText: #c09853; | |||||
@warningBackground: #fcf8e3; | |||||
@warningBorder: darken(spin(@warningBackground, -10), 3%); | |||||
@errorText: #b94a48; | |||||
@errorBackground: #f2dede; | |||||
@errorBorder: darken(spin(@errorBackground, -10), 3%); | |||||
@successText: #468847; | |||||
@successBackground: #dff0d8; | |||||
@successBorder: darken(spin(@successBackground, -10), 5%); | |||||
@infoText: #3a87ad; | |||||
@infoBackground: #d9edf7; | |||||
@infoBorder: darken(spin(@infoBackground, -10), 7%); | |||||
// Tooltips and popovers | |||||
// ------------------------- | |||||
@tooltipColor: #fff; | |||||
@tooltipBackground: #000; | |||||
@tooltipArrowWidth: 5px; | |||||
@tooltipArrowColor: @tooltipBackground; | |||||
@popoverBackground: #fff; | |||||
@popoverArrowWidth: 10px; | |||||
@popoverArrowColor: #fff; | |||||
@popoverTitleBackground: darken(@popoverBackground, 3%); | |||||
// Special enhancement for popovers | |||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1; | |||||
@popoverArrowOuterColor: rgba(0,0,0,.25); | |||||
// GRID | |||||
// -------------------------------------------------- | |||||
// Default 940px grid | |||||
// ------------------------- | |||||
@gridColumns: 12; | |||||
@gridColumnWidth: 60px; | |||||
@gridGutterWidth: 20px; | |||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); | |||||
// 1200px min | |||||
@gridColumnWidth1200: 70px; | |||||
@gridGutterWidth1200: 30px; | |||||
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); | |||||
// 768px-979px | |||||
@gridColumnWidth768: 42px; | |||||
@gridGutterWidth768: 20px; | |||||
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); | |||||
// Fluid grid | |||||
// ------------------------- | |||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); | |||||
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); | |||||
// 1200px min | |||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); | |||||
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); | |||||
// 768px-979px | |||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); | |||||
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); |
@ -0,0 +1,29 @@ | |||||
// | |||||
// Wells | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.well { | |||||
min-height: 20px; | |||||
padding: 19px; | |||||
margin-bottom: 20px; | |||||
background-color: @wellBackground; | |||||
border: 1px solid darken(@wellBackground, 7%); | |||||
.border-radius(@baseBorderRadius); | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); | |||||
blockquote { | |||||
border-color: #ddd; | |||||
border-color: rgba(0,0,0,.15); | |||||
} | |||||
} | |||||
// Sizes | |||||
.well-large { | |||||
padding: 24px; | |||||
.border-radius(@borderRadiusLarge); | |||||
} | |||||
.well-small { | |||||
padding: 9px; | |||||
.border-radius(@borderRadiusSmall); | |||||
} |
@ -0,0 +1,15 @@ | |||||
div.applause_button { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
& applause-button { | |||||
height: 50px; | |||||
width: 50px; | |||||
& div.style-root { | |||||
/* We are forced to use important because applause-button has defined | |||||
* style on the element */ | |||||
fill: maroon !important; | |||||
stroke: maroon !important; | |||||
color: maroon !important; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,38 @@ | |||||
.article-content { | |||||
& blockquote { | |||||
--quotes-margin: 13px; | |||||
background: Cornsilk; | |||||
border-left: 5px solid goldenrod; | |||||
border-radius: var(--border-radius); | |||||
box-sizing: border-box; | |||||
margin: 1rem auto 2rem; | |||||
padding: 0.1rem 1.2rem; | |||||
position: relative; | |||||
width: 80%; | |||||
&:before, | |||||
&:after { | |||||
color: dimgray; | |||||
font-size: 4rem; | |||||
line-height: 0; | |||||
margin: 0; | |||||
padding: 0; | |||||
position: absolute; | |||||
} | |||||
&:before { | |||||
content: open-quote; | |||||
margin-right: var(--quotes-margin); | |||||
right: 100%; | |||||
top: 30px; | |||||
} | |||||
&:after { | |||||
bottom: 0px; | |||||
content: close-quote; | |||||
left: 100%; | |||||
margin-left: var(--quotes-margin); | |||||
top: auto; | |||||
} | |||||
& p { | |||||
margin: 20px 0; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,34 @@ | |||||
.codecopy { | |||||
position: relative; | |||||
overflow: visible; | |||||
& button.codecopy-btn { | |||||
font-size: rfs(0.9rem); | |||||
box-shadow: none; | |||||
min-height: initial; | |||||
position: absolute; | |||||
z-index: 1; | |||||
right: 0; | |||||
top: 0; | |||||
background-color: #fe8019; | |||||
padding: rfs(0.2rem); | |||||
border: none; | |||||
border-top-right-radius: var(--borderRadius); | |||||
border-bottom-left-radius: var(--borderRadius); | |||||
&:hover, | |||||
&:focus { | |||||
box-shadow: none; | |||||
} | |||||
} | |||||
} | |||||
/* Remove radus when inside liquid_tags.include_code */ | |||||
figure.code | |||||
> div.highlight:not(:first-child) | |||||
> div.codecopy | |||||
> button.codecopy-btn { | |||||
border-top-right-radius: 0; | |||||
} |
@ -0,0 +1,102 @@ | |||||
/* For highlighting lines in code snippets */ | |||||
.highlight span.hll span { | |||||
background-color: black; | |||||
display: inline-block; | |||||
width: 100%; | |||||
} | |||||
div.highlight { | |||||
margin-bottom: 20px; | |||||
border-radius: var(--borderRadius); | |||||
} | |||||
td.code div.highlight { | |||||
border-radius: 0 var(--borderRadius) var(--borderRadius) 0; | |||||
} | |||||
pre { | |||||
overflow: auto; | |||||
white-space: pre; | |||||
word-break: normal; | |||||
word-wrap: normal; | |||||
color: #ebdbb2; /* This is needed due to bug in Pygments. It does not wraps some part of the code of some lagauges, like reST. This is for fallback. */ | |||||
} | |||||
/* liquid_tags.include_code */ | |||||
figure.code { | |||||
margin: 0; | |||||
padding: 0; | |||||
& figcaption { | |||||
display: flex; | |||||
flex-direction: row; | |||||
flex-wrap: wrap; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
border-radius: var(--borderRadius) var(--borderRadius) 0 0; | |||||
background-color: #544c50; | |||||
color: #ebdbb2; | |||||
padding: 1px 9.5px; | |||||
font-family: var(--sansFontFamily); | |||||
font-size: rfs(1.1rem); | |||||
& span.liquid-tags-code-title { | |||||
flex-grow: 1; | |||||
} | |||||
& span.liquid-tags-code-filename { | |||||
font-family: var(--monoFontFamily); | |||||
color: #fe8019; | |||||
} | |||||
/* Download Link */ | |||||
& a { | |||||
color: #b8bb26; | |||||
text-transform: capitalize; | |||||
position: relative; | |||||
margin-left: 30px; | |||||
&:before { | |||||
height: rfs(0.9rem); | |||||
width: rfs(0.9rem); | |||||
top: rfs(0.35rem); | |||||
content: url("data:image/svg+xml,%3Csvg%20image-rendering%3D%22optimizeQuality%22%20shape-rendering%3D%22geometricPrecision%22%20text-rendering%3D%22geometricPrecision%22%20viewBox%3D%220%200%20294%20452.5%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23b8bb26%22%3E%3Cpath%20d%3D%22m126%200h42v185h62l-83%20111-83-111h62z%22%2F%3E%3Cpath%20d%3D%22m294%20257v105c-98%200-196%200-294%200v-105h34v71h226v-71z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); | |||||
margin: 0; | |||||
padding: 0 4px 0 0; | |||||
right: 100%; | |||||
position: absolute; | |||||
} | |||||
} | |||||
} | |||||
& div.highlight:not(:first-child) { | |||||
border-radius: 0 0 var(--borderRadius) var(--borderRadius); | |||||
} | |||||
} | |||||
table { | |||||
table-layout: fixed; | |||||
width: 100%; | |||||
} | |||||
td { | |||||
vertical-align: top; | |||||
} | |||||
@media (max-width: 979px) { | |||||
.linenos { | |||||
display: none !important; | |||||
} | |||||
} | |||||
.linenos { | |||||
width: 30px; | |||||
} | |||||
.linenos div pre { | |||||
text-align: right; | |||||
overflow: hidden; | |||||
} | |||||
td.code { | |||||
width: 100%; | |||||
} | |||||
.linenodiv pre { | |||||
border-radius: var(--borderRadius) 0 0 var(--borderRadius); | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} | |||||
table.highlighttable { | |||||
border: none; | |||||
} | |||||
table.highlighttable td { | |||||
border: none; | |||||
} | |||||
table.highlighttable tbody > tr:nth-child(odd) > td { | |||||
background-color: transparent; | |||||
} |
@ -1,15 +0,0 @@ | |||||
.table-of-content .toc { | |||||
font-size: 0.9em; | |||||
} | |||||
.article-content p{ | |||||
font-size: 19px; | |||||
} | |||||
.article-content { | |||||
max-width: none !important; | |||||
} | |||||
pre { | |||||
word-break: break-all; | |||||
} |
@ -1,606 +1,456 @@ | |||||
/* Base */ | /* Base */ | ||||
/* #push.height = -#content-sans-footer.margin-bottom = #footer.margin-top + ul.footer-content */ | |||||
body, | |||||
html { | |||||
height: 100%; | |||||
} | |||||
#content-sans-footer { | |||||
min-height: 100%; | |||||
margin-bottom: -60px; | |||||
} | |||||
#push { | |||||
height: 60px; | |||||
} | |||||
h1, | |||||
h2, | |||||
h3, | |||||
h4, | |||||
h5, | |||||
h6 { | |||||
font-family: Baskerville, Garamond, Georgia, 'DejaVu Serif', 'Times New Roman', Times, Serif; | |||||
font-weight: normal; | |||||
} | |||||
h1 small, h1 a, h1 a:hover, | |||||
h2 small, h2 a, h2 a:hover, | |||||
h3 small, h3 a, h3 a:hover, | |||||
h4 small, h4 a, h4 a:hover, | |||||
h5 small, h5 a, h5 a:hover, | |||||
h6 small, h6 a, h6 a:hover { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
:root { | |||||
--borderRadius: 4px; | |||||
--mutedTextColor: dimgray; | |||||
} | |||||
html, | |||||
body { | |||||
height: 100%; | |||||
} | |||||
body { | |||||
display: flex; | |||||
flex-direction: column; | |||||
} | |||||
div#content { | |||||
flex: 1 0 auto; | |||||
} | |||||
footer { | |||||
align-content: center; | |||||
align-items: center; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.2); | |||||
display: flex; | |||||
flex-direction: row; | |||||
flex-shrink: 0; | |||||
flex-wrap: wrap; | |||||
justify-content: flex-end; | |||||
margin: 15px 0 0 0; | |||||
min-height: 40px; | |||||
padding: 0 3px; | |||||
} | |||||
footer div { | |||||
margin: 3px 0; | |||||
} | |||||
footer div:first-child { | |||||
margin-right: auto; | |||||
} | |||||
footer div#fpowered { | |||||
margin-left: auto; | |||||
margin-right: unset; | |||||
} | |||||
:lang(zh) { | |||||
font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", | |||||
Helvetica, Arial, sans-serif; | |||||
} | } | ||||
a { | a { | ||||
color: #3875d7; | |||||
color: #3875d7; | |||||
} | } | ||||
hr { | hr { | ||||
border-width: 3px; | |||||
} | |||||
/* site title */ | |||||
.site-name { | |||||
font-family: 'Monaco', 'Inconsolata', 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, Monospace; | |||||
border-width: 3px; | |||||
} | } | ||||
/* Top navigation menu */ | /* Top navigation menu */ | ||||
.top-menu li a { | .top-menu li a { | ||||
font-weight: bold; | |||||
} | |||||
/* Footer */ | |||||
#footer { | |||||
border-top: 1px solid rgba(0, 0, 0, .2); | |||||
font: .8em Calibri, Tahoma, Arial, Sans-Serif; | |||||
margin: 15px 0 0 0; | |||||
padding: 0; | |||||
} | |||||
ul.footer-content { | |||||
list-style: none; | |||||
margin: -1px 0 0 0; | |||||
padding: 2px 5px 0; | |||||
display: table; | |||||
height: 45px; | |||||
width: 100%; | |||||
-moz-box-sizing: border-box; | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
} | |||||
ul.footer-content li { | |||||
padding-left: 5px; | |||||
display: table-cell; | |||||
vertical-align: middle; | |||||
height: 100%; | |||||
} | |||||
.elegant-power { | |||||
text-align: right; | |||||
} | |||||
.elegant-license { | |||||
text-align: left; | |||||
} | |||||
.elegant-subtitle { | |||||
text-align: left; | |||||
font-weight: bold; | |||||
} | } | ||||
/* comment */ | /* comment */ | ||||
#comment-message, | #comment-message, | ||||
#post-share-links:not(a) { | #post-share-links:not(a) { | ||||
color: #6F6F6F; | |||||
text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.15); | |||||
} | |||||
#post-share-links a{ | |||||
text-shadow: 0 0; | |||||
} | |||||
.disqus-comment-count { | |||||
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif; | |||||
font-size: .9em; | |||||
} | |||||
#disqus_thread { | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
} | |||||
/* Syntax Highlight */ | |||||
table { | |||||
table-layout: fixed; | |||||
width: 100%; | |||||
} | |||||
td { | |||||
vertical-align: top; | |||||
} | |||||
@media (max-width:979px) { | |||||
.linenos { | |||||
display:none !important; | |||||
} | |||||
} | |||||
.linenos { | |||||
width: 30px; | |||||
} | |||||
.linenos div pre { | |||||
text-align: right; | |||||
overflow: hidden; | |||||
} | |||||
pre { | |||||
overflow: auto; | |||||
white-space: pre; | |||||
word-break: normal; | |||||
word-wrap: normal; | |||||
} | |||||
td.code .highlight pre { | |||||
border-radius: 0 3px 3px 0; | |||||
color: #6f6f6f; | |||||
text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.15); | |||||
} | } | ||||
td.code { | |||||
width: 100%; | |||||
#post-share-links a { | |||||
text-shadow: 0 0; | |||||
} | } | ||||
.linenodiv pre { | |||||
background-color: #eee8d5; | |||||
border-radius: 3px 0 0 3px; | |||||
color: #657b83; | |||||
.comment-count { | |||||
font-family: "Trebuchet MS", Trebuchet, "Lucida Sans Unicode", "Lucida Grande", | |||||
"Lucida Sans", Arial, Sans-Serif; | |||||
font-size: 0.9em; | |||||
} | } | ||||
div.highlight { | |||||
margin-bottom: 20px; | |||||
#comment_thread { | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
} | } | ||||
/* Tags */ | /* Tags */ | ||||
ul.list-projects, | |||||
.list-of-tags { | .list-of-tags { | ||||
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; | |||||
list-style: none; | |||||
margin: 0; | |||||
overflow: hidden; | |||||
list-style: none; | |||||
margin: 0; | |||||
overflow: hidden; | |||||
} | } | ||||
.list-of-tags li { | .list-of-tags li { | ||||
float: left; | |||||
line-height: 28px; | |||||
margin: 0; | |||||
float: left; | |||||
line-height: 28px; | |||||
margin: 0; | |||||
} | } | ||||
.list-of-tags a { | .list-of-tags a { | ||||
background: #EEE; | |||||
border-radius: 3px; | |||||
color: #222; | |||||
margin: 2px; | |||||
padding: 3px 6px; | |||||
text-decoration: none; | |||||
} | |||||
.list-of-tags a span { | |||||
font-size: .8em; | |||||
vertical-align: super; | |||||
background: #eee; | |||||
border-radius: var(--borderRadius); | |||||
color: #222; | |||||
margin: 2px; | |||||
padding: 3px 6px; | |||||
text-decoration: none; | |||||
} | } | ||||
.tags-in-article li { | .tags-in-article li { | ||||
float: none; | |||||
line-height: 28px; | |||||
} | |||||
.tag-title { | |||||
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif; | |||||
} | |||||
.articles-in-tag li { | |||||
font: 1.1em/1.6em 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif; | |||||
float: none; | |||||
line-height: 28px; | |||||
} | } | ||||
/* Article */ | /* Article */ | ||||
article p:not(#list-of-translations):not(#post-share-links) a, | |||||
article ol a, | |||||
blockquote a, | |||||
article div.article-content ul:not(.articles-timeline):not(.related-posts-list) a { | |||||
border-bottom: thin dashed #A9A9A9; | |||||
color: #000; | |||||
} | |||||
article p a:hover, | |||||
article ol a:hover, | |||||
article div.article-content ul:not(.articles-timeline) a:hover { | |||||
border-bottom: none; | |||||
text-decoration: none; | |||||
text-shadow: none; | |||||
} | |||||
.article-content, div.recent-posts p { | |||||
font: 1.2em/1.6em 'PT Serif', Georgia, 'Times New Roman', Times, Serif; | |||||
text-align: justify; | |||||
.article-content, | |||||
div.recent-posts p { | |||||
text-align: justify; | |||||
} | } | ||||
.article-content { | .article-content { | ||||
max-width: 50em; | |||||
} | |||||
.article-content p, div.recent-posts p { | |||||
font-size: inherit; | |||||
font-variant: normal; | |||||
line-height: 1.6em; | |||||
text-transform: none; | |||||
max-width: 50em; | |||||
} | } | ||||
.article-content p { | .article-content p { | ||||
margin: 20px 0; | |||||
} | |||||
.article-content blockquote { | |||||
border-left: 0; | |||||
margin: 20px 0 0 2em; | |||||
padding: 0 0 0 20px; | |||||
} | |||||
.article-content blockquote:before { | |||||
color: #646464; | |||||
content: '\f10d'; | |||||
font: 18px FontAwesome; | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
margin-left: -2em; | |||||
text-decoration: inherit; | |||||
position:absolute; | |||||
} | |||||
.article-content blockquote { | |||||
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; | |||||
font-size: inherit; | |||||
font-variant: normal; | |||||
line-height: 1.7em; | |||||
text-transform: none; | |||||
font-weight: 300; | |||||
position:relative; | |||||
margin: 0 0 20px 0; | |||||
} | } | ||||
.article-content ul:not(.related-posts-list):not(.articles-timeline) { | .article-content ul:not(.related-posts-list):not(.articles-timeline) { | ||||
font-size: inherit; | |||||
list-style-type: disc; | |||||
font-size: inherit; | |||||
list-style-type: disc; | |||||
} | } | ||||
.article-content ul.related-posts-list { | .article-content ul.related-posts-list { | ||||
list-style-type: square; | |||||
list-style-type: square; | |||||
} | } | ||||
.article-content ol { | .article-content ol { | ||||
font-size: inherit; | |||||
list-style-type: decimal; | |||||
font-size: inherit; | |||||
list-style-type: decimal; | |||||
} | } | ||||
.article-content li { | .article-content li { | ||||
line-height: 1.7em; | |||||
list-style-position: outside; | |||||
margin: 1px 0 1px 20px; | |||||
line-height: 1.7em; | |||||
list-style-position: outside; | |||||
margin: 1px 0 1px 20px; | |||||
} | } | ||||
.article-content dl { | .article-content dl { | ||||
font-size: inherit; | |||||
list-style-position: outside; | |||||
list-style-type: decimal; | |||||
margin: 20px 0 20px 20px; | |||||
font-size: inherit; | |||||
list-style-position: outside; | |||||
list-style-type: decimal; | |||||
margin: 20px 0 20px 20px; | |||||
} | } | ||||
.article-content dd { | .article-content dd { | ||||
line-height: 1.7em; | |||||
margin: 1px 0 1px 20px; | |||||
padding: 3px 0; | |||||
line-height: 1.7em; | |||||
margin: 1px 0 1px 20px; | |||||
padding: 3px 0; | |||||
} | } | ||||
.article-content dt { | .article-content dt { | ||||
font-size: inherit; | |||||
font-size: inherit; | |||||
} | |||||
h1, | |||||
h2, | |||||
h3, | |||||
h4, | |||||
h5, | |||||
h6 { | |||||
font-weight: normal; | |||||
margin: 10px 0px; | |||||
} | } | ||||
.page-header { | .page-header { | ||||
border-bottom: 1px solid #8f8686; | |||||
color: #8B0000; | |||||
margin: 10px 10px 20px; | |||||
padding: 5px; | |||||
border-bottom: 2px solid maroon; | |||||
color: maroon; | |||||
margin: 10px 0 30px 0; | |||||
} | } | ||||
.page-header h1 { | .page-header h1 { | ||||
font-size: 3em; | |||||
font-weight: normal; | |||||
border: none; | |||||
line-height: 1em; | |||||
} | } | ||||
ul.articles-timeline { | ul.articles-timeline { | ||||
list-style: none; | |||||
margin: 0; | |||||
padding-bottom: 30px; | |||||
list-style: none; | |||||
margin: 0; | |||||
padding-bottom: 30px; | |||||
} | } | ||||
ul.articles-timeline .next-article { | ul.articles-timeline .next-article { | ||||
float: right; | |||||
margin: 0; | |||||
} | |||||
ul.articles-timeline .previous-article { | |||||
float: left; | |||||
margin: 0; | |||||
} | |||||
i.sidebar-social-links { | |||||
border-radius: 20%; | |||||
border: solid transparent 1px; | |||||
color: #A2A2A2; | |||||
font-size: 1.3em; | |||||
margin: 0; | |||||
padding: 1px; | |||||
text-align: center; | |||||
text-decoration: none; | |||||
width: 12%; | |||||
} | |||||
i.sidebar-social-links:hover { | |||||
background-color: #A2A2A2; | |||||
color: #fff; | |||||
} | |||||
i.fa-twitter:hover, i.fa-twitter-square:hover { | |||||
background-color: #00ACED; | |||||
} | |||||
i.fa-facebook:hover, i.fa-facebook-square:hover { | |||||
background-color: #3B5998; | |||||
} | |||||
i.fa-google-plus:hover, i.fa-google-plus-square:hover { | |||||
background-color: #D34836; | |||||
} | |||||
i.fa-adn:hover { | |||||
background-color: #49484D; | |||||
} | |||||
i.fa-envelope:hover { | |||||
background-color: #5E9EDA; | |||||
} | |||||
i.fa-github:hover, i.fa-github-square:hover, i.fa-github-alt:hover { | |||||
background-color: #000; | |||||
} | |||||
i.fa-flickr:hover { | |||||
background-color: #FF0084; | |||||
float: right; | |||||
margin: 0; | |||||
} | } | ||||
i.fa-youtube:hover, i.fa-youtube-square:hover, i.fa-youtube-play:hover { | |||||
background-color: #BC272F; | |||||
} | |||||
i.fa-linkedin:hover, i.fa-linkedin-square:hover { | |||||
background-color: #107FB9; | |||||
} | |||||
i.fa-gittip:hover { | |||||
background-color: #663300; | |||||
} | |||||
i.fa-rss:hover, i.fa-rss-square:hover { | |||||
background-color: #FF6600; | |||||
} | |||||
i.fa-bitbucket:hover, i.fa-bitbucket-square:hover { | |||||
background-color: #205081; | |||||
} | |||||
i.fa-stack-exchange:hover { | |||||
background-color: #3A7BC8; | |||||
ul.articles-timeline .previous-article { | |||||
float: left; | |||||
margin: 0; | |||||
} | } | ||||
ul.multi-parts-list a { | ul.multi-parts-list a { | ||||
color: black; | |||||
color: black; | |||||
} | } | ||||
ul.multi-parts-list a:hover { | ul.multi-parts-list a:hover { | ||||
text-decoration: none; | |||||
text-decoration: none; | |||||
} | } | ||||
ul.multi-parts-list li.active-part { | ul.multi-parts-list li.active-part { | ||||
font-style: italic; | |||||
font-style: italic; | |||||
} | |||||
.table-of-content .toc ul { | |||||
margin: 0; | |||||
padding: 0 0 0 0.2rem; | |||||
list-style-type: none; | |||||
list-style: symbols inside none; | |||||
} | } | ||||
.table-of-content .toc { | |||||
font-size: .7em; | |||||
.table-of-content .toc > ul > li > ul { | |||||
padding-left: 1rem; | |||||
} | } | ||||
.last-updated a { | .last-updated a { | ||||
color: #333; | |||||
color: #333; | |||||
} | } | ||||
.last-updated a:hover { | .last-updated a:hover { | ||||
text-decoration: none; | |||||
text-decoration: none; | |||||
} | } | ||||
.article-content img { | .article-content img { | ||||
border: 2px solid #EEE; | |||||
padding: 5px; | |||||
border: 2px solid #eee; | |||||
padding: 5px; | |||||
} | } | ||||
p#post-share-links { | p#post-share-links { | ||||
text-align: right; | |||||
} | |||||
/* Perma link in article */ | |||||
h1:hover > a.headerlink, | |||||
h2:hover > a.headerlink, | |||||
h3:hover > a.headerlink, | |||||
h4:hover > a.headerlink, | |||||
h5:hover > a.headerlink, | |||||
h6:hover > a.headerlink, | |||||
dt:hover > a.headerlink { | |||||
text-decoration: none; | |||||
visibility: visible; | |||||
} | |||||
a.headerlink { | |||||
color: grey; | |||||
padding-left: .5em; | |||||
visibility: hidden; | |||||
text-align: right; | |||||
} | } | ||||
/* Categories */ | /* Categories */ | ||||
.list-of-categories span { | |||||
font-size: .7em; | |||||
vertical-align: super; | |||||
a.category-title-inside-accordion { | |||||
text-decoration: none; | |||||
} | } | ||||
a.list-of-categories { | |||||
text-decoration: none; | |||||
} | |||||
ul.list-articles-category { | |||||
list-style: none outside none; | |||||
margin: 0 0 0 5px; | |||||
} | |||||
ul.list-articles-category li time { | |||||
color: #8F8F8F; | |||||
display: inline-block; | |||||
font: .9em 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif; | |||||
width: 7em; | |||||
ul.list-articles-under-tag-category { | |||||
list-style: none outside none; | |||||
margin: 0 0 0 5px; | |||||
} | } | ||||
a.category-link { | a.category-link { | ||||
color: #333; | |||||
color: #333; | |||||
} | } | ||||
a.category-link:hover { | a.category-link:hover { | ||||
text-decoration: none; | |||||
} | |||||
a.list-of-categories { | |||||
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif; | |||||
font-size: 1.1em; | |||||
} | |||||
a.list-of-categories:hover { | |||||
background-color: #08c; | |||||
border-radius: 4px; | |||||
color: #FFF; | |||||
} | |||||
/* Archives */ | |||||
ul.list-all-articles { | |||||
list-style: none; | |||||
margin: 0; | |||||
} | |||||
ul.list-all-articles li { | |||||
border-bottom: 1px dotted #000; | |||||
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, Sans-Serif; | |||||
font-size: 1.1em; | |||||
padding: .3em 0; | |||||
overflow: auto; | |||||
} | |||||
ul.list-all-articles li time { | |||||
color: #AAA; | |||||
float: right; | |||||
font-family: 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif; | |||||
font-size: .9em; | |||||
} | |||||
div.blog-archives h2 { | |||||
float: left; | |||||
position: relative; | |||||
margin:0; | |||||
} | |||||
div.blog-archives article, div.recent-posts article { | |||||
border-bottom: 1px dotted #AAA; | |||||
text-decoration: none; | |||||
} | } | ||||
div.blog-archives article, div.recent-posts article { | |||||
font-size: 1.1em; | |||||
padding: .3em .2em; | |||||
position: relative; | |||||
overflow: auto; | |||||
a.category-title-inside-accordion:hover, | |||||
a:not(.collapsed).accordion-toggle.category-title-inside-accordion { | |||||
background-color: #08c; | |||||
border-radius: var(--borderRadius); | |||||
color: #fff; | |||||
} | } | ||||
div.blog-archives article { | |||||
margin-left: 6em; | |||||
div.blog-archives h2 { | |||||
float: left; | |||||
clear: both; | |||||
position: relative; | |||||
margin: 0; | |||||
} | } | ||||
div.blog-archives article.last-entry-of-year { | |||||
margin-bottom: 1em; | |||||
.proj-desc { | |||||
color: var(--mutedTextColor); | |||||
} | } | ||||
div.blog-archives time, div.recent-posts time { | |||||
float: right; | |||||
text-align: right; | |||||
ul.list-projects li, | |||||
div.blog-archives div, | |||||
div.recent-posts-article { | |||||
border-bottom: 1px dotted var(--mutedTextColor); | |||||
overflow: auto; | |||||
padding: 0.3rem 0.2rem; | |||||
} | } | ||||
div.blog-archives time, div.recent-posts time, div.recent-posts section { | |||||
color: #8F8F8F; | |||||
font: .9em 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif; | |||||
ul.list-articles-under-tag-category li { | |||||
padding: 0.1rem 0.2rem; | |||||
} | } | ||||
div.recent-posts section a { | |||||
color: inherit; | |||||
padding-left: .3em; | |||||
div.blog-archives div { | |||||
margin-left: rfs(6rem); | |||||
} | } | ||||
div.recent-posts section a:hover { | |||||
border-bottom: 1px dashed; | |||||
text-decoration: none; | |||||
div.blog-archives div.last-entry-of-year { | |||||
margin-bottom: 1em; | |||||
} | } | ||||
div.recent-posts time { | |||||
font-size: inherit; | |||||
div.blog-archives time, | |||||
div.recent-posts time, | |||||
ul.list-articles-under-tag-category li time { | |||||
float: right; | |||||
text-align: left; | |||||
} | } | ||||
div.recent-posts-time { | |||||
display: inline; | |||||
div.blog-archives time, | |||||
div.recent-posts time, | |||||
ul.list-articles-under-tag-category li time, | |||||
div.recent-posts-posted { | |||||
color: var(--mutedTextColor); | |||||
} | } | ||||
@media (max-width: 767px) { | @media (max-width: 767px) { | ||||
div.blog-archives h2 { | |||||
float: none; | |||||
} | |||||
div.blog-archives article { | |||||
margin-left: 0; | |||||
padding-left: 0; | |||||
} | |||||
div.recent-posts time { | |||||
float: none; | |||||
} | |||||
div.recent-posts-time { | |||||
display: block; | |||||
} | |||||
ul.list-articles-category li time { | |||||
width: 100%; | |||||
} | |||||
div.blog-archives h2 { | |||||
float: none; | |||||
} | |||||
div.blog-archives div { | |||||
margin-left: 0; | |||||
} | |||||
div.blog-archives article { | |||||
margin-left: 0; | |||||
padding-left: 0; | |||||
} | |||||
div.blog-archives time, | |||||
div.recent-posts time, | |||||
ul.list-articles-under-tag-category li time { | |||||
float: none; | |||||
display: block; | |||||
} | |||||
} | } | ||||
/* MailChimp */ | /* MailChimp */ | ||||
#mc-embed-signup { | #mc-embed-signup { | ||||
font-family: inherit; | |||||
font-size: inherit; | |||||
margin: 10px 0; | |||||
font-family: inherit; | |||||
font-size: inherit; | |||||
margin: 10px 0; | |||||
} | } | ||||
#mc-embed-signup form { | #mc-embed-signup form { | ||||
display: block; | |||||
padding: 0; | |||||
position: relative; | |||||
text-align: left; | |||||
display: block; | |||||
padding: 0; | |||||
position: relative; | |||||
text-align: left; | |||||
} | } | ||||
#mc-embed-signup input { | #mc-embed-signup input { | ||||
-moz-appearance: none; | |||||
-webkit-appearance: none; | |||||
border: 1px solid #999; | |||||
-moz-appearance: none; | |||||
-webkit-appearance: none; | |||||
border: 1px solid #999; | |||||
} | } | ||||
#mc-embed-signup input:focus { | #mc-embed-signup input:focus { | ||||
border-color: #333; | |||||
border-color: #333; | |||||
} | } | ||||
#mc-embed-signup input.email { | #mc-embed-signup input.email { | ||||
display: block; | |||||
font-size: .9em; | |||||
margin: 0 4% 10px 0; | |||||
min-width: 130px; | |||||
padding: 8px 0; | |||||
text-indent: 5px; | |||||
width: 100%; | |||||
display: block; | |||||
font-size: 0.9em; | |||||
margin: 0 4% 10px 0; | |||||
min-width: 130px; | |||||
padding: 8px 0; | |||||
text-indent: 5px; | |||||
width: 100%; | |||||
} | } | ||||
#mc-embed-signup input.button { | #mc-embed-signup input.button { | ||||
display: block; | |||||
margin: 0 0 10px 0; | |||||
min-width: 130px; | |||||
width: 100%; | |||||
display: block; | |||||
margin: 0 0 10px 0; | |||||
min-width: 130px; | |||||
width: 100%; | |||||
} | } | ||||
#mc-embed-signup input[type='email'] { | |||||
height: 100%; | |||||
#mc-embed-signup input[type="email"] { | |||||
height: 100%; | |||||
} | } | ||||
#mc-embed-signup .button { | #mc-embed-signup .button { | ||||
background-color: #EEE; | |||||
border-radius: 4px; | |||||
border: 1px solid #D3D3D3; | |||||
clear: both; | |||||
color: #000; | |||||
cursor: pointer; | |||||
display: inline-block; | |||||
font-size: 1em; | |||||
font-weight: normal; | |||||
height: 32px; | |||||
line-height: 32px; | |||||
margin: 0 5px 10px 0; | |||||
padding: 0; | |||||
text-align: center; | |||||
text-decoration: none; | |||||
vertical-align: top; | |||||
white-space: nowrap; | |||||
width: auto; | |||||
} | |||||
#mc-embed-signup .button: hover { | |||||
background-color: #DFDFDF; | |||||
background-color: #eee; | |||||
border-radius: var(--borderRadius); | |||||
border: 1px solid #d3d3d3; | |||||
clear: both; | |||||
color: #000; | |||||
cursor: pointer; | |||||
display: inline-block; | |||||
font-size: 1em; | |||||
font-weight: normal; | |||||
height: 32px; | |||||
line-height: 32px; | |||||
margin: 0 5px 10px 0; | |||||
padding: 0; | |||||
text-align: center; | |||||
text-decoration: none; | |||||
vertical-align: top; | |||||
white-space: nowrap; | |||||
width: auto; | |||||
} | |||||
#mc-embed-signup.button:hover { | |||||
background-color: #dfdfdf; | |||||
} | } | ||||
#mc-embed-signup .clear { | #mc-embed-signup .clear { | ||||
clear: none; | |||||
display: inline; | |||||
clear: none; | |||||
display: inline; | |||||
} | } | ||||
/* Index page */ | /* Index page */ | ||||
#allposts { | #allposts { | ||||
color: #999; | |||||
float: right; | |||||
font-size: 75%; | |||||
font-weight: normal; | |||||
color: var(--mutedTextColor); | |||||
float: right; | |||||
font-size: 75%; | |||||
font-weight: normal; | |||||
} | } | ||||
a#allposts:hover { | a#allposts:hover { | ||||
color: #333; | |||||
} | |||||
.proj-desc { | |||||
color: #999; | |||||
font: .9em 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif; | |||||
color: #333; | |||||
} | } | ||||
/* reST specific rules*/ | /* reST specific rules*/ | ||||
.literal { | .literal { | ||||
-moz-border-radius: 3px; | |||||
-webkit-border-radius: 3px; | |||||
background-color: #f7f7f9; | |||||
border-radius: 3px; | |||||
border: 1px solid #e1e1e8; | |||||
color: #d14; | |||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; | |||||
font-size: 12px; | |||||
padding: 2px 4px; | |||||
white-space: nowrap; | |||||
background-color: #f7f7f9; | |||||
border-radius: var(--borderRadius); | |||||
border: 1px solid #e1e1e8; | |||||
color: #d14; | |||||
padding: 2px 4px; | |||||
white-space: nowrap; | |||||
} | |||||
div.line-block div.line-block { | |||||
margin-left: 1.5em; | |||||
} | } | ||||
/* Helper CSS classes */ | /* Helper CSS classes */ | ||||
.amp { | .amp { | ||||
font-family: 'Warnock Pro', 'Goudy Old Style', 'Palatino', 'Book Antiqua', Serif; | |||||
font-style: italic; | |||||
font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", | |||||
Serif; | |||||
font-style: italic; | |||||
} | } | ||||
/* Use following classes to add floating images to your post */ | /* Use following classes to add floating images to your post */ | ||||
div.figure, .article-content img { | |||||
text-align: center; | |||||
div.figure, | |||||
.article-content img { | |||||
text-align: center; | |||||
} | } | ||||
div.figure img { | div.figure img { | ||||
width: 100%; | |||||
width: 100%; | |||||
} | } | ||||
div.figure p.caption { | div.figure p.caption { | ||||
color: gray; | |||||
font-size: 1.0em; | |||||
margin: 0; | |||||
color: gray; | |||||
font-size: 0.6em; | |||||
margin: 0; | |||||
} | } | ||||
div.figure p.caption a { | div.figure p.caption a { | ||||
border: none; | |||||
color: gray; | |||||
border: none; | |||||
color: gray; | |||||
} | |||||
div.figure.align-right, | |||||
.article-content img.align-right { | |||||
float: right; | |||||
margin-left: 1.5em; | |||||
} | |||||
div.figure.align-left, | |||||
.article-content img.align-left { | |||||
float: left; | |||||
margin-right: 1.5em; | |||||
} | |||||
/* Author blurb */ | |||||
.author-blurb { | |||||
padding: 5px 0; | |||||
} | |||||
.author-blurb img { | |||||
padding: 0; | |||||
width: 32px; | |||||
height: 32px; | |||||
} | |||||
/* Github Gist */ | |||||
.gist table { | |||||
table-layout: initial; | |||||
} | |||||
/* Table */ | |||||
table { | |||||
max-width: 100%; | |||||
background-color: transparent; | |||||
border-collapse: collapse; | |||||
border-spacing: 0; | |||||
border: 1px solid #bfbfbf; | |||||
border-collapse: separate; | |||||
*border-collapse: collapse; | |||||
border-left: 0; | |||||
border-radius: var(--borderRadius); | |||||
} | |||||
table th, | |||||
table td { | |||||
border-left: 1px solid #bfbfbf; | |||||
padding-left: 2px; | |||||
padding-right: 2px; | |||||
} | |||||
table thead:first-child tr:first-child th { | |||||
border-top: 0; | |||||
} | |||||
table thead:first-child tr:first-child > th:first-child { | |||||
border-top-left-radius: var(--borderRadius); | |||||
} | } | ||||
div.figure.align-right, .article-content img.align-right { | |||||
float: right; | |||||
margin-left: 1.5em; | |||||
table thead:first-child tr:first-child > th:last-child { | |||||
border-top-right-radius: var(--borderRadius); | |||||
} | } | ||||
div.figure.align-left, .article-content img.align-left { | |||||
float: left; | |||||
margin-right: 1.5em; | |||||
table tbody:last-child tr:last-child > td:first-child { | |||||
border-bottom-left-radius: var(--borderRadius); | |||||
} | } | ||||
table tbody:last-child tr:last-child > td:last-child { | |||||
border-bottom-right-radius: var(--borderRadius); | |||||
} | |||||
table tbody > tr:nth-child(odd) > td { | |||||
background-color: #ebebeb; | |||||
} | |||||
.navbar .nav > li > a { | |||||
float: none; | |||||
padding: 11px 15px 13px; | |||||
} | |||||
.site-name { | |||||
color: var(--mutedTextColor); | |||||
} |
@ -0,0 +1,29 @@ | |||||
div.elegant-gallery { | |||||
display: flex; | |||||
flex-wrap: nowrap; | |||||
flex-direction: row; | |||||
justify-content: center; | |||||
align-items: center; | |||||
align-content: center; | |||||
margin: 0; | |||||
padding: 0; | |||||
font-size: 0; | |||||
& figure { | |||||
margin: 0; | |||||
padding: 0; | |||||
max-width: 100%; | |||||
border: 1px solid lightgray; | |||||
& figcaption { | |||||
display: none; | |||||
} | |||||
& img { | |||||
max-width: 100%; | |||||
border: none; | |||||
padding: 0; | |||||
margin: 0; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,76 @@ | |||||
article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl), | |||||
article ol a:not(.ampl), | |||||
blockquote a:not(.ampl), | |||||
article | |||||
div.article-content | |||||
ul:not(.articles-timeline):not(.related-posts-list) | |||||
a { | |||||
color: black; | |||||
display: inline-block; | |||||
position: relative; | |||||
&:after { | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 1px; | |||||
background: silver; | |||||
content: ""; | |||||
opacity: 1; | |||||
transition: opacity 0.3s, transform 0.3s; | |||||
transform: translateY(0px); | |||||
} | |||||
&:hover { | |||||
color: royalblue; | |||||
text-decoration: none; | |||||
transition: color 0.1s; | |||||
&:after { | |||||
opacity: 0; | |||||
transform: translateY(5px); | |||||
} | |||||
} | |||||
&:focus { | |||||
text-decoration: none; | |||||
} | |||||
} | |||||
div.recent-posts-posted a { | |||||
color: inherit; | |||||
padding-left: 0.3em; | |||||
&:hover { | |||||
border-bottom: 1px dashed; | |||||
text-decoration: none; | |||||
} | |||||
&:focus { | |||||
text-decoration: none; | |||||
} | |||||
} | |||||
#lunr-search-result > div.lunr-search-result-item > h4 > a, | |||||
a.ampl { | |||||
color: royalblue; | |||||
display: inline-block; | |||||
position: relative; | |||||
&:focus { | |||||
text-decoration: none; | |||||
} | |||||
&:hover { | |||||
color: dodgerblue; | |||||
text-decoration: none; | |||||
transition: color 0.1s; | |||||
&:after { | |||||
opacity: 1; | |||||
transform: translateY(0px); | |||||
} | |||||
} | |||||
&:after { | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 2px; | |||||
background: dodgerblue; | |||||
content: ""; | |||||
opacity: 0; | |||||
transition: opacity 0.3s, transform 0.3s; | |||||
transform: translateY(5px); | |||||
} | |||||
} |
@ -1,71 +1,309 @@ | |||||
/* Solarized Light Theme for code snippets */ | |||||
.highlight, pre { background-color: #fdf6e3; color: #586e75 } | |||||
.highlight .c { color: #93a1a1 } /* Comment */ | |||||
.highlight .err { color: #586e75 } /* Error */ | |||||
.highlight .g { color: #586e75 } /* Generic */ | |||||
.highlight .k { color: #859900 } /* Keyword */ | |||||
.highlight .l { color: #586e75 } /* Literal */ | |||||
.highlight .n { color: #586e75 } /* Name */ | |||||
.highlight .o { color: #859900 } /* Operator */ | |||||
.highlight .x { color: #cb4b16 } /* Other */ | |||||
.highlight .p { color: #586e75 } /* Punctuation */ | |||||
.highlight .cm { color: #93a1a1 } /* Comment.Multiline */ | |||||
.highlight .cp { color: #859900 } /* Comment.Preproc */ | |||||
.highlight .c1 { color: #93a1a1 } /* Comment.Single */ | |||||
.highlight .cs { color: #859900 } /* Comment.Special */ | |||||
.highlight .gd { color: #2aa198 } /* Generic.Deleted */ | |||||
.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */ | |||||
.highlight .gr { color: #dc322f } /* Generic.Error */ | |||||
.highlight .gh { color: #cb4b16 } /* Generic.Heading */ | |||||
.highlight .gi { color: #859900 } /* Generic.Inserted */ | |||||
.highlight .go { color: #586e75 } /* Generic.Output */ | |||||
.highlight .gp { color: #586e75 } /* Generic.Prompt */ | |||||
.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */ | |||||
.highlight .gu { color: #cb4b16 } /* Generic.Subheading */ | |||||
.highlight .gt { color: #586e75 } /* Generic.Traceback */ | |||||
.highlight .kc { color: #cb4b16 } /* Keyword.Constant */ | |||||
.highlight .kd { color: #268bd2 } /* Keyword.Declaration */ | |||||
.highlight .kn { color: #859900 } /* Keyword.Namespace */ | |||||
.highlight .kp { color: #859900 } /* Keyword.Pseudo */ | |||||
.highlight .kr { color: #268bd2 } /* Keyword.Reserved */ | |||||
.highlight .kt { color: #dc322f } /* Keyword.Type */ | |||||
.highlight .ld { color: #586e75 } /* Literal.Date */ | |||||
.highlight .m { color: #2aa198 } /* Literal.Number */ | |||||
.highlight .s { color: #2aa198 } /* Literal.String */ | |||||
.highlight .na { color: #586e75 } /* Name.Attribute */ | |||||
.highlight .nb { color: #B58900 } /* Name.Builtin */ | |||||
.highlight .nc { color: #268bd2 } /* Name.Class */ | |||||
.highlight .no { color: #cb4b16 } /* Name.Constant */ | |||||
.highlight .nd { color: #268bd2 } /* Name.Decorator */ | |||||
.highlight .ni { color: #cb4b16 } /* Name.Entity */ | |||||
.highlight .ne { color: #cb4b16 } /* Name.Exception */ | |||||
.highlight .nf { color: #268bd2 } /* Name.Function */ | |||||
.highlight .nl { color: #586e75 } /* Name.Label */ | |||||
.highlight .nn { color: #586e75 } /* Name.Namespace */ | |||||
.highlight .nx { color: #586e75 } /* Name.Other */ | |||||
.highlight .py { color: #586e75 } /* Name.Property */ | |||||
.highlight .nt { color: #268bd2 } /* Name.Tag */ | |||||
.highlight .nv { color: #268bd2 } /* Name.Variable */ | |||||
.highlight .ow { color: #859900 } /* Operator.Word */ | |||||
.highlight .w { color: #586e75 } /* Text.Whitespace */ | |||||
.highlight .mf { color: #2aa198 } /* Literal.Number.Float */ | |||||
.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ | |||||
.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ | |||||
.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ | |||||
.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */ | |||||
.highlight .sc { color: #2aa198 } /* Literal.String.Char */ | |||||
.highlight .sd { color: #586e75 } /* Literal.String.Doc */ | |||||
.highlight .s2 { color: #2aa198 } /* Literal.String.Double */ | |||||
.highlight .se { color: #cb4b16 } /* Literal.String.Escape */ | |||||
.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */ | |||||
.highlight .si { color: #2aa198 } /* Literal.String.Interpol */ | |||||
.highlight .sx { color: #2aa198 } /* Literal.String.Other */ | |||||
.highlight .sr { color: #dc322f } /* Literal.String.Regex */ | |||||
.highlight .s1 { color: #2aa198 } /* Literal.String.Single */ | |||||
.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ | |||||
.highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */ | |||||
.highlight .vc { color: #268bd2 } /* Name.Variable.Class */ | |||||
.highlight .vg { color: #268bd2 } /* Name.Variable.Global */ | |||||
.highlight .vi { color: #268bd2 } /* Name.Variable.Instance */ | |||||
.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ | |||||
.highlight .hll { | |||||
/* This line results in highlighting whitespaces -- Talha */ | |||||
/* background-color: #ffffcc; */ | |||||
} | |||||
.highlight { | |||||
background: #282828; | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} | |||||
.highlight .c { | |||||
color: #928374; | |||||
font-style: italic; | |||||
background-color: #282828; | |||||
} /* Comment */ | |||||
.highlight .err { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Error */ | |||||
.highlight .esc { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Escape */ | |||||
.highlight .g { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Generic */ | |||||
.highlight .k { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword */ | |||||
.highlight .l { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Literal */ | |||||
.highlight .n { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name */ | |||||
.highlight .o { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Operator */ | |||||
.highlight .x { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Other */ | |||||
.highlight .p { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Punctuation */ | |||||
.highlight .ch { | |||||
color: #928374; | |||||
font-style: italic; | |||||
background-color: #282828; | |||||
} /* Comment.Hashbang */ | |||||
.highlight .cm { | |||||
color: #928374; | |||||
font-style: italic; | |||||
background-color: #282828; | |||||
} /* Comment.Multiline */ | |||||
.highlight .cp { | |||||
color: #8ec07c; | |||||
background-color: #282828; | |||||
} /* Comment.Preproc */ | |||||
.highlight .c1 { | |||||
color: #928374; | |||||
font-style: italic; | |||||
background-color: #282828; | |||||
} /* Comment.Single */ | |||||
.highlight .cs { | |||||
color: #928374; | |||||
font-style: italic; | |||||
background-color: #282828; | |||||
} /* Comment.Special */ | |||||
.highlight .gd { | |||||
color: #282828; | |||||
background-color: #fb4934; | |||||
} /* Generic.Deleted */ | |||||
.highlight .ge { | |||||
color: #83a598; | |||||
text-decoration: underline; | |||||
background-color: #282828; | |||||
} /* Generic.Emph */ | |||||
.highlight .gr { | |||||
color: #ebdbb2; | |||||
font-weight: bold; | |||||
background-color: #fb4934; | |||||
} /* Generic.Error */ | |||||
.highlight .gh { | |||||
color: #b8bb26; | |||||
font-weight: bold; | |||||
background-color: #282828; | |||||
} /* Generic.Heading */ | |||||
.highlight .gi { | |||||
color: #282828; | |||||
background-color: #b8bb26; | |||||
} /* Generic.Inserted */ | |||||
.highlight .go { | |||||
color: #504945; | |||||
background-color: #282828; | |||||
} /* Generic.Output */ | |||||
.highlight .gp { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Generic.Prompt */ | |||||
.highlight .gs { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Generic.Strong */ | |||||
.highlight .gu { | |||||
color: #b8bb26; | |||||
font-weight: bold; | |||||
background-color: #282828; | |||||
} /* Generic.Subheading */ | |||||
.highlight .gt { | |||||
color: #ebdbb2; | |||||
font-weight: bold; | |||||
background-color: #fb4934; | |||||
} /* Generic.Traceback */ | |||||
.highlight .kc { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword.Constant */ | |||||
.highlight .kd { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword.Declaration */ | |||||
.highlight .kn { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword.Namespace */ | |||||
.highlight .kp { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword.Pseudo */ | |||||
.highlight .kr { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Keyword.Reserved */ | |||||
.highlight .kt { | |||||
color: #fabd2f; | |||||
background-color: #282828; | |||||
} /* Keyword.Type */ | |||||
.highlight .ld { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Literal.Date */ | |||||
.highlight .m { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number */ | |||||
.highlight .s { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String */ | |||||
.highlight .na { | |||||
color: #b8bb26; | |||||
font-weight: bold; | |||||
background-color: #282828; | |||||
} /* Name.Attribute */ | |||||
.highlight .nb { | |||||
color: #fabd2f; | |||||
background-color: #282828; | |||||
} /* Name.Builtin */ | |||||
.highlight .nc { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Class */ | |||||
.highlight .no { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Name.Constant */ | |||||
.highlight .nd { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Decorator */ | |||||
.highlight .ni { | |||||
color: #fabd2f; | |||||
background-color: #282828; | |||||
} /* Name.Entity */ | |||||
.highlight .ne { | |||||
color: #fb4934; | |||||
background-color: #282828; | |||||
} /* Name.Exception */ | |||||
.highlight .nf { | |||||
color: #fabd2f; | |||||
background-color: #282828; | |||||
} /* Name.Function */ | |||||
.highlight .nl { | |||||
color: #fb4934; | |||||
background-color: #282828; | |||||
} /* Name.Label */ | |||||
.highlight .nn { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Namespace */ | |||||
.highlight .nx { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Other */ | |||||
.highlight .py { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Property */ | |||||
.highlight .nt { | |||||
color: #fb4934; | |||||
background-color: #282828; | |||||
} /* Name.Tag */ | |||||
.highlight .nv { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Variable */ | |||||
.highlight .ow { | |||||
color: #fe8019; | |||||
background-color: #282828; | |||||
} /* Operator.Word */ | |||||
.highlight .w { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Text.Whitespace */ | |||||
.highlight .mb { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Bin */ | |||||
.highlight .mf { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Float */ | |||||
.highlight .mh { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Hex */ | |||||
.highlight .mi { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Integer */ | |||||
.highlight .mo { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Oct */ | |||||
.highlight .sb { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Backtick */ | |||||
.highlight .sc { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Char */ | |||||
.highlight .sd { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Doc */ | |||||
.highlight .s2 { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Double */ | |||||
.highlight .se { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Escape */ | |||||
.highlight .sh { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Heredoc */ | |||||
.highlight .si { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Interpol */ | |||||
.highlight .sx { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Other */ | |||||
.highlight .sr { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Regex */ | |||||
.highlight .s1 { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} /* Literal.String.Single */ | |||||
.highlight .ss { | |||||
color: #83a598; | |||||
background-color: #282828; | |||||
} /* Literal.String.Symbol */ | |||||
.highlight .bp { | |||||
color: #fabd2f; | |||||
background-color: #282828; | |||||
} /* Name.Builtin.Pseudo */ | |||||
.highlight .vc { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Variable.Class */ | |||||
.highlight .vg { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Variable.Global */ | |||||
.highlight .vi { | |||||
color: #ebdbb2; | |||||
background-color: #282828; | |||||
} /* Name.Variable.Instance */ | |||||
.highlight .il { | |||||
color: #d3869b; | |||||
background-color: #282828; | |||||
} /* Literal.Number.Integer.Long */ | |||||
/* My fixes -- Talha*/ | |||||
.highlight .cpf { | |||||
color: #b8bb26; | |||||
background-color: #282828; | |||||
} |
@ -0,0 +1,18 @@ | |||||
#lunr-search-result { | |||||
& div.lunr-search-result-item { | |||||
margin: 0 0 20px 0; | |||||
} | |||||
& p.lunr-result-fail, | |||||
& p.lunr-search-result-item-body { | |||||
font-family: var(--serifFontFamily); | |||||
font-size: rfs(1rem); | |||||
line-height: 1.6; | |||||
text-transform: none; | |||||
margin: 10px 0 0 0; | |||||
} | |||||
& p.lunr-result-fail { | |||||
color: maroon; | |||||
text-align: center; | |||||
font-size: rfs(1.125rem); | |||||
} | |||||
} |
@ -0,0 +1,17 @@ | |||||
div#sidebar-social-link a svg { | |||||
filter: saturate(0%) brightness(0.7); | |||||
height: 20px; | |||||
width: 20px; | |||||
margin-right: 3px; | |||||
transition: all 0.2s ease-in-out; | |||||
z-index: 0; | |||||
position: relative; | |||||
} | |||||
div#sidebar-social-link a { | |||||
text-decoration: none; | |||||
} | |||||
div#sidebar-social-link a svg:hover { | |||||
filter: none; | |||||
transform: scale(2.5); | |||||
z-index: 1; | |||||
} |
@ -0,0 +1,4 @@ | |||||
section#article-sidebar { | |||||
float: right; | |||||
font-size: 0.9em; | |||||
} |
@ -0,0 +1,191 @@ | |||||
:root { | |||||
--headingBorderBottomWidth: 1px; | |||||
--headingBorderBottomStyle: solid; | |||||
/* Headings that are not inside article. Like in sidebar are "others" */ | |||||
--headingOthersLineHeight: 1.3rem; | |||||
--headingOthersH4FontSize: 1.1rem; | |||||
--sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||||
--monoFontFamily: "PT Mono", Monaco, Menlo, Consolas, "Courier New", monospace; | |||||
--serifFontFamily: "PT Serif", Georgia, "Times New Roman", Times, serif; | |||||
--serifHeadingFontFamily: "PT Serif Caption", Baskerville, Garamond, Georgia, | |||||
"DejaVu Serif", "Times New Roman", Times, serif; | |||||
} | |||||
body { | |||||
margin: 0; | |||||
font-family: var(--sansFontFamily); | |||||
} | |||||
h1, | |||||
h2, | |||||
h3, | |||||
h4, | |||||
h5, | |||||
h6, | |||||
.page-header { | |||||
font-weight: normal; | |||||
text-align: left; | |||||
& small { | |||||
font-style: italic; | |||||
} | |||||
} | |||||
header.page-header h1 { | |||||
font-family: var(--serifHeadingFontFamily); | |||||
} | |||||
h1, | |||||
h2, | |||||
h3, | |||||
h4, | |||||
h5, | |||||
h6, | |||||
.tag-title, | |||||
.list-of-tags, | |||||
a.category-title-inside-accordion, | |||||
ul.list-articles-under-tag-category li time { | |||||
font-family: var(--sansFontFamily); | |||||
} | |||||
h1 { | |||||
font-size: rfs(2.4rem); | |||||
} | |||||
h2 { | |||||
font-size: rfs(2.2rem); | |||||
} | |||||
h3 { | |||||
font-size: rfs(2rem); | |||||
} | |||||
h4 { | |||||
font-size: rfs(1.8rem); | |||||
} | |||||
h5 { | |||||
font-size: rfs(1.6rem); | |||||
} | |||||
h6 { | |||||
font-size: rfs(1.4rem); | |||||
} | |||||
h1, | |||||
h2, | |||||
h3 { | |||||
line-height: 1.3em; | |||||
border-bottom: var(--headingBorderBottomWidth) var(--headingBorderBottomStyle) | |||||
lightgray; | |||||
& code { | |||||
font-size: rfs(80%); | |||||
} | |||||
& small { | |||||
font-size: rfs(70%); | |||||
} | |||||
} | |||||
h4, | |||||
h5, | |||||
h6 { | |||||
line-height: 1.1em; | |||||
& code { | |||||
font-size: rfs(80%); | |||||
} | |||||
& small { | |||||
font-size: rfs(80%); | |||||
} | |||||
} | |||||
h1 small, | |||||
h1 a, | |||||
h1 a:hover, | |||||
h2 small, | |||||
h2 a, | |||||
h2 a:hover, | |||||
h3 small, | |||||
h3 a, | |||||
h3 a:hover, | |||||
h4 small, | |||||
h4 a, | |||||
h4 a:hover, | |||||
h5 small, | |||||
h5 a, | |||||
h5 a:hover, | |||||
h6 small, | |||||
h6 a, | |||||
h6 a:hover { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
} | |||||
small.subtitle { | |||||
font-style: italic; | |||||
} | |||||
h1#my-projects, | |||||
h1#recent-posts, | |||||
div.blog-archives h2 { | |||||
border: none; | |||||
} | |||||
h1#recent-posts { | |||||
line-height: var(--headingOthersLineHeight); | |||||
} | |||||
section#article-sidebar h4, | |||||
nav h4 { | |||||
font-size: rfs(var(--headingOthersH4FontSize)); | |||||
line-height: var(--headingOthersLineHeight); | |||||
} | |||||
/* code */ | |||||
code, | |||||
pre, | |||||
.literal, /* reST */ | |||||
.site-name { | |||||
/*Site title */ | |||||
font-family: var(--monoFontFamily); | |||||
} | |||||
/* code */ | |||||
code, | |||||
pre, | |||||
.literal /* reST */ { | |||||
font-size: rfs(0.9rem); | |||||
} | |||||
.brand .site-name { | |||||
font-size: rfs(1.5rem); | |||||
vertical-align: middle; | |||||
} | |||||
/* article */ | |||||
.article-content, | |||||
div.recent-posts p { | |||||
font-size: rfs(1.125rem); | |||||
font-family: var(--serifFontFamily); | |||||
font-weight: 400; | |||||
line-height: 1.6; | |||||
text-transform: none; | |||||
} | |||||
/* blockquotes */ | |||||
blockquote { | |||||
& p { | |||||
font-family: var(--sansFontFamily); | |||||
font-weight: 400; | |||||
} | |||||
} | |||||
a.category-title-inside-accordion { | |||||
font-size: rfs(1.1rem); | |||||
} | |||||
.author-name { | |||||
font-weight: bold; | |||||
font-variant: small-caps; | |||||
} | |||||
.author-blurb { | |||||
font-style: italic; | |||||
} | |||||
ul.list-projects li, | |||||
div.blog-archives div, | |||||
div.recent-posts-article, | |||||
ul.list-articles-under-tag-category li { | |||||
font-family: var(--sansFontFamily); | |||||
font-size: rfs(0.963rem); | |||||
} | |||||
.table-of-content .toc, | |||||
.proj-desc, | |||||
footer, | |||||
div.blog-archives time, | |||||
div.recent-posts time, | |||||
ul.list-articles-under-tag-category li time, | |||||
div.recent-posts-posted { | |||||
font-family: var(--sansFontFamily); | |||||
font-size: rfs(0.8rem); | |||||
} | |||||
span.superscript { | |||||
font-size: rfs(0.67rem); | |||||
vertical-align: super; | |||||
} | |||||
.navbar .nav > li > a { | |||||
font-size: rfs(1rem); | |||||
} |
@ -0,0 +1,52 @@ | |||||
const copyToClipboardDefaultText = { | |||||
innerText: "Copy", | |||||
ariaLabel: "Copy to clipboard" | |||||
}; | |||||
const copyToClipboardSuccessText = { | |||||
innerText: "Copied!", | |||||
ariaLabel: "Copied to clipboard" | |||||
}; | |||||
// Get all pre. But ignore line numbers section | |||||
document.querySelectorAll("div.highlight pre").forEach(snippet => { | |||||
// create div.codecopy | |||||
const wrapper = document.createElement("div"); | |||||
wrapper.classList.add("codecopy"); | |||||
// Wrap code inside div.codecopy | |||||
const parent = snippet.parentNode; | |||||
parent.replaceChild(wrapper, snippet); | |||||
wrapper.appendChild(snippet); | |||||
// Create button | |||||
const button = ` | |||||
<button | |||||
class="codecopy-btn" | |||||
title=${copyToClipboardDefaultText.ariaLabel} | |||||
aria-label=${copyToClipboardDefaultText.ariaLabel} | |||||
>${copyToClipboardDefaultText.innerText} | |||||
</button>`; | |||||
// Add button to div.codecopy | |||||
wrapper.insertAdjacentHTML("afterbegin", button); | |||||
}); | |||||
// Add copy to clipboard functionality | |||||
const clipboard = new ClipboardJS(".codecopy-btn", { | |||||
target: trigger => { | |||||
return trigger.parentNode; | |||||
} | |||||
}); | |||||
// Show message on success | |||||
clipboard.on("success", e => { | |||||
e.trigger.innerText = copyToClipboardSuccessText.innerText; | |||||
e.trigger.setAttribute("aria-label", copyToClipboardSuccessText.ariaLabel); | |||||
e.clearSelection(); | |||||
// Reset button text | |||||
setTimeout(() => { | |||||
e.trigger.innerText = copyToClipboardDefaultText.innerText; | |||||
e.trigger.setAttribute("aria-label", copyToClipboardDefaultText.ariaLabel); | |||||
}, 400); | |||||
}); |
@ -0,0 +1,89 @@ | |||||
function lunr_search(term) { | |||||
if (!tipuesearch) { | |||||
console.error("Pelican Elegant: Tipue search plugin is required"); | |||||
return; | |||||
} | |||||
const items = tipuesearch["pages"]; | |||||
const documents = tipuesearch["pages"]; | |||||
let counter = 0; | |||||
for (item in documents) { | |||||
documents[item]["id"] = counter; | |||||
counter = counter + 1; | |||||
} | |||||
idx = lunr(function() { | |||||
this.ref("id"); | |||||
this.field("title"); | |||||
this.field("url"); | |||||
this.field("text", { boost: 10 }); | |||||
this.field("tags"); | |||||
items.forEach(function(doc) { | |||||
this.add(doc); | |||||
}, this); | |||||
}); | |||||
if (term && idx && documents) { | |||||
const resultHeadingRoot = document.getElementById( | |||||
"lunr-search-result-heading" | |||||
); | |||||
const resultIntro = ` | |||||
<h1>Search Results for <code>${term}</code></h1> | |||||
`; | |||||
resultHeadingRoot.insertAdjacentHTML("beforeend", resultIntro); | |||||
const resultRoot = document.getElementById("lunr-search-result"); | |||||
//put results on the screen. | |||||
var results = idx.search(term); | |||||
if (results.length > 0) { | |||||
//if results | |||||
for (var i = 0; i < results.length; i++) { | |||||
var ref = results[i]["ref"]; | |||||
var url = documents[ref]["url"]; | |||||
var title = documents[ref]["title"]; | |||||
var body = documents[ref]["text"].substring(0, 280) + "..."; | |||||
const resultItem = ` | |||||
<div class="lunr-search-result-item"> | |||||
<h4> | |||||
<a href=${url}> | |||||
${title} | |||||
</a> | |||||
</h4> | |||||
</a> | |||||
<p class="lunr-search-result-item-body">${body} | |||||
</p> | |||||
</div> | |||||
`; | |||||
resultRoot.insertAdjacentHTML("beforeend", resultItem); | |||||
} | |||||
} else { | |||||
const resultFailure = `<p class="lunr-result-fail">No results found for <span class="lunr-search-term">${term}</span></p>`; | |||||
resultRoot.insertAdjacentHTML("beforeend", resultFailure); | |||||
} | |||||
} | |||||
return false; | |||||
} | |||||
function getQueryVariable(variable) { | |||||
var query = window.location.search.substring(1); | |||||
var vars = query.split("&"); | |||||
for (var i = 0; i < vars.length; i++) { | |||||
var pair = vars[i].split("="); | |||||
if (pair[0] === variable) { | |||||
return decodeURIComponent(pair[1].replace(/\+/g, "%20")); | |||||
} | |||||
} | |||||
} | |||||
var searchTerm = getQueryVariable("q"); | |||||
if (searchTerm) { | |||||
lunr_search(searchTerm); | |||||
} |
@ -0,0 +1,420 @@ | |||||
/* Magnific Popup CSS */ | |||||
.mfp-bg { | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1042; | |||||
overflow: hidden; | |||||
position: fixed; | |||||
background: #0b0b0b; | |||||
opacity: 0.8; | |||||
} | |||||
.mfp-wrap { | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1043; | |||||
position: fixed; | |||||
outline: none !important; | |||||
-webkit-backface-visibility: hidden; | |||||
} | |||||
.mfp-container { | |||||
text-align: center; | |||||
position: absolute; | |||||
width: 100%; | |||||
height: 100%; | |||||
left: 0; | |||||
top: 0; | |||||
padding: 0 8px; | |||||
box-sizing: border-box; | |||||
} | |||||
.mfp-container:before { | |||||
content: ""; | |||||
display: inline-block; | |||||
height: 100%; | |||||
vertical-align: middle; | |||||
} | |||||
.mfp-align-top .mfp-container:before { | |||||
display: none; | |||||
} | |||||
.mfp-content { | |||||
position: relative; | |||||
display: inline-block; | |||||
vertical-align: middle; | |||||
margin: 0 auto; | |||||
text-align: left; | |||||
z-index: 1045; | |||||
} | |||||
.mfp-inline-holder .mfp-content, | |||||
.mfp-ajax-holder .mfp-content { | |||||
width: 100%; | |||||
cursor: auto; | |||||
} | |||||
.mfp-ajax-cur { | |||||
cursor: progress; | |||||
} | |||||
.mfp-zoom-out-cur, | |||||
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { | |||||
cursor: -moz-zoom-out; | |||||
cursor: -webkit-zoom-out; | |||||
cursor: zoom-out; | |||||
} | |||||
.mfp-zoom { | |||||
cursor: pointer; | |||||
cursor: -webkit-zoom-in; | |||||
cursor: -moz-zoom-in; | |||||
cursor: zoom-in; | |||||
} | |||||
.mfp-auto-cursor .mfp-content { | |||||
cursor: auto; | |||||
} | |||||
.mfp-close, | |||||
.mfp-arrow, | |||||
.mfp-preloader, | |||||
.mfp-counter { | |||||
-webkit-user-select: none; | |||||
-moz-user-select: none; | |||||
user-select: none; | |||||
} | |||||
.mfp-loading.mfp-figure { | |||||
display: none; | |||||
} | |||||
.mfp-hide { | |||||
display: none !important; | |||||
} | |||||
.mfp-preloader { | |||||
color: #ccc; | |||||
position: absolute; | |||||
top: 50%; | |||||
width: auto; | |||||
text-align: center; | |||||
margin-top: -0.8em; | |||||
left: 8px; | |||||
right: 8px; | |||||
z-index: 1044; | |||||
} | |||||
.mfp-preloader a { | |||||
color: #ccc; | |||||
} | |||||
.mfp-preloader a:hover { | |||||
color: #fff; | |||||
} | |||||
.mfp-s-ready .mfp-preloader { | |||||
display: none; | |||||
} | |||||
.mfp-s-error .mfp-content { | |||||
display: none; | |||||
} | |||||
button.mfp-close, | |||||
button.mfp-arrow { | |||||
overflow: visible; | |||||
cursor: pointer; | |||||
background: transparent; | |||||
border: 0; | |||||
-webkit-appearance: none; | |||||
display: block; | |||||
outline: none; | |||||
padding: 0; | |||||
z-index: 1046; | |||||
box-shadow: none; | |||||
touch-action: manipulation; | |||||
} | |||||
button::-moz-focus-inner { | |||||
padding: 0; | |||||
border: 0; | |||||
} | |||||
.mfp-close { | |||||
width: 44px; | |||||
height: 44px; | |||||
line-height: 44px; | |||||
position: absolute; | |||||
right: 0; | |||||
top: 0; | |||||
text-decoration: none; | |||||
text-align: center; | |||||
opacity: 0.65; | |||||
padding: 0 0 18px 10px; | |||||
color: #fff; | |||||
font-style: normal; | |||||
font-size: 28px; | |||||
font-family: Arial, Baskerville, monospace; | |||||
} | |||||
.mfp-close:hover, | |||||
.mfp-close:focus { | |||||
opacity: 1; | |||||
} | |||||
.mfp-close:active { | |||||
top: 1px; | |||||
} | |||||
.mfp-close-btn-in .mfp-close { | |||||
color: #333; | |||||
} | |||||
.mfp-image-holder .mfp-close, | |||||
.mfp-iframe-holder .mfp-close { | |||||
color: #fff; | |||||
right: -6px; | |||||
text-align: right; | |||||
padding-right: 6px; | |||||
width: 100%; | |||||
} | |||||
.mfp-counter { | |||||
position: absolute; | |||||
top: 0; | |||||
right: 0; | |||||
color: #ccc; | |||||
font-size: 12px; | |||||
line-height: 18px; | |||||
white-space: nowrap; | |||||
} | |||||
.mfp-arrow { | |||||
position: absolute; | |||||
opacity: 0.65; | |||||
margin: 0; | |||||
top: 50%; | |||||
margin-top: -55px; | |||||
padding: 0; | |||||
width: 90px; | |||||
height: 110px; | |||||
-webkit-tap-highlight-color: transparent; | |||||
} | |||||
.mfp-arrow:active { | |||||
margin-top: -54px; | |||||
} | |||||
.mfp-arrow:hover, | |||||
.mfp-arrow:focus { | |||||
opacity: 1; | |||||
} | |||||
.mfp-arrow:before, | |||||
.mfp-arrow:after { | |||||
content: ""; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
margin-top: 35px; | |||||
margin-left: 35px; | |||||
border: medium inset transparent; | |||||
} | |||||
.mfp-arrow:after { | |||||
border-top-width: 13px; | |||||
border-bottom-width: 13px; | |||||
top: 8px; | |||||
} | |||||
.mfp-arrow:before { | |||||
border-top-width: 21px; | |||||
border-bottom-width: 21px; | |||||
opacity: 0.7; | |||||
} | |||||
.mfp-arrow-left { | |||||
left: 0; | |||||
} | |||||
.mfp-arrow-left:after { | |||||
border-right: 17px solid #fff; | |||||
margin-left: 31px; | |||||
} | |||||
.mfp-arrow-left:before { | |||||
margin-left: 25px; | |||||
border-right: 27px solid #3f3f3f; | |||||
} | |||||
.mfp-arrow-right { | |||||
right: 0; | |||||
} | |||||
.mfp-arrow-right:after { | |||||
border-left: 17px solid #fff; | |||||
margin-left: 39px; | |||||
} | |||||
.mfp-arrow-right:before { | |||||
border-left: 27px solid #3f3f3f; | |||||
} | |||||
.mfp-iframe-holder { | |||||
padding-top: 40px; | |||||
padding-bottom: 40px; | |||||
} | |||||
.mfp-iframe-holder .mfp-content { | |||||
line-height: 0; | |||||
width: 100%; | |||||
max-width: 900px; | |||||
} | |||||
.mfp-iframe-holder .mfp-close { | |||||
top: -40px; | |||||
} | |||||
.mfp-iframe-scaler { | |||||
width: 100%; | |||||
height: 0; | |||||
overflow: hidden; | |||||
padding-top: 56.25%; | |||||
} | |||||
.mfp-iframe-scaler iframe { | |||||
position: absolute; | |||||
display: block; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||||
background: #000; | |||||
} | |||||
/* Main image in popup */ | |||||
img.mfp-img { | |||||
width: auto; | |||||
max-width: 100%; | |||||
height: auto; | |||||
display: block; | |||||
line-height: 0; | |||||
box-sizing: border-box; | |||||
padding: 40px 0 40px; | |||||
margin: 0 auto; | |||||
} | |||||
/* The shadow behind the image */ | |||||
.mfp-figure { | |||||
line-height: 0; | |||||
} | |||||
.mfp-figure:after { | |||||
content: ""; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 40px; | |||||
bottom: 40px; | |||||
display: block; | |||||
right: 0; | |||||
width: auto; | |||||
height: auto; | |||||
z-index: -1; | |||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||||
background: #444; | |||||
} | |||||
.mfp-figure small { | |||||
color: #bdbdbd; | |||||
display: block; | |||||
font-size: 12px; | |||||
line-height: 14px; | |||||
} | |||||
.mfp-figure figure { | |||||
margin: 0; | |||||
} | |||||
.mfp-bottom-bar { | |||||
margin-top: -36px; | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
width: 100%; | |||||
cursor: auto; | |||||
} | |||||
.mfp-title { | |||||
text-align: left; | |||||
line-height: 18px; | |||||
color: #f3f3f3; | |||||
word-wrap: break-word; | |||||
padding-right: 36px; | |||||
} | |||||
.mfp-image-holder .mfp-content { | |||||
max-width: 100%; | |||||
} | |||||
.mfp-gallery .mfp-image-holder .mfp-figure { | |||||
cursor: pointer; | |||||
} | |||||
@media screen and (max-width: 800px) and (orientation: landscape), | |||||
screen and (max-height: 300px) { | |||||
/** | |||||
* Remove all paddings around the image on small screen | |||||
*/ | |||||
.mfp-img-mobile .mfp-image-holder { | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
.mfp-img-mobile img.mfp-img { | |||||
padding: 0; | |||||
} | |||||
.mfp-img-mobile .mfp-figure:after { | |||||
top: 0; | |||||
bottom: 0; | |||||
} | |||||
.mfp-img-mobile .mfp-figure small { | |||||
display: inline; | |||||
margin-left: 5px; | |||||
} | |||||
.mfp-img-mobile .mfp-bottom-bar { | |||||
background: rgba(0, 0, 0, 0.6); | |||||
bottom: 0; | |||||
margin: 0; | |||||
top: auto; | |||||
padding: 3px 5px; | |||||
position: fixed; | |||||
box-sizing: border-box; | |||||
} | |||||
.mfp-img-mobile .mfp-bottom-bar:empty { | |||||
padding: 0; | |||||
} | |||||
.mfp-img-mobile .mfp-counter { | |||||
right: 5px; | |||||
top: 3px; | |||||
} | |||||
.mfp-img-mobile .mfp-close { | |||||
top: 0; | |||||
right: 0; | |||||
width: 35px; | |||||
height: 35px; | |||||
line-height: 35px; | |||||
background: rgba(0, 0, 0, 0.6); | |||||
position: fixed; | |||||
text-align: center; | |||||
padding: 0; | |||||
} | |||||
} | |||||
@media all and (max-width: 900px) { | |||||
.mfp-arrow { | |||||
-webkit-transform: scale(0.75); | |||||
transform: scale(0.75); | |||||
} | |||||
.mfp-arrow-left { | |||||
-webkit-transform-origin: 0; | |||||
transform-origin: 0; | |||||
} | |||||
.mfp-arrow-right { | |||||
-webkit-transform-origin: 100%; | |||||
transform-origin: 100%; | |||||
} | |||||
.mfp-container { | |||||
padding-left: 6px; | |||||
padding-right: 6px; | |||||
} | |||||
} |
@ -0,0 +1,571 @@ | |||||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ | |||||
/* | |||||
Contents: | |||||
1. Buttons | |||||
2. Share modal and links | |||||
3. Index indicator ("1 of X" counter) | |||||
4. Caption | |||||
5. Loading indicator | |||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.) | |||||
*/ | |||||
/* | |||||
1. Buttons | |||||
*/ | |||||
/* <button> css reset */ | |||||
.pswp__button { | |||||
width: 44px; | |||||
height: 44px; | |||||
position: relative; | |||||
background: none; | |||||
cursor: pointer; | |||||
overflow: visible; | |||||
-webkit-appearance: none; | |||||
display: block; | |||||
border: 0; | |||||
padding: 0; | |||||
margin: 0; | |||||
float: right; | |||||
opacity: 0.75; | |||||
-webkit-transition: opacity 0.2s; | |||||
transition: opacity 0.2s; | |||||
-webkit-box-shadow: none; | |||||
box-shadow: none; | |||||
} | |||||
.pswp__button:focus, | |||||
.pswp__button:hover { | |||||
opacity: 1; | |||||
} | |||||
.pswp__button:active { | |||||
outline: none; | |||||
opacity: 0.9; | |||||
} | |||||
.pswp__button::-moz-focus-inner { | |||||
padding: 0; | |||||
border: 0; | |||||
} | |||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */ | |||||
.pswp__ui--over-close .pswp__button--close { | |||||
opacity: 1; | |||||
} | |||||
.pswp__button, | |||||
.pswp__button--arrow--left:before, | |||||
.pswp__button--arrow--right:before { | |||||
background: url(default-skin.png) 0 0 no-repeat; | |||||
background-size: 264px 88px; | |||||
width: 44px; | |||||
height: 44px; | |||||
} | |||||
@media (-webkit-min-device-pixel-ratio: 1.1), | |||||
(-webkit-min-device-pixel-ratio: 1.09375), | |||||
(min-resolution: 105dpi), | |||||
(min-resolution: 1.1dppx) { | |||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ | |||||
.pswp--svg .pswp__button, | |||||
.pswp--svg .pswp__button--arrow--left:before, | |||||
.pswp--svg .pswp__button--arrow--right:before { | |||||
background-image: url(default-skin.svg); | |||||
} | |||||
.pswp--svg .pswp__button--arrow--left, | |||||
.pswp--svg .pswp__button--arrow--right { | |||||
background: none; | |||||
} | |||||
} | |||||
.pswp__button--close { | |||||
background-position: 0 -44px; | |||||
} | |||||
.pswp__button--share { | |||||
background-position: -44px -44px; | |||||
} | |||||
.pswp__button--fs { | |||||
display: none; | |||||
} | |||||
.pswp--supports-fs .pswp__button--fs { | |||||
display: block; | |||||
} | |||||
.pswp--fs .pswp__button--fs { | |||||
background-position: -44px 0; | |||||
} | |||||
.pswp__button--zoom { | |||||
display: none; | |||||
background-position: -88px 0; | |||||
} | |||||
.pswp--zoom-allowed .pswp__button--zoom { | |||||
display: block; | |||||
} | |||||
.pswp--zoomed-in .pswp__button--zoom { | |||||
background-position: -132px 0; | |||||
} | |||||
/* no arrows on touch screens */ | |||||
.pswp--touch .pswp__button--arrow--left, | |||||
.pswp--touch .pswp__button--arrow--right { | |||||
visibility: hidden; | |||||
} | |||||
/* | |||||
Arrow buttons hit area | |||||
(icon is added to :before pseudo-element) | |||||
*/ | |||||
.pswp__button--arrow--left, | |||||
.pswp__button--arrow--right { | |||||
background: none; | |||||
top: 50%; | |||||
margin-top: -50px; | |||||
width: 70px; | |||||
height: 100px; | |||||
position: absolute; | |||||
} | |||||
.pswp__button--arrow--left { | |||||
left: 0; | |||||
} | |||||
.pswp__button--arrow--right { | |||||
right: 0; | |||||
} | |||||
.pswp__button--arrow--left:before, | |||||
.pswp__button--arrow--right:before { | |||||
content: ""; | |||||
top: 35px; | |||||
background-color: rgba(0, 0, 0, 0.3); | |||||
height: 30px; | |||||
width: 32px; | |||||
position: absolute; | |||||
} | |||||
.pswp__button--arrow--left:before { | |||||
left: 6px; | |||||
background-position: -138px -44px; | |||||
} | |||||
.pswp__button--arrow--right:before { | |||||
right: 6px; | |||||
background-position: -94px -44px; | |||||
} | |||||
/* | |||||
2. Share modal/popup and links | |||||
*/ | |||||
.pswp__counter, | |||||
.pswp__share-modal { | |||||
-webkit-user-select: none; | |||||
-moz-user-select: none; | |||||
-ms-user-select: none; | |||||
user-select: none; | |||||
} | |||||
.pswp__share-modal { | |||||
display: block; | |||||
background: rgba(0, 0, 0, 0.5); | |||||
width: 100%; | |||||
height: 100%; | |||||
top: 0; | |||||
left: 0; | |||||
padding: 10px; | |||||
position: absolute; | |||||
z-index: 1600; | |||||
opacity: 0; | |||||
-webkit-transition: opacity 0.25s ease-out; | |||||
transition: opacity 0.25s ease-out; | |||||
-webkit-backface-visibility: hidden; | |||||
will-change: opacity; | |||||
} | |||||
.pswp__share-modal--hidden { | |||||
display: none; | |||||
} | |||||
.pswp__share-tooltip { | |||||
z-index: 1620; | |||||
position: absolute; | |||||
background: #fff; | |||||
top: 56px; | |||||
border-radius: 2px; | |||||
display: block; | |||||
width: auto; | |||||
right: 44px; | |||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); | |||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); | |||||
-webkit-transform: translateY(6px); | |||||
-ms-transform: translateY(6px); | |||||
transform: translateY(6px); | |||||
-webkit-transition: -webkit-transform 0.25s; | |||||
transition: transform 0.25s; | |||||
-webkit-backface-visibility: hidden; | |||||
will-change: transform; | |||||
} | |||||
.pswp__share-tooltip a { | |||||
display: block; | |||||
padding: 8px 12px; | |||||
color: #000; | |||||
text-decoration: none; | |||||
font-size: 14px; | |||||
line-height: 18px; | |||||
} | |||||
.pswp__share-tooltip a:hover { | |||||
text-decoration: none; | |||||
color: #000; | |||||
} | |||||
.pswp__share-tooltip a:first-child { | |||||
/* round corners on the first/last list item */ | |||||
border-radius: 2px 2px 0 0; | |||||
} | |||||
.pswp__share-tooltip a:last-child { | |||||
border-radius: 0 0 2px 2px; | |||||
} | |||||
.pswp__share-modal--fade-in { | |||||
opacity: 1; | |||||
} | |||||
.pswp__share-modal--fade-in .pswp__share-tooltip { | |||||
-webkit-transform: translateY(0); | |||||
-ms-transform: translateY(0); | |||||
transform: translateY(0); | |||||
} | |||||
/* increase size of share links on touch devices */ | |||||
.pswp--touch .pswp__share-tooltip a { | |||||
padding: 16px 12px; | |||||
} | |||||
a.pswp__share--facebook:before { | |||||
content: ""; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
position: absolute; | |||||
top: -12px; | |||||
right: 15px; | |||||
border: 6px solid transparent; | |||||
border-bottom-color: #fff; | |||||
-webkit-pointer-events: none; | |||||
-moz-pointer-events: none; | |||||
pointer-events: none; | |||||
} | |||||
a.pswp__share--facebook:hover { | |||||
background: #3e5c9a; | |||||
color: #fff; | |||||
} | |||||
a.pswp__share--facebook:hover:before { | |||||
border-bottom-color: #3e5c9a; | |||||
} | |||||
a.pswp__share--twitter:hover { | |||||
background: #55acee; | |||||
color: #fff; | |||||
} | |||||
a.pswp__share--pinterest:hover { | |||||
background: #ccc; | |||||
color: #ce272d; | |||||
} | |||||
a.pswp__share--download:hover { | |||||
background: #ddd; | |||||
} | |||||
/* | |||||
3. Index indicator ("1 of X" counter) | |||||
*/ | |||||
.pswp__counter { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
height: 44px; | |||||
font-size: 13px; | |||||
line-height: 44px; | |||||
color: #fff; | |||||
opacity: 0.75; | |||||
padding: 0 10px; | |||||
} | |||||
/* | |||||
4. Caption | |||||
*/ | |||||
.pswp__caption { | |||||
position: absolute; | |||||
left: 0; | |||||
bottom: 0; | |||||
width: 100%; | |||||
min-height: 44px; | |||||
} | |||||
.pswp__caption small { | |||||
font-size: 11px; | |||||
color: #bbb; | |||||
} | |||||
.pswp__caption__center { | |||||
text-align: left; | |||||
max-width: 420px; | |||||
margin: 0 auto; | |||||
font-size: 13px; | |||||
padding: 10px; | |||||
line-height: 20px; | |||||
color: #ccc; | |||||
} | |||||
.pswp__caption--empty { | |||||
display: none; | |||||
} | |||||
/* Fake caption element, used to calculate height of next/prev image */ | |||||
.pswp__caption--fake { | |||||
visibility: hidden; | |||||
} | |||||
/* | |||||
5. Loading indicator (preloader) | |||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR | |||||
*/ | |||||
.pswp__preloader { | |||||
width: 44px; | |||||
height: 44px; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 50%; | |||||
margin-left: -22px; | |||||
opacity: 0; | |||||
-webkit-transition: opacity 0.25s ease-out; | |||||
transition: opacity 0.25s ease-out; | |||||
will-change: opacity; | |||||
direction: ltr; | |||||
} | |||||
.pswp__preloader__icn { | |||||
width: 20px; | |||||
height: 20px; | |||||
margin: 12px; | |||||
} | |||||
.pswp__preloader--active { | |||||
opacity: 1; | |||||
} | |||||
.pswp__preloader--active .pswp__preloader__icn { | |||||
/* We use .gif in browsers that don't support CSS animation */ | |||||
background: url(preloader.gif) 0 0 no-repeat; | |||||
} | |||||
.pswp--css_animation .pswp__preloader--active { | |||||
opacity: 1; | |||||
} | |||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { | |||||
-webkit-animation: clockwise 500ms linear infinite; | |||||
animation: clockwise 500ms linear infinite; | |||||
} | |||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { | |||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; | |||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; | |||||
} | |||||
.pswp--css_animation .pswp__preloader__icn { | |||||
background: none; | |||||
opacity: 0.75; | |||||
width: 14px; | |||||
height: 14px; | |||||
position: absolute; | |||||
left: 15px; | |||||
top: 15px; | |||||
margin: 0; | |||||
} | |||||
.pswp--css_animation .pswp__preloader__cut { | |||||
/* | |||||
The idea of animating inner circle is based on Polymer ("material") loading indicator | |||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html | |||||
*/ | |||||
position: relative; | |||||
width: 7px; | |||||
height: 14px; | |||||
overflow: hidden; | |||||
} | |||||
.pswp--css_animation .pswp__preloader__donut { | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
width: 14px; | |||||
height: 14px; | |||||
border: 2px solid #fff; | |||||
border-radius: 50%; | |||||
border-left-color: transparent; | |||||
border-bottom-color: transparent; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
background: none; | |||||
margin: 0; | |||||
} | |||||
@media screen and (max-width: 1024px) { | |||||
.pswp__preloader { | |||||
position: relative; | |||||
left: auto; | |||||
top: auto; | |||||
margin: 0; | |||||
float: right; | |||||
} | |||||
} | |||||
@-webkit-keyframes clockwise { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
@keyframes clockwise { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
@-webkit-keyframes donut-rotate { | |||||
0% { | |||||
-webkit-transform: rotate(0); | |||||
transform: rotate(0); | |||||
} | |||||
50% { | |||||
-webkit-transform: rotate(-140deg); | |||||
transform: rotate(-140deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(0); | |||||
transform: rotate(0); | |||||
} | |||||
} | |||||
@keyframes donut-rotate { | |||||
0% { | |||||
-webkit-transform: rotate(0); | |||||
transform: rotate(0); | |||||
} | |||||
50% { | |||||
-webkit-transform: rotate(-140deg); | |||||
transform: rotate(-140deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(0); | |||||
transform: rotate(0); | |||||
} | |||||
} | |||||
/* | |||||
6. Additional styles | |||||
*/ | |||||
/* root element of UI */ | |||||
.pswp__ui { | |||||
-webkit-font-smoothing: auto; | |||||
visibility: visible; | |||||
opacity: 1; | |||||
z-index: 1550; | |||||
} | |||||
/* top black bar with buttons and "1 of X" indicator */ | |||||
.pswp__top-bar { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
height: 44px; | |||||
width: 100%; | |||||
} | |||||
.pswp__caption, | |||||
.pswp__top-bar, | |||||
.pswp--has_mouse .pswp__button--arrow--left, | |||||
.pswp--has_mouse .pswp__button--arrow--right { | |||||
-webkit-backface-visibility: hidden; | |||||
will-change: opacity; | |||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
} | |||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */ | |||||
.pswp--has_mouse .pswp__button--arrow--left, | |||||
.pswp--has_mouse .pswp__button--arrow--right { | |||||
visibility: visible; | |||||
} | |||||
.pswp__top-bar, | |||||
.pswp__caption { | |||||
background-color: rgba(0, 0, 0, 0.5); | |||||
} | |||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */ | |||||
.pswp__ui--fit .pswp__top-bar, | |||||
.pswp__ui--fit .pswp__caption { | |||||
background-color: rgba(0, 0, 0, 0.3); | |||||
} | |||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */ | |||||
.pswp__ui--idle .pswp__top-bar { | |||||
opacity: 0; | |||||
} | |||||
.pswp__ui--idle .pswp__button--arrow--left, | |||||
.pswp__ui--idle .pswp__button--arrow--right { | |||||
opacity: 0; | |||||
} | |||||
/* | |||||
pswp__ui--hidden class is added when controls are hidden | |||||
e.g. when user taps to toggle visibility of controls | |||||
*/ | |||||
.pswp__ui--hidden .pswp__top-bar, | |||||
.pswp__ui--hidden .pswp__caption, | |||||
.pswp__ui--hidden .pswp__button--arrow--left, | |||||
.pswp__ui--hidden .pswp__button--arrow--right { | |||||
/* Force paint & create composition layer for controls. */ | |||||
opacity: 0.001; | |||||
} | |||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */ | |||||
.pswp__ui--one-slide .pswp__button--arrow--left, | |||||
.pswp__ui--one-slide .pswp__button--arrow--right, | |||||
.pswp__ui--one-slide .pswp__counter { | |||||
display: none; | |||||
} | |||||
.pswp__element--disabled { | |||||
display: none !important; | |||||
} | |||||
.pswp--minimal--dark .pswp__top-bar { | |||||
background: none; | |||||
} |
@ -0,0 +1,203 @@ | |||||
var initPhotoSwipeFromDOM = function(gallerySelector) { | |||||
// parse slide data (url, title, size ...) from DOM elements | |||||
// (children of gallerySelector) | |||||
var parseThumbnailElements = function(el) { | |||||
var thumbElements = el.childNodes, | |||||
numNodes = thumbElements.length, | |||||
items = [], | |||||
figureEl, | |||||
linkEl, | |||||
size, | |||||
item; | |||||
for (var i = 0; i < numNodes; i++) { | |||||
figureEl = thumbElements[i]; // <figure> element | |||||
// include only element nodes | |||||
if (figureEl.nodeType !== 1) { | |||||
continue; | |||||
} | |||||
linkEl = figureEl.children[0]; // <a> element | |||||
size = linkEl.getAttribute("data-size").split("x"); | |||||
// create slide object | |||||
item = { | |||||
src: linkEl.getAttribute("href"), | |||||
w: parseInt(size[0], 10), | |||||
h: parseInt(size[1], 10) | |||||
}; | |||||
if (figureEl.children.length > 1) { | |||||
// <figcaption> content | |||||
item.title = figureEl.children[1].innerHTML; | |||||
} | |||||
if (linkEl.children.length > 0) { | |||||
// <img> thumbnail element, retrieving thumbnail url | |||||
item.msrc = linkEl.children[0].getAttribute("src"); | |||||
} | |||||
item.el = figureEl; // save link to element for getThumbBoundsFn | |||||
items.push(item); | |||||
} | |||||
return items; | |||||
}; | |||||
// find nearest parent element | |||||
var closest = function closest(el, fn) { | |||||
return el && (fn(el) ? el : closest(el.parentNode, fn)); | |||||
}; | |||||
// triggers when user clicks on thumbnail | |||||
var onThumbnailsClick = function(e) { | |||||
e = e || window.event; | |||||
e.preventDefault ? e.preventDefault() : (e.returnValue = false); | |||||
var eTarget = e.target || e.srcElement; | |||||
// find root element of slide | |||||
var clickedListItem = closest(eTarget, function(el) { | |||||
return el.tagName && el.tagName.toUpperCase() === "FIGURE"; | |||||
}); | |||||
if (!clickedListItem) { | |||||
return; | |||||
} | |||||
// find index of clicked item by looping through all child nodes | |||||
// alternatively, you may define index via data- attribute | |||||
var clickedGallery = clickedListItem.parentNode, | |||||
childNodes = clickedListItem.parentNode.childNodes, | |||||
numChildNodes = childNodes.length, | |||||
nodeIndex = 0, | |||||
index; | |||||
for (var i = 0; i < numChildNodes; i++) { | |||||
if (childNodes[i].nodeType !== 1) { | |||||
continue; | |||||
} | |||||
if (childNodes[i] === clickedListItem) { | |||||
index = nodeIndex; | |||||
break; | |||||
} | |||||
nodeIndex++; | |||||
} | |||||
if (index >= 0) { | |||||
// open PhotoSwipe if valid index found | |||||
openPhotoSwipe(index, clickedGallery); | |||||
} | |||||
return false; | |||||
}; | |||||
// parse picture index and gallery index from URL (#&pid=1&gid=2) | |||||
var photoswipeParseHash = function() { | |||||
var hash = window.location.hash.substring(1), | |||||
params = {}; | |||||
if (hash.length < 5) { | |||||
return params; | |||||
} | |||||
var vars = hash.split("&"); | |||||
for (var i = 0; i < vars.length; i++) { | |||||
if (!vars[i]) { | |||||
continue; | |||||
} | |||||
var pair = vars[i].split("="); | |||||
if (pair.length < 2) { | |||||
continue; | |||||
} | |||||
params[pair[0]] = pair[1]; | |||||
} | |||||
if (params.gid) { | |||||
params.gid = parseInt(params.gid, 10); | |||||
} | |||||
return params; | |||||
}; | |||||
var openPhotoSwipe = function( | |||||
index, | |||||
galleryElement, | |||||
disableAnimation, | |||||
fromURL | |||||
) { | |||||
var pswpElement = document.querySelectorAll(".pswp")[0], | |||||
gallery, | |||||
options, | |||||
items; | |||||
items = parseThumbnailElements(galleryElement); | |||||
// define options (if needed) | |||||
options = { | |||||
// define gallery index (for URL) | |||||
galleryUID: galleryElement.getAttribute("data-pswp-uid"), | |||||
getThumbBoundsFn: function(index) { | |||||
// See Options -> getThumbBoundsFn section of documentation for more info | |||||
var thumbnail = items[index].el.getElementsByTagName("img")[0], // find thumbnail | |||||
pageYScroll = | |||||
window.pageYOffset || document.documentElement.scrollTop, | |||||
rect = thumbnail.getBoundingClientRect(); | |||||
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; | |||||
} | |||||
}; | |||||
// PhotoSwipe opened from URL | |||||
if (fromURL) { | |||||
if (options.galleryPIDs) { | |||||
// parse real index when custom PIDs are used | |||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url | |||||
for (var j = 0; j < items.length; j++) { | |||||
if (items[j].pid == index) { | |||||
options.index = j; | |||||
break; | |||||
} | |||||
} | |||||
} else { | |||||
// in URL indexes start from 1 | |||||
options.index = parseInt(index, 10) - 1; | |||||
} | |||||
} else { | |||||
options.index = parseInt(index, 10); | |||||
} | |||||
// exit if index not found | |||||
if (isNaN(options.index)) { | |||||
return; | |||||
} | |||||
if (disableAnimation) { | |||||
options.showAnimationDuration = 0; | |||||
} | |||||
// Pass data to PhotoSwipe and initialize it | |||||
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); | |||||
gallery.init(); | |||||
}; | |||||
// loop through all gallery elements and bind events | |||||
var galleryElements = document.querySelectorAll(gallerySelector); | |||||
for (var i = 0, l = galleryElements.length; i < l; i++) { | |||||
galleryElements[i].setAttribute("data-pswp-uid", i + 1); | |||||
galleryElements[i].onclick = onThumbnailsClick; | |||||
} | |||||
// Parse URL and open gallery if it contains #&pid=3&gid=1 | |||||
var hashData = photoswipeParseHash(); | |||||
if (hashData.pid && hashData.gid) { | |||||
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true); | |||||
} | |||||
}; | |||||
// execute above function | |||||
initPhotoSwipeFromDOM(".elegant-gallery"); |
@ -0,0 +1,875 @@ | |||||
/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08 | |||||
* http://photoswipe.com | |||||
* Copyright (c) 2019 Dmitry Semenov; */ | |||||
/** | |||||
* | |||||
* UI on top of main sliding area (caption, arrows, close button, etc.). | |||||
* Built just using public methods/properties of PhotoSwipe. | |||||
* | |||||
*/ | |||||
(function(root, factory) { | |||||
if (typeof define === "function" && define.amd) { | |||||
define(factory); | |||||
} else if (typeof exports === "object") { | |||||
module.exports = factory(); | |||||
} else { | |||||
root.PhotoSwipeUI_Default = factory(); | |||||
} | |||||
})(this, function() { | |||||
"use strict"; | |||||
var PhotoSwipeUI_Default = function(pswp, framework) { | |||||
var ui = this; | |||||
var _overlayUIUpdated = false, | |||||
_controlsVisible = true, | |||||
_fullscrenAPI, | |||||
_controls, | |||||
_captionContainer, | |||||
_fakeCaptionContainer, | |||||
_indexIndicator, | |||||
_shareButton, | |||||
_shareModal, | |||||
_shareModalHidden = true, | |||||
_initalCloseOnScrollValue, | |||||
_isIdle, | |||||
_listen, | |||||
_loadingIndicator, | |||||
_loadingIndicatorHidden, | |||||
_loadingIndicatorTimeout, | |||||
_galleryHasOneSlide, | |||||
_options, | |||||
_defaultUIOptions = { | |||||
barsSize: { top: 44, bottom: "auto" }, | |||||
closeElClasses: ["item", "caption", "zoom-wrap", "ui", "top-bar"], | |||||
timeToIdle: 4000, | |||||
timeToIdleOutside: 1000, | |||||
loadingIndicatorDelay: 1000, // 2s | |||||
addCaptionHTMLFn: function(item, captionEl /*, isFake */) { | |||||
if (!item.title) { | |||||
captionEl.children[0].innerHTML = ""; | |||||
return false; | |||||
} | |||||
captionEl.children[0].innerHTML = item.title; | |||||
return true; | |||||
}, | |||||
closeEl: true, | |||||
captionEl: true, | |||||
fullscreenEl: true, | |||||
zoomEl: true, | |||||
shareEl: true, | |||||
counterEl: true, | |||||
arrowEl: true, | |||||
preloaderEl: true, | |||||
tapToClose: false, | |||||
tapToToggleControls: true, | |||||
clickToCloseNonZoomable: true, | |||||
shareButtons: [ | |||||
{ | |||||
id: "facebook", | |||||
label: "Share on Facebook", | |||||
url: "https://www.facebook.com/sharer/sharer.php?u={{url}}" | |||||
}, | |||||
{ | |||||
id: "twitter", | |||||
label: "Tweet", | |||||
url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}" | |||||
}, | |||||
{ | |||||
id: "pinterest", | |||||
label: "Pin it", | |||||
url: | |||||
"http://www.pinterest.com/pin/create/button/" + | |||||
"?url={{url}}&media={{image_url}}&description={{text}}" | |||||
}, | |||||
{ | |||||
id: "download", | |||||
label: "Download image", | |||||
url: "{{raw_image_url}}", | |||||
download: true | |||||
} | |||||
], | |||||
getImageURLForShare: function(/* shareButtonData */) { | |||||
return pswp.currItem.src || ""; | |||||
}, | |||||
getPageURLForShare: function(/* shareButtonData */) { | |||||
return window.location.href; | |||||
}, | |||||
getTextForShare: function(/* shareButtonData */) { | |||||
return pswp.currItem.title || ""; | |||||
}, | |||||
indexIndicatorSep: " / ", | |||||
fitControlsWidth: 1200 | |||||
}, | |||||
_blockControlsTap, | |||||
_blockControlsTapTimeout; | |||||
var _onControlsTap = function(e) { | |||||
if (_blockControlsTap) { | |||||
return true; | |||||
} | |||||
e = e || window.event; | |||||
if (_options.timeToIdle && _options.mouseUsed && !_isIdle) { | |||||
// reset idle timer | |||||
_onIdleMouseMove(); | |||||
} | |||||
var target = e.target || e.srcElement, | |||||
uiElement, | |||||
clickedClass = target.getAttribute("class") || "", | |||||
found; | |||||
for (var i = 0; i < _uiElements.length; i++) { | |||||
uiElement = _uiElements[i]; | |||||
if ( | |||||
uiElement.onTap && | |||||
clickedClass.indexOf("pswp__" + uiElement.name) > -1 | |||||
) { | |||||
uiElement.onTap(); | |||||
found = true; | |||||
} | |||||
} | |||||
if (found) { | |||||
if (e.stopPropagation) { | |||||
e.stopPropagation(); | |||||
} | |||||
_blockControlsTap = true; | |||||
// Some versions of Android don't prevent ghost click event | |||||
// when preventDefault() was called on touchstart and/or touchend. | |||||
// | |||||
// This happens on v4.3, 4.2, 4.1, | |||||
// older versions strangely work correctly, | |||||
// but just in case we add delay on all of them) | |||||
var tapDelay = framework.features.isOldAndroid ? 600 : 30; | |||||
_blockControlsTapTimeout = setTimeout(function() { | |||||
_blockControlsTap = false; | |||||
}, tapDelay); | |||||
} | |||||
}, | |||||
_fitControlsInViewport = function() { | |||||
return ( | |||||
!pswp.likelyTouchDevice || | |||||
_options.mouseUsed || | |||||
screen.width > _options.fitControlsWidth | |||||
); | |||||
}, | |||||
_togglePswpClass = function(el, cName, add) { | |||||
framework[(add ? "add" : "remove") + "Class"](el, "pswp__" + cName); | |||||
}, | |||||
// add class when there is just one item in the gallery | |||||
// (by default it hides left/right arrows and 1ofX counter) | |||||
_countNumItems = function() { | |||||
var hasOneSlide = _options.getNumItemsFn() === 1; | |||||
if (hasOneSlide !== _galleryHasOneSlide) { | |||||
_togglePswpClass(_controls, "ui--one-slide", hasOneSlide); | |||||
_galleryHasOneSlide = hasOneSlide; | |||||
} | |||||
}, | |||||
_toggleShareModalClass = function() { | |||||
_togglePswpClass(_shareModal, "share-modal--hidden", _shareModalHidden); | |||||
}, | |||||
_toggleShareModal = function() { | |||||
_shareModalHidden = !_shareModalHidden; | |||||
if (!_shareModalHidden) { | |||||
_toggleShareModalClass(); | |||||
setTimeout(function() { | |||||
if (!_shareModalHidden) { | |||||
framework.addClass(_shareModal, "pswp__share-modal--fade-in"); | |||||
} | |||||
}, 30); | |||||
} else { | |||||
framework.removeClass(_shareModal, "pswp__share-modal--fade-in"); | |||||
setTimeout(function() { | |||||
if (_shareModalHidden) { | |||||
_toggleShareModalClass(); | |||||
} | |||||
}, 300); | |||||
} | |||||
if (!_shareModalHidden) { | |||||
_updateShareURLs(); | |||||
} | |||||
return false; | |||||
}, | |||||
_openWindowPopup = function(e) { | |||||
e = e || window.event; | |||||
var target = e.target || e.srcElement; | |||||
pswp.shout("shareLinkClick", e, target); | |||||
if (!target.href) { | |||||
return false; | |||||
} | |||||
if (target.hasAttribute("download")) { | |||||
return true; | |||||
} | |||||
window.open( | |||||
target.href, | |||||
"pswp_share", | |||||
"scrollbars=yes,resizable=yes,toolbar=no," + | |||||
"location=yes,width=550,height=420,top=100,left=" + | |||||
(window.screen ? Math.round(screen.width / 2 - 275) : 100) | |||||
); | |||||
if (!_shareModalHidden) { | |||||
_toggleShareModal(); | |||||
} | |||||
return false; | |||||
}, | |||||
_updateShareURLs = function() { | |||||
var shareButtonOut = "", | |||||
shareButtonData, | |||||
shareURL, | |||||
image_url, | |||||
page_url, | |||||
share_text; | |||||
for (var i = 0; i < _options.shareButtons.length; i++) { | |||||
shareButtonData = _options.shareButtons[i]; | |||||
image_url = _options.getImageURLForShare(shareButtonData); | |||||
page_url = _options.getPageURLForShare(shareButtonData); | |||||
share_text = _options.getTextForShare(shareButtonData); | |||||
shareURL = shareButtonData.url | |||||
.replace("{{url}}", encodeURIComponent(page_url)) | |||||
.replace("{{image_url}}", encodeURIComponent(image_url)) | |||||
.replace("{{raw_image_url}}", image_url) | |||||
.replace("{{text}}", encodeURIComponent(share_text)); | |||||
shareButtonOut += | |||||
'<a href="' + | |||||
shareURL + | |||||
'" target="_blank" ' + | |||||
'class="pswp__share--' + | |||||
shareButtonData.id + | |||||
'"' + | |||||
(shareButtonData.download ? "download" : "") + | |||||
">" + | |||||
shareButtonData.label + | |||||
"</a>"; | |||||
if (_options.parseShareButtonOut) { | |||||
shareButtonOut = _options.parseShareButtonOut( | |||||
shareButtonData, | |||||
shareButtonOut | |||||
); | |||||
} | |||||
} | |||||
_shareModal.children[0].innerHTML = shareButtonOut; | |||||
_shareModal.children[0].onclick = _openWindowPopup; | |||||
}, | |||||
_hasCloseClass = function(target) { | |||||
for (var i = 0; i < _options.closeElClasses.length; i++) { | |||||
if ( | |||||
framework.hasClass(target, "pswp__" + _options.closeElClasses[i]) | |||||
) { | |||||
return true; | |||||
} | |||||
} | |||||
}, | |||||
_idleInterval, | |||||
_idleTimer, | |||||
_idleIncrement = 0, | |||||
_onIdleMouseMove = function() { | |||||
clearTimeout(_idleTimer); | |||||
_idleIncrement = 0; | |||||
if (_isIdle) { | |||||
ui.setIdle(false); | |||||
} | |||||
}, | |||||
_onMouseLeaveWindow = function(e) { | |||||
e = e ? e : window.event; | |||||
var from = e.relatedTarget || e.toElement; | |||||
if (!from || from.nodeName === "HTML") { | |||||
clearTimeout(_idleTimer); | |||||
_idleTimer = setTimeout(function() { | |||||
ui.setIdle(true); | |||||
}, _options.timeToIdleOutside); | |||||
} | |||||
}, | |||||
_setupFullscreenAPI = function() { | |||||
if (_options.fullscreenEl && !framework.features.isOldAndroid) { | |||||
if (!_fullscrenAPI) { | |||||
_fullscrenAPI = ui.getFullscreenAPI(); | |||||
} | |||||
if (_fullscrenAPI) { | |||||
framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen); | |||||
ui.updateFullscreen(); | |||||
framework.addClass(pswp.template, "pswp--supports-fs"); | |||||
} else { | |||||
framework.removeClass(pswp.template, "pswp--supports-fs"); | |||||
} | |||||
} | |||||
}, | |||||
_setupLoadingIndicator = function() { | |||||
// Setup loading indicator | |||||
if (_options.preloaderEl) { | |||||
_toggleLoadingIndicator(true); | |||||
_listen("beforeChange", function() { | |||||
clearTimeout(_loadingIndicatorTimeout); | |||||
// display loading indicator with delay | |||||
_loadingIndicatorTimeout = setTimeout(function() { | |||||
if (pswp.currItem && pswp.currItem.loading) { | |||||
if ( | |||||
!pswp.allowProgressiveImg() || | |||||
(pswp.currItem.img && !pswp.currItem.img.naturalWidth) | |||||
) { | |||||
// show preloader if progressive loading is not enabled, | |||||
// or image width is not defined yet (because of slow connection) | |||||
_toggleLoadingIndicator(false); | |||||
// items-controller.js function allowProgressiveImg | |||||
} | |||||
} else { | |||||
_toggleLoadingIndicator(true); // hide preloader | |||||
} | |||||
}, _options.loadingIndicatorDelay); | |||||
}); | |||||
_listen("imageLoadComplete", function(index, item) { | |||||
if (pswp.currItem === item) { | |||||
_toggleLoadingIndicator(true); | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
_toggleLoadingIndicator = function(hide) { | |||||
if (_loadingIndicatorHidden !== hide) { | |||||
_togglePswpClass(_loadingIndicator, "preloader--active", !hide); | |||||
_loadingIndicatorHidden = hide; | |||||
} | |||||
}, | |||||
_applyNavBarGaps = function(item) { | |||||
var gap = item.vGap; | |||||
if (_fitControlsInViewport()) { | |||||
var bars = _options.barsSize; | |||||
if (_options.captionEl && bars.bottom === "auto") { | |||||
if (!_fakeCaptionContainer) { | |||||
_fakeCaptionContainer = framework.createEl( | |||||
"pswp__caption pswp__caption--fake" | |||||
); | |||||
_fakeCaptionContainer.appendChild( | |||||
framework.createEl("pswp__caption__center") | |||||
); | |||||
_controls.insertBefore(_fakeCaptionContainer, _captionContainer); | |||||
framework.addClass(_controls, "pswp__ui--fit"); | |||||
} | |||||
if (_options.addCaptionHTMLFn(item, _fakeCaptionContainer, true)) { | |||||
var captionSize = _fakeCaptionContainer.clientHeight; | |||||
gap.bottom = parseInt(captionSize, 10) || 44; | |||||
} else { | |||||
gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top | |||||
} | |||||
} else { | |||||
gap.bottom = bars.bottom === "auto" ? 0 : bars.bottom; | |||||
} | |||||
// height of top bar is static, no need to calculate it | |||||
gap.top = bars.top; | |||||
} else { | |||||
gap.top = gap.bottom = 0; | |||||
} | |||||
}, | |||||
_setupIdle = function() { | |||||
// Hide controls when mouse is used | |||||
if (_options.timeToIdle) { | |||||
_listen("mouseUsed", function() { | |||||
framework.bind(document, "mousemove", _onIdleMouseMove); | |||||
framework.bind(document, "mouseout", _onMouseLeaveWindow); | |||||
_idleInterval = setInterval(function() { | |||||
_idleIncrement++; | |||||
if (_idleIncrement === 2) { | |||||
ui.setIdle(true); | |||||
} | |||||
}, _options.timeToIdle / 2); | |||||
}); | |||||
} | |||||
}, | |||||
_setupHidingControlsDuringGestures = function() { | |||||
// Hide controls on vertical drag | |||||
_listen("onVerticalDrag", function(now) { | |||||
if (_controlsVisible && now < 0.95) { | |||||
ui.hideControls(); | |||||
} else if (!_controlsVisible && now >= 0.95) { | |||||
ui.showControls(); | |||||
} | |||||
}); | |||||
// Hide controls when pinching to close | |||||
var pinchControlsHidden; | |||||
_listen("onPinchClose", function(now) { | |||||
if (_controlsVisible && now < 0.9) { | |||||
ui.hideControls(); | |||||
pinchControlsHidden = true; | |||||
} else if (pinchControlsHidden && !_controlsVisible && now > 0.9) { | |||||
ui.showControls(); | |||||
} | |||||
}); | |||||
_listen("zoomGestureEnded", function() { | |||||
pinchControlsHidden = false; | |||||
if (pinchControlsHidden && !_controlsVisible) { | |||||
ui.showControls(); | |||||
} | |||||
}); | |||||
}; | |||||
var _uiElements = [ | |||||
{ | |||||
name: "caption", | |||||
option: "captionEl", | |||||
onInit: function(el) { | |||||
_captionContainer = el; | |||||
} | |||||
}, | |||||
{ | |||||
name: "share-modal", | |||||
option: "shareEl", | |||||
onInit: function(el) { | |||||
_shareModal = el; | |||||
}, | |||||
onTap: function() { | |||||
_toggleShareModal(); | |||||
} | |||||
}, | |||||
{ | |||||
name: "button--share", | |||||
option: "shareEl", | |||||
onInit: function(el) { | |||||
_shareButton = el; | |||||
}, | |||||
onTap: function() { | |||||
_toggleShareModal(); | |||||
} | |||||
}, | |||||
{ | |||||
name: "button--zoom", | |||||
option: "zoomEl", | |||||
onTap: pswp.toggleDesktopZoom | |||||
}, | |||||
{ | |||||
name: "counter", | |||||
option: "counterEl", | |||||
onInit: function(el) { | |||||
_indexIndicator = el; | |||||
} | |||||
}, | |||||
{ | |||||
name: "button--close", | |||||
option: "closeEl", | |||||
onTap: pswp.close | |||||
}, | |||||
{ | |||||
name: "button--arrow--left", | |||||
option: "arrowEl", | |||||
onTap: pswp.prev | |||||
}, | |||||
{ | |||||
name: "button--arrow--right", | |||||
option: "arrowEl", | |||||
onTap: pswp.next | |||||
}, | |||||
{ | |||||
name: "button--fs", | |||||
option: "fullscreenEl", | |||||
onTap: function() { | |||||
if (_fullscrenAPI.isFullscreen()) { | |||||
_fullscrenAPI.exit(); | |||||
} else { | |||||
_fullscrenAPI.enter(); | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
name: "preloader", | |||||
option: "preloaderEl", | |||||
onInit: function(el) { | |||||
_loadingIndicator = el; | |||||
} | |||||
} | |||||
]; | |||||
var _setupUIElements = function() { | |||||
var item, classAttr, uiElement; | |||||
var loopThroughChildElements = function(sChildren) { | |||||
if (!sChildren) { | |||||
return; | |||||
} | |||||
var l = sChildren.length; | |||||
for (var i = 0; i < l; i++) { | |||||
item = sChildren[i]; | |||||
classAttr = item.className; | |||||
for (var a = 0; a < _uiElements.length; a++) { | |||||
uiElement = _uiElements[a]; | |||||
if (classAttr.indexOf("pswp__" + uiElement.name) > -1) { | |||||
if (_options[uiElement.option]) { | |||||
// if element is not disabled from options | |||||
framework.removeClass(item, "pswp__element--disabled"); | |||||
if (uiElement.onInit) { | |||||
uiElement.onInit(item); | |||||
} | |||||
//item.style.display = 'block'; | |||||
} else { | |||||
framework.addClass(item, "pswp__element--disabled"); | |||||
//item.style.display = 'none'; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
}; | |||||
loopThroughChildElements(_controls.children); | |||||
var topBar = framework.getChildByClass(_controls, "pswp__top-bar"); | |||||
if (topBar) { | |||||
loopThroughChildElements(topBar.children); | |||||
} | |||||
}; | |||||
ui.init = function() { | |||||
// extend options | |||||
framework.extend(pswp.options, _defaultUIOptions, true); | |||||
// create local link for fast access | |||||
_options = pswp.options; | |||||
// find pswp__ui element | |||||
_controls = framework.getChildByClass(pswp.scrollWrap, "pswp__ui"); | |||||
// create local link | |||||
_listen = pswp.listen; | |||||
_setupHidingControlsDuringGestures(); | |||||
// update controls when slides change | |||||
_listen("beforeChange", ui.update); | |||||
// toggle zoom on double-tap | |||||
_listen("doubleTap", function(point) { | |||||
var initialZoomLevel = pswp.currItem.initialZoomLevel; | |||||
if (pswp.getZoomLevel() !== initialZoomLevel) { | |||||
pswp.zoomTo(initialZoomLevel, point, 333); | |||||
} else { | |||||
pswp.zoomTo( | |||||
_options.getDoubleTapZoom(false, pswp.currItem), | |||||
point, | |||||
333 | |||||
); | |||||
} | |||||
}); | |||||
// Allow text selection in caption | |||||
_listen("preventDragEvent", function(e, isDown, preventObj) { | |||||
var t = e.target || e.srcElement; | |||||
if ( | |||||
t && | |||||
t.getAttribute("class") && | |||||
e.type.indexOf("mouse") > -1 && | |||||
(t.getAttribute("class").indexOf("__caption") > 0 || | |||||
/(SMALL|STRONG|EM)/i.test(t.tagName)) | |||||
) { | |||||
preventObj.prevent = false; | |||||
} | |||||
}); | |||||
// bind events for UI | |||||
_listen("bindEvents", function() { | |||||
framework.bind(_controls, "pswpTap click", _onControlsTap); | |||||
framework.bind(pswp.scrollWrap, "pswpTap", ui.onGlobalTap); | |||||
if (!pswp.likelyTouchDevice) { | |||||
framework.bind(pswp.scrollWrap, "mouseover", ui.onMouseOver); | |||||
} | |||||
}); | |||||
// unbind events for UI | |||||
_listen("unbindEvents", function() { | |||||
if (!_shareModalHidden) { | |||||
_toggleShareModal(); | |||||
} | |||||
if (_idleInterval) { | |||||
clearInterval(_idleInterval); | |||||
} | |||||
framework.unbind(document, "mouseout", _onMouseLeaveWindow); | |||||
framework.unbind(document, "mousemove", _onIdleMouseMove); | |||||
framework.unbind(_controls, "pswpTap click", _onControlsTap); | |||||
framework.unbind(pswp.scrollWrap, "pswpTap", ui.onGlobalTap); | |||||
framework.unbind(pswp.scrollWrap, "mouseover", ui.onMouseOver); | |||||
if (_fullscrenAPI) { | |||||
framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen); | |||||
if (_fullscrenAPI.isFullscreen()) { | |||||
_options.hideAnimationDuration = 0; | |||||
_fullscrenAPI.exit(); | |||||
} | |||||
_fullscrenAPI = null; | |||||
} | |||||
}); | |||||
// clean up things when gallery is destroyed | |||||
_listen("destroy", function() { | |||||
if (_options.captionEl) { | |||||
if (_fakeCaptionContainer) { | |||||
_controls.removeChild(_fakeCaptionContainer); | |||||
} | |||||
framework.removeClass(_captionContainer, "pswp__caption--empty"); | |||||
} | |||||
if (_shareModal) { | |||||
_shareModal.children[0].onclick = null; | |||||
} | |||||
framework.removeClass(_controls, "pswp__ui--over-close"); | |||||
framework.addClass(_controls, "pswp__ui--hidden"); | |||||
ui.setIdle(false); | |||||
}); | |||||
if (!_options.showAnimationDuration) { | |||||
framework.removeClass(_controls, "pswp__ui--hidden"); | |||||
} | |||||
_listen("initialZoomIn", function() { | |||||
if (_options.showAnimationDuration) { | |||||
framework.removeClass(_controls, "pswp__ui--hidden"); | |||||
} | |||||
}); | |||||
_listen("initialZoomOut", function() { | |||||
framework.addClass(_controls, "pswp__ui--hidden"); | |||||
}); | |||||
_listen("parseVerticalMargin", _applyNavBarGaps); | |||||
_setupUIElements(); | |||||
if (_options.shareEl && _shareButton && _shareModal) { | |||||
_shareModalHidden = true; | |||||
} | |||||
_countNumItems(); | |||||
_setupIdle(); | |||||
_setupFullscreenAPI(); | |||||
_setupLoadingIndicator(); | |||||
}; | |||||
ui.setIdle = function(isIdle) { | |||||
_isIdle = isIdle; | |||||
_togglePswpClass(_controls, "ui--idle", isIdle); | |||||
}; | |||||
ui.update = function() { | |||||
// Don't update UI if it's hidden | |||||
if (_controlsVisible && pswp.currItem) { | |||||
ui.updateIndexIndicator(); | |||||
if (_options.captionEl) { | |||||
_options.addCaptionHTMLFn(pswp.currItem, _captionContainer); | |||||
_togglePswpClass( | |||||
_captionContainer, | |||||
"caption--empty", | |||||
!pswp.currItem.title | |||||
); | |||||
} | |||||
_overlayUIUpdated = true; | |||||
} else { | |||||
_overlayUIUpdated = false; | |||||
} | |||||
if (!_shareModalHidden) { | |||||
_toggleShareModal(); | |||||
} | |||||
_countNumItems(); | |||||
}; | |||||
ui.updateFullscreen = function(e) { | |||||
if (e) { | |||||
// some browsers change window scroll position during the fullscreen | |||||
// so PhotoSwipe updates it just in case | |||||
setTimeout(function() { | |||||
pswp.setScrollOffset(0, framework.getScrollY()); | |||||
}, 50); | |||||
} | |||||
// toogle pswp--fs class on root element | |||||
framework[(_fullscrenAPI.isFullscreen() ? "add" : "remove") + "Class"]( | |||||
pswp.template, | |||||
"pswp--fs" | |||||
); | |||||
}; | |||||
ui.updateIndexIndicator = function() { | |||||
if (_options.counterEl) { | |||||
_indexIndicator.innerHTML = | |||||
pswp.getCurrentIndex() + | |||||
1 + | |||||
_options.indexIndicatorSep + | |||||
_options.getNumItemsFn(); | |||||
} | |||||
}; | |||||
ui.onGlobalTap = function(e) { | |||||
e = e || window.event; | |||||
var target = e.target || e.srcElement; | |||||
if (_blockControlsTap) { | |||||
return; | |||||
} | |||||
if (e.detail && e.detail.pointerType === "mouse") { | |||||
// close gallery if clicked outside of the image | |||||
if (_hasCloseClass(target)) { | |||||
pswp.close(); | |||||
return; | |||||
} | |||||
if (framework.hasClass(target, "pswp__img")) { | |||||
if ( | |||||
pswp.getZoomLevel() === 1 && | |||||
pswp.getZoomLevel() <= pswp.currItem.fitRatio | |||||
) { | |||||
if (_options.clickToCloseNonZoomable) { | |||||
pswp.close(); | |||||
} | |||||
} else { | |||||
pswp.toggleDesktopZoom(e.detail.releasePoint); | |||||
} | |||||
} | |||||
} else { | |||||
// tap anywhere (except buttons) to toggle visibility of controls | |||||
if (_options.tapToToggleControls) { | |||||
if (_controlsVisible) { | |||||
ui.hideControls(); | |||||
} else { | |||||
ui.showControls(); | |||||
} | |||||
} | |||||
// tap to close gallery | |||||
if ( | |||||
_options.tapToClose && | |||||
(framework.hasClass(target, "pswp__img") || _hasCloseClass(target)) | |||||
) { | |||||
pswp.close(); | |||||
return; | |||||
} | |||||
} | |||||
}; | |||||
ui.onMouseOver = function(e) { | |||||
e = e || window.event; | |||||
var target = e.target || e.srcElement; | |||||
// add class when mouse is over an element that should close the gallery | |||||
_togglePswpClass(_controls, "ui--over-close", _hasCloseClass(target)); | |||||
}; | |||||
ui.hideControls = function() { | |||||
framework.addClass(_controls, "pswp__ui--hidden"); | |||||
_controlsVisible = false; | |||||
}; | |||||
ui.showControls = function() { | |||||
_controlsVisible = true; | |||||
if (!_overlayUIUpdated) { | |||||
ui.update(); | |||||
} | |||||
framework.removeClass(_controls, "pswp__ui--hidden"); | |||||
}; | |||||
ui.supportsFullscreen = function() { | |||||
var d = document; | |||||
return !!( | |||||
d.exitFullscreen || | |||||
d.mozCancelFullScreen || | |||||
d.webkitExitFullscreen || | |||||
d.msExitFullscreen | |||||
); | |||||
}; | |||||
ui.getFullscreenAPI = function() { | |||||
var dE = document.documentElement, | |||||
api, | |||||
tF = "fullscreenchange"; | |||||
if (dE.requestFullscreen) { | |||||
api = { | |||||
enterK: "requestFullscreen", | |||||
exitK: "exitFullscreen", | |||||
elementK: "fullscreenElement", | |||||
eventK: tF | |||||
}; | |||||
} else if (dE.mozRequestFullScreen) { | |||||
api = { | |||||
enterK: "mozRequestFullScreen", | |||||
exitK: "mozCancelFullScreen", | |||||
elementK: "mozFullScreenElement", | |||||
eventK: "moz" + tF | |||||
}; | |||||
} else if (dE.webkitRequestFullscreen) { | |||||
api = { | |||||
enterK: "webkitRequestFullscreen", | |||||
exitK: "webkitExitFullscreen", | |||||
elementK: "webkitFullscreenElement", | |||||
eventK: "webkit" + tF | |||||
}; | |||||
} else if (dE.msRequestFullscreen) { | |||||
api = { | |||||
enterK: "msRequestFullscreen", | |||||
exitK: "msExitFullscreen", | |||||
elementK: "msFullscreenElement", | |||||
eventK: "MSFullscreenChange" | |||||
}; | |||||
} | |||||
if (api) { | |||||
api.enter = function() { | |||||
// disable close-on-scroll in fullscreen | |||||
_initalCloseOnScrollValue = _options.closeOnScroll; | |||||
_options.closeOnScroll = false; | |||||
if (this.enterK === "webkitRequestFullscreen") { | |||||
pswp.template[this.enterK](Element.ALLOW_KEYBOARD_INPUT); | |||||
} else { | |||||
return pswp.template[this.enterK](); | |||||
} | |||||
}; | |||||
api.exit = function() { | |||||
_options.closeOnScroll = _initalCloseOnScrollValue; | |||||
return document[this.exitK](); | |||||
}; | |||||
api.isFullscreen = function() { | |||||
return document[this.elementK]; | |||||
}; | |||||
} | |||||
return api; | |||||
}; | |||||
}; | |||||
return PhotoSwipeUI_Default; | |||||
}); |
@ -0,0 +1,202 @@ | |||||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ | |||||
/* | |||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) | |||||
*/ | |||||
/* pswp = photoswipe */ | |||||
.pswp { | |||||
display: none; | |||||
position: absolute; | |||||
width: 100%; | |||||
height: 100%; | |||||
left: 0; | |||||
top: 0; | |||||
overflow: hidden; | |||||
-ms-touch-action: none; | |||||
touch-action: none; | |||||
z-index: 1500; | |||||
-webkit-text-size-adjust: 100%; | |||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */ | |||||
-webkit-backface-visibility: hidden; | |||||
outline: none; | |||||
} | |||||
.pswp * { | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
} | |||||
.pswp img { | |||||
max-width: none; | |||||
} | |||||
/* style is added when JS option showHideOpacity is set to true */ | |||||
.pswp--animate_opacity { | |||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ | |||||
opacity: 0.001; | |||||
will-change: opacity; | |||||
/* for open/close transition */ | |||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
} | |||||
.pswp--open { | |||||
display: block; | |||||
} | |||||
.pswp--zoom-allowed .pswp__img { | |||||
/* autoprefixer: off */ | |||||
cursor: -webkit-zoom-in; | |||||
cursor: -moz-zoom-in; | |||||
cursor: zoom-in; | |||||
} | |||||
.pswp--zoomed-in .pswp__img { | |||||
/* autoprefixer: off */ | |||||
cursor: -webkit-grab; | |||||
cursor: -moz-grab; | |||||
cursor: grab; | |||||
} | |||||
.pswp--dragging .pswp__img { | |||||
/* autoprefixer: off */ | |||||
cursor: -webkit-grabbing; | |||||
cursor: -moz-grabbing; | |||||
cursor: grabbing; | |||||
} | |||||
/* | |||||
Background is added as a separate element. | |||||
As animating opacity is much faster than animating rgba() background-color. | |||||
*/ | |||||
.pswp__bg { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #000; | |||||
opacity: 0; | |||||
-webkit-transform: translateZ(0); | |||||
transform: translateZ(0); | |||||
-webkit-backface-visibility: hidden; | |||||
will-change: opacity; | |||||
} | |||||
.pswp__scroll-wrap { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
overflow: hidden; | |||||
} | |||||
.pswp__container, | |||||
.pswp__zoom-wrap { | |||||
-ms-touch-action: none; | |||||
touch-action: none; | |||||
position: absolute; | |||||
left: 0; | |||||
right: 0; | |||||
top: 0; | |||||
bottom: 0; | |||||
} | |||||
/* Prevent selection and tap highlights */ | |||||
.pswp__container, | |||||
.pswp__img { | |||||
-webkit-user-select: none; | |||||
-moz-user-select: none; | |||||
-ms-user-select: none; | |||||
user-select: none; | |||||
-webkit-tap-highlight-color: transparent; | |||||
-webkit-touch-callout: none; | |||||
} | |||||
.pswp__zoom-wrap { | |||||
position: absolute; | |||||
width: 100%; | |||||
-webkit-transform-origin: left top; | |||||
-ms-transform-origin: left top; | |||||
transform-origin: left top; | |||||
/* for open/close transition */ | |||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
} | |||||
.pswp__bg { | |||||
will-change: opacity; | |||||
/* for open/close transition */ | |||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); | |||||
} | |||||
.pswp--animated-in .pswp__bg, | |||||
.pswp--animated-in .pswp__zoom-wrap { | |||||
-webkit-transition: none; | |||||
transition: none; | |||||
} | |||||
.pswp__container, | |||||
.pswp__zoom-wrap { | |||||
-webkit-backface-visibility: hidden; | |||||
} | |||||
.pswp__item { | |||||
position: absolute; | |||||
left: 0; | |||||
right: 0; | |||||
top: 0; | |||||
bottom: 0; | |||||
overflow: hidden; | |||||
} | |||||
.pswp__img { | |||||
position: absolute; | |||||
width: auto; | |||||
height: auto; | |||||
top: 0; | |||||
left: 0; | |||||
} | |||||
/* | |||||
stretched thumbnail or div placeholder element (see below) | |||||
style is added to avoid flickering in webkit/blink when layers overlap | |||||
*/ | |||||
.pswp__img--placeholder { | |||||
-webkit-backface-visibility: hidden; | |||||
} | |||||
/* | |||||
div element that matches size of large image | |||||
large image loads on top of it | |||||
*/ | |||||
.pswp__img--placeholder--blank { | |||||
background: #222; | |||||
} | |||||
.pswp--ie .pswp__img { | |||||
width: 100% !important; | |||||
height: auto !important; | |||||
left: 0; | |||||
top: 0; | |||||
} | |||||
/* | |||||
Error message appears when image is not loaded | |||||
(JS option errorMsg controls markup) | |||||
*/ | |||||
.pswp__error-msg { | |||||
position: absolute; | |||||
left: 0; | |||||
top: 50%; | |||||
width: 100%; | |||||
text-align: center; | |||||
font-size: 14px; | |||||
line-height: 16px; | |||||
margin-top: -8px; | |||||
color: #ccc; | |||||
} | |||||
.pswp__error-msg a { | |||||
color: #ccc; | |||||
text-decoration: underline; | |||||
} |
@ -0,0 +1,16 @@ | |||||
{% macro applause_button(article) %} {% from '_includes/_defaults.html' import | |||||
APPLAUSE_BUTTON with context %} | |||||
{% if (APPLAUSE_BUTTON or article.applause_button == "on") and article.applause_button != "off" %} | |||||
{% set url = SITEURL+ '/' + article.url %} | |||||
{% set identifier = SITEURL+ '/' + article.url %} | |||||
{% if article.applause_button_id %} | |||||
{% set identifier = article.applause_button_id %} | |||||
{% endif %} | |||||
<div class="applause_button"> | |||||
<applause-button url={{ identifier }}> </applause-button> | |||||
</div> | |||||
{% endif %} {% endmacro %} |
@ -0,0 +1,24 @@ | |||||
{% macro article_author(article) %} | |||||
{% set tag = namespace({'open' : true, 'close': false}) %} | |||||
{% for author in article.authors %} | |||||
{% if author|string in AUTHORS %} | |||||
{% if tag.open %} | |||||
<hr /> | |||||
{% set tag.open = false %} | |||||
{% set tag.close = true %} | |||||
{% endif %} | |||||
{% set auth = AUTHORS.get(author|string) %} | |||||
<div class="author-blurb"> | |||||
<a href="{{ auth.url }}" target="_blank" rel="nofollow noopener noreferrer"> | |||||
{% if AUTHORS.get(author|string).avatar %} | |||||
<img src={{ auth.avatar }} alt="{{ author }} Avatar" title="{{ author }}"> | |||||
{% endif %} | |||||
<span class="author-name">{{ author }}</span> | |||||
</a> | |||||
{{ auth.blurb }} | |||||
</div> | |||||
{% endif %} | |||||
{% endfor %} | |||||
{% if tag.close %} | |||||
{% endif %} | |||||
{% endmacro %} |
@ -0,0 +1,8 @@ | |||||
{% if AMAZON_BESTAZON %} | |||||
<!-- Loads BestAzon configuration from pelicanconf.py --> | |||||
<script> | |||||
{{ AMAZON_BESTAZON }} | |||||
</script> | |||||
<script src="https://bestazon.io/script/BestAzonScript.js"></script> | |||||
{% endif %} |
@ -0,0 +1 @@ | |||||
<meta name="msvalidate.01" content="{{ CLAIM_BING }}" /> |