/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification for details on configuring this project to bundle and minify static web assets. */ /* Default branding variables for the application. These values act as fallbacks and may be overridden by: - appsettings.json (applied as inline style on ) - custom.css (customer overrides, highest priority) -------------------------------------------------- */ :root { --primary-color: #e8e8e8; /*#e8e8e8 #004488*/ } /* Set a dark blue value as fall back color for hyperlinks -------------------------------------------------- */ a { color: #0366d6; } /* Test styles -------------------------------------------------- */ .test-show-borders-blue { border: 1px dashed blue; } .test-show-borders-orange { border: 1px dashed orange; } /* Impressum and Privacy -------------------------------------------------- */ #id-container-main.container .legal-container { display: block; width: 100%; max-width: none; margin: 0; padding: 0; overflow-y: auto; /*Show Scrollbar (at most-right position)*/ } #privacy, #impressum { /*Compare to class .main-pane-formcontents, it's a flex-item, style height will not work approriately*/ display: block; width: 100%; /*max-width: none;*/ /*height: 100%;*/ /*overflow: auto;*/ color: #000000; margin: 2rem 4rem; /*margin: 0*/ } #privacy h1, #impressum h1 { color: #308200; font-size: 2rem; font-weight: 300; letter-spacing: 1px; margin-top: 1.0rem; margin-bottom: 1.7rem; text-align: center; } #privacy h2, #impressum h2 { color: #719430; font-size: 1.0rem; } #privacy p, #impressum p { color: #666666; } #emh-foto { } #emh-foto img { width: 100%; height: 100%; object-fit: cover; } /* Animation for text in image emh-foto -------------------------------------------------- */ .animtext-emh-foto-container-1 { position: relative; top: -100%; left: 0; width: 100%; height: 100%; /*border: 8px solid blue;*/ } .animtext-emh-foto-container-2 { position: relative; top: -200%; left: 0; width: 100%; height: 100%; /*border: 4px solid red;*/ } .animtext-test-abs { position: absolute; left: 10%; top: 10%; height: 40%; width: 40%; /*border: 2px solid yellow;*/ } .animtext-emh-foto-1 { position: absolute; top: 30%; right: calc(3% + 20px); box-sizing: content-box; padding: 5px 25px 5px 10px; background-color: rgba(100, 100, 100, 0.6); color: white; animation-name: emh-foto-1; animation-duration: 500ms; animation-timing-function: cubic-bezier(.02,1.09,.57,.99); animation-delay: 50ms; animation-fill-mode: backwards; text-align: left; font-size: 1.8em; font-weight: 600; white-space: nowrap; /*width: 560px;*/ } .animtext-emh-foto-2 { position: absolute; top: calc(30% + 1.8em + 34px); right: calc(3% + 20px); box-sizing: content-box; padding: 5px 10px 5px 10px; background-color: rgba(100, 100, 100, 0.6); color: white; animation-name: emh-foto-2; animation-duration: 500ms; animation-timing-function: cubic-bezier(.02,1.09,.57,.99); animation-delay: 50ms; animation-fill-mode: backwards; text-align: left; font-size: 1.0em; font-weight: 400; white-space: nowrap; /*width: 270px;*/ /*width: 560px;*/ } .animtext-emh-foto-1::selection, .animtext-emh-foto-2::selection { background-color: rgba(110, 150, 50, 0.6) } @media (max-width: 576px) { .animtext-emh-foto-1 { top: 20%; font-size: 1.4em; font-weight: 400; white-space: pre-wrap; } .animtext-emh-foto-2 { top: calc(20% + 2*1.4em + 34px); white-space: pre-wrap; font-size: 1.0em; font-weight: 200; background-color: rgba(100, 100, 100, 0.5); } } @keyframes emh-foto-1 { /*moving from left*/ from { background-color: rgba(100, 100, 100, 0.6); right: 140%; } to { background-color: rgba(100, 100, 100, 0.6); right: calc(3% + 20px); } } @keyframes emh-foto-2 { /*moving from right*/ from { background-color: rgba(100, 100, 100, 0.6); right: -40%; } to { background-color: rgba(100, 100, 100, 0.6); right: calc(3% + 20px); } } /* Scrollbar styles (e.g. https://orangeable.com/css/scrollbars) -------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 1px 1px 1px 1px; background-color: #e8e8e8; } ::-webkit-scrollbar-thumb { border: 6px solid #ccc; /*#ddd*/ background: #bbb; /*#ccc*/ border-radius: 1px 1px 1px 1px; margin: 0px auto; } ::-webkit-scrollbar-track { background: #eee; } /* Common class styles -------------------------------------------------- */ .border-top { border-top: 1px solid #e5e5e5; } .border-bottom { border-bottom: 1px solid #e5e5e5; } .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } .button.accept-policy { font-size: 1rem; line-height: inherit; } /* These styles are removed and effectively not used at all. - The style "display: normal;" is not a valid CSS display style and typically ignored. It would block or flex, but which is right? - It depends. - It´s best to NOT use this style at all and just add or remove the styles for "display:none" or "visibility:hidden". If all the these hidden styles are removed then the item is displayed in "normal" way. For the same reason it is not needed to explicitly use the style for "visibility: visible". .display-normal { display: normal; } X - No! .display-normal { display: block !important; } X - not needed - (if ever then maybe 1. choice ???) .display-normal { display: flex !important; } X - not needed - (if ever then maybe 2. choice, or even display:inline-flex ???) .visibility-visible { visibility: visible; } X - not needed */ .display-none { display: none !important; /*removes from layout, it means it shrinks the layout*/ } .visibility-hidden { visibility: hidden !important; /*keeps in layout but invisible, it means it keeps the gap*/ } /* Sticky styles -------------------------------------------------- */ html { display: block; height: 100%; /*width: 1200px;*/ /*width: 100%;*/ margin: 0; padding: 0; font-size: 14px; position: relative; } body { /*always needs an absolute width at the top level*/ /*https://www.quackit.com/css/flexbox/tutorial/nested_flex_containers.cfm*/ /*https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Flex-Items#flex*/ display: flex; flex-flow: column nowrap; overflow: hidden; /*Any scrolling must be handled by the elements that are inside*/ height: 100%; /*height: calc(100% - 5px);*/ /*-1px...-5px to avoid showing the vertical scrollbar, but then there is a small gap at the bottom.*/ /*width: 2560px;*/ /*width: 1200px;*/ /*width: 100%; calc(100% - 20px);*/ /*width: 100%;*/ /*width: 100vw;*/ /*height: calc(100vh - 20px);*/ /*min-height: calc(100vh - 20px);*/ margin: 0; padding: 0; } /* Main styles -------------------------------------------------- */ #id-container-header { /*flex-grow: 0; */ /*0 is default*/ /*flex-shrink: 0; */ /*0 is default*/ margin: 0; padding: 0; } #id-container-main { display: flex; flex-grow: 1; /*use full available height*/ flex-shrink: 2; /*allow to shrink less than the contents height, the contents must provide any scrolling if needed*/ /*overflow: auto;*/ overflow: hidden; /*margin: 4px 4px 5rem 4px;*/ /*not for flex, only when used with fixed bottom for bottom same value needed as in id-container-footer #FFFFF */ margin: 0px; padding: 0px 16px 4px 4px; min-width: 100%; min-height: 0; /*max-width: 100%;*/ /*width: 100%;*/ } #id-container-footer { /*flex-grow: 0; */ /*0 is default*/ /*flex-shrink: 0; */ /*0 is default*/ display: block; /*position: fixed;*/ /*bottom: 0;*/ /*white-space: nowrap;*/ background-color: #404040; /*#404040*/ margin: 0; padding: 0; } /* Navbar (inside of id-container-header) -------------------------------------------------- */ #id-container-navbar { overflow-x: auto; overflow-y: hidden; } /* background-image -------------------------------------------------- */ #homepage-background { border: none; /*5px solid black;*/ width: 100%; height: 100%; background-image: url(../images/Homepage.jpg); /*1004px 531px*/ background-size: auto; /*background-size: 1004px 531px;*/ background-repeat: no-repeat; background-position: top 0% left 0%; background-color: #fff; /*transparent;*/ /*#444;*/ } /*.homepage-backgroundimage {*/ /*visibility: hidden;*/ /*background-image: url(~/images/Homepage.jpg); width: 1004px; height: 531px; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;*/ /*background-position: left, center;*/ /*background-position: center, center;*/ /* margin: 4px 7px 2px 4px; padding: 4px 7px 2px 4px; */ /*}*/ /* Footer styles -------------------------------------------------- */ .footer-flex-v { display: flex; flex-direction: column; } .footer-flex-h { display: flex; align-items: center; /* vertikal mittig */ gap: 1rem; /* Abstand zwischen Logo und Controlbar */ width: 100%; } .branding-logo { height: 100%; max-height: 48px; width: auto; object-fit: contain; display: block; } #id-container-footer-controlbar { flex: 1; } /*buttons, id-container-controlbuttons*/ #id-container-controlbuttons { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; /*height: calc(32px + 16px + 1rem);*/ /*64px;*/ /*4rem;*/ /* #FFFFF */ } #id-controlbuttons-list { display: flex; justify-content: center; align-items: center; /*About the flex-wrap value:*/ /*- nowrap always shows all control buttons in the same row. First, words of a single element break break down to the next row. */ /* With nowrap, if the window becomes too narrow, the outer elements will move sideways out of the window.*/ /*- wrap can open a second row (or third and so on). The contents of each item will always be on a single line because it always has enough space.*/ flex-wrap: wrap; padding-top: 3px; } /*bottom, final row*/ #id-container-footer-info { display: flex; justify-content: center; align-items: center; /*height: 2rem;*/ /* #FFFFF */ /*Don´t set height to allow the container to grow along with the inner elements.*/ border-top: 1px solid #505050; margin: 0; padding: 0; font-size: 1rem; font-weight: 200; color: lightgrey; background-color: #666; } #id-footer-info-list { display: flex; justify-content: center; align-items: center; /*About the flex-wrap value:*/ /*- nowrap always shows all footer items in the same row. First, words of a single element break down to the next row. */ /* With nowrap, if the window becomes too narrow, the outer elements will move sideways out of the window.*/ /*- wrap can open a second row (or third and so on). The contents of each item will always be on a single line because it always has enough space.*/ flex-wrap: wrap; } /* Navbar styles -------------------------------------------------- */ a.navbar-brand { white-space: normal; text-align: center; word-break: break-all; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } #id-container-navbar { /*border: 3px solid blue;*/ /*background-color: See appsettings.json, #e8e8e8 #004488;*/ background-color: var(--primary-color); /*For the default value see at appsettings.json, it´s overridable in wwwroot\customer\custom.css*/ height: 6.7rem; /*If the scrollbar overlaps the buttons then this value is too small*/ /*width: max( (35px + 7 * (9rem + 10px) + 25px) , 100%);*/ /* 7 * for 7 nav-buttons*/ /*width: 100vw;*/ width: 100%; display: block; position: static; top: 0; left: 0; right: 0; /*width: 100%;*/ /*z-index: 500;*/ padding-left: 3px; padding-top: 2rem; /*space for nav title groups at the top: MONITORING, DATABASE, ADMINISTRATION*/ margin-bottom: 0px; } #id-container-navbar .container { /* border-style: solid; border-color: red; */ border-width: 1px; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; position: relative; width: 100%; } #id-container-navbar .nav-container { z-index: 200; /* border-style: solid; border-color: red; */ /*margin-bottom: 0;*/ } #id-container-navbar .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } #id-container-navbar .navbar-nav { margin: 0 0 0 0; padding: 0 0 0 0; /* padding-right: 0; padding-left: 0; */ /* margin-right: 0; margin-left: 0; */ /*align-items: center;*/ /*horizontal alignment in narrow display*/ } #id-container-navbar .nav-item-group { /*nav title groups at the top: MONITORING, DATABASE, ADMINISTRATION*/ /*background-color: lightcyan;*/ background-color: transparent; position: absolute; top: -1.4rem; height: 1.4rem; width: 18rem; margin: 0 0 0 5px; color: transparent; /*font-size: 1rem;*/ /*1rem is standard*/ } @media (min-width: 576px) { /*related to .d-sm-inline-flex for @media (min-width: 576px)*/ #id-container-navbar .nav-item-group { color: #8c8c8c; } } @media (min-width: 576px) { /*related to .d-sm-inline-flex for @media (min-width: 576px)*/ #id-container-navbar .nav-item-group { max-width: 540px; } } #id-container-navbar .nav-item { border-style: hidden; } /*frame buttons*/ #id-container-navbar .nav-item-frame { /*border: thin solid transparent;*/ /*border: 1px solid black;*/ /*border: 1px solid transparent;*/ border-width: 1px; border-style: hidden; /*changed by .nav-item-sel*/ /*border-color: black;*/ margin: 5px 3px 4px 3px; padding: 0px; background-color: transparent; position: relative; top: 0; } /*#id-container-navbar .nav-item-frame:hover,*/ #id-container-navbar .nav-item-sel { /*border-color: Highlight;*/ border-style: solid; margin: 2px; /*-1px because border-width is set to 1px*/ padding: 0px; } #id-container-navbar .nav-item-button { /*media-responsive, see below*/ /*background-color: #888888;*/ border-width: 1px; border-style: hidden; border-color: black; /*padding: 5px 4px 3px 8px;*/ padding: 0; margin: 2px; width: 9rem; height: 3.7rem; display: block; position: relative; top: 0; } #id-container-navbar .nav-item img { /*border: 1px solid red;*/ border: hidden; padding: 0; margin: 0; display: block; position: absolute; top: 5px; left: 8px; filter: brightness(130%); } #id-container-navbar a { /*border: 1px solid blue;*/ padding-left: 8px; padding-top: calc(5px + 24px + 5px); display: block; position: relative; width: 100%; height: 100%; /* top: calc(5px + 24px);*/ /*left: 8px;*/ } /*Color set for each button is general like this, to be defined as less-specific selector for the background-color*/ .nav-item-button { background-color: #444444; } /*Set brighter color for :hover, calculate foreach rgb component, e.g. for color value r (r=0..255): ColorValueForHover(r) = (255-r)*f + r with f=0.2 (20% brighter) */ .nav-item-button:hover { /*background-color: #9f9f9f;*/ } /*a .nav-link { display: block; width: 100%; height: 100%; } */ /*Color sets for the specific nav bar buttons*/ /**/ #frame-nav-online { border-color: #404040; } #button-nav-online, .online-color { background-color: #404040; color: white; } #button-nav-online:hover { background-color: #666666; } #button-nav-online:active { background-color: #848484; } /**/ #frame-nav-history { border-color: #0073c4; } #button-nav-history, .history-color { background-color: #0073c4; color: white; } #button-nav-history:hover { background-color: #338Fcf; } #button-nav-history:active { background-color: #5ba5d8; } /**/ #frame-nav-network { border-color: #cc6d00; } #button-nav-network, .network-color { background-color: #cc6d00; color: white; } #button-nav-network:hover { background-color: #d68a33; } #button-nav-network:active { background-color: #dea15b; } /**/ #frame-nav-device { border-color: #808080; } #button-nav-device, .device-color { background-color: #808080; color: white; } #button-nav-device:hover { background-color: #999999; } #button-nav-device:active { background-color: #adadad; } /**/ #frame-nav-devicetype { border-color: #bf9000; } #button-nav-devicetype, .devicetype-color { background-color: #bf9000; color: white; } #button-nav-devicetype:hover { background-color: #cba600; } #button-nav-devicetype:active { background-color: #d5b733; } /**/ #frame-nav-user { border-color: #00879c; } #button-nav-user, .user-color { background-color: #00879c; color: white; } #button-nav-user:hover { background-color: #339faf; } #button-nav-user:active { background-color: #5bb2bf; } /**/ #frame-nav-software { border-color: #3e7038; } #button-nav-software, .software-color { background-color: #3e7038; color: white; } #button-nav-software:hover { background-color: #648c5f; } #button-nav-software:active { background-color: #83a37f; } /**/ #frame-nav-privacy { border-color: #444444; } #button-nav-privacy, .privacy-color { background-color: #444444; } #button-nav-privacy:hover { background-color: #696969; } #button-nav-privacy:active { background-color: #878787; } /**/ #frame-nav-home { border-color: #444444; } #button-nav-home, .home-color { background-color: #444444; } #button-nav-home:hover { background-color: #696969; } #button-nav-home:active { background-color: #878787; } /* Main title styles -------------------------------------------------- */ /*below of the navbar: back-button + title*/ .main-back-title-height { height: 40px; } .main-back-title { position: static; display: flex; flex-direction: row; /*padding: 3px;*/ padding: 3px 3px 0px 3px; margin: 0; } .nav-item-back a { /*border: 1px solid blue;*/ padding: 0; margin: 0; display: block; position: relative; width: 40px; text-align: center; color: lightgray; /* top: -30px; height: 30px; */ border-radius: 15px; } .nav-item-back a:hover { text-decoration: none; color: #444; } .nav-item-back a:active { text-decoration: none; color: black; } .nav-item-back, .nav-item-back img { border-radius: 15px; } .nav-item-back img { filter: invert() brightness(0.25); /*almost black*/ } .nav-item-back img:hover { filter: invert() brightness(0.5); /*a dark gray*/ } .nav-item-back img:active { filter: invert() brightness(0.3); /*a darker black*/ } /*below of the navbar: title*/ #main-title-bar { /*background-color: #e8e8e8;*/ border-style: hidden; /* border-style: solid; border-color: green; */ display: block; position: static; width: 100%; height: 2rem; /*bottom: 0;*/ /*-2.2rem;*/ /*margin-bottom: 0;*/ /*0.2rem;*/ margin-top: 0px; margin-left: 3px; padding-left: 3px; color: #808080; font-size: larger; /*z-index: -100;*/ background-color: white; /*background-color: powderblue;*/ } /* Bottom item styles - Control buttons -------------------------------------------------- */ /*nav-link defines :hover, :focus .disabled in bootstrap.css*/ #id-container-controlbuttons .control-item { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; /*no effect with flex-wrap: nowrap*/ justify-content: center; align-items: center; box-sizing: border-box; margin: 0; padding: 0px 4px; /*height: 56px;*/ /*no fix height*/ /*width: 64px;*/ } #id-container-controlbuttons .control-item-sep { display: block; position: relative; box-sizing: content-box; height: 48px; width: 1px; margin: 0px 5px; padding: 0; border: hidden; background-color: white; } #id-container-controlbuttons .control-item div { /*background-color: #888888;*/ border-width: 1px; border-style: hidden; border-color: black; display: block; position: relative; top: 0; padding: 0; margin: 0; /*width: 100%;*/ height: 100%; } #id-container-controlbuttons .control-item img { filter: invert() brightness(400%); display: block; margin: auto; /*to center the image*/ } #id-container-controlbuttons .control-item button { filter: brightness(400%); display: block; margin: auto; /*to center the image*/ } #id-container-controlbuttons .control-item div:hover { filter: brightness(60%); } #id-container-controlbuttons .control-item div:active { filter: brightness(100%); } #id-container-controlbuttons .disable-footer-button { pointer-events: none; filter: brightness(70%); } #id-container-controlbuttons .button-state-active-footer-button { filter: brightness(70%); } #id-container-controlbuttons .hide-footer-button { display: none; } #id-container-controlbuttons a, #id-container-controlbuttons button { /*border: 1px solid blue;*/ display: block; position: relative; margin: auto; /*to center the text*/ box-sizing: content-box; font-weight: 200; border: hidden; padding: 0px; } #id-container-controlbuttons { } #id-container-controlbuttons .function-button { border-style: hidden; background-color: transparent; /*red;*/ filter: brightness(10); display: block; position: relative; top: 0px; justify-content: center; padding: 0px 6px; margin: auto; /*to center the text*/ box-sizing: content-box; font-weight: 200; } .control-button-text { display: flex; flex-direction: column; align-items: center; text-align: center; /*min-height: 2.5em;*/ /* Adjust as needed for your font size */ justify-content: center; } .control-button-base-text, .control-button-param-text { display: block; width: 100%; text-align: center; min-height: 1.2em; /* Ensures each line has height even if empty */ line-height: 1.2em; } /* Bottom item styles - General buttons at bottom corner -------------------------------------------------- */ #id-container-footer-info .general-item { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0 8px; } #id-container-footer-info { color: lightgrey; } #id-container-footer-info a { color: lightgrey; text-decoration: none; } #id-container-footer-info a:hover { text-decoration: underline; } /* Logout styles -------------------------------------------------- */ #login-logout-container { /*display: block;*/ /*position: absolute;*/ display: flex; justify-content: flex-start; align-items: center; margin-left: 40px; } #login-form, #logout-form { /* display: block; position: relative; */ height: 28px; } #login-button, #logout-button { display: flex; justify-content: flex-start; align-items: center; background-color: #444444; border: hidden; padding: 0 5px; color: lightgrey; background-color: transparent; } /* Search styles -------------------------------------------------- */ /* --- Container --- */ #search-container { display: flex; align-items: center; width: 16rem; height: 32px; } /* --- Form --- */ #search-item-form { display: flex; align-items: center; width: 100%; height: 100%; } /* --- Wrapper: Icons are placed inside of Input --- */ #search-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } /* --- Input --- */ #search-item-input { width: 100%; height: 24px; padding-left: 0px; padding-right: 0px; font-size: 1.0rem; font-weight: 200; color: #222; background-color: #aaa; border: none; box-sizing: border-box; } #search-item-input::placeholder { color: #777; } #search-item-input:focus { color: #222; background-color: #eee; outline: none; } /* --- Icons inside of Input --- */ .search-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; } /* Search Icon far right */ #search-symbol { right: 8px; padding-left: 4px; padding-right: 4px; } /* SearchClear Icon to the left of the Search Icon */ #searchclear-symbol { right: 30px; padding-left: 4px; display: none; /* Initial invisible */ } /*#search-button { background-color: #333333; border: thin solid #666666; } */ .form-button-display-none { display: none; } /* Select buttons at the left (in container-main-pane) -------------------------------------------------- */ .select-buttons-pane { /*height: 100%;*/ /*width: 200px;*/ margin: 0 3px; padding: 0 3px; border-style: hidden; border-color: black; /*background-color: transparent;*/ /*float: left;*/ /*display: block;*/ color: black; width: 200px; height: 100%; } .select-buttons-pane .select-button-top img { font-size: 1rem; color: #c0c0c0; } .select-button { height: 86px; width: 190px; margin: 0 0 10px 0; padding: 0 7px 3px 6px; border: thin solid #c0c0c0; font-family: 'Segoe UI'; /* same font&size as in WinApp */ font-size: 11pt; } .select-button-top { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center; color: #c0c0c0; font-size: 2.5em; height: 60px; } .select-button-bottom { } /* container-main-pane and select buttons show/hide at the left -------------------------------------------------- */ /*https://www.quackit.com/css/flexbox/tutorial/nested_flex_containers.cfm*/ /*https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Flex-Items#flex*/ .container-main-pane { display: flex; flex-flow: row nowrap; width: 100%; height: 100%; /*container-main-pane is inside of id-container-main*/ min-height: 0; } #button-show-left-bar1, #button-show-left-bar2 { flex: 0 0 17px; /*or must define as min-width*/ } .select-buttons-pane { flex: 0 0 204px; /*or must define as min-width*/ /*196+8px for the scrollbar to avoid the horizontal scrollbar from appearing simultaneously*/ /*width: 200px;*/ /*min-width: 200px;*/ height: 100%; overflow: auto; } .main-pane-formcontents { /*Use this if the main-pane contents is a form or a mixture form plus grid*/ flex: 1 1 auto; overflow: auto; height: 100%; width: 100%; margin-left: 0px; /*optional, suggested: 0...15px*/ margin-right: 0px; /*optional*/ } .main-pane-formcontents .row { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .main-pane-formcontents .col-md-12 { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .main-pane-gridcontents { /*Use this if the main-pane contents is fully a grid, e.g. typically in Index views*/ flex: 1 1 auto; /*overflow: auto;*/ height: 100%; width: 100%; } #button-hide-left-bar1, #button-hide-left-bar2 { flex: 0 0 17px; } #button-show-left-bar1, #button-show-left-bar2 { background: transparent url(../images/Arrows/arrow-right-13x25.png) no-repeat scroll center 30%; /* background-color: transparent; background-image: url(../images/Arrows/arrow-right-13x25.png); background-attachment: scroll; background-repeat: no-repeat; background-position: center 30%; */ } #button-hide-left-bar1, #button-hide-left-bar2 { background: transparent url(../images/Arrows/arrow-left-13x25.png) no-repeat scroll center 30%; } #button-show-left-bar1, #button-show-left-bar2, #button-hide-left-bar1, #button-hide-left-bar2 { /*float: left;*/ height: 100%; padding-top: 30%; margin-right: 3px; /*width: 17px;*/ /*min-width: 17px;*/ font-size: 3em; font-family: Consolas, Arial, monospace; font-weight: 200; color: #808080; } #button-show-left-bar1:hover, #button-show-left-bar2:hover, #button-hide-left-bar1:hover, #button-hide-left-bar2:hover { cursor: ew-resize; } .hide-left-bar { display: none; } .show-left-bar { display: block; /*float: left;*/ } /* Validation error for main-pain-contents -------------------------------------------------- */ .main-pane-gridcontents ul { margin: 0; } .main-pane-formcontents ul { margin: 0; } /* Password strength -------------------------------------------------- */ .password-strength-colors { background-color: transparent; height: 6px; border: 0px hidden transparent; } .password-strength-colors .dx-progressbar-container { background-color: transparent; border-style: hidden; padding: 0; margin: 0; } .password-strength-colors .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #ADFF2F ); /*from orange-red to green-yellow*/ border-style: hidden; } .password-strength-colors-1 .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #AD7F2F ); /*from orange-red to ...*/ border-style: hidden; } .password-strength-colors-2 .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #AD9F2F ); /*from orange-red to ...*/ border-style: hidden; } .password-strength-colors-3 .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #ADBF2F ); /*from orange-red to ...*/ border-style: hidden; } .password-strength-colors-4 .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #ADDF2F ); /*from orange-red to ...*/ border-style: hidden; } .password-strength-colors-5 .dx-progressbar-range { background-image: linear-gradient(to right, #FF4500, #ADFF2F ); /*from orange-red to ...*/ border-style: hidden; } /* DataGrid -------------------------------------------------- */ .custom-datagrid-admindata .dx-datagrid { min-height: 70px; /*max-height: 140px;*/ white-space: pre; word-wrap: normal; } .item-grid { } /* DataGrid highlight row colors -------------------------------------------------- */ /*focused row*/ .item-grid .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #404040 !important; color: white !important; } /*selected row*/ .item-grid .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td { background-color: #404040 !important; color: white !important; } /*login user row*/ .grid-row-login-user { background-color: lightgreen; color: black; } /* DataGrid item row colors CalBrighterColors.sln int cb = (int)((255 - c) * b) + c; with c=[r,g,b], b = 0.5 (for example) #00879c --> #7fc3cd (with b=0.5) #00 --> #7f #87 --> #c3 #9c --> #cd -------------------------------------------------- */ /*grid-online*/ .grid-header-online { background-color: #404040; /*c=[r,g,b] */ color: white; } .grid-row-even-online { background-color: #9f9f9f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-online { background-color: #cfcfcf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-grouprow-online-company { background-color: #A1A1A1; /*v1 : lighter motive*/ /*background-color: #9F9F9F;*/ /*v2 : darker motive */ color: #808080; font-weight: normal; } .grid-grouprow-online-station { background-color: #C3C3C3; /*v1 : lighter motive*/ /*background-color: #B7B7B7; */ /*v2 : darker motive */ color: #808080; font-weight: normal; } .compact-grid-header-online { background-color: #404040; color: white; padding-top: 2px !important; padding-bottom: 2px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-even-online { background-color: #F5F5F5; color: black; padding-top: 1px !important; padding-bottom: 1px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-odd-online { background-color: #E2E2E2; color: black; padding-top: 1px !important; padding-bottom: 1px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-even-online-mergecell { display: table-cell; vertical-align: middle !important; background-color: #F5F5F5 !important; padding-top: 1px !important; padding-bottom: 1px !important; color: black !important; font-size: 80%; } .compact-grid-row-odd-online-mergecell { display: table-cell; vertical-align: middle !important; background-color: #E2E2E2 !important; padding-top: 1px !important; padding-bottom: 1px !important; color: black !important; font-size: 80%; } .compact-grid-row-even-online-mergecellselected { background: black !important; color: white !important; } /*grid-history*/ .grid-header-history { background-color: #0073c4; /*c=[r,g,b] */ color: white; } .grid-row-even-history { /*background-color: #7fb9e1;*/ /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ background-color: #eaeff7; color: black; } .grid-row-odd-history { /*background-color: #bfdcf0;*/ /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ background-color: #d2deef; color: black; } #id-history-transformer-results-datagrid-results .dx-datagrid-rowsview .dx-row > td { background-color: #7FB9E1; /* normal data row */ } #id-history-transformer-results-datagrid-results .dx-datagrid-rowsview .dx-row-alt > td { background-color: #BFDCF0; /* alt data row; use RowAlternationEnabled */ } /* Hide auto-generated captions ("1", "2", "3", ...) while column meta is pending */ #id-history-transformer-results-datagrid-results.hwa-columnmeta-pending .dx-datagrid-headers .dx-header-row td .dx-datagrid-text-content { visibility: hidden !important; } .grid-grouprow-history-company { /*background-color: #7fb9e1;*/ /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ /* lighted 50% of .grid-header-history */ /*background-color: #BDD3ED;*/ /*v1 : lighter motive*/ background-color: #A2BFE8; /*v2 : darker motive */ color: #808080; font-weight: normal; } .grid-grouprow-history-station { /*background-color: #9fcae8;*/ /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.25*/ /* lighted 25% of .grid-grouprow-history-company */ /*background-color: #d2deef;*/ /*v1 : lighter motive*/ background-color: #B4CBEA; /*v2 : darker motive */ color: #808080; font-weight: normal; } .compact-grid-header-history { background-color: #0073c4; color: white; padding-top: 2px !important; padding-bottom: 2px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-even-history { background-color: #eaeff7; color: black; padding-top: 1px !important; padding-bottom: 1px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-odd-history { background-color: #d2deef; color: black; padding-top: 1px !important; padding-bottom: 1px !important; /*font-size: 12px;*/ font-size: 80%; } .compact-grid-row-even-history-mergecell { display: table-cell; vertical-align: middle !important; background-color: #eaeff7 !important; padding-top: 1px !important; padding-bottom: 1px !important; color: black !important; font-size: 80%; } .compact-grid-row-odd-history-mergecell { display: table-cell; vertical-align: middle !important; background-color: #d2deef !important; padding-top: 1px !important; padding-bottom: 1px !important; color: black !important; font-size: 80%; } .compact-grid-row-even-history-mergecellselected { background: black !important; color: white !important; } /*grid-network*/ .grid-header-network { background-color: #cc6d00; /*c=[r,g,b] */ color: white; } .grid-row-even-network { background-color: #e5b67f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-network { background-color: #f2dabf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-header-network-disabled { background-color: #d3d3d3; /*c=[r,g,b] */ color: black; } .grid-row-even-network-disabled { background-color: #e9e9e9; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-network-disabled { background-color: #f4f4f4; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-grouprow-network-company { background-color: #e5b67f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ /* lighted 50% of .grid-header-network */ color: #808080; font-weight: normal; } .grid-header-networkinfo { background-color: #CCCCCC; /*c=[r,g,b] */ color: black; } .grid-row-even-networkinfo { background-color: #E9E9E9; color: black; } .grid-row-odd-networkinfo { background-color: #F4F4F4; color: black; } .grid-grouprow-network-station { background-color: #ebc89f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.25*/ /* lighted 25% of .grid-grouprow-network-company */ color: #808080; font-weight: normal; } /*grid-device*/ .grid-header-device { background-color: #7B7B7B; /*c=[r,g,b] */ color: black; } .grid-header-device-lighted-25 { background-color: #9f9f9f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-header-device-lighted-50 { background-color: #bfbfbf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-header-device-lighted-75 { background-color: #dfdfdf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-row-even-device { background-color: #bfbfbf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-device { background-color: #dfdfdf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .grid-row-edit-device { background-color: white; color: black; } .grid-cell-header-device { background-color: #bfbfbf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-cell-readonly-device { background-color: #f1f1f1; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.90*/ color: black; } .grid-cell-edit-device { background-color: white; color: black; } .grid-cell-edit-device-disabled { background-color: white; color: lightgray; } /*grid-devicetype*/ .grid-header-devicetype { background-color: #bf9000; /*c=[r,g,b] */ color: white; } .grid-row-even-devicetype { /*first data row*/ background-color: #dfc77f; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-devicetype { /*second data row*/ background-color: #efe3bf; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } /*.modelcode-grid*/ .modelcodegrid-header { background-color: #dfc77f; /*devicetype: #bf9000;*/ color: black; /*devicetype: white;*/ } .modelcodegrid-row-even { /*first data row*/ background-color: #efe3bf; /*devicetype: #dfc77f;*/ color: black; } .modelcode-row-odd { /*2nd data row*/ background-color: #efe3bf; /*devicetype: #efe3bf;*/ color: black; } /*grid-user*/ .grid-header-user { background-color: #00879c; /*c=[r,g,b] */ color: white; } .grid-row-even-user { background-color: #7fc3cd; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-user { background-color: #bfe1e6; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } /*grid-software*/ .grid-header-software { background-color: #3e7038; /*c=[r,g,b] */ color: white; } .grid-row-even-software { background-color: #9eb79b; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.5*/ color: black; } .grid-row-odd-software { background-color: #cedbcd; /*int cb = (int)((255 - c) * b) + c; //with c=[r,g,b], b = 0.75*/ color: black; } .text-danger { background-color: #FFD4D4; } /* Form Group -------------------------------------------------- */ /* .customGroup .dx-form-group-content { border: 1px solid rgb(220, 220, 220); padding-left: 15px; padding-right: 15px; } */ /* .customGroup .dx-form-group-caption { font-size: 14px; padding-bottom: 0px; margin-bottom: 0px; } */ .custom-form-group-with-caption .dx-form-group-with-caption { border: 1px solid rgb(220, 220, 220); padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px } .custom-form-group-with-caption .dx-form-group-caption { font-size: 14px; font-weight: 600; line-height: 1.0; vertical-align:text-bottom; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px } /* Form Group Items -------------------------------------------------- */ /* Adjust the height of empty item to height of standard controls e.g. TextEdit, SelectBox etc .. */ .custom-empty-item .dx-empty-item { min-height: 48px !important; height: 48px !important; } /* Form Controls - Item width and some general useful shifts (maybe) -------------------------------------------------- */ .custom-input-minwidth-60 .dx-texteditor, .custom-input-minwidth-60 .dx-selectbox { min-width: 60px /*!important*/; box-sizing: border-box; } .custom-input-minwidth-80 .dx-texteditor, .custom-input-minwidth-80 .dx-selectbox { min-width: 80px /*!important*/; box-sizing: border-box; } .custom-input-minwidth-100 .dx-texteditor, .custom-input-minwidth-100 .dx-selectbox { min-width: 100px /*!important*/; box-sizing: border-box; } .custom-input-minwidth-150 .dx-texteditor, .custom-input-minwidth-150 .dx-selectbox { min-width: 150px /*!important*/; box-sizing: border-box; } .custom-input-minwidth-200 .dx-texteditor, .custom-input-minwidth-200 .dx-selectbox { min-width: 200px /*!important*/; box-sizing: border-box; } .custom-field-spacing { margin-bottom: 16px; } /* Align label to top edge when placed beside multi-line or tall inputs */ .custom-align-top-label .dx-field-item-label { align-self: flex-start; } /* Text Editors -------------------------------------------------- */ .custom-texteditor-input-status-error .dx-texteditor-input { background-color: rgba(228, 70, 70, 0.25); } .custom-texteditor-input-status-ok .dx-texteditor-input { background-color: rgba(77, 218, 68, 0.25); } .custom-texteditor-input-status-warning .dx-texteditor-input { background-color: rgba(248, 231, 5, 0.25); } .custom-texteditor-input-status-unknown .dx-texteditor-input { background-color: rgba(204, 204, 204, 0.25); } .custom-texteditor-input-status-info .dx-texteditor-input { background-color: rgba(0, 0, 128, 0.25); } .custom-texteditor-input-dgaadjustment-status-active .dx-texteditor-input { background-color: rgba(255, 255, 224, 1.0); font-size: smaller; padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } .custom-texteditor-input-licensekey .dx-texteditor-input { text-transform: uppercase; font-weight: bold; font-size:larger; } /* List -------------------------------------------------- */ .custom-list-item-hide-separators .dx-list-item { border-top: none; } /* Icons -------------------------------------------------- */ .custom-icon-size-32x16 .dx-icon { width: 32px; height: 16px; } .custom-icon-size-32x32 .dx-icon { width: 32px; height: 32px; } /* Buttons -------------------------------------------------- */ .custom-button-content-text-left .dx-button-content { text-align: left; } .custom-button-content-text-center .dx-button-content { text-align: center; } .custom-button-content-text-right .dx-button-content { text-align: right; } /* Next Group -------------------------------------------------- */ /* Template-Items -------------------------------------------------- */ .ip-row { display: flex; /* Align textbox and button in a single flex row */ gap: 8px; align-items: center; } .ip-row .dx-textbox { flex: 1; /* Textbox fills remaining space in flex row */ } #id-button-ping { background-color: #eee; border-radius: 4px; padding: 0 12px; height: 100%; box-sizing: border-box; } /*48x48 for use with img 48x48 at the left and custom-name at the right*/ .custom-item-48x48 { position: relative; min-height: 48px; } .dx-dropdowneditor-input-wrapper .custom-item-48x48 > img { padding-left: 8px; } .custom-item-48x48 .custom-title { font-size: 1rem; } .custom-item-48x48 .custom-name { display: inline-block; padding-left: calc(48px + 10px); text-indent: 0; line-height: 48px; height: 48px; width: 100%; font-size: 1rem; } .custom-item-48x48 > img { left: 1px; position: absolute; top: 50%; margin-top: calc(-48px / 2); } /*32x32 for use with img 32x32 at the left and custom-name at the right*/ .custom-item-32x32 { position: relative; min-height: 32px; } .dx-dropdowneditor-input-wrapper .custom-item-32x32 > img { padding-left: 8px; } .custom-item-32x32 .custom-title { font-size: 1rem; } .custom-item-32x32 .custom-name { display: inline-block; padding-left: calc(32px + 10px); text-indent: 0; line-height: 32px; height: 32px; width: 100%; font-size: 1rem; } .custom-item-32x32 > img { left: 1px; position: absolute; top: 50%; margin-top: calc(-32px / 2); } /*24x24 for use with img 24x24 at the left and custom-name at the right*/ .custom-item-24x24 { position: relative; min-height: 24px; } .dx-dropdowneditor-input-wrapper .custom-item-24x24 > img { padding-left: 8px; } .custom-item-24x24 .custom-title { font-size: 1rem; } .custom-item-24x24 .custom-name { display: inline-block; padding-left: calc(24px + 10px); text-indent: 0; line-height: 24px; height: 24px; width: 100%; font-size: 1rem; } .custom-item-24x24 > img { left: 1px; position: absolute; top: 50%; margin-top: calc(-24px / 2); } /*16x16 for use with img 16x16 at the left and custom-name at the right*/ .custom-item-16x16 { position: relative; min-height: 16px; } .dx-dropdowneditor-input-wrapper .custom-item-16x16 > img { padding-left: 8px; } .custom-item-16x16 .custom-title { font-size: 1rem; } .custom-item-16x16 .custom-name { display: inline-block; padding-left: calc(16px + 10px); text-indent: 0; line-height: 16px; height: 16px; width: 100%; font-size: 1rem; } .custom-item-16x16 > img { left: 1px; position: absolute; top: 50%; margin-top: calc(-16px / 2); } /* Some explicit max widths etc. -------------------------------------------------- */ .max-width-language { max-width: 800px; } /* Responsivity -------------------------------------------------- */ /*width limits e.g. 576px 768px 1200px 1400px 1680px 1980px 2600px */ /*.navbar-expand-sm --- 576px*/ @media (max-width: 575.98px) { #id-container-navbar .nav-item-button { margin: 0px; width: unset; /*9rem;*/ height: unset; /*3.7rem;*/ } #id-container-navbar { overflow-x: unset; overflow-y: unset; } } @media (min-width: 576px) { html { font-size: 16px; } } /* Indeterminate Progress Bar */ .indeterminate-progress-bar { height: 20px; background-color: white; width: 100%; overflow: hidden; border: solid; border-width: 1px; border-color: #676666; } .indeterminate-progress-bar-animation { width: 100%; height: 100%; background-color: #808080; animation: indeterminateAnimation 3s infinite linear; transform-origin: 0% 50%; } .indeterminate-progress-bar-noanimation { width: 100%; height: 100%; background-color: #808080; animation: none; transform-origin: 0% 50%; } @keyframes indeterminateAnimation { 0% { transform: translateX(0) scaleX(0); } 40% { transform: translateX(0) scaleX(0.4); } 100% { transform: translateX(100%) scaleX(0.5); } } /* end: Indeterminate Progress Bar */ /* Sidenav Communication*/ .sidenavCommunication { height: 100%; width: 0; position: fixed; z-index: 500; /* to be over the navbar buttons*/ top: 0; right: 0; background-color: #faf8d5; /*#404040*/ /*opacity: 0.85;*/ overflow-x: hidden; transition: 0.5s; padding-top: 0px; /*background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); */ /* border-width: 1px; */ /* border-color: #000000; */ /* border-style: solid; */ } .sidenavCommunication a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenavCommunication a:hover { color: #f1f1f1; } .sidenavCommunication .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenavCommunication { padding-top: 15px; } .sidenavCommunication a { font-size: 18px; } } .sidenav-header h1 { font-family: 'Segoe UI'; font-weight: bold; width: 100%; display: inline; background-color: #404040; color: white; font-weight: bold; text-align: center; font-size: 2em; } .sidenavCommunication hr { color: gray; display: block; margin-top: 4px; margin-bottom: 4px; margin-left: auto; margin-right: auto; border-style: solid; border-width: 1px; } .sidenavCommunication img-responsive-center { display: block; height: auto; max-width: 100%; margin-left: auto; margin-right: auto; } .sidenav-bold-text { color: #000000; font-family: 'Segoe UI'; font-size: 9pt; font-weight: bold; } .sidenav-normal-text { color: #000000; font-family: 'Segoe UI'; font-size: 9pt; font-weight: normal; } .sidenav-button { display: block; width: 100%; height: 20px; background-color: gray; border: solid; border-color: darkgray; color: white; padding: 12px 16px; font-size: 14px; cursor: pointer; border-width: 1px; } #id-sidenav-communication-panel .row { margin-top: 0px; margin-bottom: 0px; } #id-sidenav-communication-panel hr { margin-top: 4px; margin-bottom: 4px; } #id-sidenav-communication-panel .sidenav-bold-text { margin-top: 2px; margin-bottom: 0px; } #id-sidenav-communication-panel .sidenav-normal-text { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } /* Darker background on mouse-over */ /*.sidenav-button:hover { background-color: darkgray; }*/ /* Communication Popup */ .dx-overlay-content-normal .dx-overlay-content { background: #fff !important; } .dx-overlay-content-cancel .dx-overlay-content { background: #faf8d5 !important; } .dx-overlay-content-success .dx-overlay-content { background: #ADE244 !important; } .dx-overlay-content-error .dx-overlay-content { background: #FDAAAA !important; } /* end: Sidenav Communication*/ /* --------- Treelist-Network ----------------- */ .treelist-network { font-family: 'Segoe UI'; /* same font&size as in WinApp */ font-size: 11pt; } /*focused row*/ .treelist-network .dx-treelist-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #404040 !important; color: white !important; } /*selected row*/ .treelist-network .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td { background-color: #404040 !important; color: white !important; } .treelist-network-header { background-color: #C56900; color: white; height: 39px; } .treelist-network-row-disabled { color: #A0A0A0; } /* end: ----- Treelist-Network ----------------- */ /* --------- Treelist-Online ----------------- */ .treelist-online { font-family: 'Segoe UI'; /* same font&size as in WinApp */ font-size: 11pt; } /*focused row*/ .treelist-online .dx-treelist-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #404040 !important; color: white !important; } /*selected row*/ .treelist-online .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td { background-color: #404040 !important; color: white !important; } .treelist-online-header { background-color: #404040; /*#0073C4;*/ color: white; height: 39px; } .treelist-online-row-disabled { color: #A0A0A0; } /* end: ----- Treelist-Online ----------------- */ /* --------- Treelist-History ----------------- */ .treelist-history { font-family: 'Segoe UI'; /* same font&size as in WinApp */ font-size: 11pt; } /*focused row*/ .treelist-history .dx-treelist-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #404040 !important; color: white !important; } /*selected row*/ .treelist-history .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td { background-color: #404040 !important; color: white !important; } .treelist-history-header { background-color: #0073C4; color: white; height: 39px; } .treelist-history-row-disabled { color: #A0A0A0; } /* end: ----- Treelist-History ----------------- */ /* ------------------------ dx-splitter settings -----------------------------*/ /* Splitter Layout - includes: - TileButtons pane - NetworkControl pane - ChildView pane */ #id-splitter1 { display: flex; height: 100%; width: 100%; border: none; overflow: hidden; /*border: 1px solid red;*/ /*for debug view*/ /* border: 1px solid var(--dx-color-border); */ } /* fixed splitter1 width */ #id-splitter1 > .dx-splitter-item:has(.splitter-fixed-width-pane):not(.dx-splitter-item-hidden-content) { min-width: 205px; max-width: 205px; } #id-splitter2 { border: none; /*border: 1px solid blue;*/ /* uncomment for debug view */ /* border: 1px solid var(--dx-color-border); */ } #id-splitter-pane-childview { padding: 0px 0px 0px 0px; flex: 1 1 auto; /*height: auto;*/ height: 100%; width: 100%; border: none; position: relative; } .container-splitter-pane-tilebuttons { padding: 0px 10px 0px 5px; /* flex: 0 0 204px; */ /*or must define as min-width*/ /*196+8px for the scrollbar to avoid the horizontal scrollbar from appearing simultaneously*/ /* width: 200px; */ /* min-width: 200px; */ height: 100%; width: 100%; /* overflow: auto; */ border: none; } .container-splitter-pane-navi { padding: 0px 5px 0px 5px; flex: 1 1 auto; /*height: auto;*/ height: 100%; width: 100%; border: none; position: relative; } .container-splitter-pane-childview { padding: 0px 0px 0px 5px; flex: 1 1 auto; /*overflow: auto;*/ height: 100%; width: 100%; border: none; position: relative; /*border: 1px solid orange;*/ /*uncomment for debug view*/ /* margin-left: 0px; */ /*optional, suggested: 0...15px*/ /* margin-right: 5px; */ /*optional*/ min-height: 0; } .container-splitter-pane-childview .row { /*required to avoid the horizontal scrollbar without need*/ margin-left: 0px; /*optional, suggested: 0...15px, it would just create a left margin because row sets by default -15px and the inner col-md-* sets +15px*/ margin-right: 5px; /*A value of at least 0 or greater is needed, because row would set -15px and col-md-* sets +15px which together immediately causes the HScrollbar to show*/ } .container-splitter-pane-childview ul { margin: 0; } /* end: Splitter Layout */ .dx-splitter .dx-resize-handle { /*color: rgba(0,0,0,.87); background-color: rgba(0,0,0,.04)*/ color: rgba(0,0,0,.87) !important; background-color: white !important; display: flex; flex: 0 0 auto; justify-content: center; align-items: center; gap: 8px; /*distance between arrow and resize icon*/ overflow: hidden; } .dx-splitter .dx-resize-handle.dx-state-hover { color: rgba(0,0,0,.87) !important; background-color: rgba(0,0,0,.12) !important; } .dx-splitter .dx-resize-handle.dx-state-active { /*color: #fff; background-color: #03a9f4*/ color: rgba(0,0,0,.87) !important; background-color: rgba(0,0,0,.12) !important; } .dx-splitter .dx-resize-handle.dx-state-focused { /*color: #fff; background-color: #03a9f4*/ } .dx-splitter .dx-resize-handle .dx-icon { width: 24px; height: 24px; background-position: 0 0; background-size: 24px 24px; padding: 0; font-size: 24px; text-align: center; line-height: 24px } .dx-icon-triangleright:before { content: url(../images/Arrows/arrow-right-13x25.png) !important; /*content: "\f16d" !important; //original*/ } .dx-icon-triangleleft:before { content: url(../images/Arrows/arrow-left-13x25.png) !important; /*content: "\f16e" !important; //original*/ } .dx-icon-handlevertical { display: none !important; } /* ------------------------------------------------------------------------ */ /* View - Online - Companies - Summary */ /* ------------------------------------------------------------------------ */ .online-header-summary { margin-top: 0px; margin-bottom: 2px; margin-left: 0px; font-size: 14px; font-weight: bold; color: #8C8C8C; font-family: 'Segoe UI'; width: 100%; } #id-online-company-summary-grid-stations-summary { font-size: 85%; } /* ------------------------------------------------------------------------ */ /* View - History - Companies - Summary */ /* ------------------------------------------------------------------------ */ .history-header-summary { margin-top: 0px; margin-bottom: 2px; margin-left: 0px; font-size: 14px; font-weight: bold; color: #8C8C8C; font-family: 'Segoe UI'; width: 100%; } #id-history-company-summary-grid-stations-summary { font-size: 85%; } /* ------------------------------------------------------------------------ */ /* View - Network */ /* ------------------------------------------------------------------------ */ .group-network-company-info-data { } .group-network-company-info-grid { } .group-network-station-info-data { } .group-network-station-info-grid { } .group-network-transformer-info-data { } .group-network-transformer-info-grid { } .grid-header-network-transformer-info-devices { background-color: #CCCCCC; color: #000000; } .grid-row-even-network-transformer-info-devices { background-color: #E9E9E9; color: #000000; } .grid-row-odd-network-transformer-info-devices { background-color: #F4F4F4; color: #000000; } .grid-header-network-transformer-info-alerts { background-color: #CCCCCC; color: #000000; } .grid-row-even-network-transformer-info-alerts { background-color: #E9E9E9; color: #000000; padding-top: 1px !important; padding-bottom: 1px !important; } .grid-row-odd-network-transformer-info-alerts { background-color: #F4F4F4; color: #000000; padding-top: 1px !important; padding-bottom: 1px !important; } #id-network-transformerinfodevicealerts-grid { font-size: 85%; } .network-transformer-info-label-device { display: flex; justify-content: center; align-items: center; background-color: #CCCCCC; height: 32px; margin-bottom: -10px; padding-bottom: 0px; border-bottom: 0px; border-bottom: solid 1px #DDDDDD; } .network-transformer-info-label-alerts { display: flex; justify-content: center; align-items: center; background-color: #CCCCCC; height: 32px; margin-bottom: -10px; padding-bottom: 0px; border-bottom: 0px; border-bottom: solid 1px #DDDDDD; } .network-transformer-info-device-details { } .network-transformer-info-device-details.dx-form .dx-field-item-label { font-size: 85%; margin-right: 4px; } .network-transformer-info-device-details.dx-form .dx-texteditor-input { font-size: 85%; padding-top: 1px; padding-bottom: 1px; margin-top: 1px; margin-bottom: 1px; } .network-transformer-info-device-details.dx-form .dx-field-item { padding-top: 1px; padding-bottom: 1px; margin-top: 1px; margin-bottom: 1px; } .network-transformer-info-device-details.dx-form .dx-texteditor-container { padding-top: 1px; padding-bottom: 1px; margin-top: -6px; margin-bottom: -6px; } /* ------------------------------------------------------------------------ */ /* View - Maps */ /* ------------------------------------------------------------------------ */ .container-map-details-panel-network-company { top: 0; border: solid 3px #F4B183; margin-left: 10px; padding-right: 14px; margin-top: 10px; height: auto; width: 320px; position: absolute; background: #FBE5D6; border-radius: 8px; z-index: 10001; /* details panel is the top-most element of Map in z-order*/ } .container-map-details-panel-network-station { top: 0; border: solid 3px #F4B183; margin-left: 10px; padding-right: 14px; margin-top: 10px; height: auto; width: 320px; position: absolute; background: #FBE5D6; border-radius: 8px; z-index: 10001; /* details panel is the top-most element of Map in z-order*/ } .container-map-details-panel-network-transformer { top: 0; border: solid 3px #F4B183; margin-left: 10px; padding-right: 14px; margin-top: 10px; height: auto; width: 380px; position: absolute; background: #FBE5D6; border-radius: 8px; z-index: 10001; /* details panel is the top-most element of Map in z-order*/ } .container-map-details-panel-history-station { top: 0; border: solid 3px #F4B183; margin-left: 14px; padding-right: 14px; margin-top: 10px; height: auto; width: 540px; position: absolute; background: #FBE5D6; border-radius: 8px; z-index: 10001; /* details panel is the almost top-most element of Map in z-order*/ } /* The actual details panel (and the charts inside it) must be interactive */ .container-overlay-map-details-panel .container-map-details-panel-history-transformer { pointer-events: auto; } .container-map-details-panel-history-transformer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* This ensures it never overflows the parent */ border: solid 3px #F4B183; margin-left: 14px; padding-right: 14px; margin-top: 10px; margin-bottom: 10px; width: 550px; background: #FBE5D6; border-radius: 8px; z-index: 10001; /* details panel is the top-most element of Map in z-order*/ display: flex; flex-direction: column; } .container-map-history-transformer-details-panel { /*top: 0; border: solid 3px #F4B183; margin-left: 14px; padding-right: 14px; margin-top: 10px; height: 80%; width: 550px; position: absolute; background: #FBE5D6; border-radius: 8px; z-index: 10001;*/ /* details panel is the top-most element of Map in z-order*/ top: 0; border: solid 3px #f4b183; margin-left: 14px; padding-left: 4px; padding-right: 4px; padding-bottom: 2px; margin-top: 10px; height: 80%; box-sizing: border-box; width: 550px; position: absolute; background: #fbe5d6; border-radius: 8px; z-index: 10001; display: flex; flex-direction: column; } .map-details-panel-address-table { width: 100%; margin-bottom: 4px; table-layout: fixed; } .map-details-panel-address-table th { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; width: 25%; } .map-details-panel-address-table td { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; } .map-details-panel-owner-name-table { width: 100%; margin-bottom: -2px; table-layout: fixed; } .map-details-panel-owner-name-table th { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: gray; padding-left: 8px; width: 25%; } .map-details-panel-owner-name-table td { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: gray; padding-left: 8px; } .map-details-panel-header { font-weight: bold; font-family: 'Segoe UI'; font-size: 10pt; color: black; margin-left: 8px; margin-top: 4px; } .map-details-panel-hr { border-top: 1px solid #C8C8C8; margin-top: 4px; margin-bottom: 2px; margin-left: 8px; margin-right: -8px; } .map-details-panel-monitoring-devices-label { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; font-weight: bold; } .map-details-panel-monitoring-devices-table { width: 100%; margin-bottom: 4px; margin-left: 8px; margin-right: 10px; border: solid 1px #A0A0A0; } .map-details-panel-monitoring-devices-table th { background-color: #F4B183; text-align: center; font-family: 'Segoe UI'; font-size: 8pt; color: black; font-weight: bold; padding: 2px; border: solid 1px #E46714; } .map-details-panel-monitoring-devices-table td { text-align: center; font-family: 'Segoe UI'; font-size: 8pt; color: black; font-weight: normal; padding: 2px; border: solid 1px #A0A0A0; } .container-overlay-map-details-panel { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; /* Overlay must NOT eat events outside the panel */ pointer-events: none; /* pass-through to the map */ border: none; /*border: solid 1px orange;*/ } .container-map-details-panel-history-company { top: 0; border: solid 3px #C9C9C9; margin-left: 14px; padding-right: 14px; margin-top: 10px; height: auto; width: 320px; position: absolute; background-color: #EDEDED; border-radius: 8px; z-index: 10001; } .map-details-panel-history-company-substations-table { width: 100%; margin-bottom: 4px; table-layout: fixed; } .map-details-panel-history-company-substations-table th { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; padding-top: 0px; padding-bottom: 0px; width: 40%; } .map-details-panel-history-company-substations-table td { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; padding-top: 0px; padding-bottom: 0px; } .map-details-panel-history-company-summary-table { width: 100%; margin-bottom: 4px; table-layout: fixed; } .map-details-panel-history-company-summary-table th { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; width: 40%; vertical-align: middle; } .map-details-panel-history-company-summary-table td { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; vertical-align: middle; } .map-details-panel-history-company-summary-table td img { vertical-align: middle; margin-right: 4px; padding-bottom: 2px; } /* ---------------------------- Details panel DIV - evaluation colors */ .details-panel-color-ok { border: solid 3px #A9D18E; background-color: #E2F0D9; } .details-panel-color-error { border: solid 3px #FF8989; background-color: #FFDBDB; } .details-panel-color-warning { border: solid 3px #FFD966; background-color: #FFF2CC; } .details-panel-color-unknown { border: solid 3px #C9C9C9; background-color: #EDEDED; } .map-details-panel-label { text-align: left; font-family: 'Segoe UI'; font-size: 8pt; color: black; padding-left: 8px; font-weight: bold; padding-top: 4px; padding-bottom: 4px; } /* ---------------------------- Vector Maps */ #id-vector-map { height: 100% !important; width: 100% !important; min-height: 400px; } /* Ensure the SVG element inside VectorMap fills the container */ #id-vector-map svg { height: 100% !important; width: 100% !important; } #id-vector-map .dxm-marker.dxm-marker-selected text { font-weight: bold !important; } /*#id-vector-map .dxm-marker.dxm-marker-selected image { width: 32px; height: 32px; }*/ #id-vector-map .selection-background { pointer-events: none; } /* ---------------------------- Details panel Grid - History | Stations */ .history-station-summary-grid-transformers { font-family: 'Segoe UI'; font-size: 8pt; padding-left: 0px; margin-left: 8px; margin-bottom: 10px; } .history-station-summary-grid-transformers .dx-row { /*background-color: yellow !important;*/ color: black !important; font-family: 'Segoe UI'; font-size: 8pt; } .history-station-summary-grid-transformers .dx-row > th, .history-station-summary-grid-transformers .dx-row > td { padding-top: 3px !important; padding-bottom: 3px !important; } .history-station-summary-grid-transformers .dx-header-row { /*background-color: red !important;*/ color: black !important; font-family: 'Segoe UI'; font-size: 8pt; font-weight: bold; } .history-station-summary-grid-transformers .dx-header-row > th, .history-station-summary-grid-transformers .dx-header-row > td { padding-top: 3px !important; padding-bottom: 3px !important; } /* left alignment of 1st col*/ .history-station-summary-grid-transformers .dx-row > th:first-child, .history-station-summary-grid-transformers .dx-row > td:first-child, .history-station-summary-grid-transformers .dx-header-row > th:first-child, .history-station-summary-grid-transformers .dx-header-row > td:first-child { text-align: left !important; } .history-station-summary-grid-transformers .dx-datagrid-nodata, .history-station-summary-grid-transformers .dx-datagrid-nodata td, .history-station-summary-grid-transformers .dx-datagrid-rowsview .dx-row.dx-column-lines.dx-datagrid-nodata { background-color: transparent !important; color: black !important; font-family: 'Segoe UI'; font-size: 10pt; } .history-station-summary-grid-transformers .dx-datagrid-rowsview { background: transparent !important; } /* ---------------------------- Details panel Grid - evaluation colors */ .details-panel-grid-color-ok { } .details-panel-grid-color-ok .dx-row { background-color: #E2F0D9 !important; } .details-panel-grid-color-ok .dx-header-row { background-color: #A9D18E !important; } .details-panel-grid-color-error { } .details-panel-grid-color-error .dx-row { background-color: #FFDBDB !important; } .details-panel-grid-color-error .dx-header-row { background-color: #FF8989 !important; } .details-panel-grid-color-warning { } .details-panel-grid-color-warning .dx-row { background-color: #F9EDC7 !important; } .details-panel-grid-color-warning .dx-header-row { background-color: #FFD966 !important; } .details-panel-grid-color-unknown { } .details-panel-grid-color-unknown .dx-row { background-color: #EDEDED !important; } .details-panel-grid-color-unknown .dx-header-row { background-color: #C9C9C9 !important; } #id-map-details-panel-history-transformer-name { flex: 0 0 auto; border: none; /*border: solid 1px red;*/ /* Debug */ margin-left: 2px; margin-right: -12px; } .container-barchart { flex: 1 1 100%; min-height: 0; margin-right: -14px; margin-bottom: 4px; border: none; /*border: solid 1px blue;*/ /* Debug */ } .container-barchart-pane { /*flex: 0 0 100%; this is set dynamically in cshtml*/ min-height: 0; margin-left: 0px; margin-top: 1px; margin-bottom: 0px; margin-right: 0px; padding-bottom: 0; border: none; /*border: solid 1px orange;*/ /* Debug */ } /*Chart Control*/ .container-main-pane-chartcontents { /* Use this if the main-pane contents is fully a Chart Control, e.g. typically in Results/Alerts Graph mode */ flex: 1 1 auto; /*overflow: auto;*/ height: 100%; width: 100%; border: thin solid #c0c0c0; padding: 12px 12px 6px 12px; margin: 0px 0px 0px 0px; } #id-history-transformer-alerts-chart-alertresults { height: 100%; /* Important!!! it is necessary setting to strech the Chart Control inside the container "container-main-pane-chartcontents" without additional resizing on the Client side (JS) */ width: 100%; } .grid-alerts-settings { border-color: #808080 !important; } .grid-alerts-settings .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #e0e0e0 !important; color: black !important; border: none !important; } .grid-header-alerts-settings { background-color: #f0f0f0; color: black; } .colorbox-alerts-settings-linecolor { } .colorbox-alerts-settings-linecolor .dx-colorbox-color-result-preview { width: 75%; } .colorbox-alerts-settings-linecolor .dx-colorbox-input-container .dx-colorbox-input.dx-texteditor-input { visibility: hidden; } .numberbox-alerts-settings-linethickness { } .numberbox-alerts-settings-linethickness .dx-texteditor-input { pointer-events: none; background-color: #f5f5f5; color: #aaa; } /* ------------------------------------------------------------------------ */ /* View - Diagnostics - DuvalTriangle */ /* ------------------------------------------------------------------------ */ /* Chart - Diagnostics - Duval Triangle - Diagram */ #id-history-transformer-diagnostics-duvaltriangle-chart-diagram { height: 100%; aspect-ratio: 1/1; /* Modern browsers: keeps width = height */ width: auto; /* Let width be determined by aspect-ratio and height */ max-width: 100%; /* Prevent overflow if parent is not square */ display: block; margin: 0 auto; /* Center horizontally if parent is wider */ } /* Chart - Diagnostics - Duval Triangle - Results */ #id-history-transformer-diagnostics-duvaltriangle-chart-results { height: 100%; /* Important!!! it is necessary setting to strech the Chart Control inside the container "container-main-pane-chartcontents" without additional resizing on the Client side (JS) */ width: 100%; } /* DataNavigator - Diagnostics - Duval Triangle - Diagram */ #id-datanavigator-diagnostics-duvaltriangle .dx-toolbar-items-container { height: 50px; width: 100%; min-height: 48px; max-height: 48px; padding: 0px; margin: 0px; display: flex; justify-content: flex-start !important; } #id-datanavigator-diagnostics-duvaltriangle .datanavigator-btn { padding: 0px; margin: 0px; } #id-datanavigator-diagnostics-duvaltriangle .datanavigator-info { } /* ------------------------------------------------------------------------ */ /* View - Diagnostics - DuvalPentagon */ /* ------------------------------------------------------------------------ */ /* Chart - Diagnostics - Duval Pentagon - Diagram */ #id-history-transformer-diagnostics-duvalpentagon-chart-diagram { height: 100%; aspect-ratio: 1/1; /* Modern browsers: keeps width = height */ width: auto; /* Let width be determined by aspect-ratio and height */ max-width: 100%; /* Prevent overflow if parent is not square */ display: block; margin: 0 auto; /* Center horizontally if parent is wider */ } /* Chart - Diagnostics - Duval Pentagon - Results */ #id-history-transformer-diagnostics-duvalpentagon-chart-results { height: 100%; /* Important!!! it is necessary setting to strech the Chart Control inside the container "container-main-pane-chartcontents" without additional resizing on the Client side (JS) */ width: 100%; } /* DataNavigator - Diagnostics - Duval Pentagon - Diagram */ #id-datanavigator-diagnostics-duvalpentagon .dx-toolbar-items-container { height: 50px; width: 100%; min-height: 48px; max-height: 48px; padding: 0px; margin: 0px; display: flex; justify-content: flex-start !important; } #id-datanavigator-diagnostics-duvalpentagon .datanavigator-btn { padding: 0px; margin: 0px; } #id-datanavigator-diagnostics-duvalpentagon .datanavigator-info { } /* ------------------------------------------------------------------------ */ /* View - Diagnostics - Rogers */ /* ------------------------------------------------------------------------ */ /* Chart - Diagnostics - Rogers - Diagram */ #id-history-transformer-diagnostics-rogers-chart-diagram { height: 100%; aspect-ratio: 1/1; /* Modern browsers: keeps width = height */ width: auto; /* Let width be determined by aspect-ratio and height */ max-width: 100%; /* Prevent overflow if parent is not square */ display: block; margin: 0 auto; /* Center horizontally if parent is wider */ } /* Chart - Diagnostics - Rogers - Results */ #id-history-transformer-diagnostics-rogers-chart-results { height: 100%; /* Important!!! it is necessary setting to strech the Chart Control inside the container "container-main-pane-chartcontents" without additional resizing on the Client side (JS) */ width: 100%; } /* DataNavigator - Diagnostics - Rogers - Diagram */ #id-datanavigator-diagnostics-rogers .dx-toolbar-items-container { height: 50px; width: 100%; min-height: 48px; max-height: 48px; padding: 0px; margin: 0px; display: flex; justify-content: flex-start !important; } #id-datanavigator-diagnostics-rogers .datanavigator-btn { padding: 0px; margin: 0px; } #id-datanavigator-diagnostics-rogers .datanavigator-info { } /* ------------------------------------------------------------------------ */ /* View - Diagnostics - PolarPlot */ /* ------------------------------------------------------------------------ */ /* Chart - Diagnostics - PolarPlot - Diagram */ #id-history-transformer-diagnostics-polarplot-chart-diagram { height: 100%; aspect-ratio: 1/1; /* Modern browsers: keeps width = height */ width: auto; /* Let width be determined by aspect-ratio and height */ max-width: 100%; /* Prevent overflow if parent is not square */ display: block; margin: 0 auto; /* Center horizontally if parent is wider */ } /* Chart - Diagnostics - PolarPlot - Results */ #id-history-transformer-diagnostics-polarplot-chart-results { height: 100%; /* Important!!! it is necessary setting to strech the Chart Control inside the container "container-main-pane-chartcontents" without additional resizing on the Client side (JS) */ width: 100%; } /* DataNavigator - Diagnostics - PolarPlot - Diagram */ #id-datanavigator-diagnostics-polarplot .dx-toolbar-items-container { height: 50px; width: 100%; min-height: 48px; max-height: 48px; padding: 0px; margin: 0px; display: flex; justify-content: flex-start !important; } #id-datanavigator-diagnostics-polarplot .datanavigator-btn { padding: 0px; margin: 0px; } #id-datanavigator-diagnostics-polarplot .datanavigator-info { } /* ------------------------------------------------------------------------ */ /* View - Diagnostics */ /* ------------------------------------------------------------------------ */ .grid-diagnostics-settings { border-color: #808080 !important; } .grid-diagnostics-settings .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) { background-color: #e0e0e0 !important; color: black !important; border: none !important; } .grid-header-diagnostics-settings { background-color: #f0f0f0; color: black; } .colorbox-diagnostics-settings-linecolor { } .colorbox-diagnostics-settings-linecolor .dx-colorbox-color-result-preview { width: 75%; } .colorbox-diagnostics-settings-linecolor .dx-colorbox-input-container .dx-colorbox-input.dx-texteditor-input { visibility: hidden; } .numberbox-diagnostics-settings-linethickness { } .numberbox-diagnostics-settings-linethickness .dx-texteditor-input { pointer-events: none; background-color: #f5f5f5; color: #aaa; } .container-splitter-pane-childview-diagnostics-diagram { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; border: none; padding: 0px 0px 0px 5px; } .container-pane-chartcontents-diagnostics-diagram { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; border: thin solid #c0c0c0; padding: 12px 12px 6px 12px; margin: 0px 0px 0px 0px; } .container-pane-datanavigator-diagnostics-diagram { flex: 0 0 50px; height: 50px; min-height: 50px; max-height: 50px; width: 100%; border: thin solid #c0c0c0; padding: 0px; margin: 0px; z-index: 1; } /* History Chart */ #id-history-transformer-results-chart { height: 100%; width: 100%; flex: 1 1 auto; } /* end: History Chart */ /* Details Panel Tooltip */ /* Center DevExtreme chart tooltip lines (History Transformers) */ .dx-tooltip .dx-chart-tooltip.tt-center, .dx-chart-tooltip.tt-center { text-align: center; } /* Keep icon+value on one centered line with proper spacing */ .dx-chart-tooltip.tt-center .tt-row-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* Status icon sizing/alignment moved from inline styles */ .dx-chart-tooltip.tt-center .tt-status-icon { width: 12px; height: 12px; vertical-align: middle; } /* Placeholder to reserve space when no icon is present */ .dx-chart-tooltip.tt-center .tt-status-placeholder { display: inline-block; width: 12px; height: 12px; } /* end: Details Panel Tooltip */ .popup-device-password-info-text { font-family: 'Segoe UI'; font-size: 13px; color: #000000; width: 100%; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } .control-button-tooltip-container { position: absolute; display: block; background: #ffffff; color: #000000; border: 1px solid #cccccc; padding: 0px; z-index: 9999; white-space: nowrap; } .control-button-tooltip-close-button-container { position: relative; height: 22px; display: flex; justify-content: flex-end; align-items: center; margin: 0px; color: #000000; background: #d0d0d0; } .control-button-tooltip-close-button { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; padding: 0px; margin: 0px; font-size: 8px; font-weight: bold; color: #ffffff; background: #a0a0a0; } /* ── Communication Status Monitor ───────────────────────────────────────────── */ #id-comm-status-monitor { background-color: #404040; border-top: 1px solid #505050; font-size: 0.70rem; color: lightgrey; } .comm-status-monitor-header { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; user-select: none; background-color: #666; border-bottom: 1px solid #505050; } .comm-status-monitor-header:hover { background-color: #737373; } .comm-status-monitor-toggle-icon { font-size: 0.65rem; color: rgba(255, 255, 255, 0.6); width: 10px; flex-shrink: 0; } .comm-status-monitor-title { font-weight: 600; font-size: 0.72rem; color: #f0f0f0; } .comm-status-monitor-count { color: rgba(255, 255, 255, 0.55); font-size: 0.70rem; } .comm-status-monitor-body { max-height: 160px; overflow-y: auto; } /* ── Grid / table ────────────────────────────────────────────────────────────── */ .comm-status-monitor-table { width: 100%; border-collapse: collapse; font-size: 0.68rem; } .comm-status-monitor-table thead th { position: sticky; top: 0; background-color: #505050; text-align: left; font-weight: 600; font-size: 0.66rem; color: rgba(255, 255, 255, 0.65); padding: 3px 8px; border-bottom: 1px solid #606060; } .comm-status-col-device { width: 25%; } .comm-status-col-connection { width: 25%; } .comm-status-col-status { width: 45%; } .comm-status-col-close { width: 20px; } .comm-task-row td { padding: 2px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm-task-row:nth-child(even) td { background-color: #454545; } .comm-task-row-device { font-weight: 500; color: #e8e8e8; } .comm-task-row-connection { color: rgba(255, 255, 255, 0.55); } /* ── Status dot ──────────────────────────────────────────────────────────────── */ .comm-task-row-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; background-color: #4a9edd; } .comm-task-row-running .comm-task-row-status-dot { background-color: #4a9edd; animation: comm-status-dot-pulse 1.2s ease-in-out infinite; } .comm-task-row-success .comm-task-row-status-dot { background-color: #2ecc71; animation: none; } .comm-task-row-error .comm-task-row-status-dot { background-color: #e74c3c; animation: none; } .comm-task-row-cancel .comm-task-row-status-dot { background-color: #e0a030; animation: none; } @keyframes comm-status-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .comm-task-row-close-btn { background: none; border: none; color: rgba(255, 255, 255, 0.45); font-size: 0.7rem; cursor: pointer; padding: 0 2px; line-height: 1; } .comm-task-row-close-btn:hover { color: #ffffff; } /* ── END: Communication Status Monitor ───────────────────────────────────────────── */