metron-interface/metron-config/src/styles.scss

/**
 * 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);
}