vid-app-common/src/main/webapp/app/vid/styles/common.css

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * VID
   4  * ================================================================================
   5  * Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 @font-face {
  22     font-family: OpenSans-Bold;
  23     src: url("fonts/OpenSans/OpenSans-Bold.ttf") format('truetype');
  24 }
  25
  26 @font-face {
  27     font-family: OpenSans-BoldItlaic;
  28     src: url("fonts/OpenSans/OpenSans-BoldItalic.ttf") format('truetype');
  29 }
  30
  31 @font-face {
  32     font-family: OpenSans-ExtraBold;
  33     src: url("fonts/OpenSans/OpenSans-ExtraBold.ttf") format('truetype');
  34 }
  35
  36 @font-face {
  37     font-family: OpenSans-ExtraBoldItalic;
  38     src: url("fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf") format('truetype');
  39 }
  40
  41 @font-face {
  42     font-family: OpenSans-Italic;
  43     src: url("fonts/OpenSans/OpenSans-Italic.ttf") format('truetype');
  44 }
  45
  46 @font-face {
  47     font-family: OpenSans-Light;
  48     src: url("fonts/OpenSans/OpenSans-Light.ttf") format('truetype');
  49 }
  50
  51 @font-face {
  52     font-family: OpenSans-LightItalic;
  53     src: url("fonts/OpenSans/OpenSans-LightItalic.ttf") format('truetype');
  54 }
  55
  56 @font-face {
  57     font-family: OpenSans-Regular;
  58     src: url("fonts/OpenSans/OpenSans-Regular.ttf") format('truetype');
  59 }
  60
  61 @font-face {
  62     font-family: OpenSans-Semibold;
  63     src: url("fonts/OpenSans/OpenSans-Semibold.ttf") format('truetype');
  64 }
  65
  66 @font-face {
  67     font-family: OpenSans-SemiboldItalic;
  68     src: url("fonts/OpenSans/OpenSans-SemiboldItalic.ttf") format('truetype');
  69 }
  70
  71 @font-face {
  72     font-family: 'icomoon';
  73     src:  url('fonts/icomoon.eot?4cilop');
  74     src:  url('fonts/icomoon.eot?4cilop#iefix') format('embedded-opentype'),
  75     url('fonts/icomoon.ttf?4cilop') format('truetype'),
  76     url('fonts/icomoon.woff?4cilop') format('woff'),
  77     url('fonts/icomoon.svg?4cilop#icomoon') format('svg');
  78     font-weight: normal;
  79     font-style: normal;
  80 }
  81
  82 html, body {
  83     font-size:14px;
  84 }
  85
  86 html {
  87     height: 100%;
  88 }
  89
  90 body {
  91     display: flex;
  92     flex-direction: column;
  93     min-height: 100%;
  94 }
  95
  96 .applicationWindow {
  97     height: 100%;
  98     display: flex;
  99     flex-direction: column;
 100     flex: 1;
 101 }
 102
 103 #mContent {
 104     display: flex;
 105     flex-direction: column;
 106     flex: 1;
 107 }
 108 .content.modal-open .body-content-jsp{
 109     margin-left: 3%;
 110     margin-right: 3%;
 111     margin-top: 0%;
 112 }
 113 .content .body-content-jsp > div.ng-scope > div.overlay{
 114     display: none;
 115 }
 116 .content.modal-open .body-content-jsp .service-models-page .overlay{
 117     display: block !important;
 118     position: fixed;
 119     top: 0;
 120     right: 0;
 121     bottom: 0;
 122     left: 0;
 123     z-index: 3004;
 124     background-color: #000;
 125     opacity: 0.5;
 126 }
 127
 128 .content.modal-open .body-content-jsp  .service-models-page  .service-model-content{
 129     z-index: 3005;
 130     flex: none;
 131     width: 100%;
 132     padding: 10px;
 133 }
 134 .content.modal-open{
 135     margin: 0 !important;
 136 }
 137
 138 .body-content-jsp {
 139     flex: 1;
 140     margin-left: 14%;
 141     margin-right: 2%;
 142 }
 143
 144 .button--inactive {
 145     border: none !important;
 146 }
 147
 148 .modal-body [class^="icon-"],.modal-body [class*=" icon-"] {
 149     /* use !important to prevent issues with browser extensions that change fonts */
 150     font-family: 'icomoon' !important;
 151     speak: none;
 152     font-style: normal;
 153     font-weight: normal;
 154     font-variant: normal;
 155     text-transform: none;
 156     line-height: 1;
 157
 158     /* Better Font Rendering =========== */
 159     -webkit-font-smoothing: antialiased;
 160     -moz-osx-font-smoothing: grayscale;
 161 }
 162
 163 .icon-browse:before {
 164     content: "\e90e";
 165     color: #5A5A5A;
 166     font-size: 4px;
 167     cursor: pointer;
 168     width: 37px;
 169     height: 37px;
 170     line-height: 37px;
 171     text-align: center;
 172     background: #F2F2F2;
 173     border: 1px solid #D2D2D2;
 174     display: inline-block;
 175     vertical-align: top;
 176     border-radius: 2px;
 177     border-bottom-left-radius: 0;
 178     border-top-left-radius: 0;
 179 }
 180
 181 .icon-browse:hover::before {
 182     background-color: #E6F6FB;
 183     color: #009FDB;
 184 }
 185
 186 .icon-browse:active::before {
 187     background-color: #E6F6FB;
 188     color: #009FDB;
 189 }
 190
 191 input:focus:invalid {
 192     border-color: Tomato;
 193     box-shadow: none;
 194 }
 195
 196 iframe {
 197     top: 0;
 198     left: 0;
 199     width: 100%;
 200     height: 100%;
 201     border:0;
 202 }
 203
 204 iframe.popup{
 205     width: 1103px;
 206     height: 691px;
 207 }
 208
 209 /*todo: remove. this a temporary fix for the sub-interface popup not showing as a page beside the sidebar. currently showing it in full screen.*/
 210 iframe.iframeDialog {
 211     width: 100vw;
 212     height: 100vh;
 213     position: fixed;
 214 }
 215
 216 .service-models-page {
 217     flex: 1;
 218     display: flex;
 219     min-height: 700px;
 220 }
 221
 222 .service-model-content {
 223     flex: 1;
 224 }
 225
 226 .service-model-content .popupContents {
 227     padding: 0 !important;
 228 }