Changes to a new style for the docs. Includes version switcher.

* added link to edit on GitHub
* Changed image source on homepage
* Made some changes to the structure, added the ability to have l3 navigation. Added warning, note and other styles.
* Fixed an image link, removed the .. :content: links because they were quicky and didn't look good, added pagelinks to current page of other versions.
* Moved the remote client api's to their own doc
This commit is contained in:
Thatcher Peskens 2013-09-24 19:47:25 -07:00
parent 31fd11860b
commit e3e041b6bf
29 changed files with 1663 additions and 5764 deletions

View File

@ -9,7 +9,6 @@
Docker Remote API
=================
.. contents:: Table of Contents
1. Brief introduction
=====================
@ -197,36 +196,3 @@ Initial version
.. _8d73740: https://github.com/dotcloud/docker/commit/8d73740343778651c09160cde9661f5f387b36f4
.. _2e7649b: https://github.com/dotcloud/docker/commit/2e7649beda7c820793bd46766cbc2cfeace7b168
.. _51f6c4a: https://github.com/dotcloud/docker/commit/51f6c4a7372450d164c61e0054daf0223ddbd909
==================================
Docker Remote API Client Libraries
==================================
These libraries have not been tested by the Docker Maintainers for
compatibility. Please file issues with the library owners. If you
find more library implementations, please list them in Docker doc bugs
and we will add the libraries here.
+----------------------+----------------+--------------------------------------------+
| Language/Framework | Name | Repository |
+======================+================+============================================+
| Python | docker-py | https://github.com/dotcloud/docker-py |
+----------------------+----------------+--------------------------------------------+
| Ruby | docker-client | https://github.com/geku/docker-client |
+----------------------+----------------+--------------------------------------------+
| Ruby | docker-api | https://github.com/swipely/docker-api |
+----------------------+----------------+--------------------------------------------+
| Javascript (NodeJS) | docker.io | https://github.com/appersonlabs/docker.io |
| | | Install via NPM: `npm install docker.io` |
+----------------------+----------------+--------------------------------------------+
| Javascript | docker-js | https://github.com/dgoujard/docker-js |
+----------------------+----------------+--------------------------------------------+
| Javascript (Angular) | dockerui | https://github.com/crosbymichael/dockerui |
| **WebUI** | | |
+----------------------+----------------+--------------------------------------------+
| Java | docker-java | https://github.com/kpelykh/docker-java |
+----------------------+----------------+--------------------------------------------+
| Erlang | erldocker | https://github.com/proger/erldocker |
+----------------------+----------------+--------------------------------------------+
| Go | go-dockerclient| https://github.com/fsouza/go-dockerclient |
+----------------------+----------------+--------------------------------------------+

View File

@ -6,8 +6,6 @@
Docker Index API
=================
.. contents:: Table of Contents
1. Brief introduction
=====================

View File

@ -6,7 +6,6 @@
Docker Registry API
===================
.. contents:: Table of Contents
1. Brief introduction
=====================
@ -497,8 +496,8 @@ Ancestry
:statuscode 200: OK
3.0 Authorization
=================
3 Authorization
===============
This is where we describe the authorization process, including the tokens and cookies.
TODO: add more info.

View File

@ -8,8 +8,6 @@
Registry & Index Spec
=====================
.. contents:: Table of Contents
1. The 3 roles
===============
@ -564,8 +562,8 @@ Next request::
Cookie: session="wD/J7LqL5ctqw8haL10vgfhrb2Q=?foo=UydiYXInCnAxCi4=&timestamp=RjEzNjYzMTQ5NDcuNDc0NjQzCi4="
7.0 Document Version
---------------------
7 Document Version
====================
- 1.0 : May 6th 2013 : initial release
- 1.1 : June 1st 2013 : Added Delete Repository and way to handle new source namespace.

View File

@ -0,0 +1,37 @@
:title: Registry API
:description: Various client libraries available to use with the Docker remote API
:keywords: API, Docker, index, registry, REST, documentation, clients, Python, Ruby, Javascript, Erlang, Go
==================================
Docker Remote API Client Libraries
==================================
These libraries have not been tested by the Docker Maintainers for
compatibility. Please file issues with the library owners. If you
find more library implementations, please list them in Docker doc bugs
and we will add the libraries here.
+----------------------+----------------+--------------------------------------------+
| Language/Framework | Name | Repository |
+======================+================+============================================+
| Python | docker-py | https://github.com/dotcloud/docker-py |
+----------------------+----------------+--------------------------------------------+
| Ruby | docker-client | https://github.com/geku/docker-client |
+----------------------+----------------+--------------------------------------------+
| Ruby | docker-api | https://github.com/swipely/docker-api |
+----------------------+----------------+--------------------------------------------+
| Javascript (NodeJS) | docker.io | https://github.com/appersonlabs/docker.io |
| | | Install via NPM: `npm install docker.io` |
+----------------------+----------------+--------------------------------------------+
| Javascript | docker-js | https://github.com/dgoujard/docker-js |
+----------------------+----------------+--------------------------------------------+
| Javascript (Angular) | dockerui | https://github.com/crosbymichael/dockerui |
| **WebUI** | | |
+----------------------+----------------+--------------------------------------------+
| Java | docker-java | https://github.com/kpelykh/docker-java |
+----------------------+----------------+--------------------------------------------+
| Erlang | erldocker | https://github.com/proger/erldocker |
+----------------------+----------------+--------------------------------------------+
| Go | go-dockerclient| https://github.com/fsouza/go-dockerclient |
+----------------------+----------------+--------------------------------------------+

View File

@ -8,7 +8,7 @@ Overview
======================
Docker Usage
~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
To list available commands, either run ``docker`` with no parameters or execute
``docker help``::
@ -21,40 +21,71 @@ To list available commands, either run ``docker`` with no parameters or execute
...
Available Commands
~~~~~~~~~~~~~~~~~~
.. toctree::
:maxdepth: 2
.. include:: command/attach.rst
.. include:: command/build.rst
.. include:: command/commit.rst
.. include:: command/cp.rst
.. include:: command/diff.rst
.. include:: command/events.rst
.. include:: command/export.rst
.. include:: command/history.rst
.. include:: command/images.rst
.. include:: command/import.rst
.. include:: command/info.rst
.. include:: command/insert.rst
.. include:: command/inspect.rst
.. include:: command/kill.rst
.. include:: command/login.rst
.. include:: command/logs.rst
.. include:: command/port.rst
.. include:: command/ps.rst
.. include:: command/pull.rst
.. include:: command/push.rst
.. include:: command/restart.rst
.. include:: command/rm.rst
.. include:: command/rmi.rst
.. include:: command/run.rst
.. include:: command/search.rst
.. include:: command/start.rst
.. include:: command/stop.rst
.. include:: command/tag.rst
.. include:: command/top.rst
.. include:: command/version.rst
.. include:: command/wait.rst
command/attach
command/build
command/commit
command/cp
command/diff
command/events
command/export
command/history
command/images
command/import
command/info
command/insert
command/inspect
command/kill
command/login
command/logs
command/port
command/ps
command/pull
command/push
command/restart
command/rm
command/rmi
command/run
command/search
command/start
command/stop
command/tag
command/top
command/version
command/wait

View File

@ -23,4 +23,4 @@ Displaying images visually
sudo docker images -viz | dot -Tpng -o docker.png
.. image:: images/docker_images.gif
.. image:: https://docs.docker.io/en/latest/_static/docker_images.gif

View File

@ -2,6 +2,11 @@
:description: A simple hello world example with Docker
:keywords: docker, example, hello world
.. _examples:
Hello World
-----------
.. _running_examples:
Running the Examples
@ -166,13 +171,11 @@ See the example in action
The next example in the series is a :ref:`python_web_app` example, or
you could skip to any of the other examples:
.. toctree::
:maxdepth: 1
python_web_app
nodejs_web_app
running_redis_service
running_ssh_service
couchdb_data_volumes
postgresql_service
mongodb
* :ref:`python_web_app`
* :ref:`nodejs_web_app`
* :ref:`running_redis_service`
* :ref:`running_ssh_service`
* :ref:`running_couchdb_service`
* :ref:`postgresql_service`
* :ref:`mongodb`

View File

@ -2,7 +2,7 @@
:description: An overview of the Docker Documentation
:keywords: containers, lxc, concepts, explanation
.. image:: static_files/dockerlogo-h.png
.. image:: https://www.docker.io/static/img/linked/dockerlogo-horizontal.png
Introduction
------------

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -8,7 +8,7 @@ Documentation
This documentation has the following resources:
.. toctree::
:titlesonly:
:maxdepth: 1
Introduction <index>
installation/index

View File

@ -1,16 +1,9 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google-site-verification" content="UxV66EKuPe87dgnH1sbrldrx6VsoWMrx5NjwkgUFxXI" />
<title>{{ meta['title'] if meta and meta['title'] else title }} - Docker Documentation</title>
<meta name="description" content="{{ meta['description'] if meta }}" />
<meta name="keywords" content="{{ meta['keywords'] if meta }}" />
@ -18,29 +11,20 @@
{%- if url_root == '#' %}{% set url_root = '' %}{% endif %}
<script type="text/javascript">
// This is probably used by the search engine
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '{{ url_root }}',
VERSION: '{{ release|e }}',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '{{ '' if no_search_suffix else file_suffix }}',
HAS_SOURCE: {{ has_source|lower }}
};
// This is included here for Javascript that doesn't have access to the templates.
var doc_version = "{{ current_version }}";
var doc_slug = "{{ slug }}";
</script>
{%- set css_files = css_files + ['_static/css/bootstrap.css'] %}
{%- set css_files = css_files + ['_static/css/bootstrap-responsive.css'] %}
{%- set css_files = css_files + ['_static/pygments.css'] %}
{%- set css_files = css_files + ['_static/css/main.css'] %}
{%- set script_files =
['https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js']
+ ['https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js']
+ script_files
['//code.jquery.com/jquery-1.10.1.min.js']
+ ['//fonts.googleapis.com/css?family=Cabin:400,700,400italic']
%}
{%- set script_files = script_files + ['_static/js/docs.js'] %}
{%- if pagename == 'index' %}
<link rel="canonical" href="http://docs.docker.io/en/latest/">
{% else %}
@ -53,19 +37,17 @@
{%- for scriptfile in script_files if scriptfile != '_static/jquery.js' %}
<script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
{%- endfor %}
<link rel="shortcut icon" href="{{ pathto('_static/favicon.png', 1) }}"/>
{%- block extrahead %}{% endblock %}
</head>
<body>
<div class="navbar navbar-fixed-top">
<div id="wrap">
<div class="navbar navbar-static-top navbar-inner navbar-fixed-top ">
<div class="navbar-dotcloud">
<div class="container" style="text-align: center;">
<div class="container">
<div style="float: right" class="pull-right">
<ul class="nav">
@ -75,49 +57,37 @@
<li id="nav-community"><a href="http://www.docker.io/community/" title="Community">Community</a></li>
<li id="nav-documentation" class="active"><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
<li id="nav-blog"><a href="http://blog.docker.io/" title="Docker Blog">Blog</a></li>
<li id="nav-index"><a href="http://index.docker.io/" title="Docker Image Index, find images here">INDEX <img class="inline-icon" src="{{ pathto('_static/img/external-link-icon.png', 1) }}" title="external link"> </a></li>
<li id="nav-index"><a href="http://index.docker.io/" title="Docker Image Index, find images here">INDEX <img class="inline-icon" alt="link to external site" src="{{ pathto('_static/img/external-link-icon.png', 1) }}" title="external link"> </a></li>
</ul>
</div>
<div style="margin-left: -12px; float: left;">
<a href="http://www.docker.io" title="Docker Homepage"><img style="margin-top: 0px; height: 60px; width: 160px; margin-left: 10px;" src="{{ pathto('_static/img/docker-top-logo.png', 1) }}"></a>
<div class="brand-logo">
<a href="http://www.docker.io" title="Docker Homepage"><img src="{{ pathto('_static/img/docker-top-logo.png', 1) }}" alt="Docker logo"></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12 titlebar">
<!--<span class="pull-right" style="margin-left: 20px; font-size: 20px">{{version}}</span>-->
<div class="pull-right" id="fork-us" style="margin-top: 16px; margin-right: 16px;">
<a href="https://github.com/dotcloud/docker/blob/master/docs/sources/{{ pagename }}.rst"><img src="{{ pathto('_static/img/fork-us.png', 1) }}"> Edit this page on Github</a>
</div>
<h1 class="pageheader"><a href="http://docs.docker.io/en/latest/" title="Documentation" style="color: white;">DOCUMENTATION</a></h1>
</div>
</div>
</div>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row" style="position: relative">
<div class="row main-row">
<div class="span3 sidebar bs-docs-sidebar">
<div class="page-title" >
<h4>DOCUMENTATION</h4>
</div>
{{ toctree(collapse=False, maxdepth=3) }}
<form>
<input type="text" id="st-search-input" class="st-search-input span3" style="width:160px;" />
<div id="st-results-container"></div>
</form>
</div>
<!-- body block -->
<div class="span9">
<div class="span9 main-content">
<!-- Main section
================================================== -->
@ -125,167 +95,90 @@
{% block body %}{% endblock %}
</section>
<!-- Swiftype search -->
<div id="st-results-container"></div>
<script type="text/javascript">
var Swiftype = window.Swiftype || {};
(function() {
Swiftype.key = 'pWPnnyvwcfpcrw1o51Sz';
Swiftype.inputElement = '#st-search-input';
Swiftype.resultContainingElement = '#st-results-container';
Swiftype.attachElement = '#st-search-input';
Swiftype.renderStyle = "overlay";
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = "//swiftype.com/embed.js";
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
}());
</script>
<div class="pull-right"><a href="https://github.com/dotcloud/docker/blob/{{ current_version }}/docs/sources/{{ pagename }}.rst" title="edit this article">Edit this article on GitHub</a></div>
</div>
</div>
</div>
<div id="footer" class="container" >
<div class="row">
<div id="push-the-footer"></div>
</div> <!-- end wrap for pushing footer -->
<div class="span12 footer">
<div class="tbox textright forceleftmargin social links pull-right">
<a class="twitter" href="http://twitter.com/docker">Twitter</a>
<a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
<div id="footer">
<div class="footer-landscape">
<div class="footer-landscape-image">
<!-- footer -->
<div class="container">
<div class="row footer">
<div class="span12 tbox">
<div class="tbox">
<p>Docker is an open source project, sponsored by <a href="https://dotcloud.com">dotCloud</a>, under the <a href="https://github.com/dotcloud/docker/blob/master/LICENSE" title="Docker licence, hosted in the Github repository">apache 2.0 licence</a></p>
</div>
<div class="social links">
<a class="twitter" href="http://twitter.com/docker">Twitter</a>
<a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
</div>
<div class="tbox version-flyer ">
<div class="content">
<small>Current version:</small>
<ul class="inline">
{% for slug, url in versions %}
<li class="alternative"><a href="{{ url }}{{ pagename }}/" title="Switch to {{ slug }}">{{ slug }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
Docker is a project by <a href="http://www.dotcloud.com">dotCloud</a>
{# {%- if show_source and has_source and sourcename %}#}
{# ·#}
{# <a href="{{ pathto('_sources/' + sourcename, true)|e }}"#}
{# rel="nofollow">View the RST source of this page</a>#}
{# {%- endif %}#}
{# {%- if pagename != "search" %}#}
{#TODO: Make a proper location for the search #}
{# Search:#}
{# <form#}
{# style="display: inline;"#}
{# class="search" action="{{ pathto('search') }}" method="get">#}
{# <input type="text" name="q" size="18" />#}
{# <input type="hidden" name="check_keywords" value="yes" />#}
{# <input type="hidden" name="area" value="default" />#}
{# </form>#}
{# {%- endif %}#}
</div>
<!-- end of footer -->
</div>
</div>
<!-- script which should be loaded after everything else -->
<script type="text/javascript" src="{{ pathto('_static/js/docs.js', 1) }}"></script>
<!-- Swiftype search -->
<script type="text/javascript">
var Swiftype = window.Swiftype || {};
(function() {
Swiftype.key = 'pWPnnyvwcfpcrw1o51Sz';
Swiftype.inputElement = '#st-search-input';
Swiftype.resultContainingElement = '#st-results-container';
Swiftype.attachElement = '#st-search-input';
Swiftype.renderStyle = "overlay";
// Function to make the sticky header possible
var shiftWindow = function() {
scrollBy(0, -70);
console.log("window shifted")
};
window.addEventListener("hashchange", shiftWindow);
function loadShift() {
if (window.location.hash) {
console.log("window has hash");
shiftWindow();
}
}
$(window).load(function() {
loadShift();
console.log("late loadshift");
});
$(function(){
// sidebar accordian-ing
// don't apply on last object (it should be the FAQ)
// define an array to which all opened items should be added
var openmenus = [];
var elements = $('.toctree-l2');
for (var i = 0; i < elements.length; i += 1) { var current = $(elements[i]); current.children('ul').hide();}
// set initial collapsed state
var elements = $('.toctree-l1');
for (var i = 0; i < elements.length; i += 1) {
var current = $(elements[i]);
if (current.hasClass('current')) {
currentlink = current.children('a')[0].href;
openmenus.push(currentlink);
// do nothing
} else {
// collapse children
current.children('ul').hide();
}
}
// attached handler on click
// Do not attach to first element or last (intro, faq) so that
// first and last link directly instead of accordian
$('.sidebar > ul > li > a').not(':last').not(':first').click(function(){
var index = $.inArray(this.href, openmenus)
if (index > -1) {
console.log(index);
openmenus.splice(index, 1);
$(this).parent().children('ul').slideUp(200, function() {
// $(this).parent().removeClass('current'); // toggle after effect
});
}
else {
openmenus.push(this.href);
console.log(this);
var current = $(this);
setTimeout(function() {
$('.sidebar > ul > li').removeClass('current');
current.parent().addClass('current'); // toggle before effect
current.parent().children('ul').hide();
current.parent().children('ul').slideDown(200);
}, 100);
}
return false;
});
});
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = "//swiftype.com/embed.js";
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
}());
</script>
<!-- Google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6096819-11']);
_gaq.push(['_setDomainName', 'docker.io']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
<!-- Google analytics -->
<script type="text/javascript">
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6096819-11']);
_gaq.push(['_setDomainName', 'docker.io']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
</script>
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,280 +1,205 @@
/* ==========================================================================
Author's custom styles
========================================================================== */
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.gray {
background-color: grey;
.debug {
border: 2px dotted red !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
padding-top: 58px;
font-family: Arial, Helvetica, sans-serif;
min-width: 940px;
font-family: "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
p a {
text-decoration: underline;
}
/* ===================
Top navigation
===================== */
.navbar {
z-index: 999;
background-color: white;
p a.btn {
text-decoration: none;
}
.brand.logo a {
text-decoration: none;
}
.navbar .navbar-inner {
padding-left: 0px;
padding-right: 0px;
}
.navbar .nav li a {
padding: 22px 15px 22px;
padding: 24.2857142855px 17px 24.2857142855px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #f2f2f2;
}
.navbar-dotcloud .container {
border-bottom: 2px #000000 solid;
.navbar .nav > li {
float: left;
}
.nav-underline {
height: 6px;
background-color: #71afc0;
}
.nav-login li a {
color: white;
padding: 10px 15px 10px;
}
.navbar .brand {
margin-left: 0px;
float: left;
display: block;
}
.navbar-inner {
min-height: 70px;
padding-left: 20px;
padding-right: 20px;
background-color: #ededed;
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
border: 1px solid #c7c7c7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.brand.logo a {
color: white;
}
.inline-icon {
margin-bottom: 6px;
}
/*
* Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS
* http://www.jonsuh.com
*
* Copyright (c) 2012 Jonathan Suh
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video embed,
.js-video iframe,
.js-video object,
.js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
/* Responsive */
@media (max-width: 767px) {
.js-video {
padding-top: 0;
}
}
/* button style from http://charliepark.org/bootstrap_buttons/ */
.btn-custom {
background-color: #292929 !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#515151", endColorstr="#282828");
background-image: -khtml-gradient(linear, left top, left bottom, from(#515151), to(#282828));
background-image: -moz-linear-gradient(top, #515151, #282828);
background-image: -ms-linear-gradient(top, #515151, #282828);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #282828));
background-image: -webkit-linear-gradient(top, #515151, #282828);
background-image: -o-linear-gradient(top, #515151, #282828);
background-image: linear-gradient(#515151, #282828);
border-color: #282828 #282828 #1f1f1f;
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.26);
-webkit-font-smoothing: antialiased;
}
/* ===================
Page title bar
===================== */
h1.pageheader {
color: #ffffff;
font-size: 20px;
font-family: "Arial Black", Tahoma, sans-serif;
margin: 8px;
margin-left: 22px;
}
/* ===================
Hero unit
===================== */
section.header {
margin-top: 0;
}
.hero-unit {
background-color: #292e33;
}
.hero-unit h5 {
color: #ffffff;
}
/* ===================
Main content layout
===================== */
.contentblock {
margin-top: 20px;
border-width: 3px;
background-color: #eeeeee;
box-sizing: content-box;
padding: 20px;
}
.section img {
margin: 15px 15px 15px 0;
border: 2px solid gray;
}
.admonition {
padding: 10px;
border: 1px solid grey;
margin-bottom: 10px;
margin-top: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.admonition .admonition-title {
font-weight: bold;
}
.admonition.note {
background-color: #f1ebba;
}
.admonition.warning {
background-color: #eed9af;
}
.admonition.danger {
background-color: #e9bcab;
}
/* ===================
left navigation
===================== */
.dotcloudsidebar {
float: left;
height: 100%;
top: 0px;
bottom: 0px;
position: relative;
min-height: 100%;
margin-top: 78px;
margin-bottom: 22px;
}
.sidebar {
font-weight: normal;
float: left;
/* min-height: 475px;*/
background: #ececec;
/* border-left: 1px solid #bbbbbb;*/
/* border-right: 1px solid #cccccc;*/
position: relative;
}
.sidebar ul {
padding: 0px;
}
.sidebar ul li {
font-size: 14px;
list-style-type: none;
list-style-position: outside;
list-style-image: none;
margin-left: -25px;
padding: 0px;
}
.sidebar ul li a {
display: block;
color: #443331;
outline: 1px solid #dddddd;
padding: 12px 12px 10px 12px;
margin-top: 1px;
background-color: #d2d2d2;
}
.sidebar ul li .toctree-l1 {
font-size: larger;
}
.sidebar ul li .toctree-l1 a {
background-color: #dfdfdf;
}
.sidebar ul li .toctree-l1 .current {
font-weight: bold;
}
.sidebar ul li .toctree-l2 a {
padding-left: 18px;
background-color: #ffffff;
}
.sidebar ul li .toctree-l2 .current {
font-weight: bold;
}
.sidebar ul li .toctree-l3 {
font-size: smaller;
}
.sidebar ul li .toctree-l3 a {
padding-left: 36px;
background-color: #ffffff;
}
.sidebar ul li .toctree-l3 .current {
font-weight: bold;
}
.brand img {
height: 38px;
margin-left: -6px;
}
.border-box {
box-sizing: border-box;
padding: 20px;
background-color: #111188;
color: white;
}
.titlebar {
background-color: #000000;
margin-top: 0px;
margin-bottom: 20px;
min-height: 40px;
color: white;
padding-top: 8px;
padding-bottom: 8px;
}
.footer {
border-top: 2px solid black;
.row {
margin-top: 15px;
margin-bottom: 20px;
min-height: 40px;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 15px;
}
/* This is the default */
.span6.with-padding {
background-color: #111188;
height: 200px;
color: white;
padding: 10px;
div[class*='span'] {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#global {
min-height: 500px;
.box {
padding: 30px;
background-color: white;
margin-top: 8px;
}
.paper {
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
}
.copy-headline {
margin-top: 0px;
}
.box h1,
.box h2,
.box h3,
.box h4 {
margin-top: -5px;
}
.nested {
padding: 30px;
}
.box.div {
padding: 30px;
}
span.read-more {
margin-left: 15px;
white-space: nowrap;
}
.forcetopalign {
margin-top: 15px !important;
}
.forcetopmargin {
margin-top: 23px !important;
}
.forceleftalign {
margin-left: 15px !important;
}
.forceleftmargin {
margin-left: 21px !important;
}
.textcenter {
text-align: center;
}
.textright {
text-align: right;
}
.textsmaller {
font-size: 12px;
}
.modal-backdrop {
opacity: 0.4;
}
/* generic page copy styles */
.copy-headline h1 {
font-size: 21px;
}
/* =======================
Row size
Sticky footer
======================= */
.row1 {
background-color: #999999;
html,
body {
height: 100%;
position: relative;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -280px;
}
/* Set the fixed height of the footer here */
#push-the-footer,
#footer {
height: 280px;
}
.main-row {
padding-top: 50px;
}
#footer .footer {
margin-top: 160px;
}
#footer .footer .ligaturesymbols {
font-size: 30px;
color: black;
}
#footer .footer .ligaturesymbols a {
color: black;
}
#footer .footer .footerlist h3,
#footer .footer .footerlist h4 {
/* correct the top alignment */
margin-top: 0px;
}
.footer-landscape-image {
position: absolute:
bottom: 0;
margin-bottom: 0;
background-image: url('https://www.docker.io/static/img/website-footer_clean.svg');
background-repeat: repeat-x;
height: 280px;
}
.main-row {
margin-top: 40px;
}
.main-content {
padding: 16px 18px inherit;
}
/* =======================
Social footer
======================= */
.social {
margin-left: 0px;
margin-top: 15px;
}
.social .twitter,
.social .github,
.social .googleplus {
background: url("../img/footer-links.png") no-repeat transparent;
background: url("https://www.docker.io/static/img/footer-links.png") no-repeat transparent;
display: inline-block;
height: 35px;
overflow: hidden;
@ -288,93 +213,160 @@ section.header {
.social .github {
background-position: -59px 2px;
}
#fork-us {
/*font-family: 'Maven Pro';*/
/*font-weight: bold;*/
form table th {
vertical-align: top;
text-align: right;
white-space: nowrap;
}
form .labeldd label {
font-weight: bold;
}
form .helptext {
font-size: 12px;
/*text-transform: uppercase;*/
display: block;
padding: 0px 1em;
height: 28px;
line-height: 28px;
background-color: #43484c;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: linear-gradient(top, #747474 0%, #43484c 100%);
border: 1px solid #43484c;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
-moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
margin: 8px;
margin-top: -4px;
margin-bottom: 10px;
}
#fork-us a {
color: #faf2ee;
text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
form .fielddd input {
width: 250px;
}
form .error {
color: #a30000;
}
div.alert.alert-block {
margin-bottom: 15px;
}
/* ======================= =======================
Documentation
========================= ========================= */
/* =======================
Media size overrides
======================= */
/* Large desktop */
@media (min-width: 1200px) {
.span6.with-padding {
background-color: #dc143c;
width: 540px;
padding: 15px;
}
Styles for the sidebar
========================= */
.page-title {
background-color: white;
border: 1px solid transparent;
text-align: center;
width: 100%;
}
/* Normal desktop */
@media (min-width: 980px) and (max-width: 1199px) {
.span6.with-padding {
background-color: #ee1111;
width: 440px;
padding: 10px;
}
.page-title h4 {
font-size: 20px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
padding-top: 0px;
}
.span6.with-padding {
background-color: #292e33;
width: 332px;
padding: 10px;
}
.bs-docs-sidebar {
padding-left: 5px;
max-width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin-top: 18px;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
padding-top: 0px;
}
#global {
/* TODO: Fix this to be relative to the navigation size */
}
#fork-us {
display: none;
}
.bs-docs-sidebar ul {
list-style: none;
margin-left: 0px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
#nav-gettingstarted {
display: none;
}
.bs-docs-sidebar .toctree-l2 > ul {
width: 100%;
}
/* Misc fixes */
table th {
text-align: left;
.bs-docs-sidebar ul > li.toctree-l1.has-children {
background-image: url('../img/menu_arrow_right.gif');
background-repeat: no-repeat;
background-position: 13px 13px;
list-style-type: none;
padding: 0px 0px 0px 0px;
vertical-align: middle;
}
.bs-docs-sidebar ul > li.toctree-l1.has-children.open {
background-image: url('../img/menu_arrow_down.gif');
}
.bs-docs-sidebar ul > li > a {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 35px;
padding-right: 20px;
font-size: 14px;
border-bottom: 1.5px solid #595959;
line-height: 20px;
}
.bs-docs-sidebar ul > li:first-child.active > a {
border-top: 1.5px solid #595959;
}
.bs-docs-sidebar ul > li:last-child > a {
border-bottom: none;
}
.bs-docs-sidebar ul > li:last-child.active > a {
border-bottom: 1.5px solid #595959;
}
.bs-docs-sidebar ul > li.active > a {
border-right: 1.5px solid #595959;
border-left: 1.5px solid #595959;
color: #394d54;
}
.bs-docs-sidebar ul > li:hover {
background-color: #e8e8e8;
}
.bs-docs-sidebar.toctree-l3 ul {
display: inherit;
margin-left: 15px;
font-size: smaller;
}
.bs-docs-sidebar .toctree-l3 a {
border: none;
font-size: 12px;
line-height: 15px;
}
.bs-docs-sidebar ul > li > ul {
display: none;
}
.bs-docs-sidebar ul > li.current > ul {
display: inline-block;
padding-left: 0px;
width: 100%;
}
.toctree-l2.current > a {
font-weight: bold;
}
.toctree-l2.current {
border: 1.5px solid #595959;
color: #394d54;
}
/* =====================================
Styles for the floating version widget
====================================== */
.version-flyer {
position: fixed;
float: right;
right: 0;
bottom: 40px;
background-color: #E0E0E0;
border: 1px solid #88BABC;
padding: 5px;
font-size: larger;
}
.version-flyer .content {
padding-right: 45px;
margin-top: 7px;
margin-left: 7px;
background-image: url('../img/container3.png');
background-position: right center;
background-repeat: no-repeat;
}
.version-flyer .alternative {
visibility: hidden;
display: none;
}
.version-flyer .active-slug {
visibility: visible;
display: inline-block;
}
.version-flyer:hover .alternative {
animation-duration: 1s;
display: inline-block;
visibility: visible;
}
/* =====================================
Styles for
====================================== */
h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
@ -391,21 +383,29 @@ dt:hover > a.headerlink {
float: right;
visibility: hidden;
}
/* Swiftype style */
#st-search-input {
margin-right: 14px;
margin-left: 9px;
height: 19px;
width: 120px;
/* =====================================
Miscellaneous information
====================================== */
.admonition.warning,
.admonition.note,
.admonition.seealso,
.admonition.todo {
border: 3px solid black;
padding: 10px;
margin: 5px auto 10px;
}
.admonition .admonition-title {
font-size: larger;
}
.admonition.warning {
border-color: #ac0004;
}
.admonition.note {
border-color: #cbc200;
}
.admonition.todo {
border-color: orange;
}
.admonition.seealso {
border-color: #23cb1f;
}
#swiftype-img {
border: none;
width: 145px;
height: auto;
margin: 0px auto;
margin-left: 13px;
margin-top: -30px;
}

View File

@ -1,376 +1,337 @@
// Main CSS configuration file
// by Thatcher Peskens, thatcher@dotcloud.com
//
// Please note variables.less is customized to include custom font, background-color, and link colors.
/* ==========================================================================
Author's custom styles
========================================================================== */
@import "variables.less";
@red: crimson;
@lightblue: #118;
@lightred: #e11;
@darkblue: #292E33;
// Variables for main.less
// -----------------------
@borderGray: #888;
@box-top-margin: 8px;
@box-padding-size: 30px;
@docker-background-color: #71AFC0;
@very-dark-sea-green: #394D54;
// Custom colors for Docker
// --------------------------
@gray-super-light: #F2F2F2;
@deep-red: #A30000;
@deep-blue: #1B2033;
@deep-green: #007035;
@link-blue: #213B8F;
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.gray {
background-color: grey;
.debug {
border: 2px dotted red !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
// Other custom colors for Docker
// --------------------------
// ** are defined in sources/less/variables **
//@import "bootstrap/variables.less";
// Styles generic for each and every page
// ----------------------------------- // -----------------------------------
// moving body down to make place for fixed navigation
body {
padding-top: 58px;
font-family: Arial, Helvetica, sans-serif;
min-width: 940px;
font-family: @font-family-base;
}
h1, h2, h3, h4 {
font-family: Arial, Helvetica, sans-serif;
// font-weight: bold;
font-weight: 900;
}
p a {
text-decoration: underline;
/* ===================
Top navigation
===================== */
.navbar {
z-index: 999;
.nav {
// float: right;
li a{
padding: 22px 15px 22px;
&.btn {
text-decoration: none;
}
}
background-color: white;
}
.navbar-dotcloud .container {
border-bottom: 2px @black solid;
.brand.logo a {
text-decoration: none;
}
// Styles for top navigation
// ----------------------------------
.navbar .navbar-inner {
padding-left: 0px;
padding-right: 0px;
}
.navbar .nav {
li a {
padding: ((@navbar-height - @line-height-base) / 2) 17px ((@navbar-height - @line-height-base) / 2);
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #f2f2f2;
}
}
.navbar .nav > li {
float: left;
}
.nav-underline {
height: 6px;
background-color: @docker-background-color;
}
.nav-login {
li {
a {
color: white;
padding: 10px 15px 10px;
}
}
}
.navbar .brand {
margin-left: 0px;
float: left;
display: block;
}
.navbar-inner {
min-height: 70px;
padding-left: 20px;
padding-right: 20px;
background-color: #ededed;
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
border: 1px solid #c7c7c7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.brand.logo a {
color: white;
}
.logo {
// background-color: #A30000;
// color: white;
}
.inline-icon {
margin-bottom: 6px;
}
/*
* Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS
* http://www.jonsuh.com
*
* Copyright (c) 2012 Jonathan Suh
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
// Bootstrap elements
// ----------------------------------
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
/* Responsive */
@media (max-width: 767px) {
.js-video {
padding-top: 0;
}
}
/* button style from http://charliepark.org/bootstrap_buttons/ */
.btn-custom {
background-color: hsl(0, 0%, 16%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#515151", endColorstr="#282828");
background-image: -khtml-gradient(linear, left top, left bottom, from(#515151), to(#282828));
background-image: -moz-linear-gradient(top, #515151, #282828);
background-image: -ms-linear-gradient(top, #515151, #282828);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #282828));
background-image: -webkit-linear-gradient(top, #515151, #282828);
background-image: -o-linear-gradient(top, #515151, #282828);
background-image: linear-gradient(#515151, #282828);
border-color: #282828 #282828 hsl(0, 0%, 12%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.26);
-webkit-font-smoothing: antialiased;
}
/* ===================
Page title bar
===================== */
h1.pageheader {
color: @white;
font-size: 20px;
font-family: "Arial Black", Tahoma, sans-serif;
margin: 8px;
margin-left: 22px;
}
/* ===================
Hero unit
===================== */
section.header {
margin-top:0;
}
.hero-unit {
background-color: @darkblue;
h5 {
color: @white;
}
.subtitle {
}
}
/* ===================
Main content layout
===================== */
.contentblock {
margin-top: 20px;
border-width: 3px;
// border-color: #E00;
// border-style:solid;
// border-color: @borderGray;
// box-sizing: border-box;
background-color: @grayLighter;
box-sizing: content-box;
padding: 20px;
}
.section img {
margin: 15px 15px 15px 0;
border: 2px solid gray;
}
.admonition {
padding: 10px;
border: 1px solid grey;
margin-bottom: 10px;
margin-top: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.admonition .admonition-title {
font-weight: bold;
}
.admonition.note {
background-color: rgb(241, 235, 186);
}
.admonition.warning {
background-color: rgb(238, 217, 175);
}
.admonition.danger {
background-color: rgb(233, 188, 171);
}
/* ===================
left navigation
===================== */
.dotcloudsidebar {
// background-color: #ee3;
// border: 1px red dotted;
float: left;
height: 100%;
top: 0px;
bottom: 0px;
position: relative;
// margin: 0px;
min-height: 100%;
margin-top: 78px;
margin-bottom: 22px;
}
.sidebar {
// font-family: "Maven Pro";
font-weight: normal;
// margin-top: 38px;
float: left;
// width: 220px;
/* min-height: 475px;*/
// margin-bottom: 28px;
// padding-bottom: 120px;
background: #ececec;
/* border-left: 1px solid #bbbbbb;*/
/* border-right: 1px solid #cccccc;*/
position: relative;
ul {
padding: 0px;
li {
font-size: 14px;
// list-style: none;
list-style-type: none;
list-style-position: outside;
list-style-image: none;
margin-left: -25px;
padding: 0px;
a {
display: block;
color: #443331;
outline: 1px solid #dddddd;
padding: 12px 12px 10px 12px;
margin-top: 1px;
background-color: #d2d2d2;
}
.toctree-l1, .toctree-l2 {
}
.toctree-l1 {
font-size: larger;
a {
background-color: rgb(223, 223, 223);
}
.current {
font-weight: bold;
}
// margin-left: -25px;
}
.toctree-l2 {
a {
padding-left: 18px;
background-color: rgb(255, 255, 255);
}
.current {
font-weight: bold;
}
}
.toctree-l3 {
font-size: smaller;
a {
padding-left: 36px;
background-color: rgb(255, 255, 255);
}
.current {
font-weight: bold;
}
}
}
}
}
.brand img {
height: 38px;
margin-left: -6px;
}
.border-box {
box-sizing: border-box;
padding: 20px;
background-color: @lightblue;
color: white;
}
.titlebar {
background-color: @black;
margin-top: 0px;
margin-bottom: 20px;
min-height: 40px;
color: white;
// box-sizing: border-box;
padding-top: 8px;
padding-bottom: 8px;
}
.footer {
border-top: 2px solid black;
// background-color: #d2d2d2;
.row {
margin-top: 15px;
margin-bottom: 20px;
margin-bottom: 15px;
}
min-height: 40px;
.container {
// background-color: green;
}
padding-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
// Styles on blocks of content
// ----------------------------------
// everything which is a block should have box-sizing: border-box;
div[class*='span']
{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* This is the default */
.span6.with-padding {
background-color: @lightblue;
height: 200px;
color: white;
padding: 10px;
// Box for making white with a border, and some nice spacings
.box {
padding: @box-padding-size;
background-color: white;
margin-top: @box-top-margin;
}
#global {
min-height: 500px;
.paper {
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
}
.copy-headline {
margin-top: 0px;
// border-bottom: 1.2px solid @veryDarkSeaGreen;
}
.box {
h1, h2, h3, h4 {
margin-top: -5px;
}
}
.nested {
padding: @box-padding-size;
}
.box.div {
padding: @box-padding-size;
}
span.read-more {
margin-left: 15px;
white-space: nowrap;
}
// set a top margin of @box-top-margin + 8 px to make it show a margin
//instead of the div being flush against the side. Typically only
// required for a stacked div in a column, w.o. using row.
.forcetopalign {
margin-top: 15px !important;
}
.forcetopmargin {
margin-top: 23px !important;
}
.forceleftalign {
margin-left: 15px !important;
}
.forceleftmargin {
margin-left: 21px !important;
}
// simple text aligns
.textcenter {
text-align: center;
}
.textright {
text-align: right;
}
.textsmaller {
font-size: @font-size-small;
}
.modal-backdrop {
opacity: 0.4;
}
/* generic page copy styles */
.copy-headline h1 {
font-size: 21px;
}
/* =======================
Row size
Sticky footer
======================= */
.row1 {
background-color: @grayLight;
@sticky-footer-height: 280px;
html,
body {
height: 100%;
position: relative;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -@sticky-footer-height;
}
/* Set the fixed height of the footer here */
#push-the-footer,
#footer {
height: @sticky-footer-height;
}
#footer {
// margin-bottom: -60px;
// margin-top: 160px;
}
.main-row {
padding-top: @navbar-height;
}
// Styles on the footer
// ----------------------------------
//
#footer .footer {
margin-top: 160px;
.ligaturesymbols {
font-size: 30px;
color: black;
a {
color: black;
}
}
.footerlist {
h3, h4 {
/* correct the top alignment */
margin-top: 0px;
}
}
}
.footer-landscape-image {
position: absolute:
bottom: 0;
margin-bottom: 0;
background-image: url('https://www.docker.io/static/img/website-footer_clean.svg');
background-repeat: repeat-x;
height: @sticky-footer-height;
}
.main-row {
margin-top: 40px;
}
.main-content {
padding: 16px 18px inherit;
}
/* =======================
Social footer
======================= */
.social {
margin-left: 0px;
margin-top: 15px;
}
.social .twitter, .social .github, .social .googleplus {
background: url("../img/footer-links.png") no-repeat transparent;
background: url("https://www.docker.io/static/img/footer-links.png") no-repeat transparent;
display: inline-block;
height: 35px;
overflow: hidden;
@ -387,107 +348,219 @@ section.header {
background-position: -59px 2px;
}
// Styles on the forms
// ----------------------------------
#fork-us {
/*font-family: 'Maven Pro';*/
/*font-weight: bold;*/
font-size: 12px;
/*text-transform: uppercase;*/
display: block;
padding: 0px 1em;
height: 28px;
line-height: 28px;
background-color: #43484c;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
background-image: linear-gradient(top, #747474 0%, #43484c 100%);
border: 1px solid #43484c;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
-moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
margin: 8px;
a {
color: #faf2ee;
text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
form table {
th {
vertical-align: top;
text-align: right;
white-space: nowrap;
}
}
form {
.labeldd label {
font-weight: bold;
}
.helptext {
font-size: @font-size-small;
margin-top: -4px;
margin-bottom: 10px;
}
.fielddd input {
width: 250px;
}
.error {
color: @deep-red;
}
[type=submit] {
// margin-top: -8px;
}
}
div.alert.alert-block {
margin-bottom: 15px;
}
/* ======================= =======================
Documentation
========================= ========================= */
/* =======================
Media size overrides
======================= */
Styles for the sidebar
========================= */
/* Large desktop */
@media (min-width: 1200px) {
.span6.with-padding {
background-color: @red;
width: (@gridColumnWidth1200 * 6) + (@gridGutterWidth1200 * 5) - @gridGutterWidth1200;
padding: @gridGutterWidth1200/2;
@sidebar-navigation-border: 1.5px solid #595959;
@sidebar-navigation-width: 225px;
.page-title {
// border-bottom: 1px solid #bbbbbb;
background-color: white;
border: 1px solid transparent;
text-align: center;
width: 100%;
h4 {
font-size: 20px;
}
}
/* Normal desktop */
@media (min-width: 980px) and (max-width: 1199px) {
.span6.with-padding {
background-color: @lightred;
.bs-docs-sidebar {
padding-left: 5px;
max-width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin-top: 18px;
width: (@gridColumnWidth * 6) + (@gridGutterWidth * 5) - @gridGutterWidth;
padding: @gridGutterWidth/2;
ul {
list-style: none;
margin-left: 0px;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
padding-top: 0px;
.toctree-l2 > ul {
width: 100%;
}
ul > li {
&.toctree-l1.has-children {
background-image: url('../img/menu_arrow_right.gif');
background-repeat: no-repeat;
background-position: 13px 13px;
list-style-type: none;
// margin-left: px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
.span6.with-padding {
background-color: @darkblue;
&.open {
background-image: url('../img/menu_arrow_down.gif');
}
}
width: (@gridColumnWidth768 * 6) + (@gridGutterWidth768 * 5) - @gridGutterWidth768;
padding: @gridGutterWidth768/2;
& > a {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display:inline-block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 35px;
padding-right: 20px;
font-size: @font-size-base;
border-bottom: @sidebar-navigation-border;
line-height: 20px;
}
&:first-child.active > a {
border-top: @sidebar-navigation-border;
}
&:last-child > a {
border-bottom: none;
}
&:last-child.active > a {
border-bottom: @sidebar-navigation-border;
}
&.active > a {
border-right: @sidebar-navigation-border;
border-left: @sidebar-navigation-border;
color: @very-dark-sea-green;
}
&:hover {
background-color: #e8e8e8;
}
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
padding-top: 0px;
&.toctree-l3 ul {
display: inherit;
margin-left: 15px;
font-size: smaller;
}
#global {
/* TODO: Fix this to be relative to the navigation size */
// padding-top: 600px;
.toctree-l3 a {
border: none;
font-size: 12px;
line-height: 15px;
}
#fork-us {
ul > li > ul {
display: none;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
#nav-gettingstarted {
display: none;
ul > li.current > ul {
display: inline-block;
padding-left: 0px;
width: 100%;
}
}
/* Misc fixes */
table th {
text-align: left;
.toctree-l2 {
&.current > a {
font-weight: bold;
}
&.current {
border: 1.5px solid #595959;
color: #394d54;
}
}
/* =====================================
Styles for the floating version widget
====================================== */
.version-flyer {
position: fixed;
float: right;
right: 0;
bottom: 40px;
background-color: #E0E0E0;
border: 1px solid #88BABC;
padding: 5px;
font-size: larger;
.content {
padding-right: 45px;
margin-top: 7px;
margin-left: 7px;
// display: inline-block;
background-image: url('../img/container3.png');
background-position: right center;
background-repeat: no-repeat;
}
.alternative {
visibility: hidden;
display: none;
}
.active-slug {
visibility: visible;
display: inline-block;
}
&:hover .alternative {
animation-duration: 1s;
display: inline-block;
visibility: visible;
}
}
/* =====================================
Styles for
====================================== */
h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
@ -504,4 +577,38 @@ dt:hover > a.headerlink {
font-weight: bold;
float: right;
visibility: hidden;
}
}
/* =====================================
Miscellaneous information
====================================== */
.admonition {
&.warning, &.note, &.seealso, &.todo {
border: 3px solid black;
padding: 10px;
margin: 5px auto 10px;
}
.admonition-title {
font-size: larger;
}
&.warning {
border-color: #ac0004;
}
&.note {
border-color: #cbc200;
}
&.todo {
border-color: orange;
}
&.seealso {
border-color: #23cb1f;
}
}

707
docs/theme/docker/static/css/variables.less vendored Executable file → Normal file
View File

@ -9,128 +9,175 @@
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
// Accent colors
// Brand colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: @grayDark;
@body-bg: #fff;
@text-color: @gray-dark;
// Links
// -------------------------
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 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;
@font-family-sans-serif: "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
// Component sizing
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Iconography
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
@table-cell-padding: 8px;
@table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btn-font-weight: normal;
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: @gray-light;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@input-bg: #fff;
@input-bg-disabled: @gray-lighter;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border;
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-caret-color: #000;
// COMPONENT VARIABLES
@ -141,161 +188,435 @@
// -------------------------
// 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;
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1600px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Grid system
// --------------------------------------------------
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;
// Wells
// -------------------------
@wellBackground: #f5f5f5;
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-desktop;
// 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%);
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
//
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff;
// Pagination
// -------------------------
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-bg: @gray-lighter;
@pagination-active-bg: @brand-primary;
@pagination-active-color: #fff;
@pagination-disabled-color: @gray-light;
// Hero unit
// Pager
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
@pager-border-radius: 15px;
@pager-disabled-color: @gray-light;
// Jumbotron
// -------------------------
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: 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%);
@state-warning-text: #c09853;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
@state-success-text: #468847;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Tooltips and popovers
// Tooltips
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@tooltip-max-width: 200px;
@tooltip-color: #fff;
@tooltip-bg: #000;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// -------------------------
@popover-bg: #fff;
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2);
@popover-fallback-border-color: #ccc;
// GRID
@popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
// Labels
// -------------------------
@label-default-bg: @gray-light;
@label-primary-bg: @brand-primary;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
@modal-content-bg: #fff;
@modal-content-border-color: rgba(0,0,0,.2);
@modal-content-fallback-border-color: #999;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts
// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-color: #fff;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@list-group-border: #ddd;
@list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5;
@list-group-active-color: #fff;
@list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels
// -------------------------
@panel-bg: #fff;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@well-bg: #f5f5f5;
// Badges
// -------------------------
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc;
@breadcrumb-active-color: @gray-light;
// Carousel
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-color: #000;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
// Type
// ------------------------
@text-muted: @gray-light;
@abbr-border-color: @gray-light;
@headings-small-color: @gray-light;
@blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter;
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// 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);
// Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width));

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 B

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,37 +1,98 @@
// This script should be included at the END of the document.
// For the fastest loading it does not inlude $(document).ready()
// This Document contains a few helper functions for the documentation to display the current version,
// collapse and expand the menu etc.
// Function to make the sticky header possible
function shiftWindow() {
scrollBy(0, -70);
console.log("window shifted")
}
window.addEventListener("hashchange", shiftWindow);
function loadShift() {
if (window.location.hash) {
console.log("window has hash");
shiftWindow();
}
}
$(window).load(function() {
loadShift();
});
$(function(){
// init multi-vers stuff
$('.tabswitcher').each(function(i, multi_vers){
var tabs = $('<ul></ul>');
$(multi_vers).prepend(tabs);
$(multi_vers).children('.tab').each(function(j, vers_content){
vers = $(vers_content).children(':first').text();
var id = 'multi_vers_' + '_' + i + '_' + j;
$(vers_content).attr('id', id);
$(tabs).append('<li><a href="#' + id + '">' + vers + '</a></li>');
});
// sidebar accordian-ing
// don't apply on last object (it should be the FAQ) or the first (it should be introduction)
// define an array to which all opened items should be added
var openmenus = [];
var elements = $('.toctree-l2');
// for (var i = 0; i < elements.length; i += 1) { var current = $(elements[i]); current.children('ul').hide();}
// set initial collapsed state
var elements = $('.toctree-l1');
for (var i = 0; i < elements.length; i += 1) {
var current = $(elements[i]);
if (current.hasClass('current')) {
current.addClass('open');
currentlink = current.children('a')[0].href;
openmenus.push(currentlink);
// do nothing
} else {
// collapse children
current.children('ul').hide();
}
}
if (doc_version == "") {
$('.version-flyer ul').html('<li class="alternative active-slug"><a href="" title="Switch to local">Local</a></li>');
}
// mark the active documentation in the version widget
$(".version-flyer a:contains('" + doc_version + "')").parent().addClass('active-slug');
// attached handler on click
// Do not attach to first element or last (intro, faq) so that
// first and last link directly instead of accordian
$('.sidebar > ul > li > a').not(':last').not(':first').click(function(){
var index = $.inArray(this.href, openmenus)
if (index > -1) {
console.log(index);
openmenus.splice(index, 1);
$(this).parent().children('ul').slideUp(200, function() {
$(this).parent().removeClass('open'); // toggle after effect
});
}
else {
openmenus.push(this.href);
var current = $(this);
setTimeout(function() {
// $('.sidebar > ul > li').removeClass('current');
current.parent().addClass('current').addClass('open'); // toggle before effect
current.parent().children('ul').hide();
current.parent().children('ul').slideDown(200);
}, 100);
}
return false;
});
$( ".tabswitcher" ).tabs();
// sidebar acordian-ing
// don't apply on last object (it should be the FAQ)
$('nav > ul > li > a').not(':last').click(function(){
if ($(this).parent().hasClass('current')) {
$(this).parent().children('ul').slideUp(200, function() {
$(this).parent().removeClass('current'); // toggle after effect
});
} else {
$('nav > ul > li > ul').slideUp(100);
var current = $(this);
setTimeout(function() {
$('nav > ul > li').removeClass('current');
current.parent().addClass('current'); // toggle before effect
current.parent().children('ul').hide();
current.parent().children('ul').slideDown(200);
}, 100);
}
return false;
});
// add class to all those which have children
$('.sidebar > ul > li').not(':last').not(':first').addClass('has-children');
});

View File

@ -1,18 +0,0 @@
/*
* jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
* http://benalman.com/projects/jquery-bbq-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M<N?O[P]||(R[M+1]&&isNaN(R[M+1])?{}:[]):J}}else{if($.isArray(H[P])){H[P].push(J)}else{if(H[P]!==i){H[P]=[H[P],J]}else{H[P]=J}}}}else{if(P){H[P]=F?i:""}}});return H};function z(H,F,G){if(F===i||typeof F==="boolean"){G=F;F=a[H?D:A]()}else{F=E(F)?F.replace(H?w:x,""):F}return l(F,G)}l[A]=B(z,0);l[D]=v=B(z,1);$[y]||($[y]=function(F){return $.extend(C,F)})({a:k,base:k,iframe:t,img:t,input:t,form:"action",link:k,script:t});j=$[y];function s(I,G,H,F){if(!E(H)&&typeof H!=="object"){F=H;H=G;G=i}return this.each(function(){var L=$(this),J=G||j()[(this.nodeName||"").toLowerCase()]||"",K=J&&L.attr(J)||"";L.attr(J,a[I](K,H,F))})}$.fn[A]=B(s,A);$.fn[D]=B(s,D);b.pushState=q=function(I,F){if(E(I)&&/^#/.test(I)&&F===i){F=2}var H=I!==i,G=c(p[g][k],H?I:{},H?F:2);p[g][k]=G+(/#/.test(G)?"":"#")};b.getState=u=function(F,G){return F===i||typeof F==="boolean"?v(F):v(G)[F]};b.removeState=function(F){var G={};if(F!==i){G=u();$.each($.isArray(F)?F:arguments,function(I,H){delete G[H]})}q(G,2)};e[d]=$.extend(e[d],{add:function(F){var H;function G(J){var I=J[D]=c();J.getState=function(K,L){return K===i||typeof K==="boolean"?l(I,K):l(I,L)[K]};H.apply(this,arguments)}if($.isFunction(F)){H=F;return G}else{H=F.handler;F.handler=G}}})})(jQuery,this);
/*
* jQuery hashchange event - v1.2 - 2/11/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);

View File

@ -1,9 +0,0 @@
/*
* urlInternal - v1.0 - 10/7/2009
* http://benalman.com/projects/jquery-urlinternal-plugin/
*
* Copyright (c) 2009 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($){var g,i=!0,r=!1,m=window.location,h=Array.prototype.slice,b=m.href.match(/^((https?:\/\/.*?\/)?[^#]*)#?.*$/),u=b[1]+"#",t=b[2],e,l,f,q,c,j,x="elemUrlAttr",k="href",y="src",p="urlInternal",d="urlExternal",n="urlFragment",a,s={};function w(A){var z=h.call(arguments,1);return function(){return A.apply(this,z.concat(h.call(arguments)))}}$.isUrlInternal=q=function(z){if(!z||j(z)){return g}if(a.test(z)){return i}if(/^(?:https?:)?\/\//i.test(z)){return r}if(/^[a-z\d.-]+:/i.test(z)){return g}return i};$.isUrlExternal=c=function(z){var A=q(z);return typeof A==="boolean"?!A:A};$.isUrlFragment=j=function(z){var A=(z||"").match(/^([^#]?)([^#]*#).*$/);return !!A&&(A[2]==="#"||z.indexOf(u)===0||(A[1]==="/"?t+A[2]===u:!/^https?:\/\//i.test(z)&&$('<a href="'+z+'"/>')[0].href.indexOf(u)===0))};function v(A,z){return this.filter(":"+A+(z?"("+z+")":""))}$.fn[p]=w(v,p);$.fn[d]=w(v,d);$.fn[n]=w(v,n);function o(D,C,B,A){var z=A[3]||e()[(C.nodeName||"").toLowerCase()]||"";return z?!!D(C.getAttribute(z)):r}$.expr[":"][p]=w(o,q);$.expr[":"][d]=w(o,c);$.expr[":"][n]=w(o,j);$[x]||($[x]=function(z){return $.extend(s,z)})({a:k,base:k,iframe:y,img:y,input:y,form:"action",link:k,script:y});e=$[x];$.urlInternalHost=l=function(B){B=B?"(?:(?:"+Array.prototype.join.call(arguments,"|")+")\\.)?":"";var A=new RegExp("^"+B+"(.*)","i"),z="^(?:"+m.protocol+")?//"+m.hostname.replace(A,B+"$1").replace(/\\?\./g,"\\.")+(m.port?":"+m.port:"")+"/";return f(z)};$.urlInternalRegExp=f=function(z){if(z){a=typeof z==="string"?new RegExp(z,"i"):z}return a};l("www")})(jQuery);

View File

@ -1 +0,0 @@

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long