Added minimal functionality for Robot teaching
- Added minimal HMI - Added possibility to open and close all chamber doors
This commit is contained in:
446
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiTreeView/Style.css
vendored
Normal file
446
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiTreeView/Style.css
vendored
Normal file
@@ -0,0 +1,446 @@
|
||||
/** Styles for all themes */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView {
|
||||
/* Prevent overflow if the border radius is huge */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template
|
||||
tr:not(.expanded)
|
||||
> td
|
||||
> .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon::before {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template
|
||||
tr.expanded
|
||||
> td
|
||||
> .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell-expand-icon::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-border {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-table {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
/* Browser default is 3 px! */
|
||||
border-top-width: 0px;
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
padding: 0px; /*padding not specify, adapt by header-height*/
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-border {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid; /* table border **/
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-border > table {
|
||||
height: 100%;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element.sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element-child {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-resize-element {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 8px; /* keep in sync with ./TcHmiTreeView.ts (__resizeElementMinWidth) */
|
||||
right: -4px; /* negative half of width */
|
||||
z-index: 1;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-header.resizable
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-resize-element {
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row.hidden {
|
||||
/* Hide a row without unfocusing controls in that row */
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row-numbers {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border-right: 1px solid; /* table border **/
|
||||
border-bottom: 1px solid; /* table border **/
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
th.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row-numbers {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
td.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-row-numbers {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-placeholder {
|
||||
height: 100%;
|
||||
min-width: 17px; /* width of scrollbar in all major browsers */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll tbody tr.focused > td::before,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-data-scroll tbody tr:hover > td::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* height: 10000px; */ /* Because Internet Explorer cannot deal with height: 100% on absolute positioned elements when the parent is a table cell. */
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: background ease 0.4s;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell {
|
||||
display: inline-flex;
|
||||
/* Browser default is 3 px! */
|
||||
border-top-width: 0px;
|
||||
border-left-width: 0px;
|
||||
white-space: pre;
|
||||
border-right: 1px solid; /* table border **/
|
||||
border-bottom: 1px solid; /* table border **/
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-overflow: clip;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell.textbox {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell img {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='checkbox'] {
|
||||
/* hide the checkbox itself, whole logic is on the styled label */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='checkbox'] + label {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='radio'] {
|
||||
/* hide the checkbox itself, whole logic is on the styled label */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='radio'] + label {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='text'],
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[inputmode='decimal'],
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell input[type='password'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
white-space: nowrap;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-input,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-date-time-input,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-timespan-input {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
white-space: nowrap;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeview-input-unit {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding: 0 3px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-button:not(.TcHmi_Controls_Beckhoff_TcHmiTreeView-date-time-button):not(
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-timespan-button
|
||||
)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/*--------------------------------------------Button--------------------------------------------------------------*/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-button {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-size: 100%;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
pointer-events: none; /* Be transparent to pointer events, so the root element receives them and we dont have to deal with SVGElements not having classList in IE. */
|
||||
}
|
||||
|
||||
/*--------------------------------------------select--------------------------------------------------*/
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-select {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 26px);
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*-----------------------table--------------------------------------*/
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown {
|
||||
position: absolute;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-combobox-template-dropdown-element {
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.TcHmi_Controls_System_TcHmiControl-operate-disallowed
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-sort-element,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.TcHmi_Controls_System_TcHmiControl-operate-disallowed
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-resize-element {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* The main use for this control is interaction. So mark when this is not allowed. */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.TcHmi_Controls_System_TcHmiControl-operate-disallowed
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
z-index: 100;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-scroll-sentinel-bottom {
|
||||
min-height: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-label-first-column-horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-label-first-column-horizontal-right {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only input[type='checkbox'][readonly],
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only input[type='checkbox'][readonly] + label,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only input[type='radio'][readonly],
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only input[type='radio'][readonly] + label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-Message {
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView.read-only .TcHmi_Controls_Beckhoff_TcHmiTreeView-spinbox-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*background-color: rgba(255, 255, 255, 0.5); color is defined in theme css*/
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView label {
|
||||
z-index: 5;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView tr:nth-child(2n) label::before {
|
||||
background: #eee !important;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-textbox:not(:invalid)
|
||||
+ .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-input-invalid-notification,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-password-input:not(:invalid)
|
||||
+ .TcHmi_Controls_Beckhoff_TcHmiTreeView-template-input-invalid-notification {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-input-invalid-notification,
|
||||
.tchmi-template-input-invalid-notification {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
pointer-events: none;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiTreeView-template-input-invalid-notification.orientation-left,
|
||||
.tchmi-template-input-invalid-notification.orientation-left {
|
||||
left: 0px;
|
||||
right: unset;
|
||||
}
|
||||
Reference in New Issue
Block a user