moby/docs/theme/docker/static/css/main.less

// 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.


@import "variables.less";

// Variables for main.less
// -----------------------

@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;


.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 {
  min-width: 940px;
  font-family: @font-family-base;

}


p a {
	text-decoration: underline;

    &.btn {
      text-decoration: none;
    }

}

.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;
  img {
    width: auto;
  }
}

.logo {
//	background-color: #A30000;
//	color: white;
}

.inline-icon {
  margin-bottom: 6px;
}

// Bootstrap elements
// ----------------------------------

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

.container {
	// background-color: green;
}

// 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;
}


// Box for making white with a border, and some nice spacings
.box {
    padding: @box-padding-size;
	background-color: white;
	margin-top: @box-top-margin;
}

.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;
}


/* =======================
   Sticky footer
======================= */

@sticky-footer-height: 280px;

html,
body {
  height: 100%;
  /* 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;
}

.sidebar {
  width: 215px;
  float: left;
}

.main-content {
  padding: 16px 18px inherit;
  margin-left: 230px; /* space for sidebar */
}



/* =======================
   Social footer
======================= */

.social {
  margin-left: 0px;
  margin-top: 15px;
}

.social {
  .twitter, .github, .googleplus, .facebook, .slideshare, .linkedin, .flickr, .youtube, .reddit {
    background: url("../img/social/docker_social_logos.png") no-repeat transparent;
    display: inline-block;
    height: 32px;
    overflow: hidden;
    text-indent: 9999px;
    width: 32px;
    margin-right: 5px;
  }
}

.social :hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.social .twitter {
  background-position: -160px 0px;
}

.social .reddit {
  background-position: -256px 0px;
}

.social .github {
  background-position: -64px 0px;
}

.social .googleplus {
  background-position: -96px 0px;
}

.social .facebook {
  background-position: -0px 0px;
}

.social .slideshare {
  background-position: -128px 0px;
}

.social .youtube {
  background-position: -192px 0px;
}

.social .flickr {
  background-position: -32px 0px;
}

.social .linkedin {
  background-position: -224px 0px;
}



// Styles on the forms
// ----------------------------------

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
========================= ========================= */


/* =======================
  Styles for the sidebar
========================= */


@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;
  }
}

.bs-docs-sidebar {
  padding-left: 5px;
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: 18px;

  ul {
      list-style: none;
      margin-left: 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;

        &.open {
          background-image: url('../img/menu_arrow_down.gif');
        }
    }

    & > 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;
    }
  }

  &.toctree-l3 ul {
    display: inherit; 
    
    margin-left: 15px; 
    font-size: smaller;
  }

  .toctree-l3 a {
    border: none;
    font-size: 12px;
    line-height: 15px;
  }

  ul > li > ul {
    display: none;
  }

  ul > li.current > ul {
    display: inline-block;
    padding-left: 0px;
    width: 100%;
  }
}

.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;
  max-width: 300px;

  .content {
    padding-right: 45px;
    margin-top: 7px;
    margin-left: 7px;
    background-image: url('../img/container3.png');
    background-position: right center; 
    background-repeat: no-repeat;
  }

  .alternative {
  }

  .active-slug {
    visibility: visible;
    display: inline-block;
    font-weight: bolder;
  }

  &:hover .alternative {
    animation-duration: 1s;
    display: inline-block;
  }

  .version-note {
    font-size: 16px;
    color: black;
  }

}

/* =====================================
  Styles for 
====================================== */

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 {
    visibility: visible;
}

.headerlink {
  font-size: smaller;
  color: #666;
  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, &.danger {
    border-color: #ac0004;
  }

  &.note {
    border-color: #cbc200;
  }

  &.todo {
    border-color: orange;
  }

  &.seealso {
    border-color: #23cb1f;
  }

}

/* Add styles for other types of comments */

.versionchanged,
.versionadded,
.versionmodified,
.deprecated {
   font-size: larger;
   font-weight: bold;
}

.versionchanged {
  color: lightseagreen;
}

.versionadded {
   color: mediumblue;
}

.deprecated {
   color: orangered;
}