| // 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; |
| |
| } |
| |
| .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; |
| } |
| |
| .main-content { |
| padding: 16px 18px inherit; |
| } |
| |
| /* ======================= |
| Social footer |
| ======================= */ |
| |
| .social { |
| margin-left: 0px; |
| margin-top: 15px; |
| } |
| |
| .social .twitter, .social .github, .social .googleplus { |
| background: url("https://www.docker.io/static/img/footer-links.png") no-repeat transparent; |
| display: inline-block; |
| height: 35px; |
| overflow: hidden; |
| text-indent: 9999px; |
| width: 35px; |
| margin-right: 10px; |
| } |
| |
| .social .twitter { |
| background-position: 0px 2px; |
| } |
| |
| .social .github { |
| background-position: -59px 2px; |
| } |
| |
| // 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; |
| |
| .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, |
| 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; |
| } |
| |
| } |
| |