| // 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. |
| |
| @import "variables.less"; |
| @import "bootstrap/bootstrap.less"; |
| @import "bootstrap/mixins.less"; |
| @import "layouts.less"; |
| @import "prettyprint.less"; |
| @import "icons.less"; |
| @import "code-editors.less"; |
| @import "templates.less"; |
| @import "formstyles.less"; |
| @import "pagination.less"; |
| @import "trays.less"; |
| @import "mixins.less"; |
| @import "animations.less"; |
| @import "react-animations.less"; |
| @import "notification-center.less"; |
| |
| /** |
| * HTML-wide overrides |
| **/ |
| |
| *, *:before, *:after { |
| .box-sizing(border-box); |
| } |
| |
| html { |
| height: 100%; |
| } |
| |
| body { |
| font-size: 16px; |
| line-height:1.3; |
| padding-bottom: 0px; |
| color: #333; |
| height: 100%; |
| background-color: @sidebarBG; |
| } |
| |
| h2,h3,h4 {font-weight: 600;} |
| |
| a { |
| .transition(all .25s linear); |
| } |
| |
| a, |
| a:visited, |
| a:active { |
| color: @linkColor; |
| } |
| |
| a:hover { |
| color: @linkColorHover; |
| } |
| |
| /* bootstrap overrides */ |
| .page-header { |
| border-bottom: 1px solid #E3E3E3; |
| margin-bottom: 10px; |
| h3 { |
| text-transform: capitalize; |
| margin-bottom: 0; |
| } |
| } |
| |
| .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; |
| &:hover, |
| &:focus { |
| background-color: @linkColor; |
| border-top: 1px solid @linkColor; |
| color: white; |
| } |
| } |
| } |
| |
| .well { |
| select { |
| margin: 0; |
| } |
| .controls-group { |
| &:first-child, |
| &:last-child { |
| margin-top: 24px; |
| } |
| margin-bottom: 8px; |
| } |
| .controls-row { |
| margin-bottom: 8px; |
| } |
| .row-fluid { |
| margin: 0; |
| } |
| .row-fluid .row-fluid:last-child .well-item { |
| border: none; |
| } |
| .well-item { |
| color: #666; |
| font-size: 12px; |
| border-bottom: 1px solid #e5e5e5; |
| padding: 8px 4px; |
| strong { |
| font-size: 16px; |
| } |
| } |
| } |
| |
| /*TABLE STYLES*/ |
| table.table { |
| table-layout: fixed; |
| } |
| table tr td{ |
| word-wrap: break-word; |
| &.select { |
| width: 20px; |
| } |
| } |
| thead { |
| border-bottom: 2px solid @brandPrimary; |
| } |
| 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; |
| } |
| |
| /** |
| * Fauxton-specific Bootstrap additions |
| **/ |
| table.databases { |
| clear: both; |
| } |
| .nav-tabs > li > a .fonticon:before { |
| margin-right: 6px; |
| font-size: 16px; |
| } |
| |
| // customize the twitter bootstrap alert |
| .global-notification { |
| &.alert { |
| padding-left: 20px; |
| padding-top: 20px; |
| min-height: @collapsedNavWidth; |
| margin-bottom: auto; |
| text-shadow: none; |
| .border-radius(0); |
| border-bottom: 1px solid #3a2c2b; |
| box-shadow: 0px 4px 0 0 rgba(0, 0, 0, 0.4); |
| a, a:hover { |
| color: #cecece; |
| text-decoration: underline; |
| } |
| a.js-dismiss { |
| color: rgba(255, 255, 255, 1); |
| } |
| a.js-dismiss :hover { |
| color: rgba(255, 255, 255, 0.4); |
| } |
| } |
| &.alert-success { |
| background-color: #448c11; |
| color: #CBDFBD; |
| } |
| &.alert-success h4 { |
| color: #CBDFBD; |
| } |
| &.alert-danger, |
| &.alert-error { |
| background-color: #222; |
| color: #ff0c35; |
| } |
| &.alert-danger h4, |
| &.alert-error h4 { |
| color: #ff0c35; |
| } |
| &.alert-info { |
| background-color: #329898; |
| color: #fff; |
| } |
| &.alert-info h4 { |
| color: #fff; |
| } |
| } |
| |
| |
| .notification-icon { |
| padding-right: 8px; |
| } |
| |
| #dashboard-upper-content{ |
| .tab-content { |
| padding-top: 70px; |
| } |
| |
| .well{ |
| padding: 20px; |
| .border-radius(0); |
| .box-shadow(none); |
| } |
| } |
| |
| #dashboard-content .scrollable { |
| height: auto; |
| overflow-y: auto; |
| overflow-x: hidden; |
| width: 100%; |
| position: absolute; |
| padding: 0; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| } |
| |
| /*ONE PANEL TEMPLATE ONLY STYLES AKA _all_dbs */ |
| |
| .result-tools{ |
| border-bottom: 1px solid #999999; |
| padding: 10px 0; |
| float: left; |
| width: 100%; |
| margin-bottom: 10px; |
| } |
| |
| #db-views-tabs-nav{ |
| position: fixed; |
| z-index: 12; |
| margin-top: 19px; |
| margin-bottom: 0; |
| /*background-color: #f4f4f4;*/ |
| padding: 0 20px; |
| } |
| |
| .db-views-smaller { |
| max-width: 500px; |
| } |
| |
| /** table row selector thing **/ |
| .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; |
| } |
| } |
| } |
| |
| /*documents and databases */ |
| |
| .view.show{ |
| color: @fontGrey; |
| } |
| |
| div.spinner { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| } |
| |
| |
| // legacy - remove when soft migration to header toggles is complete |
| // missing: add_config_option |
| .header-icon { |
| font-size: 20px; |
| &:before { |
| float: left; |
| margin: 10px 6px 0px 0px; |
| } |
| } |
| |
| #header-search { |
| height: @collapsedNavWidth; |
| span { |
| position: relative; |
| } |
| } |
| |
| .api-bar-tray { |
| padding: 16px 20px; |
| .input-append.input-prepend { |
| margin-bottom: 0px; |
| |
| .input-xxlarge { |
| .border-radius(5px 0 0 5px); |
| } |
| .btn { |
| background-color: @navBG; |
| color: #fff; |
| margin-left: -1px; |
| padding: 10px 10px 9px; |
| border: none; |
| line-height: 1.5em; |
| .border-radius(5px); |
| &:hover{ |
| background-color: #cbcbcb; |
| } |
| } |
| |
| .copy-button { |
| .border-radius(0 5px 5px 0); |
| } |
| |
| .zeroclipboard-is-hover { |
| background-color: #cbcbcb; |
| } |
| |
| .icon-question-sign { |
| margin-left: 3px; |
| } |
| } |
| } |
| |
| .api-bar-tray:before { |
| right: 95px; |
| } |
| |
| .js-filter-form { |
| .help-block { |
| padding: 5px 0 5px 0; |
| } |
| .icon { |
| font-size: 16px; |
| } |
| } |
| |
| .js-filter { |
| ul { |
| margin-left: 0; |
| } |
| li { |
| list-style-type: none; |
| } |
| } |
| |
| //---header--// |
| #dashboard > header { |
| background-color: @breadcrumbBG; |
| height: 64px; |
| |
| /* the position absolute is necessary to allow the 6px box shadow overlap the panels below. The parent <header> |
| ensures the flexbox height is respected */ |
| &>div { |
| height: 65px; |
| .bottom-shadow-border(); |
| position: absolute; |
| width: 100%; |
| z-index: 2; /* needed because ace's selected row has a z-index of 1 & can't be overridden */ |
| } |
| } |
| |
| body #dashboard .two-panel-header { |
| #breadcrumbs { |
| .flex(0 0 331px); |
| } |
| } |
| |
| .with-sidebar { |
| #breadcrumbs { |
| border-right: 1px solid @grayLight; |
| width: @sidebarWidth + 1px; |
| .active { |
| width: 244px; |
| } |
| } |
| } |
| |
| |
| body #dashboard .flex-body#breadcrumbs { |
| overflow: hidden; |
| } |
| |
| #breadcrumbs { |
| height: 64px; |
| |
| /* these styles are for the new header*/ |
| .header-left{ |
| > div{ |
| display:inline-block; |
| } |
| } |
| |
| .breadcrumb-back-link { |
| border-right: 1px solid #ccc; |
| a { |
| font-size: 20px; |
| margin-top: 1px; |
| } |
| } |
| |
| .breadcrumb { |
| margin-bottom: 0; |
| background-color: transparent; |
| padding: 0; |
| |
| li { |
| padding: 22px 10px; |
| &:first-child { |
| font-size: 24px; |
| .with-sidebar &, |
| .two-pane & { |
| float: left; |
| } |
| a { |
| float: left; |
| } |
| } |
| color: @breadcrumbText; |
| font-size: 24px; |
| text-shadow: none; |
| &.active{ |
| color: #333; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| &.divider { |
| font-size: 14px; |
| color: #ccc; |
| padding: 20px 0px; |
| width: 10px; |
| } |
| a{ |
| text-decoration: none; |
| color: @breadcrumbText; |
| } |
| } |
| .fonticon-right-open { |
| position: absolute; |
| |
| &.divider { |
| padding: 23px 0; |
| } |
| +li { |
| text-overflow: inherit; |
| overflow: auto; |
| width: auto; |
| margin-left: 14px; |
| } |
| } |
| } |
| } |
| |
| .header-left{ |
| position: relative; |
| #header-dropdown-menu { |
| position: absolute; |
| top: 0; |
| .dropdown-toggle { |
| color: #666666; |
| } |
| a { |
| padding: 10px; |
| text-decoration: none; |
| &:before { |
| font-size: 20px; |
| margin-top: 6px; |
| } |
| } |
| .dropdown { |
| height: @collapsedNavWidth; |
| border-left: 1px solid #ccc; |
| padding: 18px 0px; |
| } |
| .dropdown-menu { |
| left: -115px; |
| top: 48px; |
| } |
| } |
| } |
| |
| .header-right { |
| .well { |
| padding: 0; |
| margin: 0; |
| } |
| .searchbox-container { |
| padding: 12px; |
| input[type="text"] { |
| .border-radius(5px); |
| font-size: 13px; |
| padding: 8px 35px 8px 10px; |
| width: 200px; |
| } |
| .btn-primary { |
| background: none repeat scroll 0% 0% transparent; |
| border: none; |
| position: absolute; |
| right: 12px; |
| top: 0; |
| height: 50px; |
| z-index: 2; |
| color: #999; |
| .icon-search { |
| position: absolute; |
| top: 11px; |
| } |
| } |
| form { |
| margin: 0; |
| } |
| } |
| } |
| |
| //----footer--/// |
| footer.pagination-footer { |
| background-color: #fff; |
| border-top: 1px solid #ccc; |
| height: 50px; |
| overflow: hidden; |
| |
| .pagination { |
| .box-shadow(none); |
| margin: 0; |
| height: 50px; |
| border-left: 1px solid #ccc; |
| li { |
| display: inline-block; |
| a { |
| padding: 15px 10px 15px 15px; |
| border: none; |
| } |
| } |
| } |
| .index-indicator { |
| float: left; |
| p { |
| margin: 20px; |
| font-size: 14px; |
| } |
| } |
| #documents-pagination { |
| float: right; |
| } |
| #per-page { |
| float: right; |
| top: 2px; |
| #select-per-page { |
| margin-top: 10px; |
| } |
| } |
| } |
| |
| #right-content { |
| footer.pagination-footer { |
| bottom: @collapsedNavWidth; |
| } |
| } |
| |
| #primary-nav-right-shadow { |
| position: absolute; |
| top: 0px; |
| right: 0px; |
| bottom: 0px; |
| background-color: rgba(0, 0, 0, 0.1); |
| width: 6px; |
| z-index: 6; |
| } |
| |
| |
| // left navigationbar is opened |
| @media (max-width: 780px) { |
| .closeMenu { |
| .one-pane { |
| .searchbox-wrapper { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| @media (max-width: 1050px) { |
| .closeMenu { |
| .with-sidebar { |
| .searchbox-wrapper { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| // left navigationbar is closed |
| @media (max-width: 925px) { |
| body:not(.closeMenu) { |
| .one-pane { |
| .searchbox-wrapper { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| @media (max-width: 1225px) { |
| body:not(.closeMenu) { |
| .with-sidebar { |
| .searchbox-wrapper { |
| display: none; |
| } |
| } |
| } |
| } |