| /* Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| * use this file except in compliance with the License. You may obtain a copy of |
| * the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| * License for the specific language governing permissions and limitations under |
| * the License. |
| */ |
| |
| /*! |
| * |
| * Fauxton less style files |
| * |
| */ |
| @import "bootstrap/bootstrap.less"; |
| @import "bootstrap/mixins.less"; |
| @import "variables.less"; |
| @import "prettyprint.less"; |
| @import "icons.less"; |
| |
| |
| body { |
| background-color: #F2F2F2; |
| } |
| #main > footer { |
| position: fixed; |
| bottom: 0; |
| font-size: 10px; |
| margin-left: @navWidth; |
| padding: 5px 10px; |
| background-color: #F2F2F2; |
| width: 100%; |
| .closeMenu & { |
| margin-left: @collapsedNavWidth; |
| } |
| } |
| |
| .hide-text { |
| font: 0/0 a; |
| color: transparent; |
| text-shadow: none; |
| background-color: transparent; |
| border: 0; |
| } |
| |
| .row { |
| margin-left: 0; |
| } |
| |
| // globals |
| body { |
| font-size: 16px; |
| line-height:1.3; |
| padding-bottom: 0px; |
| color: #333; |
| padding-top: 92px; |
| &#home{ |
| padding-top: 90px; |
| } |
| background-color: @sidebarBG; |
| /* OVERRIDE BOOTSTRAP BTN STYLES */ |
| .btn{ |
| .box-shadow(none); |
| .border-radius(0); |
| background-image: none; |
| text-shadow: none; |
| background-repeat: no-repeat; |
| } |
| } |
| |
| h2,h3,h4 {font-weight: 600;} |
| |
| |
| a, .btn{ |
| .transition(all .25s linear); |
| } |
| |
| a, |
| a:visited, |
| a:active { |
| color: @linkColor; |
| } |
| |
| a:hover{ |
| color: @red; |
| } |
| |
| /* ajax loader */ |
| .loader { |
| background: url('../img/loader.gif') center center no-repeat; |
| min-height: 100px; |
| } |
| #app-container.loader{ |
| min-height: 400px; |
| > *{ |
| display: none; |
| } |
| } |
| |
| #global-notifications { |
| position: fixed; |
| top: 0px; |
| display: block; |
| z-index: 100000; |
| left: @navWidth; |
| .closeMenu & { |
| left: @collapsedNavWidth; |
| } |
| width: 100%; |
| } |
| |
| #app-container{ |
| padding: 0; |
| height: 100%; |
| width: 100%; |
| position: absolute; |
| top: 0; |
| left: 0; |
| > .row-fluid { |
| height: 100%; |
| } |
| } |
| |
| /* bootstrap override */ |
| .container-fluid { |
| padding-right: 0px; |
| padding-left: 0px; |
| } |
| |
| /* Fixed side navigation */ |
| #primary-navbar { |
| height: 100%; |
| position: fixed; |
| width: @navWidth; |
| top: 0; |
| bottom: 0; |
| background-color: @primaryNav; |
| #footer-links{ |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| } |
| |
| .navbar { |
| .brand { |
| .box-sizing(content-box); |
| .hide-text; |
| .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985); |
| margin: 10px 0 6px; |
| width: 174px; |
| height: 40px; |
| padding: 10px; |
| .icon{ |
| .box-sizing(content-box); |
| background: url(../img/couchdb-site.png) no-repeat 0 0; |
| display: block; |
| height: 100%; |
| width: 100%; |
| } |
| .burger{ |
| .transition(all @transitionSpeed @transitionEaseType); |
| padding-top: 6px; |
| left: -8px; |
| position: absolute; |
| div{ |
| .transition(all @transitionSpeed @transitionEaseType); |
| height: 4px; |
| width: 8px; |
| .border-radius(2); |
| background-color: @navBG; |
| margin: 4px 0px; |
| } |
| } |
| &:hover .burger div{ |
| background-color: @orange; |
| } |
| .closeMenu & { |
| .icon { |
| background: url(../img/minilogo.png) no-repeat 0 0; |
| } |
| width: 45px; |
| .burger{ |
| left: 0; |
| } |
| } |
| } |
| nav { |
| .nav{ |
| margin: 0; |
| li{ |
| .transition(all @transitionSpeed @transitionEaseType); |
| padding: 0; |
| font-size: 20px; |
| line-height: 23px; |
| width: @navWidth; |
| font-weight: normal; |
| font-family: helvetica; |
| .box-sizing(border-box); |
| background-color: @navBG; |
| border-bottom: 1px solid @primaryNav; |
| min-height: 55px; |
| &.active, &:hover{ |
| a{ |
| .box-shadow(none); |
| } |
| background-color: @red; |
| } |
| &:hover a.fonticon:before{ |
| color: @white; |
| } |
| &.active a.fonticon:before, |
| &:hover a.fonticon:before, |
| { |
| text-shadow: @boxShadow; |
| color: @NavIconActive; |
| } |
| a{ |
| padding: 17px 25px 12px 60px; |
| background-color: transparent; |
| color: #fff; |
| text-shadow: @textShadowOff; |
| &.closeMenu{ |
| color: transparent; |
| } |
| & span.fonticon { |
| position: relative; |
| &:before { |
| position: absolute; |
| top: -5px; |
| left: -44px; |
| font-size: 28px; |
| color: @NavIcon; |
| text-shadow: @boxShadowOff; |
| } |
| } |
| .closeMenu &{ |
| color: transparent; |
| } |
| } |
| } |
| } |
| ul#footer-nav-links{ |
| li{ |
| background-color: @primaryNav; |
| border-top: 1px solid @red; |
| border-bottom: none; |
| font-size: 12px; |
| padding: 12px; |
| min-height: 44px; |
| &.active, &:hover{ |
| background-color: @linkRed; |
| border-top: 1px solid @red; |
| a{ |
| color: white; |
| } |
| } |
| a{ |
| color: @red; |
| } |
| } |
| } |
| ul#bottom-nav-links{ |
| margin-top: 0; |
| li{ |
| min-height: 46px; |
| background-color: @bottomNav; |
| &.active{ |
| background-color:@linkRed; |
| } |
| &:hover{ |
| background-color: @navBGHover; |
| } |
| a{ |
| &.fonticon { |
| position: relative; |
| &:before { |
| left: -40px; |
| font-size: 22px; |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| |
| #dashboard { |
| max-width: 1500px; |
| .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); |
| border-left: 1px solid #999; |
| position: absolute; |
| left: @navWidth; |
| margin-left: 0; |
| background-color: @sidebarBG; |
| min-width: 600px; |
| height: 100%; |
| .closeMenu &{ |
| left: @collapsedNavWidth; |
| } |
| &.one-pane{ |
| min-width: 800px; |
| margin-top: 0; |
| } |
| } |
| |
| /*dashboard content can be in multiple templates*/ |
| |
| #dashboard-content{ |
| &.row-fluid, |
| &.window-resizeable{ |
| /*remove gutter without rewriting variable*/ |
| margin-left: 0px; |
| } |
| padding: 20px; |
| .with-sidebar &{ |
| border-left: 1px solid #999; |
| border-right: 1px solid #999; |
| width: auto; |
| .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); |
| padding: 0px; |
| bottom: 0px; |
| top: 60px; |
| position: absolute; |
| overflow-x: hidden; |
| overflow-y: auto; |
| left: @sidebarWidth; |
| right: 0; |
| .box-sizing(border-box); |
| } |
| > div.inner { |
| display: block; |
| } |
| } |
| |
| .with-sidebar.content-area { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| // .closeMenu .with-sidebar.content-area { |
| // left: 0; |
| // } |
| /*tools*/ |
| |
| .row-fluid.content-area{ |
| background-color: @background; |
| } |
| |
| |
| .fixed-header{ |
| background-color: @breadcrumbBG; |
| position: fixed; |
| top: 0; |
| right: 0; |
| left: @navWidth; |
| .closeMenu & { |
| left: @collapsedNavWidth; |
| } |
| border-bottom: 5px solid @breadcrumbBorder; |
| .box-shadow(0 4px 6px -2px #808080); |
| z-index: 100; |
| .one-pane & { |
| position: relative; |
| border: none; |
| .box-shadow(none); |
| left: auto; |
| } |
| } |
| |
| #breadcrumbs { |
| padding: 15px 20px; |
| .breadcrumb { |
| margin-bottom: 0; |
| background-color: transparent; |
| padding: 0; |
| li { |
| .divider { |
| font-size: 12px; |
| color: @breadcrumbArrow; |
| } |
| &:first-child { |
| font-size: 30px; |
| } |
| color: @breadcrumbText; |
| font-size: 18px; |
| text-shadow: none; |
| &.active{ |
| color: #333; |
| } |
| a{ |
| color: @breadcrumbText; |
| } |
| } |
| } |
| } |
| |
| |
| footer#mainFooter{ |
| position: fixed; |
| bottom: 0; |
| } |
| |
| /*SIDEBAR TEMPLATE STYLES*/ |
| .topmenu-defaults { |
| height: 70px; |
| padding: 12px 10px 0; |
| border-bottom: 1px solid @darkRed; |
| .box-sizing(border-box); |
| } |
| |
| #dashboard-upper-menu{ |
| position: fixed; |
| z-index: 11; |
| .topmenu-defaults; |
| background-color: #CBCBCB; |
| } |
| |
| #dashboard-lower-content{ |
| padding: 20px; |
| background-color: #F1F1F1; |
| } |
| |
| #dashboard-upper-content{ |
| .well{ |
| padding: 20px; |
| .border-radius(0); |
| .box-shadow(none); |
| } |
| } |
| |
| #sidenav{ |
| padding: 0; |
| header { |
| width: @sidebarWidth; |
| .box-shadow(inset -7px 0 15px -6px #000); |
| background: transparent url('../img/linen.png') repeat 0 0; |
| .topmenu-defaults; |
| } |
| nav { |
| .nav-list{ |
| .divider { |
| border: none; |
| } |
| li.active a { |
| background-color: @darkRed; |
| color: #fff; |
| } |
| a{ |
| display: block; |
| padding: 10px 5px 10px 15px; |
| color: #333333; |
| border-bottom: 1px solid #989898; |
| } |
| .nav-header{ |
| background-color: #B2B2B2; |
| padding: 5px; |
| text-shadow: none; |
| color: #333333; |
| border-bottom: 1px solid #989898; |
| } |
| |
| } |
| } |
| } |
| #sidebar-content { |
| .box-shadow(-7px 0 15px -6px #000); |
| position: absolute; |
| bottom: 0px; |
| top: 60px; |
| width: @sidebarWidth; |
| left: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| background-color: @secondarySidebar; |
| > div.inner { |
| display: block; |
| } |
| } |
| |
| |
| /*ONE PANEL TEMPLATE ONLY STYLES AKA _all_dbs */ |
| |
| .result-tools{ |
| border-bottom: 1px solid #999999; |
| padding: 5px 0; |
| border-bottom: 1px solid #999999; |
| padding: 10px 0; |
| float: left; |
| width: 100%; |
| margin-bottom: 10px; |
| } |
| |
| .navbar-form.pull-right.database-search { |
| margin: -10px 50px 12px 0; |
| padding: 11px; |
| input[type=text]{ |
| margin-top: 0px; |
| } |
| } |
| |
| #db-views-tabs-nav{ |
| position: fixed; |
| z-index: 12; |
| margin-top: 31px; |
| margin-bottom: 0; |
| /*background-color: #f4f4f4;*/ |
| padding: 0 20px; |
| } |
| |
| .db-views-smaller { |
| max-width: 500px; |
| } |
| |
| .nav-tabs > li{ |
| margin-right: 2px; |
| > a { |
| cursor: pointer; |
| color: #333; |
| border-color: #eeeeee #eeeeee #dddddd; |
| text-decoration: none; |
| background-color: #eeeeee; |
| border-radius: 0; |
| border-left: none; |
| border-right: none; |
| &.fonticon:before{ |
| margin-right: 6px; |
| font-size: 16px; |
| } |
| } |
| } |
| |
| .nav-tabs > li > a:hover, .nav-tabs > li > a:focus { |
| background-color: @linkRed; |
| border-top: 1px solid @red; |
| color: white; |
| } |
| |
| |
| .tab-content { |
| margin-top: 70px; |
| } |
| |
| .well { |
| .controls-group { |
| &:first-child, &:last-child{ |
| margin-top: 24px; |
| } |
| margin-bottom: 8px; |
| } |
| .controls-row { |
| margin-bottom: 8px; |
| } |
| } |
| |
| /*TABLE STYLES*/ |
| table.table { |
| table-layout: fixed; |
| } |
| table { |
| tr{ |
| td{ |
| word-wrap: break-word; |
| &.select { |
| width: 20px; |
| } |
| } |
| } |
| } |
| table.databases {clear: both;} |
| thead {border-bottom: 2px solid @redButton;} |
| tbody {padding-top: 10px;} |
| .table-condensed td {padding: 18px 5px;} |
| .table-striped tbody > tr:nth-child(odd) > td, |
| .table-striped tbody > tr:nth-child(odd) > th |
| { |
| background-color: #F7F7F7; |
| } |
| |
| |
| /*form elements and buttons*/ |
| .btn-group { |
| > .btn + .dropdown-toggle, |
| > .btn:first-child, |
| > .btn:last-child, |
| > .dropdown-toggle |
| { |
| .border-radius(0); |
| background-image: none; |
| text-shadow: none; |
| } |
| } |
| |
| .btn { |
| padding-top: 12px; |
| padding-bottom: 12px; |
| margin-top: 0px; |
| } |
| |
| .button{ |
| .button-style; |
| .transition(all @transitionSpeed @transitionEaseType); |
| border: none; |
| background-color: @redButton; |
| color: #fff; |
| padding: 10px; |
| .icon { |
| margin-right: 10px; |
| font-size: 20px; |
| } |
| &:hover { |
| color: #fff; |
| text-decoration: none; |
| } |
| } |
| |
| |
| .button-style{ |
| background-color: @redButton; |
| color: #fff; |
| padding: 10px 15px; |
| cursor: pointer; |
| &:before{ |
| padding-right: 5px; |
| } |
| &.outlineGray{ |
| border: 1px solid @grayLight; |
| background-color: transparent; |
| color: @grayDark; |
| &:hover{ |
| border: 1px solid @orange; |
| } |
| } |
| &.gray{ |
| background-color: #ddd; |
| color: @grayDark; |
| } |
| &.green{ |
| background-color: @green; |
| } |
| |
| &.round-btn { |
| .border-radius(@radius); |
| } |
| .icon { |
| margin-right: 10px; |
| font-size: 20px; |
| } |
| &:hover { |
| color: #fff; |
| text-decoration: none; |
| background-color: @orange; |
| } |
| a&, |
| a&:visited, |
| a&:active{ |
| color: #fff; |
| } |
| &:disabled { |
| opacity: 0.5; |
| } |
| } |
| |
| |
| |
| |
| a.button, |
| a.button:visited, |
| a.button:active { |
| .button-style; |
| } |
| |
| .select{ |
| > a{ |
| display: block; |
| padding: 5px 15px 5px 5px; |
| border: 1px solid #989898; |
| position: relative; |
| background-color: #FFFFFF; |
| color: #666666; |
| &:after { |
| content: ''; |
| width: 0; |
| height: 0; |
| border-left: 7px solid transparent; |
| border-right: 7px solid transparent; |
| border-top: 7px solid #989898; |
| position: absolute; |
| right: 9px; |
| top: 12px; |
| } |
| &:before{ |
| content: ''; |
| border-left: 1px solid #989898; |
| height: 30px; |
| position: absolute; |
| right: 30px; |
| top: 0; |
| } |
| } |
| } |
| |
| input[type=text], input[type=password], |
| .navbar-form input{ |
| .border-radius(0); |
| padding: 12px; |
| border: 1px solid #ccc; |
| height: auto; |
| font-size: 16px; |
| margin-top: 0; |
| } |
| |
| |
| |
| label.fonticon-search { |
| .box-sizing(content-box); |
| position: relative; |
| &:before { |
| .transition(all .25s linear); |
| font-size: 16px; |
| position: absolute; |
| right: -47px; |
| background-color: #E1E1E1; |
| height: 46px; |
| width: 48px; |
| border: 1px solid #cccccc; |
| padding: 14px; |
| top: -4px; |
| } |
| &:hover{ |
| color:white; |
| &:before { |
| background-color: @red; |
| } |
| } |
| } |
| |
| |
| .form-inline { |
| input[type=password], |
| input[type=text]{ |
| width: auto; |
| } |
| } |
| *, *:before, *:after { |
| .box-sizing(border-box); |
| } |
| |
| input[type="checkbox"], input[type="radio"] { |
| box-sizing: border-box; |
| padding: 0; |
| } |
| |
| input[type="file"], input[type="checkbox"], input[type="radio"], select { |
| margin: 0 0 1em 0; |
| } |
| |
| .well select { |
| margin: 0; |
| } |
| |
| form.custom .hidden-field { |
| margin-left: -99999px; |
| position: absolute; |
| visibility: hidden; |
| } |
| |
| |
| .checkbox { |
| label{ |
| display: inline-block; |
| padding-left:25px; |
| } |
| } |
| |
| label{ |
| margin-right: 15px; |
| padding-left:0; |
| display: block; |
| cursor: pointer; |
| position: relative; |
| font-size: 14px; |
| &.inline{ |
| display: inline-block; |
| } |
| } |
| .help-block{ |
| font-size: 12px; |
| } |
| |
| input[type=text].error{ |
| border: red 1px solid; |
| } |
| |
| .custom-inputs{ |
| |
| input[type=radio], |
| input[type=checkbox] { |
| display: none; |
| } |
| |
| .checkbox label:before { |
| border-radius: 3px; |
| } |
| |
| .controls > .radio:first-child, .controls > .checkbox:first-child { |
| padding-top: 15px; |
| } |
| |
| .radio.inline, .checkbox.inline { |
| display: inline-block; |
| padding-top: 15px; |
| margin-bottom: 12px; |
| vertical-align: middle; |
| } |
| |
| input[type=checkbox]:checked + label:before { |
| /*content: "\2713"; */ |
| content: "\00d7"; |
| text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); |
| font-size: 16px; |
| background-color: @red; |
| color: white; |
| text-align: center; |
| line-height: 15px; |
| } |
| |
| label:before { |
| content: ""; |
| display: inline-block; |
| |
| width: 16px; |
| height: 16px; |
| |
| margin-right: 10px; |
| position: absolute; |
| left: 0; |
| bottom: 1px; |
| background-color: #aaa; |
| box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); |
| } |
| |
| .radio label:before { |
| border-radius: 8px; |
| } |
| |
| input[type=radio]:checked + label:before { |
| content: "\2022"; |
| color: #f3f3f3; |
| font-size: 30px; |
| text-align: center; |
| line-height: 18px; |
| } |
| |
| label.drop-down{ |
| &:before{ |
| display: none; |
| } |
| } |
| } |
| |
| form.view-query-update, form.view-query-save { |
| max-width: 100%; |
| } |
| |
| |
| .form-actions { |
| background: none; |
| border: none; |
| } |
| |
| .input-append, |
| .input-prepend { |
| .add-on { |
| font-size: 18px; |
| padding: 14px 5px 30px; |
| } |
| } |
| |
| .input-append .btn:last-child, |
| .input-append .btn-group:last-child > .dropdown-toggle { |
| padding: 10px 5px 14px; |
| } |
| .input-append .btn{ |
| padding: 10px 5px 14px; |
| } |
| .row-fluid .input-append [class*="span"], |
| .input-prepend input[class*="span"]{ |
| width: auto; |
| } |
| |
| /*pretty print*/ |
| pre.prettyprint { |
| background: #E5E0DD; |
| border: none; |
| } |
| |
| .prettyprint .str, .prettyprint .lit { |
| color: @red; |
| } |
| |
| .prettyprint .pln, .prettyprint .pun, .prettyprint .typ{ |
| color: #333333; |
| } |
| |
| |
| |
| /*logs*/ |
| #log-sidebar{ |
| padding: 20px; |
| } |
| |
| |
| /*documents and databases */ |
| .view.show{ |
| color: @fontGrey; |
| } |
| |
| div.spinner { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| } |
| |
| /* Code mirror overrides */ |
| .CodeMirror-scroll { |
| .border-radius(2px); |
| border: solid 1px #ddd; |
| } |
| |
| .btn-primary a:visited { |
| color: #fff; |
| } |
| |
| #api-navbar{ |
| position: relative; |
| } |
| |
| .button.api-url-btn { |
| position: absolute; |
| right: 15px; |
| top: -50px; |
| span.icon { |
| font-size: 11px; |
| } |
| } |
| |
| .api-navbar { |
| border-top: 1px solid @red; |
| padding: 20px 20px 15px; |
| .input-append.input-prepend { |
| margin-bottom: 0px; |
| .add-on { |
| background: none; |
| padding: 14px 12px 32px 12px; |
| border: none; |
| } |
| .btn:last-child{ |
| margin-left: -1px; |
| background: none; |
| padding: 13px 12px 11px 12px; |
| &:hover{ |
| background-color: @red; |
| color: white; |
| } |
| } |
| } |
| } |
| |
| #jump-to-doc, |
| #jump-to-db |
| { |
| width: auto; |
| float:right; |
| button{ |
| padding-left: 20px; |
| padding-right: 10px; |
| } |
| } |
| |
| #map-function, #reduce-function{ |
| width: 100%; |
| font-size: 16px; |
| } |
| |
| #editor-container { |
| width: 1316px; |
| height: 688px; |
| font-size: 16px; |
| } |
| |
| #delete-database { |
| float: right; |
| } |