| /* |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You 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. |
| */ |
| |
| $min-width: 768px; |
| |
| /* |
| * Miscellaneous CSS fixes. |
| * ------------------------ |
| */ |
| |
| html, body, div, span, applet, object, iframe, |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
| a, abbr, acronym, address, big, cite, code, |
| del, dfn, em, img, ins, kbd, q, s, samp, |
| small, strike, strong, sub, sup, tt, var, |
| b, u, i, center, |
| dl, dt, dd, ol, ul, li, |
| fieldset, form, label, legend, |
| table, caption, tbody, tfoot, thead, tr, th, td, |
| article, aside, canvas, details, figcaption, figure, |
| footer, header, hgroup, menu, nav, section, summary, |
| time, mark, audio, video { |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| body { |
| min-width: $min-width; |
| font-family: "Helvetica Neue", Helvetica, sans-serif; |
| } |
| |
| .amp { |
| font-family: 'Libre Baskerville', Helvetica, sans-serif !important; |
| font-weight: 400 !important; |
| font-style: italic; |
| font-size: 85%; |
| } |
| |
| label { |
| font-weight: 200; |
| } |
| |
| .fill { |
| min-height: 100%; |
| height: 100%; |
| } |
| |
| .clear-fix { |
| &:before, |
| &:after { |
| content: " "; |
| display: table; |
| } |
| &:after { |
| clear: both; |
| } |
| } |
| |
| // Fix margins on fluid row. |
| .row-fluid [class*="span"] { |
| margin-left: 0; |
| } |
| |
| // Remove blue outline in Chrome when pressing buttons and links. |
| .modal-open .modal, .btn:focus, a:focus { |
| outline: none !important; |
| } |
| |
| // Make all FA icons in dropdown menus of slack color. |
| ul.dropdown-menu > li > a > i.fa { |
| color: $color-slack; |
| } |
| |
| @mixin color-badge($fg, $bg) { |
| color: $fg; |
| background-color: lighten($bg, 35%); |
| border: 1px solid $bg; |
| letter-spacing: 0.03em; |
| padding: 4px 6px; |
| font-weight: 400; |
| border-radius: 2px; |
| } |
| |
| .badge-turquoise { @include color-badge(#fff, $color-turquoise); } |
| .badge-emerald { @include color-badge(#fff, $color-emerald); } |
| .badge-amethyst { @include color-badge($color-slack, $color-amethyst); } |
| .badge-asphalt { @include color-badge(#fff, $color-asphalt); } |
| .badge-sea { @include color-badge(#fff, $color-sea); } |
| .badge-nephritis { @include color-badge(#fff, $color-nephritis); } |
| .badge-belize { @include color-badge(#fff, $color-belize); } |
| .badge-wisteria { @include color-badge(#fff, $color-wisteria); } |
| .badge-midnight { @include color-badge(#fff, $color-midnight); } |
| .badge-sunflower { @include color-badge($color-slack, $color-sunflower); } |
| .badge-orange { @include color-badge(#fff, $color-orange); } |
| .badge-carrot { @include color-badge(#fff, $color-carrot); } |
| .badge-pumpkin { @include color-badge(#fff, $color-pumpkin); } |
| .badge-alizarin { @include color-badge(#fff, $color-alizarin); } |
| .badge-pomegranate { @include color-badge(#fff, $color-pomegranate); } |
| .badge-concrete { @include color-badge(#fff, $color-concrete); } |
| .badge-asbestos { @include color-badge(#fff, $color-asbestos); } |
| |
| .badge-river { |
| @include color-badge($color-grey-blue, $color-river); |
| |
| // Custom overrides for better visibility. |
| border-color: lighten($color-river, 25%); |
| } |
| |
| // BS3 compatible. |
| .badge-red { @include color-badge($background-color, $brand-danger); } |
| .badge-blue { @include color-badge($background-color, $brand-primary); } |
| .badge-green { @include color-badge($background-color, $brand-success); } |
| .badge-yellow { @include color-badge($foreground-color, $color-sunflower); } |
| |
| // Border-less table. |
| .table-no-border > thead > tr> th, |
| .table-no-border > tbody > tr> th, |
| .table-no-border > tfoot > tr> th, |
| .table-no-border > thead > tr> td, |
| .table-no-border > tbody > tr> td, |
| .table-no-border > tfoot > tr> td { |
| border-top: none; |
| } |
| |
| .table-width-auto { |
| width: auto !important; |
| } |
| |
| /* |
| * Cross-browser support shortcuts. |
| */ |
| @mixin x-browser-filter($val) { |
| -webkit-filter: $val; |
| -moz-filter: $val; |
| -o-filter: $val; |
| -ms-filter: $val; |
| filter: $val; |
| } |
| |
| @mixin x-browser-border-radius($val) { |
| -webkit-border-radius: $val; |
| -moz-border-radius: $val; |
| border-radius: $val; |
| } |
| |
| @mixin x-browser-transform($val) { |
| -webkit-transform: rotate($val); |
| -ms-transform: rotate($val); |
| -o-transform: rotate($val); |
| -moz-transform: rotate($val); |
| transform: rotate($val); |
| } |
| |
| @mixin x-browser-animation($val) { |
| -webkit-animation: $val; |
| -moz-animation: $val; |
| -o-animation: $val; |
| animation: $val; |
| } |
| |
| @mixin x-browser-background-clip($val) { |
| -webkit-background-clip: $val; |
| -moz-background-clip: $val; |
| -o-background-clip: $val; |
| -ms-background-clip: $val; |
| background-clip: $val; |
| } |
| |
| @mixin x-browser-fill-color($val) { |
| -webkit-text-fill-color: $val; |
| -moz-text-fill-color: $val; |
| -o-text-fill-color: $val; |
| -ms-text-fill-color: $val; |
| text-fill-color: $val; |
| } |
| |
| @mixin x-browser-box-shadow($val) { |
| -webkit-box-shadow: $val; |
| -moz-box-shadow: $val; |
| -o-box-shadow: $val; |
| box-shadow: $val; |
| } |
| |
| .btn-group.open .dropdown-toggle, |
| .btn-group.open .dropdown-toggle:hover, |
| .btn-group.open .dropdown-toggle:visited, |
| .btn-group.open .dropdown-toggle:active { |
| @include x-browser-box-shadow(none); |
| } |
| |
| .btn, |
| .btn:active, |
| .btn.active, |
| .btn:hover { |
| @include x-browser-box-shadow(none); |
| } |
| |
| .btn-default, |
| .btn-default:active, |
| .btn-default.active, |
| .btn-default:hover { |
| @include x-browser-box-shadow(none); |
| } |
| |
| .btn-sm, .btn { |
| border-radius: 2px; |
| } |
| |
| .btn-link:hover, .btn-link:focus, a:hover, a:focus { |
| text-decoration: inherit; |
| } |
| |
| $bq-info-bg-color: #f4f8fa; |
| $bq-info-border-color: #5bc0de; |
| |
| $bq-warn-bg-color: #faf8f0; |
| $bq-warn-border-color: $color-sunflower; |
| |
| $bq-error-bg-color: #eed3d7; |
| $bq-error-border-color: #fdf7f7; |
| |
| $bq-success-bg-color: #F5FDF2; |
| $bq-success-border-color: $brand-success; |
| |
| .bq { |
| &.info { |
| color: $color-grey-blue; |
| background-color: $bq-info-bg-color; |
| border-color: darken($bq-info-bg-color, 5%); |
| border-left-color: $bq-info-border-color; |
| } |
| |
| &.warn { |
| color: $color-slack; |
| background-color: $bq-warn-bg-color; |
| border-color: darken($bq-warn-bg-color, 5%); |
| border-left-color: $bq-warn-border-color; |
| } |
| |
| &.error { |
| background-color: $bq-error-bg-color; |
| border-color: darken($bq-error-bg-color, 5%); |
| border-left-color: $bq-error-border-color; |
| } |
| |
| &.success { |
| background-color: $bq-success-bg-color; |
| border-color: darken($bq-success-bg-color, 5%); |
| border-left-color: $bq-success-border-color; |
| } |
| |
| margin: 20px 0; |
| padding: 15px 20px; |
| border-left: 3px solid #eee; |
| border-radius: 1px 6px 6px 1px; |
| |
| & > p, |
| & > ul { |
| margin: 0; |
| } |
| |
| & > p:not(:nth-child(1)) { |
| margin-top: 10px; |
| } |
| |
| & > p { |
| letter-spacing: 0.05em; |
| } |
| |
| i.fas.fa-lightbulb { |
| padding-right: 5px; |
| color: $bq-success-border-color; |
| } |
| } |
| |
| .gradient-table { |
| margin-top: 0; |
| border-collapse: collapse; |
| overflow: auto; |
| margin-bottom: 1rem; |
| |
| & > thead { |
| background: linear-gradient(141deg, #6980fa 0%, #2cb5e8 51%, #4298fc 75%) fixed; |
| color: #fff; |
| } |
| |
| & > thead > tr > th { |
| text-align: left; |
| border-bottom: 1px solid #eee; |
| } |
| |
| & > thead > tr > th, |
| & > tbody > tr > th, |
| & > tfoot > tr > th { |
| padding: 8px; |
| font-size: 15px; |
| font-weight: 500; |
| color: #fff; |
| } |
| |
| & > thead > tr > td, |
| & > tbody > tr > td, |
| & > tfoot > tr > td { |
| padding: 8px; |
| letter-spacing: 0.02em; |
| font-weight: 400; |
| border-bottom: 1px solid #eee; |
| vertical-align: top; |
| } |
| |
| & > tbody > tr { |
| &:hover { |
| background-color: #fafafa; |
| } |
| |
| td:last-child { |
| border-right: 1px solid #eee; |
| } |
| |
| td:first-child { |
| border-left: 1px solid #eee; |
| } |
| } |
| } |
| |
| .recover-bottom-margin { |
| margin-bottom: 16px; |
| } |
| |
| i.top-link { |
| font-size: 60%; |
| color: $color-turquoise; |
| } |
| |
| .max-width { |
| width: 100%; |
| } |
| a[target=javadoc]:not(.not-code) { |
| font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| word-break: keep-all; |
| white-space: nowrap !important; |
| } |
| |
| pre.console { |
| border: 1px solid #dedede; |
| border-radius: 6px; |
| padding: 25px 30px 0 30px; |
| } |
| |
| code { |
| font-size: 100%; |
| white-space: nowrap !important; |
| color: #C0392B; |
| |
| i { |
| font-style: normal; |
| border: 1px solid $color-sunflower; |
| padding: 0 2px; |
| color: #000; |
| background: $color-sunflower; |
| } |
| |
| b { |
| color: $color-wisteria; |
| } |
| } |
| |
| .side-nav { |
| a.active { |
| border-right: 3px solid $color-orange !important; |
| color: #369 !important; |
| } |
| } |
| |
| .complexity-one-star { |
| i { |
| color: $color-nephritis; |
| } |
| } |
| .complexity-two-star { |
| i { |
| color: $color-river; |
| } |
| } |
| |
| .complexity-three-star { |
| i { |
| color: #000; |
| } |
| } |
| |
| .img-fluid { |
| max-width: 800px !important; |
| width: 100% !important; |
| border-radius: 6px; |
| } |
| |
| .non-fluid-img { |
| border-radius: 6px; |
| } |
| |
| .keyboard { |
| padding: 1px 8px; |
| background-color: #2c2c29; |
| color: #efefef; |
| border-radius: 4px; |
| display: inline-block; |
| font-family: monospace; |
| font-weight: 600; |
| } |
| |
| .img-fluid-no-border { |
| max-width: 900px !important; |
| border-radius: 6px; |
| padding: 0 !important; |
| } |
| |
| .latest { |
| font-size: 11px; |
| background-color: $color-pumpkin; |
| color: #fff; |
| padding: 4px 6px; |
| border-radius: 4px; |
| font-weight: 600; |
| margin-left: 5px; |
| } |
| i.fa.output { |
| margin-left: 5px; |
| font-size: 80%; |
| } |
| |
| .card { |
| border-color: $color-blue3; |
| |
| .card-header { |
| background-color: #f4f7ff; |
| border-bottom-color: $color-blue3; |
| |
| button.btn { |
| padding-left: 0; |
| } |
| } |
| } |
| |
| .nav-tabs { |
| border-bottom-color: $color-blue3 !important; |
| |
| .nav-link.active { |
| border-color: $color-blue3 $color-blue3 #fff !important; |
| } |
| .nav-link { |
| border-color: #fff #fff $color-blue3 !important; |
| } |
| } |
| |
| code.script { |
| border: 1px solid $color-blue3; |
| padding: 1px 6px 2px 6px; |
| border-radius: 4px; |
| color: #fb51b1; |
| background-color: #f3f9ff; |
| } |
