| /** |
| * 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. |
| */ |
| /* You can add global styles to this file, and also import other style files */ |
| @import "app/_variables.scss"; |
| @import "app/_fonts.scss"; |
| @import "~ng-zorro-antd/layout/style/index.min.css"; /* Import styles of the component */ |
| @import "~ng-zorro-antd/menu/style/index.min.css"; /* Import styles of the component */ |
| |
| $height: 60px; |
| |
| html,body |
| { |
| height:100%; |
| background-color: $gray-dark; |
| color: $text-color-white; |
| font-family: "Roboto"; |
| } |
| |
| .header |
| { |
| height: $height; |
| } |
| |
| .body-fill |
| { |
| height: -webkit-calc(100% - 60px); |
| height: calc(100% - 60px); |
| min-height: -webkit-calc(100% - 60px); |
| min-height: calc(100% - 60px); |
| } |
| |
| .fill |
| { |
| min-height: 100%; |
| height: 100%; |
| } |
| |
| .metron-bg-inverse |
| { |
| background-color: $gray-dark; |
| } |
| |
| .btn |
| { |
| font-size: 0.9em; |
| } |
| |
| .metron-title |
| { |
| font-family: Roboto-Medium; |
| font-size: 14px; |
| font-weight: 500; |
| color: $text-color-white; |
| } |
| |
| table, .table |
| { |
| margin-top: 0.5rem; |
| |
| thead { |
| th { |
| font-family: Roboto-Regular; |
| font-size: 11px; |
| color: $text-color-white; |
| border-top: hidden !important; |
| border-bottom: 2px solid $tundora !important; |
| } |
| } |
| tbody { |
| tr |
| { |
| font-family: Roboto-Regular; |
| font-size: 12px; |
| letter-spacing: 0.1px; |
| color: $table-cell-text-color; |
| td:first-child |
| { |
| color: $text-color-white; |
| } |
| td |
| { |
| border-top: none; |
| border-bottom: 1px solid $tundora; |
| } |
| &:hover |
| { |
| background: $edit-background; |
| border-left: 1px solid $edit-background-border; |
| border-right: 1px solid $edit-background-border; |
| } |
| } |
| } |
| .active |
| { |
| background: $table-selection; |
| border-left: 1px solid $table-selection-lr-border; |
| border-right: 1px solid $table-selection-lr-border; |
| td |
| { |
| border-top: 1px solid $table-selection-tb-border !important; |
| border-bottom: 1px solid $table-selection-tb-border; |
| } |
| } |
| } |
| |
| input:-webkit-autofill { |
| -webkit-box-shadow: 0 0 0px 100px $field-background inset; |
| -webkit-text-fill-color: $form-field-text-color !important; |
| background-color: $field-background !important; |
| } |
| |
| label |
| { |
| margin-bottom: 0.17em; |
| } |
| |
| .form-group |
| { |
| margin-bottom: 0.2em; |
| } |
| |
| |
| .table |
| { |
| thead |
| { |
| th |
| { |
| padding: 0.60em; |
| } |
| } |
| tr |
| { |
| td |
| { |
| padding: 0.60em; |
| } |
| } |
| } |
| |
| .form-table { |
| background: $field-background; |
| } |
| |
| .metron-add-button |
| { |
| position: fixed; |
| right: 50px; |
| bottom: 37px; |
| background: none; |
| border:none; |
| cursor: pointer; |
| |
| &:focus |
| { |
| outline: none; |
| } |
| |
| i |
| { |
| color: #ffffff; |
| } |
| } |
| |
| .metron-slider-pane |
| { |
| background-color: $gray-light; |
| border: solid 1px $gray-border; |
| height: auto; |
| display: inline-block; |
| vertical-align:top; |
| float: right; |
| padding: 15px 20px 0px $slider-left-padding; |
| word-wrap: break-word; |
| position: relative; |
| |
| .close-button |
| { |
| font-size: 26px; |
| cursor: pointer; |
| } |
| } |
| |
| .flexbox-row-reverse |
| { |
| min-height: 100%; |
| overflow: auto; |
| display: flex; |
| flex-wrap: wrap; |
| flex-direction: row-reverse; |
| justify-content: flex-start; |
| } |
| |
| @media only screen and (min-width: 500px) { |
| .dialog1x { |
| width: $dialog-1x-width; |
| } |
| .dialog2x { |
| width: $dialog-2x-width; |
| } |
| } |
| |
| @media only screen and (min-width: 2020px) { |
| .dialog1x { |
| width: $dialog-2x-width; |
| } |
| .dialog2x { |
| width: $dialog-4x-width; |
| } |
| } |
| |
| .metron-slider-pane-edit |
| { |
| @extend .metron-slider-pane; |
| @extend .metron-edit-pane-background; |
| padding-left: 0; |
| padding-right: 0; |
| min-height: 100%; |
| } |
| |
| .metron-edit-pane-background |
| { |
| background: $edit-child-background; |
| border: 1px solid $edit-background-border; |
| } |
| |
| form |
| { |
| label |
| { |
| font-family: Roboto-Medium; |
| font-size: 12px; |
| color: $form-label; |
| } |
| |
| input |
| { |
| background: $form-input-background; |
| } |
| } |
| |
| .form-label |
| { |
| font-family: Roboto-Regular; |
| font-size: 12px; |
| color: $form-label |
| } |
| |
| .form-value |
| { |
| font-family: Roboto-Regular; |
| font-size: 14px; |
| color: $form-field-text-color; |
| |
| } |
| |
| .form-title |
| { |
| font-family: Roboto-Medium; |
| font-size: 18px; |
| color: $form-field-text-color; |
| display: inline-block; |
| } |
| |
| .form-title-subscript |
| { |
| font-family: Roboto-Medium; |
| font-size: 12px; |
| color: $title-subscript-color; |
| } |
| |
| .form-seperator |
| { |
| border: solid 1px $form-field-separator-color; |
| margin: 10px 0px 10px 0px; |
| } |
| |
| .form-seperator-edit |
| { |
| border: solid 1px $edit-background-border; |
| margin: 10px 0px 10px 0px; |
| } |
| |
| .form-edit-button |
| { |
| color: $field-button-color; |
| padding-left: 5px; |
| cursor: pointer; |
| } |
| |
| .form-enable-disable-button |
| { |
| background-color: $gray-light; |
| border-color: $form-button-border; |
| color: $field-button-color; |
| font-size: 14px; |
| min-width: 90px; |
| |
| &:hover |
| { |
| color: $field-button-color; |
| } |
| |
| &:focus |
| { |
| outline: none; |
| } |
| } |
| |
| |
| .form-control, select |
| { |
| border: solid 1px $gray-border; |
| background-color: $field-background; |
| font-family: Roboto; |
| font-size: 13px; |
| color: $form-field-text-color; |
| height: 35px; |
| |
| &[readonly] |
| { |
| background: $form-field-separator-color; |
| border: 1px solid $gray-border; |
| } |
| |
| &:focus |
| { |
| background-color: $field-background; |
| border-color: $gray-border; |
| } |
| } |
| |
| .form-control, textarea |
| { |
| border: solid 1px $gray-border; |
| background-color: $field-background; |
| font-family: Roboto; |
| font-size: 13px; |
| color: $form-field-text-color; |
| |
| &[readonly] |
| { |
| background: $form-field-separator-color; |
| border: 1px solid $gray-border; |
| } |
| |
| &:focus |
| { |
| background-color: $field-background; |
| border-color: $gray-border; |
| } |
| } |
| |
| .input-group button |
| { |
| border: solid 1px $gray-border; |
| background: $field-background; |
| border-left: none; |
| font-size: 14px; |
| |
| &:focus |
| { |
| outline: none; |
| } |
| |
| &[readonly] |
| { |
| background: $form-field-separator-color; |
| border: 1px solid $gray-border; |
| } |
| } |
| |
| @mixin keyframes($animation-name, $start) { |
| @-webkit-keyframes #{$animation-name} { |
| 0% { |
| --webkit-transform: translateX(#{$start}); |
| } |
| 100% { |
| -webkit-transform: translateX(0); |
| } |
| } |
| @-moz-keyframes #{$animation-name} { |
| 0% { |
| -moz-transform: translateX(#{$start}); |
| } |
| 100% { |
| -moz-transform: translateX(0); |
| } |
| } |
| @-ms-keyframes #{$animation-name} { |
| 0% { |
| -ms-transform: translateX(#{$start}); |
| } |
| 100% { |
| -ms-transform: translateX(0); |
| } |
| } |
| @-o-keyframes #{$animation-name} { |
| 0% { |
| -o-transform: translateX(#{$start}); |
| } |
| 100% { |
| -o-transform: translateX(0); |
| } |
| } |
| @keyframes #{$animation-name} { |
| 0% { |
| transform: translateX(#{$start}); |
| } |
| 100% { |
| transform: translateX(0); |
| } |
| } |
| } |
| |
| @mixin keyframesWidth($animation-name) { |
| @-webkit-keyframes #{$animation-name} { |
| @content |
| } |
| @-moz-keyframes #{$animation-name} { |
| @content |
| } |
| @-ms-keyframes #{$animation-name} { |
| @content |
| } |
| @-o-keyframes #{$animation-name} { |
| @content |
| } |
| @keyframes #{$animation-name} { |
| @content |
| } |
| } |
| |
| @mixin animation($name, $duration, $function) |
| { |
| -moz-animation: #{$name} #{$duration} #{$function}; |
| -webkit-animation: #{$name} #{$duration} #{$function}; |
| animation: #{$name} #{$duration} #{$function}; |
| } |
| |
| @include keyframes("keyframe-dialog-rtl", "320px") |
| |
| .load-right-to-left{ |
| @include animation("keyframe-dialog-rtl", "0.5s", "linear") |
| } |
| |
| //@include keyframes("keyframe-dialog-ltr", "320px") |
| |
| @include keyframesWidth("keyframe-dialog-width") |
| { |
| 0% { margin-right: -640px; } |
| 100% { margin-right: 0px; } |
| } |
| |
| .load-left-to-right { |
| @include animation("keyframe-dialog-width", "0.5s", "ease-in-out") |
| } |
| |
| .btn-primary |
| { |
| background-color: $form-button-border; |
| border-color: $form-button-border; |
| &:hover, &:active, &:focus |
| { |
| background-color: $form-button-border; |
| border-color: $form-button-border; |
| } |
| } |
| |
| .open > .btn-primary.dropdown-toggle |
| { |
| &:hover, &:active, &:focus |
| { |
| background-color: $form-button-border; |
| border-color: $form-button-border; |
| } |
| } |
| |
| .fontawesome-checkbox |
| { |
| display: none; |
| } |
| |
| .fontawesome-checkbox ~label |
| { |
| margin: 0px; |
| display: inline-block; |
| height: 13px; |
| line-height: 13px; |
| border: 1px solid $gray-border; |
| border-radius: 2px; |
| } |
| |
| .fontawesome-checkbox ~label:before { |
| font-family: "FontAwesome"; |
| font-style: normal; |
| font-size: 12px; |
| content: '\f0c8'; |
| color: $gray-light; |
| } |
| |
| .fontawesome-checkbox:checked ~ label:before { |
| content: '\f14a'; |
| color: $nav-active-color; |
| } |
| |
| .hexa-button |
| { |
| display: inline-block; |
| text-align: center; |
| z-index: 0; |
| line-height: 0.7em; |
| font-size: 30px; |
| height: 28px; |
| width: 49px; |
| background: $form-button-border; |
| |
| &::before, &::after |
| { |
| position: absolute; |
| content: ""; |
| left: 0px; |
| top: 0; |
| z-index: -1; |
| height: 28px; |
| width: 49px; |
| background: $form-button-border; |
| } |
| &::before |
| { |
| @include transform(rotate(60deg)); |
| } |
| &::after |
| { |
| @include transform(rotate(-60deg)); |
| } |
| } |
| |
| .warning-text |
| { |
| color: $warning-color; |
| } |
| |
| .success-text-color |
| { |
| color: $ocean-green; |
| } |
| |
| |
| .icon-container |
| { |
| width: 100px; |
| i |
| { |
| color: #33a6dd; |
| padding: 0px 2px; |
| cursor: pointer; |
| } |
| } |
| |
| .icon-blue |
| { |
| i |
| { |
| color: #33a6dd; |
| cursor: pointer; |
| } |
| } |
| |
| .dropdown-item |
| { |
| cursor: pointer; |
| color: #818a91; |
| |
| &:focus, &:hover |
| { |
| background-color: $edit-background-border ; |
| } |
| } |
| |
| a.blue-label |
| { |
| color: #33a6dd; |
| font-size: 14px; |
| text-decoration: none ; |
| } |
| |
| .readonly-view-inline-button { |
| display: inline-block; |
| } |
| |
| .readonly-view-inline-button:not(:last-child) { |
| margin-right: 2px; |
| } |
| |
| .input-placeholder { |
| font-size: 11px; |
| font-style: italic; |
| color:#999999; |
| } |
| |
| .popover |
| { |
| border: 1px solid #195d68; |
| //background-color: #0b4451; |
| background-color:#195d68; |
| } |
| |
| .popover-title |
| { |
| color: #bdbdbd; |
| background-color:#195d68; |
| border-color: #195d68; |
| border-top-left-radius: 4px; |
| border-top-right-radius: 4px; |
| } |
| |
| .popover-content { |
| background-color: $tundora; |
| padding: 9px 14px; |
| color: #bdbdbd; |
| border-bottom-left-radius: 4px; |
| border-bottom-right-radius: 4px; |
| white-space:pre-wrap; |
| } |
| |
| .metron-dialog.modal |
| { |
| .modal-content |
| { |
| background-color: $gray-light; |
| border: solid 1px $gray-border; |
| } |
| |
| .close |
| { |
| color: #BDBDBD; |
| text-shadow: 0 1px 0 $silver-color; |
| opacity: 1; |
| font-size: 28px; |
| } |
| |
| .modal-title |
| { |
| color: $silver-color; |
| font-size: 18px; |
| } |
| |
| .modal-body |
| { |
| color: $dusty-grey; |
| } |
| |
| .modal-header |
| { |
| border-bottom: none; |
| } |
| |
| .modal-footer |
| { |
| text-align: left; |
| border-top: none; |
| } |
| } |
| |
| button |
| { |
| i |
| { |
| color: $text-color-white; |
| } |
| } |
| |
| .icon-button |
| { |
| font-size: 16px; |
| cursor: pointer; |
| padding: 8px 10px; |
| border-radius: 4px; |
| border: 1px solid $gray-border; |
| color: $nav-active-text-color; |
| background: $form-field-separator-color; |
| } |
| |
| .details-pane-padding |
| { |
| padding: 0px 3px 0px 30px; |
| } |
| |
| .metron-button-bar |
| { |
| width: 100%; |
| bottom: 0; |
| position: absolute; |
| z-index: 10; |
| padding-left: 25px; |
| margin-left: ($slider-left-padding)* -1; |
| background: $edit-background; |
| border-top: solid 2px $edit-background-border; |
| border-right: solid 1px $edit-background-border; |
| border-left: solid 1px $edit-background-border; |
| max-height: $button-bar-height; |
| } |
| |
| .tooltip |
| { |
| font-family: "Roboto"; |
| } |
| |
| .card |
| { |
| overflow: auto; |
| } |
| |
| .form-control:focus |
| { |
| color: #bdbdbd; |
| } |
| |
| .ace_autocomplete.ace-monokai |
| { |
| .ace_content { |
| background: #444; |
| color: #999; |
| } |
| } |
| |
| // Ant layout overrides |
| |
| .ant-layout { |
| background: transparent; |
| min-height: 100vh; |
| } |
| |
| .ant-layout-sider-trigger { background: #3C3C3C; } |
| |
| .cdk-overlay-pane { |
| position: absolute; |
| z-index: 1000; |
| } |
| |
| .cdk-overlay-connected-position-bounding-box { |
| display: flex; |
| flex-direction: column; |
| min-height: 1px; |
| min-width: 1px; |
| position: absolute; |
| z-index: 1000; |
| } |
| |
| .cdk-overlay-container { |
| height: 100%; |
| left: 0; |
| pointer-events: none; |
| position: fixed; |
| top: 0; |
| width: 100%; |
| z-index: 1000; |
| } |
| |
| .ant-menu-dark .ant-menu-sub { |
| background: #2e2e2e; |
| } |
| |
| .ant-menu.ant-menu-dark :not(ant-menu-submenu-open) .ant-menu-item-selected, |
| .ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-item-selected { |
| background-color: rgba(255, 255, 255, .1); |
| } |
| |
| .ant-menu.ant-menu-dark .ant-menu-item-selected { |
| background-color: transparent; |
| } |
| |
| .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { |
| background-color: rgba(255, 255, 255, .1); |
| } |
| |
| .ant-menu-dark .ant-menu-inline.ant-menu-sub { |
| background: #2e2e2e; |
| box-shadow: none; |
| } |
| |
| .ant-menu-submenu-title { |
| color: rgba(255,255,255,.65); |
| } |
| |
| .ant-menu-submenu-arrow::before, |
| .ant-menu-submenu-arrow::after { |
| background: rgba(255,255,255,.65); |
| } |