| /*! |
| * 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. |
| */ |
| |
| // @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; |
| |
| @import './assets/fonts/Material_Icons/material-icons.css'; |
| @import './assets/fonts/Open_Sans/open-sans.css'; |
| |
| @import '_reset.scss'; |
| @import '_general.scss'; |
| @import '_theme.scss'; |
| @import '_dialogs.scss'; |
| |
| .sans { |
| font-family: 'Open Sans', sans-serif !important; |
| } |
| |
| .mat-tab-label { |
| font-family: 'Open Sans', sans-serif !important; |
| color: #455c74; |
| } |
| |
| .install-libraries .mat-ink-bar, |
| .tabs .mat-ink-bar, |
| .tabs .mat-tab-label { |
| width: 50% !important; |
| } |
| |
| .mat-ink-bar { |
| background-color: #35afd5 !important; |
| } |
| |
| .mat-tab-labels .mat-tab-label:focus, |
| .mat-tab-labels .mat-tab-label:focus { |
| background-color: rgba(53, 175, 213, 0.11) !important; |
| color: #577289; |
| } |
| |
| .mat-tab-header-pagination.mat-tab-header-pagination-after, |
| .mat-tab-header-pagination.mat-tab-header-pagination-before { |
| display: none !important; |
| } |
| |
| .mat-drawer-container { |
| height: calc(100% - 48px); |
| } |
| |
| mat-chip.mat-chip { |
| outline: none; |
| color: #758ea8; |
| font-size: 14px; |
| padding: 8px 18px; |
| } |
| |
| mat-chip.mat-chip a { |
| display: inline-block; |
| width: 12px; |
| cursor: pointer; |
| text-align: right; |
| text-decoration: none; |
| font-size: 20px; |
| vertical-align: middle; |
| } |
| |
| mat-chip.mat-chip strong { |
| font-size: 10px; |
| font-weight: 300; |
| } |
| |
| .loader { |
| border: 3px solid #f3f3f3; |
| border-radius: 50%; |
| border-top: 3px solid #35afd5; |
| width: 18px; |
| height: 18px; |
| -webkit-animation: spin 2s linear infinite; |
| animation: spin 2s linear infinite; |
| position: relative; |
| top: 28px; |
| margin-right: 15px; |
| float: right; |
| } |
| |
| .rotate { |
| -webkit-animation: spin 2s linear infinite; |
| animation: spin 2s linear infinite; |
| } |
| |
| .status { |
| text-transform: capitalize; |
| text-align: left; |
| } |
| |
| .running, |
| .starting, |
| .installed, |
| .active, |
| .activating, |
| .connected { |
| color: #49af38; |
| } |
| |
| .stopped, |
| .stopping, |
| .deactivating, |
| .not_active, |
| .disconnecting, |
| .disconnected { |
| color: #f7b500; |
| } |
| |
| .creating, |
| .configuring, |
| .connecting, |
| .reconfiguring, |
| .installing, |
| .reuploading, |
| .highlight { |
| color: #35afd5; |
| } |
| |
| .invalid, |
| .terminated, |
| .terminating, |
| .failed, |
| .deleting, |
| .deleted, |
| .invalid_version, |
| .installation_error{ |
| color: #f1696e; |
| } |
| |
| .error { |
| color: #f1696e; |
| font-size: 12px; |
| } |
| |
| .not-allowed { |
| cursor: not-allowed !important; |
| user-select: none; |
| opacity: 0.6; |
| pointer-events: none; |
| } |
| |
| .cursor-not-allow{ |
| cursor: not-allowed !important; |
| } |
| |
| .not-active { |
| cursor: not-allowed !important; |
| opacity: .6; |
| } |
| |
| .message { |
| padding: 40px 20px; |
| text-align: center; |
| } |
| |
| .info { |
| font-size: 15px; |
| font-weight: 300; |
| color: #35afd5; |
| position: relative; |
| .buttons{ |
| position: absolute; |
| } |
| } |
| |
| .base-retreat { |
| height: 100%; |
| max-height: 100%; |
| width: 100%; |
| box-sizing: border-box; |
| padding: 12px 15px; |
| display: inline-block; |
| } |
| |
| .sub-nav { |
| box-sizing: border-box; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .sub-nav div { |
| display: flex; |
| } |
| |
| @-webkit-keyframes spin { |
| 0% { |
| -webkit-transform: rotate(0deg); |
| } |
| |
| 100% { |
| -webkit-transform: rotate(360deg); |
| } |
| } |
| |
| @keyframes spin { |
| 0% { |
| transform: rotate(0deg); |
| } |
| |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
| |
| /* TOOLTIPS */ |
| .tooltip-wrap { |
| position: relative; |
| -webkit-transform: translateZ(0); |
| transform: translateZ(0); |
| /* webkit flicker fix */ |
| -webkit-font-smoothing: antialiased; |
| /* webkit text rendering fix */ |
| } |
| |
| .tooltip-wrap .tooltip { |
| background: rgba(97, 97, 97, 0.9); |
| bottom: 100%; |
| color: #f3f3f3; |
| display: block; |
| left: -25px; |
| margin-bottom: 5px; |
| opacity: 0; |
| padding: 5px; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| border-radius: 2px; |
| font-size: 10px; |
| pointer-events: none; |
| position: absolute; |
| width: 100%; |
| -webkit-transform: translateY(10px); |
| -moz-transform: translateY(10px); |
| -ms-transform: translateY(10px); |
| -o-transform: translateY(10px); |
| transform: translateY(10px); |
| -webkit-transition: all 0.25s ease-out; |
| -moz-transition: all 0.25s ease-out; |
| -ms-transition: all 0.25s ease-out; |
| -o-transition: all 0.25s ease-out; |
| transition: all 0.25s ease-out; |
| -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); |
| -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); |
| -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); |
| -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); |
| box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); |
| } |
| |
| .tooltip-wrap:hover .tooltip { |
| opacity: 1; |
| pointer-events: auto; |
| -webkit-transform: translateY(0); |
| -moz-transform: translateY(0); |
| -ms-transform: translateY(0); |
| -o-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| /* IE can just show/hide with no transition */ |
| @media all and (-ms-high-contrast: none), |
| (-ms-high-contrast: active) { |
| .tooltip-wrap .tooltip { |
| display: none; |
| } |
| |
| .tooltip-wrap:hover .tooltip { |
| display: block; |
| } |
| } |
| |
| /* Turn off number input spinners */ |
| input[type='number']::-webkit-inner-spin-button, |
| input[type='number']::-webkit-outer-spin-button { |
| -webkit-appearance: none; |
| margin: 0; |
| } |
| |
| input[type='number'] { |
| -moz-appearance: textfield; |
| } |
| |
| /* helper classes */ |
| .text-center { |
| text-align: center !important; |
| } |
| |
| .text-right { |
| text-align: right; |
| } |
| |
| .pl-20{ |
| padding-left: 20px; |
| } |
| |
| .pr-20{ |
| padding-right: 20px; |
| } |
| |
| .m-top-10 { |
| margin-top: 10px; |
| } |
| |
| .m-top-15 { |
| margin-top: 15px; |
| } |
| |
| .m-top-20 { |
| margin-top: 20px; |
| } |
| |
| .m-top-30 { |
| margin-top: 30px; |
| } |
| |
| .m-top-40 { |
| margin-top: 40px; |
| } |
| |
| .m-bott-10 { |
| margin-bottom: 10px; |
| } |
| |
| .m-bott-20 { |
| margin-bottom: 20px; |
| } |
| |
| .m-bott-30 { |
| margin-bottom: 30px; |
| } |
| |
| .m-top-10p { |
| margin-top: 10%; |
| } |
| |
| .ml-10 { |
| margin-left: 10px; |
| } |
| |
| .mr-10 { |
| margin-right: 10px !important; |
| } |
| |
| .full-height { |
| height: 100%; |
| } |
| |
| .ani { |
| transition: all .35s ease-in-out; |
| } |
| |
| .empty-box { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| |
| .content { |
| text-align: center; |
| } |
| } |
| #scrolling{ |
| scrollbar-width: thin; |
| } |
| |
| #scrolling::-webkit-scrollbar, |
| .list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar { |
| width: 5px; |
| height: 5px; |
| } |
| |
| #scrolling::-webkit-scrollbar-track, |
| .list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-track { |
| box-shadow: none; |
| -webkit-box-shadow: none; |
| background-color: rgb(243, 243, 243); |
| } |
| |
| #scrolling::-webkit-scrollbar-thumb, |
| .list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-thumb { |
| background-color: #f6fafe; |
| background-color: rgba(0, 0, 0, 0.4); |
| } |
| |
| .warning-alert { |
| position: relative; |
| display: flex; |
| margin-top: 15px; |
| margin-bottom: 20px; |
| padding: 15px; |
| color: #fff; |
| background: #e2747d; |
| word-break: break-word; |
| |
| span { |
| position: absolute; |
| top: -12px; |
| right: -12px; |
| width: 40px; |
| height: 40px; |
| padding: 8px; |
| border-radius: 50%; |
| background: #e2747d; |
| color: #fff; |
| box-shadow: 2px 5px 16px 5px rgba(88, 60, 60, 0.6); |
| } |
| } |
| |
| .ellipsis { |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| |
| .capitalize { |
| text-transform: capitalize; |
| } |
| |
| .overlay-container { |
| #toast-container { |
| >div { |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); |
| border-radius: 2px; |
| background-color: #fff; |
| padding: 12px 20px; |
| overflow: inherit; |
| margin: 5px 0 15px; |
| font-size: 14px; |
| |
| &::before { |
| position: absolute; |
| left: -15px; |
| top: -15px; |
| font-family: "Material Icons"; |
| background-color: #fff; |
| width: 30px; |
| height: 30px; |
| padding: 7px; |
| box-sizing: border-box; |
| border-radius: 50%; |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); |
| } |
| |
| &.toast-success { |
| background-image: none; |
| color: #49af38; |
| |
| &::before { |
| content: "done"; |
| } |
| } |
| |
| &.toast-error { |
| background-image: none; |
| color: #e2747d; |
| |
| &::before { |
| content: "priority_high"; |
| } |
| } |
| |
| &.toast-info { |
| background-image: none; |
| color: #35afd5; |
| |
| &::before { |
| content: "priority_high"; |
| } |
| } |
| |
| &.toast-warning { |
| background-image: none; |
| color: #f7b500; |
| |
| &::before { |
| content: "priority_high"; |
| } |
| } |
| } |
| } |
| } |
| |
| .dialog-max-width { |
| margin: 0 auto; |
| max-width: 350px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |